/*
 * sitio.css — Sitio público Psico-IA
 *
 * Reutiliza los design tokens del sistema (public_html/css-ia/base.css).
 * Aquí NO se redefinen colores ni tipografías del sistema: solo se añaden
 * los tokens propios del sitio público (escala tipográfica editorial y ritmo
 * vertical de secciones) y los componentes de página.
 */

/* ═══════════════════════════════════════════════
   TOKENS DEL SISTEMA (espejo de css-ia/base.css)
   Se replican aquí porque el prototipo se sirve
   como estático fuera del webroot del sistema.
═══════════════════════════════════════════════ */
:root {
    /* ── Colores del logotipo (login_cubo_css.tpl) ── */
    --logo-blue:      #0286dc;
    --logo-blue-dark: #0269ad;
    --logo-blue-deep: #0a2f4f;
    --logo-green:     rgb(1 217 49);
    --logo-green-dk:  #01b32a;

    /* Blues — el azul de marca es ahora el del logotipo */
    --ht-blue:        var(--logo-blue);
    --ht-blue-mid:    #1f97ea;
    --ht-blue-light:  #4fb0f2;
    --ht-blue-pale:   #e4f2fd;
    --ht-blue-xpale:  #f0f8ff;

    /* Neutrals */
    --ht-bg:          #f2f5f9;
    --ht-white:       #ffffff;
    --ht-border:      #dde3ed;
    --ht-text:        #1e2d45;
    --ht-text-mid:    #3d5068;
    --ht-text-muted:  #7a8fa6;

    /* Semantic */
    --ht-green:       #27ae60;
    --ht-teal:        #1abc9c;
    --ht-orange:      #e67e22;
    --ht-red:         #e74c3c;
    --ht-purple:      #8e44ad;

    /* Acento modular */
    --mod-accent:     #e8734a;
    --mod-accent-bg:  #fdf0eb;

    /* Shape */
    --radius:         10px;
    --radius-lg:      14px;

    /* Shadows */
    --shadow-sm:      0 1px 4px rgba(30,45,69,.07);
    --shadow-md:      0 3px 12px rgba(30,45,69,.10);
    --shadow-lg:      0 8px 28px rgba(30,45,69,.14);

    /* Motion */
    --transition:     200ms cubic-bezier(.4,0,.2,1);

    /* ── Tokens propios del sitio público ── */
    --site-header-h:  68px;
    --site-max:       1440px;
    --site-gutter:    40px;

    /* Escala tipográfica editorial */
    --fs-display:     clamp(38px, 5.2vw, 68px);
    --fs-h1:          clamp(32px, 3.6vw, 48px);
    --fs-h2:          clamp(26px, 2.6vw, 36px);
    --fs-h3:          20px;
    --fs-lead:        clamp(17px, 1.4vw, 20px);
    --fs-body:        16px;
    --fs-small:       14px;
    --fs-micro:       13px;

    /* Ritmo vertical */
    --sec-pad:        clamp(64px, 8vw, 112px);
}

/* ═══════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    background: var(--ht-white);
    color: var(--ht-text);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

/* ═══════════════════════════════════════════════
   TIPOGRAFÍA
═══════════════════════════════════════════════ */
h1, h2, h3, h4 { line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }

.t-display {
    font-family: 'DM Serif Display', Georgia, serif;
    font-weight: 400;
    font-size: var(--fs-display);
    line-height: 1.05;
    letter-spacing: -.02em;
}
.t-h1   { font-size: var(--fs-h1); }
.t-h2   { font-size: var(--fs-h2); }
.t-h3   { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; }
.t-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ht-text-mid); }
.t-eyebrow {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ht-blue);
}
.t-muted { color: var(--ht-text-muted); }
.t-note  { font-size: var(--fs-small); color: var(--ht-text-muted); line-height: 1.6; }

/* ═══════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════ */
.wrap {
    max-width: var(--site-max);
    margin-inline: auto;
    padding-inline: var(--site-gutter);
}
.wrap--narrow { max-width: 900px; }

.section       { position: relative; overflow: hidden; padding-block: var(--sec-pad); scroll-margin-top: var(--site-header-h); }
.section--tight{ padding-block: clamp(48px, 5vw, 72px); }
.section--pale { background: var(--ht-bg); }
.section--blue { background: var(--ht-blue-xpale); }

.section-head        { max-width: 860px; margin-bottom: 48px; }
.section-head > * + *{ margin-top: 16px; }

/* ── Marca de agua de sección — réplica de .page-bg-deco (layout.css) ── */
.section-deco {
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: clamp(180px, 20vw, 360px);
    height: clamp(180px, 20vw, 360px);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    color: var(--sec-icon, var(--ht-blue));
    opacity: .07;
}
/* Variante webfont Tabler — mismas medidas que .page-bg-deco del sistema */
i.section-deco {
    width: auto;
    height: auto;
    font-size: clamp(180px, 20vw, 360px);
    line-height: 1;
}
.section-deco svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* El contenido de la sección va por encima de la marca de agua */
.section > .wrap { position: relative; z-index: 1; }


.grid      { display: grid; gap: 24px; }
.grid--2   { grid-template-columns: repeat(2, 1fr); }
.grid--3   { grid-template-columns: repeat(3, 1fr); }
.grid--4   { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }

.stack > * + * { margin-top: 20px; }

/* ═══════════════════════════════════════════════
   BOTONES
═══════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.btn--primary {
    background: var(--ht-blue);
    color: var(--ht-white);
    box-shadow: 0 2px 10px rgba(2,134,220,.28);
}
.btn--primary:hover {
    background: var(--ht-blue-mid);
    box-shadow: 0 4px 18px rgba(2,134,220,.42);
    transform: translateY(-1px);
}
.btn--ghost {
    background: transparent;
    color: var(--ht-text);
    border-color: var(--ht-border);
}
.btn--ghost:hover { border-color: var(--ht-blue); color: var(--ht-blue); background: var(--ht-blue-pale); }

.btn--light {
    background: var(--ht-white);
    color: var(--ht-text);
}
.btn--light:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn--onblue {
    background: transparent;
    color: var(--ht-white);
    border-color: rgba(255,255,255,.45);
}
.btn--onblue:hover { background: rgba(255,255,255,.12); border-color: var(--ht-white); }

.btn--sm { padding: 9px 18px; font-size: var(--fs-small); }

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--site-header-h);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ht-border);
}
.site-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 40px;
}
.brand       { display: flex; align-items: center; flex-shrink: 0; }
.brand img   { height: 38px; width: auto; }
.brand--footer img { height: 42px; }
.brand--light img  { filter: brightness(0) invert(1); }

.nav       { display: flex; gap: 30px; margin-right: auto; }
.nav a     { font-size: 15px; color: var(--ht-text-mid); transition: color var(--transition); }
.nav a:hover, .nav a.is-active { color: var(--ht-blue); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--ht-text); }

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--logo-blue-deep) 0%, var(--logo-blue-dark) 52%, var(--logo-blue) 100%);
    color: var(--ht-white);
    padding-block: clamp(64px, 8vw, 116px);
}
.hero::after {
    content: "";
    position: absolute;
    inset: auto -12% -55% auto;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(1,217,49,.16) 0%, transparent 66%);
    pointer-events: none;
}
/* Dos columnas: texto | cubo 3D */
.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}
.hero .t-display { color: var(--ht-white); }
.hero__lead {
    margin-top: 24px;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: rgba(255,255,255,.82);
}
.hero__actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

.hero__trust {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,.18);
    font-size: var(--fs-small);
    color: rgba(255,255,255,.72);
}

/* ═══════════════════════════════════════════════
   CUBO 3D — portado de login_cubo_css.tpl + ii-cubo.tpl
═══════════════════════════════════════════════ */
.hero__cube {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
}
/* Halo luminoso detrás del cubo */
.hero__cube::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 620px;
    height: 620px;
    max-width: 130%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(255,255,255,.32) 0%,
                rgba(255,255,255,.14) 34%,
                rgba(255,255,255,.05) 52%,
                transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.hero__cube .ii-scene { position: relative; z-index: 1; }

.ii-scene { position: relative; }
.ii-cube  { position: relative; transform-style: preserve-3d; }
.ii-face  {
    position: absolute;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}
.ii-face img { width: 100%; height: 100%; object-fit: contain; }
.ii-front, .ii-back   { background: #fff; border: 1.5px solid #e5e7eb; }
.ii-left,  .ii-right  { background: var(--logo-green); }
.ii-top,   .ii-bottom { background: var(--logo-blue); }

/* Hero secundario de página interior */
.pagehead {
    background: linear-gradient(160deg, #12233d 0%, var(--ht-blue) 100%);
    color: var(--ht-white);
    padding-block: clamp(56px, 7vw, 96px);
}
.pagehead__inner { max-width: 760px; }
.pagehead .t-eyebrow { color: rgba(255,255,255,.62); }
.pagehead h1 { color: var(--ht-white); margin-top: 14px; }
.pagehead p  { margin-top: 20px; font-size: var(--fs-lead); color: rgba(255,255,255,.82); }

/* ═══════════════════════════════════════════════
   TARJETAS
═══════════════════════════════════════════════ */
.card {
    position: relative;
    background: var(--ht-white);
    border: 1px solid var(--ht-border);
    border-radius: var(--radius-lg);
    padding: 30px;
    transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ── Icono de tarjeta — mismo lenguaje que .section-icon,
      en tamaño menor, sobre el título y alineado a la izquierda ── */
.card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--card-icon-bg, var(--ht-blue-pale));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 18px;
    transition: transform var(--transition);
}
.card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--card-accent, var(--ht-blue));
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.card:hover .card-icon { transform: scale(1.06); }

/* Franja de logo: cabecera gris a todo el ancho de la tarjeta, de alto
   uniforme, con la imagen en tamaño natural alineada a la izquierda */
.card-logo {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--ht-bg);
    border-bottom: 1px solid var(--ht-border);
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
    margin: -30px -30px 20px;
    padding-inline: 30px;
}
.card-logo img { display: block; max-width: 100%; }

/* Año de la tarjeta como etiqueta */
.card-year {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--card-accent, var(--ht-blue));
    background: var(--card-icon-bg, var(--ht-blue-pale));
    border-radius: 999px;
    padding: 7px 14px;
    margin-bottom: 14px;
}
/* Acentos por familia de tarjeta */
.card--green  { --card-accent: var(--logo-green-dk); --card-icon-bg: #e6fbec; }
.card--blue   { --card-accent: var(--logo-blue);     --card-icon-bg: var(--ht-blue-pale); }
.card--purple { --card-accent: #7c6ef7;              --card-icon-bg: #f3f0ff; }
.card--pink   { --card-accent: #db2777;              --card-icon-bg: #fdf2f8; }
.card__title { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 10px; letter-spacing: -.01em; }
.card__text  { color: var(--ht-text-mid); font-size: 15px; }

.card--flat { border: none; background: var(--ht-bg); }
.card--flat:hover { transform: none; box-shadow: none; }

/* ═══════════════════════════════════════════════
   LISTAS
═══════════════════════════════════════════════ */
.ticks { list-style: none; }
.ticks li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    color: var(--ht-text-mid);
}
.ticks li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--logo-green-dk);
}
.ticks strong { color: var(--ht-text); font-weight: 700; }

/* ═══════════════════════════════════════════════
   SLIDER DE INSTRUMENTOS
═══════════════════════════════════════════════ */
/* El riel deja sitio a las flechas a ambos lados */
.slider { position: relative; padding-inline: 62px; }

/* Flechas laterales, centradas verticalmente */
.slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--ht-border);
    border-radius: 50%;
    background: var(--ht-white);
    color: var(--ht-text-mid);
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.slider__arrow:hover {
    border-color: var(--ht-blue);
    color: var(--ht-blue);
    background: var(--ht-blue-pale);
}
.slider__arrow--prev { left: 0; }
.slider__arrow--next { right: 0; }

/* Riel: desplazamiento horizontal real con scroll-snap */
/* Recorta a los lados en el borde exacto: nunca asoma la portada vecina.
   El desbordamiento vertical queda libre para no cortar las sombras. */
.slider__viewport {
    overflow-x: clip;
    overflow-y: visible;
}
.slider__track {
    display: flex;
    transition: transform 420ms cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.slider__slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: 4px;
}

/* Marco de cada categoría: blanco con borde azul sutil */
.slider__box {
    background: var(--ht-white);
    border: 1.5px solid var(--ht-blue-pale);
    border-radius: var(--radius-lg);
    padding: clamp(26px, 3vw, 40px);
    box-shadow: var(--shadow-sm);
}

/* Título de la categoría */
.slider__cat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1.5px solid var(--ht-blue-pale);
}
.slider__cat i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--ht-blue-pale);
    color: var(--ht-blue);
    font-size: 23px;
}
.slider__cat h4 {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    color: var(--ht-text);
    letter-spacing: -.01em;
}

.slider__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 40px);
    align-items: stretch;
}
/* Categorías de dos pruebas: mitad y mitad */
.slider__grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) { .slider__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .slider__grid { grid-template-columns: 1fr; } }

/* Cada instrumento dentro del marco de categoría */
.instrumento {
    padding: 4px 4px 4px 0;
    transition: transform var(--transition);
}
.instrumento:hover { transform: translateY(-2px); }

.instrumento__fig {
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ht-blue);
    border-radius: var(--radius);
}
.instrumento__fig img { width: 46px; height: 46px; object-fit: contain; }

.instrumento__code {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ht-blue);
    margin-bottom: 8px;
}
.instrumento__name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ht-text);
    margin-bottom: 10px;
    letter-spacing: -.01em;
}
.instrumento__desc {
    line-height: 1.6;
    color: var(--ht-text-mid);
}

/* ── Competencias: mismo tratamiento que .instrumento ── */
.competencia {
    padding: 4px 4px 4px 0;
    transition: transform var(--transition);
}
.competencia:hover { transform: translateY(-2px); }

/* Cuadro del icono — equivalente a .instrumento__fig */
.competencia__icon {
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--ht-blue);
    color: var(--ht-white);
    font-size: 38px;
}
.competencia__name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ht-text);
    letter-spacing: -.01em;
    margin-bottom: 10px;
}
.competencia__desc {
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--ht-text-mid);
}

/* Indicador de posición */
.slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.slider__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--ht-border);
    cursor: pointer;
    transition: all var(--transition);
}
.slider__dot[aria-current="true"] { background: var(--ht-blue); width: 26px; border-radius: 999px; }

/* ═══════════════════════════════════════════════
   PORTADA DE PRUEBA
   Cada slide del slider de instrumentos reproduce
   la portada del manual impreso de la prueba.
═══════════════════════════════════════════════ */
/* Tres portadas por slide */
.portadas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 26px);
    align-items: stretch;
}
.portadas--2 { grid-template-columns: repeat(2, 1fr); max-width: 66%; margin-inline: auto; }

@media (max-width: 900px) {
    .portadas,
    .portadas--2 { grid-template-columns: repeat(2, 1fr); max-width: none; }
}
/* ── Bajo 620px las portadas se recorren de una en una ──
   Apiladas en columna quedaba una tira larguísima y las flechas del slider
   flotaban sobre ella. En su lugar, cada grupo se desliza con el dedo y la
   portada visible se ajusta sola al centro (scroll-snap), sin tocar el JS
   ni la numeración de los puntos. */
/* ── Bajo 620px: una portada por diapositiva ──
   El JS reparte las portadas de otro modo (una por slide en vez de tres),
   así que aquí sólo hace falta que el grupo ocupe el ancho completo.
   Los puntos, al ser trece, pasan a una fila que puede envolver. */
@media (max-width: 620px) {
    .portadas,
    .portadas--2 {
        grid-template-columns: 1fr;
        max-width: none;
    }

    /* Las flechas robaban 62px por lado al ancho de la portada */
    .slider { padding-inline: 44px; }
    .slider__arrow { width: 38px; height: 38px; font-size: 17px; }
    .slider__arrow--prev { left: 0; }
    .slider__arrow--next { right: 0; }

    .slider__dots { flex-wrap: wrap; gap: 7px; margin-top: 22px; }
}

.portada {
    aspect-ratio: 1 / 1.414;          /* proporción A4 del manual */
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 1.6vw, 22px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: var(--ht-white);
    background: linear-gradient(160deg, var(--logo-blue-deep) 0%, var(--logo-blue) 100%);
    /* Relieve de libro: filo claro arriba y sombra proyectada abajo */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 3px 10px rgba(10, 47, 79, .26),
        0 1px 3px rgba(10, 47, 79, .18);
    transition: box-shadow var(--transition), transform var(--transition);
}
.portada:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 6px 16px rgba(10, 47, 79, .30),
        0 2px 5px rgba(10, 47, 79, .20);
}

/* ── Bloque de identificación, con reglas blancas ── */
/* El bloque de identificación arranca a ~20% de la altura, como en el manual */
.portada__head {
    margin-top: 20%;
    display: flex;
    align-items: center;   /* el logo queda centrado respecto al bloque */
    gap: 12px;
}
.portada__ident { flex: 1; min-width: 0; }

.portada__ident p {
    padding-block: 4px;
    border-bottom: 1.2px solid rgba(255, 255, 255, .85);
    text-transform: uppercase;
    line-height: 1.25;
}
.portada__sigla {
    border-top: 1.2px solid rgba(255, 255, 255, .85);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
}
.portada__titulo-min {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
}
/* La categoría no lleva regla: se agrupa visualmente con el tipo */
.portada__area { border-bottom: none; padding-bottom: 0; }
.portada__area,
.portada__tipo {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .03em;
    opacity: .92;
}

/* Icono de la prueba, en su recuadro */
/* Cuadrado cuyo lado iguala la altura del bloque de líneas */
.portada__marca {
    width: 30%;
    aspect-ratio: 1;
    align-self: center;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: transparent;
}
/* El marco blanco es solo de las competencias: el logo de las pruebas ya lo trae */
.portada--comp .portada__marca {
    border: 5px solid rgba(255, 255, 255, .85);
    border-radius: 10px;
}
.portada__marca img { width: 90%; height: 90%; object-fit: contain; }
/* Competencias: icono Tabler ocupando el mismo cuadro que el logo de las pruebas */
.portada__marca i {
    font-size: 0;
    line-height: 0;
}
.portada__marca i::before {
    font-size: clamp(40px, 4.6vw, 62px);
    line-height: 1;
    color: var(--ht-white);
}

/* ── Variante competencias: verde de marca en lugar del azul ── */
.portada--comp {
    background: linear-gradient(160deg, #0a3f1c 0%, #0a8d28 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 3px 10px rgba(6, 58, 24, .26),
        0 1px 3px rgba(6, 58, 24, .18);
}
.portada--comp:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 6px 16px rgba(6, 58, 24, .30),
        0 2px 5px rgba(6, 58, 24, .20);
}

/* ── Variante competencias: sin siglas ni categoría ── */
/* La regla superior pasa al nombre, que es la primera fila del bloque */
.portada--comp .portada__titulo-min {
    border-top: 1.2px solid rgba(255, 255, 255, .85);
}

/* ── Cuerpo: el nombre como título de portada ── */
/* El título arranca justo debajo del bloque; el aire sobrante queda abajo */
.portada__cuerpo {
    flex: 1;
    padding-top: 8%;
}
.portada__nombre {
    margin-top: 15px;
    font-size: clamp(19px, 1.9vw, 20px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    text-transform: uppercase;
}
.portada__desc {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    opacity: .85;
}

/* ── Pie de copyright ── */
.portada__pie {
    text-align: center;
    font-size: 10px;
    line-height: 1.4;
    opacity: .7;
}
.portada__pie p + p { margin-top: 3px; }

/* Con dos columnas o una, la portada tiene más ancho: se agranda el título */
@media (max-width: 900px) {
    .portada__nombre { font-size: clamp(22px, 3.4vw, 30px); }
}

/* En móvil la portada crece según su contenido y ocupa todo el ancho:
   los textos se reajustan a esa medida. El título bajaba a 28px fijos y
   se partía en pantallas estrechas; con clamp se adapta al ancho real. */
@media (max-width: 620px) {
    .portada { aspect-ratio: auto; padding: clamp(22px, 5vw, 30px); min-height: 500px;}
    .portada__marca { width: 76px; }

    .portada__nombre {
        font-size: clamp(21px, 6.4vw, 32px);
        line-height: 1.12;
    }
    .portada__desc { font-size: 15px; line-height: 1.55; }

    .portada__sigla       { font-size: 13px; }
    .portada__titulo-min  { font-size: 14px; }
    .portada__area,
    .portada__tipo        { font-size: 14px; }
    .portada__pie         { font-size: 13px; }
}

/* ═══════════════════════════════════════════════
   GRID DE COMPETENCIAS
   Las competencias son 39: en vez del slider de
   portadas A4 (que sólo mostraba tres por vez),
   se listan como tarjetas cuadradas de ocho en
   ocho. El slider de pruebas queda como estaba.
═══════════════════════════════════════════════ */
/* Mismo deslizado que el slider de pruebas: las páginas van en fila y el
   riel se desplaza con transform, en vez de mostrarse y ocultarse */
.comp-grid__viewport {
    overflow-x: clip;
    overflow-y: visible;
}
.comp-grid__riel {
    display: flex;
    transition: transform 420ms cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
/* Cada diapositiva es una familia: su título arriba y sus competencias debajo */
.comp-grid__familia {
    flex: 0 0 100%;
    min-width: 0;
    padding: 4px;
}
.comp-grid__titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(14px, 1.6vw, 20px);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ht-border);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ht-text-strong, #14314f);
}
.comp-grid__titulo i { font-size: 0; line-height: 0; flex-shrink: 0; }
.comp-grid__titulo i::before {
    font-size: 26px;
    line-height: 1;
    color: #0a8d28;          /* verde de las competencias */
}

.comp-grid__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.6vw, 20px);
    align-items: stretch;
    align-content: start;
}

@media (prefers-reduced-motion: reduce) {
    .comp-grid__riel { transition: none; }
}

.comp-card {
    aspect-ratio: 1;                  /* cuadrada, a diferencia de la portada A4 */
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 1.5vw, 22px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: var(--ht-white);
    /* Mismo verde de marca que la portada de competencia */
    background: linear-gradient(160deg, #0a3f1c 0%, #0a8d28 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 3px 10px rgba(6, 58, 24, .26),
        0 1px 3px rgba(6, 58, 24, .18);
    transition: box-shadow var(--transition), transform var(--transition);
}
.comp-card:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 6px 16px rgba(6, 58, 24, .30),
        0 2px 5px rgba(6, 58, 24, .20);
}

/* Marco blanco del icono, como en la portada de competencia */
.comp-card__marca {
    width: 52px;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 4px solid rgba(255, 255, 255, .85);
    border-radius: 10px;
}
.comp-card__marca i { font-size: 0; line-height: 0; }
.comp-card__marca i::before {
    font-size: 27px;
    line-height: 1;
    color: var(--ht-white);
}
/* La descripción se estira hasta el pie: sin esto el texto queda arriba
   y el cuadrado se ve medio vacío */
.comp-card__desc { flex: 1; }

/* Regla blanca sobre el nombre y otra bajo él, como el bloque de
   identificación de la portada impresa */
.comp-card__nombre {
    margin-top: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1.2px solid rgba(255, 255, 255, .85);
    border-bottom: 1.2px solid rgba(255, 255, 255, .85);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-transform: uppercase;
}
.comp-card__desc {
    margin-top: 11px;
    font-size: 13px;
    line-height: 1.45;
    opacity: .85;
    /* Los nombres largos empujan la descripción: se recorta en vez de
       desbordar el cuadrado */
    overflow: hidden;
}

/* El paginador reusa .slider__arrow y .slider__dots del slider de pruebas:
   mismo diseño y mismo ciclado, sin estilos propios que mantener aparte. */

/* ── Reajustes por ancho ──
   Al reducirse las columnas, el cuadrado exacto deja las tarjetas
   demasiado altas: se libera la proporción y crecen según su texto. */
@media (max-width: 1100px) {
    .comp-grid__cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
    .comp-grid__cards { grid-template-columns: repeat(2, 1fr); }
    .comp-card { aspect-ratio: auto; min-height: 210px; }
}
@media (max-width: 520px) {
    .comp-grid__cards { grid-template-columns: 1fr; }
    .comp-card { min-height: 0; }
    .comp-card__desc { font-size: 14px; }
}

/* ═══════════════════════════════════════════════
   TABLAS
═══════════════════════════════════════════════ */
.table-scroll { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--ht-border); }

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--ht-white);
    font-size: 15px;
    min-width: 680px;
}
.table th {
    text-align: left;
    padding: 15px 20px;
    background: var(--ht-bg);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ht-text-muted);
    border-bottom: 1px solid var(--ht-border);
    white-space: nowrap;
}
.table td {
    padding: 17px 20px;
    border-bottom: 1px solid var(--ht-border);
    color: var(--ht-text-mid);
    vertical-align: top;
    line-height: 1.55;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--ht-blue-xpale); }

.table__code {
    font-weight: 700;
    color: var(--ht-blue);
    letter-spacing: .04em;
}
.table__name { color: var(--ht-text); font-weight: 500; }
.table td:nth-child(2) { min-width: 210px; }

/* ═══════════════════════════════════════════════
   ANA — retrato e ilustración de chat
═══════════════════════════════════════════════ */
.ana-hero {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 10px 30px;
}

/* Halo detrás del retrato */
.ana-hero::before {
    content: "";
    position: absolute;
    inset: 6% 8% 0 8%;
    border-radius: 50% 50% 44% 44%;
    background: radial-gradient(circle at 50% 42%, var(--ht-blue-pale) 0%, var(--ht-blue-xpale) 55%, transparent 72%);
    z-index: 0;
}
.ana-hero__img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    height: auto;
    filter: drop-shadow(0 18px 40px rgba(2,134,220,.20));
}

/* Burbuja flotante sobre el retrato */
.ana-hero__bubble {
    position: absolute;
    z-index: 2;
    background: var(--ht-white);
    border: 1px solid var(--ht-border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 12px 16px;
    font-size: var(--fs-small);
    line-height: 1.45;
    max-width: 250px;
}
.ana-hero__bubble--1 { top: 6%;     left: -4%;  animation: flotar 6.5s ease-in-out infinite; }
.ana-hero__bubble--2 { top: 6%;     right: -4%; animation: flotar 7.5s ease-in-out infinite -1.8s; }
.ana-hero__bubble--3 { bottom: 10%; left: -4%;  animation: flotar 7s   ease-in-out infinite -3.4s; }
.ana-hero__bubble--4 { bottom: 10%; right: -4%; animation: flotar 8s   ease-in-out infinite -0.9s; }

/* Flotación sutil de los diálogos */
@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.ana-hero__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--logo-green);
    margin-right: 7px;
    vertical-align: middle;
}


.chat {
    background: var(--ht-white);
    border: 1px solid var(--ht-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 26px;
}
.chat__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ht-border);
}
.chat__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ht-blue), var(--ht-blue-light));
    color: var(--ht-white);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.chat__name { font-weight: 700; font-size: 15px; }
.chat__role { font-size: var(--fs-micro); color: var(--ht-text-muted); }

.chat__msg {
    background: var(--ht-blue-pale);
    color: var(--ht-text);
    border-radius: 14px 14px 14px 4px;
    padding: 13px 17px;
    margin-bottom: 12px;
    font-size: 15px;
    max-width: 92%;
}
.chat__msg:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════
   PASOS (cómo funciona)
═══════════════════════════════════════════════ */
.steps { counter-reset: step; }
.step {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 26px;
    padding-block: 34px;
    border-top: 1px solid var(--ht-border);
}
.step:last-child { border-bottom: 1px solid var(--ht-border); }
.step__n {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 40px;
    line-height: 1;
    color: var(--logo-green-dk);
}
.step__title { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 10px; }
.step__text  { color: var(--ht-text-mid); max-width: 720px; }

/* ── Pasos del proceso (.pasos) ──
   Mismo lenguaje que .fslider: píldora blanca en el activo, icono
   circular de color y foto con marco degradado. El JS sólo alterna
   .is-active; la transición vive acá. */
.pasos {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
    gap: clamp(32px, 4vw, 56px);
    margin-top: 8px;
    /* La foto es alta: sin este respiro queda pegada al bloque siguiente */
    margin-bottom: clamp(56px, 7vw, 96px);
}

/* ── Columna 1: pestañas ── */
.pasos__tabs { list-style: none; margin: 0; padding: 0; }

.pasos__tab {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 18px 56px 18px 22px;
    position: relative;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 18px;
    color: var(--ht-text-mid);
    text-align: left;
    cursor: pointer;
    transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}
.pasos__tab:hover { color: var(--ht-text); background: var(--ht-white); }
.pasos__tab.is-active {
    background: var(--ht-white);
    color: var(--ht-text);
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(30, 45, 69, .10);
}
.pasos__tab:focus-visible { outline: 2px solid var(--ht-blue); outline-offset: 2px; }

.pasos__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ht-blue-pale);
    color: var(--ht-blue);
    font-size: 24px;
}
/* Un color por paso, para distinguirlos de un vistazo */
.pasos__ico--perfil,
.pasos__ico--linea,
.pasos__ico--informe,
.pasos__ico--ana     { background: #eef1f5; color: #5b6572; }

.pasos__tab-txt { flex: 1; line-height: 1.35; }
.pasos__n {
    display: block;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ht-text-muted);
    margin-bottom: 2px;
}
.pasos__tab.is-active .pasos__n { color: var(--ht-blue); }

/* La flecha sólo aparece en la pestaña activa */
.pasos__chevron {
    position: absolute;
    right: 24px;
    display: grid;
    place-items: center;
    font-size: 20px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .25s ease, transform .25s ease;
}
.pasos__tab.is-active .pasos__chevron { opacity: 1; transform: translateX(0); }

/* El detalle acompaña sólo al paso activo */
.pasos__detalle {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-inline: 22px;
    color: var(--ht-text-mid);
    font-size: var(--fs-body);
    line-height: 1.6;
    transition: max-height .35s ease, opacity .25s ease, padding .35s ease;
}
.pasos__tab.is-active + .pasos__detalle {
    max-height: 240px;
    opacity: 1;
    padding: 12px 30px 20px 88px;
}

/* ── Columna 2: imagen con marco degradado ── */
/* El visor deja sitio a las flechas a ambos lados de la imagen */
.pasos__visor {
    position: relative;
    padding-inline: 56px;
    /* Sitio para la lupa, que cuelga bajo el marco */
    padding-bottom: 46px;
}

/* Las cuatro imágenes comparten celda: el marco toma la altura de la
   más alta y ninguna se recorta. */
/* Mismo marco que el visor del informe: borde fino y sombra, sin degradado */
.pasos__media {
    display: grid;
    border: 1px solid var(--ht-border);
    border-radius: var(--radius-lg);
    background: var(--ht-white);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    box-sizing: border-box;
}
.pasos__media { cursor: zoom-in; }
.pasos__img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transition: opacity .5s ease;
}
.pasos__img.is-active { opacity: 1; }

@media (max-width: 900px) {
    .pasos { grid-template-columns: 1fr; }
    .pasos__visor { order: -1; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 620px) {
    /* En pantallas estrechas los rótulos de las píldoras se van a varias
       líneas: se reducen para que la pastilla no crezca de más. */
    .pasos__tab { font-size: 16px; padding: 15px 44px 15px 16px; gap: 14px; }
    .pasos__ico { width: 42px; height: 42px; font-size: 21px; }
    .pasos__n   { font-size: 13px; }
    .pasos__chevron { right: 18px; font-size: 18px; }
    .pasos__tab.is-active + .pasos__detalle { padding: 12px 20px 20px 72px; }
}
/* Copia de la captura dentro de cada paso: sólo se usa en el modo bloques */
.pasos__img-movil { display: none; }

/* ── Bajo 720px los pasos dejan de ser un slider ──
   Se oculta el visor con flechas y cada paso se muestra completo y abierto,
   con su texto y su captura debajo, uno tras otro. */
@media (max-width: 720px) {
    .pasos__visor { display: none; }

    .pasos__tabs { display: flex; flex-direction: column; gap: 16px; }

    .pasos__tabs > li {
        background: var(--ht-white);
        border: 1px solid var(--ht-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    /* La pestaña pasa a ser el encabezado del bloque, no un botón que
       alterna: todos los pasos quedan abiertos. Sin píldora ni sombra
       propias: el recuadro lo pone ya el <li>, y superpuestos se veía
       una caja montada sobre otra. */
    .pasos__tab,
    .pasos__tab.is-active {
        cursor: default;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 20px 20px 4px;
    }
    .pasos__chevron { display: none; }

    /* Todos los detalles desplegados, sea cual sea el paso activo */
    .pasos__detalle,
    .pasos__tab.is-active + .pasos__detalle {
        max-height: none;
        opacity: 1;
        overflow: visible;
        padding: 0 20px 16px;
        transition: none;
    }

    .pasos__img-movil {
        display: block;
        width: 100%;
        height: auto;
        border-top: 1px solid var(--ht-border);
    }
}

@media (max-width: 520px) {
    /* Sin sitio a los lados, las flechas se superponen a la imagen */
    .pasos__visor { padding-inline: 0; }
    .pasos__visor .slider__arrow--prev { left: 8px; }
    .pasos__visor .slider__arrow--next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .pasos__img,
    .pasos__detalle { transition: none; }
}

/* ═══════════════════════════════════════════════
   BOTÓN DE ZOOM Y VISOR DE IMÁGENES
═══════════════════════════════════════════════ */
/* Lupa entre corchetes — mismo estilo que la del informe de ejemplo.
   Cuelga bajo el marco, alineada a su borde derecho. */
.zoom-btn {
    position: absolute;
    bottom: 0;
    right: 56px;
    z-index: 3;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ht-blue);
    font: inherit;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.zoom-btn:focus-visible { outline: 2px solid var(--ht-blue); outline-offset: 2px; }

@media (max-width: 520px) {
    .zoom-btn { right: 14px; }
}

/* ── Visor a pantalla completa ── */
/* El diálogo se ciñe a la imagen y se centra en la ventana; así los
   controles quedan anclados al borde real de la foto, no a una caja
   más ancha que ella. */
/* El diálogo ocupa toda la ventana y centra la imagen dentro; así una
   foto muy vertical se limita por altura y nunca se desborda. */
.visor {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    /* Cerrado no se muestra: sólo con [open] pasa a grid */
    display: none;
    place-items: center;
}
.visor[open] { display: grid; }
.visor::backdrop { background: rgba(10, 47, 79, .82); }

/* Envoltura del tamaño real de la imagen: ancla los controles a su borde */
.visor__marco { position: relative; display: block; }

.visor__img {
    display: block;
    max-width: 88vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: var(--radius-lg);
    background: var(--ht-white);
    box-shadow: var(--shadow-lg);
}

.visor__cerrar,
.visor__flecha {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1.5px solid var(--ht-border);
    border-radius: 50%;
    background: var(--ht-white);
    color: var(--ht-text-mid);
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.visor__cerrar:hover,
.visor__flecha:hover {
    border-color: var(--ht-blue);
    color: var(--ht-blue);
    background: var(--ht-blue-pale);
}
.visor__cerrar { top: -18px; right: -18px; }
.visor__flecha { top: 50%; transform: translateY(-50%); }
.visor__flecha--prev { left: -23px; }
.visor__flecha--next { right: -23px; }

@media (max-width: 720px) {
    .visor { width: 96vw; }
    .visor__cerrar { top: 10px; right: 10px; }
    .visor__flecha--prev { left: 8px; }
    .visor__flecha--next { right: 8px; }
}

/* ═══════════════════════════════════════════════
   AVISOS
═══════════════════════════════════════════════ */
/* Nota al pie de sección — mismo patrón que .hero__trust,
   filete superior y texto pequeño atenuado, sobre fondo claro */
.disclaimer {
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid var(--ht-border);
    font-size: var(--fs-small);
    color: var(--ht-text-muted);
    line-height: 1.6;
}

.disclaimer strong { color: var(--ht-text-mid); font-weight: 700; }

/* ═══════════════════════════════════════════════
   CTA FINAL
═══════════════════════════════════════════════ */
.cta {
    background: linear-gradient(150deg, #12233d 0%, var(--ht-blue) 100%);
    color: var(--ht-white);
    text-align: center;
    padding-block: clamp(64px, 8vw, 104px);
}
.cta h2 { color: var(--ht-white); }
.cta p  {
    margin: 20px auto 34px;
    max-width: 620px;
    color: rgba(255,255,255,.82);
    font-size: var(--fs-lead);
}

/* ═══════════════════════════════════════════════
   FORMULARIO
═══════════════════════════════════════════════ */
.form { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }

/* Trampa para robots: fuera de la vista sin usar display:none, que algunos
   bots detectan. El visitante nunca la ve ni la tabula. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__aviso {
    margin-top: 14px;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--logo-green-dk);
}
.form__aviso.is-error { color: var(--ht-red); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 700; color: var(--ht-text-mid); }
.field input,
.field textarea {
    font-family: inherit;
    font-size: 15px;
    color: var(--ht-text);
    padding: 12px 15px;
    border: 1.5px solid var(--ht-border);
    border-radius: var(--radius);
    background: var(--ht-white);
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
}
.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--ht-blue);
    box-shadow: 0 0 0 3px var(--ht-blue-pale);
}
.field textarea { resize: vertical; min-height: 130px; }

/* ═══════════════════════════════════════════════
   LOGOTIPOS DE EMPRESA (Nosotros)
═══════════════════════════════════════════════ */
/* Texto a la izquierda, logotipo a la derecha */
.bloque-empresa {
    --empresa-gap: clamp(32px, 5vw, 72px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--empresa-gap);
}
/* Reparto exacto 60/40: el gap se reparte proporcionalmente entre ambas */
.bloque-empresa > *:first-child {
    flex: 0 0 calc(60% - var(--empresa-gap) * .6);
    min-width: 0;
    max-width: none;
}

.logo-empresa {
    display: grid;
    place-items: start center;
    flex: 0 0 calc(40% - var(--empresa-gap) * .4);
    transition: opacity var(--transition);
}
.logo-empresa:hover { opacity: .75; }

/* Imagen temática de sección: ocupa el mismo lugar que .logo-empresa,
   recortada a proporción fija para que ambas secciones queden parejas */
.foto-empresa {
    flex: 0 0 calc(40% - var(--empresa-gap) * .4);
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.foto-empresa img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
}
.logo-empresa img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 860px) {
    .bloque-empresa   { flex-direction: column-reverse; gap: 28px; align-items: flex-start; }
    .bloque-empresa > *:first-child,
    .logo-empresa,
    .foto-empresa     { flex: none; max-width: 100%; width: 100%; }
    .logo-empresa img { max-height: 96px; }
    /* La foto se muestra tras el texto, no encima */
    .foto-empresa     { order: 1; }
}

/* ═══════════════════════════════════════════════
   DATOS DE CONTACTO
═══════════════════════════════════════════════ */
.contact-block { font-size: 15px; color: var(--ht-text-mid); line-height: 1.85; }
.contact-block a:hover { color: var(--ht-blue); }
.contact-block strong { color: var(--ht-text); }
.contact-block + .contact-block { margin-top: 18px; }

/* ── Contacto a dos columnas, cada una encabezada por su logo ── */
.contacto-cols { margin-top: 40px; gap: clamp(32px, 5vw, 64px); align-items: start; }

.contacto-col {
    background: var(--ht-white);
    border: 1px solid var(--ht-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.contacto-col__cuerpo { padding: 28px 32px 32px; }
.contacto-col .t-h3   { margin: 0 0 4px; }

/* Cabecera gris con el logo, al mismo lenguaje que .card-logo de los
   productos: franja a todo el ancho y alto uniforme entre columnas */
.contacto-col__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    padding: 24px 32px;
    background: var(--ht-bg);
    border-bottom: 1px solid var(--ht-border);
    transition: opacity var(--transition);
}
.contacto-col__logo:hover { opacity: .75; }
.contacto-col__logo img {
    max-height: 100%;
    max-width: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ── Datos de contacto en tabla: icono a la izquierda, dato a la derecha ── */
.datos-contacto {
    width: 100%;
    border-collapse: collapse;
    margin-top: 18px;
    font-size: 15px;
    color: var(--ht-text-mid);
    line-height: 1.6;
}
.datos-contacto th,
.datos-contacto td {
    padding: 11px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ht-border);
}
.datos-contacto tr:last-child th,
.datos-contacto tr:last-child td { border-bottom: 0; }
.datos-contacto tr:last-child td { padding-bottom: 0; }

/* Columna del icono: ancho fijo para que todos los datos alineen */
.datos-contacto th {
    width: 34px;
    padding-right: 14px;
    font-weight: 400;
}
.datos-contacto th .ti {
    font-size: 19px;
    line-height: 1.35;
    color: var(--ht-text-muted);
    display: block;
}
.datos-contacto td { color: var(--ht-text); }
.datos-contacto a { color: inherit; text-decoration: none; }
.datos-contacto a:hover { color: var(--ht-blue); text-decoration: underline; }

/* Etiqueta para lectores de pantalla: el icono solo no dice qué dato es */
.vh {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 860px) {
    .contacto-cols { grid-template-columns: 1fr; }
    .contacto-col__logo { height: 120px; }
}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.site-footer {
    background: var(--ht-bg);
    border-top: 1px solid var(--ht-border);
    padding-block: 56px 34px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--ht-border);
}
.footer-col h4 {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ht-text-muted);
    margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a  { font-size: var(--fs-small); color: var(--ht-text-mid); transition: color var(--transition); }
.footer-col a:hover { color: var(--ht-blue); }
.footer-about { font-size: var(--fs-small); color: var(--ht-text-muted); margin-top: 14px; max-width: 300px; line-height: 1.7; }

.footer-legal {
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-size: var(--fs-micro);
    color: var(--ht-text-muted);
}
.footer-legal a:hover { color: var(--ht-blue); }
.footer-legal__enlaces { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal__enlaces a { color: var(--ht-text-mid); transition: color var(--transition); }

/* ═══════════════════════════════════════════════
   PÁGINAS LEGALES (privacidad, términos de uso)
═══════════════════════════════════════════════ */
.prosa-legal {
    max-width: 78ch;         /* medida de lectura cómoda en textos largos */
    font-size: 16px;
    line-height: 1.8;
    color: var(--ht-text-mid);
}
.prosa-legal > *:first-child { margin-top: 0; }

.prosa-legal h2 {
    margin: 44px 0 16px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ht-text);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ht-border);
}
.prosa-legal p { margin-bottom: 18px; }

.prosa-legal__lista {
    margin: 0 0 20px;
    padding-left: 0;
    list-style: none;
}
.prosa-legal__lista li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
}
/* Viñeta dibujada, para no depender del marcador del navegador */
.prosa-legal__lista li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: .72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ht-blue);
}

.prosa-legal a { color: var(--ht-blue); text-decoration: underline; }
.prosa-legal a:hover { text-decoration: none; }

@media (max-width: 640px) {
    .prosa-legal    { font-size: 15px; }
    .prosa-legal h2 { font-size: 19px; margin-top: 36px; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
    :root { --site-gutter: 24px; }
    .grid--3      { grid-template-columns: repeat(2, 1fr); }
    .grid--split  { grid-template-columns: 1fr; }
    .footer-grid  { grid-template-columns: repeat(2, 1fr); gap: 32px; }

    .hero__inner { grid-template-columns: 1fr; }
    .hero__cube  { order: -1; min-height: 0; margin-bottom: 20px; }
    .hero__cube .ii-scene { transform: scale(.75); }
}

@media (max-width: 720px) {
    .nav {
        position: absolute;
        top: var(--site-header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--ht-white);
        border-bottom: 1px solid var(--ht-border);
        box-shadow: var(--shadow-md);
        padding: 8px 0;
    }
    .nav[hidden] { display: none; }
    .nav a { padding: 13px var(--site-gutter); font-size: 16px; }

    .nav-toggle       { display: block; margin-left: auto; order: 3; }
    .site-header__inner { gap: 16px; }
    .header-cta       { display: none; }

    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .form         { grid-template-columns: 1fr; }

    /* Sólo dos burbujas en móvil, en diagonal: con las cuatro se tapaban
       entre sí y cubrían la cara de Ana.
       Nota: 11px por decisión expresa; el mínimo del sitio es 13px. */
    .ana-hero__bubble { max-width: 165px; padding: 9px 12px; font-size: 11px; }
    .ana-hero__bubble--1 { top: 0;     left: -2%; }
    .ana-hero__bubble--4 { bottom: 2%; right: -2%; }
    .ana-hero__bubble--2,
    .ana-hero__bubble--3 { display: none; }
    .footer-grid  { grid-template-columns: 1fr; }
    .step         { grid-template-columns: 1fr; gap: 10px; }
    .step__n      { font-size: 32px; }

    .hero__cube .ii-scene { transform: scale(.55); }

    /* Flechas sobre el riel para no robar ancho al contenido */
    .slider { padding-inline: 0; }
    .slider__arrow { width: 40px; height: 40px; font-size: 18px; }
    .slider__arrow--prev { left: -6px; }
    .slider__arrow--next { right: -6px; }
}

/* Respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ana-hero__bubble { animation: none; }
}

/* ═══════════════════════════════════════════════
   SLIDER DE FUNDAMENTOS (.fslider)
   Tres columnas: pestañas · imagen · detalle.
   El JS sólo alterna la clase .is-active; toda la
   transición vive acá.
═══════════════════════════════════════════════ */
.fslider {
    display: grid;
    grid-template-columns: minmax(420px, 1.3fr) minmax(300px, 400px) minmax(300px, 1fr);
    align-items: center;
    gap: 48px;
    margin-top: 8px;
}

/* ── Columna 1: pestañas ── */
.fslider__tabs { list-style: none; margin: 0; padding: 0; }

.fslider__tab {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 20px 64px 20px 28px;
    position: relative;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 22px;
    color: var(--ht-text-mid);
    text-align: left;
    cursor: pointer;
    transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}

.fslider__tab:hover { color: var(--ht-text); background: var(--ht-white); }

/* La activa se despega del fondo con la píldora blanca, igual que el
   original: es lo que ata la pestaña con la foto de al lado. */
.fslider__tab.is-active {
    background: var(--ht-white);
    color: var(--ht-text);
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(30, 45, 69, .10);
}

.fslider__tab:focus-visible {
    outline: 2px solid var(--ht-blue);
    outline-offset: 2px;
}

.fslider__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ht-blue-pale);
    color: var(--ht-blue);
}
.fslider__ico svg {
    width: 29px; height: 29px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Pastillas de fundamentos: un solo azul para toda la serie. */
.fslider__ico--base,
.fslider__ico--link,
.fslider__ico--chart,
.fslider__ico--brain,
.fslider__ico--cloud { background: var(--ht-blue-xpale); color: var(--logo-blue-deep); }

.fslider__tab-txt { flex: 1; }

/* La flecha sólo aparece en la pestaña activa. */
.fslider__chevron {
    position: absolute;
    right: 28px;
    display: grid;
    place-items: center;
    width: 23px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .25s ease, transform .25s ease;
}
.fslider__chevron svg {
    width: 21px; height: 21px;
    fill: none; stroke: currentColor;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.fslider__tab.is-active .fslider__chevron { opacity: 1; transform: translateX(0); }

/* ── Columna 2: imagen ── */
.fslider__media {
    position: relative;
    aspect-ratio: 4 / 5;
    /* Mismo marco que el visor del informe: borde fino y sombra */
    border: 1px solid var(--ht-border);
    border-radius: var(--radius-lg);
    background: var(--ht-white);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    box-sizing: border-box;
}

/* Las cuatro fotos apiladas: sólo cambia la opacidad, así no hay
   parpadeo de carga al saltar de pestaña. */
.fslider__img {
    /* inset:0 se mide desde el interior del borde, así que la foto queda
       centrada dentro del marco por sí sola. El recorte lo hace el padre. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease;
}
.fslider__img.is-active { opacity: 1; }

/* ── Columna 3: detalle ── */
/* Copia del icono de la pestaña dentro del panel: sólo se usa en el modo
   lista de móvil, donde las pestañas desaparecen. */
.fslider__panel-ico { display: none; }

.fslider__paneles { position: relative; }

.fslider__panel[hidden] { display: none; }

.fslider__panel.is-active {
    animation: fsliderEntra .45s ease both;
}

/* El epígrafe usa .t-eyebrow del sistema; acá sólo la separación. */
.fslider__panel .t-eyebrow { margin: 0 0 10px; }

/* Hereda tamaño y tipografía de .t-h2 para que el título del slide se lea
   igual que el encabezado de cualquier otra sección del sitio. */
.fslider__title { margin: 0 0 16px; }

.fslider__text {
    font-size: 17px;
    line-height: 1.65;
    color: var(--ht-text-mid);
    margin: 0 0 24px;
    max-width: 46ch;
}

@keyframes fsliderEntra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ── Adaptación a pantallas chicas ──
   Bajo 960px la foto estorba más de lo que aporta: se ocultan las
   imágenes y quedan las pestañas sobre el detalle. */
@media (max-width: 1100px) {
    .fslider { grid-template-columns: minmax(340px, 1fr) 260px minmax(260px, 1fr); }
    .fslider__tab { font-size: 21px; }
    .fslider__ico { width: 44px; height: 44px; }
    .fslider__ico svg { width: 25px; height: 25px; }
}

@media (max-width: 960px) {
    .fslider { grid-template-columns: 1fr; gap: 24px; }
    .fslider__media { display: none; }
    .fslider__tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .fslider__tab { width: auto; padding: 12px 18px; font-size: 22px; }
    .fslider__chevron { display: none; }
}

/* ── Bajo 620px el slider deja de ser slider ──
   Navegar cinco pestañas en un teléfono cuesta más que leer los cinco
   bloques seguidos, así que las pestañas desaparecen y cada fundamento
   se muestra completo, uno tras otro, con su icono y su título.
   El JS acompaña: destapa todos los paneles y detiene el avance. */
@media (max-width: 620px) {
    .fslider__tabs { display: none; }

    .fslider__paneles {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* Cada bloque pasa a ser una tarjeta autónoma */
    .fslider__panel {
        background: var(--ht-white);
        border: 1px solid var(--ht-border);
        border-radius: var(--radius-lg);
        padding: 24px 22px;
    }
    /* En lista no hay entrada animada: se ven todos desde el principio */
    .fslider__panel.is-active { animation: none; }

    /* Vuelve el icono de color, que vivía en la pestaña ya oculta */
    .fslider__panel-ico {
        display: grid;
        width: 44px;
        height: 44px;
        margin-bottom: 14px;
    }
    .fslider__panel-ico svg { width: 25px; height: 25px; }

    .fslider__title { font-size: 22px; line-height: 1.3; }
    .fslider__text  { font-size: 15px; }
}

/* ── Tarjeta con foto de cabecera (sección Usos) ──
   La imagen va al borde superior, a sangre, y el relleno pasa del contenedor
   a las partes de dentro. Con flex + order la foto sube al primer lugar sin
   tener que reordenar el HTML, donde el icono sigue yendo antes. */
.card--foto {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.card--foto .card__img {
    order: -1;
    width: 100%;
    /* La altura va en píxeles y no con aspect-ratio: el atributo height="520"
       del HTML pesa más que la proporción y dejaba la foto del alto original. */
    height: 450px;
    object-fit: cover;
}
/* Marca de agua de la tarjeta: mismo recurso que .section-deco en las
   secciones grandes, pero con el carácter de la webfont Tabler en vez de un
   SVG dibujado a mano. Se sale del flujo, así que no roba altura. */
.card-deco {
    position: absolute;
    right: -14px;
    bottom: -14px;
    font-size: 118px;
    line-height: 1;
    color: var(--card-accent, var(--ht-blue));
    opacity: .09;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
/* El icono queda detrás, así que el texto necesita su propio nivel. */
.card--foto .card__title,
.card--foto .card__text { position: relative; z-index: 1; }

.card--foto .card__title,
.card--foto .card__text { margin-inline: 30px; }

.card--foto .card__title { margin-top: 24px; }

.card--foto .card__text  { margin-bottom: 30px; }

/* ── Variante horizontal: foto a la izquierda, contenido a la derecha ── */
.card--foto-lado {
    flex-direction: row;
    align-items: stretch;
}
.card--foto-lado .card__img {
    order: 0;
    flex: 0 0 38%;
    width: 38%;
    height: auto;
    align-self: stretch;
}
.card--foto-lado .card__body {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
    padding: 28px 30px;
}
.card--foto-lado .card__title,
.card--foto-lado .card__text { margin: 0; }
.card--foto-lado .card__title + .ticks { margin-top: 18px; }

@media (max-width: 720px) {
    .card--foto-lado { flex-direction: column; }
    .card--foto-lado .card__img {
        flex: none;
        width: 100%;
        height: 220px;
    }
}

/* ═══════════════════════════════════════════════
   SECCIÓN DEL INFORME INTELIGENTE
   Texto y lista a la izquierda; a la derecha el
   informe real embebido en un iframe.
═══════════════════════════════════════════════ */
/* Separaciones que antes iban incrustadas en el HTML */
.informe-h2   { margin-top: 14px; }
.informe-lead { margin-top: 20px; }
.informe-nota { margin-top: 24px; }

.grid--informe {
    grid-template-columns: minmax(260px, 30fr) minmax(360px, 70fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

.informe-lista { margin-top: 28px; }

/* Los puntos son de una línea y sin negrita: piden el color de texto normal y
   menos separación entre ellos que la lista descriptiva que había antes. */
.informe-lista .ticks li {
    margin-bottom: 10px;
    color: var(--ht-text);
}
.informe-lista .ticks li:last-child { margin-bottom: 0; }

.informe-visor { margin: 0; }

/* El informe es un documento vertical: se le da altura fija y que se
   desplace por dentro, en vez de estirar la página entera. */
.informe-visor__marco {
    display: block;
    width: 100%;
    height: clamp(520px, 78vh, 860px);
    border: 1px solid var(--ht-border);
    border-radius: var(--radius-lg);
    background: var(--ht-white);
    box-shadow: var(--shadow-lg);
}

.informe-visor__pie {
    margin-top: 12px;
    font-size: var(--fs-micro);
    color: var(--ht-text-muted);
    text-align: right;
}
.informe-visor__pie a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ht-blue);
    text-decoration: underline;
}
.informe-visor__pie a .ti { text-decoration: none; }

/* Sustituto del iframe en móvil: sólo aparece en pantallas estrechas */
.informe-visor__enlace { display: none; }

@media (max-width: 960px) {
    .grid--informe { grid-template-columns: 1fr; }
    .informe-visor__marco { height: 70vh; }
}

/* ── En móvil el informe no se embebe ──
   Un documento A4 dentro de un marco de pocos centímetros no se lee: se
   oculta el iframe y queda un botón que lo abre completo en otra pestaña. */
@media (max-width: 720px) {
    .informe-visor__marco,
    .informe-visor__pie { display: none; }

    .informe-visor__enlace {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px 20px;
        font-size: 15px;
        font-weight: 600;
        color: var(--ht-white);
        background: var(--ht-blue);
        border-radius: var(--radius-lg);
        text-decoration: none;
        box-shadow: var(--shadow-md);
        transition: background var(--transition);
    }
    .informe-visor__enlace:hover,
    .informe-visor__enlace:focus-visible { background: var(--logo-blue-deep); }
    .informe-visor__enlace .ti { font-size: 20px; }
}