/* ───────── QUI SÓC ───────── */

/* Hero (portada) */
.qui-hero{
    background: linear-gradient(135deg, var(--secondary-color, #d2b48c), #f8f9fa);
    padding: 80px 0; text-align: center;
    color: var(--text-dark, #2C3E50);
}
.qui-hero h1{ color: var(--primary-color, #8B4513); }

/* Portada con imagen (ajustada: título blanco y bloque más abajo) */
.qui-hero.has-image{
    min-height: clamp(62svh, 70svh + 2vw, 78svh);
    padding: clamp(150px, 12vh, 220px) 0 clamp(90px, 10vh, 140px);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background:
            linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
            var(--hero-image) center/cover no-repeat;
}
/* empuja título+subtítulo un poco hacia abajo */
.qui-hero.has-image .text-center{     margin-top: clamp(10vh, 14vh, 18vh);}

/* Título en blanco en el héroe con imagen */
.qui-hero.has-image h1{
    color:#fff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,.28);
}
/* Subtítulo en blanco suave y legible */
.qui-hero.has-image .lead{
    color: rgba(255,255,255,.95);
    text-shadow: 1px 1px 2px rgba(0,0,0,.22);
}

/* Historia: foto grande */
.story-photo{
    width: 100%; max-width: 520px; border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15); margin-inline: auto;
}

/* ───────── Marco “madera” (CSS puro) + Pizarras ───────── */
/* Igualar alturas: columna y marco */
.chalk-row > [class*="col-"]{ display:flex; }
.chalk-frame{
    display:flex; flex:1; border-radius:16px; padding:18px; position:relative; overflow:hidden;
    /* Madera (vetas + ruido) */
    background:
            repeating-linear-gradient(12deg, #caa277 0 14px, #b4875b 14px 28px, #caa277 28px 42px, #a8764e 42px 56px),
            repeating-linear-gradient(12deg, rgba(255,255,255,.06) 0 2px, transparent 2px 6px),
            linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,0) 40%, rgba(0,0,0,.06) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 10px 28px rgba(0,0,0,.18);
}
.chalk-frame::before{
    content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
    background:
            radial-gradient(rgba(255,255,255,.08), transparent 60%) 0 0 / 18px 18px repeat,
            radial-gradient(rgba(0,0,0,.06), transparent 60%) 8px 6px / 22px 22px repeat;
    mix-blend-mode: overlay; opacity:.35;
}

/* Interior de pizarra con misma altura */
.chalkboard{
    background:#2f3b2f; color:#fff; border-radius:10px; padding:28px 24px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.04);
    position:relative; overflow:hidden;
    display:flex; flex-direction:column; flex:1;
}
@media (min-width: 992px){
    .chalkboard{ min-height: 460px; } /* ↔ Ajusta si quieres más/menos alto */
}
.chalkboard::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
            radial-gradient(transparent 55%, rgba(255,255,255,.03) 56%) 0 0 / 6px 6px,
            radial-gradient(rgba(255,255,255,.02), transparent 60%) 0 0 / 10px 10px;
}
.chalk-title{
    color:#fff; margin-bottom:14px; display:flex; align-items:center; gap:.5rem;
    font-family:"Zen Antique Soft", Georgia, serif;
}
.chalk-title i{ color:#fff; opacity:.92; }
.chalk-list{ list-style:none; margin:0; padding:0; }
.chalk-list li{
    color:#f7f7f7; font-size:1rem; padding:6px 0 6px 26px; position:relative;
    text-shadow:0 1px 0 rgba(255,255,255,.25), 0 0 6px rgba(255,255,255,.12);
}
.chalk-list li::before{
    content:"—"; position:absolute; left:0; top:6px; color:#fff; opacity:.9;
}

/* ───────── Equipo Equí: mini-cards + fullscreen controlado por JS ───────── */
.equi-grid{
    display:grid; grid-template-columns:repeat(12,1fr); gap:16px;
}
@media (max-width:992px){ .equi-grid{ grid-template-columns:repeat(6,1fr);} }
@media (max-width:576px){ .equi-grid{ grid-template-columns:repeat(2,1fr);} }

.equi-card{
    grid-column:span 3;
    background:#fff; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.08);
    overflow:hidden; cursor:pointer; transition:transform .25s, box-shadow .25s;
}
.equi-card:hover{ transform:scale(1.05); box-shadow:0 14px 32px rgba(0,0,0,.14); }
.equi-thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.equi-body{ padding:12px 14px; text-align:center; }
.equi-name{ margin:6px 0 4px; }
.equi-meta{ font-size:.92rem; color:#6b6f76; }

/* Overlay/presentación (JS añade .is-open) */
.horse-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.6);
    display:grid; place-items:center; opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s, visibility .25s; z-index:1050;
}
.horse-overlay.is-open, .horse-overlay:target{ opacity:1; visibility:visible; pointer-events:auto; }

/* Modales: mismos tamaños para todos */
:root{
    --horse-modal-w: 1000px;
    --horse-modal-h: 640px;
}
.horse-modal{
    width: min(var(--horse-modal-w), 92vw);
    height: min(var(--horse-modal-h), 90vh);
    background:#fff; border-radius:18px; overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.35);
    display:grid; grid-template-columns:1fr 1fr;
}
@media (max-width:768px){
    .horse-modal{ grid-template-columns:1fr; }
}
.horse-modal img{ width:100%; height:100%; object-fit:cover; }
.horse-content{ padding:20px 22px; overflow:auto; }
.horse-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.horse-close{
    display:inline-block; padding:8px 12px; border-radius:10px; background:#f0f2f5;
    color:#333; text-decoration:none; cursor:pointer;
}
.horse-close:hover{ background:#e6e9ee; }

/* Namasté memoria */
.horse-modal.memory img{ filter:saturate(.9) contrast(.96); }
.horse-modal.memory .horse-content{
    background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
}

/* ───────── Contenedores de color coherentes ───────── */
.container-green{
    background: rgba(223,243,164,0.57);
    border-radius: 20px; padding:48px 28px; margin:40px 0;
}
.container-pink{
    background: rgba(252,210,232,0.58);
    border-radius: 20px; padding:48px 28px; margin:40px 0;
}

/* ───────── Animación “reveal al pasar” (sin escribir) ───────── */
.reveal{
    opacity: 0; transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
}
.reveal.in-view{
    opacity: 1; transform: translateY(0);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
    .equi-card:hover{ transform:none; }
    .horse-overlay, .horse-modal{ transition:none; }
    .reveal{ transition:none; opacity:1; transform:none; }
}

/* ───────── Responsivo héroe ───────── */
@media (max-width: 575.98px){
    .qui-hero.has-image{
        min-height: 62svh;
        padding: 140px 0 90px;
    }
    .qui-hero.has-image .text-center{
        margin-top: 10vh;
    }
}