/* ═══════════════════════════════════════════════════════════════
   CAMENA 2.0 · layout.css
   Retícula, ritmo entre secciones y composición de cada bloque.
   La página alterna fondos y estructuras para tener ritmo visual.
   ═══════════════════════════════════════════════════════════════ */

/* ── Contenedor y retícula base ──────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e-5);
}

/* ── Secciones ───────────────────────────────────────────────── */
.seccion {
  position: relative;
  padding-block: var(--ritmo-seccion);
  background: var(--paper-2);
}

.seccion--papel { background: var(--paper); }

.seccion--oscura {
  background: var(--ink);
  color: var(--texto-claro);
}

/* ── Encabezado de sección: etiqueta + título + intro ────────── */
.encabezado {
  max-width: 60rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.encabezado__titulo { max-width: 24ch; }

/* Título de una página secundaria: es el h1 del documento —Google y los
   lectores de pantalla necesitan uno por página— pero no debe gritar como el
   del hero. Se queda en la escala de h2, que es la que tenía cuando era un h2. */
.encabezado__titulo--pagina { font-size: var(--t-n2); }

.encabezado__intro {
  margin-top: var(--e-5);
  max-width: var(--ancho-texto);
  font-size: var(--t-guia);
  line-height: var(--interlinea-guia);
  color: var(--texto-2);
}

.encabezado--claro .encabezado__intro { color: var(--texto-claro-2); }

/* Etiqueta de sección: número monospace + nombre */
.etiqueta {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--acento);
}
.etiqueta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--acento-suave);
  max-width: 9rem;
}
.etiqueta--claro { color: var(--oro-lt); }


/* ── Cierres de sección: frase de enlace al siguiente bloque ─── */
.cierre-seccion {
  margin-top: clamp(2.5rem, 1.5rem + 2.4vw, 4rem);
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde);
  max-width: var(--ancho-texto);
  color: var(--texto-2);
}
.cierre-seccion a { font-weight: var(--peso-medio); }


/* ═══════════════ HERO ═══════════════ */
.hero {
  position: relative;
  /* Por encima de la sección que sigue: las tarjetas de la franja de precios
     se abren hacia abajo y tienen que verse completas, no por detrás. */
  z-index: var(--z-contenido);
  /* Fondo oscuro: la página abre en tinta y el contenido de abajo va sobre
     papel, así que el contraste entre las dos mitades es el recurso. Los
     tokens de texto y acento se cambian aquí (no en los componentes). */
  background: var(--ink);
  color: var(--texto-claro);
  --texto: var(--texto-claro);
  --texto-2: var(--texto-claro-2);
  --borde: var(--borde-oscuro);
  --borde-fuerte: var(--ink-4);
  --acento: var(--oro-lt);
  --acento-grafico: var(--oro);
  --acento-suave: rgba(168, 130, 31, 0.14);
  --acento-linea: var(--oro-linea);
  padding-top: clamp(3rem, 2rem + 5vw, 6rem);
  /* El aire de abajo no es decorativo: es donde se abren las tarjetas. */
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

@media (min-width: 1141px) {
  /* En escritorio las tarjetas se abren debajo de los datos: este hueco es su
     sitio, y así no tapan ni el botón de WhatsApp ni el dato vecino. */
  .hero { padding-bottom: 9rem; }
}

/* Retícula técnica de fondo: da contexto de estudio, muy baja presencia */
/* Textura cuadriculada: dos retículas superpuestas —una fina y otra gruesa—
   en tinta oro, sobre el fondo cálido. Es papel de cuaderno técnico, no una
   imagen: cero peso y cero peticiones. */
.hero__rejilla {
  position: absolute;
  inset: 0;
  /* Anillos concéntricos en vez de cuadrícula: dos familias de círculos
     —uno grande y tenue, otro chico y más marcado— dibujadas con degradados
     radiales. Es el mismo recurso que la cuadrícula (contexto de estudio sin
     una sola petición ni un byte de imagen), pero con otra geometría: el
     toroide se lee como instrumento, la cuadrícula se leía como papel.
     Los anillos no llevan relleno: el centro queda hueco y por ahí pasa el
     texto sin que el patrón compita. */
  background-image:
    radial-gradient(circle at center,
      transparent 0 12px,
      rgba(244, 243, 240, 0.085) 12px 13.5px,
      transparent 13.5px),
    radial-gradient(circle at center,
      transparent 0 3px,
      rgba(244, 243, 240, 0.05) 3px 4px,
      transparent 4px);
  background-size:
    clamp(52px, 6vw, 84px) clamp(52px, 6vw, 84px),
    clamp(13px, 1.5vw, 21px) clamp(13px, 1.5vw, 21px);
  background-position: center top, center top;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.35));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.35));
}

.hero__interior {
  position: relative;
  z-index: var(--z-contenido);
  display: grid;
  /* La columna de texto manda: con la proporción anterior medía 703 px y el
     titular, que son dos frases completas, no cabía en dos líneas ni a 52 px.
     Con esta mide 812 px y entra hasta 58. El panel de precios baja de 449 a
     366 px y sigue sin apretarse: se comprobó que su contenido no se desborda
     ni se parte en ningún ancho de 1141 a 1600. */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.72fr);
  gap: clamp(2rem, 1rem + 2.4vw, 3rem);
  align-items: start;
}

.hero__titulo {
  margin-top: var(--e-5);
  font-size: var(--t-n1);
  /* 1.06 y no 1.02: en dos líneas de display, el interlineado apretado de más
     hace que las líneas se toquen y la mancha se lee como un bloque sucio. */
  line-height: 1.06;
  letter-spacing: -0.026em;
  /* Reparte el largo de las dos líneas cuando el navegador lo soporta; donde no,
     el corte lo fija el <span>, así que nunca cambia el diseño. */
  text-wrap: balance;
}

.hero__linea { display: block; }

/* La primera línea del titular no cambia nunca, y va en rojo ladrillo; la
   segunda alterna en pistache. El rojo es el tono aclarado, porque sobre la
   tinta el ladrillo puro se queda en 3.18:1. Medido: 4.95:1. */
.hero__titulo .hero__linea:first-child { color: var(--rojo-lt); }

/* La segunda línea se distingue por color, no por inclinación: en una
   geométrica la cursiva falsa se nota, y el contraste editorial es más
   serio que el énfasis tipográfico. Sobre claro, el verde oscuro. */
.hero__linea--acento { color: var(--acento); }

/* Subtítulo del hero: la promesa en una frase, y debajo la tira de
   condiciones en mono chica. Es una ficha técnica, no un párrafo de relleno:
   dice lo que NO se lleva el cliente (piezas sobrantes, adaptaciones). */
.hero__entrada {
  margin-top: var(--e-5);
  /* Entre 54 y 60 caracteres por línea: más ancho y el ojo pierde el renglón. */
  max-width: 56ch;
  /* Un escalón abajo para que la proporción titular/entrada pase de 2.2 incluso
     en teléfono, que es lo que hace que la jerarquía se lea y no se aplane. */
  font-size: var(--t-guia);
  line-height: 1.55;
  color: var(--texto-2);
  text-wrap: pretty;
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-7);
}

/* Quiénes somos, al pie del hero: después del golpe, la presentación. */
.hero__somos {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
  max-width: 60ch;
  font-size: var(--t-menudo);
  line-height: 1.6;
  color: var(--texto-2);
}
.hero__somos strong { color: var(--texto); font-weight: var(--peso-fuerte); }

/* Hechos del hero: datos verificables, no cifras de marketing */
.hero__hechos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-4);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: var(--e-5);
  border-top: 1px dotted var(--borde);
}
.hecho dt {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-2);
}
.hecho dd {
  margin-top: var(--e-2);
  font-size: var(--t-menudo);
  line-height: 1.5;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
/* Por el alias contextual, no por la familia: este texto vive en el hero, que
   va sobre fondo oro, y ahí el oro de siempre se queda en 4.41:1. */
.hecho em {
  color: var(--acento);
  font-style: normal;
  font-weight: var(--peso-fuerte);
  /* Ancho fijo por cifra: los precios se alinean entre sí y no bailan. */
  font-variant-numeric: tabular-nums;
}

/* Cada dato de la franja es un botón: al pasar el ratón, al hacer clic o al
   llegar con el teclado, se abre su tarjeta. Es el mismo contenido de la ficha,
   contado con el detalle que un dueño de negocio necesita antes de preguntar. */
.hecho { position: relative; }

.hecho__boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Relleno propio: el rótulo es un botón y se toca con el dedo, así que no
     puede quedarse por debajo del objetivo táctil mínimo de 24 px. */
  padding: 5px 0;
  border: 0;
  background: none;
  font: inherit;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-2);
  cursor: pointer;
  border-bottom: 1px dotted var(--borde);
  transition: color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva);
}
.hecho__boton:hover,
.hecho__boton[aria-expanded="true"] { color: var(--acento); border-bottom-color: var(--acento); }

/* El signo: un más que se vuelve menos, sin dibujos ni iconos de más */
.hecho__signo { position: relative; width: 8px; height: 8px; flex-shrink: 0; }
.hecho__signo::before,
.hecho__signo::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
}
.hecho__signo::after { transform: rotate(90deg); transition: transform var(--dur-rapida) var(--curva); }
.hecho__boton[aria-expanded="true"] .hecho__signo::after,
.hecho:hover .hecho__signo::after { transform: rotate(0deg); }

.hecho__globo {
  position: absolute;
  left: 0;
  top: calc(100% + 14px);
  z-index: var(--z-contenido);
  width: min(24rem, 78vw);
  padding: var(--e-4);
  /* Dentro del hero oscuro, la tarjeta es una superficie elevada de la misma
     familia: nada de un parche claro sobre el carbón. */
  background: var(--ink-2);
  border: 1px solid var(--borde);
  border-left: 2px solid var(--acento);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra);
  font-size: var(--t-menudo);
  line-height: 1.55;
  color: var(--texto-2);
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
}
/* La visibilidad se controla con CSS (visibility oculta también a lectores de
   pantalla, así que no hace falta el atributo hidden) */
.hecho:hover .hecho__globo,
.hecho:focus-within .hecho__globo,
.hecho__globo[data-abierto="si"] {
  visibility: visible;
  opacity: 1;
  transform: none;
}
.hecho__globo p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .hecho__globo { transition: none; transform: none; }
}


/* ═══════════════ ÍNDICE DEL HERO ═══════════════
   Antes era una caja con borde, fondo y esquinas marcadas: el contenedor
   pesaba más que el contenido y se leía como menú lateral de plantilla.
   Ahora no hay caja: hay tipografía y un filete vertical de 1 px que separa
   la columna del titular, como una columna de revista técnica. */
.hero__panel {
  position: relative;
  padding-left: clamp(1.25rem, 0.8rem + 1.6vw, 2.75rem);
}
.hero__panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--borde);
}

.panel__titulo {
  font-family: var(--mono);
  /* Antes era una etiqueta de 12 px en gris; ahora es el encabezado del panel:
     un escalón de los grandes y en oro (el alias, que aquí dentro del hero
     resuelve al oro claro). Sin mayúsculas ni tracking de etiqueta: a este
     tamaño, espaciado y en caja alta se leería como grito. */
  font-size: var(--t-n5);
  font-weight: var(--peso-medio);
  letter-spacing: 0.01em;
  color: var(--acento);
}

.panel__pie {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px dotted var(--borde);
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--texto-2);
}
.panel__pie strong { color: var(--texto); }
.panel__pie a {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Dos palabras: no se parten entre renglones. */
  white-space: nowrap;
}


/* ═══════════════ 02 · DECLARACIÓN ═══════════════ */
.declaracion {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  align-items: start;
}

.declaracion__titulo {
  font-size: var(--t-declara);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 14ch;
}

.declaracion__cuerpo { padding-top: var(--e-2); }

.destacado {
  font-family: var(--display);
  font-size: var(--t-n5);
  font-weight: var(--peso-normal);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--texto-claro);
  text-wrap: pretty;
}
.seccion:not(.seccion--oscura) .destacado { color: var(--texto); }

.declaracion__cuerpo p + p {
  margin-top: var(--e-5);
  color: var(--texto-claro-2);
  max-width: var(--ancho-texto);
}
.seccion:not(.seccion--oscura) .declaracion__cuerpo p + p { color: var(--texto-2); }


/* ── Tres dimensiones: columnas con reglas, no tarjetas ─────── */


.dimension:hover 

.dimension__titulo {
  margin-top: var(--e-4);
  font-size: var(--t-n4);
}

.dimension__campos {
  margin-top: var(--e-3);
  font-family: var(--mono);
  font-size: var(--t-menudo);
  letter-spacing: var(--tracking-mono);
  color: var(--oro-lt);
}

.dimension__texto {
  margin-top: var(--e-4);
  color: var(--texto-claro-2);
  font-size: var(--t-cuerpo);
  line-height: 1.62;
  max-width: 34ch;
}

.nota-sistema__clave {
  display: inline-block;
  margin-right: var(--e-2);
  padding: 2px 10px;
  background: var(--acento-suave);
  border: 1px solid var(--oro-linea);
  border-radius: var(--radio-control);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--oro-lt);
}


/* ═══════════════ DETRÁS DE CAMENA ═══════════════ */
.detras {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.detras__titulo {
  font-size: var(--t-n2);
  letter-spacing: -0.025em;
  margin-bottom: var(--e-6);
}

.detras__texto p + p {
  margin-top: var(--e-5);
  color: var(--texto-2);
  max-width: var(--ancho-texto);
}

/* Principios: la tesis del estudio en tres líneas */
.principios {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--borde);
}
.principio {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--e-4);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--borde);
}
.principio__clave {
  font-family: var(--display);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-fuerte);
}
.principio__texto {
  font-size: var(--t-cuerpo);
  color: var(--texto-2);
}

/* Ficha técnica del estudio */
.ficha {
  position: sticky;
  top: calc(var(--alto-cabecera) + var(--e-5));
  padding: var(--e-6);
  background: var(--ink);
  color: var(--texto-claro);
  border-radius: var(--radio);
  --borde: var(--borde-oscuro);
}
.ficha__titulo {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--oro-lt);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--borde);
}
.ficha__lista > div {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--e-4);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--borde);
}
.ficha__lista dt {
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--texto-claro-2);
  padding-top: 0.25em;
}
.ficha__lista dd { font-size: var(--t-cuerpo); color: var(--texto-claro); }
.ficha__nota {
  margin-top: var(--e-4);
  font-size: var(--t-menudo);
  line-height: 1.6;
  color: var(--texto-claro-2);
}

/* Franja de memoria local */
.franja-local {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--e-2) var(--e-5);
  align-items: baseline;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.franja-local__clave {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-2);
}
.franja-local__texto {
  font-family: var(--display);
  font-size: var(--t-n4);
  font-style: italic;
  color: var(--acento);
  text-wrap: balance;
}
.franja-local__resto {
  grid-column: 2;
  max-width: 52ch;
  font-size: var(--t-cuerpo);
  color: var(--texto-2);
}


/* ═══════════════ PROCESO ═══════════════ */

.proceso__pasos {
  border-top: 1px solid var(--borde);
}


.paso__num {
  grid-area: num;
  font-family: var(--mono);
  font-size: var(--t-menudo);
  color: var(--texto-2);
  transition: color var(--dur-rapida) var(--curva);
}
.paso__nombre {
  grid-area: nombre;
  font-family: var(--display);
  font-size: var(--t-n5);
  font-weight: var(--peso-fuerte);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.paso__pregunta {
  grid-area: pregunta;
  font-size: var(--t-menudo);
  line-height: 1.45;
  color: var(--texto-2);
}


/* Panel de detalle del paso */
.proceso__detalle {
  position: sticky;
  top: calc(var(--alto-cabecera) + var(--e-5));
  min-height: 22rem;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  background: var(--paper-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}
.seccion--papel .proceso__detalle { background: var(--paper-2); }

.detalle[hidden] { display: none; }

.detalle__num {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  color: var(--acento);
}
.detalle__titulo {
  margin-top: var(--e-3);
  font-size: var(--t-n3);
}
.detalle__texto {
  margin-top: var(--e-4);
  max-width: 52ch;
  color: var(--texto-2);
}
.detalle__salida {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px dashed var(--borde-fuerte);
  font-size: var(--t-cuerpo);
}
.detalle__salida span {
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-2);
}


/* ═══════════════ TODO CONECTADO ═══════════════ */

.cadena__lista {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--e-2);
  position: relative;
}

/* Línea que une los eslabones: el punto de la idea */
.cadena__lista::before {
  content: "";
  position: absolute;
  top: 1.0625rem;
  left: 3%;
  right: 3%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--oro-linea) 8%, var(--oro-linea) 92%, transparent);
}


.eslabon__boton {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  width: 100%;
  padding-top: 0;
  text-align: left;
}

.eslabon__punto {
  position: relative;
  width: 9px; height: 9px;
  margin-bottom: var(--e-3);
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--oro);
  transition: transform var(--dur) var(--curva), background var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.eslabon__boton:hover .eslabon__punto { transform: scale(1.5); }


.eslabon__nombre {
  font-family: var(--display);
  font-size: var(--t-guia);
  font-weight: var(--peso-fuerte);
  line-height: 1.15;
  color: var(--texto-claro-2);
  transition: color var(--dur-rapida) var(--curva);
}
.eslabon.is-activo .eslabon__nombre,
.eslabon__boton:hover .eslabon__nombre { color: var(--texto-claro); }

.eslabon__dato {
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--texto-claro-2);
  opacity: 0.72;
}

.cadena__nota {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-left: var(--e-5);
  border-left: 2px solid var(--oro);
  max-width: 60ch;
  font-size: var(--t-guia);
  line-height: var(--interlinea-guia);
  color: var(--texto-claro-2);
  min-height: 4.5rem;
}
.cadena__nota strong { color: var(--texto-claro); font-weight: var(--peso-fuerte); }

.cadena__cierre {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  max-width: var(--ancho-texto);
  color: var(--texto-claro-2);
}
.cadena__cierre a { color: var(--oro-lt); }


/* ═══════════════ PAQUETES + PRECIO ═══════════════ */
.paquetes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-4);
}

/* Bloque de precio: el más importante de la página comercial */
.precio {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  padding: clamp(1.75rem, 1.25rem + 2.4vw, 3.25rem);
  background: var(--ink);
  color: var(--texto-claro);
  border-radius: var(--radio-lg);
  --borde: var(--borde-oscuro);
}
.precio__titulo {
  font-size: var(--t-n3);
  margin-bottom: var(--e-5);
}
.precio__texto p { color: var(--texto-claro-2); max-width: 62ch; }
.precio__texto p + p { margin-top: var(--e-4); }
.precio__texto strong { color: var(--texto-claro); }
.precio__acciones { display: grid; gap: var(--e-3); justify-items: start; }
.precio__nota { font-size: var(--t-menudo); color: var(--texto-claro-2); }


/* ═══════════════ CAMENA CUSTOM ═══════════════ */
.custom {
  position: relative;
  padding-block: clamp(4rem, 3rem + 5vw, 8rem);
  background: var(--ink-2);
  color: var(--texto-claro);
  overflow: hidden;
}

/* Cifra gigante de fondo: tipografía como textura, no como adorno vacío */
.custom::before {
  content: "?";
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: min(38rem, 62vw);
  font-weight: 700;
  line-height: 0.7;
  color: transparent;
  -webkit-text-stroke: 1px var(--oro-linea);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.custom__interior { position: relative; z-index: var(--z-contenido); }
.custom__etiqueta { justify-content: flex-start; }

.custom__titulo {
  font-size: var(--t-declara);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.custom__mejor {
  display: block;
  margin-top: var(--e-2);
  font-style: italic;
  color: var(--oro-lt);
}

.custom__texto {
  margin-top: var(--e-5);
  margin-bottom: var(--e-7);
  max-width: 56ch;
  font-size: var(--t-guia);
  line-height: var(--interlinea-guia);
  color: var(--texto-claro-2);
}


/* ═══════════════ CTA FINAL ═══════════════ */
.llamada {
  position: relative;
  padding-block: clamp(4.5rem, 3rem + 6vw, 9rem);
  background: var(--ink);
  color: var(--texto-claro);
  border-top: 1px solid var(--ink-3);
}

.llamada__interior { max-width: 60rem; }

.llamada__gancho {
  font-family: var(--mono);
  font-size: var(--t-menudo);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--oro-lt);
}

.llamada__titulo {
  margin-top: var(--e-4);
  font-size: var(--t-declara);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.llamada__titulo em {
  display: block;
  color: var(--oro-lt);
}

.llamada__texto {
  margin-top: var(--e-5);
  max-width: 54ch;
  font-size: var(--t-guia);
  line-height: var(--interlinea-guia);
  color: var(--texto-claro-2);
}

.llamada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-7);
}

.llamada__pie {
  margin-top: var(--e-5);
  font-size: var(--t-cuerpo);
  color: var(--texto-claro-2);
}
.llamada__pie a { color: var(--oro-lt); }


/* ═══════════════ CONTACTO ═══════════════ */
.contacto {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.contacto__titulo {
  font-size: var(--t-n2);
  letter-spacing: -0.025em;
}

.contacto__intro {
  margin-top: var(--e-5);
  max-width: 46ch;
  color: var(--texto-2);
}

.datos {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--borde);
}
.dato {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: var(--e-2) var(--e-4);
  align-items: baseline;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--borde);
}
.dato__clave {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--texto-2);
  min-width: 9rem;
}
.dato__valor { font-size: var(--t-cuerpo); color: var(--texto); }
a.dato__valor:hover { color: var(--acento); }


/* ═══════════════ PIE ═══════════════ */
.pie {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) var(--e-6);
  background: var(--ink);
  color: var(--texto-claro);
}

.pie__principal {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2.4vw, 3.5rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-bottom: 1px solid var(--borde-oscuro);
}

.pie__simbolo { margin-bottom: var(--e-4); }
.pie__nombre {
  font-family: var(--display);
  font-size: var(--t-n5);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.22em;
}
.pie__lema {
  margin-top: var(--e-2);
  font-size: var(--t-menudo);
  color: var(--texto-claro-2);
}
.pie__claim {
  margin-top: var(--e-4);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-cuerpo);
  color: var(--oro-lt);
}

.pie__titulo {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-claro-2);
  margin-bottom: var(--e-4);
}
.pie__lista > li + li { margin-top: var(--e-2); }
.pie__lista a,
.pie__lista span { font-size: var(--t-cuerpo); color: var(--texto-claro); }
.pie__lista a:hover { color: var(--oro-lt); }
/* …salvo el enlace destacado: ver la nota de especificidad más abajo. */
.pie__lista a.pie__destacado:hover { color: var(--ink); }

/* Enlace destacado del pie (WhatsApp).
   El texto oscuro es imprescindible: sobre el oro, el gris claro del pie
   solo alcanzaría 2.4:1. La regla descendente `.pie__lista a` tiene más
   especificidad que una clase suelta, así que el selector se repite con
   la misma fuerza para que el color oscuro gane siempre. */
.pie__lista a.pie__destacado {
  color: var(--ink);
}
.pie__destacado {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 9px 16px;
  background: var(--oro);
  color: var(--ink);
  border-radius: var(--radio-control);
  font-weight: var(--peso-fuerte);
  font-size: var(--t-menudo);
  transition: transform var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva),
              background var(--dur-rapida) var(--curva);
}
.pie__destacado:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(168, 130, 31, 0.28);
  color: var(--ink);
  background: var(--oro-lt);
}
.pie__lista--contacto .pie__destacado { margin-bottom: var(--e-2); }
.pie__columna .boton { margin-top: var(--e-5); }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3) var(--e-5);
  padding-top: var(--e-5);
  font-size: var(--t-menudo);
  color: var(--texto-claro-2);
}
.pie__legales { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.pie__legal a { color: var(--texto-claro-2); text-decoration: underline; text-underline-offset: 3px; }
.pie__legal a:hover { color: var(--oro-lt); }
.pie__cierre a { color: var(--texto-claro-2); }

/* Sello de taller: la firma de quien dibuja el engrane, no el logo otra vez.
   El icono es un SVG trazado a mano con dientes irregulares; va en el acento
   para que se lea como marca de agua de quien hizo la pieza. */
.pie__sello {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--texto-claro-2);
}
.pie__sello-icono {
  width: 17px; height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--magenta);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ═══════════════ PÁGINAS LEGALES ═══════════════ */
.legal {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--ritmo-seccion);
  background: var(--paper-2);
}
.legal__interior { max-width: 46rem; margin-inline: auto; }
.legal__volver {
  /* Se toca con el dedo: altura mínima de objetivo táctil */
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding-block: var(--e-2);
  margin-bottom: var(--e-5);
  font-family: var(--mono);
  font-size: var(--t-menudo);
  letter-spacing: var(--tracking-mono);
  text-transform: none;
  color: var(--texto-2);
}
.legal__volver:hover { color: var(--acento); }
.legal h1 { font-size: var(--t-n2); }
.legal__fecha {
  margin-top: var(--e-4);
  padding-bottom: var(--e-5);
  border-bottom: 1px solid var(--borde);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--texto-2);
}
.legal h2 {
  font-size: var(--t-n5);
  margin-top: var(--e-8);
  margin-bottom: var(--e-3);
}
.legal p, .legal li { color: var(--texto-2); }
.legal p + p { margin-top: var(--e-4); }
.legal ul { margin-top: var(--e-4); display: grid; gap: var(--e-2); }
.legal li { position: relative; padding-left: var(--e-5); }
.legal li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 8px; height: 1px;
  background: var(--acento);
}
.legal a:not([class]) { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.legal__aviso a,
.legal p a,
.legal li a {
  display: inline-block;
  padding-block: 6px;
}

.legal__aviso {
  margin-top: var(--e-6);
  padding: var(--e-5);
  background: var(--paper);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--oro);
  border-radius: var(--radio-sm);
  font-size: var(--t-cuerpo);
}

/* ── Mapa de la oferta: tres grupos antes del detalle ─────────
   Responde «¿qué contrato?» antes de entrar a las siete disciplinas. */
.grupos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-4);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.grupo {
  display: block;
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color var(--dur) var(--curva), transform var(--dur) var(--curva),
              box-shadow var(--dur) var(--curva);
}
.grupo:hover,
.grupo:focus-visible {
  border-color: var(--oro-linea);
  transform: translateY(-3px);
  box-shadow: var(--sombra-sm);
}


.grupo__titulo {
  margin-top: var(--e-2);
  font-size: var(--t-n5);
  letter-spacing: -0.015em;
}

.grupo__resumen {
  margin-top: var(--e-2);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  color: var(--texto-2);
}

.grupo__partes {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--texto-2);
}

/* ── Separador de grupo dentro del acordeón ─────────────────── */
.disciplinas__grupo {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  /* Relleno simétrico: con menos abajo que arriba, el rótulo del grupo
     se montaba sobre el último botón del grupo anterior. */
  padding: var(--e-5) 0;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--acento);
}
.disciplinas__grupo span {
  font-weight: var(--peso-normal);
  color: var(--texto-2);
  letter-spacing: var(--tracking-mono);
}
.disciplinas__grupo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--acento-suave);
}

/* ── Proceso: flujo de un vistazo + detalle plegable ─────────
   Antes eran siete pasos abiertos con un panel lateral. Ahora se lee
   la secuencia completa en una línea y el detalle solo aparece si
   alguien lo pide. */


/* Filete entre pasos: la secuencia se lee como una cadena */

.flujo__nota {
  margin-top: var(--e-5);
  max-width: 62ch;
  font-size: var(--t-cuerpo);
  color: var(--texto-2);
}


/* ── Enunciado suelto ─────────────────────────────────────────
   Una idea que se dice una vez y se remite, en lugar de un diagrama
   que reconstruye un argumento ya explicado en Servicios. */
.enunciado__texto {
  font-family: var(--display);
  font-size: var(--t-n3);
  font-weight: var(--peso-fuerte);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.enunciado__resto {
  max-width: 52ch;
  font-size: var(--t-guia);
  line-height: var(--interlinea-guia);
  color: var(--texto-2);
}

/* ── Qué puedes contratar (panel del hero) ────────────────────
   Responde «¿qué venden y cuánto?» en el primer pantallazo, con el
   precio de partida a la vista. Sustituye al índice de disciplinas. */







/* El enlace al detalle del proceso se toca con el dedo: necesita altura
   de objetivo táctil, no la altura de una línea de texto. */
.flujo__enlace {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
}
.flujo__enlace a {
  display: inline-block;
  /* 12px arriba y abajo: 14 de texto + 24 = 38px de alto táctil */
  padding-block: 12px;
  font-weight: var(--peso-medio);
  color: var(--acento);
}

/* Enlace de continuidad al final de un bloque. Se toca con el dedo:
   necesita altura de objetivo táctil, no la de una línea de texto. */
.detras__enlace { margin-top: var(--e-5); }
.detras__enlace a {
  display: inline-block;
  padding-block: 12px;
  font-weight: var(--peso-medio);
  color: var(--acento);
}
.detras__enlace a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Línea de precios del hero, solo en pantallas donde el panel de precios
   queda debajo del pliegue. Sin esto, en un teléfono la primera pantalla no
   muestra ninguna cifra, y el público decide con el precio a la vista. */
.hero__precios-breve {
  display: none;
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde);
  max-width: 46ch;
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  color: var(--texto-2);
}
.hero__precios-breve strong {
  color: var(--texto);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}
.hero__precios-breve a {
  display: inline-block;
  padding-block: 4px;
  color: var(--acento);
  font-weight: var(--peso-medio);
}

/* Enlace de regreso en las páginas secundarias */
.volver {
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--borde);
}
.volver a {
  display: inline-block;
  padding-block: 8px;
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-medio);
  color: var(--acento);
}

/* Lista tipográfica: sin bordes por renglón ni fondo al pasar el mouse. Lo que
   se mueve es el color y un desplazamiento de 3 px, como una entrada de índice. */
.hero__panel .panel__lista { margin-top: var(--e-3); }

.hero__panel .panel__lista li + li { margin-top: 2px; }

/* Índice numerado: el número va en mono y en el acento, y al pasar el ratón
   aparece una barra fina a la izquierda. Es un menú, así que se comporta como
   un menú: se ve dónde estás y adónde puedes ir. */
.hero__panel .panel__lista { counter-reset: indice; }

.hero__panel .panel__lista li {
  position: relative;
  padding-left: 0;
  transition: padding-left var(--dur-rapida) var(--curva);
}
.hero__panel .panel__lista li::before {
  counter-increment: indice;
  content: counter(indice, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--acento);
  opacity: 0;
  transition: opacity var(--dur-rapida) var(--curva);
}
.hero__panel .panel__lista li:hover { padding-left: 1.75rem; }
.hero__panel .panel__lista li:hover::before { opacity: 1; }
.hero__panel .panel__lista li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 60%;
  width: 2px;
  transform: translateY(-50%) scaleY(0);
  background: var(--acento-grafico);
  transition: transform var(--dur-rapida) var(--curva);
}
.hero__panel .panel__lista li:hover::after { transform: translateY(-50%) scaleY(1); }

.hero__panel .panel__lista a {
  display: inline-block;
  padding: 5px 0;
  font-size: var(--t-guia);
  font-weight: var(--peso-medio);
  letter-spacing: -0.01em;
  color: var(--texto);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
}
.hero__panel .panel__lista a:hover,
.hero__panel .panel__lista a:focus-visible {
  color: var(--acento);
  text-decoration: none;
  transform: translateX(3px);
}

.panel__pie strong { color: var(--texto); }
/* El enlace lleva relleno propio para no quedar por debajo del objetivo
   táctil mínimo de 24 px: es un enlace de texto, no una línea decorativa. */
.hero__panel .panel__pie a { display: inline-block; padding-block: 5px; }