/* Inter, alojada por nosotros. Antes venía de Google Fonts, lo que costaba dos
   cosas: una petición a un tercero que recibía la IP de cada visitante, y una
   hoja de estilo bloqueante que hundió el rendimiento de /privacidad a 0.84.
   Un solo archivo variable cubre los cuatro pesos. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/fonts/instrument-sans-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}

/* Paleta. Rediseño del 2026-09-10 a convención SaaS: fondo blanco, bandas
   alternas en gris muy claro y un acento más saturado.
   Todos los contrastes están MEDIDOS, no elegidos a ojo, porque axe y
   Lighthouse ≥ 90 son candados duros:
     tinta  #111827 sobre blanco → 17.74:1
     muted  #5B5B5B sobre blanco → 6.79:1 · sobre la banda → 6.49:1
     acento #0E5AA0 con blanco encima → 7.03:1 · sobre la banda → 6.72:1
   Sigue habiendo UN solo color de acción y sigue siendo sólido: el degradado
   azul→morado está en los anti-patrones del plan y es lo que vuelve
   intercambiables a mil landings. */
  :root{
    --papel:#FFFFFF; --fondo-alt:#F8FAFC; --tinta:#111827;
    --acento:#0E5AA0; --acento-hover:#0B4880;
    --muted:#5B5B5B; --linea:#E5E7EB; --blanco:#FFFFFF;
    --sombra:0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.06);
    --sombra-alta:0 2px 4px rgba(16,24,40,.05), 0 12px 28px rgba(16,24,40,.09);
    --paso:clamp(1rem,2.5vw,1.5rem);
  }
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--papel); color:var(--tinta);
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  /* Las bandas alternas se salen del contenedor con margen negativo. `clip`
     y no `hidden`: `hidden` en el elemento raíz crea un contenedor de scroll
     y rompe el desplazamiento suave a un ancla. */
  html{overflow-x:clip}
  .env{max-width:60rem;margin:0 auto;padding:0 var(--paso)}
  a{color:var(--acento)}
  a:focus-visible,.btn:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:2px}

  header{padding:2rem 0 0}
  .marca{display:flex;align-items:baseline;gap:.5rem;font-weight:700;letter-spacing:-.01em}
  .marca b{font-size:1.125rem}
  .marca span{font-size:.8125rem;color:var(--muted);font-weight:500}

  main{padding:clamp(3rem,9vw,6rem) 0 0}
  /* Medido el 2026-09-18: nuestro h1 estaba en 64 px y el de Stripe en 48.
     Un titular más chico y mejor modulado se lee más caro que uno grande; el
     de 64 gritaba y en el hero a dos columnas partía en cinco líneas.
     El tope baja de 4rem a 3.125rem (50 px). El piso de móvil no se toca. */
  /* Inter es la tipografía que delata un diseño hecho con IA: está en la guía
     de diseño como uno de los defaults a evitar. Se queda en el CUERPO, donde
     su legibilidad ya está probada en 19 páginas, y los titulares pasan a
     Instrument Sans —más estrecha y con más carácter—. Emparejar dos caras es
     más seguro que reemplazar una. 29.904 B, alojada por nosotros como Inter:
     ni una petición a un tercero. */
  h1,h2,h3,.antetitulo{font-family:'Instrument Sans',Inter,system-ui,sans-serif}

  h1{
    font-size:clamp(2.125rem,4.6vw,3.125rem); line-height:1.08; letter-spacing:-.03em;
    font-weight:700; margin:0 0 1.25rem; max-width:18ch;
  }
  .sub{font-size:clamp(1.0625rem,2.1vw,1.3125rem);color:var(--muted);max-width:34em;margin:0 0 2rem}

  .acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:48px;padding:.75rem 1.35rem;border-radius:8px;
    font-weight:600;font-size:1rem;text-decoration:none;border:1px solid transparent;
    transition:background-color .15s ease,border-color .15s ease;
  }
  .btn-1{background:var(--acento);color:var(--blanco)}
  .btn-1:hover{background:var(--acento-hover)}
  .btn-2{background:transparent;color:var(--tinta);border-color:var(--tinta)}
  .btn-2:hover{background:var(--blanco)}
  .nota{font-size:.9375rem;color:var(--muted);margin:0}

  /* ── Los tres tipos de taller, en UN renglón ───────────────────────────────
     `/para` promete «elija el suyo y vea qué cambia» y vivía solo en el menú:
     el home le pedía a los tres tipos que leyeran lo mismo.
     Va como renglón y no como banda de tres tarjetas por dos razones medidas:
     el home YA tiene dos rejillas de tres y una revisión anterior rechazó la
     tercera por repetición (ver «El problema», abajo); y la versión en
     renglones costaba 155 px que empujaban los enlaces ~900 px abajo del
     pliegue en un teléfono — justo donde más falta hacen.
     La segunda oración no es relleno: es la salida para el taller que no se
     reconoce en ninguna de las tres etiquetas y, sin ella, concluye que el
     producto no es para él. */
  .tipos{font-size:1rem;line-height:1.7;color:var(--muted);margin:1.25rem 0 0;max-width:54ch}
  .tipos a{font-weight:600}
  .tipos span{display:block}

  /* El canal instantáneo. Va como renglón de texto y no como tercer botón: en
     /contacto compite con el formulario que está justo debajo, y tres botones
     iguales obligan a elegir sin decir en qué se diferencian. Acá la frase
     dice para quién es —«¿prefiere no llenar nada?»— y el enlace es la salida.
     En los cierres de las demás páginas sí va como botón: ahí no hay
     formulario con el que competir. */
  .atajo{font-size:1rem;color:var(--muted);margin:0 0 2rem}
  .atajo a{color:var(--tinta);font-weight:600}
  /* Pegado a un formulario, el atajo se leía como parte de la letra chica de
     privacidad que va justo encima. */
  form + .atajo{margin-top:1.25rem}
  /* La vuelta al índice NO es una acción: es navegación. Con el peso del
     atajo competía con los dos botones que tiene encima. */
  .atajo--volver{margin-top:.9rem}
  .atajo--volver a{font-weight:400;color:var(--muted)}
  .atajo--volver a:hover{color:var(--tinta)}

  .puntos{
    display:grid;gap:1.5rem;margin:clamp(3rem,8vw,5rem) 0 0;
    grid-template-columns:1fr;border-top:1px solid var(--linea);padding-top:2rem;
  }
  @media(min-width:44rem){.puntos{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
  .punto h2{font-size:1.0625rem;font-weight:600;margin:0 0 .5rem;letter-spacing:-.01em}
  .punto p{margin:0;color:var(--muted);font-size:.9688rem}

  footer{
    margin-top:clamp(3.5rem,9vw,6rem);border-top:1px solid var(--linea);
    padding:1.5rem 0 3rem;color:var(--muted);font-size:.9375rem;
  }
  footer p{margin:0}

/* ── Barra de navegación ───────────────────────────────────────────── */
.barra{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.marca{display:flex;align-items:baseline;gap:.5rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;color:var(--tinta)}
.barra nav a{font-weight:600;font-size:.9375rem;text-decoration:none}
.barra nav a:hover{text-decoration:underline}

/* ── Precios ───────────────────────────────────────────────────────── */
.planes{display:grid;gap:1.25rem;grid-template-columns:1fr;margin:2.5rem 0 0;align-items:start}
@media(min-width:56rem){.planes{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.plan{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:1.5rem}
/* Apiladas —por debajo de 56rem— las tarjetas ocupaban todo el ancho y a 768 px
   los renglones llegaban a 85 caracteres. Se acotan y se centran: una tarjeta
   de plan no gana nada por ser más ancha que su texto. */
@media(max-width:55.99rem){.plan{max-width:34rem;margin-inline:auto}}
.plan.destacado{border-color:var(--acento);border-width:2px}
.plan .etiqueta{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--acento);margin:0 0 .5rem}
.plan h2{font-size:1.25rem;margin:0 0 .25rem;letter-spacing:-.015em}
.plan .precio{font-size:2rem;font-weight:700;letter-spacing:-.03em;margin:.5rem 0 0;line-height:1.1}
.plan .unidad{font-size:.9375rem;color:var(--muted);margin:.15rem 0 1rem}
.plan .encabeza{font-size:.9375rem;color:var(--muted);margin:0 0 .5rem}
.plan ul{list-style:none;padding:0;margin:0;font-size:1rem}
.plan li{padding-left:1.4rem;position:relative;margin-bottom:.45rem;line-height:1.5}
.plan li::before{content:"";position:absolute;left:.25rem;top:.55rem;width:.4rem;height:.4rem;
  border-radius:50%;background:var(--acento)}
.letra-chica{margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--linea);
  display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:44rem){.letra-chica{grid-template-columns:repeat(2,1fr);gap:1.25rem 2.5rem}}
.letra-chica h3{font-size:1rem;font-weight:600;margin:0 0 .35rem}
.letra-chica p{margin:0;color:var(--muted);font-size:1rem}

/* ── Secciones del home ────────────────────────────────────────────────── */
/* La separación entre secciones ya no la hace una línea: la hacen el aire y el
   cambio de fondo de las bandas. Una regla sobre blanco, con secciones
   centradas, se lee como recorte. */
.seccion{margin-top:clamp(3.5rem,9vw,6rem);padding-top:clamp(2rem,5vw,4.5rem)}
/* El `>` es deliberado —no queremos alcanzar los h2 de dentro de una tarjeta—
   pero por eso mismo el título de «Cobre la inspección» perdió su tamaño al
   anidarlo en `.par--texto` para las dos columnas: se quedó en 26 px mientras
   las otras siete secciones iban a 38. En escritorio se leía como subsección
   la que lleva el argumento de cobrar la inspección.
   Cuarta vez en el día que una regla con `>` deja de aplicar al meter un
   contenedor; las otras tres fueron `.prueba`, los botones de `/recursos` y el
   titular del héroe. Si volvés a anidar un h2 de sección, sumalo acá. */
.seccion > h2,
.seccion .par--texto > div > h2{font-size:clamp(1.625rem,3.6vw,2.375rem);line-height:1.15;letter-spacing:-.028em;
  margin:0 auto .75rem;max-width:24ch;text-align:center}
.seccion > .entrada{color:var(--muted);max-width:58ch;margin:0 auto 2.25rem;text-align:center}
.seccion > .remate{margin-left:auto;margin-right:auto;text-align:center;max-width:44ch}

/* Recorrido de una orden */
.recorrido{list-style:none;padding:0;margin:0;display:grid;gap:0}
.paso{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid var(--linea)}
.paso:first-child{border-top:0}
.paso .hora{font-variant-numeric:tabular-nums;font-weight:700;color:var(--acento);font-size:.9375rem;padding-top:.15rem}
.paso h3{font-size:1.1875rem;font-weight:600;margin:0 0 .3rem;letter-spacing:-.012em}
.paso p{margin:0;color:var(--muted);font-size:1rem}

/* ── El detalle de cada paso, plegado ──────────────────────────────────────
   Un dueño de taller leyó esta sección y no la entendió. Medido contra los
   tres competidores: los tres cuentan el día —Garage360 con horas iguales a
   las nuestras— y los tres con mucho menos texto por paso. El nuestro iba de
   16 a 55 palabras, y el de Diagnóstico tenía TRES argumentos adentro más una
   comparación contra competidores que el lector no tiene contexto para
   entender.
   La hora se queda SIEMPRE visible a propósito: colapsar todo convertiría la
   sección en la lista de funciones que su propia entrada dice no ser. Lo que
   se pliega es el argumento, no el día.
   `<details>` nativo, como el FAQ y el menú: cero bytes de JavaScript. */
.paso-det summary{
  cursor:pointer; list-style:none; display:flex; flex-wrap:wrap;
  align-items:baseline; gap:.1rem .6rem; min-height:44px; padding:.1rem 0;
}
.paso-det summary::-webkit-details-marker{display:none}
.paso-det summary h3{margin:0}
.paso-det summary span{color:var(--muted);font-size:1rem;flex:1 1 20ch}
.paso-det summary::after{content:"+";color:var(--acento);font-weight:700;flex:none;align-self:center}
.paso-det[open] summary::after{content:"−"}
.paso-det summary:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:4px}
.paso-det > p{margin:.5rem 0 .2rem;color:var(--muted);font-size:1rem;max-width:58ch}

/* Rejilla de tres */
.tres{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:44rem){.tres{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.tres > div{
  background:var(--blanco); border:1px solid var(--linea); border-radius:12px;
  padding:1.5rem 1.4rem; box-shadow:var(--sombra);
}
.tres h3{font-size:1.125rem;font-weight:600;margin:0 0 .45rem;letter-spacing:-.012em}
.tres p{margin:0;color:var(--muted);font-size:1rem}

/* Resumen de precios */
.precio-mini{display:grid;gap:1rem;grid-template-columns:1fr;margin-bottom:1.5rem}
@media(min-width:44rem){.precio-mini{grid-template-columns:repeat(3,1fr)}}
.precio-mini div{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:1.15rem 1.25rem;box-shadow:var(--sombra);text-align:center}
.precio-mini strong{display:block;font-size:.9375rem;font-weight:600}
.precio-mini b{display:block;font-size:1.5rem;letter-spacing:-.02em;margin:.2rem 0 .1rem}
.precio-mini span{font-size:.8125rem;color:var(--muted)}

/* FAQ — <details> nativo, sin JavaScript */
.faq details{border-top:1px solid var(--linea)}
.faq details:last-of-type{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;padding:.9rem 0;font-weight:600;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acento);font-weight:700;flex:none}
.faq details[open] summary::after{content:"−"}
.faq summary:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.faq details p{margin:0 0 1rem;color:var(--muted);font-size:1rem;max-width:56ch}

/* Cierre */
.cierre{margin-top:clamp(3.5rem,9vw,6rem);padding:clamp(2rem,5vw,3rem);border-radius:14px;
  background:var(--tinta);color:var(--papel)}
.cierre h2{font-size:clamp(1.5rem,3.2vw,2rem);letter-spacing:-.025em;margin:0 0 .6rem;max-width:20ch}
.cierre p{color:#C9CDD4;margin:0 0 1.5rem;max-width:52ch}
.cierre .btn-1{background:var(--papel);color:var(--tinta)}
.cierre .btn-1:hover{background:#FFFFFF}
.cierre .btn-2{color:var(--papel);border-color:#4A5568}
.cierre .btn-2:hover{background:#1F2937}

/* ── Páginas de texto legal ────────────────────────────────────────────── */
.texto > *{
  /* Acota la MEDIDA de lectura sin tocar el contenedor.
     `.texto` comparte elemento con `.env`, que se centra con `margin:0 auto`
     a 60rem. Pisarle el ancho a 44rem recentraba la columna y la dejaba
     128 px a la derecha del encabezado; quitarle el margen automático la
     mandaba al borde del viewport (160 px al otro lado). Las dos veces el
     error fue tratar al contenedor como si fuera la columna de texto.
     El contenedor se queda donde está y son los hijos los que se acotan. */
  max-width:44rem;
}
.texto h2{font-size:1.1875rem;font-weight:600;letter-spacing:-.015em;margin:2.25rem 0 .6rem}
.texto p{margin:0 0 1rem;max-width:52ch}
.texto ul{margin:0 0 1rem;padding-left:1.15rem;max-width:52ch}
.texto li{margin-bottom:.55rem;line-height:1.6}
.texto .nota{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--linea)}

/* ── Formulario ────────────────────────────────────────────────────────── */
.form{max-width:34rem;margin-top:2rem}
.campo{margin-bottom:1.15rem}
.campo label{display:block;font-weight:600;font-size:.9375rem;margin-bottom:.35rem}
.campo .ayuda{font-weight:400;color:var(--muted);font-size:.875rem}
.campo input,.campo textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--tinta);background:var(--blanco);
  border:1px solid #C9C4BC;border-radius:8px;padding:.7rem .8rem;min-height:48px;
}
.campo textarea{min-height:7rem;resize:vertical}
.campo input:focus-visible,.campo textarea:focus-visible{
  outline:3px solid var(--acento);outline-offset:1px;border-color:var(--acento)
}
/* Campo trampa: fuera de la vista y fuera del recorrido de teclado. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Objetivos táctiles ────────────────────────────────────────────────────
   Los enlaces de navegación y de pie medían 19–29 px de alto. El mínimo es
   44 px y el producto se diseña mobile-first (DESIGN.md), así que el sitio no
   puede tener una vara más baja que la aplicación.
   Se expanden con padding negativo-compensado para no mover la maqueta.
   Los enlaces DENTRO de un párrafo quedan fuera: WCAG 2.5.8 los exceptúa,
   y estirarlos rompería el interlineado del texto. */
.barra a,
footer a{
  display:inline-flex; align-items:center; min-height:44px;
}
/* Sin padding horizontal, y esa ausencia es el arreglo.
   La primera versión agregaba .4rem a cada lado compensados con margen
   negativo, para subir el alto de toque sin mover la maqueta. Pero eso ensancha
   la CAJA sin ensanchar el hueco entre enlaces: medido en producción, el nav
   quedó con −9 px de separación y el pie con −3 y −4. O sea que las áreas de
   toque se SUPERPONÍAN y tocar cerca del borde activaba el enlace equivocado.
   Un arreglo de accesibilidad que empeoró la accesibilidad.
   El requisito era el ALTO. `min-height` solo ya lo cumple, y los anchos nunca
   estuvieron por debajo del mínimo: el más angosto es «Precios», con 54 px. */
footer p{display:flex;flex-wrap:wrap;align-items:center;gap:0 .15rem}

/* ── Reaseguro del hero ────────────────────────────────────────────────────
   La línea de precio estaba como .nota: 15px y gris de texto secundario, o
   sea con el aspecto de una advertencia legal. Es el argumento comercial
   sobre el que descansa toda la estrategia de precio —se cobra por taller y
   no por persona—, así que se lee como afirmación, no como letra chica. */
.reaseguro{margin:0;font-size:1rem;color:var(--muted)}
.reaseguro strong{color:var(--tinta);font-weight:600}
/* ── Lo propio y lo común, en las páginas de tipo de taller ────────────────
   Medido: el 30 % del texto de /para/taller-general, /para/centro-de-servicio
   y /para/vehiculos-electricos es idéntico entre las tres, y TRES de los seis
   ítems de «Lo que el sistema le da» están en las tres palabra por palabra.
   El lector los leía como propios de su tipo de taller y no lo son, mientras
   /para promete «elija el suyo y vea qué cambia». Separarlos no borra nada:
   deja de afirmar una diferencia que el producto no tiene. */
.rotulo-lista{
  font-size:.8125rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:1.1rem 0 .4rem;
}
.rotulo-lista:first-of-type{margin-top:.6rem}
/* El precio vive en la barra fija cuando esa barra existe (< 44rem), así que
   repetirlo acá lo mostraba DOS veces en la misma pantalla de teléfono, una
   encima de la otra. Arriba de 44rem la barra no se rinde y el precio tiene
   que estar en algún lado. */
.solo-ancho{display:none}
@media(min-width:44rem){.solo-ancho{display:inline}}


/* ── Corte de ritmo ────────────────────────────────────────────────────────
   Tres secciones seguidas —integridad, ARIA y Costa Rica— usaban la misma
   rejilla de tres columnas con tres h3 cada una. Medido: idénticas en
   estructura. Leídas seguidas se funden en un solo bloque y la página deja de
   tener escalones.
   La del medio pasa a una superficie propia. No cambia el contenido: cambia
   el fondo, que es lo que el ojo usa para separar. A-B-A en vez de A-A-A. */
.seccion.panel{
  background:var(--fondo-alt);
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  /* A todo el ancho de la ventana sin salirse del flujo: el margen negativo
     compensa el contenedor y el relleno devuelve el margen lateral. */
  margin-inline:calc(50% - 50vw);
  padding:clamp(2.5rem,6vw,5rem) calc(50vw - 50% + var(--paso));
}
.seccion.panel > *{max-width:60rem;margin-inline:auto}

/* ── Página actual ─────────────────────────────────────────────────────────
   El nav tenía un solo ítem y ningún indicador, así que el test del tronco
   fallaba en «¿dónde estoy?». Se marca con aria-current —que es lo que lee un
   lector de pantalla— y se refuerza visualmente, porque la accesibilidad no
   puede depender solo del color ni el color solo de la accesibilidad. */
/* 1rem, no .25rem: con .25rem «Precios Contacto» se leía como una sola
   palabra. El alto ya cumple el mínimo táctil por min-height, así que este
   espacio es por legibilidad, no por accesibilidad. */
.barra nav{display:flex;gap:1rem}
.barra nav a[aria-current="page"]{color:var(--tinta);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* ── CTA persistente en móvil ──────────────────────────────────────────────
   El plan lo pedía como regla transversal del home y no se había construido.
   En móvil los CTA aparecían una vez arriba y otra al final de ~4.700 px de
   scroll: quien se convence a mitad de página tenía que seguir bajando o
   volver a subir.
   Solo por debajo de 44rem, y solo en las páginas donde hay algo que pedir.
   El pie recibe espacio extra para que la barra no lo tape.
   El fondo es OPACO: con 92 % + desenfoque el texto de la página se
   transparentaba detrás y se leía como un defecto de render, no como una
   barra. El botón va con nowrap porque al partirse subía la barra de 67 a
   93 px en el home. */
.cta-fijo{display:none}
@media(max-width:43.99rem){
  .cta-fijo{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    position:fixed; left:0; right:0; bottom:0; z-index:10;
    padding:.6rem var(--paso) calc(.6rem + env(safe-area-inset-bottom));
    background:var(--papel);
    border-top:1px solid var(--linea);
    box-shadow:0 -2px 12px rgba(16,24,40,.06);
  }
  .cta-fijo .precio-desde{font-size:.875rem;color:var(--muted);margin:0;min-width:0}
  .cta-fijo .precio-desde b{color:var(--tinta);font-weight:600}
  .cta-fijo .btn{padding:.6rem 1.1rem;min-height:44px;white-space:nowrap;flex:none}
  body:has(.cta-fijo) footer{padding-bottom:7rem}
}

/* ── Íconos de tarjeta ─────────────────────────────────────────────────────
   Medido el 2026-09-16: Garage360 tiene 76 íconos en su home y nosotros cero.
   No es cosmética — es lo que le da ritmo a una columna de tarjetas que si no
   se lee como un muro. Van en línea (sin red, sin peso de descarga), heredan
   `currentColor` y son decorativos: el <h3> de al lado ya dice lo que dicen.
   No van en `.recorrido`: esos pasos ya tienen la hora o el número de marcador
   y un ícono competiría con él. */
.ico{
  display:block; width:24px; height:24px; margin-bottom:.7rem;
  color:var(--acento); flex:none;
}
.corrida li{position:relative}
.corrida .ico{position:absolute; left:-2.35rem; top:.15rem; margin:0; width:20px; height:20px}
@media(max-width:34rem){
  /* Sin sangría que sostenga el ícono, vuelve al flujo arriba del texto. */
  .corrida .ico{position:static; margin-bottom:.35rem}
}

/* ── Héroe a dos columnas (solo el home) ───────────────────────────────────
   La captura del producto empezaba en y=725 de una pantalla de 900: entraba a
   medias, y en un portátil no entraba. Garage360 la pone completa en la
   primera pantalla, a la derecha del texto — y su imagen es una maqueta
   dibujada, mientras la nuestra es el producto. Era la ventaja peor colocada
   del sitio.

   Esto ROMPE a propósito la regla del hero centrado del 2026-09-10: en el home
   el h1 queda a la izquierda mientras sus ocho h2 siguen centrados. Se acepta
   solo acá, y por eso la clase vive en `.hero` y no en la regla general —
   las otras ocho páginas no se tocan.

   Debajo de 64rem vuelve a una columna y al centrado de siempre, que en
   teléfono es lo correcto: ahí no hay espacio para dos columnas y el texto
   centrado es lo que ya estaba probado. */
.hero{display:grid;gap:var(--paso)}
/* Al anidar el titular dentro de `.hero-texto` dejó de alcanzarlo la regla del
   hero centrado, que exige ser HIJO DIRECTO de `.env` — y en teléfono el h1
   salió a la izquierda. Se restaura acá como base, y el escritorio la pisa.
   Tercer caso del mismo patrón en el día: una regla que enumera hijos directos
   deja de aplicar en cuanto se mete un contenedor. */
.hero-texto > *{text-align:center;margin-inline:auto}
.hero-texto .acciones{justify-content:center}

@media(min-width:64rem){
  /* `.env` mide 60rem, así que dos columnas dejaban la captura en 438 px y el
     tablero no se leía. La imagen se queda con la columna mayor. */
  .hero{
    grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
    align-items:center; gap:clamp(2rem,4vw,3.5rem);
  }
  .hero-texto > *{text-align:left;margin-inline:0}
  .hero-texto h1{max-width:none;text-wrap:balance}
  .hero-texto .sub{max-width:44ch}
  .hero-texto .acciones{justify-content:flex-start}
  .hero .captura{margin:0}
  .hero .captura figcaption{text-align:left}
}

/* A partir de 82rem (1312 px) sobran 128 px para sacar el héroe a 74rem sin
   tocar los bordes, barra de desplazamiento incluida. Debajo de ese umbral se
   queda dentro de `.env` y la captura simplemente sale más chica.
   El intento anterior usaba `min(74rem, calc(100vw - 2*--paso))` y la página
   se corría de lado: 88 px a 1280, 46 a 1100, 8 a 1024 y a 1440. `100vw`
   cuenta la barra de desplazamiento; el ancho visible es menor. */
@media(min-width:82rem){
  .hero{margin-inline:-7rem}
}

/* ── Par: texto y captura al lado ──────────────────────────────────────────
   El reporte del teléfono mide 1.091 px de alto. Apilado bajo los tres pasos
   sumaba 1.174 px a la página para decir lo mismo. Al lado, la fila mide lo
   que mide la figura y los pasos caben dentro. Debajo de 60rem vuelve a
   apilarse, que en teléfono es lo correcto. */
.par{display:grid;gap:var(--paso)}
@media(min-width:60rem){
  /* `center` dejaba 356 px de vacío repartidos arriba y abajo de la columna
     corta. Con `start` las dos arrancan juntas y el desnivel queda al pie de
     la imagen, donde no se lee como un hueco. */
  .par{grid-template-columns:1fr auto;align-items:start;gap:clamp(2rem,5vw,4rem)}
  .par > *{margin-top:0}
  .par .captura{margin:0}
  /* Cuando el título y la entrada entran en la columna, dejan de ir
     centrados: el eje de lectura es el borde izquierdo de la columna. */
  /* `.seccion` al frente para igualar la especificidad de la regla que les
     devuelve el tamaño; sin eso el título se centraba sobre una columna
     alineada a la izquierda. */
  .seccion .par--texto > div > h2,
  .seccion .par--texto > div > .entrada,
  .seccion .par--texto > div > .remate{text-align:left;margin-inline:0;max-width:none}
  .par--texto .recorrido{margin-top:2rem}
  .par--texto .remate{margin-top:1.75rem}
  /* El teléfono a 18rem medía 890 px contra 555 de texto: 335 px de vacío al
     pie de la columna. A 15rem la diferencia baja y el reporte se sigue
     leyendo —severidades, hallazgo y decisión—. */
  .par--texto .captura--telefono{max-width:15rem}
}

/* ── Lista corrida ─────────────────────────────────────────────────────────
   Una alternativa a las tres tarjetas, para cuando el bloque no aguanta tres
   secciones seguidas con la misma forma. */
.corrida{list-style:none;padding:0;margin:2rem auto 0;max-width:58ch;display:grid;gap:.85rem}
.corrida li{padding-left:1.1rem;border-left:2px solid var(--linea);line-height:1.6}
.corrida b{color:var(--tinta)}

/* ── Captura de producto ───────────────────────────────────────────────────
   La página no tenía una sola imagen: la revisión de diseño lo midió
   (img 0, svg 0) y era la misma debilidad estructural que el benchmark le
   había señalado a la competencia. Esta es la pantalla real del producto, con
   datos de un taller de demostración —ningún cliente real aparece acá—.
   Ancho y alto explícitos para que no salte la maqueta al cargar. */
.captura{margin:2.5rem 0 0}
.captura img{
  display:block; width:100%; height:auto;
  border:1px solid var(--linea); border-radius:12px; background:var(--blanco);
  box-shadow:var(--sombra-alta);
}
.captura figcaption{margin-top:.7rem;font-size:.9375rem;color:var(--muted);max-width:62ch}

/* La figura dentro del recorrido usa la misma columna que los pasos, sin la
   hora: es la ilustración del paso anterior, no un paso más. */
.paso--figura{padding-top:.25rem}
.captura--interna{margin:0}
.captura--interna img{border-radius:10px}

/* Una captura de UNA tarjeta, no de una pantalla entera. Las otras capturas son
   apaisadas (1400×491) y llenan la columna sin problema; esta es casi cuadrada,
   así que a ancho completo se comía la pantalla del lector. */
/* 40rem = 640px = el ancho exacto al que la tarjeta se renderiza en el producto
   (la pantalla del mecánico está topada ahí). A ese tamaño la captura se ve 1:1
   y el texto de adentro se lee; más angosta, la letra de 12px no se lee.
   El selector nombra a `.seccion.panel` porque `.seccion.panel > *` fija
   max-width:60rem y le gana por especificidad — el mismo tropiezo de siempre. */
.captura--tarjeta,
.seccion.panel > .captura--tarjeta{max-width:40rem;margin-inline:auto}
.captura--tarjeta img{border-radius:14px}

/* ── El problema ───────────────────────────────────────────────────────────
   Va antes del recorrido: el home arrancaba con la solución sin nombrar el
   dolor. Deliberadamente NO usa la rejilla de tres — ya hay dos secciones con
   esa forma y la revisión de diseño marcó la repetición. Acá son renglones
   con la etiqueta a la izquierda, que además se lee más rápido. */
.males{list-style:none;padding:0;margin:0 0 2rem;border-top:1px solid var(--linea)}
.males li{display:grid;grid-template-columns:1fr;gap:.15rem;padding:.9rem 0;border-bottom:1px solid var(--linea)}
@media(min-width:44rem){.males li{grid-template-columns:14rem 1fr;gap:1.5rem;align-items:baseline}}
.males b{font-weight:600;letter-spacing:-.01em}
.males span{color:var(--muted);font-size:1rem}
.remate{font-size:clamp(1.125rem,2.4vw,1.375rem);line-height:1.4;letter-spacing:-.015em;
  margin:0;max-width:34ch;font-weight:600}

/* Antetítulo del hero: carga la categoría —«gestión de taller con IA»— para
   que el titular no tenga que gastarse en decir qué es esto. */
.antetitulo{
  font-size:.875rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--acento); margin:0 0 1rem;
}

/* El antetítulo también sirve dentro de una sección, para etiquetar una que
   habla de futuro. Que se lea distinto es parte del mensaje. */
.seccion .antetitulo{margin-bottom:.5rem}

/* ── Tabla comparativa de planes ───────────────────────────────────────────
   Las filas salen de MODULOS_POR_PLAN en lib/planes.ts del producto. Si allá
   cambia el mapa, acá hay que cambiarlo: es copia, y una copia envejece sola. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
/* El desplazamiento vive en un envoltorio propio de la tabla, no en la sección.
   Con `overflow-x:auto` sobre la <section>, a 375 px la PÁGINA ENTERA se
   deslizaba 136 px —comprobado moviendo la vista y viendo correrse la sección—
   aunque el contenedor reportara que desplazaba por dentro. Y de paso el
   titular ya no se va con la tabla al deslizarla. */
.comparativa{margin-top:clamp(2rem,5vw,3rem)}
.tabla-desplaza{
  overflow-x:auto;
  /* `contain:paint` es lo que de verdad lo arregla. Con solo `overflow-x:auto`
     la tabla de 544 px seguía sumando al ancho desplazable del DOCUMENTO
     —comprobado: la página se corría 136 px a 375 px, con 136 px en blanco a la
     derecha— aunque el contenedor la recortara bien por dentro. `contain:paint`
     le dice al navegador que nada de adentro pinta fuera de esta caja, y con eso
     deja de contar para el desbordamiento de la página. */
  contain:paint;
}
.comparativa table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.9375rem}
/* /precios era la única página con el titular de sección a la izquierda
   mientras las otras siete lo centran. El estilo estaba además en un atributo
   `style` dentro del HTML, o sea fuera del sistema. */
.comparativa > h2{font-size:1.375rem;margin:0 auto .5rem;text-align:center;max-width:24ch}
.comparativa caption{text-align:center;color:var(--muted);font-size:.9375rem;margin-bottom:.75rem}
.comparativa th,.comparativa td{padding:.6rem .75rem;border-bottom:1px solid var(--linea);text-align:left}
.comparativa thead th{font-size:.875rem;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.comparativa tbody th{font-weight:400}
.comparativa td{text-align:center;width:7rem}
.comparativa .si{color:var(--acento);font-weight:700}
.comparativa .no{color:var(--muted)}
.comparativa tbody tr:last-child th,.comparativa tbody tr:last-child td{border-bottom:0}

/* ── La comparativa en teléfono ────────────────────────────────────────────
   Con `min-width:34rem` la tabla medía 544 px dentro de una caja de 358: casi
   200 px quedaban fuera y nada indicaba que había que arrastrarla, así que la
   tercera columna era invisible. El <caption> se recortaba con ella —se leía
   «…se cobran por sucursal y p».
   En vez de señalizar el arrastre, que la tabla quepa: sin ancho mínimo, con
   la columna de la función tomando lo que sobra y las tres de valor fijas en
   lo que mide un ✓. El envoltorio con overflow queda de red por si el texto
   de alguna fila crece. */
@media(max-width:34rem){
  .comparativa table{min-width:0;font-size:.8125rem;table-layout:fixed}
  .comparativa th,.comparativa td{padding:.55rem .25rem}
  .comparativa thead th{font-size:.6875rem;letter-spacing:0}
  /* Con `table-layout:fixed` los anchos salen de la PRIMERA fila, que es el
     <thead>. Ponerlos en los <td> no hacía nada: las cuatro columnas quedaban
     iguales a 90 px y «TALLER PRO» se partía. Van en el encabezado. */
  .comparativa thead th:not(:first-child){width:3.1rem}
  .comparativa td{width:auto}
  /* Sin `hyphens`: partía «interac-ciones» y «his-tórico», que en una tabla
     de precios se lee peor que una línea más. */
  .comparativa tbody th{padding-left:0}
  .comparativa caption{font-size:.875rem}
}

/* El remate necesita aire cuando cierra una rejilla; sin esto se pega a la
   última columna y se lee como un cuarto ítem. */
.tres + .remate,.recorrido + .remate,.pasos + .remate{margin-top:1.75rem}

/* ── Hojas imprimibles ─────────────────────────────────────────────────────
   Las plantillas que el taller descarga son páginas, no PDF: pesan cero,
   funcionan desde el teléfono y el navegador las guarda como PDF solo. Todo
   lo que no es la hoja desaparece al imprimir. */
.hoja{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;
  padding:clamp(1.25rem,4vw,2.25rem);margin-top:1.5rem}
.hoja h2{font-size:1.0625rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:1.75rem 0 .6rem}
.hoja > h2:first-child{margin-top:0}
.hoja table{border-collapse:collapse;width:100%;font-size:.9375rem}
.hoja th,.hoja td{border:1px solid var(--linea);padding:.45rem .55rem;text-align:left;vertical-align:top}
.hoja thead th{font-size:.8125rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.hoja .marca-col{width:3.2rem;text-align:center}
.hoja .linea-larga{height:2.1rem}
.hoja .rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.4rem .9rem;margin-bottom:.5rem}
.hoja .dato{border-bottom:1px solid var(--linea);padding:.9rem 0 .3rem;font-size:.8125rem;color:var(--muted)}
.hoja .pie-legal{font-size:.8125rem;color:var(--muted);margin-top:1rem}
.hoja .firma{margin-top:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.hoja .firma div{border-top:1px solid var(--tinta);padding-top:.4rem;font-size:.8125rem;color:var(--muted)}
.imprimir{margin-top:1.5rem}

@media print{
  /* El envoltorio existe para que la tabla no empuje la página en
     teléfono. En papel estorba: la hoja se imprime completa. */
  .tabla-desplaza{overflow:visible;contain:none}
  header,footer,.imprimir,.antetitulo,.sub,.no-imprimir{display:none !important}
  body{background:#fff;font-size:10.5pt}
  .env{max-width:none;padding:0}
  .hoja{border:0;border-radius:0;padding:0;margin:0}
  .hoja table{font-size:9.5pt}
  h1{font-size:13pt;margin:0 0 .2rem;letter-spacing:-.01em}

  /* Las dos hojas se imprimían en DOS páginas: a la orden le sobraban 383 px
     sobre el área útil de una A4 y a la de 12 puntos, 48. Para algo que un
     taller imprime por pilas, esa segunda página es media resma tirada — y
     peor, la firma podía caer sola en ella.
     Se aprieta solo en papel; en pantalla la hoja no se toca. */
  .hoja h2{font-size:9.5pt;margin:.26rem 0 .14rem}
  .hoja .rejilla{gap:.26rem .9rem}
  .hoja th,.hoja td{padding:.2rem .38rem}
  .hoja .firma{margin-top:.45rem}
  .hoja .pie-legal{font-size:8pt;margin:.25rem 0 0}
  @page{size:A4;margin:8mm}
}

/* ── El puente entre las dos capas ─────────────────────────────────────────
   El titular promete una secuencia —orden el primer día, más inteligente cada
   semana— y sin esto no dice POR QUÉ mejora. La arquitectura es la respuesta y
   está en ADR-055: los insights se apoyan sobre datos que el reporte ya
   calcula. La gestión captura; la inteligencia lee.

   No dice «IA en todo el proceso» a propósito. `SeccionAlertas.tsx` lo deja
   escrito: las alertas son reglas deterministas y «presentar reglas como IA
   sería deshonesto». Acá se nombra cada cosa por lo que es. */
.puente{
  margin:0 0 1.75rem; max-width:52ch; font-size:.9375rem; line-height:1.6;
  color:var(--muted); border-left:2px solid var(--linea); padding-left:1rem;
}
.puente strong{color:var(--tinta);font-weight:600}
/* En /precios el encabezado va centrado y el puente se iba contra el margen
   izquierdo, flotando bajo un bloque centrado. Se centra el BLOQUE y el texto
   sigue alineado a la izquierda: es una acotación, no un subtítulo más. */
.puente--centro{margin-inline:auto}

/* ── Las cifras de /aria ───────────────────────────────────────────────────
   «37 casos reales», «85 % es el mínimo» y «48 de 48» son la prueba más fuerte
   del sitio, y estaban tipografiadas como el título de cualquier otra tarjeta:
   en una página cuya tesis es «medimos si acierta», los números no dominaban
   nada. Se leían igual que «No presume con una sola muestra».

   El número sale del flujo del texto y se agranda, pero el <h3> conserva su
   texto COMPLETO —«37 casos reales»— para quien lo escucha con lector de
   pantalla. El tamaño es presentación, no contenido. */
.cifra{display:block}
.cifra b{
  display:block; font-weight:700; line-height:1;
  font-size:clamp(2.5rem,5vw,3.25rem); letter-spacing:-.03em;
  color:var(--acento); margin-bottom:.15rem;
}

/* ── El campo de marca ─────────────────────────────────────────────────────
   Medido el 2026-09-18: las 19 páginas abrían idénticas —antetítulo, h1 de
   64 px centrado, subtítulo, blanco— y 18 de 19 no tenían NI UN elemento
   visual en la primera pantalla. En /funciones son 760 px de alto con solo
   texto centrado. Eso es lo que hace que el sitio se lea como folleto y no
   como empresa.

   Stripe resuelve lo mismo con un degradado generativo que NO es una captura:
   es marca. El suyo va en WebGL. El nuestro va en CSS puro y a propósito —el
   sitio sirve 0 bytes de JavaScript y eso está registrado como la ventaja más
   medida que tenemos (§8.6 del plan). Un campo de gradientes cuesta CERO
   bytes: ni una petición, ni un archivo.

   Va igual en las 19. La consistencia es lo que señala empresa; la variación
   por página, si hace falta, viene después. */
main{position:relative}
main::before{
  content:''; position:absolute; inset:0 0 auto; height:min(46rem, 68vh);
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(52rem 30rem at 88% -10%, color-mix(in srgb, var(--acento) 52%, transparent), transparent 58%),
    radial-gradient(40rem 26rem at 108% 26%, color-mix(in srgb, #22A8CE 42%, transparent), transparent 56%),
    radial-gradient(34rem 24rem at 96% 46%,  color-mix(in srgb, #7C5CD6 22%, transparent), transparent 55%),
    radial-gradient(30rem 22rem at 2% -14%,  color-mix(in srgb, var(--acento) 16%, transparent), transparent 56%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 34%, transparent 92%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 34%, transparent 92%);
}
@media(max-width:60rem){
  /* En teléfono el campo se achica y se aclara: el texto va encima, centrado,
     y ahí cualquier saturación le come el contraste. */
  main::before{height:min(26rem, 46vh); opacity:.6}
}
@media print{ main::before{display:none} }

/* ── Hero centrado ─────────────────────────────────────────────────────────
   Rediseño del 2026-09-10. Si cada h2 de sección está centrado y el titular
   de la página no, la primera pantalla contradice a las diez siguientes.
   Se excluyen las páginas `.texto` —privacidad, términos, contacto— donde el
   contenido es prosa o un formulario y centrar el encabezado lo desalinea de
   lo que viene abajo.

   OJO: esta regla ENUMERA clases, así que cada elemento nuevo del hero nace
   alineado a la izquierda mientras todo lo demás va centrado. Pasó con
   `.prueba`: se veía en la captura antes de publicar. Si agregás uno, va acá. */
main > .env:not(.texto) > .antetitulo,
main > .env:not(.texto) > h1,
main > .env:not(.texto) > .sub,
main > .env:not(.texto) > .reaseguro,
main > .env:not(.texto) > .prueba,
main > .env:not(.texto) > .imprimir{
  text-align:center; margin-inline:auto;
}
main > .env:not(.texto) > .acciones{justify-content:center}

/* El cierre oscuro sigue la misma regla que las secciones. */
.cierre{text-align:center}
.cierre h2,.cierre p{margin-inline:auto}
.cierre .acciones{justify-content:center}

/* La captura del reporte del cliente es una pantalla de teléfono: a todo el
   ancho se vería como un cartel y no como lo que es. Se limita y se centra. */
/* El `.seccion.panel > *{max-width:60rem}` de la línea 360 le gana por
   especificidad y la captura del teléfono salía a 864 px: una pantalla de
   celular estirada al ancho de la columna. Es el MISMO tropiezo que ya tiene
   su nota en `.captura--tarjeta`, y se arregla igual — nombrando al padre. */
.captura--telefono,
.seccion.panel > .captura--telefono{max-width:18rem;margin-inline:auto}
.captura--telefono img{border-radius:16px}
.captura--telefono figcaption{text-align:center}

/* «Entrar» no es un enlace más del menú: es la puerta del taller que ya nos
   paga. Estaba solo en el pie, o sea que un cliente tenía que recorrer la
   página entera para encontrar dónde entrar. Se separa del resto con un borde
   y un margen, como hace cualquier producto con sesión. */
.barra nav{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.entrar{
  border:1px solid var(--linea); border-radius:8px;
  padding:.4rem .85rem; margin-left:.35rem; text-decoration:none;
  color:var(--tinta); font-weight:600;
}
.entrar:hover{border-color:var(--acento);color:var(--acento)}

/* Seis entradas a 375 px se parten en dos líneas y dejaban la barra en 200 px:
   un tercio de la primera pantalla gastado en el menú, antes del titular.
   Se aprieta solo en angosto — en escritorio no hace falta y perjudicaría el
   objetivo de toque. El alto mínimo de 44 px se conserva, que es el requisito
   real de accesibilidad. */
@media(max-width:40rem){
  .barra{gap:.5rem}
  .barra nav{gap:.35rem .85rem;font-size:.9375rem}
  .entrar{padding:.3rem .7rem;margin-left:0}
  header{padding:1.25rem 0 0}
}

/* Dos columnas: lo que el taller hace y lo que el sistema le da. Es el bloque
   más claro de las páginas por tipo de taller de la competencia, y funciona
   porque pone lado a lado el trabajo y la herramienta en vez de describirlos
   en dos secciones separadas. */
.dos-listas{display:grid;gap:1.25rem;grid-template-columns:1fr;text-align:left}
@media(min-width:44rem){.dos-listas{grid-template-columns:1fr 1fr;gap:1.5rem}}
.dos-listas > div{background:var(--blanco);border:1px solid var(--linea);
  border-radius:12px;padding:1.5rem 1.4rem;box-shadow:var(--sombra)}
.dos-listas h3{font-size:1.0625rem;font-weight:700;margin:0 0 .85rem;letter-spacing:-.012em}
.dos-listas ul{list-style:none;margin:0;padding:0}
.dos-listas li{position:relative;padding-left:1.15rem;margin-bottom:.55rem;color:var(--muted)}
.dos-listas li::before{content:"";position:absolute;left:0;top:.6em;width:.4rem;height:.4rem;
  border-radius:50%;background:var(--acento)}
.dos-listas li:last-child{margin-bottom:0}

/* ── HALLAZGO 1 · medida de línea ─────────────────────────────────────────
   Medido a 1280 px: `.nota` llegaba a 122 caracteres por línea y los pasos
   del recorrido a 103. El rango legible es 45-75; pasado eso el ojo pierde
   el renglón al volver a la izquierda. `.entrada` ya estaba acotada a 58ch
   y estas dos se habían quedado sin tope. */
/* 56ch y no 70ch: `ch` mide el ancho del cero, que en Inter es ~0.63em,
   bastante más que el promedio real de un texto en minúsculas (~0.5em). Con
   70ch la línea llegaba a 88 caracteres medidos. 56ch la deja en ~72. */
.nota{max-width:56ch}
main > .env:not(.texto) > .nota,
.seccion > .nota{margin-inline:auto}
.paso p,.paso h3{max-width:56ch}

/* La franja a todo el ancho ponía `max-width:60rem` a TODOS sus hijos y con eso
   pisaba el tope de 58ch de la entrada: en /funciones la línea se iba a 102
   caracteres. El tope de ancho de ventana se reasigna solo a los bloques de
   maqueta, no al texto. */
.seccion.panel > h2{max-width:24ch}
.seccion.panel > .entrada{max-width:58ch}
.seccion.panel > .remate{max-width:44ch}

/* ── HALLAZGO 2 · objetivos de toque en los títulos de tarjeta ────────────
   En /para y /recursos el enlace ES el título de la tarjeta, o sea el destino
   principal de la página, y medía 21 px de alto. No es un enlace dentro de una
   frase —esos WCAG 2.5.8 los exceptúa— así que necesita los 44 px.
   Solo alto: agregar relleno horizontal ensancharía la caja sin ensanchar el
   hueco entre enlaces, que es el error que ya se cometió una vez en el pie. */
.tres h3 a{display:inline-flex;align-items:center;min-height:44px}

/* Medida de lectura, con el dato que costó encontrar: en Inter `1ch` vale
   ~0.63em, bastante más que el ancho medio de una letra minúscula (~0.5em).
   Por eso 64ch daba 80 caracteres por línea y no 64. Los topes de arriba están
   calculados con esa relación para caer en el rango legible de 45-75. */

/* ── Desplegables del menú ─────────────────────────────────────────────────
   Con `<details>`, no con `:hover`. Un menú por hover sin JavaScript es una
   trampa: no existe hover en pantalla táctil, y al tocarlo se abre y se navega
   a la vez. `<details>` se abre con clic, funciona con teclado sin una línea de
   script, y el navegador ya le da el rol y el estado a los lectores de pantalla.
   Es el mismo mecanismo que el FAQ.

   Cada lista incluye su propia página índice como primer ítem, para que abrir
   el desplegable no le quite al visitante el destino que el rótulo prometía. */
.desplegable{position:relative}
.desplegable > summary{
  display:inline-flex;align-items:center;gap:.3rem;min-height:44px;
  cursor:pointer;list-style:none;color:var(--acento);font-weight:inherit;
}
.desplegable > summary::-webkit-details-marker{display:none}
.desplegable > summary::after{
  content:"";width:.42em;height:.42em;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-.1em,-.1em);
  transition:transform .15s ease;
}
.desplegable[open] > summary::after{transform:rotate(225deg) translate(-.06em,-.06em)}
.desplegable > summary:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:2px}
.desplegable > summary[aria-current="true"]{text-decoration:underline;text-underline-offset:6px}

.desplegable-lista{
  position:absolute;top:calc(100% + .35rem);left:-.75rem;z-index:20;
  min-width:14rem;display:flex;flex-direction:column;
  background:var(--blanco);border:1px solid var(--linea);border-radius:12px;
  padding:.4rem;box-shadow:var(--sombra-alta);
}
.desplegable-lista a{
  display:flex;align-items:center;min-height:44px;padding:0 .75rem;
  border-radius:8px;text-decoration:none;font-size:.9375rem;
}
.desplegable-lista a:hover{background:var(--fondo-alt)}
.desplegable-lista a:first-child{color:var(--muted);font-weight:600}

/* En angosto el panel se ancla al NAV, no al ítem: un panel de 14rem colgado
   de «Recursos», que queda a media fila, se sale por la derecha.
   Y sigue flotando en vez de empujar: la primera versión le daba ancho completo
   a cada desplegable y la barra pasaba de 166 px a 265 —cuatro filas y un tercio
   de la pantalla gastado en el menú, antes del titular—. */
@media(max-width:40rem){
  .barra nav{position:relative}
  /* El ítem deja de ser el bloque contenedor para que el panel se ancle al
     nav. Sin esto el panel medía 77 px, el ancho del rótulo. */
  .desplegable{position:static}
  .desplegable-lista{left:0;right:0;min-width:0;top:calc(100% + .5rem)}
}

/* ── Guías ─────────────────────────────────────────────────────────────────
   Los titulares siguen centrados, como en el resto del sitio, pero la PROSA
   se alinea a la izquierda. Un párrafo centrado de tres o cuatro líneas obliga
   a buscar dónde empieza cada renglón; en una página de venta con entradas de
   una línea no se nota, en material de lectura sí. Acá la claridad manda sobre
   la coherencia. */
.guia .seccion > .entrada,
.guia .seccion > .remate{text-align:left;margin-inline:0}
.guia .seccion > .remate{max-width:52ch}
.guia .seccion > .entrada{max-width:56ch}
.guia .nota{text-align:left;margin-inline:0;max-width:56ch}