/* Estilos propios de index.php (se cargan después de style.css) */

/* =====================================================================
   EXPEDIENTE: carpeta fija en pantalla; cada tramo de scroll voltea una hoja
   ===================================================================== */

.expediente {
    --exp-top: 0px;                /* el header se esconde mientras la carpeta está fija */
    position: relative;
    height: calc((var(--hojas) + .3) * 100vh);
    height: calc((var(--hojas) + .3) * 100svh);
    background:
        radial-gradient(circle at 15% 12%, rgba(47, 158, 91, .20), transparent 45%),
        radial-gradient(circle at 88% 88%, rgba(232, 163, 61, .14), transparent 42%),
        var(--gradient-hero);
}

.exp-sticky {
    position: sticky;
    top: var(--exp-top);
    height: calc(100vh - var(--exp-top));
    height: calc(100svh - var(--exp-top));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 22px 0 14px;
}

.exp-head { text-align: center; }
.exp-head h2 {
    margin: 10px 0 14px;
    color: var(--text-light);
    font-size: clamp(22px, 3.2vw, 34px);
    font-weight: 800;
    line-height: 1.15;
}

.exp-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.exp-folder {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* ---------- Pestañas de la carpeta ---------- */
.exp-tabs {
    display: flex;
    gap: 6px;
    padding-left: 22px;
    position: relative;
    z-index: 1;
}
.exp-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px 7px;
    border: 0;
    border-radius: 12px 12px 0 0;
    background: #c99a45;
    color: #4a3312;
    font: inherit;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transform: translateY(4px);
    transition: transform .2s ease, background .2s ease, color .2s ease;
    white-space: nowrap;
}
.exp-tab:hover { transform: translateY(1px); }
.exp-tab.is-active {
    background: #e6bf6a;
    color: var(--pest-navy);
    transform: translateY(0);
}
.exp-tab:focus-visible { outline: 3px solid var(--pest-green-light); outline-offset: 2px; }

/* ---------- Hojas ---------- */
.exp-sheets {
    position: relative;
    flex: 1;
    min-height: 0;
    perspective: 1800px;
}
/* Tapa trasera de la carpeta (cartulina manila) */
.exp-sheets::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px 16px 16px 16px;
    background: linear-gradient(170deg, #e6bf6a, #d4a650);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.exp-sheet {
    position: absolute;
    inset: 14px 14px 22px;
    z-index: calc(20 - var(--i));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 34px;
    padding: 30px 34px 30px 58px;
    overflow: hidden;
    border-radius: 6px;
    background-color: #fffdf6;
    background-image:
        linear-gradient(90deg, transparent 38px, rgba(214, 69, 69, .35) 38px, rgba(214, 69, 69, .35) 40px, transparent 40px),
        repeating-linear-gradient(180deg, transparent 0 27px, rgba(18, 40, 58, .06) 27px 28px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .05), 0 10px 24px rgba(40, 25, 5, .25);
    transform-origin: 50% 0;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* Leyenda (izquierda) */
.exp-legend {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    color: var(--pest-navy);
}
.exp-case {
    align-self: flex-start;
    padding: 5px 11px;
    background: var(--pest-navy);
    color: var(--pest-amber);
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transform: rotate(-1.5deg);
}
.exp-legend h3 {
    margin: 0;
    font-size: clamp(22px, 2.7vw, 36px);
    font-weight: 900;
    line-height: 1.08;
    color: var(--pest-navy);
}
.exp-dato {
    margin: 0;
    padding-left: 12px;
    border-left: 4px solid var(--pest-amber);
}
.exp-dato strong { display: block; font-size: 17px; color: #b3261e; }
.exp-dato > span { font-size: 13px; color: #6d7d78; }
.exp-texto { margin: 0; font-size: 15.5px; color: #3d4f49; }
.exp-servicio { font-size: 13.5px; color: var(--pest-green-dark); }
.exp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* Sello de goma */
.exp-stamp {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 12px;
    border: 3px solid #c62828;
    border-radius: 6px;
    color: #c62828;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    mix-blend-mode: multiply;
    opacity: 0;
    transform: rotate(-12deg) scale(1.8);
    pointer-events: none;
}
.exp-sheet.is-active .exp-stamp {
    animation: exp-stamp .45s cubic-bezier(.3, 1.6, .5, 1) .35s forwards;
}
.exp-sheet.was-active:not(.is-active) .exp-stamp { opacity: .82; transform: rotate(-12deg); }
@keyframes exp-stamp {
    to { opacity: .82; transform: rotate(-12deg) scale(1); }
}

/* Fotos (derecha) */
.exp-photos {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}
.exp-photos-3 .exp-photo:first-child { grid-row: span 2; }
.exp-photos-2 { grid-template-rows: minmax(0, 1fr); }
.exp-photos-1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }

.exp-photo {
    --r: -2deg;
    position: relative;
    min-height: 0;
    padding: 8px;
    border: 0;
    background: #fff;
    box-shadow: 0 8px 20px rgba(20, 20, 20, .22);
    cursor: zoom-in;
    transform: rotate(var(--r));
    transition: transform .25s ease, box-shadow .25s ease;
}
.exp-photo:nth-child(2) { --r: 2deg; }
.exp-photo:nth-child(3) { --r: -1.2deg; }
.exp-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #e9ecea;
}
/* Cinta adhesiva */
.exp-photo::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    width: 64px;
    height: 20px;
    margin-left: -32px;
    background: rgba(255, 236, 170, .78);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    transform: rotate(-4deg);
    z-index: 1;
}
.exp-zoom {
    position: absolute;
    left: 50%;
    bottom: 16px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(18, 40, 58, .85);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity .2s ease, transform .2s ease;
}
.exp-photo:hover,
.exp-photo:focus-visible {
    transform: rotate(0) scale(1.03);
    box-shadow: 0 16px 34px rgba(20, 20, 20, .3);
    z-index: 2;
}
.exp-photo:hover .exp-zoom,
.exp-photo:focus-visible .exp-zoom { opacity: 1; transform: translate(-50%, 0); }
.exp-photo:focus-visible { outline: 3px solid var(--pest-green); outline-offset: 3px; }

.exp-hint {
    margin: 12px 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    transition: opacity .3s ease;
}
.exp-hint > span:first-child { display: inline-block; animation: exp-bounce 1.4s ease-in-out infinite; }
.exp-hint-sep { margin: 0 6px; opacity: .6; }
.expediente.is-last .exp-hint { opacity: .45; }
@keyframes exp-bounce { 50% { transform: translateY(4px); } }

/* ---------- Lightbox ---------- */
.exp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 14, 20, .92);
    animation: exp-fade .2s ease;
}
.exp-lightbox[hidden] { display: none; }
.exp-lightbox figure { margin: 0; max-width: 100%; text-align: center; }
.exp-lightbox img {
    max-width: min(92vw, 1100px);
    max-height: 80vh;
    max-height: 80svh;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    animation: exp-zoom-in .25s ease;
}
.exp-lightbox figcaption { margin-top: 12px; color: var(--text-light); font-size: 14px; }
.exp-lb-close,
.exp-lb-nav {
    position: absolute;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.exp-lb-close:hover,
.exp-lb-nav:hover { background: var(--pest-green); }
.exp-lb-close { top: 14px; right: 14px; }
.exp-lb-prev { left: 14px; top: 50%; margin-top: -23px; }
.exp-lb-next { right: 14px; top: 50%; margin-top: -23px; }
body.exp-lb-open { overflow: hidden; }
@keyframes exp-fade { from { opacity: 0; } }
@keyframes exp-zoom-in { from { opacity: 0; transform: scale(.94); } }

/* ---------- Responsive del expediente ---------- */
@media (max-width: 760px) {
    .exp-sticky { padding: 12px 0 8px; }
    .exp-head h2 { font-size: 20px; margin: 6px 0 10px; }
    .exp-head .eyebrow { font-size: 11px; }

    .exp-sheet {
        inset: 8px 8px 16px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 12px;
        padding: 16px 14px 14px 30px;
        background-image:
            linear-gradient(90deg, transparent 18px, rgba(214, 69, 69, .35) 18px, rgba(214, 69, 69, .35) 20px, transparent 20px),
            repeating-linear-gradient(180deg, transparent 0 23px, rgba(18, 40, 58, .06) 23px 24px);
    }
    .exp-legend { justify-content: flex-start; gap: 7px; }
    .exp-case { font-size: 11px; letter-spacing: 1.5px; padding: 4px 8px; }
    .exp-legend h3 { font-size: 20px; }
    .exp-dato { padding-left: 9px; border-left-width: 3px; }
    .exp-dato strong { font-size: 13.5px; }
    .exp-dato > span { font-size: 11.5px; }
    .exp-texto {
        font-size: 13px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .exp-servicio { font-size: 12px; }
    .exp-stamp { top: -4px; font-size: 10px; padding: 3px 6px; border-width: 2px; letter-spacing: .5px; }

    .exp-photos,
    .exp-photos-2,
    .exp-photos-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
        gap: 10px;
    }
    .exp-photos-3 .exp-photo:first-child { grid-row: auto; }
    .exp-photo { padding: 4px; }
    .exp-photo::before { width: 36px; height: 12px; margin-left: -18px; top: -6px; }
    .exp-zoom { display: none; }

    .exp-hint { font-size: 11.5px; margin-top: 6px; }

    .exp-lb-prev, .exp-lb-next { top: auto; bottom: 18px; margin-top: 0; }
    .exp-lb-prev { left: calc(50% - 56px); }
    .exp-lb-next { right: calc(50% - 56px); }
    .exp-lightbox img { max-height: 70vh; max-height: 70svh; }
}

@media (max-width: 600px) {
    .exp-tabs { padding-left: 0; gap: 4px; }
    .exp-tab { flex: 1 1 0; min-width: 0; padding: 7px 4px 5px; font-size: 11.5px; }
    .exp-tab.is-active { flex-grow: 2.6; }
    .exp-tab:not(.is-active) .exp-tab-lbl { display: none; }
    .exp-cta .btn { padding: 7px 12px; font-size: 12px; }
}

@media (max-width: 760px) and (max-height: 700px) {
    .exp-head .eyebrow, .exp-dato > span { display: none; }
    .exp-texto { -webkit-line-clamp: 3; }
    .exp-sheet:has(.exp-cta) .exp-texto { -webkit-line-clamp: 2; }
}

/* Laptops y pantallas de escritorio bajas: encabezado compacto, más espacio para las hojas */
@media (min-width: 761px) and (max-height: 820px) {
    .exp-sticky { padding: 12px 0 8px; }
    .exp-head .eyebrow { display: none; }
    .exp-head h2 { font-size: 24px; margin: 0 0 10px; }
    .exp-sheet { inset: 10px 12px 18px; padding: 22px 28px 22px 54px; gap: 28px; }
    .exp-legend { gap: 9px; }
    .exp-legend h3 { font-size: clamp(22px, 2.3vw, 30px); }
    .exp-texto { font-size: 14.5px; line-height: 1.5; }
    .exp-photos { gap: 14px; }
    .exp-hint { margin-top: 6px; font-size: 12px; }
}
@media (min-width: 761px) and (max-height: 680px) {
    .exp-dato > span { display: none; }
    .exp-dato strong { font-size: 15px; }
    .exp-texto {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .exp-sheet { padding-top: 18px; padding-bottom: 18px; }
}

/* Celular horizontal / pantallas muy bajas: solo lo esencial */
@media (max-height: 560px) {
    .exp-head, .exp-hint, .exp-texto { display: none; }
    .exp-sticky { padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .exp-hint > span:first-child { animation: none; }
    .exp-sheet.is-active .exp-stamp { animation: none; opacity: .82; transform: rotate(-12deg); }
}

/* =====================================================================
   TIENDA: 3 productos sobre una foto de fondo
   ===================================================================== */

.tienda-inicio {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 90px 0;
    background: var(--pest-navy-2);
}
.tienda-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
}
.tienda-inicio::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(12, 28, 34, .93), rgba(18, 40, 58, .76) 45%, rgba(12, 28, 34, .95));
}
@media (hover: hover) and (min-width: 900px) {
    .tienda-bg { background-attachment: fixed; }   /* efecto parallax */
}

.tienda-head { text-align: center; max-width: 640px; margin: 0 auto; }
.tienda-head h2 {
    margin: 12px 0 10px;
    color: var(--text-light);
    font-size: clamp(24px, 3.4vw, 38px);
    font-weight: 800;
    line-height: 1.15;
}
.tienda-head p { margin: 0; color: var(--text-muted); }

.tienda-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 38px;
}
.tienda-grid .product-card {
    border: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
    transition: transform .25s ease, box-shadow .25s ease;
}
.tienda-grid .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 50px rgba(0, 0, 0, .45);
}
.tienda-grid .product-footer { flex-wrap: wrap; }

@media (max-width: 860px) {
    .tienda-grid { grid-template-columns: minmax(0, 420px); justify-content: center; }
}
@media (max-width: 600px) {
    .tienda-inicio { padding: 60px 0; }
}

/* Letras rojas del expediente: al chuparlas quedan rosadas */
.exp-dato .plaga-l { transition: color 2s ease, opacity 2s ease, transform .6s ease; }
.exp-dato .plaga-l.is-sucked { color: #f1c9c5; filter: none; opacity: .4; }