/* ==========================================================================
   Consulting Quan S.A.C. — sistema de diseno
   Tinta y terracota. Mobile-first.
   ========================================================================== */

:root {
  /* Color */
  --tinta: #141414;
  --terracota: #A94C1A;
  --terracota-oscuro: #8F3F14;
  --ocre: #D89B5E;
  --papel: #FAF7F2;
  --papel-hondo: #F2EBE1;
  --gris-texto: #5A544E;
  --blanco: #FFFFFF;
  --borde: rgba(20, 20, 20, 0.10);

  /* Espaciado, multiplos de 4px */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 1rem;
  --e4: 1.5rem;
  --e5: 2rem;
  --e6: 3rem;
  --e7: 4.5rem;
  --e8: 7rem;

  /* Tipografia */
  --serif: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* Otros */
  --radio: 14px;
  --radio-chico: 8px;
  --sombra: 0 1px 2px rgba(20, 20, 20, 0.04), 0 8px 24px rgba(20, 20, 20, 0.06);
  --sombra-alta: 0 2px 4px rgba(20, 20, 20, 0.06), 0 20px 48px rgba(20, 20, 20, 0.12);
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --ancho: 1200px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gris-texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- Tipografia --- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--tinta);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
h4 { font-size: 1.0625rem; }
p { text-wrap: pretty; }

a { color: var(--terracota); text-decoration: none; transition: color 0.2s var(--curva); }
a:hover { color: var(--terracota-oscuro); }

:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Layout --- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e4);
}
.seccion { padding-block: var(--e7); }
.seccion--alterna { background: var(--papel-hondo); }
.seccion--tinta { background: var(--tinta); color: rgba(255, 255, 255, 0.72); }
.seccion--tinta h2, .seccion--tinta h3 { color: var(--blanco); }

@media (min-width: 768px) {
  .contenedor { padding-inline: var(--e5); }
  .seccion { padding-block: var(--e8); }
}

.rejilla { display: grid; gap: var(--e4); }
@media (min-width: 640px) {
  .rejilla--2, .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Encabezados de seccion --- */
.etiqueta-seccion {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: var(--e3);
}
.etiqueta-seccion::before {
  content: '';
  width: 28px;
  height: 2px;
  background: currentColor;
}
.titulo-seccion { max-width: 22ch; }
.entradilla {
  max-width: 62ch;
  margin-top: var(--e3);
  font-size: 1.0625rem;
}

/* --- Botones --- */
.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 0.9rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s var(--curva), box-shadow 0.3s var(--curva), color 0.3s var(--curva);
}
.boton:active { transform: scale(0.97); }

.boton--primario {
  background: linear-gradient(120deg, var(--terracota) 0%, var(--terracota-oscuro) 100%);
  color: var(--blanco);
  box-shadow: 0 4px 16px rgba(169, 76, 26, 0.28);
}
.boton--primario:hover {
  color: var(--blanco);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(169, 76, 26, 0.38);
}

.boton--fantasma {
  background: transparent;
  border-color: var(--borde);
  color: var(--tinta);
}
.boton--fantasma::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tinta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--curva);
}
.boton--fantasma:hover { color: var(--blanco); border-color: var(--tinta); }
.boton--fantasma:hover::before { transform: scaleX(1); }

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e5);
}

/* --- Tarjetas --- */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--e5);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--gris-texto);
  transition: transform 0.4s var(--curva), box-shadow 0.4s var(--curva), border-color 0.4s var(--curva);
}
a.tarjeta:hover { color: var(--gris-texto); }
.tarjeta h3 { margin-bottom: var(--e2); }
.tarjeta p { font-size: 0.9375rem; }

a.tarjeta:hover, .tarjeta--interactiva:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-alta);
  border-color: rgba(169, 76, 26, 0.35);
}

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--e4);
  border-radius: var(--radio-chico);
  background: var(--papel-hondo);
  color: var(--terracota);
  transition: background 0.4s var(--curva), color 0.4s var(--curva), transform 0.4s var(--curva);
}
a.tarjeta:hover .tarjeta__icono, .tarjeta--interactiva:hover .tarjeta__icono {
  background: var(--terracota);
  color: var(--blanco);
  transform: scale(1.06) rotate(-3deg);
}
.tarjeta__enlace {
  margin-top: auto;
  padding-top: var(--e4);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--terracota);
}
.tarjeta__numero {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ocre);
  margin-bottom: var(--e3);
}

/* --- Listas --- */
.lista-marcada { display: grid; gap: var(--e3); }
.lista-marcada li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.9375rem;
}
.lista-marcada li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--terracota);
}

/* --- Utilidades --- */
.centrado { text-align: center; }
.centrado .titulo-seccion, .centrado .entradilla { margin-inline: auto; }
.centrado .etiqueta-seccion::before { display: none; }
.centrado .grupo-botones { justify-content: center; }
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Cabecera
   ========================================================================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 242, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--curva), box-shadow 0.3s var(--curva), background 0.3s var(--curva);
}
.cabecera.esta-desplazada {
  border-bottom-color: var(--borde);
  box-shadow: 0 4px 20px rgba(20, 20, 20, 0.05);
}
.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 76px;
  transition: min-height 0.3s var(--curva);
}
.cabecera.esta-desplazada .cabecera__interior { min-height: 64px; }

.marca { display: flex; align-items: center; gap: 0.7rem; color: var(--tinta); }
.marca:hover { color: var(--tinta); }
.marca img { width: 38px; height: auto; transition: transform 0.4s var(--curva); }
.marca:hover img { transform: rotate(-4deg) scale(1.06); }
.marca__nombre { font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; line-height: 1.15; }
.marca__bajada {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracota);
}

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: var(--e4); }
.nav a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tinta);
  padding-block: 0.4rem;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--terracota);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--curva);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--terracota); }

.cabecera__acciones { display: none; }

.menu-boton {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  cursor: pointer;
}
.menu-boton__barras { position: relative; width: 20px; height: 2px; background: var(--tinta); transition: background 0.2s; }
.menu-boton__barras::before, .menu-boton__barras::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--tinta);
  transition: transform 0.35s var(--curva);
}
.menu-boton__barras::before { top: -6px; }
.menu-boton__barras::after { top: 6px; }
.menu-boton[aria-expanded="true"] .menu-boton__barras { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__barras::before { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__barras::after { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 960px) {
  .nav, .cabecera__acciones { display: flex; align-items: center; gap: var(--e4); }
  .menu-boton { display: none; }
}

/* Menu movil */
.menu-movil {
  position: fixed;
  inset: 76px 0 0 0;
  z-index: 99;
  padding: var(--e5) var(--e4) var(--e7);
  background: var(--papel);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s var(--curva), transform 0.3s var(--curva), visibility 0.3s;
}
.menu-movil.esta-abierto { opacity: 1; visibility: visible; transform: none; }
.menu-movil ul { display: grid; gap: var(--e2); }
.menu-movil a {
  display: block;
  padding: var(--e3) 0;
  font-family: var(--serif);
  font-size: 1.375rem;
  color: var(--tinta);
  border-bottom: 1px solid var(--borde);
}
.menu-movil a[aria-current="page"] { color: var(--terracota); }
.menu-movil .boton { margin-top: var(--e5); width: 100%; }
body.menu-abierto { overflow: hidden; }
@media (min-width: 960px) { .menu-movil { display: none; } }

/* ==========================================================================
   Pie
   ========================================================================== */
.pie { background: var(--tinta); color: rgba(255, 255, 255, 0.66); padding-block: var(--e7) var(--e5); }
.pie a { color: rgba(255, 255, 255, 0.66); }
.pie a:hover { color: var(--ocre); }
.pie__rejilla { display: grid; gap: var(--e6); }
@media (min-width: 768px) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie__marca { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--e3); color: var(--blanco); }
.pie__marca img { width: 42px; }
.pie__marca span { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; color: var(--blanco); }
.pie h4 {
  color: var(--blanco);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--e3);
}
.pie ul { display: grid; gap: var(--e2); font-size: 0.9375rem; }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e3);
  margin-top: var(--e6);
  padding-top: var(--e4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem;
}

/* Boton flotante de WhatsApp */
.whatsapp-flotante {
  position: fixed;
  right: var(--e4);
  bottom: var(--e4);
  z-index: 95;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: var(--blanco);
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.42);
  transition: transform 0.3s var(--curva), box-shadow 0.3s var(--curva);
}
.whatsapp-flotante:hover {
  color: var(--blanco);
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5);
}
.whatsapp-flotante svg { width: 28px; height: 28px; fill: currentColor; }

/* ==========================================================================
   Portada
   ========================================================================== */
.portada {
  position: relative;
  padding-block: var(--e7) var(--e8);
  background:
    radial-gradient(900px 500px at 82% 8%, rgba(216, 155, 94, 0.20), transparent 62%),
    radial-gradient(700px 420px at 10% 88%, rgba(169, 76, 26, 0.12), transparent 60%),
    var(--papel);
  overflow: hidden;
}
.portada__rejilla { display: grid; gap: var(--e6); align-items: center; }
@media (min-width: 960px) {
  .portada__rejilla { grid-template-columns: 1.15fr 0.85fr; gap: var(--e7); }
}
.portada h1 { margin-bottom: var(--e4); }
.portada h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--terracota), var(--ocre));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.portada__entradilla { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); max-width: 54ch; }

.portada__avales {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  margin-top: var(--e6);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
  font-size: 0.875rem;
}
.portada__avales span { display: flex; align-items: center; gap: var(--e2); }
.portada__avales span::before { content: '\2713'; color: var(--terracota); font-weight: 700; }

.sello-portada { display: none; }
@media (min-width: 960px) {
  .sello-portada { display: block; justify-self: center; }
  .sello-portada img { width: min(300px, 100%); opacity: 0.92; }
}

/* Proceso */
.paso { position: relative; padding-left: var(--e6); }
.paso::before {
  content: attr(data-paso);
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blanco);
  border: 1px solid var(--borde);
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--terracota);
}
.paso h3 { margin-bottom: var(--e2); }
.paso p { font-size: 0.9375rem; }

/* Cierre */
.cierre {
  padding-block: var(--e7);
  background: linear-gradient(135deg, var(--tinta) 0%, #2A2118 100%);
  color: rgba(255, 255, 255, 0.74);
  text-align: center;
}
.cierre h2 { color: var(--blanco); }
.cierre .entradilla { margin-inline: auto; }

/* Preguntas frecuentes */
.preguntas { max-width: 760px; margin-inline: auto; }

/* ==========================================================================
   Paginas interiores
   ========================================================================== */
.interior {
  padding-block: var(--e6) var(--e7);
  background:
    radial-gradient(760px 380px at 78% 0%, rgba(216, 155, 94, 0.20), transparent 62%),
    var(--papel-hondo);
}
.interior h1 { margin-bottom: var(--e4); }
.interior .entradilla { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }

.migas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); font-size: 0.8125rem; }
.migas li:not(:last-child)::after { content: '/'; margin-left: var(--e2); color: var(--borde); }
.migas a { color: var(--gris-texto); }
.migas a:hover { color: var(--terracota); }
.migas li[aria-current="page"] { color: var(--terracota); }

.bloque-doble { display: grid; gap: var(--e6); }
@media (min-width: 960px) {
  .bloque-doble { grid-template-columns: 0.9fr 1.1fr; gap: var(--e7); align-items: start; }
}
.bloque-doble__lado { position: sticky; top: 110px; }
@media (max-width: 959px) { .bloque-doble__lado { position: static; } }

.grupo-servicios + .grupo-servicios { margin-top: var(--e5); }
.grupo-servicios h3 { margin-bottom: var(--e3); }

/* Bloque del significado de la marca */
.sello-texto {
  display: grid;
  gap: var(--e5);
  align-items: center;
  padding: var(--e6);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
@media (min-width: 768px) { .sello-texto { grid-template-columns: 200px 1fr; gap: var(--e6); } }
.sello-texto img { width: 170px; margin-inline: auto; }
.sello-texto__caracter {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--terracota);
  margin-bottom: var(--e2);
}
.sello-texto p + p { margin-top: var(--e3); }

/* ==========================================================================
   Formulario de contacto
   ========================================================================== */
.contacto-rejilla { display: grid; gap: var(--e6); }
@media (min-width: 960px) { .contacto-rejilla { grid-template-columns: 1fr 1.25fr; gap: var(--e7); align-items: start; } }

.canales { display: grid; gap: var(--e3); }
.canal {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e4);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--gris-texto);
  transition: transform 0.3s var(--curva), box-shadow 0.3s var(--curva), border-color 0.3s var(--curva);
}
a.canal:hover { color: var(--gris-texto); transform: translateX(4px); box-shadow: var(--sombra); border-color: rgba(169, 76, 26, 0.35); }
.canal__icono { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radio-chico); background: var(--papel-hondo); color: var(--terracota); }
.canal strong { display: block; color: var(--tinta); font-size: 0.9375rem; }
.canal span { font-size: 0.875rem; }

.formulario {
  display: grid;
  gap: var(--e4);
  padding: var(--e5);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
@media (min-width: 640px) {
  .formulario { padding: var(--e6); }
  .formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
}
.campo { display: grid; gap: var(--e1); }
.campo label { font-size: 0.875rem; font-weight: 500; color: var(--tinta); }
.campo label .obligatorio { color: var(--terracota); }
.campo input, .campo select, .campo textarea {
  padding: 0.8rem 1rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  font-size: 0.9375rem;
  transition: border-color 0.25s var(--curva), box-shadow 0.25s var(--curva), background 0.25s var(--curva);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  background: var(--blanco);
  border-color: var(--terracota);
  box-shadow: 0 0 0 3px rgba(169, 76, 26, 0.12);
}
.campo textarea { resize: vertical; min-height: 130px; }

.campo--casilla { grid-template-columns: auto 1fr; align-items: start; gap: var(--e3); }
.campo--casilla input { width: 18px; height: 18px; margin-top: 0.25rem; accent-color: var(--terracota); }
.campo--casilla label { font-size: 0.8125rem; font-weight: 400; color: var(--gris-texto); line-height: 1.55; }
.campo--casilla .campo__error { grid-column: 1 / -1; }
.trampa { position: absolute; left: -9999px; opacity: 0; }

/* Documento legal */
.legal { max-width: 780px; margin-inline: auto; }
.legal h2 {
  font-size: 1.25rem;
  margin-top: var(--e6);
  margin-bottom: var(--e3);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: var(--e5); }
.legal p { margin-bottom: var(--e3); }
.legal ul { display: grid; gap: var(--e2); margin-bottom: var(--e3); padding-left: var(--e4); }
.legal ul li { list-style: lower-alpha; }
.legal__fecha { font-size: 0.875rem; color: var(--gris-texto); }

/* La cabecera es fija: sin este margen, cualquier salto a un ancla deja
   el contenido escondido debajo de ella. */
[id] { scroll-margin-top: 100px; }