/* ============================================================
   secciones.css — lo específico de cada sección.
   Sección 6 de la especificación.
   ============================================================ */

/* ============================================================
   6.0 HEADER
   ============================================================ */

.cabecera {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-end: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}

/* A partir de 80px de scroll (lo aplica nav.js) */
.cabecera.desplazada {
  background: rgba(11, 13, 23, 0.85);
  border-block-end-color: var(--tinta-borde);
}

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

/* ---------- Logotipo ---------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  color: var(--papel);
  text-decoration: none;
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 800;
  font-variation-settings: "wdth" 100, "opsz" 24;
  letter-spacing: -0.02em;
  line-height: 1;
}

.logo:hover {
  color: var(--papel);
}

/* La marca de cuatro bloques. No lleva el efecto de resolución
   de la sección 5: esa firma es exclusiva del portfolio. */
.logo-marca {
  flex: none;
  inline-size: 26px;
  block-size: 26px;
}

/* ---------- Navegación de escritorio ------------------------ */

.nav-escritorio {
  display: none;
}

@media (min-width: 768px) {
  .nav-escritorio {
    display: block;
  }
}

.nav-lista {
  display: flex;
  align-items: center;
  gap: var(--e-6);
}

.nav-link {
  position: relative;
  display: inline-block;
  padding-block: var(--e-2);
  color: var(--papel-tenue);
  font-size: var(--t-chico);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease);
}

.nav-link:hover {
  color: var(--papel);
}

/* Scroll spy: subrayado en cian de la sección visible */
.nav-link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 1px;
  background: var(--cian);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}

.nav-link[aria-current="true"] {
  color: var(--papel);
}

.nav-link[aria-current="true"]::after {
  transform: scaleX(1);
}

/* ---------- Acciones del header ----------------------------- */

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

/* El botón de cotizar es visible siempre, también en móvil.
   Criterio de éxito de 6.0. */
.cabecera-cta {
  padding-inline: var(--e-4);
}

@media (min-width: 768px) {
  .cabecera-cta {
    padding-inline: var(--e-5);
  }
}

/* ---------- Botón hamburguesa ------------------------------- */

.menu-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-pildora);
  color: var(--papel);
}

@media (min-width: 768px) {
  .menu-boton {
    display: none;
  }
}

.menu-boton-lineas,
.menu-boton-lineas::before,
.menu-boton-lineas::after {
  display: block;
  inline-size: 16px;
  block-size: 1.5px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease),
              opacity var(--dur-rapida) var(--ease);
}

.menu-boton-lineas::before,
.menu-boton-lineas::after {
  content: "";
  position: relative;
}

.menu-boton-lineas::before { inset-block-start: -5.5px; }
.menu-boton-lineas::after  { inset-block-start: 4px; }

.menu-boton[aria-expanded="true"] .menu-boton-lineas {
  background: transparent;
}

.menu-boton[aria-expanded="true"] .menu-boton-lineas::before {
  transform: translateY(5.5px) rotate(45deg);
}

.menu-boton[aria-expanded="true"] .menu-boton-lineas::after {
  transform: translateY(-4px) rotate(-45deg);
}

/* ---------- Panel móvil a pantalla completa ------------------
   Panel completo, no drawer lateral ni acordeón (sección 6.0).
   ----------------------------------------------------------- */

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: var(--e-5);
  background: var(--tinta);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease),
              visibility var(--dur-base) var(--ease);
}

/* Sin esto el display:flex de arriba le gana a la regla [hidden]
   del navegador y el atributo queda decorativo. */
.menu-panel[hidden] {
  display: none;
}

.menu-panel.abierto {
  visibility: visible;
  opacity: 1;
}

@media (min-width: 768px) {
  .menu-panel {
    display: none;
  }
}

.menu-panel-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--alto-cabecera);
  margin-block-end: var(--e-7);
}

.menu-panel-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

/* Links grandes: objetivo táctil muy por encima del mínimo */
.menu-panel-link {
  display: block;
  padding-block: var(--e-5);
  border-block-end: 1px solid var(--tinta-borde);
  color: var(--papel);
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 700;
  font-variation-settings: "wdth" 90, "opsz" 36;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.menu-panel-pie {
  margin-block-start: auto;
  padding-block-start: var(--e-6);
}

/* Bloquea el scroll del documento mientras el panel está abierto */
body.menu-abierto {
  overflow: hidden;
}

/* ============================================================
   6.1 HERO
   ============================================================ */

.hero {
  display: flex;
  align-items: center;
  min-block-size: 88vh; /* no 100vh: deja asomar la sección siguiente */
  padding-block: var(--e-9) var(--e-8);
}

.hero-interior {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  inline-size: 100%;
}

.hero-titulo {
  max-inline-size: 16ch;
}

.hero-bajada {
  max-inline-size: 52ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--papel-tenue);
}

.hero-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-block-start: var(--e-2);
}

/* En 360px los dos botones entran uno por línea, a ancho completo */
@media (max-width: 400px) {
  .hero-botones .boton {
    flex: 1 1 100%;
  }
}

/* ============================================================
   6.2 SERVICIOS
   ============================================================ */

.servicios-grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .servicios-grilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.servicio {
  gap: var(--e-5);
}

.servicio-icono {
  inline-size: 32px;
  block-size: 32px;
  color: var(--cian);
}

.servicio-descripcion {
  max-inline-size: none;
  font-size: var(--t-chico);
}

.servicio-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-block-start: auto;
  padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--tinta-borde);
}

.servicio-item {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  font-size: var(--t-chico);
  line-height: 1.5;
  color: var(--papel-tenue);
}

/* Trazo simple en cian, no un pictograma de librería (sección 6.2) */
.servicio-item::before {
  content: "";
  flex: none;
  inline-size: 10px;
  block-size: 1px;
  margin-block-start: 0.7em;
  background: var(--cian);
}

/* ============================================================
   6.3 TRABAJOS
   ============================================================ */

.trabajos-cabecera {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  margin-block-end: var(--e-8);
}

@media (min-width: 1024px) {
  .trabajos-cabecera {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-8);
  }

  .trabajos-cabecera .seccion-cabecera {
    margin-block-end: 0;
  }
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

/* auto-fit en vez de un número fijo de columnas.

   Con el mínimo en 280px da exactamente los cortes que pide la
   sección 6.3 —1 columna abajo de 640, 2 desde 640, 3 desde
   1024— pero además colapsa las pistas que sobran. Con dos
   proyectos las tarjetas ocupan media pantalla cada una en vez
   de dejar un tercio vacío, que se lee como que falta algo.
   Cuando entre el tercero vuelve a tres columnas solo. */
.trabajos-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--gutter);
}

/* El filtro es CSS puro sobre data-categoria. JS solo alterna
   el atributo del contenedor y el aria-pressed de las píldoras. */
.trabajos-grilla[data-filtro="webs"]    .proyecto:not([data-categoria="webs"]),
.trabajos-grilla[data-filtro="tiendas"] .proyecto:not([data-categoria="tiendas"]) {
  display: none;
}

/* ---------- Tarjeta de proyecto ----------------------------- */

.proyecto {
  display: block;
  overflow: hidden;
  background: var(--tinta-alta);
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-tarjeta);
  color: var(--papel);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease);
}

/* Hover: borde violeta e imagen a 1.03. Nada más (sección 8.2) */
.proyecto:hover {
  border-color: var(--violeta);
  color: var(--papel);
}

.proyecto-imagen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--tinta);
  border-block-end: 1px solid var(--tinta-borde);
}

.proyecto-imagen img,
.proyecto-imagen picture {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.proyecto-imagen img {
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease);
}

.proyecto:hover .proyecto-imagen img {
  transform: scale(1.03);
}

/* ---------- Elemento firma (sección 5) ----------------------
   La miniatura de ~20px va inline como data URI y se escala con
   image-rendering: pixelated. Al entrar la tarjeta en viewport,
   la imagen completa hace fade-in por encima en 600ms.
   Solo acá. No replicar en ningún otro lugar de la página.
   ----------------------------------------------------------- */

.proyecto-lqip {
  image-rendering: pixelated;
  z-index: 0;
}

.proyecto-full {
  z-index: 1;
  opacity: 0;
  transition: opacity var(--dur-lenta) var(--ease);
}

.proyecto-full.resuelto {
  opacity: 1;
}

/* Sin JS la imagen completa se ve siempre: la página no depende
   del efecto para mostrar el portfolio. */
html:not(.js) .proyecto-full {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .proyecto-full {
    opacity: 1;
    transition: none;
  }

  .proyecto:hover .proyecto-imagen img {
    transform: none;
  }
}

.proyecto-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
}

.proyecto-rubro {
  font-family: var(--f-mono);
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--papel-tenue);
}

.proyecto-cliente {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

/* Flecha de "abre en pestaña nueva" */
.proyecto-flecha {
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  color: var(--papel-tenue);
  transition: color var(--dur-rapida) var(--ease);
}

.proyecto:hover .proyecto-flecha {
  color: var(--violeta-alto);
}

/* La línea de resultado concreto y verificable */
.proyecto-resultado {
  max-inline-size: none;
  margin-block-start: var(--e-2);
  padding-block-start: var(--e-4);
  border-block-start: 1px solid var(--tinta-borde);
  font-size: var(--t-chico);
  color: var(--papel-tenue);
}

/* Aviso de que faltan proyectos reales. Se borra junto con el
   contenido de relleno. */
.trabajos-nota {
  margin-block-start: var(--e-6);
  font-family: var(--f-mono);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.08em;
  color: var(--papel-tenue);
}

/* ============================================================
   6.4 PROCESO
   ============================================================ */

.proceso-pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-6);
}

@media (min-width: 1024px) {
  .proceso-pasos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gutter);
  }
}

.paso {
  position: relative;
  display: flex;
  gap: var(--e-5);
  align-items: flex-start;
}

/* La línea que conecta un paso con el siguiente. Nace en el borde
   del número y muere en el centro del que sigue: así no sobra
   después del paso 4. Móvil: vertical, a la izquierda. */
.paso:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 15px;
  inset-block: 32px calc(-1 * (var(--e-6) + 16px));
  inline-size: 1px;
  background: var(--tinta-borde);
}

@media (min-width: 1024px) {
  .paso {
    flex-direction: column;
    gap: var(--e-5);
  }

  /* Escritorio: la misma línea, horizontal, a la altura del número */
  .paso:not(:last-child)::after {
    inset-block: 15px auto;
    inset-inline: 32px calc(-1 * (var(--gutter) + 16px));
    inline-size: auto;
    block-size: 1px;
  }
}

/* El número en mono, grande, en cian. Acá la numeración es
   información real: el orden importa (sección 6.4). */
.paso-numero {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  background: var(--tinta);
  border-radius: 50%;
  font-family: var(--f-mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--cian);
}

.paso-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.paso-titulo {
  font-family: var(--f-cuerpo);
  font-size: var(--t-tarjeta);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.paso-texto {
  max-inline-size: 34ch;
  font-size: var(--t-chico);
}

/* Paso 2: la promesa de las 24 h, segunda de sus tres apariciones.
   El margen negativo cancela exactamente el padding y el borde, así
   el recuadro sangra hacia afuera y el título queda alineado con
   los otros tres. Sin esto el paso 2 baja unos píxeles y se nota. */
.paso--realce .paso-cuerpo {
  padding: var(--e-4);
  margin: calc(-1 * var(--e-4) - 1px);
  background: var(--tinta-alta);
  border: 1px solid var(--violeta);
  border-radius: var(--radio-tarjeta);
}

/* ------------------------------------------------------------
   Scrollytelling del proceso.

   Todo lo de acá abajo es aditivo: vive dentro de un @supports y
   de un @media, así que si el navegador no soporta animaciones
   ligadas al scroll, o si la pantalla es chica, o si el usuario
   pidió movimiento reducido, la sección queda exactamente como
   estaba —la fila de cuatro pasos con su línea— y no se pierde
   ninguna información. El panel es decorativo: el texto de los
   pasos es el que cuenta.

   Sin librerías: animation-timeline es CSS nativo (sección 2).
   ------------------------------------------------------------ */

/* Por defecto el panel no existe. */
.proceso-panel {
  display: none;
}

@supports (animation-timeline: view()) and (timeline-scope: --x) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {

    /* Dos columnas: el panel a la izquierda, los pasos a la derecha. */
    .proceso-narrativa {
      display: grid;
      grid-template-columns: 5fr 6fr;
      gap: var(--e-9);
      align-items: start;
      /* Los pasos publican su timeline para que las escenas del
         panel, que son de otra rama del árbol, puedan leerlo. */
      timeline-scope: --paso-1, --paso-2, --paso-3, --paso-4, --recorrido;
    }

    /* ---------- Panel clavado ---------- */

    .proceso-panel {
      position: sticky;
      inset-block-start: var(--alto-cabecera);
      block-size: calc(100svh - var(--alto-cabecera));
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--e-7);
    }

    .proceso-escenario {
      display: grid;
      place-items: center;
      aspect-ratio: 4 / 3;
      padding: var(--e-7);
      background: var(--tinta-alta);
      border: 1px solid var(--tinta-borde);
      border-radius: var(--radio-tarjeta);
    }

    /* Las cuatro escenas apiladas en la misma celda. */
    .escena {
      grid-area: 1 / 1;
      inline-size: 100%;
      color: var(--cian);
      opacity: 0;
      animation: escena-en-foco linear both;
      animation-range: cover 0% cover 100%;
    }

    .escena:nth-child(1) { animation-timeline: --paso-1; }
    .escena:nth-child(2) { animation-timeline: --paso-2; }
    .escena:nth-child(3) { animation-timeline: --paso-3; }
    .escena:nth-child(4) { animation-timeline: --paso-4; }

    /* Cada escena entra, se queda mientras su paso pasa por el
       centro de la ventana, y sale.

       Los números no son al voto. Un paso mide 56svh, así que su
       rango "cover" mide 100svh + 56svh y el paso siguiente va
       corrido exactamente 56/156 = 0,359 de ese rango. Esa
       proporción no depende del alto de la ventana, porque el
       paso está medido en svh.

       Por eso la bajada (66% → 78%) es la subida (28% → 40%)
       corrida 0,359: mientras una escena se apaga, la que sigue
       se enciende en el mismo tramo y las dos opacidades suman 1.
       Si le movés el alto al paso, recalculá: bajada = subida +
       alto / (100 + alto). Con otros números la caja parpadea. */
    @keyframes escena-en-foco {
      0%,   28% { opacity: 0; transform: translateY(14px) scale(0.97); }
      40%,  66% { opacity: 1; transform: none; }
      78%, 100% { opacity: 0; transform: translateY(-14px) scale(0.97); }
    }

    /* La primera se muestra desde el arranque y la última se queda
       hasta el final: sin esto la caja aparece vacía al entrar a la
       sección y vuelve a quedar vacía al salir. */
    .escena:first-child { animation-name: escena-primera; }
    .escena:last-child  { animation-name: escena-ultima; }

    @keyframes escena-primera {
      0%,   66% { opacity: 1; transform: none; }
      78%, 100% { opacity: 0; transform: translateY(-14px) scale(0.97); }
    }

    @keyframes escena-ultima {
      0%,   28% { opacity: 0; transform: translateY(14px) scale(0.97); }
      40%, 100% { opacity: 1; transform: none; }
    }

    /* ---------- Barra de avance ---------- */

    .proceso-barra {
      position: relative;
      block-size: 2px;
    }

    .proceso-barra-fondo,
    .proceso-barra-avance {
      position: absolute;
      inset-block: 0;
      inset-inline: 0;
      border-radius: var(--radio-pildora);
    }

    .proceso-barra-fondo {
      background: var(--tinta-borde);
    }

    .proceso-barra-avance {
      background: var(--cian);
      transform: scaleX(0);
      transform-origin: left;
      animation: avance linear both;
      animation-timeline: --recorrido;
      /* "contain" en un elemento más alto que la ventana es
         justo el tramo en que se lo está recorriendo. */
      animation-range: contain 0% contain 100%;
    }

    @keyframes avance {
      to { transform: scaleX(1); }
    }

    /* ---------- Los pasos ---------- */

    .proceso-pasos {
      position: relative;
      grid-template-columns: 1fr;
      gap: 0;
      /* La cola de abajo mantiene el panel clavado durante el paso 4.
         Tiene que ser mayor que (50svh - alto de paso / 2). */
      padding-block-end: 24svh;
      view-timeline-name: --recorrido;
    }

    /* La línea vertical que une los cuatro números. */
    .proceso-pasos::before {
      content: "";
      position: absolute;
      inset-block: 0 24svh;
      inset-inline-start: 15px;
      inline-size: 1px;
      background: var(--tinta-borde);
    }

    /* Cada paso ocupa casi una ventana: es el scroll que hace
       falta para que el panel tenga dónde narrar. Menos que esto
       y los pasos se pisan; más, y la sección de contacto queda
       demasiado lejos. */
    .paso {
      flex-direction: row;
      align-items: center;
      min-block-size: 56svh;
      /* Timeline propio, para atenuarse cuando no es el activo. */
      animation: paso-en-foco linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .paso:nth-child(1) { view-timeline-name: --paso-1; }
    .paso:nth-child(2) { view-timeline-name: --paso-2; }
    .paso:nth-child(3) { view-timeline-name: --paso-3; }
    .paso:nth-child(4) { view-timeline-name: --paso-4; }

    @keyframes paso-en-foco {
      0%,   30% { opacity: 0.3; transform: none; }
      42%,  66% { opacity: 1; transform: none; }
      78%, 100% { opacity: 0.3; transform: none; }
    }

    .paso:first-child { animation-name: paso-primero; }
    .paso:last-child  { animation-name: paso-ultimo; }

    @keyframes paso-primero {
      0%,   66% { opacity: 1; transform: none; }
      78%, 100% { opacity: 0.3; transform: none; }
    }

    @keyframes paso-ultimo {
      0%,   30% { opacity: 0.3; transform: none; }
      42%, 100% { opacity: 1; transform: none; }
    }

    /* La línea de conexión de la versión sin scrollytelling
       sobra acá: ya está la vertical del contenedor. */
    .paso:not(:last-child)::after {
      display: none;
    }

    .paso-titulo {
      font-family: var(--f-display);
      font-size: 1.75rem;
      font-weight: 700;
      font-variation-settings: "wdth" 90, "opsz" 32;
      letter-spacing: -0.02em;
    }

    .paso-texto {
      max-inline-size: 38ch;
      font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
    }

    .paso-numero {
      font-size: 1.125rem;
    }

    /* La sección ya trae su propio aire abajo con la cola de la lista. */
    #proceso {
      padding-block-end: clamp(40px, 6vh, 80px);
    }

    /* El realce del paso 2 sigue, pero sin fondo: acá el que
       destaca es el paso activo, y dos realces a la vez se pelean.
       Queda el borde violeta, que es lo que pide la sección 6.4. */
    .paso--realce .paso-cuerpo {
      padding: var(--e-5);
      margin: calc(-1 * var(--e-5) - 1px);
      background: transparent;
    }
  }
}

/* ============================================================
   6.6 CONTACTO
   ============================================================ */

.contacto-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-8);
}

@media (min-width: 1024px) {
  .contacto-columnas {
    /* 60% formulario / 40% refuerzos */
    grid-template-columns: 3fr 2fr;
    gap: var(--e-9);
    align-items: start;
  }
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

.formulario-ayuda {
  font-family: var(--f-mono);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.08em;
  color: var(--papel-tenue);
}

.formulario-envio {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  align-items: flex-start;
}

/* Error de red: aparece solo si falla el fetch */
.formulario-fallo {
  display: none;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--coral);
  border-radius: var(--radio-tarjeta);
  font-size: var(--t-chico);
  color: var(--papel);
}

.formulario-fallo.visible {
  display: flex;
  flex-direction: column;
}

/* Confirmación que reemplaza al formulario (sección 9) */
.formulario-listo {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-7);
  background: var(--tinta-alta);
  border: 1px solid var(--violeta);
  border-radius: var(--radio-tarjeta);
}

.formulario-listo-marca {
  inline-size: 28px;
  block-size: 28px;
  color: var(--cian);
}

.contacto-refuerzos {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

.refuerzo-titulo {
  font-family: var(--f-cuerpo);
  font-size: var(--t-tarjeta);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.refuerzo-texto {
  max-inline-size: none;
  font-size: var(--t-chico);
}

.refuerzo-dato {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  font-family: var(--f-mono);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.08em;
  color: var(--papel-tenue);
}

.refuerzo-dato strong {
  font-weight: 500;
  color: var(--papel);
}

/* Link de WhatsApp: con borde, no coral. El coral es solo de los
   tres botones de conversión (regla de la sección 4.1). */
.enlace-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-block-size: 44px;
  align-self: flex-start;
  padding: var(--e-3) var(--e-5);
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-pildora);
  color: var(--papel);
  font-size: var(--t-chico);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur-rapida) var(--ease);
}

.enlace-whatsapp:hover {
  border-color: var(--violeta);
  color: var(--papel);
}

.enlace-whatsapp svg {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  color: var(--cian);
}

/* ============================================================
   6.2 bis SIMULADOR

   Dos cosas conviven acá: los controles, que son Pixela y usan
   el sistema de diseño; y la maqueta (.mq), que NO es Pixela —
   es el sitio de otro. Por eso la maqueta no toca un solo token
   del sistema: todo lo suyo entra por las variables --mq-*, que
   escribe el JS. Si algún día la maqueta usa --coral o --violeta
   está mal: sería Pixela disfrazada de cliente.

   El coral no aparece en esta sección. El coral de la página
   significa "acá se hace clic para contratar" y aparece tres
   veces (sección 4.1). El CTA de acá abre WhatsApp, así que va
   en el verde de WhatsApp, que ya es un color prestado y
   reconocible.
   ============================================================ */

.sim {
  display: grid;
  gap: var(--e-6);
  margin-block-start: var(--e-7);
}

@media (min-width: 1024px) {
  .sim {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}

/* ---------- Controles --------------------------------------- */

.sim-controles {
  display: grid;
  gap: var(--e-5);
  align-content: start;
  min-inline-size: 0;
}

.sim-grupo {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sim-rotulo {
  margin-block-end: var(--e-3);
  padding: 0;
  color: var(--papel-tenue);
  font-family: var(--f-mono);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sim-opciones {
  display: grid;
  gap: var(--e-2);
}

.sim-opciones--dos {
  grid-template-columns: 1fr 1fr;
}

.sim-opcion {
  display: block;
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--e-3) var(--e-4);
  background: transparent;
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-tarjeta);
  color: var(--papel-tenue);
  font-family: var(--f-cuerpo);
  font-size: var(--t-chico);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease),
              background-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease);
}

.sim-opcion:hover {
  border-color: var(--violeta);
  color: var(--papel);
}

.sim-opcion[aria-pressed="true"] {
  background: var(--tinta-alta);
  border-color: var(--violeta);
  color: var(--papel);
}

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

.sim-opcion-titulo {
  display: block;
  line-height: 1.25;
}

.sim-opcion-pista {
  display: block;
  margin-block-start: 2px;
  color: var(--papel-tenue);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.sim-muestra {
  display: flex;
  flex: none;
  gap: 4px;
}

.sim-muestra i {
  inline-size: 20px;
  block-size: 20px;
  border: 1px solid var(--tinta-borde);
  border-radius: 5px;
}

/* ---------- El color propio ---------------------------------
   Un <input type="color"> nativo: no suma un byte y abre el
   selector del sistema operativo, que la gente ya sabe usar.
   ----------------------------------------------------------- */

.sim-propio {
  margin-block-start: var(--e-2);
  padding: var(--e-3);
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-tarjeta);
  transition: border-color var(--dur-rapida) var(--ease),
              background-color var(--dur-rapida) var(--ease);
}

.sim-propio.es-activa {
  background: var(--tinta-alta);
  border-color: var(--violeta);
}

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

.sim-color {
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--tinta-borde);
  border-radius: 10px;
  cursor: pointer;
}

.sim-color::-webkit-color-swatch-wrapper { padding: 3px; }
.sim-color::-webkit-color-swatch { border: 0; border-radius: 7px; }
.sim-color::-moz-color-swatch { border: 0; border-radius: 7px; }

.sim-propio-campos {
  min-inline-size: 0;
  flex: 1;
}

.sim-propio-titulo {
  display: block;
  color: var(--papel);
  font-size: var(--t-chico);
  line-height: 1.2;
}

.sim-hex {
  inline-size: 100%;
  margin-block-start: 4px;
  padding: 6px var(--e-2);
  background: var(--tinta);
  border: 1px solid var(--tinta-borde);
  border-radius: 8px;
  color: var(--papel-tenue);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.sim-hex:hover,
.sim-hex:focus {
  border-color: var(--violeta);
  color: var(--papel);
}

.sim-bases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  margin-block-start: var(--e-3);
}

.sim-base {
  min-block-size: 44px;
  padding: var(--e-2);
  background: transparent;
  border: 1px solid var(--tinta-borde);
  border-radius: 8px;
  color: var(--papel-tenue);
  font-family: var(--f-cuerpo);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease);
}

.sim-base:hover { border-color: var(--violeta); color: var(--papel); }
.sim-base[aria-pressed="true"] { border-color: var(--violeta); color: var(--papel); }

/* El contraste real del acento sobre el fondo, con la fórmula de
   la WCAG. Es el dato que nadie mira y que arruina un botón. */
.sim-contraste {
  margin-block-start: var(--e-3);
  color: var(--papel-tenue);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.sim-contraste.es-flojo {
  color: var(--ambar, #FFB86B);
}

/* ---------- La ventana --------------------------------------- */

.sim-preview {
  min-inline-size: 0;
}

.sim-ventana {
  overflow: hidden;
  background: var(--tinta-alta);
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-tarjeta);
}

.sim-navegador {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-block-end: 1px solid var(--tinta-borde);
}

.sim-puntos {
  display: flex;
  flex: none;
  gap: 6px;
}

.sim-puntos i {
  inline-size: 10px;
  block-size: 10px;
  background: var(--tinta-borde);
  border-radius: 50%;
}

.sim-url {
  flex: 1;
  min-inline-size: 0;
  padding: 6px var(--e-3);
  overflow: hidden;
  background: var(--tinta);
  border: 1px solid var(--tinta-borde);
  border-radius: 6px;
  color: var(--papel-tenue);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sim-ancho {
  flex: none;
  color: var(--papel-tenue);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
}

@media (max-width: 620px) {
  .sim-ancho { display: none; }
}

/* El marco recorta; la altura la escribe el JS, porque un
   transform no ocupa lugar en el layout. */
.sim-marco {
  position: relative;
  overflow: hidden;
  background: var(--tinta);
}

.sim-lienzo {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform-origin: top left;
}

.sim-lienzo--movil {
  overflow: hidden;
  border: 6px solid #05060B;
  border-radius: 30px;
  box-shadow: 0 18px 60px rgb(0 0 0 / 0.5);
}

.sim-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-block-start: var(--e-4);
}

.sim-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-block-size: 48px;
  padding: var(--e-3) var(--e-5);
  background: #25D366;
  border-radius: var(--radio-pildora);
  color: var(--papel);
  font-size: var(--t-cuerpo);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-rapida) var(--ease);
}

.sim-cta:hover {
  background: #1FB855;
  color: var(--papel);
}

.sim-cta svg {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
}

.sim-nota {
  color: var(--papel-tenue);
  font-size: var(--t-chico);
}

/* ---------- "Un punto de partida, no un molde" --------------- */

.sim-medida {
  margin-block-start: var(--e-7);
  padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--tinta-borde);
}

.sim-medida-grilla {
  display: grid;
  gap: var(--e-5);
  margin-block-start: var(--e-5);
}

@media (min-width: 700px) {
  .sim-medida-grilla { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .sim-medida-grilla { grid-template-columns: repeat(4, 1fr); }
}

.sim-medida-item {
  padding-block-start: var(--e-3);
  border-block-start: 2px solid var(--violeta);
}

.sim-medida-item:nth-child(2) { border-block-start-color: var(--cian); }
.sim-medida-item:nth-child(3) { border-block-start-color: var(--coral); }

.sim-medida-titulo {
  color: var(--papel);
  font-size: var(--t-cuerpo);
  font-weight: 600;
  line-height: 1.3;
}

.sim-medida-item p {
  margin-block-start: var(--e-2);
  color: var(--papel-tenue);
  font-size: var(--t-chico);
}

/* ============================================================
   LA MAQUETA (.mq) — el sitio del cliente, no el nuestro.
   Todo entra por --mq-*. Nada de acá usa el sistema de Pixela.
   ============================================================ */

.mq {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  background: var(--mq-fondo);
  color: var(--mq-texto);
  font-family: var(--mq-cuerpo);
  line-height: 1.5;
}

.mq p { margin: 0; }

/* ---------- La foto que no existe ---------------------------
   Sin fotos del cliente, un placeholder tiene que parecer una
   foto y no un gráfico: manchas difusas, ningún borde duro y
   una viñeta que hunde los costados. Cada modificador mueve las
   manchas para que dos seguidas no se vean iguales.
   ----------------------------------------------------------- */

.mq-foto {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  background-image:
    radial-gradient(58% 62% at var(--fa), var(--mq-foto-a), transparent 68%),
    radial-gradient(66% 70% at var(--fb), var(--mq-foto-b), transparent 70%),
    radial-gradient(46% 52% at var(--fc), var(--mq-foto-c), transparent 66%),
    linear-gradient(158deg, var(--mq-superficie), var(--mq-fondo));
}

.mq-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 118% at 50% 38%, transparent 42%, rgb(0 0 0 / 0.34));
}

.mq-foto--velo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(6 7 12 / var(--mq-velo));
}

.mq-foto--a { --fa: 22% 28%; --fb: 78% 72%; --fc: 62% 12%; }
.mq-foto--b { --fa: 70% 30%; --fb: 25% 75%; --fc: 45% 18%; }
.mq-foto--c { --fa: 35% 70%; --fb: 80% 28%; --fc: 15% 25%; }
.mq-foto--d { --fa: 60% 62%; --fb: 18% 32%; --fc: 85% 15%; }

.mq-foto--fondo {
  position: absolute;
  inset: 0;
}

/* ---------- Piezas compartidas ------------------------------- */

.mq-cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.mq-nav {
  display: flex;
  gap: 24px;
  color: var(--mq-tenue);
  font-size: 14px;
}

.mq-logo {
  margin-inline-end: auto;
  font-family: var(--mq-display);
  font-weight: var(--mq-peso);
  font-size: 24px;
  letter-spacing: var(--mq-tracking);
  color: var(--mq-acento);
}

.mq-logo--cursiva { font-style: italic; }

.mq-burger {
  display: none;
  flex: none;
  gap: 4px;
  flex-direction: column;
}

.mq-burger i {
  inline-size: 20px;
  block-size: 2px;
  background: currentColor;
}

.mq-pill {
  flex: none;
  padding: 10px 20px;
  background: var(--mq-acento);
  border-radius: 999px;
  color: var(--mq-sobre-acento);
  font-size: 13px;
  font-weight: 700;
}

.mq-pill--recta { border-radius: 4px; letter-spacing: 0.08em; }

.mq-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--mq-acento);
  border-radius: 999px;
  color: var(--mq-sobre-acento);
  font-family: var(--mq-display);
  font-weight: var(--mq-peso);
  font-size: 16px;
}

.mq-cta--recta { border-radius: 6px; font-family: var(--mq-cuerpo); font-weight: 600; }

.mq-icono-fecha {
  inline-size: 14px;
  block-size: 14px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

/* ---------- 1 · Tienda --------------------------------------- */

.mq-cinta {
  display: flex;
  align-items: center;
  gap: 46px;
  flex: none;
  padding: 9px 24px;
  overflow: hidden;
  background: var(--mq-panel);
  color: var(--mq-panel-texto);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.mq--tienda .mq-cabecera {
  padding: 18px 32px;
  background: var(--mq-superficie);
}

.mq-buscador {
  flex: 0 0 250px;
  padding: 9px 14px;
  border: 1px solid var(--mq-borde);
  border-radius: 6px;
  color: var(--mq-tenue);
  font-size: 13px;
}

.mq-marca {
  flex: 1;
  text-align: center;
}

.mq-marca-nombre {
  display: block;
  font-family: var(--mq-display);
  font-weight: var(--mq-peso);
  font-size: 26px;
  letter-spacing: var(--mq-tracking);
  line-height: 1;
}

.mq-marca-volanta {
  display: block;
  margin-block-start: 3px;
  color: var(--mq-tenue);
  font-family: var(--mq-volanta);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.mq-acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex: 0 0 250px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.mq-carrito {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.mq-bolsa {
  inline-size: 15px;
  block-size: 13px;
  border: 1.5px solid currentColor;
  border-radius: 2px 2px 4px 4px;
}

.mq-nav--tienda {
  padding: 0 32px 14px;
  background: var(--mq-superficie);
  border-block-end: 1px solid var(--mq-borde);
  color: var(--mq-texto);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

.mq-grilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  flex: 1;
  min-block-size: 0;
  padding: 18px 24px 22px;
}

.mq-producto {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}

.mq-producto .mq-foto {
  flex: 1;
  min-block-size: 0;
  border-radius: 4px;
}

.mq-prod-nombre {
  margin-block-start: 10px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.mq-prod-precio {
  margin-block-start: 5px;
  font-size: 16px;
  font-weight: 600;
}

.mq-prod-cuotas {
  margin-block-start: 3px;
  color: var(--mq-tenue);
  font-size: 11.5px;
}

.mq-prod-cuotas b { color: var(--mq-acento); font-weight: 600; }

/* ---------- 2 · Gimnasio ------------------------------------- */

.mq--gimnasio .mq-cabecera {
  padding: 14px 30px;
  background: var(--mq-superficie);
}

.mq--gimnasio .mq-logo { font-size: 26px; letter-spacing: 0.02em; }
.mq--gimnasio .mq-nav { color: var(--mq-texto); }

.mq-hero {
  position: relative;
  flex: 1;
  min-block-size: 0;
  overflow: hidden;
  background: var(--mq-panel);
}

.mq-hero-cuerpo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 36px 40px;
}

.mq--gimnasio .mq-titular {
  max-inline-size: 78%;
  color: var(--mq-panel-texto);
  font-family: var(--mq-display);
  font-weight: 800;
  font-size: 58px;
  line-height: 1;
  letter-spacing: var(--mq-tracking);
  text-transform: uppercase;
}

.mq--gimnasio .mq-titular span { color: var(--mq-acento); }

.mq-burbujas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: 26px;
}

.mq-burbujas span {
  padding: 10px 18px;
  background: var(--mq-panel-texto);
  border-radius: 999px;
  color: #14100E;
  font-size: 14px;
  font-weight: 600;
}

.mq-burbujas span:nth-child(2) { margin-block-start: 16px; }

.mq-plan {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-start: auto;
}

.mq-plan-nombre,
.mq-plan-precio {
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--mq-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: var(--mq-tracking);
}

.mq-plan-nombre { background: #0C0C0E; color: var(--mq-acento); }
.mq-plan-precio { background: var(--mq-acento); color: var(--mq-sobre-acento); }

.mq-franja {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 16px 30px;
  background: var(--mq-acento);
}

.mq-chips {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  flex: 1;
}

.mq-chips span {
  padding: 12px 10px;
  background: rgb(12 12 14 / 0.82);
  border-radius: 8px;
  color: var(--mq-panel-texto);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.mq-cta-fuerte {
  flex: none;
  padding: 16px 30px;
  background: #D62828;
  border-radius: 8px;
  color: #FFF6F2;
  font-family: var(--mq-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: var(--mq-tracking);
}

/* ---------- 3 · Restaurante ---------------------------------- */

.mq--resto .mq-cabecera {
  padding: 14px 34px;
  background: var(--mq-panel);
  color: var(--mq-panel-texto);
}

.mq--resto .mq-nav { color: inherit; font-family: var(--mq-display); font-size: 15px; }

.mq-nav--separada span + span {
  padding-inline-start: 20px;
  border-inline-start: 1px solid rgb(255 255 255 / 0.25);
}

.mq-banda {
  position: relative;
  flex: none;
  block-size: 230px;
  overflow: hidden;
}

.mq-frase {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  color: var(--mq-sobre-foto);
  font-family: var(--mq-display);
  font-weight: var(--mq-peso);
  font-size: 30px;
  letter-spacing: var(--mq-tracking);
  text-align: center;
}

.mq-dos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
  flex: 1;
  min-block-size: 0;
  padding: 38px 46px;
}

.mq-titulo {
  color: var(--mq-acento);
  font-family: var(--mq-display);
  font-weight: var(--mq-peso);
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: var(--mq-tracking);
}

.mq-parrafo {
  margin-block-start: 16px !important;
  color: var(--mq-tenue);
  font-size: 16px;
  line-height: 1.65;
}

.mq-dos-texto .mq-cta { margin-block-start: 28px; }

.mq-figura .mq-foto { block-size: 240px; border-radius: 2px; }

.mq-puntos {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-block-start: 14px;
}

.mq-puntos i {
  inline-size: 7px;
  block-size: 7px;
  background: var(--mq-borde);
  border-radius: 50%;
}

.mq-puntos i.es { background: var(--mq-acento); }

.mq-pie {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding: 14px 46px;
  border-block-start: 1px solid var(--mq-borde);
  color: var(--mq-tenue);
  font-size: 13px;
}

/* ---------- 4 · Estudio -------------------------------------- */

.mq--estudio {
  position: relative;
  display: block;
  background: var(--mq-panel);
}

.mq--estudio .mq-cabecera {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 2;
  padding: 18px 34px;
  color: var(--mq-panel-texto);
}

.mq--estudio .mq-logo {
  color: inherit;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mq--estudio .mq-nav {
  color: inherit;
  font-size: 12.5px;
  letter-spacing: 0.08em;
}

.mq-centro {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 60px;
  color: var(--mq-panel-texto);
}

.mq--estudio .mq-titular {
  font-family: var(--mq-display);
  font-weight: var(--mq-peso);
  font-size: 58px;
  line-height: 1.05;
  letter-spacing: var(--mq-tracking);
}

.mq-subtitulo {
  margin-block-start: 6px !important;
  font-family: var(--mq-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: var(--mq-tracking);
}

.mq-bajada {
  margin-block-start: 18px !important;
  color: var(--mq-panel-tenue);
  font-size: 17px;
}

.mq-centro .mq-cta {
  align-self: flex-start;
  margin-block-start: 28px;
}

/* ============================================================
   La maqueta en 390 px. No es la misma maqueta achicada: cambian
   las columnas, aparece el menú hamburguesa y se esconde lo que
   en un teléfono no entra. Es lo mismo que hace un sitio de
   verdad, y de paso lo demuestra.
   ============================================================ */

.sim-lienzo--movil .mq-burger { display: flex; }
.sim-lienzo--movil .mq-nav,
.sim-lienzo--movil .mq-buscador,
.sim-lienzo--movil .mq-sesion,
.sim-lienzo--movil .mq-carrito span { display: none; }

.sim-lienzo--movil .mq-cinta { gap: 24px; padding: 7px 14px; font-size: 9px; }

.sim-lienzo--movil .mq--tienda .mq-cabecera { padding: 14px 16px; }
.sim-lienzo--movil .mq-burger { margin-inline-end: auto; }
.sim-lienzo--movil .mq-marca-nombre { font-size: 20px; }
.sim-lienzo--movil .mq-marca-volanta { font-size: 8px; }
.sim-lienzo--movil .mq-acciones { flex: 0 0 auto; }
.sim-lienzo--movil .mq-grilla {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px 16px;
}
.sim-lienzo--movil .mq-producto:nth-child(n + 3) { display: none; }
.sim-lienzo--movil .mq-prod-nombre { font-size: 12px; }
.sim-lienzo--movil .mq-prod-precio { font-size: 14px; }
.sim-lienzo--movil .mq-prod-cuotas { font-size: 10px; }

.sim-lienzo--movil .mq--gimnasio .mq-cabecera { padding: 12px 16px; }
.sim-lienzo--movil .mq--gimnasio .mq-logo { font-size: 20px; }
.sim-lienzo--movil .mq-pill { padding: 8px 14px; font-size: 12px; }
.sim-lienzo--movil .mq-hero-cuerpo { padding: 20px 18px; }
.sim-lienzo--movil .mq--gimnasio .mq-titular { max-inline-size: 100%; font-size: 30px; }
.sim-lienzo--movil .mq-burbujas { gap: 8px; margin-block-start: 14px; }
.sim-lienzo--movil .mq-burbujas span { padding: 7px 12px; font-size: 11px; margin-block-start: 0; }
.sim-lienzo--movil .mq-plan-nombre,
.sim-lienzo--movil .mq-plan-precio { padding: 9px 16px; font-size: 16px; }
.sim-lienzo--movil .mq-franja { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
.sim-lienzo--movil .mq-chips { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sim-lienzo--movil .mq-chips span { padding: 8px; font-size: 9px; }
.sim-lienzo--movil .mq-chips span:nth-child(n + 4) { display: none; }
.sim-lienzo--movil .mq-cta-fuerte { padding: 11px; font-size: 17px; text-align: center; }

.sim-lienzo--movil .mq--resto .mq-cabecera { padding: 12px 16px; }
.sim-lienzo--movil .mq-banda { block-size: 150px; }
.sim-lienzo--movil .mq-frase { font-size: 19px; }
.sim-lienzo--movil .mq-dos { display: block; padding: 20px 18px; }
.sim-lienzo--movil .mq-titulo { font-size: 24px; }
.sim-lienzo--movil .mq-parrafo { font-size: 14px; }
.sim-lienzo--movil .mq-figura { display: none; }
.sim-lienzo--movil .mq-cta { padding: 11px 20px; font-size: 14px; }
.sim-lienzo--movil .mq-pie { padding: 10px 18px; font-size: 11px; }

.sim-lienzo--movil .mq--estudio .mq-cabecera { padding: 14px 16px; }
.sim-lienzo--movil .mq--estudio .mq-logo { font-size: 16px; }
.sim-lienzo--movil .mq-centro { padding: 0 18px; }
.sim-lienzo--movil .mq--estudio .mq-titular { font-size: 32px; }
.sim-lienzo--movil .mq-subtitulo { font-size: 22px; }
.sim-lienzo--movil .mq-bajada { font-size: 14px; }

/* Sin JS no hay maqueta: la sección se explica igual, pero el
   marco vacío no tiene por qué ocupar media pantalla. */
html:not(.js) .sim {
  display: none;
}

/* ============================================================
   CHAT WIDGET DE WHATSAPP

   El verde es el de la marca WhatsApp, no un color del sistema:
   por eso vive acá y no en tokens.css, que es la definición de la
   paleta. Un logo ajeno es identidad reconocible, no decoración —
   es la única razón que justifica salir de la paleta.

   La tarjeta va clara —es la convención del widget de WhatsApp y
   lo que la gente reconoce— pero en --papel, no en blanco puro:
   la sección 4.1 dice que blanco puro no se usa nunca. Los textos
   sobre verde también van en --papel, por lo mismo.
   ============================================================ */

.wa {
  --wa-verde: #25D366;
  --wa-verde-alto: #1FB855;
  --wa-verde-hondo: #128C7E;

  /* La tarjeta clara vive solo dentro del widget */
  --wa-carta: var(--papel);
  --wa-carta-borde: #CDD0E2;
  --wa-campo: #F2F3FA;
  --wa-burbuja: #DFE1EF;
  --wa-tenue: #5B5F7A;

  position: fixed;
  inset-block-end: var(--e-5);
  inset-inline-end: var(--e-5);
  /* Debajo del header (100) y del panel movil (150). */
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--e-4);
  pointer-events: none;
}

.wa > *,
.wa-fila > * {
  pointer-events: auto;
}

/* El disparador queda pegado al borde derecho y el globo a su
   izquierda: por eso la fila va al revés. */
.wa-fila {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--e-3);
}

/* ---------- El disparador -----------------------------------
   El anillo claro es lo que despega el círculo verde del fondo
   oscuro, igual que el widget de WhatsApp sobre fondo blanco.
   ----------------------------------------------------------- */

.wa-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 56px;
  block-size: 56px;
  background: var(--wa-verde);
  border: none;
  border-radius: 50%;
  color: var(--papel);
  text-decoration: none;
  box-shadow: 0 0 0 3px var(--wa-carta),
              0 10px 28px rgb(0 0 0 / 0.45);
  transition: background-color var(--dur-rapida) var(--ease),
              transform var(--dur-rapida) var(--ease);
}

.wa-boton:hover {
  background: var(--wa-verde-alto);
  color: var(--papel);
  transform: translateY(-2px);
}

.wa-boton svg {
  inline-size: 32px;
  block-size: 32px;
}

/* ---------- El globo que saluda ------------------------------
   Arranca oculto y lo muestra el JS. Sin JS no aparece nunca,
   que es lo correcto: el botón se explica solo.
   ----------------------------------------------------------- */

.wa-globo {
  position: relative;
  max-inline-size: 22ch;
  margin: 0;
  padding: var(--e-3) var(--e-4);
  background: var(--wa-carta);
  border: 1px solid var(--wa-carta-borde);
  border-radius: var(--radio-tarjeta);
  color: var(--tinta);
  font-size: var(--t-chico);
  line-height: 1.4;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px) scale(0.96);
  transform-origin: right center;
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility var(--dur-base) var(--ease);
}

.wa-globo.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* La puntita mira al botón, o sea a la derecha */
.wa-globo::after {
  content: "";
  position: absolute;
  inset-block-end: 20px;
  inset-inline-end: -5px;
  inline-size: 8px;
  block-size: 8px;
  background: var(--wa-carta);
  border-inline-end: 1px solid var(--wa-carta-borde);
  border-block-start: 1px solid var(--wa-carta-borde);
  transform: rotate(45deg);
}

/* ---------- La tarjeta de chat ------------------------------ */

.wa-panel {
  inline-size: min(340px, calc(100vw - var(--e-5) * 2));
  overflow: hidden;
  background: var(--wa-carta);
  border: 1px solid var(--wa-carta-borde);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
  transform-origin: bottom right;
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

/* Sin JS el panel no se abre nunca: el atributo tiene que pesar. */
.wa-panel[hidden] {
  display: none;
}

.wa-panel.entrando {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
}

.wa-cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-3);
  color: var(--tinta);
}

.wa-avatar {
  display: inline-flex;
  flex: none;
  inline-size: 34px;
  block-size: 34px;
  padding: 5px;
  background: var(--tinta);
  border-radius: 50%;
}

.wa-quien {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-inline-end: auto;
  min-inline-size: 0;
}

.wa-quien strong {
  color: var(--tinta);
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
}

.wa-quien small {
  color: var(--wa-tenue);
  font-size: var(--t-chico);
  line-height: 1.3;
}

.wa-cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  color: var(--wa-tenue);
  transition: color var(--dur-rapida) var(--ease),
              background-color var(--dur-rapida) var(--ease);
}

.wa-cerrar:hover {
  background: var(--wa-burbuja);
  color: var(--tinta);
}

.wa-cerrar svg {
  inline-size: 16px;
  block-size: 16px;
}

.wa-cuerpo {
  padding: 0 var(--e-4) var(--e-3);
}

/* La burbuja del mensaje entrante, con su puntita a la izquierda */
.wa-mensaje {
  position: relative;
  max-inline-size: none;
  margin: 0;
  padding: var(--e-3) var(--e-4);
  background: var(--wa-burbuja);
  border: 1px solid var(--wa-carta-borde);
  border-radius: var(--radio-tarjeta);
  border-start-start-radius: 2px;
  color: var(--tinta);
  font-size: var(--t-chico);
  line-height: 1.5;
}

/* El campo y el botón van uno arriba del otro: el CTA verde es lo
   que la gente busca, no puede quedar reducido a un iconito. */
.wa-form {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: 0 var(--e-4) var(--e-4);
}

.wa-texto {
  inline-size: 100%;
  min-inline-size: 0;
  padding: var(--e-3) var(--e-4);
  background: var(--wa-campo);
  border: 1px solid var(--wa-carta-borde);
  border-radius: 10px;
  color: var(--tinta);
  font-family: var(--f-cuerpo);
  font-size: var(--t-chico);
  line-height: 1.5;
  resize: none;
  transition: border-color var(--dur-rapida) var(--ease);
}

.wa-texto::placeholder {
  color: var(--wa-tenue);
  opacity: 0.9;
}

.wa-texto:hover,
.wa-texto:focus {
  border-color: var(--wa-verde-hondo);
}

.wa-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  inline-size: 100%;
  min-block-size: 48px;
  padding: var(--e-3) var(--e-4);
  background: var(--wa-verde);
  border-radius: 10px;
  color: var(--papel);
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);
  font-weight: 600;
  line-height: 1;
  transition: background-color var(--dur-rapida) var(--ease);
}

.wa-enviar:hover {
  background: var(--wa-verde-alto);
  color: var(--papel);
}

.wa-enviar svg {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
}

/* Con el panel abierto el globo sobra */
.wa.abierto .wa-globo {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .wa-globo,
  .wa-panel {
    transition: none;
    transform: none;
  }

  .wa-globo.visible,
  .wa-panel.entrando {
    transform: none;
  }

  .wa-boton:hover {
    transform: none;
  }
}

/* ============================================================
   6.7 FOOTER
   ============================================================ */

.pie {
  padding-block: var(--e-8) var(--e-6);
  border-block-start: 1px solid var(--tinta-borde);
}

.pie-bloques {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-7);
  padding-block-end: var(--e-7);
}

@media (min-width: 768px) {
  .pie-bloques {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--gutter);
  }
}

.pie-descripcion {
  max-inline-size: 34ch;
  margin-block-start: var(--e-4);
  font-size: var(--t-chico);
}

.pie-titulo {
  margin-block-end: var(--e-4);
  font-family: var(--f-mono);
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--papel-tenue);
}

.pie-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.pie-lista a {
  color: var(--papel);
  font-size: var(--t-chico);
  text-decoration: none;
}

.pie-lista a:hover {
  color: var(--violeta-alto);
}

.pie-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block-start: var(--e-6);
  border-block-start: 1px solid var(--tinta-borde);
  font-family: var(--f-mono);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.08em;
  color: var(--papel-tenue);
}

.pie-legal a {
  color: var(--papel-tenue);
  text-decoration: none;
}

.pie-legal a:hover {
  color: var(--papel);
}

/* ============================================================
   PÁGINAS SUELTAS — gracias.html, 404.html, privacidad.html
   ============================================================ */

.pagina-corta {
  display: flex;
  align-items: center;
  min-block-size: calc(100svh - var(--alto-cabecera));
  padding-block: var(--e-9);
}

.pagina-corta-interior {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  align-items: flex-start;
  max-inline-size: 60ch;
}

/* Documento legal: el único lugar de la página con texto largo */
.documento {
  padding-block: var(--e-9);
  max-inline-size: 68ch;
}

.documento h2 {
  margin-block: var(--e-7) var(--e-4);
  font-family: var(--f-cuerpo);
  font-size: var(--t-tarjeta);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.documento p {
  margin-block-end: var(--e-4);
}

.documento ul {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-block-end: var(--e-4);
}

.documento li {
  display: flex;
  gap: var(--e-3);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  color: var(--papel-tenue);
}

.documento li::before {
  content: "";
  flex: none;
  inline-size: 10px;
  block-size: 1px;
  margin-block-start: 0.85em;
  background: var(--cian);
}