/* ═══════════════════════════════════════════════════════════════
   CAMENA 2.0 · components.css
   Componentes reutilizables. Cada uno se usa al menos dos veces
   o resuelve un patrón propio del sistema.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════ ICONOS ═══════════════ */
.ic {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
/* Los iconos de WhatsApp y contacto son de relleno */
svg.ic path[d^="M12 2a10"] {
  fill: currentColor;
  stroke: none;
}
.ic--flecha { transition: transform var(--dur) var(--curva); }


/* ═══════════════ BOTONES ═══════════════ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  font-family: var(--texto-fuente);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-fuerte);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva), background var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
/* Micro-detalle de taller: el botón crece un 2 % y levanta una sombra
   profunda. Nada de rebotes ni de movimiento infinito. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .boton:hover { transform: scale(1.02); box-shadow: var(--sombra-lg); }
}
@media (prefers-reduced-motion: no-preference) {
  .boton:active { transform: scale(0.995); }
}
.boton:hover .ic--flecha { transform: translateX(4px); }

.boton--sm { padding: 0.5625rem 1.125rem; font-size: var(--t-menudo); }
.boton--lg { padding: 1.0625rem 1.875rem; font-size: var(--t-cuerpo); }
.boton--ancho { width: 100%; }

/* Sólido: papel sobre tinta y tinta sobre papel, siempre con contraste alto */
.boton--solido {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.boton--solido:hover { background: var(--ink-3); border-color: var(--ink-3); }

.seccion--oscura .boton--solido,
.llamada .boton--solido,
.custom .boton--solido,
.precio .boton--solido {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.seccion--oscura .boton--solido:hover,
.llamada .boton--solido:hover,
.custom .boton--solido:hover,
.precio .boton--solido:hover { background: var(--paper-2); border-color: var(--paper-2); }

/* Línea: contorno que se rellena al pasar */
.boton--linea {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde-fuerte);
}
.boton--linea:hover { border-color: var(--texto); background: rgba(17, 17, 17, 0.04); }

/* Contorno claro: solo donde el fondo es oscuro de verdad. El hero pasó
   a fondo claro, así que ya no entra en esta lista. */
.boton--claro,
.seccion--oscura .boton--linea,
.llamada .boton--linea,
.boton--claro:hover,
.seccion--oscura .boton--linea:hover,
.llamada .boton--linea:hover,

/* Oro: reservado al CTA de mayor jerarquía */
.boton--oro {
  background: var(--oro);
  color: var(--ink);
  border-color: var(--oro);
}
.boton--oro:hover {
  background: var(--oro-lt);
  border-color: var(--oro-lt);
  box-shadow: 0 12px 30px rgba(168, 130, 31, 0.3);
}


/* ═══════════════ CABECERA ═══════════════ */
.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecera);
  background: rgba(17, 17, 17, 0.86);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--curva), background var(--dur) var(--curva);
}
.cabecera--pegada {
  border-bottom-color: var(--ink-3);
  background: rgba(17, 17, 17, 0.94);
}
.cabecera--oculta { transform: translateY(-100%); }
.cabecera { transition: transform var(--dur) var(--curva), border-color var(--dur) var(--curva), background var(--dur) var(--curva); }

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  height: var(--alto-cabecera);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  flex-shrink: 0;
}
.marca__simbolo { transition: transform var(--dur) var(--curva); }
.marca:hover .marca__simbolo { transform: rotate(-8deg) scale(1.06); }
.marca__nombre {
  font-family: var(--display);
  font-size: var(--t-guia);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.24em;
  color: var(--texto-claro);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 1.6vw, 2.25rem);
}

.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.3rem + 1.2vw, 1.625rem);
}

/* ── Menú de la cabecera ──────────────────────────────────────────
   Tres estados, cada uno con su recurso: al pasar el ratón se enciende una
   píldora de tinta clara, la sección en la que estás lleva filete de oro y un
   punto, y el resto se queda en gris. Nada de subrayados por defecto. */
.nav__enlace {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Relleno medido: con 11 px por lado el menú no cabe a 1440 y el botón de
     la derecha se parte en dos renglones. Con 8 px entra y sigue habiendo
     superficie táctil de sobra. */
  padding: 6px 8px;
  border-radius: var(--radio-control);
  font-size: var(--t-cuerpo);
  color: var(--texto-claro-2);
  transition: color var(--dur-rapida) var(--curva), background var(--dur-rapida) var(--curva);
  white-space: nowrap;
}
.nav__enlace::before {
  content: "";
  width: 0;
  height: 5px;
  border-radius: 50%;
  background: var(--oro);
  transition: width var(--dur-rapida) var(--curva);
}
.nav__enlace::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: var(--oro);
  transition: width var(--dur) var(--curva);
}
.nav__enlace:hover {
  color: var(--texto-claro);
  background: rgba(255, 255, 255, 0.07);
}
.nav__enlace:hover::after { width: calc(100% - 16px); }
.nav__enlace.is-actual { color: var(--oro-lt); background: rgba(168, 130, 31, 0.12); }
.nav__enlace.is-actual::before { width: 5px; }
.nav__enlace.is-actual::after { width: calc(100% - 16px); }

.nav__contacto { display: flex; align-items: center; gap: var(--e-3); }

/* El botón de la cabecera no se parte en dos renglones. La regla va aquí y no
   en .boton: un botón largo dentro del cuerpo sí tiene que poder envolver, o
   desborda la tarjeta en un teléfono. */
.cabecera .boton { white-space: nowrap; }

.nav__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-menudo);
  color: var(--texto-claro-2);
  border-radius: var(--radio-control);
  transition: color var(--dur-rapida) var(--curva), background var(--dur-rapida) var(--curva);
}
.nav__whatsapp:hover { color: var(--oro-lt); background: rgba(168, 130, 31, 0.1); }

/* Botón de menú móvil */
.menu-boton {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-sm);
  flex-shrink: 0;
}
.menu-boton__lineas {
  position: relative;
  display: block;
  width: 20px;
  height: 12px;
}
.menu-boton__lineas i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--texto-claro);
  border-radius: 2px;
  transition: transform var(--dur) var(--curva), opacity var(--dur-rapida) var(--curva);
}
.menu-boton__lineas i:first-child { top: 0; }
.menu-boton__lineas i:last-child { bottom: 0; }

.menu-boton[aria-expanded="true"] .menu-boton__lineas i:first-child { transform: translateY(5px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__lineas i:last-child { transform: translateY(-5px) rotate(-45deg); }


/* ═══════════════ SELLO / MICRO-ETIQUETA DEL HERO ═══════════════ */
/* Etiqueta de estado. Antes era una píldora con fondo y borde: contenedor de
   plantilla. Ahora es tipografía: mono muy chica, punto de estado y nada más.
   La línea de abajo la ancla al titular como un renglón de ficha técnica. */
.sello {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding-bottom: 6px;
  border-bottom: 1px dotted var(--borde);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.sello__marca {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-tenue);
  flex-shrink: 0;
}
/* Con el hero en oscuro, el punto de estado usa el verde claro de ese contexto
   (9.82:1 sobre tinta) y no el verde oscuro que servía sobre el fondo oro. */
.hero .sello__marca {
  background: var(--verde-lt);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16);
}


/* ═══════════════ DISCIPLINAS (acordeón editorial) ═══════════════ */
.disciplinas { border-top: 1px solid var(--borde); }

.disciplina { border-bottom: 1px dotted var(--borde); }

/* El <h3> que envuelve el botón conserva los márgenes del navegador (1em
   arriba y abajo). Como el artículo tiene borde inferior, esos márgenes no
   colapsan y la caja del h3 sobresale del artículo: se montaba sobre el
   rótulo del grupo siguiente. Se anulan explícitamente. */
.disciplina__cabecera {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

.disciplina__boton {
  display: grid;
  /* La columna del título era de 13 rem: suficiente para «Logo e identidad»,
     corta para «Interfaces de Alta Velocidad». Ahora es fluida y reparte el
     ancho con el lema. */
  grid-template-columns: 4.5rem minmax(0, 0.9fr) minmax(0, 1.1fr) 3rem;
  align-items: center;
  gap: var(--e-4);
  width: 100%;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem) 0;
  text-align: left;
  transition: padding-left var(--dur) var(--curva);
}
.disciplina__boton:hover { padding-left: var(--e-4); }

.disciplina__num {
  font-family: var(--mono);
  font-size: var(--t-cuerpo);
  color: var(--texto-2);
  align-self: center;
  transition: color var(--dur-rapida) var(--curva);
}

.disciplina__titulo {
  font-family: var(--display);
  font-size: var(--t-n4);
  text-wrap: balance;
  font-weight: var(--peso-fuerte);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.disciplina__lema {
  font-size: var(--t-cuerpo);
  color: var(--texto-2);
  line-height: 1.45;
  text-wrap: pretty;
}

/* Signo más que se convierte en cruz */
.disciplina__mas {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: auto;
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background var(--dur) var(--curva), border-color var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.disciplina__mas::before,
.disciplina__mas::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--texto);
  transition: transform var(--dur) var(--curva), background var(--dur) var(--curva);
}
.disciplina__mas::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.disciplina__mas::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }

.disciplina__boton:hover .disciplina__mas { background: var(--ink); border-color: var(--ink); }
.disciplina__boton:hover .disciplina__mas::before,
.disciplina__boton:hover .disciplina__mas::after { background: var(--paper); }

.disciplina__boton[aria-expanded="true"] .disciplina__mas {
  background: var(--oro);
  border-color: var(--oro);
  transform: rotate(135deg);
}
.disciplina__boton[aria-expanded="true"] .disciplina__mas::before,
.disciplina__boton[aria-expanded="true"] .disciplina__mas::after { background: var(--ink); }

.disciplina.is-abierta .disciplina__num,
.disciplina.is-abierta .disciplina__titulo { color: var(--acento); }

/* Los cuatro pilares de sistemas y diseño llevan el acento del eje —magenta—
   en su número y en el signo de abrir; el contenido y las campañas, en oro. */
.disciplina--sistemas {
  --acento: var(--magenta-tx);
  --acento-grafico: var(--magenta);
  --acento-suave: var(--magenta-tenue);
  --acento-linea: var(--magenta-linea);
}
.disciplina--sistemas .disciplina__num { color: var(--acento); }
.disciplina--sistemas .disciplina__boton[aria-expanded="true"] .disciplina__mas {
  background: var(--acento-grafico);
  border-color: var(--acento-grafico);
}
.disciplina--sistemas .disciplina__boton[aria-expanded="true"] .disciplina__mas::after { background: var(--paper); }

.disciplina__cuerpo { overflow: hidden; }
.disciplina__cuerpo[hidden] { display: none; }

.disciplina__interior {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 13rem) minmax(0, 1fr);
  gap: var(--e-4);
  padding-bottom: clamp(1.5rem, 1.25rem + 1.4vw, 2.5rem);
}
.disciplina__texto {
  grid-column: 2;
  max-width: 46ch;
  color: var(--texto-2);
}
.disciplina__aviso {
  grid-column: 3;
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: var(--paper);
  border-left: 2px solid var(--acento-grafico);
  border-radius: var(--radio-sm);
  font-size: var(--t-menudo);
  line-height: 1.6;
  color: var(--texto-2);
}

/* Campos de cada disciplina: nube de etiquetas, no lista de checks */
.campos {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-content: start;
}
.campos li {
  padding: 5px 12px;
  background: var(--paper);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: var(--t-menudo);
  line-height: 1.5;
  color: var(--texto-2);
  transition: border-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}
.campos li:hover { border-color: var(--acento-linea); color: var(--texto); }


/* ═══════════════ RESOLUTOR DE NECESIDADES ═══════════════ */
.resolutor {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--paper-2);
}

.resolutor__lista {
  border-right: 1px solid var(--borde);
  background: var(--paper);
}

.situacion {
  position: relative;
  display: block;
  width: 100%;
  padding: clamp(1rem, 0.9rem + 0.6vw, 1.375rem) clamp(1rem, 0.9rem + 0.8vw, 1.5rem);
  border-bottom: 1px solid var(--borde);
  text-align: left;
  transition: background var(--dur-rapida) var(--curva), padding-left var(--dur) var(--curva);
}
.situacion:last-child { border-bottom: 0; }

.situacion::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 100%;
  background: var(--oro);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur) var(--curva);
}

.situacion:hover { background: var(--paper-2); padding-left: clamp(1.25rem, 1rem + 1vw, 1.875rem); }

.situacion.is-activa { background: var(--paper-2); }
.situacion.is-activa::before { transform: scaleY(1); }

.situacion__texto {
  display: block;
  font-family: var(--display);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-normal);
  line-height: 1.35;
  color: var(--texto-2);
  transition: color var(--dur-rapida) var(--curva);
}
.situacion:hover .situacion__texto { color: var(--texto); }
.situacion.is-activa .situacion__texto { color: var(--texto); font-weight: var(--peso-fuerte); }

.situacion__indicio {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--texto-2);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.situacion:hover .situacion__indicio,
.situacion.is-activa .situacion__indicio { opacity: 1; transform: translateY(0); }
.situacion.is-activa .situacion__indicio { color: var(--acento); }

.resolutor__panel { padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.75rem); }

.caso[hidden] { display: none; }

.caso__diagnostico {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--acento);
}
.caso__titulo {
  margin-top: var(--e-3);
  font-size: var(--t-n4);
  letter-spacing: -0.02em;
}
.caso__texto {
  margin-top: var(--e-4);
  max-width: 52ch;
  color: var(--texto-2);
}
.caso__propuesta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-3);
  margin-top: var(--e-5);
  padding: var(--e-3) 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  font-family: var(--display);
  font-size: var(--t-guia);
  font-weight: var(--peso-fuerte);
}
.caso__clave {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--texto-2);
}
.caso__lista {
  margin-top: var(--e-5);
  display: grid;
  gap: var(--e-3);
}
.caso__lista li {
  position: relative;
  padding-left: var(--e-5);
  font-size: var(--t-cuerpo);
  color: var(--texto-2);
  line-height: 1.55;
}
.caso__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.75em;
  width: 10px; height: 1px;
  background: var(--acento);
}


/* ═══════════════ CAMENA LAB ═══════════════ */
.lab__regla {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding: var(--e-4) var(--e-5);
  background: rgba(168, 130, 31, 0.07);
  border-left: 2px solid var(--acento-grafico);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  color: var(--texto-claro-2);
}
.lab__regla strong { color: var(--texto-claro); }

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

.lab-pieza {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color var(--dur) var(--curva), transform var(--dur-lenta) var(--curva);
}
.lab-pieza:hover { border-color: var(--acento-linea); transform: translateY(-3px); }

.lab-pieza--ancha { grid-column: 1 / -1; }
.lab-pieza--ancha { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }

.lab-pieza__visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background:
    linear-gradient(135deg, rgba(168, 130, 31, 0.06), transparent 60%),
    var(--ink);
  border-bottom: 1px solid var(--borde);
  overflow: hidden;
}
.lab-pieza--ancha .lab-pieza__visual { border-bottom: 0; border-right: 1px solid var(--borde); min-height: 20rem; }

/* Video dentro de una pieza: vertical, con su marco, sin cargar nada hasta que
   alguien le da reproducir (preload="none" + póster). */

/* Capturas reales del producto: se muestran como lo que son —pantallas— con
   marco de ventana y su pie. La imagen es 2x para pantallas densas y va con
   ancho y alto declarados para que no descuadre la rejilla al cargar. */
.lab-pieza__visual--capturas {
  display: grid;
  gap: var(--e-4);
  place-items: stretch;
  padding: clamp(1rem, 0.8rem + 1.4vw, 1.75rem);
}
.captura { margin: 0; }
.captura img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-sm);
  background: var(--mock-0);
}
.captura figcaption {
  margin-top: var(--e-2);
  font-size: var(--t-menudo);
  line-height: 1.5;
  color: var(--texto-claro-2);
}
.captura__nota {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-claro-2);
}

/* Pie de foto de la maqueta: va dentro del bloque visual, pegado a la imagen,
   porque explica qué se está viendo antes de que el lector llegue a la ficha. */
/* Enlace de la pieza que se puede probar en la misma página */
.lab-pieza__enlace {
  margin-top: var(--e-4);
  font-size: var(--t-menudo);
}
.lab-pieza__enlace a {
  display: inline-block;
  padding-block: 5px;
  color: var(--acento);
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lab-pieza__pie {
  margin-top: var(--e-4);
  font-size: var(--t-menudo);
  line-height: 1.55;
  color: var(--texto-claro-2);
  max-width: 46ch;
}

.lab-pieza__info { padding: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); }

.lab-pieza__meta {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}
.lab-pieza__area {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--texto-claro-2);
}

.chip {
  padding: 4px 10px;
  border-radius: var(--radio-control);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.chip--concepto { color: var(--acento); }
.chip--prototipo { color: var(--texto-claro-2); }
.chip--experimento { color: var(--magenta-lt); }
/* Etiquetas previstas para cuando existan proyectos publicables */
.chip--proyecto { color: var(--verde-lt); }
.chip--caso { color: var(--oro-lt); }

.lab-pieza__titulo {
  font-size: var(--t-n5);
  letter-spacing: -0.015em;
}
.lab-pieza__texto {
  margin-top: var(--e-3);
  font-size: var(--t-cuerpo);
  line-height: 1.62;
  color: var(--texto-claro-2);
}
.lab-pieza__detalles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--texto-claro-2);
}
.lab-pieza__detalles li { position: relative; }

.lab__cierre {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: var(--e-6);
  border-top: 1px solid var(--borde);
}
.lab__cierre-texto {
  max-width: 62ch;
  font-size: var(--t-cuerpo);
  color: var(--texto-claro-2);
}
.lab__cierre .boton { justify-self: start; }


/* La pieza del LAB se lee como un proyecto: problema, solución, qué puedes ver.
   Sustituye a la lista de características, que no contaba nada. */
.lab-pieza__ficha {
  margin-top: var(--e-4);
  border-top: 1px solid var(--borde);
}
.lab-pieza__ficha > div {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--borde);
}
.lab-pieza__ficha > div:last-child { border-bottom: 0; }
.lab-pieza__ficha dt {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--acento);
  padding-top: 0.25em;
}
.lab-pieza__ficha dd {
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  color: var(--texto-claro-2);
}


/* Los formatos alternativos del LAB existen para que la sección no se lea
   como la misma plantilla cinco veces seguidas. */


/* ═══════════════ MAQUETAS DEL LAB (interfaces dibujadas en CSS) ═══════════════ */

/* Aviso dentro de cada maqueta. Es imprescindible: en una captura de pantalla
   el chip «Prototipo» no viaja con la imagen, pero este aviso sí. Sin él, las
   cifras de ejemplo podrían leerse como resultados reales. */
.mock-panel__aviso,
.mock-identidad__aviso {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mock-tenue);
}
.mock-panel__aviso {
  padding: 7px 12px 0;
}
.mock-identidad__aviso { order: -1; margin-bottom: var(--e-3); }
/* Sin fotos de stock ni imágenes generadas: las piezas se muestran como
   interfaces reales construidas con CSS, que es lo que sí podemos sostener. */

.mock-identidad {
  display: grid;
  justify-items: center;
  gap: var(--e-2);
  text-align: center;
}
.mock-identidad__simbolo {
  position: relative;
  width: 4.5rem; height: 4.5rem;
  border: 1.5px solid #D9C7A7;
  border-radius: 50%;
  margin-bottom: var(--e-3);
}
.mock-identidad__simbolo::before {
  content: "";
  position: absolute;
  inset: 28%;
  background: #F4EFE6;
  border-radius: 50%;
}
.mock-identidad__simbolo::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 12%;
  width: 1.5px; height: 38%;
  background: #8C5A3C;
  transform: translateX(-50%);
}
.mock-identidad__nombre {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.34em;
  color: #F4EFE6;
}
.mock-identidad__giro {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #D9C7A7;
}
.mock-identidad__paleta {
  display: flex;
  gap: var(--e-2);
  margin-top: var(--e-4);
}
.mock-identidad__paleta i {
  width: 2.25rem; height: 2.25rem;
  background: var(--c);
  border-radius: var(--radio-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.mock-panel {
  width: 100%;
  background: var(--mock-0);
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-sm);
  overflow: hidden;
}
.mock-panel__barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--mock-1);
  border-bottom: 1px solid var(--ink-4);
}
.mock-panel__barra i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-4);
}
.mock-panel__barra span {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--mock-tenue);
  letter-spacing: 0.08em;
}
.mock-panel__cuerpo { padding: 14px; display: grid; gap: 12px; }

.mock-panel__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock-kpi {
  display: grid;
  gap: 3px;
  padding: 10px;
  background: var(--mock-1);
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-sm);
}
.mock-kpi span { font-size: 0.625rem; color: var(--mock-tenue); letter-spacing: 0.04em; }
.mock-kpi strong { font-family: var(--display); font-size: 1.0625rem; color: var(--mock-texto); font-weight: 600; }
.mock-kpi em { font-size: 0.625rem; font-style: normal; color: var(--mock-3); }
.mock-kpi .alza { color: var(--mock-verde); }
.mock-kpi .baja { color: var(--mock-naranja); }

.mock-grafica {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 74px;
  padding: 10px;
  background: var(--mock-1);
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-sm);
}
.mock-grafica span {
  flex: 1;
  height: var(--h);
  background: linear-gradient(to top, rgba(168, 130, 31, 0.35), rgba(168, 130, 31, 0.85));
  border-radius: 2px 2px 0 0;
}

.mock-tabla { display: grid; gap: 6px; }
.mock-tabla p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--mock-1);
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-sm);
  font-size: 0.6875rem;
  color: var(--mock-2);
}
.estado {
  padding: 2px 8px;
  border-radius: var(--radio-control);
  font-size: var(--t-micro);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.estado--ok { background: var(--verde-tenue); color: var(--verde-lt); }
.estado--espera { background: var(--oro-tenue); color: var(--oro-lt); }
.estado--alerta { background: var(--magenta-tenue); color: var(--magenta-lt); }

/* ═══════════ MAQUETAS DE LOS EJEMPLOS ═══════════
   Tres interfaces dibujadas con CSS, como el resto del laboratorio: sin
   imágenes, sin peticiones extra. Todas usan la escala de carbón de las
   maquetas (--mock-*), calculada para que cualquier texto pase AA aunque sea
   de 10 px, y los colores con significado (recibido, listo, entregado) son
   estados, no decoración. */

/* ── El mostrador: la venta en dos toques y la cuenta de quién debe ── */
.mock-mostrador {
  width: 100%;
  background: var(--mock-0);
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-sm);
  overflow: hidden;
}
.mock-mostrador__cuerpo { padding: 14px; display: grid; gap: 12px; }

.mock-cobro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--mock-1);
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-sm);
}
.mock-cobro__etiqueta {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mock-tenue);
}
.mock-cobro__cifra {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mock-texto);
  line-height: 1.1;
}
.mock-cobro__acciones { display: flex; gap: 6px; }
.mock-toque {
  padding: 6px 10px;
  border: 1px solid var(--mock-acento-linea);
  border-radius: var(--radio-control);
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--mock-acento);
}
.mock-toque--lleno { background: var(--mock-acento); border-color: var(--mock-acento); color: var(--mock-0); }

.mock-adeudos { display: grid; gap: 6px; }
.mock-adeudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  background: var(--mock-1);
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-sm);
  font-size: 0.6875rem;
  color: var(--mock-2);
}
.mock-adeudo__quien { color: var(--mock-texto); }
.mock-adeudo__dias { font-family: var(--mono); font-size: 0.625rem; color: var(--mock-naranja); }
.mock-adeudo__monto { font-family: var(--mono); font-size: 0.6875rem; color: var(--mock-verde); }

/* ── Control de autos: lo que está dentro del taller y hace cuánto ── */
.mock-taller { width: 100%; background: var(--mock-0); border: 1px solid var(--ink-4); border-radius: var(--radio-sm); overflow: hidden; }
.mock-taller__cuerpo { padding: 14px; display: grid; gap: 8px; }
.mock-auto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  background: var(--mock-1);
  border: 1px solid var(--ink-4);
  border-left: 3px solid var(--mock-acento);
  border-radius: var(--radio-sm);
}
.mock-auto__titulo { display: block; font-size: 0.75rem; font-weight: 600; color: var(--mock-texto); }
.mock-auto__meta { display: block; margin-top: 3px; font-family: var(--mono); font-size: 0.625rem; color: var(--mock-tenue); }
.mock-auto__dias { text-align: center; }
.mock-auto__dias strong { display: block; font-family: var(--display); font-size: 1.25rem; line-height: 1; color: var(--mock-texto); }
.mock-auto__dias em { display: block; margin-top: 2px; font-family: var(--mono); font-size: 0.5625rem; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mock-tenue); }
.mock-auto--vencido { border-left-color: #E5484D; }
.mock-auto--vencido .mock-auto__dias strong { color: #F08C8F; }
.mock-auto--listo { border-left-color: var(--mock-verde); }
.mock-auto--listo .mock-auto__dias strong { color: var(--mock-verde); }

/* ── Órdenes de servicio: cada trabajo en su etapa ── */
.mock-ordenes { display: grid; gap: 6px; }
.mock-orden {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--mock-1);
  border: 1px solid var(--ink-4);
  border-left: 2px solid var(--mock-acento);
  border-radius: var(--radio-sm);
  font-size: 0.6875rem;
  color: var(--mock-2);
}
.mock-orden__folio { font-family: var(--mono); font-size: 0.625rem; color: var(--mock-tenue); }
.mock-orden__cliente { display: block; margin-top: 2px; color: var(--mock-texto); }

/* ── El cotizador: se marca lo que se necesita y sale el mensaje ── */
.mock-cotizador {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 12px;
}
.mock-cotizador__panel {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 12px;
  background: var(--mock-1);
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-sm);
}
.mock-opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  color: var(--mock-2);
}
.mock-opcion i {
  width: 13px; height: 13px;
  flex-shrink: 0;
  border: 1px solid var(--ink-4);
  border-radius: 3px;
}
.mock-opcion--marcada i {
  background: var(--mock-acento);
  border-color: var(--mock-acento);
  box-shadow: inset 0 0 0 2px var(--mock-1);
}
.mock-opcion em { margin-left: auto; font-family: var(--mono); font-style: normal; font-size: 0.625rem; color: var(--mock-3); }
.mock-opcion--marcada em { color: var(--mock-acento); }
.mock-cotizador__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-4);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--mock-tenue);
}
.mock-cotizador__total strong { font-family: var(--display); font-size: 1.0625rem; color: var(--mock-acento); }

.mock-whats {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  background: var(--mock-0);
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-sm);
}
.mock-whats__cabecera {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink-4);
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--mock-tenue);
}
.mock-whats__cabecera .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--mock-verde); }
.mock-whats__mensaje {
  padding: 10px 12px;
  background: var(--mock-1);
  border-radius: var(--radio-sm) var(--radio-sm) var(--radio-sm) 2px;
  font-size: 0.6875rem;
  line-height: 1.55;
  color: var(--mock-2);
}
.mock-whats__mensaje strong { color: var(--mock-texto); }
.mock-whats__mensaje em { font-style: normal; color: var(--mock-acento); }
.mock-whats__pie { font-family: var(--mono); font-size: 0.625rem; color: var(--mock-tenue); text-align: right; }

@media (max-width: 720px) {
  .mock-cotizador { grid-template-columns: minmax(0, 1fr); }
}

.mock-chat {
  width: 100%;
  max-width: 22rem;
  display: grid;
  gap: 8px;
  padding: 14px;
  background: var(--mock-0);
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-sm);
}
.mock-chat__cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-4);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mock-3);
}
.mock-chat__cabecera .punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #8FC9A0;
}
.mock-chat__entrada,
.mock-chat__salida {
  padding: 9px 12px;
  border-radius: var(--radio-sm);
  font-size: 0.75rem;
  line-height: 1.5;
  max-width: 86%;
}
.mock-chat__entrada {
  justify-self: end;
  background: var(--ink-3);
  color: var(--mock-2);
  border-bottom-right-radius: 3px;
}
.mock-chat__salida {
  justify-self: start;
  background: rgba(168, 130, 31, 0.12);
  border: 1px solid rgba(168, 130, 31, 0.3);
  color: var(--mock-acento);
  border-bottom-left-radius: 3px;
}

.mock-audio__pistas { display: grid; gap: 8px; }
.mock-audio__pistas p {
  display: grid;
  grid-template-columns: 4rem 1fr;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mock-3);
}
.pista {
  display: block;
  height: 6px;
  width: var(--w);
  background: linear-gradient(to right, rgba(168, 130, 31, 0.7), rgba(168, 130, 31, 0.25));
  border-radius: 3px;
}
.mock-audio__onda {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
  padding: 0 4px;
}
.mock-audio__onda i {
  flex: 1;
  height: var(--h);
  background: rgba(232, 199, 102, 0.5);
  border-radius: 2px;
}
.mock-audio__tiempo {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--mock-3);
}

.mock-agenda__dias {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.625rem;
  text-align: center;
  color: var(--mock-tenue);
}
.mock-agenda__dias .hoy {
  color: var(--mock-0);
  background: var(--mock-acento);
  border-radius: 3px;
  font-weight: 700;
}
.mock-agenda__bloques { display: grid; gap: 6px; }
.bloque {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--ink-4);
  font-size: var(--t-micro);
  color: var(--mock-3);
  margin-left: calc(var(--i) * 10px);
}
.bloque span {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--mock-tenue);
}
.bloque--lleno { background: var(--mock-1); color: var(--mock-2); }
.bloque--nuevo {
  background: rgba(232, 199, 102, 0.13);
  border-color: var(--mock-acento-linea);
  color: var(--mock-acento);
}
/* La hora ocupa casi todo el ancho y a 10 px necesita el oro más claro */
.bloque--nuevo span { color: var(--mock-acento); }

.mock-campana__claim {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.875rem);
  font-style: italic;
  line-height: 1.2;
  color: var(--mock-texto);
  text-wrap: balance;
}
.mock-campana__piezas { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.pieza-formato {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(168, 130, 31, 0.45);
  border-radius: var(--radio-sm);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--oro-lt);
}
.pieza-formato--cuadrada { width: 3.5rem; height: 3.5rem; }
.pieza-formato--vertical { width: 2.5rem; height: 4.5rem; }
.pieza-formato--horizontal { width: 6rem; height: 3.375rem; }
.mock-campana__linea {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mock-3);
}


/* Precio de referencia del paquete. Va arriba del resumen porque es lo
   primero que se escanea cuando alguien compara opciones. */
.paquete__precio {
  margin-top: var(--e-3);
  font-family: var(--mono);
  font-size: var(--t-menudo);
  letter-spacing: var(--tracking-mono);
  color: var(--texto-2);
}
.paquete__precio strong {
  color: var(--acento);
  font-weight: var(--peso-fuerte);
}
.paquete--destacado .paquete__precio strong { color: var(--oro-lt); }


.paquete {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
  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);
}
.paquete:hover {
  border-color: var(--borde-fuerte);
  transform: translateY(-3px);
  box-shadow: var(--sombra-sm);
}

/* Con siete tarjetas en tres columnas, la última queda sola. Ocupa el ancho
   completo para que se lea como el cierre de la lista y no como un hueco. */
.paquete--destacado { grid-column: 1 / -1; }

.paquete--destacado {
  background: var(--ink);
  color: var(--texto-claro);
  border-color: var(--ink);
  --borde: var(--borde-oscuro);
}
.paquete--destacado .paquete__para,
.paquete--destacado .paquete__pie { color: var(--texto-claro-2); }
.paquete--destacado .paquete__incluye li { color: var(--texto-claro); border-color: var(--borde); }
/* El paquete destacado es oscuro: su acento debe ser el oro claro,
   igual que en el resto de superficies oscuras del sitio. */
.paquete--destacado {
  --acento: var(--oro-lt);
  --acento-suave: rgba(168, 130, 31, 0.12);
  /* --texto-2 es un gris de 5.1:1 sobre papel, pero solo 3.41:1 sobre tinta.
     En esta tarjeta oscura hay que cambiar el token, no el componente. */
  --texto-2: var(--texto-claro-2);
}

.paquete__nombre {
  font-size: var(--t-n5);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: var(--peso-medio);
}
.paquete__nombre span {
  display: block;
  margin-top: 2px;
  font-size: 1.35em;
  font-weight: var(--peso-fuerte);
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--acento);
}
.paquete--destacado .paquete__nombre { color: var(--texto-claro); }

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

.paquete__incluye {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
  display: grid;
  gap: var(--e-2);
  flex: 1;
}
.paquete__incluye li {
  position: relative;
  padding-left: var(--e-5);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  color: var(--texto);
}
.paquete__incluye li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 9px; height: 1px;
  background: var(--acento);
}

.paquete__pie {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px dashed var(--borde-fuerte);
  font-size: var(--t-menudo);
  line-height: 1.5;
  color: var(--texto-2);
}


/* ── FAQ: pocas preguntas visibles, el resto plegado ──────────
   La FAQ es para resolver dudas, no para volcar todo el contenido
   otra vez. Siete preguntas a la vista; el detalle, a un clic. */

.faq__item--mas { border-bottom: 0; }

.faq__pregunta--mas {
  font-family: var(--mono);
  font-size: var(--t-menudo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-mono);
  color: var(--texto-2);
  padding-block: var(--e-5);
}
.faq__pregunta--mas em { font-style: normal; opacity: 0.7; }
.faq__pregunta--mas:hover { color: var(--acento); }

.faq__respuesta--mas {
  padding: 0 0 var(--e-4);
  max-width: none;
}

.faq__item--anidado {
  border-bottom: 1px solid var(--borde);
}
.faq__item--anidado:first-child { border-top: 1px solid var(--borde); }
/* Dentro del contenedor plegado, cada pregunta cierra con su propia línea:
   sin esto, la última se monta sobre el texto que sigue en pantallas chicas. */
.faq__respuesta--mas > .faq__item--anidado:last-child { border-bottom: 1px solid var(--borde); }
.faq__respuesta--mas { padding-bottom: var(--e-5); }

.faq__pregunta--anidada {
  font-size: var(--t-guia);
  padding-block: var(--e-4);
}


.faq {
  max-width: 58rem;
  border-top: 1px solid var(--borde);
}

.faq__item { border-bottom: 1px solid var(--borde); }

.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: clamp(1.125rem, 1rem + 0.8vw, 1.625rem) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: var(--t-guia);
  font-weight: var(--peso-fuerte);
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color var(--dur-rapida) var(--curva), padding-left var(--dur) var(--curva);
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta:hover { color: var(--acento); padding-left: var(--e-2); }

.faq__signo {
  position: relative;
  width: 1.5rem; height: 1.5rem;
  flex-shrink: 0;
}
.faq__signo::before,
.faq__signo::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--texto-2);
  transition: transform var(--dur) var(--curva), background var(--dur-rapida) var(--curva);
}
.faq__signo::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq__signo::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }

.faq__pregunta:hover .faq__signo::before,
.faq__pregunta:hover .faq__signo::after { background: var(--acento); }

.faq__item[open] .faq__signo::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__respuesta {
  padding-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding-right: clamp(0rem, 2vw, 3rem);
  max-width: 66ch;
}
.faq__respuesta p { color: var(--texto-2); }

.faq__item[open] .faq__respuesta { animation: aparecer var(--dur-lenta) var(--curva-salida) both; }


/* ═══════════════ FORMULARIO ═══════════════ */
.formulario {
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}
.formulario__titulo {
  font-size: var(--t-n5);
  margin-bottom: var(--e-5);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--borde);
}

.campo { margin-bottom: var(--e-4); }
.campo__etiqueta {
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--texto-2);
}
.campo__opcional { text-transform: none; letter-spacing: 0; opacity: 0.8; }

.campo__control {
  width: 100%;
  padding: 0.8125rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  transition: border-color var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva), background var(--dur-rapida) var(--curva);
}
.campo__control::placeholder { color: var(--texto-2); opacity: 0.62; }
.campo__control:hover { border-color: var(--texto-2); }
.campo__control:focus {
  border-color: var(--oro-tx);
  box-shadow: 0 0 0 3px rgba(168, 130, 31, 0.18);
  background: var(--paper-2);
  outline: none;
}
.campo__control--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6759' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.125rem;
  padding-right: 2.75rem;
}
.campo__control--area { resize: vertical; min-height: 6.5rem; }

.campo.is-error .campo__control { border-color: #A63A2A; box-shadow: 0 0 0 3px rgba(166, 58, 42, 0.14); }
.campo__error {
  margin-top: var(--e-2);
  font-size: var(--t-menudo);
  color: #A63A2A;
}

.contexto-aviso {
  margin-bottom: var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: rgba(168, 130, 31, 0.1);
  border-left: 2px solid var(--acento-grafico);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-size: var(--t-menudo);
  line-height: 1.5;
  color: var(--texto);
}

.formulario__ayuda {
  margin-top: var(--e-3);
  font-size: var(--t-menudo);
  line-height: 1.55;
  color: var(--texto-2);
}

.enviado {
  margin-top: var(--e-5);
  padding: var(--e-4) var(--e-5);
  background: rgba(168, 130, 31, 0.08);
  border: 1px solid var(--oro-linea);
  border-radius: var(--radio-sm);
  animation: aparecer var(--dur-lenta) var(--curva-salida) both;
}
.enviado__titulo {
  font-family: var(--display);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-fuerte);
}
.enviado__texto {
  margin: var(--e-2) 0 var(--e-4);
  font-size: var(--t-menudo);
  color: var(--texto-2);
}


/* ═══════════════ CONTACTO DENTRO DEL CIERRE ═══════════════
   El bloque de contacto nació sobre fondo claro y ahora vive dentro
   de la sección oscura de cierre. Sin esta corrección, sus textos
   heredaban los colores de papel sobre tinta: ilegibles.
   Los tokens se reasignan aquí, no se reescriben los componentes. */
.llamada .contacto {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  padding-top: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  border-top: 1px solid var(--borde);
}

.llamada .contacto__titulo { color: var(--texto-claro); }
.llamada .contacto__intro { color: var(--texto-claro-2); }

.llamada .dato { border-bottom-color: var(--borde); }
.llamada .dato__clave { color: var(--texto-claro-2); }
.llamada .dato__valor { color: var(--texto-claro); }
.llamada a.dato__valor:hover { color: var(--oro-lt); }

.llamada .copiar {
  border-color: var(--ink-4);
  color: var(--texto-claro-2);
}
.llamada .copiar:hover { border-color: var(--oro); color: var(--texto-claro); }
/* El estado «Copiado» heredaba el oro oscuro pensado para papel y sobre
   tinta daba 2.74:1. Aquí el acento tiene que ser el claro. */
.llamada .copiar.is-copiado {
  border-color: var(--oro-lt);
  color: var(--oro-lt);
  background: rgba(232, 199, 102, 0.14);
}

/* El formulario conserva su superficie clara: es donde se escribe, y
   un campo oscuro con texto claro se lee peor bajo el sol. */
.llamada .formulario { box-shadow: var(--sombra-lg); }
.llamada .campo__etiqueta { color: var(--texto-2); }
/* El formulario es una superficie clara dentro del cierre oscuro: su título
   no puede heredar el color de texto claro o queda invisible. */
.llamada .formulario__titulo { color: var(--texto); }
.llamada .campo__control { color: var(--texto); }
.llamada .campo__error { color: #A63A2A; }
.llamada .formulario__ayuda { color: var(--texto-2); }
.llamada .contexto-aviso { color: var(--texto); }


/* El armador se toca con el dedo: cada casilla necesita 24px de alto como
   mínimo, y su etiqueta completa tiene que ser el área de toque. */
.opcion {
  min-height: 44px;
  padding: var(--e-3) var(--e-4);
}
/* Enlaces de texto dentro de un párrafo: se tocan con el dedo */
.armar__ayuda a,
.armar__intro a,
.encabezado__intro a,
.volver a,
.cierre-seccion a,
.tarifa ~ p a {
  display: inline-block;
  padding-block: 7px;
}

/* ═══════════════ BOTÓN COPIAR ═══════════════ */
.copiar {
  padding: 5px 11px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-control);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--texto-2);
  transition: border-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva), background var(--dur-rapida) var(--curva);
}
.copiar:hover { border-color: var(--texto); color: var(--texto); }
.copiar.is-copiado {
  border-color: var(--oro-tx);
  color: var(--oro-tx);
  background: rgba(168, 130, 31, 0.1);
}


/* ═══════════════ WHATSAPP FLOTANTE ═══════════════ */
.flotante {
  position: fixed;
  right: clamp(0.875rem, 0.6rem + 1vw, 1.75rem);
  bottom: clamp(0.875rem, 0.6rem + 1vw, 1.75rem);
  z-index: var(--z-flotante);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.8125rem 1.125rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-control);
  font-size: var(--t-menudo);
  font-weight: var(--peso-medio);
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.22);
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur) var(--curva), background var(--dur-rapida) var(--curva),
              box-shadow var(--dur) var(--curva), opacity var(--dur) var(--curva),
              visibility var(--dur) var(--curva);
}
.flotante:hover {
  transform: translateY(-3px);
  background: var(--ink-2);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.3);
}
.flotante__icono {
  width: 1.25rem; height: 1.25rem;
  fill: var(--oro-lt);
  flex-shrink: 0;
}
.flotante__texto { white-space: nowrap; }

/* Aparece solo después de salir del hero: no se duplica el CTA del inicio.
   Va después de la regla base a propósito, para que la especificidad no la anule. */
.flotante[data-visible="false"] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}

/* ═══════════════ PRIORIDAD DEL BOTÓN DE ORO EN OSCURO ═══════════════
   Va al final a propósito: el botón de oro es el CTA de mayor jerarquía
   y debe conservar texto oscuro sobre fondo oro incluso dentro de un
   bloque oscuro, sin depender del orden en que se hayan escrito las
   reglas de contexto. */
.seccion--oscura .boton--oro,
.llamada .boton--oro,
.custom .boton--oro,
.precio .boton--oro,
.pie .boton--oro {
  background: var(--oro);
  color: var(--ink);
  border-color: var(--oro);
}
.hero .boton--oro:hover,
.seccion--oscura .boton--oro:hover,
.llamada .boton--oro:hover,
.custom .boton--oro:hover,
.precio .boton--oro:hover,
.pie .boton--oro:hover {
  background: var(--oro-lt);
  border-color: var(--oro-lt);
  color: var(--ink);
}

/* ═══════════════ ETAPAS Y ARMADOR DE PAQUETE ═══════════════
   Cuatro categorías por etapa del negocio. Cada una lista sus servicios
   con el precio a la vista: quien viene por un logo lo encuentra en la
   primera tarjeta y no tiene que leer nada más. */

.etapas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-4);
}

.etapa {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

/* ── Fondo de color por etapa ─────────────────────────────────────
   Cada etapa tiene su temperatura, para que la rejilla se lea de un vistazo:
   oro = identidad (marca y campañas), verde = que te vean (presencia y
   producción), carbón = el sistema, que sigue siendo el protagonista.
   El acento de dentro cambia con el fondo: sobre fondo de su propio color, el
   tono normal de cada familia se queda corto de contraste. */
.etapa--marca,
.etapa--campanas {
  background: var(--oro-fondo-suave);
  border-top: 3px solid var(--oro);
  --acento: var(--oro-fuerte);
  --acento-grafico: var(--oro-fuerte);
  --acento-suave: rgba(111, 85, 11, 0.10);
  --acento-linea: rgba(111, 85, 11, 0.30);
  --borde: var(--filete-oro);
}

.etapa--presencia,
.etapa--produccion {
  background: var(--verde-fondo);
  border-top: 3px solid var(--verde);
  --acento: var(--verde-tx);
  --acento-grafico: var(--verde);
  --acento-suave: rgba(14, 159, 110, 0.10);
  --acento-linea: var(--verde-linea);
  --borde: var(--filete-verde);
}

/* Nota: la superficie oscura es exclusiva de la etapa protagonista. Antes la
   compartía con la etapa de campañas y las dos bandas pesaban igual: cuando
   todo se destaca, nada se destaca. Las etapas de campañas y de entrada van
   sobre papel y el contraste hace el trabajo de jerarquía. */

/* ── Etapa protagonista: sistemas y automatización ────────────────
   El eje del estudio es diseño + sistemas operativos, y en la sección de
   precios eso se ve: esta etapa ocupa las dos columnas, es la única que
   lleva sello, filete dorado y título a escala mayor. El paquete de entrada
   (marca) sigue existiendo, pero ya no es lo primero que pesa en la página. */
.etapa--ancha { grid-column: 1 / -1; }

.etapa--destacada {
  position: relative;
  background: var(--ink);
  color: var(--texto-claro);
  border-color: var(--ink);
  /* Solo se cambian los tokens de texto y borde: el acento NO se toca aquí.
     Lo pone variables.css (magenta, porque es el eje de sistemas) y si se
     repitiera en este archivo, el orden de carga lo pisaría con el oro. */
  --texto: var(--texto-claro);
  --texto-2: var(--texto-claro-2);
  --borde: var(--borde-oscuro);
  --acento-suave: rgba(214, 36, 122, 0.12);
}
.etapa--destacada::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 96px;
  height: 3px;
  background: var(--acento-grafico);
  border-radius: 0 0 var(--radio-sm) 0;
}

/* Sello: dice para quién es la etapa en cuatro palabras. */
.etapa__sello {
  display: inline-block;
  margin-bottom: var(--e-3);
  padding: 4px 11px;
  border: 1px solid var(--acento-linea);
  border-radius: var(--radio-control);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--acento);
}

/* Dentro de una banda de ancho completo, el contenido se parte en dos
   columnas: el problema a la izquierda, los entregables y el precio a la
   derecha. En una columna, la lista de precios quedaría flotando sola. */
.etapa__cuerpo { display: flex; flex-direction: column; min-width: 0; }

@media (min-width: 901px) {
  .etapa--ancha {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: var(--e-4) clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
    align-items: start;
  }
  .etapa--destacada .etapa__titulo {
    font-size: var(--t-n2);
    max-width: 24ch;
  }
  .etapa--destacada .etapa__texto { font-size: var(--t-cuerpo); max-width: 46ch; }
  /* La lista arranca al ras del título, sin el aire de tarjeta suelta */
  .etapa--ancha .tarifa { margin-top: 0; }

  /* La columna derecha, ocupada de verdad. El bloque animado de negocios va a
     todo lo ancho y, al colocarse solo, empujaba los precios a la fila
     siguiente: la tabla quedaba en la columna izquierda y los 720 px de la
     derecha se quedaban vacíos en una banda de 1226. La rejilla quería decir
     «el problema a la izquierda, los entregables y el precio a la derecha», y
     no lo estaba diciendo. Ahora se le dice dónde va. */
  .etapa--ancha .etapa__cuerpo { grid-column: 2; grid-row: 1; }
}

/* El globo dentro de la banda oscura: fondo de la misma familia del carbón */
.etapa--destacada /* ═══════════════ TABLA DE PRECIOS ═══════════════
   Antes era una lista de renglones sueltos; ahora es una tabla de verdad
   —table, thead, th scope, td— porque los precios SON datos tabulares: lo que
   se compara es el nombre contra la cifra, en columnas. Eso arregla algo que
   la lista no podía: los precios quedan alineados entre sí y se comparan de un
   vistazo, sin leer.

   Nada de cebra, ni cajas, ni fondo de color, ni banda en el encabezado: eso
   es lo que hace que una tabla de precios parezca plantilla. Se sostiene con
   filetes de un píxel, aire y cifras monoespaciadas de ancho fijo. */
.tarifa {
  width: 100%;
  margin-top: var(--e-5);
  border-collapse: collapse;
  text-align: left;
}

/* Encabezado: rótulo de ficha técnica, no barra de tabla. */
.tarifa thead th {
  padding: 0 0 var(--e-3);
  border-bottom: 1px solid var(--borde);
  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);
}
.tarifa thead th:last-child { text-align: right; }

.tarifa__fila { border-bottom: 1px dotted var(--borde); }
.tarifa__fila:last-child { border-bottom: 0; }
.tarifa__fila:hover .tarifa__nombre { color: var(--acento); }

.tarifa__que { position: relative; padding: 0; font-weight: var(--peso-normal); }

/* El renglón entero se toca: el botón ocupa su celda y lleva el signo. */
.tarifa__boton {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-3) var(--e-3) var(--e-3) 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.tarifa__nombre {
  font-size: var(--t-cuerpo);
  line-height: 1.4;
  color: var(--texto);
}

/* El signo: sin esto nadie sabe que el renglón se abre. Se dibuja con dos
   barras de 1.5 px; al abrir queda solo la horizontal, que es un menos. Nada
   de texto: un «+» de verdad lo leerían en voz alta los lectores de pantalla,
   y el estado ya lo dice aria-expanded. */
.tarifa__signo {
  width: 13px;
  height: 13px;
  color: var(--texto-2);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 13px 1.5px, 1.5px 13px;
  background-position: center center;
  background-repeat: no-repeat;
  transition: background-size var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}
.tarifa__boton:hover .tarifa__signo,
.tarifa__boton[aria-expanded="true"] .tarifa__signo { color: var(--acento); }
.tarifa__boton[aria-expanded="true"] .tarifa__signo { background-size: 13px 1.5px, 0 0; }

.tarifa__precio {
  padding: var(--e-3) 0;
  font-family: var(--mono);
  font-size: var(--t-menudo);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
  color: var(--acento);
  width: 1%;   /* la columna se encoge al contenido: no le roba ancho al nombre */
}

/* La ficha dentro de la banda oscura: fondo de la misma familia del carbón.
   Ojo con esta regla. Estaba escrita como «.servicios__globo» a secas, en medio
   de la tabla de precios, y hacía dos cosas malas a la vez: le daba fondo oscuro
   a las fichas de TODAS las bandas y, como la regla base de la ficha viene más
   abajo en este archivo, ni siquiera se aplicaba. Resultado: en la banda oscura
   el texto claro caía sobre papel claro — 1.07:1, ilegible— y nadie lo veía,
   porque la ficha solo se pinta al abrirla. Lo encontró docs/medir-fichas.mjs
   la primera vez que midió de verdad. */
.etapa--destacada .servicios__globo { background: var(--ink-2); }

/* Caja que justifica la inversión: en la banda oscura, un fondo apenas más
   claro y un filete de acento. Sin ella, la cifra de $8,000 llega sin contexto. */
.etapa__caja {
  margin-top: var(--e-5);
  padding: var(--e-4) var(--e-5);
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--acento-grafico);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-size: var(--t-menudo);
  line-height: 1.6;
  color: var(--texto-2);
}
.etapa__caja-titulo {
  margin-bottom: var(--e-2);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}
.etapa__caja p { margin: 0; }
.etapa__caja p + p { margin-top: var(--e-3); }

/* Para quién es: tres casos concretos, a todo el ancho de la banda */
.etapa__giros {
  grid-column: 1 / -1;
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px dashed var(--borde);
}
.etapa__giros-titulo {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--acento);
}




@media (max-width: 900px) {
  
}

/* Enlace secundario de la etapa protagonista: el armador sigue ahí, pero
   como salida, no como la acción principal (esa es WhatsApp). Lleva relleno
   propio para no quedar por debajo del objetivo táctil mínimo de 24 px. */
.etapa__armador {
  display: inline-block;
  padding-block: 6px;
  font-size: var(--t-menudo);
  color: var(--texto-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--borde);
}
.etapa__armador:hover,
.etapa__armador:focus-visible { color: var(--texto); text-decoration-color: currentColor; }

.etapa__cuando {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--acento);
}

.etapa__titulo {
  margin-top: var(--e-3);
  font-size: var(--t-n4);
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.etapa__texto {
  margin-top: var(--e-3);
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  color: var(--texto-2);
  max-width: 42ch;
}

/* ── El detalle del renglón ──────────────────────────────────────
   Antes era un globo de una línea que flotaba sobre lo que venía abajo: cabía
   porque medía 99 px. Desde que el renglón lleva «Incluye», la ficha mide entre
   200 y 270 px, y flotando tapaba media tabla: medido, 13 de 28 fichas pisaban
   la nota o los botones del pie de su banda. Ahora se abre en su propio
   renglón y empuja lo que sigue, igual que ya hacía en el celular: ninguna
   ficha esconde nada.

   Se abre al tocar el renglón —el botón ocupa la celda y lleva el signo— y con
   el teclado al enfocarlo. Ya no se abre con solo pasar el ratón: con fichas de
   este tamaño, mover el cursor por la tabla la reacomodaría entera. */
.servicios__globo {
  display: none;
  margin-top: var(--e-3);
  padding: var(--e-4);
  background: var(--paper-2);
  border: 1px solid var(--borde);
  border-left: 2px solid var(--acento);
  border-radius: var(--radio-sm);
  font-size: var(--t-menudo);
  line-height: 1.55;
  font-weight: var(--peso-normal);
  color: var(--texto-2);
}
.servicios__globo strong { color: var(--texto); }
.servicios__globo[data-abierto="si"],
.tarifa__fila:focus-within .servicios__globo {
  display: block;
}

/* ── La ficha del renglón: qué es y qué incluye ──────────────────
   La cifra de la derecha («desde $9,600») no se sostenía sola: decía cuánto y
   no decía qué. Aquí va lo que se construye, en cosas concretas y no en
   promesas. Es la respuesta a «¿y por eso cuánto?», en el mismo renglón. */
.servicios__globo p { margin: 0; }
.servicios__globo p + p { margin-top: var(--e-3); }
.servicios__resumen { color: var(--texto); }
.servicios__etiqueta {
  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);
}
.servicios__incluye {
  display: grid;
  gap: var(--e-2);
  margin: var(--e-2) 0 0;
  padding: 0;
  list-style: none;
}
.servicios__incluye li {
  position: relative;
  padding-left: 1.1rem;
}
.servicios__incluye li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--acento);
}
.servicios__nota { color: var(--texto-2); }

.servicios__que {
  font-size: var(--t-cuerpo);
  line-height: 1.4;
  color: var(--texto);
}

.servicios__cuanto {
  font-family: var(--mono);
  font-size: var(--t-menudo);
  white-space: nowrap;
  color: var(--acento);
  font-weight: var(--peso-fuerte);
}

.etapa__nota {
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: var(--acento-suave);
  border-left: 2px solid var(--acento-grafico);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-size: var(--t-menudo);
  line-height: 1.55;
  color: var(--texto-2);
}
.etapa__nota strong { color: var(--texto); }

.etapa__pie {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
  display: grid;
  gap: var(--e-3);
  justify-items: start;
}
.etapa__paquete { font-size: var(--t-menudo); color: var(--texto-2); }

/* ── Armador de paquete ─────────────────────────────────────── */
.armar {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding: clamp(1.5rem, 1.2rem + 2vw, 2.75rem);
  background: var(--ink);
  color: var(--texto-claro);
  border-radius: var(--radio-lg);
  --texto: var(--texto-claro);
  --texto-2: var(--texto-claro-2);
  --borde: var(--borde-oscuro);
  --acento: var(--oro-lt);
  --acento-suave: rgba(168, 130, 31, 0.12);
}

.armar__titulo {
  font-size: var(--t-n4);
  letter-spacing: -0.02em;
}
.armar__intro {
  margin-top: var(--e-4);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  color: var(--texto-2);
  max-width: 40ch;
}
.armar__ayuda {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
  font-size: var(--t-cuerpo);
  color: var(--texto-2);
}
.armar__ayuda a { color: var(--oro-lt); font-weight: var(--peso-medio); }

.armar__formulario { display: grid; gap: var(--e-5); }

.armar__grupo {
  border: 0;
  padding: 0;
  display: grid;
  gap: var(--e-2);
}

.armar__leyenda {
  padding: 0;
  margin-bottom: var(--e-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--oro-lt);
}

.opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: rgba(244, 241, 232, 0.04);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--curva), background var(--dur-rapida) var(--curva);
}
.opcion:hover { border-color: var(--oro); background: rgba(168, 130, 31, 0.08); }

/* La casilla nativa se oculta y se dibuja una a medida: así mide 24px de
   verdad (el mínimo táctil) y el área de toque es la etiqueta completa.
   El input sigue existiendo y sigue siendo accesible por teclado. */
.opcion input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.opcion__marca {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: transparent;
  transition: border-color var(--dur-rapida) var(--curva), background var(--dur-rapida) var(--curva);
}
.opcion__marca::after {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 6px; height: 11px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform var(--dur-rapida) var(--curva);
}
.opcion:has(input:checked) .opcion__marca {
  background: var(--oro);
  border-color: var(--oro);
}
.opcion:has(input:checked) .opcion__marca::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
/* Foco de teclado visible en la casilla dibujada */
.opcion:has(input:focus-visible) .opcion__marca {
  outline: 2px solid var(--oro-lt);
  outline-offset: 2px;
}

/* En pantallas chicas el nombre y el precio no caben en una línea:
   se envuelven en lugar de salirse de la pantalla. */
.opcion span {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px var(--e-3);
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--t-cuerpo);
  line-height: 1.35;
  color: var(--texto-claro);
}
.opcion span > span,
.opcion span { text-wrap: pretty; }
.opcion em {
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--t-menudo);
  color: var(--texto-2);
  white-space: nowrap;
}
.opcion:has(input:checked) { border-color: var(--oro); background: rgba(168, 130, 31, 0.14); }
.opcion:has(input:checked) em { color: var(--oro-lt); font-weight: var(--peso-fuerte); }

.armar__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-4) 0 0;
  border-top: 1px solid var(--borde);
}
.armar__total-etiqueta {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-2);
}
.armar__total-cifra {
  font-family: var(--display);
  font-size: var(--t-n3);
  color: var(--oro-lt);
  font-weight: var(--peso-fuerte);
}
.armar__total-nota {
  flex: 1 1 100%;
  font-size: var(--t-menudo);
  color: var(--texto-2);
}

.armar__aviso {
  font-size: var(--t-menudo);
  line-height: 1.5;
  color: var(--texto-2);
}

/* ═══════════════ TARJETAS DE CASO ═══════════════
   Sustituyen a las siete pestañas con tres párrafos cada una. El problema
   en una frase, la solución en tres puntos y el botón: lo que se lee de un
   vistazo. Si alguien necesita más, pregunta. */
.casos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--e-4);
}

.caso-tarjeta {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  background: var(--paper-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.caso-tarjeta:hover { border-color: var(--acento); transform: translateY(-2px); }

.caso-tarjeta__problema {
  font-size: var(--t-guia);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.caso-tarjeta__etiqueta {
  margin-top: var(--e-4);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--acento);
}

.caso-tarjeta__puntos {
  margin-top: var(--e-3);
  display: grid;
  gap: var(--e-2);
  flex: 1;
}
.caso-tarjeta__puntos li {
  position: relative;
  padding-left: var(--e-5);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  color: var(--texto-2);
}
.caso-tarjeta__puntos li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 9px; height: 1px;
  background: var(--acento);
}

.caso-tarjeta__accion {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-medio);
  color: var(--acento);
  text-decoration: none;
}
.caso-tarjeta__accion:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════ TEXTO QUE SE ESCRIBE SOLO ═══════════════
   El rotador no trae caja propia: se adapta a donde vive, porque en el titular
   del hero es una línea de display y en el bloque de negocios es un párrafo.
   Lo único que sí trae es el cursor: una barra del ancho de un pelo que parpadea
   solo mientras se escribe. Nada de fondo, ni caja, ni borde. */
.rotador { position: relative; }

.rotador__cursor {
  display: inline-block;
  width: 0.08em;
  height: 0.86em;
  margin-left: 0.08em;
  vertical-align: -0.06em;
  background: currentColor;
  opacity: 0;
}

/* El cursor solo parpadea cuando el rotador está trabajando: si alguien pidió
   calma, o si el script no cargó, no hay cursor parpadeando para nadie. */
.rotador--activo .rotador__cursor { animation: parpadeo 1.05s steps(1, end) infinite; }

@keyframes parpadeo {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rotador__cursor { animation: none; opacity: 0; }
}

/* ── El bloque de negocios: de lista a declaración ──
   Antes eran tres renglones con negrita; ahora es un bloque centrado donde el
   texto va cambiando. Se centra a propósito: es el único momento del recorrido
   donde la página le habla directo al dueño y le hace una pregunta. */
.etapa__giros--dinamico {
  text-align: center;
}
.giros__rotador {
  margin: var(--e-5) auto 0;
  color: var(--texto);
  text-wrap: pretty;
}

/* ── El bloque de negocios: frase grande, en dos colores y con fundido ──
   Eran frases de 130 letras escritas una por una: se sentía eterno, por más
   rápido que se escribiera. Ahora la frase entera entra y sale con un fundido
   corto, y va partida en dos: la pregunta que describe el problema, en gris, y
   lo que hace falta para resolverlo, en el acento de la zona. La letra sube un
   escalón: de la entrada (20 px) al escalón de bloque (32 px en escritorio,
   24 en teléfono). */
.giros__rotador {
  max-width: 52rem;
  font-size: var(--t-n4);
  line-height: 1.32;
  letter-spacing: -0.01em;
}
.giros__rotador .rotador__pregunta {
  color: var(--texto-2);
  font-weight: var(--peso-medio);
}
.giros__rotador .rotador__respuesta {
  color: var(--acento);
  font-weight: var(--peso-fuerte);
}

/* El fundido: corto y sin desplazamiento. Nada de la frase saliendo por un lado
   y entrando por el otro: eso se siente barato y marea. */
.rotador--fundido .rotador__texto {
  transition: opacity 180ms var(--curva), filter 180ms var(--curva);
}
.rotador--saliendo .rotador__texto { opacity: 0; }
.rotador--entrando .rotador__texto { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rotador--fundido .rotador__texto { transition: none; }
}

/* ═══════════════ TARJETAS DE DIAGNÓSTICO ═══════════════
   Cada una con su tono suave: la rejilla deja de ser siete bloques iguales y
   se puede recorrer con la vista. Y al pasar el ratón, la tarjeta se agranda un
   poco —después de un segundo, no de golpe— para que el texto se lea cómodo
   sin salir de la página. */
/* Las seis tarjetas son seis diagnósticos del mismo valor: ninguna va destacada.
   Antes la primera iba en oscuro y eso sugería una jerarquía que no existe.
   Sobre estos tintes el oro normal (#8A6A0F) se queda en 4.41:1 y no pasa:
   medido. El contexto baja al oro fuerte, que es lo que el sitio ya hace en la
   franja del hero sobre fondo oro. */
.caso-tarjeta { --acento: var(--oro-fuerte); }

.caso-tarjeta--t1 { background: var(--tinte-1); }
.caso-tarjeta--t2 { background: var(--tinte-2); }
.caso-tarjeta--t3 { background: var(--tinte-3); }
.caso-tarjeta--t4 { background: var(--tinte-4); }
.caso-tarjeta--t5 { background: var(--tinte-5); }
.caso-tarjeta--t6 { background: var(--tinte-6); }
.caso-tarjeta--t7 { background: var(--tinte-7); }

/* El agrandado, solo donde hay ratón de verdad: en una pantalla táctil el
   :hover se queda pegado y la tarjeta se quedaría grande para siempre. */
@media (hover: hover) and (pointer: fine) {
  .caso-tarjeta {
    transition: transform 260ms var(--curva-salida), box-shadow 260ms var(--curva-salida);
    transform-origin: center;
  }
  .caso-tarjeta:hover {
    /* El retardo es el punto: solo se agranda si el ratón se detiene encima un
       segundo. Al pasar de largo, la rejilla no tiembla. */
    transition-delay: 1000ms;
    transform: scale(1.028);
    box-shadow: 0 18px 40px rgba(17, 17, 17, 0.13);
    position: relative;
    z-index: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .caso-tarjeta:hover { transform: none; }
}


/* ═══════════════ CAPTURAS: ABRIR EN GRANDE ═══════════════
   Cada captura es un enlace: sin JavaScript abre la imagen a tamaño completo,
   que ya es útil; con JavaScript abre el visor sin salir de la página. */
.captura__abrir {
  display: block;
  position: relative;
  cursor: zoom-in;
  border-radius: var(--radio-sm);
}
.captura__abrir img { display: block; width: 100%; height: auto; }
.captura__lupa {
  position: absolute;
  right: var(--e-3);
  bottom: var(--e-3);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F3F0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 18px no-repeat;
  border: 1px solid rgba(244, 243, 240, 0.35);
  opacity: 0;
  transition: opacity var(--dur-rapida) var(--curva);
}
.captura__abrir:hover .captura__lupa,
.captura__abrir:focus-visible .captura__lupa { opacity: 1; }
@media (hover: none) { .captura__lupa { opacity: 1; } }

/* El visor: la captura a tamaño completo, encima de todo. */
.visor {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 90);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(11, 11, 11, 0.92);
  overflow: auto;
}
.visor[hidden] { display: none; }
.visor__imagen {
  max-width: min(100%, 1400px);
  height: auto;
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-sm);
  background: var(--ink-2);
}
.visor__cerrar {
  position: fixed;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--ink-4);
  border-radius: var(--radio-control);
  background: var(--ink);
  color: var(--texto-claro);
  font-family: var(--mono);
  font-size: var(--t-menudo);
  cursor: pointer;
}
.visor__cerrar:hover { border-color: var(--verde-lt); color: var(--verde-lt); }

/* ═══════════════ VOLVER ARRIBA ═══════════════
   La página es larga: junto al botón de WhatsApp hay uno para volver al inicio.
   Va encima del de WhatsApp —mismo ancho, misma familia— y en teléfono se queda
   en el icono, como el otro. */
.flotante--arriba {
  bottom: calc(clamp(0.875rem, 0.6rem + 1vw, 1.75rem) + 52px + 0.5rem);
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--borde-fuerte);
}
.flotante--arriba:hover { background: var(--paper); color: var(--ink); }
.flotante--arriba .flotante__icono { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .flotante--arriba { padding: 0.8125rem; }
  .flotante--arriba .flotante__texto { display: none; }
}

/* ═══════════════ EL CASO DE CADA PROYECTO, PLEGADO ═══════════════
   La ficha —el problema, lo que hicimos y por qué— ocupaba tanto como las
   capturas y competía con ellas. Ahora va plegada: de entrada se ven las
   capturas y el nombre del proyecto, y quien quiera el razonamiento lo abre.
   Se hace con <details>, así que funciona sin JavaScript, se abre con teclado y
   los lectores de pantalla lo anuncian como lo que es. */
.lab-pieza__caso { margin-top: var(--e-4); }

.lab-pieza__abrir {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: var(--t-menudo);
  color: var(--acento);
  letter-spacing: 0.02em;
}
.lab-pieza__abrir::-webkit-details-marker { display: none; }
.lab-pieza__abrir:hover { text-decoration: underline; text-underline-offset: 4px; }

/* El signo es el mismo recurso que en las tablas de precio: dos barras de 1.5 px
   que forman un más y se quedan en un menos al abrir. Dibujado, no escrito: un
   «+» de verdad lo leerían en voz alta los lectores de pantalla. */
.lab-pieza__signo {
  width: 12px; height: 12px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 12px 1.5px, 1.5px 12px;
  background-position: center center;
  background-repeat: no-repeat;
  transition: background-size var(--dur-rapida) var(--curva);
}
.lab-pieza__caso[open] .lab-pieza__signo { background-size: 12px 1.5px, 0 0; }

/* Al abrir, la ficha entra con el mismo aparecer suave del resto del sitio. */
.lab-pieza__caso[open] .lab-pieza__ficha,
.lab-pieza__caso[open] .lab-pieza__pie { animation: aparecer var(--dur-lenta) var(--curva-salida) both; }
.lab-pieza__caso .lab-pieza__ficha { margin-top: var(--e-3); }
@media (prefers-reduced-motion: reduce) {
  .lab-pieza__caso[open] .lab-pieza__ficha,
  .lab-pieza__caso[open] .lab-pieza__pie { animation: none; }
}