/* ============================================================================
   Zyntra - sistema de diseno
   ----------------------------------------------------------------------------
   Reemplaza por completo el sistema anterior (Tailwind CDN + Material Symbols
   + paleta negro/cian). Todo lo que hay aca sale del handoff de rebrand:
   "rediseno total de Zyntra/design_handoff_zyntra_rebrand/README.md".

   Reglas duras del sistema, no negociables:
     - Sin box-shadow. NINGUNA. La jerarquia se resuelve con color y radio.
     - Sin degradados. Sin sombras de color.
     - Un solo acento por pieza. Maximo dos fondos.
     - El naranja nunca de fondo en una superficie larga.
     - Hover = solo cambio de color, 180ms. Sin scale, sin elevacion.
     - Foco visible siempre: outline naranja de 2px con offset 2px.
     - Texto legible: nunca menos de 15px.

   Se sirve aparte de index.html para que el navegador lo cachee entre paginas.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */

:root {
    /* marca */
    --tinta:        #171310;   /* texto principal y fondos oscuros */
    --acento:       #E4572E;   /* acento unico, naranja Zyntra     */
    --acento2:      #2F6B4F;   /* verde de apoyo, OK, zyntra causas */
    --arena:        #E3D8C4;   /* fondo de marca (body)            */
    --crema:        #F5F0E6;   /* superficies, tarjetas            */

    /* superficies */
    --superficie-2: #EDE6D8;   /* tarjeta dentro de tarjeta */
    --tinta-2:      #211B16;   /* tarjeta dentro de tinta   */
    --tinta-3:      #241E19;   /* placeholder sobre tinta   */

    /* texto sobre claro */
    --texto:        #4A423A;   /* cuerpo sobre crema         8.67:1 */
    --texto-2:      #6B6155;   /* secundario                 5.33:1 */
    --mono-claro:   #6E6357;   /* etiquetas mono             5.18:1 */
    --apagado:      #6F6553;   /* placeholder, desactivado   4.62:1 */

    /* texto sobre tinta */
    --sobre-tinta:   #9A8F82;  /* 5.83:1 */
    --sobre-tinta-2: #8E8377;  /* 4.86:1 */
    --sobre-tinta-3: #90857A;  /* 4.77:1 */

    /* texto sobre acento */
    --sobre-naranja: #3A1105;  /* 4.54:1 sobre naranja */
    --sobre-verde:   #BBD8CB;
    --sobre-verde-2: #D3E4DA;

    /* El naranja de marca da 3.24:1 sobre crema: alcanza para un titulo
       grande, no para un enlace de 15px. El handoff lo dice explicito
       ("el naranja no se usa como color de texto sobre crema en tamanos
       chicos"), asi que el texto chico usa esta version: 5.05:1 sobre crema
       y 4.60:1 sobre la superficie secundaria, que es donde viven las
       tarjetas y es el fondo mas exigente.
       --acento sigue siendo el de los rellenos, los puntos y los titulos, y
       tambien el del texto chico SOBRE TINTA, donde da 5.01:1 y el oscuro
       no se leeria. */
    --acento-texto: #B93A15;

    /* bordes y divisores */
    --borde:        #D8CCB8;
    --borde-2:      #DDD2BE;
    --borde-3:      #C9BCA6;
    --divisor-tinta:#2E2822;

    /* estados */
    --acento-hover: #C6421D;
    --tinta-hover:  #33291F;

    /* tipografias */
    --titulo: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --cuerpo: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* radios */
    --r-seccion: 24px;
    --r-tarjeta: 18px;
    --r-interno: 14px;
    --r-boton:   12px;
    --r-pildora: 20px;

    /* espaciado */
    --pad-seccion: clamp(30px, 4.5vw, 54px);
    --gap:         14px;
    --gap-columna: clamp(22px, 4vw, 52px);
    --ancho:       1180px;

    --transicion: background-color .18s ease, color .18s ease,
                  border-color .18s ease, outline-color .18s ease;
}

/* ------------------------------------------------------------------ 2. base */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* el header es sticky: que las anclas no queden tapadas */
    scroll-padding-top: 92px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--arena);
    color: var(--tinta);
    font-family: var(--cuerpo);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

::selection { background: var(--acento); color: var(--tinta); }

/* Foco: regla de accesibilidad del sistema. No se elimina nunca. */
:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
    border-radius: 4px;
}
/* sobre naranja el anillo naranja no se ve: se invierte a tinta */
.panel--naranja :focus-visible,
.bloque-cta :focus-visible { outline-color: var(--tinta); }

/* -------------------------------------------------------- 3. tipografia */

h1, h2, h3, h4, h5 {
    font-family: var(--titulo);
    margin: 0;
    text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.display {
    font-family: var(--titulo);
    font-weight: 800;
    font-size: clamp(34px, 5vw, 58px);
    line-height: .98;
    letter-spacing: -.045em;
}

.h-seccion {
    font-family: var(--titulo);
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.subtitulo {
    font-family: var(--titulo);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.subtitulo-chico {
    font-family: var(--titulo);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.cuerpo       { font-size: 17px; line-height: 1.6; color: var(--texto); }
.cuerpo-chico { font-size: 15px; line-height: 1.5; color: var(--texto); }

.etiqueta {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--mono-claro);
}
.etiqueta--chica { font-size: 10px; letter-spacing: .2em; }

.dato {
    font-family: var(--titulo);
    font-weight: 800;
    font-size: clamp(34px, 5vw, 56px);
    line-height: .9;
    letter-spacing: -.05em;
    color: var(--acento);
}

/* variantes de color sobre fondo tinta */
.sobre-tinta            { color: var(--crema); }
.sobre-tinta .cuerpo,
.sobre-tinta .cuerpo-chico { color: var(--sobre-tinta); }
.sobre-tinta .etiqueta  { color: var(--sobre-tinta-3); }

.texto-acento  { color: var(--acento); }
.texto-verde   { color: var(--acento2); }
.texto-2       { color: var(--texto-2); }

/* ------------------------------------------------------------- 4. layout */

.envoltorio {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 24px;
}

/* El sitio es una pila de paneles redondeados sobre arena, con 14px entre
   uno y otro. Es el ritmo del brandboard y del kit. */
.panel {
    background: var(--crema);
    border-radius: var(--r-seccion);
    padding: var(--pad-seccion);
    margin-top: var(--gap);
    scroll-margin-top: 92px;
}
.panel--primero  { margin-top: 24px; }
.panel--tinta    { background: var(--tinta); color: var(--crema); }
.panel--naranja  { background: var(--acento); color: var(--tinta); }
.panel--verde    { background: var(--acento2); color: var(--crema); }
.panel--arena    { background: var(--arena); }
.panel--sin-pad  { padding: 0; overflow: hidden; }

.encabezado-seccion { max-width: 720px; margin-bottom: 34px; }
.encabezado-seccion .h-seccion { margin-top: 14px; }
.encabezado-seccion p          { margin-top: 14px; }

.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min, 270px), 1fr));
    gap: var(--gap);
}
.rejilla--2 { --min: 320px; }
.rejilla--4 { --min: 200px; }
.rejilla--ancha { gap: var(--gap-columna); }

.divisor { height: 1px; background: var(--borde-2); border: 0; margin: 0; }
.panel--tinta .divisor { background: var(--divisor-tinta); }

/* ------------------------------------------------------------ 5. botones */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--cuerpo);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    padding: 15px 26px;
    border-radius: var(--r-boton);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transicion);
    /* area tactil minima de 44px: 15+15 de padding + 1.2em de linea */
    min-height: 48px;
}
.btn svg { flex: none; }

.btn--primario   { background: var(--acento); color: var(--tinta); }
.btn--primario:hover { background: var(--acento-hover); color: var(--crema); }

.btn--secundario { background: var(--tinta); color: var(--crema); }
.btn--secundario:hover { background: var(--tinta-hover); color: var(--crema); }

.btn--contorno {
    background: transparent;
    color: var(--tinta);
    border: 2px solid var(--tinta);
    padding: 13px 24px;
}
.btn--contorno:hover { background: var(--tinta); color: var(--crema); }

.btn--enlace {
    color: var(--acento-texto);
    background: transparent;
    border-bottom: 2px solid var(--acento);
    border-radius: 0;
    padding: 6px 2px;
    min-height: 0;
    align-self: flex-start;
    font-size: 15px;
}
.btn--enlace:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.btn[disabled], .btn.is-cargando {
    background: var(--borde-2);
    color: var(--apagado);
    cursor: not-allowed;
    pointer-events: none;
}

/* sobre fondo tinta cambian los hover */
.panel--tinta .btn--primario:hover,
.sobre-tinta  .btn--primario:hover { background: var(--crema); color: var(--tinta); }

.panel--tinta .btn--contorno,
.sobre-tinta  .btn--contorno { color: var(--crema); border-color: var(--texto); }
.panel--tinta .btn--contorno:hover,
.sobre-tinta  .btn--contorno:hover { background: transparent; border-color: var(--crema); color: var(--crema); }

/* sobre naranja el boton va tinta/crema */
.panel--naranja .btn--secundario:hover,
.bloque-cta .btn--secundario:hover { background: var(--crema); color: var(--tinta); }

.fila-botones { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; }

/* enlace de texto suelto dentro de parrafos */
.enlace {
    color: var(--acento-texto);
    text-decoration: none;
    border-bottom: 2px solid var(--acento);
    transition: var(--transicion);
}
.enlace:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

/* resalta una palabra dentro de un parrafo, sin cambiarle el color */
.resalte { color: var(--tinta); font-weight: 600; }
.panel--tinta .resalte, .sobre-tinta .resalte, .tarjeta--tinta .resalte { color: var(--crema); }
.sobre-tinta .enlace:hover,
.panel--tinta .enlace:hover { color: var(--crema); border-bottom-color: var(--crema); }

/* ------------------------------------------------------------- 6. campos */

.campo { display: flex; flex-direction: column; gap: 9px; }

.campo > label {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mono-claro);
}

.campo input,
.campo select,
.campo textarea {
    font-family: var(--cuerpo);
    font-size: 16px;
    line-height: 1.4;
    color: var(--tinta);
    background: var(--superficie-2);
    border: 2px solid var(--borde);
    border-radius: var(--r-boton);
    padding: 15px 16px;
    min-height: 48px;
    width: 100%;
    transition: var(--transicion);
    appearance: none;
    -webkit-appearance: none;
}
.campo textarea { min-height: 128px; resize: vertical; }

.campo input::placeholder,
.campo textarea::placeholder { color: var(--apagado); }

.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--borde-3); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--tinta);
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.campo select {
    /* la flecha es del sistema: linea de 4px, sin librerias */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--tinta) 50%),
        linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
    background-position: calc(100% - 21px) 50%, calc(100% - 14px) 50%;
    background-size: 7px 7px, 7px 7px;
    background-repeat: no-repeat;
    padding-right: 42px;
}

.campo--error input,
.campo--error textarea { border-color: var(--acento); }
.campo-error {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acento-texto);
}

.campo-ayuda { font-size: 14px; line-height: 1.45; color: var(--texto-2); }

/* --------------------------------------------------------- 7. etiquetas */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: var(--tinta);
    color: var(--crema);
    padding: 7px 12px;
    border-radius: var(--r-pildora);
    text-decoration: none;
}
.chip--verde    { background: var(--acento2); color: var(--crema); }
.chip--naranja  { background: var(--acento);  color: var(--tinta); }
.chip--crema    { background: var(--crema);   color: var(--tinta); }
.chip--contorno {
    background: transparent;
    border: 1.5px solid var(--borde-3);
    color: var(--texto-2);
    padding: 6px 12px;
    font-weight: 400;
}
.panel--tinta .chip--contorno { border-color: var(--divisor-tinta); color: var(--sobre-tinta); }

a.chip { transition: var(--transicion); }
a.chip--contorno:hover { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

.fila-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------- 8. el punto */

/* El punto naranja es la unidad de trabajo: un turno, un cobro, un mensaje
   sin responder. Es la vineta del sistema. */
.punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acento);
    flex: none;
    margin-top: 8px;
}
.punto--verde  { background: var(--acento2); }
.punto--tinta  { background: var(--tinta); }
.punto--grande { width: 12px; height: 12px; margin-top: 6px; }

.lista-puntos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lista-puntos li { display: flex; gap: 12px; align-items: flex-start; }

/* --------------------------------------------------------- 9. iconos */

/* Sprite propio en assets/iconos.svg, inyectado en cada pagina como <symbol>.
   Linea de 4px sobre grilla de 24, esquinas redondeadas, siempre en tinta con
   un unico detalle naranja. Sin librerias de terceros. */
.ico {
    width: 24px;
    height: 24px;
    flex: none;
    color: var(--tinta);       /* el trazo usa currentColor  */
    --punto-ico: var(--acento); /* el detalle naranja        */
}
.ico--chico { width: 18px; height: 18px; }
.ico--grande { width: 28px; height: 28px; }
.sobre-tinta .ico, .panel--tinta .ico { color: var(--crema); }

/* Cuadrado del icono: 46px, radio 13, fondo tinta. Es el "porta-icono" de la
   tarjeta de servicio. */
.caja-ico {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.caja-ico .ico { color: var(--crema); }
.caja-ico--crema { background: var(--crema); }
.caja-ico--crema .ico { color: var(--tinta); }
.caja-ico--naranja { background: var(--acento); }
.caja-ico--naranja .ico { color: var(--tinta); }

/* variante chica para las puertas de industria */
.caja-ico--chica { width: 38px; height: 38px; border-radius: 11px; }
.caja-ico--chica .ico { width: 20px; height: 20px; }

/* --------------------------------------------- 10. tarjeta de servicio */

.tarjeta {
    background: var(--superficie-2);
    /* explicito a proposito: una tarjeta clara dentro de un panel tinta
       heredaba el crema del panel y los titulos quedaban ilegibles */
    color: var(--tinta);
    border-radius: var(--r-tarjeta);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tarjeta--crema { background: var(--crema); }
.tarjeta--tinta { background: var(--tinta); color: var(--crema); }
.tarjeta--tinta-2 { background: var(--tinta-2); color: var(--crema); }
.tarjeta--naranja { background: var(--acento); color: var(--tinta); }
.tarjeta--verde { background: var(--acento2); color: var(--crema); }

.tarjeta h3, .tarjeta h4 { font-weight: 600; font-size: 22px; letter-spacing: -.025em; line-height: 1.2; }
.tarjeta h3 a, .tarjeta h4 a { color: inherit; text-decoration: none; transition: var(--transicion); }
.tarjeta h3 a:hover, .tarjeta h4 a:hover { color: var(--acento-texto); }
.tarjeta--tinta h3 a:hover, .tarjeta--tinta h4 a:hover { color: var(--acento); }
.tarjeta p { font-size: 15px; line-height: 1.5; color: var(--texto); margin-top: 10px; }
.tarjeta--tinta p, .tarjeta--tinta-2 p { color: var(--sobre-tinta); }

/* el bloque "Con esto / Sin esto" */
.con-sin {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--borde-2);
}
.tarjeta--tinta .con-sin { border-top-color: var(--divisor-tinta); }
.con-sin > div { display: flex; gap: 10px; align-items: flex-start; }
.con-sin span:last-child { font-size: 14px; line-height: 1.45; color: var(--texto); }
.tarjeta--tinta .con-sin span:last-child { color: var(--sobre-tinta); }
.con-sin strong { color: var(--tinta); font-weight: 600; }
.tarjeta--tinta .con-sin strong { color: var(--crema); }

.tarjeta .btn--enlace { margin-top: auto; }

/* Tarjeta que es toda un enlace (casos, notas del blog). El color se fija
   explicito: con color:inherit, adentro de un panel tinta, el titulo se
   volvia crema sobre una tarjeta clara y no se leia. */
.tarjeta--enlace { text-decoration: none; color: var(--tinta); }
.tarjeta--enlace h3, .tarjeta--enlace h4 { color: var(--tinta); }
.tarjeta--enlace:hover h3, .tarjeta--enlace:hover h4 { color: var(--acento-texto); }

/* ------------------------------------------------- 11. tarjeta de caso */

.tarjeta-caso {
    background: var(--tinta);
    color: var(--crema);
    border-radius: var(--r-tarjeta);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.tarjeta-caso .cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.tarjeta-caso h3 {
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -.035em;
    line-height: 1;
    color: var(--crema);
}
.tarjeta-caso h3 a { color: inherit; text-decoration: none; }
.tarjeta-caso h3 a:hover { color: var(--acento); }
.tarjeta-caso p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--sobre-tinta); }

.metricas {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--divisor-tinta);
}
.metricas > div { min-width: 0; }
.metricas .cifra {
    font-family: var(--titulo);
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
    color: var(--acento);
}
.metricas .rotulo {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sobre-tinta-3);
    margin-top: 5px;
}

/* ----------------------------------------------------- 12. bloque CTA */

.bloque-cta {
    background: var(--acento);
    color: var(--tinta);
    border-radius: var(--r-tarjeta);
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}
.bloque-cta h2, .bloque-cta h3 {
    font-weight: 800;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -.035em;
    color: var(--tinta);
}
.bloque-cta .nota {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sobre-naranja);
    margin-top: 14px;
}
.bloque-cta .fila {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

/* ------------------------------------------------------ 13. el logotipo */

/* El logotipo vive como composicion HTML/CSS: la palabra es Bricolage 800 en
   minuscula y el isotipo es un cuadrado blando con la Z y el punto naranja.
   PENDIENTE del handoff: vectorizarlo como SVG en un editor. */
.logo {
    display: inline-flex;
    align-items: center;
    gap: .42em;
    text-decoration: none;
    color: inherit;
    font-size: 28px;          /* controla todo el lockup */
    line-height: 1;
}
.isotipo {
    position: relative;
    width: 1.32em;
    height: 1.32em;
    background: var(--tinta);
    border-radius: 34%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.isotipo::before {
    content: "Z";
    font-family: var(--titulo);
    font-weight: 800;
    font-size: .8em;
    line-height: 1;
    color: var(--crema);
    transform: translateY(-2%);
}
/* el punto naranja lleva borde del color del fondo de la pieza */
.isotipo::after {
    content: "";
    position: absolute;
    right: -4%;
    bottom: 2%;
    width: 26%;
    height: 26%;
    border-radius: 50%;
    background: var(--acento);
    border: .09em solid var(--fondo-pieza, var(--arena));
}
.logotipo {
    font-family: var(--titulo);
    font-weight: 800;
    font-size: 1em;
    letter-spacing: -.045em;
    line-height: .9;
    color: var(--tinta);
}
.logo--crema .isotipo { background: var(--crema); }
.logo--crema .isotipo::before { color: var(--tinta); }
.logo--crema .logotipo { color: var(--crema); }

/* nombre de servicio: "zyntra pentest" - Zyntra + una palabra en naranja */
.sub-marca { font-family: var(--titulo); font-weight: 800; letter-spacing: -.045em; }
.sub-marca em { font-style: normal; color: var(--acento); }
.sub-marca--verde em { color: var(--acento2); }

/* ---------------------------------------------------------- 14. Ojito */

/* Mascota. El parpado es la unica expresion: no tiene boca, ni nariz,
   ni cejas. Construccion parametrica: --S es el diametro del cuerpo.
   --lid: 0 abierto | .16 normal | .42 sospechando | .8 durmiendo */
.ojito {
    --S: 120px;
    --lid: .16;
    --iris-x: 0px;
    --iris-y: 0px;
    position: relative;
    width: var(--S);
    height: calc(var(--S) * 1.26);   /* cuerpo + patas */
    flex: none;
}
.ojito-cuerpo {
    position: absolute;
    inset: 0 0 auto 0;
    width: var(--S);
    height: var(--S);
    border-radius: 50%;
    background: var(--crema);
    border: calc(var(--S) * .045) solid var(--tinta);
    overflow: hidden;
    z-index: 2;
}
.ojito-iris {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--S) * .46);
    height: calc(var(--S) * .46);
    margin: calc(var(--S) * -.23) 0 0 calc(var(--S) * -.23);
    border-radius: 50%;
    background: var(--acento);
    transform: translate(var(--iris-x), var(--iris-y));
    transition: transform .28s ease-out;
}
.ojito-pupila {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--S) * .2);
    height: calc(var(--S) * .2);
    margin: calc(var(--S) * -.1) 0 0 calc(var(--S) * -.1);
    border-radius: 50%;
    background: var(--tinta);
}
.ojito-brillo {
    position: absolute;
    left: 62%;
    top: 34%;
    width: calc(var(--S) * .077);
    height: calc(var(--S) * .077);
    border-radius: 50%;
    background: var(--crema);
}
.ojito-parpado {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(var(--S) * var(--lid));
    background: var(--tinta);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    transition: height .15s ease;
}
.ojito-patas {
    position: absolute;
    left: 50%;
    top: calc(var(--S) * .92);
    transform: translateX(-50%);
    display: flex;
    gap: calc(var(--S) * .14);
    z-index: 1;
}
.ojito-patas span {
    position: relative;
    width: calc(var(--S) * .11);
    height: calc(var(--S) * .26);
    background: var(--tinta);
}
.ojito-patas span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: calc(var(--S) * .28);
    height: calc(var(--S) * .09);
    background: var(--tinta);
    border-radius: calc(var(--S) * .03);
}
/* Sobre fondo oscuro el cuerpo sigue siendo crema y el parpado sigue siendo
   tinta: se lee como un mordisco arriba del ojo, que es lo que es. Lo unico
   que cambia son las patas, que si no se pierden contra el fondo. */
.panel--tinta .ojito-patas span,
.panel--tinta .ojito-patas span::after,
.ojito--invertido .ojito-patas span,
.ojito--invertido .ojito-patas span::after { background: var(--crema); }

/* parpadeo automatico, lo dispara el JS agregando la clase */
.ojito.parpadea { --lid: 1; }

/* Ojito con su frase debajo. Una sola frase por seccion. */
.ojito-bloque { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ojito-frase { max-width: 26ch; line-height: 1.7; }

/* Ojito acompanando el encabezado de una seccion: se va al costado y en
   pantalla chica se pone arriba del texto, centrado. */
.seccion-con-ojito {
    display: flex;
    gap: var(--gap-columna);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.seccion-con-ojito > .encabezado-seccion { margin-bottom: 0; flex: 1 1 420px; }
.seccion-con-ojito > .ojito,
.seccion-con-ojito > .ojito-bloque { flex: 0 0 auto; margin: 0 auto; }

/* --------------------------------------------------------- 15. patrones */

.patron-puntos {
    background-color: var(--crema);
    background-image: radial-gradient(circle at center, var(--acento) 0 3.5px, transparent 3.6px);
    background-size: 26px 26px;
}
.patron-diagonal {
    background-image: repeating-linear-gradient(60deg, var(--acento2) 0 14px, var(--tinta) 14px 34px);
}
.patron-lunares {
    background-color: var(--acento);
    background-image: radial-gradient(circle at center, var(--tinta) 0 11px, transparent 12px);
    background-size: 52px 52px;
}

/* hueco de imagen: rayas diagonales + rotulo mono de que foto va ahi */
.hueco {
    background-color: var(--arena);
    background-image: repeating-linear-gradient(58deg, #D5C9B4 0 11px, var(--arena) 11px 24px);
    border-radius: var(--r-interno);
    display: flex;
    align-items: flex-end;
    padding: 14px;
    min-height: 160px;
}
.hueco span {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mono-claro);
    background: var(--superficie-2);
    padding: 4px 8px;
    border-radius: 6px;
}
.panel--tinta .hueco, .tarjeta-caso .hueco {
    background-color: var(--tinta-3);
    background-image: repeating-linear-gradient(58deg, #2E2721 0 10px, var(--tinta-3) 10px 22px);
}
.panel--tinta .hueco span, .tarjeta-caso .hueco span {
    color: var(--sobre-tinta-3);
    background: transparent;
    padding: 0;
}

/* ----------------------------------------------------------- 16. header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--arena);
    transition: border-color .18s ease;
    border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { border-bottom-color: var(--borde-3); }

.site-header nav {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.nav-enlaces { display: none; align-items: center; gap: 28px; }
.nav-link {
    font-family: var(--cuerpo);
    font-weight: 500;
    font-size: 15px;
    color: var(--texto);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: var(--transicion);
}
.nav-link:hover { color: var(--tinta); border-bottom-color: var(--acento); }

.nav-acciones { display: flex; align-items: center; gap: 12px; }
.nav-acciones .btn { padding: 11px 20px; min-height: 44px; font-size: 15px; }

.menu-toggle {
    width: 46px;
    height: 46px;
    border-radius: var(--r-boton);
    border: 2px solid var(--tinta);
    background: transparent;
    color: var(--tinta);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transicion);
}
.menu-toggle:hover { background: var(--tinta); color: var(--crema); }

@media (min-width: 900px) {
    .nav-enlaces { display: flex; }
    .menu-toggle { display: none; }
}
@media (max-width: 520px) {
    .nav-acciones .btn--primario { display: none; }
}

.mobile-menu {
    border-top: 1px solid var(--borde-3);
    background: var(--arena);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu .envoltorio { padding-top: 12px; padding-bottom: 18px; display: flex; flex-direction: column; gap: 2px; }
.mobile-menu a {
    font-family: var(--cuerpo);
    font-weight: 500;
    font-size: 16px;
    color: var(--texto);
    text-decoration: none;
    padding: 13px 12px;
    border-radius: var(--r-boton);
    transition: var(--transicion);
}
.mobile-menu a:hover { background: var(--superficie-2); color: var(--tinta); }
.mobile-menu .btn { margin-top: 10px; }

/* ----------------------------------------------------------- 17. footer */

.site-footer {
    background: var(--tinta);
    color: var(--crema);
    border-radius: var(--r-seccion);
    margin-top: var(--gap);
    padding: var(--pad-seccion);
}
.site-footer a { color: var(--sobre-tinta); text-decoration: none; transition: var(--transicion); }
.site-footer a:hover { color: var(--crema); }
.site-footer .etiqueta { color: var(--sobre-tinta-3); }
.pie-legal {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--divisor-tinta);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
    font-size: 14px;
    color: var(--sobre-tinta-2);
}

/* -------------------------------------------------- 18. botones flotantes */

.flotantes {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.flotante {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tinta);
    color: var(--crema);
    text-decoration: none;
    border: 2px solid var(--tinta);
    transition: var(--transicion);
}
.flotante:hover { background: var(--acento); border-color: var(--acento); color: var(--tinta); }
.flotante .ico { width: 26px; height: 26px; color: currentColor; }

/* ------------------------------------------------------------ 19. FAQ */

details.faq {
    background: var(--superficie-2);
    border-radius: var(--r-tarjeta);
    padding: 0;
    overflow: hidden;
}
details.faq + details.faq { margin-top: 10px; }
details.faq > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    cursor: pointer;
    list-style: none;
    font-family: var(--titulo);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -.02em;
    line-height: 1.3;
    transition: var(--transicion);
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary:hover { color: var(--acento-texto); }
details.faq .respuesta { padding: 0 26px 24px; font-size: 15px; line-height: 1.6; color: var(--texto); }
details.faq .respuesta p + p { margin-top: 12px; }

/* la flecha es del sistema: dos lineas de 2.5px, sin icono de libreria */
.faq-flecha {
    flex: none;
    width: 14px;
    height: 14px;
    border-right: 2.5px solid var(--tinta);
    border-bottom: 2.5px solid var(--tinta);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease, border-color .18s ease;
}
details.faq[open] > summary .faq-flecha { transform: rotate(-135deg) translate(-3px, -3px); }
details.faq > summary:hover .faq-flecha { border-color: var(--acento); }

/* ---------------------------------------------------- 20. calculadora */

/* los rotulos de los tres campos no miden lo mismo: que los inputs queden
   alineados abajo y no escalonados */
.calc-campos { align-items: end; }

.calc-resultado {
    background: var(--tinta);
    color: var(--crema);
    border-radius: var(--r-tarjeta);
    padding: 30px;
    margin-top: 22px;
    text-align: center;
}
.calc-resultado .dato { color: var(--acento); margin: 12px 0; }
.calc-resultado .etiqueta { color: var(--sobre-tinta-3); }
.calc-resultado .detalle {
    font-size: 15px;
    line-height: 1.5;
    color: var(--sobre-tinta);
    max-width: 46ch;
    margin: 0 auto;
}
.calc-resultado .detalle strong { color: var(--crema); font-weight: 600; }
.calc-resultado.is-hidden { display: none; }

/* --------------------------------------------- 21. senales (checklist) */

.senal {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--superficie-2);
    border-radius: var(--r-interno);
    padding: 18px 20px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--texto);
    transition: var(--transicion);
}
.senal:hover { background: var(--crema); color: var(--tinta); }

/* -------------------------------------------------- 22. industrias */

.puerta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--superficie-2);
    border-radius: var(--r-tarjeta);
    padding: 22px;
    text-decoration: none;
    color: inherit;
    transition: var(--transicion);
}
.puerta:hover { background: var(--tinta); color: var(--crema); }
.puerta:hover .caja-ico { background: var(--crema); }
.puerta:hover .caja-ico .ico { color: var(--tinta); }
.puerta:hover .puerta-dolor { color: var(--sobre-tinta); }
.puerta-rubro {
    font-family: var(--titulo);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.puerta-dolor { font-size: 14px; line-height: 1.45; color: var(--texto-2); transition: var(--transicion); }
.puerta-cta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--acento-texto);
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* ------------------------------------------------------- 23. carrusel */

.marco-captura {
    position: relative;
    border-radius: var(--r-interno);
    overflow: hidden;
    background: var(--tinta-3);
}
.carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s ease;
}
.carousel-slide.active { opacity: 1; position: relative; }
.carousel-slide.fit-full { object-fit: contain; }

.carousel-puntos { display: flex; gap: 8px; justify-content: center; }
.carousel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--borde-3);
    cursor: pointer;
    transition: var(--transicion);
}
.carousel-dot.active { background: var(--acento); }
.panel--tinta .carousel-dot, .tarjeta-caso .carousel-dot { background: var(--divisor-tinta); }
.panel--tinta .carousel-dot.active, .tarjeta-caso .carousel-dot.active { background: var(--acento); }

/* marco de telefono para las capturas moviles */
.phone-frame {
    border: 8px solid var(--tinta);
    border-radius: 26px;
    overflow: hidden;
    background: var(--tinta);
    width: min(210px, 62vw);
}

/* -------------------------------------------------- 24. varios */

.doc-download {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--tinta);
    color: var(--crema);
    border-radius: var(--r-pildora);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transicion);
}
.doc-download:hover { background: var(--acento); color: var(--tinta); }
.doc-download-size { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; opacity: .8; }
@media (max-width: 480px) { .doc-download-size { display: none; } }

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--acento);
    z-index: 70;
    transition: width .1s linear;
}

/* buscador de las preguntas frecuentes */
.buscador-fila { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; }
.buscador-caja { position: relative; flex: 1 1 260px; }
.buscador-caja .ico {
    position: absolute;
    left: 16px;
    top: 50%;
    margin-top: -12px;
    color: var(--mono-claro);
    pointer-events: none;
}
.buscador-input {
    width: 100%;
    font-family: var(--cuerpo);
    font-size: 16px;
    color: var(--tinta);
    background: var(--superficie-2);
    border: 2px solid var(--borde);
    border-radius: var(--r-boton);
    padding: 15px 16px 15px 48px;
    min-height: 48px;
    transition: var(--transicion);
    appearance: none;
    -webkit-appearance: none;
}
.buscador-input::placeholder { color: var(--apagado); }
.buscador-input:focus { border-color: var(--tinta); }

/* indice de las paginas legales. Sin Tailwind el <ol> vuelve a numerar solo,
   y el texto de cada enlace YA trae su numero: quedaba "1. 1. Quien es...". */
.toc ol {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 9px 34px;
}
@media (min-width: 640px) { .toc ol { grid-template-columns: 1fr 1fr; } }
.toc a {
    color: var(--texto);
    text-decoration: none;
    font-size: 15px;
    transition: var(--transicion);
}
.toc a:hover { color: var(--acento-texto); }

.legal { max-width: 68ch; }
.legal h2 { font-weight: 800; font-size: 26px; letter-spacing: -.03em; margin-top: 38px; }
.legal h3 { font-weight: 600; font-size: 20px; letter-spacing: -.02em; margin-top: 26px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--texto); }
.legal p { margin-top: 14px; }
.legal ul { margin-top: 14px; padding-left: 22px; }
.legal li + li { margin-top: 8px; }
.legal strong { color: var(--tinta); font-weight: 600; }
.legal a {
    color: var(--acento-texto);
    text-decoration: none;
    border-bottom: 1.5px solid var(--acento);
    transition: var(--transicion);
}
.legal a:hover { color: var(--tinta); border-bottom-color: var(--tinta); }
.legal h2[id], .legal h3[id] { scroll-margin-top: 100px; }

/* ------------------------------------------- 25. bloques de la home */

/* hero */
.hero-grid {
    display: grid;
    gap: var(--gap-columna);
    align-items: center;
}
@media (min-width: 900px) {
    .hero-grid { grid-template-columns: 1.15fr .85fr; }
}
.hero-ojito {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hero-pruebas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--divisor-tinta);
}
.hero-pruebas span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sobre-tinta-2);
}
.hero-pruebas .punto { margin-top: 0; }

/* ------------------------------------------------- frentes de servicio

   Son un acordeon: 18 tarjetas de golpe eran demasiada informacion junta.
   Se abre uno por vez con el atributo name de <details>, que es nativo y no
   necesita JS. assets/zyntra.js solo pone un respaldo para los navegadores
   que todavia no lo soportan.

   OJO: en la version anterior del sitio esto se colapso y hubo que volver
   atras porque el copy de venta quedaba escondido. Por eso ahora el primer
   frente viene ABIERTO y la cabecera cerrada sigue diciendo de que se trata
   y cuantos servicios tiene. Si se vuelve a tocar, mantener eso. */

.acordeon {
    background: var(--superficie-2);
    border-radius: var(--r-tarjeta);
    overflow: hidden;
}
.acordeon + .acordeon { margin-top: 10px; }

.acordeon > summary {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: 24px 26px;
    cursor: pointer;
    list-style: none;
    transition: var(--transicion);
}
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary:hover { background: var(--crema); }
.acordeon[open] > summary { background: var(--crema); }

.acordeon-texto { flex: 1 1 320px; min-width: 0; }
.acordeon-texto h3 {
    font-family: var(--titulo);
    font-weight: 800;
    font-size: clamp(21px, 2.4vw, 27px);
    letter-spacing: -.03em;
    line-height: 1.15;
    margin-top: 8px;
    transition: var(--transicion);
}
.acordeon > summary:hover .acordeon-texto h3 { color: var(--acento-texto); }
.acordeon-texto p { font-size: 15px; line-height: 1.5; color: var(--texto-2); margin-top: 8px; }

/* el llamador: dice que hay adentro y que hay que apretar */
.acordeon-abrir {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: none;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tinta);
    background: var(--crema);
    border: 1.5px solid var(--borde-3);
    border-radius: var(--r-pildora);
    padding: 11px 16px;
    transition: var(--transicion);
    white-space: nowrap;
}
.acordeon > summary:hover .acordeon-abrir { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.acordeon[open] .acordeon-abrir { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

/* el indicador es el punto del sistema: cerrado es punto, abierto es raya */
.acordeon-signo {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--acento);
    flex: none;
    transition: border-radius .2s ease, height .2s ease;
}
.acordeon[open] .acordeon-signo { border-radius: 3px; height: 4px; }

.acordeon-abrir .abre { display: inline; }
.acordeon-abrir .cierra { display: none; }
.acordeon[open] .acordeon-abrir .abre { display: none; }
.acordeon[open] .acordeon-abrir .cierra { display: inline; }

.acordeon-cuerpo { padding: 0 26px 26px; }

@media (max-width: 620px) {
    .acordeon > summary { flex-wrap: wrap; padding: 22px; }
    .acordeon-cuerpo { padding: 0 22px 22px; }
    .acordeon-texto p { display: none; }   /* en mobile la bajada aprieta de mas */
}

/* --- el mismo acordeon sobre fondo tinta (el portfolio) --- */
.acordeon--oscuro { background: var(--tinta-2); }
.acordeon--oscuro > summary:hover,
.acordeon--oscuro[open] > summary { background: var(--tinta-hover); }
.acordeon--oscuro .acordeon-texto h3 { color: var(--crema); }
.acordeon--oscuro > summary:hover .acordeon-texto h3 { color: var(--acento); }
.acordeon--oscuro .acordeon-texto p { color: var(--sobre-tinta); }
.acordeon--oscuro .acordeon-abrir {
    background: var(--tinta);
    color: var(--crema);
    border-color: var(--divisor-tinta);
}
.acordeon--oscuro > summary:hover .acordeon-abrir,
.acordeon--oscuro[open] .acordeon-abrir {
    background: var(--crema);
    color: var(--tinta);
    border-color: var(--crema);
}

/* Adentro: la captura de un lado y el detalle del otro. Al ser una fila
   entera y no una tarjeta de media grilla, la captura entra mucho mas
   grande, que es el punto de mostrar un portfolio. */
.caso-cuerpo {
    display: grid;
    gap: var(--gap-columna);
    align-items: start;
}
@media (min-width: 900px) {
    .caso-cuerpo { grid-template-columns: 1.1fr .9fr; }
}
.caso-cuerpo .con-sin { border-top-color: var(--divisor-tinta); }
.caso-cuerpo .con-sin span:last-child { color: var(--sobre-tinta); }
.caso-detalle { display: flex; flex-direction: column; gap: 18px; }
.caso-capturas { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.caso-capturas .marco-captura { width: 100%; }
.caso-capturas .phone-frame { width: min(240px, 70vw); }

/* pie de la tarjeta de servicio: los tres enlaces van apilados */
.tarjeta-pie {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.enlace-suave {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: var(--texto-2);
    text-decoration: none;
    transition: var(--transicion);
}
.enlace-suave:hover { color: var(--acento-texto); }
.enlace-suave .ico { color: currentColor; }

/* franja de datos objetivos */
.franja {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 26px var(--gap-columna);
}
.franja-num {
    font-family: var(--titulo);
    font-weight: 800;
    font-size: clamp(30px, 4vw, 44px);
    line-height: .9;
    letter-spacing: -.05em;
    color: var(--acento);
    margin-bottom: 10px;
}

/* zyntra causas: tarjeta dentro del panel verde */
.tarjeta--verde-2 { background: #275C43; color: var(--crema); }
.tarjeta--verde-2 h4 { color: var(--crema); }
.paso-num {
    font-family: var(--titulo);
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--sobre-verde);
}
.panel--verde .btn--contorno { color: var(--crema); border-color: var(--sobre-verde); }
.panel--verde .btn--contorno:hover { background: var(--crema); color: var(--acento2); border-color: var(--crema); }
.panel--verde .tarjeta--crema .btn--contorno { color: var(--tinta); border-color: var(--tinta); }
.panel--verde .tarjeta--crema .btn--contorno:hover { background: var(--tinta); color: var(--crema); }
.panel--verde .caja-ico--crema .ico { color: var(--acento2); }
.panel--verde .cuerpo, .panel--verde .cuerpo-chico { color: var(--sobre-verde-2); }
.panel--verde .tarjeta--crema .cuerpo { color: var(--texto); }

/* migas de las paginas generadas */
.migas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 30px;
}
.migas a { color: var(--sobre-tinta-3); text-decoration: none; transition: var(--transicion); }
.migas a:hover { color: var(--acento); }
.migas a::after { content: "/"; margin-left: 10px; color: var(--divisor-tinta); }
.migas [aria-current] { color: var(--sobre-tinta); }

.portada { max-width: 780px; }

/* el bloque CTA usado como panel entero necesita el padding de seccion,
   no el de tarjeta */
.panel.bloque-cta { padding: var(--pad-seccion); }
.panel.bloque-cta h2 { font-size: clamp(26px, 3.4vw, 38px); max-width: 20ch; }

/* contacto */
.contacto-grid { display: grid; gap: var(--gap-columna); align-items: start; }
@media (min-width: 900px) { .contacto-grid { grid-template-columns: 1fr 1fr; } }
.contacto-canales { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.contacto-canales a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--crema);
    text-decoration: none;
    transition: var(--transicion);
}
.contacto-canales a:hover { color: var(--acento); }
.contacto-canales .ico { width: 20px; height: 20px; color: var(--acento); }
.contacto-canales a:hover .ico { color: var(--acento); }
/* trampa para bots: invisible para la gente, obligatoria para FormSubmit */
.miel { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* footer */
.footer-grid { display: grid; gap: var(--gap-columna); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer-enlaces { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; font-size: 14px; }
.site-footer .flotante { border-color: var(--divisor-tinta); background: var(--tinta-2); }
.site-footer .flotante .ico { width: 20px; height: 20px; }
.flotante--wa { background: var(--acento2); border-color: var(--acento2); }

/* ------------------------------------------------------ 26. animacion */

/* Unica animacion de entrada del sistema: aparecer sin desplazamiento largo.
   Nada de scale ni de rotaciones: el sistema no eleva ni deforma. */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ------------------------------------------- 27. correcciones de contraste
   Todo lo de aca sale de auditar el DOM real contra WCAG AA (4.5:1 en texto
   normal, 3:1 en texto grande). Son casos donde una regla general dejaba un
   texto por debajo del minimo. Si tocas colores, volve a auditar. */

/* El eyebrow mono sobre tinta: la regla de arriba solo cubria .sobre-tinta,
   pero varios paneles son .panel--tinta a secas. 3,39:1 -> 4,77:1 */
.panel--tinta .etiqueta,
.tarjeta--tinta .etiqueta,
.tarjeta--tinta-2 .etiqueta,
.tarjeta-caso .etiqueta { color: var(--sobre-tinta-3); }

/* Los rotulos de los campos dentro del formulario oscuro. 3,12:1 -> 4,77:1 */
.panel--tinta .campo > label,
.tarjeta--tinta-2 .campo > label { color: var(--sobre-tinta-3); }

/* Las vinetas de la tarjeta de caso quedaban en el gris de fondo claro
   sobre tinta: 1,87:1, practicamente invisibles. */
.tarjeta-caso .con-sin { border-top-color: var(--divisor-tinta); }
.tarjeta-caso .con-sin span:last-child { color: var(--sobre-tinta); }
.tarjeta-caso .con-sin strong { color: var(--crema); }

/* Sobre tinta el naranja oscuro no se lee (3,45:1). Ahi va el naranja pleno,
   que da 5,01:1. Es al reves que sobre crema. */
.panel--tinta .btn--enlace,
.tarjeta--tinta .btn--enlace,
.tarjeta-caso .btn--enlace,
.panel--tinta .enlace,
.panel--tinta .puerta-cta { color: var(--acento); }

/* El boton del menu mobile: .mobile-menu a le ganaba a .btn--primario por
   especificidad y le dejaba el texto gris sobre naranja. 2,67:1 -> 5,01:1 */
.mobile-menu a.btn--primario {
    color: var(--tinta);
    font-weight: 600;
    justify-content: center;
}
.mobile-menu a.btn--primario:hover { background: var(--acento-hover); color: var(--crema); }

/* Una tarjeta CLARA dentro de un panel tinta: las reglas de arriba pintan
   para fondo oscuro y ahi adentro dejan el texto ilegible. Estas las
   devuelven al color de fondo claro. Va al final para ganar por orden. */
.panel--tinta .tarjeta .etiqueta,
.panel--tinta details.faq .etiqueta { color: var(--mono-claro); }
.panel--tinta .tarjeta .enlace,
.panel--tinta .tarjeta .btn--enlace,
.panel--tinta .tarjeta .puerta-cta { color: var(--acento-texto); }

/* La pregunta de un <details> no tenia color propio y heredaba el crema del
   panel oscuro, sobre una tarjeta clara: 1,09:1. Invisible. */
details.faq > summary { color: var(--tinta); }
details.faq .respuesta p { color: var(--texto); }

/* .tarjeta p le ganaba a .etiqueta y le subia el cuerpo de 11 a 15px */
.tarjeta p.etiqueta { font-size: 11px; margin-top: 0; color: var(--mono-claro); }
.tarjeta p.etiqueta--chica { font-size: 10px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    .ojito.parpadea { --lid: .16; }
    .ojito-iris { transform: none !important; }
}