/* Hallmark · macrostructure: Split Studio · tone: utilitarian-warm · anchor hue: navy 272
 * theme: custom · vibe: "suizo, cercano, piezas de colores con grano"
 * paper oklch(98.6% 0.004 255) · ink oklch(23% 0.07 272) · signal oklch(61% 0.22 33)
 * type: Schibsted Grotesk (una sola grotesca, pesos 400–900: la decisión suiza) · axes: light / grotesk-sans / warm
 * nav: N9 edge-aligned · footer: Ft5 statement · enrichment: E5 hand-built SVG
 * pre-emit critique: P4 H5 E4 S5 R4 V4
 */

/* Fuente alojada en el tema (OFL, ver fonts/OFL.txt): sin CDN externo. */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/schibsted-grotesk-latin-wght-normal.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: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url("../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------------------------------------------------------------------
   Tokens. Todo color, tipografía, espacio y movimiento sale de aquí.
   --------------------------------------------------------------------------- */
:root {
    /* Color */
    --color-paper:        oklch(98.6% 0.004 255);
    --color-paper-2:      oklch(95.4% 0.008 255);
    --color-ink:          oklch(23% 0.07 272);      /* azul marino del logo */
    --color-ink-2:        oklch(40% 0.04 270);
    --color-ink-3:        oklch(52% 0.03 268);
    --color-rule:         oklch(23% 0.07 272 / 0.14);
    --color-rule-strong:  var(--color-ink);
    --color-signal:       oklch(61% 0.22 33);       /* rojo: sólo acciones */
    --color-signal-hover: oklch(54% 0.21 33);
    --color-on-signal:    oklch(99% 0.005 60);
    --color-on-ink:       oklch(97% 0.01 255);
    --color-on-ink-2:     oklch(82% 0.03 262);
    --color-sky-1:        oklch(74% 0.11 250);      /* fondo de la lámina (referencia) */
    --color-sky-2:        oklch(89% 0.055 228);
    --color-shadow:       oklch(35% 0.08 265 / 0.14);
    --color-ok:           oklch(52% 0.12 155);
    --color-error:        oklch(55% 0.2 25);
    --color-focus:        oklch(61% 0.22 33);
    --grid-line:          oklch(23% 0.07 272 / 0.045);

    /* Tipografía (ratio 1.25) */
    --font-display: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-body:    "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
    --text-xs:   0.8125rem;
    --text-sm:   0.9375rem;
    --text-base: 1.0625rem;
    --text-lg:   1.25rem;
    --text-xl:   1.5625rem;
    --text-2xl:  clamp(1.75rem, 1.2rem + 1.8vw, 2.375rem);
    --text-display: clamp(2.375rem, 1.3rem + 3.6vw, 3.75rem);
    --text-colossal: clamp(5rem, 2rem + 16vw, 15rem);

    /* Espacio (4 pt) */
    --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
    --space-5: 1.5rem;   --space-6: 2rem;    --space-7: 3rem;    --space-8: 4rem;
    --space-9: 6rem;     --space-10: 8rem;
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --max: 77.5rem;

    /* Bordes y movimiento */
    --rule: 2px;
    --radius: 2px;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-1: 150ms;
    --dur-2: 220ms;

    /* Grano (ruido fractal en SVG), el mismo de las ilustraciones */
    --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    font-feature-settings: "ss01", "tnum" 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; font-style: normal; margin: 0; letter-spacing: -0.022em; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
a { color: inherit; }
::selection { background: color-mix(in oklab, var(--color-signal) 28%, transparent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.contenedor { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: var(--space-4); top: -4rem; z-index: 20; padding: var(--space-3) var(--space-4); background: var(--color-ink); color: var(--color-on-ink); font-weight: 600; }
.saltar:focus { top: var(--space-4); }

/* ---------------------------------------------------------------------------
   Botones y campos
   --------------------------------------------------------------------------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 3.25rem; padding: 0 var(--space-5);
    border: var(--rule) solid var(--color-signal); border-radius: var(--radius);
    background: var(--color-signal); color: var(--color-on-signal);
    font: 600 var(--text-base)/1 var(--font-body); letter-spacing: 0.005em; white-space: nowrap;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--dur-1) linear, border-color var(--dur-1) linear, color var(--dur-1) linear;
}
.boton:hover { background: var(--color-ink); border-color: var(--color-ink); }
.boton:active { transform: translateY(1px); }
.boton:disabled, .boton[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.boton-chico { min-height: 2.5rem; padding: 0 var(--space-4); font-size: var(--text-sm); }
.boton-grande { min-height: 3.5rem; width: 100%; font-size: var(--text-lg); }

.campo {
    width: 100%; min-width: 0; min-height: 3.25rem;
    padding: var(--space-3) var(--space-4);
    border: var(--rule) solid var(--color-ink); border-radius: var(--radius);
    background: var(--color-paper); color: var(--color-ink);
    font: 400 var(--text-base)/1.3 var(--font-body);
    transition: border-color var(--dur-1) linear;
}
.campo::placeholder { color: var(--color-ink-3); }
.campo:focus { outline: none; border-color: var(--color-signal); }
.campo:focus-visible { outline: none; }
select.campo { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.3rem) 50%, calc(100% - 0.95rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.nota { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-3); }
.nota a { color: var(--color-ink); font-weight: 600; }
.form-estado { font-size: var(--text-sm); font-weight: 500; min-height: 0; }
.form-estado:empty { display: none; }
.form-estado[data-tono="error"] { color: var(--color-error); }
.form-estado[data-tono="ok"] { color: var(--color-ok); }

/* ---------------------------------------------------------------------------
   Barra (N9: marca a un borde, acción al otro)
   --------------------------------------------------------------------------- */
.barra { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--color-paper) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: var(--rule) solid var(--color-rule-strong); }
.barra-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 4.25rem; }
.barra-marca { text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-3); }
.barra-lema { padding-left: var(--space-3); border-left: 1px solid var(--color-rule); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); line-height: 1.2; white-space: nowrap; }
.barra-nav { display: flex; align-items: center; gap: var(--space-5); }
.barra-link { font-weight: 500; font-size: var(--text-sm); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-block: var(--space-1); transition: background-size var(--dur-2) var(--ease-out); }
.barra-link:hover { background-size: 100% 1.5px; }
@media (max-width: 34rem) { .barra-link, .barra-lema { display: none; } }

.logo { display: inline-flex; align-items: center; color: var(--color-ink); line-height: 1; }
.logo-svg { display: block; height: 1.75rem !important; width: auto !important; max-width: none; }

/* ---------------------------------------------------------------------------
   Portada
   --------------------------------------------------------------------------- */
.portada { border-bottom: var(--rule) solid var(--color-rule-strong); }
.portada-grilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); align-items: stretch; }
.portada-texto { grid-column: 1 / span 7; padding-block: clamp(var(--space-7), 8vw, var(--space-10)) var(--space-7); align-self: center; }
.portada h1 { font-size: var(--text-display); line-height: 1.02; max-width: 17ch; }
.sello { display: inline-block; margin-bottom: var(--space-5); padding: var(--space-1) var(--space-3); border: var(--rule) solid var(--color-ink); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; }
.bajada { margin-top: var(--space-5); font-size: var(--text-lg); line-height: 1.55; color: var(--color-ink-2); max-width: 44ch; }

.form-corto { margin-top: var(--space-7); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); max-width: 32rem; }
.form-corto .form-estado { grid-column: 1 / -1; }

.portada-figura { grid-column: 8 / span 5; margin: 0; position: relative; border-left: var(--rule) solid var(--color-rule-strong); }
.lamina {
    position: relative; height: 100%; min-height: 26rem; display: grid; place-items: end center;
    padding: var(--space-6) var(--space-5) var(--space-4);
    background: linear-gradient(170deg, var(--color-sky-1), var(--color-sky-2));
    isolation: isolate; overflow: hidden;
}
.lamina::after { content: ""; position: absolute; inset: 0; background-image: var(--grano); mix-blend-mode: overlay; opacity: 0.8; pointer-events: none; z-index: 1; }

.franja { list-style: none; margin: 0 auto; padding-block: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule) solid var(--color-rule-strong); }
.franja li { padding: var(--space-4) var(--space-4) var(--space-4) 0; font-size: var(--text-sm); font-weight: 500; }
.franja li + li { padding-left: var(--space-4); border-left: 1px solid var(--color-rule); }


/* ---------------------------------------------------------------------------
   Videos: un visor vertical (4:5) y la lista de recorridos
   --------------------------------------------------------------------------- */
.videos { padding-block: clamp(var(--space-8), 8vw, var(--space-9)); border-bottom: var(--rule) solid var(--color-rule-strong); }
.videos-grilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-6); align-items: start; }
.visor { grid-column: 1 / span 5; position: sticky; top: 6rem; aspect-ratio: 4 / 5; background: var(--color-ink); border: var(--rule) solid var(--color-rule-strong); }
.visor video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--color-ink); }
.videos-texto { grid-column: 7 / span 6; }
.videos-texto h2 { font-size: var(--text-2xl); line-height: 1.08; }
.videos-texto > p { margin-top: var(--space-4); color: var(--color-ink-2); max-width: 46ch; }
.lista-videos { list-style: none; margin: var(--space-6) 0 0; padding: 0; border-top: var(--rule) solid var(--color-rule-strong); }
.lista-videos li { border-bottom: 1px solid var(--color-rule); }
.lista-videos a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-4) 0; text-decoration: none; }
.lista-videos-n { grid-row: span 2; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; background: var(--color-ink); color: var(--color-on-ink); font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color var(--dur-1) linear; }
.lista-videos strong { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.25; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; justify-self: start; transition: background-size var(--dur-2) var(--ease-out); }
.lista-videos-d { color: var(--color-ink-2); font-size: var(--text-sm); margin-top: var(--space-1); }
.lista-videos a:hover strong { background-size: 100% 1.5px; }
.lista-videos a:hover .lista-videos-n, .lista-videos a[aria-current] .lista-videos-n { background: var(--color-signal); }

/* ---------------------------------------------------------------------------
   Piezas: grilla visible de fondo, texto fijo a la izquierda
   --------------------------------------------------------------------------- */
.piezas {
    background-color: var(--color-paper-2);
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 24px 24px;
    border-bottom: var(--rule) solid var(--color-rule-strong);
}
.piezas-grilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); padding-block: clamp(var(--space-8), 9vw, var(--space-10)); }
.piezas-texto { grid-column: 1 / span 5; align-self: start; position: sticky; top: 6rem; }
.piezas-texto h2, .cambio h2, .quien-grilla h2, .invitacion h2 { font-size: var(--text-2xl); line-height: 1.08; }
.piezas-texto > p { margin-top: var(--space-4); color: var(--color-ink-2); max-width: 42ch; }
.piezas-figura { grid-column: 7 / span 6; margin: 0; }

.leyenda { list-style: none; margin: var(--space-6) 0 0; padding: 0; border-top: var(--rule) solid var(--color-rule-strong); counter-reset: none; }
.leyenda li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-rule); }
.leyenda-n { grid-row: span 2; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; background: var(--color-ink); color: var(--color-on-ink); font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.leyenda strong { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.25; }
.leyenda li > span:last-child { color: var(--color-ink-2); font-size: var(--text-sm); margin-top: var(--space-1); }

/* ---------------------------------------------------------------------------
   Lo que cambia: tabla de dos columnas
   --------------------------------------------------------------------------- */
.cambio { padding-block: clamp(var(--space-8), 9vw, var(--space-10)); border-bottom: var(--rule) solid var(--color-rule-strong); }
.tabla-cambio { width: 100%; margin-top: var(--space-7); border-collapse: collapse; table-layout: fixed; }
.tabla-cambio th { text-align: left; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); padding: 0 var(--space-5) var(--space-3) 0; border-bottom: var(--rule) solid var(--color-rule-strong); }
.tabla-cambio th:last-child { color: var(--color-signal-hover); }
.tabla-cambio td { vertical-align: top; padding: var(--space-5) var(--space-6) var(--space-5) 0; border-bottom: 1px solid var(--color-rule); font-size: var(--text-lg); line-height: 1.45; }
.tabla-cambio td:first-child { color: var(--color-ink-3); }
.tabla-cambio td:last-child { font-weight: 500; }

/* ---------------------------------------------------------------------------
   Producto: dípticos que alternan de lado
   --------------------------------------------------------------------------- */
.producto { padding-block: clamp(var(--space-8), 9vw, var(--space-10)); border-bottom: var(--rule) solid var(--color-rule-strong); }
.diptico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-5); align-items: center; }
.diptico + .diptico { margin-top: clamp(var(--space-8), 8vw, var(--space-10)); }
.diptico-figura { grid-column: 1 / span 8; margin: 0; }
.diptico-texto { grid-column: 9 / span 4; }
.diptico-invertido .diptico-texto { grid-column: 1 / span 4; grid-row: 1; }
.diptico-invertido .diptico-figura { grid-column: 5 / span 8; grid-row: 1; }
.diptico-figura img { width: 100%; border: 1px solid var(--color-rule); }
.diptico-figura figcaption { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-ink-3); }
.diptico-texto h3 { font-size: var(--text-xl); line-height: 1.15; }
.diptico-texto p { margin-top: var(--space-3); color: var(--color-ink-2); }

/* ---------------------------------------------------------------------------
   Para quién
   --------------------------------------------------------------------------- */
.para-quien { padding-block: clamp(var(--space-8), 8vw, var(--space-9)); border-bottom: var(--rule) solid var(--color-rule-strong); }
.quien-grilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-5); }
.quien-grilla h2 { grid-column: 1 / span 6; }
.quien-texto { grid-column: 7 / span 6; font-size: var(--text-lg); line-height: 1.55; }
.quien-texto p + p { margin-top: var(--space-4); color: var(--color-ink-3); }

/* ---------------------------------------------------------------------------
   Quién está detrás
   --------------------------------------------------------------------------- */
.autor { padding-block: clamp(var(--space-8), 8vw, var(--space-9)); border-bottom: var(--rule) solid var(--color-rule-strong); }
.autor-grilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-5); align-items: start; }
.autor-grilla h2 { grid-column: 1 / span 5; grid-row: 1; font-size: var(--text-2xl); line-height: 1.08; }
.autor-foto { grid-column: 1 / span 3; grid-row: 2; margin: 0; }
.autor-foto[hidden] { display: none; }
.autor-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--color-rule); }
.autor-texto { grid-column: 7 / span 6; grid-row: 1 / span 2; font-size: var(--text-lg); line-height: 1.55; }
.autor-texto p + p { margin-top: var(--space-4); }
.autor-texto .autor-firma { font-size: var(--text-base); color: var(--color-ink-2); padding-top: var(--space-4); border-top: 1px solid var(--color-rule); }
.autor-firma strong { color: var(--color-ink); }
.autor-firma a { color: var(--color-signal-hover); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Preguntas frecuentes
   --------------------------------------------------------------------------- */
.preguntas { padding-block: clamp(var(--space-8), 8vw, var(--space-9)); border-bottom: var(--rule) solid var(--color-rule-strong); background: var(--color-paper-2); }
.faq-grilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-5); align-items: start; }
.faq-grilla h2 { grid-column: 1 / span 5; font-size: var(--text-2xl); line-height: 1.08; }
.faq-lista { grid-column: 7 / span 6; border-top: var(--rule) solid var(--color-rule-strong); }
.faq-item { border-bottom: 1px solid var(--color-rule); }
.faq-item summary { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-4) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.3; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-weight: 500; font-size: var(--text-xl); line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding-bottom: var(--space-5); color: var(--color-ink-2); max-width: 52ch; }

/* ---------------------------------------------------------------------------
   Invitación: bloque en azul marino
   --------------------------------------------------------------------------- */
.invitacion { background: var(--color-ink); color: var(--color-on-ink); padding-block: clamp(var(--space-8), 9vw, var(--space-10)); }
.invitacion-grilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-6); }
.invitacion-texto { grid-column: 1 / span 5; }
.invitacion-texto p { margin-top: var(--space-4); color: var(--color-on-ink-2); max-width: 40ch; }
.form-largo { grid-column: 7 / span 6; display: grid; gap: var(--space-5); }
.form-largo .campo { background: transparent; color: var(--color-on-ink); border-color: color-mix(in oklab, var(--color-on-ink) 55%, transparent); }
.form-largo .campo::placeholder { color: var(--color-on-ink-2); }
.form-largo .campo:focus { border-color: var(--color-signal); }
.form-largo select.campo option { color: var(--color-ink); }
.form-largo .boton:hover { background: var(--color-on-ink); border-color: var(--color-on-ink); color: var(--color-ink); }
.form-largo .nota, .form-largo .opcional { color: var(--color-on-ink-2); }
.form-largo .form-estado[data-tono="error"] { color: oklch(78% 0.13 30); }
.form-largo .form-estado[data-tono="ok"] { color: oklch(85% 0.12 155); }
.fila-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.campo-grupo { display: grid; gap: var(--space-2); min-width: 0; border: 0; padding: 0; margin: 0; }
.campo-grupo label, .campo-grupo legend { font-size: var(--text-sm); font-weight: 600; padding: 0; }
.campo-grupo legend { margin-bottom: var(--space-2); }
.opcional { font-weight: 400; margin-left: var(--space-1); }
.campo-listo { font-weight: 600; margin-left: var(--space-2); color: oklch(85% 0.12 155); }
.campo-listo[hidden] { display: none; }
.form-largo .campo.lleno { border-color: oklch(85% 0.12 155); background: color-mix(in oklab, oklch(85% 0.12 155) 10%, transparent); }

.segmentos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--rule) solid color-mix(in oklab, var(--color-on-ink) 55%, transparent); border-radius: var(--radius); }
.segmentos label { position: relative; display: block; cursor: pointer; font-weight: 500; }
.segmentos label + label { border-left: 1px solid color-mix(in oklab, var(--color-on-ink) 30%, transparent); }
.segmentos input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmentos span { display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: var(--space-2); text-align: center; font-size: var(--text-sm); line-height: 1.2; transition: background-color var(--dur-1) linear, color var(--dur-1) linear; }
.segmentos label:hover span { background: color-mix(in oklab, var(--color-on-ink) 8%, transparent); }
.segmentos input:checked + span { background: var(--color-on-ink); color: var(--color-ink); }
.segmentos input:focus-visible + span { outline: 2px solid var(--color-signal); outline-offset: -4px; }

.gracias { grid-column: 7 / span 6; align-self: center; border-top: var(--rule) solid var(--color-on-ink); padding-top: var(--space-5); }
.gracias strong { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; }
.gracias p { margin-top: var(--space-3); color: var(--color-on-ink-2); }
.portada .gracias { grid-column: auto; margin-top: var(--space-7); max-width: 32rem; border-top-color: var(--color-ink); }
.portada .gracias p { color: var(--color-ink-2); }

/* ---------------------------------------------------------------------------
   Cierre (Ft5: declaración)
   --------------------------------------------------------------------------- */
.cierre { padding-block: var(--space-8) var(--space-6); overflow: hidden; }
.cierre-marca { font-family: var(--font-display); font-weight: 800; font-size: var(--text-colossal); line-height: 0.8; letter-spacing: -0.05em; color: var(--color-ink); margin-left: -0.04em; }
.cierre-linea { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--rule) solid var(--color-rule-strong); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--text-sm); color: var(--color-ink-2); }
.cierre-linea span:first-child { font-weight: 600; color: var(--color-ink); }
.cierre-linea a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 60rem) {
    /* Una sola columna: 12 columnas con sus separaciones no caben en 320 px */
    .portada-grilla, .videos-grilla, .piezas-grilla, .diptico, .quien-grilla, .autor-grilla, .faq-grilla, .invitacion-grilla { grid-template-columns: minmax(0, 1fr); }
    .visor { grid-column: 1 / -1; position: static; width: min(100%, 26rem); margin-inline: auto; }
    .videos-texto, .autor-grilla h2, .autor-texto, .faq-grilla h2, .faq-lista { grid-column: 1 / -1; grid-row: auto; }
    .autor-foto { grid-column: 1 / -1; grid-row: auto; width: min(100%, 14rem); }
    .portada-texto, .portada-figura { grid-column: 1 / -1; }
    .portada-figura { border-left: 0; border-top: var(--rule) solid var(--color-rule-strong); margin-inline: calc(var(--gutter) * -1); }
    .lamina { min-height: 22rem; }
    .piezas-texto, .piezas-figura { grid-column: 1 / -1; position: static; }
    .piezas-figura { order: -1; margin-bottom: var(--space-6); }
    .diptico-figura, .diptico-texto, .diptico-invertido .diptico-texto, .diptico-invertido .diptico-figura { grid-column: 1 / -1; grid-row: auto; }
    .diptico-invertido .diptico-figura { order: -1; }
    .quien-grilla h2, .quien-texto { grid-column: 1 / -1; }
    .invitacion-texto, .form-largo, .gracias { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
    .form-corto { grid-template-columns: minmax(0, 1fr); }
    .form-corto .boton { width: 100%; }
    .franja { grid-template-columns: minmax(0, 1fr); }
    .franja li, .franja li + li { padding: var(--space-3) 0; border-left: 0; }
    .franja li + li { border-top: 1px solid var(--color-rule); }
    .tabla-cambio thead { display: none; }
    .tabla-cambio, .tabla-cambio tbody, .tabla-cambio tr, .tabla-cambio td { display: block; width: 100%; }
    .tabla-cambio tr { padding: var(--space-5) 0; border-bottom: 1px solid var(--color-rule); }
    .tabla-cambio td { border: 0; padding: 0; font-size: var(--text-base); }
    .tabla-cambio td:first-child::before { content: "Hoy · "; font-weight: 600; }
    .tabla-cambio td:last-child { margin-top: var(--space-2); }
    .tabla-cambio td:last-child::before { content: "Con Prisma · "; font-weight: 700; color: var(--color-signal-hover); }
    .fila-2 { grid-template-columns: minmax(0, 1fr); }
    .segmentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .segmentos label:nth-child(3) { border-left: 0; }
    .segmentos label:nth-child(n+3) { border-top: 1px solid color-mix(in oklab, var(--color-on-ink) 30%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .boton, .campo, .barra-link, .segmentos span, .lista-videos strong, .lista-videos-n { transition: none; }
}

/* ---------------------------------------------------------------------------
   Páginas de texto (página, entrada, búsqueda, errores)
   --------------------------------------------------------------------------- */
.texto { padding-block: clamp(var(--space-8), 10vw, var(--space-10)); border-bottom: var(--rule) solid var(--color-rule-strong); }
.texto-grilla { max-width: 48rem; margin-inline: 0; }
.texto h1 { font-size: var(--text-display); line-height: 1.04; }
.texto .bajada { margin-top: var(--space-4); }
.prosa { margin-top: var(--space-6); font-size: var(--text-lg); line-height: 1.65; }
.prosa > * + * { margin-top: var(--space-4); }
.prosa h2, .prosa h3 { margin-top: var(--space-7); font-size: var(--text-xl); }
.prosa a { color: var(--color-signal-hover); }
.texto-volver { margin-top: var(--space-7); }