/* /assets/css/gato-ficha.css — Versión limpia y corregida */

/* ===================== */
/* Variables en uso      */
/* ===================== */
:root {
    --header-h: 0px;
    --cb-maxw: 1300px;
    --hero-side-gap: clamp(12px, 3vw, 28px);
    --hero-maxh: 560px;
    --hero-vhmax: 78vh;
    --anchor-finetune: clamp(8px, 1.2vh, 18px);
}

/* A11Y */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* Layout base */
html { scroll-behavior: smooth; }
body { margin: 0; padding-top: 0; background: #f9fafb; /* Color de fondo base más suave */ }

/* Hero pegado arriba (menú superpuesto) */
#hero { margin-top: calc(-1 * var(--header-h)); }

/* Secciones a todo lo ancho con colores de fondo alternos */
.sec-block {
    width: 100vw; position: relative; left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw; padding: 2rem 1rem;
}
.sec-block:nth-of-type(3n+1) { background-color: #ffffff; }
.sec-block:nth-of-type(3n+2) { background-color: #f9fafb; }
.sec-block:nth-of-type(3n+3) { background-color: #fefce8; }

/* Sombra suave única */
.shadow-soft { box-shadow: 0 14px 40px rgba(0,0,0,.08); }

/* Offset de anclas para header fijo */
.anchor-target { scroll-margin-top: max(0px, calc(var(--header-h) - var(--anchor-finetune))); }

/* Contenedor acotado a ancho máx. */
.hero-bound {
    width: min(var(--cb-maxw), calc(100vw - 2*var(--hero-side-gap)));
    margin-inline: auto;
}

/* UI flotante del hero */
.hero-ui {
    position: absolute; left: 0; right: 0;
    height: min(var(--hero-vhmax), var(--hero-maxh));
    top: 50%; transform: translateY(-50%);
    pointer-events: none; /* Desactiva clics en toda la capa por defecto */
}

/* Reactiva los clics solo en las áreas interactivas */
.hero-ui .hero-back,
.hero-ui .hero-links,
.hero-ui .hero-footer {
    pointer-events: auto;
    position: absolute;
    inset-inline: 0;
}
.hero-ui .hero-back   { top: 25%; }
.hero-ui .hero-links  { top: 33%; }
.hero-ui .hero-footer { bottom: 0; }

.hero-ui--bottom { top: auto; bottom: 0; transform: none; }
.hero-ui--bottom .hero-back   { top: auto; bottom: 68%; }
.hero-ui--bottom .hero-links  { top: auto; bottom: 46%; }
.hero-ui--bottom .hero-footer { bottom: clamp(12px, 2.5vh, 28px); }

/* ===================== */
/* Carrusel 3D           */
/* ===================== */
.cb-carousel[data-variant="3d"] {
    --radius: 22px;
    --shadow: 0 18px 50px rgba(0,0,0,.22);
    position: relative; width: 100%; max-width: var(--cb-maxw); margin: 0 auto; outline: none;
}
.cb-open-img { cursor: zoom-in; }

.cb-carousel[data-variant="3d"] .cb3d__viewport {
    width: 100%; height: auto; overflow: hidden;
    perspective: 1200px; transition: height .35s ease;
}
.cb-carousel[data-variant="3d"] .cb3d__stage {
    position: relative; height: 100%; display: grid; place-items: center;
}
.cb-carousel[data-variant="3d"] .cb3d__slide {
    position: absolute; width: 100%; height: 100%;
    border-radius: var(--radius); overflow: hidden; background: #fff;
    box-shadow: var(--shadow); transform-style: preserve-3d;
}
.cb-carousel[data-variant="3d"] .cb3d__slide img,
.cb-carousel[data-variant="3d"] .cb3d__slide video {
    width: 100%; height: auto; max-height: 80vh; display: block;
    object-fit: contain; background: transparent; border-radius: inherit;
}

/* Controles carrusel */
.cb-carousel[data-variant="3d"] .cb3d__btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; display: grid; place-items: center;
    border: none; border-radius: 999px; cursor: pointer; z-index: 5;
    color: #111; background: rgba(255,255,255,.95);
    box-shadow: 0 12px 36px rgba(0,0,0,.28);
    transition: transform .12s ease, background .2s ease, opacity .2s ease;
}
.cb-carousel[data-variant="3d"] .cb3d__btn:hover { background: #fff; transform: translateY(-51%); }
.cb-carousel[data-variant="3d"] .cb3d__btn[disabled] { opacity: .45; cursor: not-allowed; }
.cb-carousel[data-variant="3d"] .cb3d__btn--prev { left: clamp(6px, 1.6vw, 14px); }
.cb-carousel[data-variant="3d"] .cb3d__btn--next { right: clamp(6px, 1.6vw, 14px); }

.cb-carousel[data-variant="3d"] .cb3d__dots {
    position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
    display: flex; gap: 10px; z-index: 4;
}
.cb-carousel[data-variant="3d"] .cb3d__dot {
    width: 10px; height: 10px; border: none; border-radius: 999px;
    background: #d1d5db; cursor: pointer; transition: all .25s ease;
}
.cb-carousel[data-variant="3d"] .cb3d__dot[aria-current="true"] { width: 24px; background: #111; }
.cb-carousel[data-variant="3d"] .cb3d__zoom { display: none !important; }

/* ===================== */
/* Vídeo embebido        */
/* ===================== */
.video-embed-wrap {
    overscroll-behavior: contain; border-radius: 1rem; overflow: hidden; background: #000;
}
.video-embed-wrap .ratio-16x9 { position: relative; padding-top: 56.25%; }
.video-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ===================== */
/* Pedigrí y Títulos     */
/* ===================== */
[id^="seccion-pedigree"] figure,
[id^="seccion-titulos"] figure {
    display: inline-block;
    padding: 0;
    border-radius: 1.5rem;
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
    overflow: hidden;
    background: #fff;
}
[id^="seccion-pedigree"] figure img,
[id^="seccion-titulos"] figure img {
    display: block;
    border-radius: inherit;
    max-width: 95vw;
}

/* --- REGLA DE CORRECCIÓN PARA EL ENLACE 'VOLVER' --- */
.hero-back a {
    pointer-events: auto !important; /* Asegura que se pueda hacer clic */
    cursor: pointer !important;       /* Asegura que aparezca el 'dedito' */
}