/* ==========================================================================
   CATÁLOGOS DESCARGABLES
   Se carga en index.php, cumpleanos.php, after-school.php y baby-shower.php.
   Usa las variables de marca ya definidas en header.css (:root).
   ========================================================================== */

.catalogos-section{
    padding:70px 0;
    background:var(--bg);
}

/* Ancla directa: https://lacasitalomas.cl/#catalogos
   El header es fijo, así que sin scroll-margin-top el título de la sección
   quedaría oculto debajo del menú al llegar por el enlace. El valor sigue la
   altura real del header (76px) más un poco de aire. */
#catalogos{
    scroll-margin-top:96px;
}

.catalogos-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    margin-top:34px;
}

.catalogo-card{
    background:var(--white);
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow);
    border:2px solid transparent;
    display:flex;
    flex-direction:column;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.catalogo-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 48px rgba(123,47,190,.2);
    border-color:var(--purple);
}

/* --- miniatura de la portada del PDF --- */
.catalogo-thumb{
    position:relative;
    height:200px;
    background:var(--bg);
    overflow:hidden;
}

.catalogo-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;   /* muestra la cabecera de la portada */
    display:block;
}

/* Etiqueta de temporada. Las portadas de Invierno y Verano son casi idénticas,
   así que se diferencian aquí, en la web, sin tocar el PDF. */
.catalogo-temporada{
    position:absolute;
    top:12px;
    left:12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--white);
    font-size:.74rem;
    font-weight:800;
    letter-spacing:.03em;
    padding:6px 12px;
    border-radius:999px;
    box-shadow:0 4px 14px rgba(0,0,0,.22);
    white-space:nowrap;
}

.catalogo-temporada.invierno{
    background:linear-gradient(135deg,#2979FF,#5AA9FF);
}

.catalogo-temporada.verano{
    background:linear-gradient(135deg,#FF6B35,#FFB03D);
    color:#3A2200;
}

/* --- cuerpo --- */
.catalogo-body{
    padding:18px 20px 20px;
    display:flex;
    flex-direction:column;
    flex:1;
    gap:8px;
}

.catalogo-body h3{
    font-family:'Fredoka One',cursive;
    color:var(--purple);
    font-size:1.08rem;
    line-height:1.3;
}

.catalogo-body p{
    color:var(--text);
    font-size:.9rem;
    line-height:1.55;
    flex:1;
}

.catalogo-meta{
    font-size:.78rem;
    color:#7A7A96;
    font-weight:600;
}

/* --- botones --- */
.catalogo-btns{
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-top:6px;
}

/* Es un <button>: abre el visor dentro de la página. Ya no existe ningún
   enlace a un archivo, ni botón de descarga. */
.btn-catalogo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:13px 16px;
    border-radius:999px;
    font-family:inherit;
    font-weight:800;
    font-size:.9rem;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    transition:filter .25s ease, transform .25s ease;
    border:2px solid transparent;
    min-height:46px;              /* cómodo para tocar en móvil */
}

.btn-catalogo.ver{
    background:linear-gradient(135deg,var(--purple),var(--pink));
    color:var(--white);
}

.btn-catalogo.ver:hover{
    filter:brightness(1.08);
    transform:translateY(-2px);
}

.btn-catalogo:focus-visible{
    outline:3px solid var(--yellow);
    outline-offset:2px;
}

/* --- llamada a WhatsApp integrada al final de la sección --- */
.catalogos-cta{
    margin-top:34px;
    background:linear-gradient(135deg,var(--purple),var(--pink));
    border-radius:24px;
    padding:28px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    flex-wrap:wrap;
}

.catalogos-cta-text h3{
    font-family:'Fredoka One',cursive;
    color:var(--white);
    font-size:1.35rem;
    margin-bottom:5px;
}

.catalogos-cta-text p{
    color:rgba(255,255,255,.92);
    font-size:.95rem;
    line-height:1.5;
}

.catalogos-cta .btn-wsp-catalogos{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#25D366;
    color:var(--white);
    padding:14px 26px;
    border-radius:999px;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
    transition:transform .25s ease, filter .25s ease;
}

.catalogos-cta .btn-wsp-catalogos:hover{
    transform:translateY(-3px);
    filter:brightness(1.06);
}

/* ==========================================================================
   TARJETA CONTEXTUAL — versión compacta para páginas de servicio
   ========================================================================== */

.catalogo-inline{
    display:flex;
    align-items:center;
    gap:20px;
    background:var(--white);
    border:2px solid rgba(123,47,190,.18);
    border-radius:22px;
    padding:18px 22px;
    box-shadow:var(--shadow);
    max-width:760px;
    margin:0 auto;
    flex-wrap:wrap;
}

.catalogo-inline-thumb{
    width:82px;
    height:110px;
    border-radius:12px;
    overflow:hidden;
    flex:none;
    background:var(--bg);
}

.catalogo-inline-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    display:block;
}

.catalogo-inline-text{
    flex:1 1 240px;
    min-width:0;
}

.catalogo-inline-text h3{
    font-family:'Fredoka One',cursive;
    color:var(--purple);
    font-size:1.12rem;
    margin-bottom:4px;
}

.catalogo-inline-text p{
    color:var(--text);
    font-size:.9rem;
    line-height:1.55;
}

.catalogo-inline-btns{
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

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

/* El header fijo mide 72px por debajo de 1024px y 68px por debajo de 520px:
   el ancla se ajusta para que el título nunca quede tapado por el menú. */
@media (max-width:1023px){
    #catalogos{ scroll-margin-top:92px; }
}

@media (max-width:520px){
    #catalogos{ scroll-margin-top:88px; }
}

@media (max-width:768px){
    .catalogos-section{ padding:52px 0; }
    .catalogos-cta{
        flex-direction:column;
        align-items:flex-start;
        padding:24px 22px;
    }
    .catalogos-cta .btn-wsp-catalogos{ width:100%; justify-content:center; }
}

@media (max-width:560px){
    .catalogos-grid{
        grid-template-columns:1fr;
        gap:18px;
    }
    .catalogo-thumb{ height:220px; }

    .catalogo-inline{
        gap:14px;
        padding:16px;
    }
    .catalogo-inline-btns{
        flex-direction:row;
        width:100%;
    }
    .catalogo-inline-btns .btn-catalogo{ flex:1; }
}


/* ==========================================================================
   LECTOR DE CATÁLOGO
   No es un modal: se despliega DENTRO de la página, bajo las tarjetas.
   Las páginas se dibujan con PDF.js en <canvas>, así que el texto se ve
   nítido a cualquier zoom, como en un lector de PDF.
   ========================================================================== */

.cat-lector{
    display:none;
    margin-top:28px;
    background:#241338;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 22px 60px rgba(38,12,66,.28);
    scroll-margin-top:96px;
}

.cat-lector.abierto{ display:block; }

/* --- barra de herramientas --- */
.cat-lector-barra{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 16px;
    background:linear-gradient(135deg,var(--purple),var(--pink));
    color:var(--white);
    flex-wrap:wrap;
}

.cat-lector-titulo{
    font-family:'Fredoka One',cursive;
    font-size:1.02rem;
    line-height:1.25;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.cat-lector-controles{
    display:flex;
    align-items:center;
    gap:7px;
    flex:none;
}

.cat-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.18);
    color:var(--white);
    font-size:.92rem;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease, transform .2s ease;
}
.cat-btn:hover:not([disabled]){ background:rgba(255,255,255,.34); transform:translateY(-1px); }
.cat-btn[disabled]{ opacity:.35; cursor:default; }
.cat-btn:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }
.cat-cerrar:hover:not([disabled]){ background:rgba(0,0,0,.32); }

.cat-sep{
    width:1px;
    height:24px;
    background:rgba(255,255,255,.28);
    margin:0 3px;
}

.cat-lector-contador{
    font-weight:800;
    font-size:.86rem;
    min-width:56px;
    text-align:center;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

/* --- zona de páginas: desplazamiento continuo --- */
.cat-lector-zona{
    height:78vh;
    min-height:420px;
    max-height:900px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    background:#1B0E2B;
    padding:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    overscroll-behavior:contain;   /* al llegar al final no arrastra la página */
}

.cat-pagina{
    position:relative;
    flex:none;
    background:#FFFFFF;
    border-radius:6px;
    box-shadow:0 8px 26px rgba(0,0,0,.4);
    overflow:hidden;
}

.cat-lienzo{
    display:block;
    border-radius:6px;
    user-select:none;
    -webkit-user-drag:none;
}

/* número de página mientras aún no se ha dibujado */
.cat-pagina-num{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Fredoka One',cursive;
    font-size:2.2rem;
    color:#D9CFE6;
    pointer-events:none;
}
.cat-pagina.lista .cat-pagina-num{ display:none; }

.cat-lector-aviso{
    color:rgba(255,255,255,.8);
    font-weight:600;
    padding:60px 20px;
    text-align:center;
    margin:auto;
}
.cat-lector-aviso.error{ color:#FFC9B8; }

/* la tarjeta cuyo catálogo está abierto */
.btn-catalogo.ver.activo{
    background:linear-gradient(135deg,#0E9E7E,#25D366);
}

/* ==========================================================================
   RESPONSIVE DEL LECTOR
   ========================================================================== */

@media (max-width:768px){
    .cat-lector{ border-radius:20px; margin-top:22px; }
    .cat-lector-barra{ padding:10px 12px; gap:10px; }
    .cat-lector-titulo{ font-size:.9rem; flex:1 1 100%; }
    .cat-lector-controles{ width:100%; justify-content:space-between; }
    .cat-lector-zona{ height:72vh; min-height:360px; padding:10px; gap:10px; }
    .cat-btn{ width:40px; height:40px; }   /* cómodo para tocar */
}

@media (max-width:400px){
    .cat-btn{ width:36px; height:36px; font-size:.85rem; }
    .cat-lector-contador{ min-width:46px; font-size:.8rem; }
    .cat-sep{ margin:0; }
}

@media (max-width:1023px){
    .cat-lector{ scroll-margin-top:92px; }
}
@media (max-width:520px){
    .cat-lector{ scroll-margin-top:88px; }
}

@media (prefers-reduced-motion:reduce){
    .cat-btn{ transition:none; }
    .cat-lector-zona{ scroll-behavior:auto; }
}