/* Valens Books · home y /martina/. Bandas a todo el ancho con el contenido
   centrado; lo común (botones, portadas, formularios) está en estilos.css. */

.banda { padding: 56px 16px; }
.banda-interior { max-width: 1080px; margin: 0 auto; }
.banda h2 { font-size: clamp(1.6rem, 2.4vw + 1rem, 2.3rem); margin: 0 0 .5em; }
.banda-intro { max-width: 720px; }
.banda-cta { margin: 28px 0 0; }
.banda p { max-width: 720px; }

/* ── 01 · Hero ────────────────────────────────────────────────────────── */

.banda-hero { padding-top: 48px; }
.hero { display: grid; gap: 36px; align-items: center; }
.hero h1 { font-size: clamp(2rem, 3.6vw + 1rem, 3.3rem); margin: 0 0 .5em; }
.hero h1 span { display: block; }
.hero-entradilla { font-size: 1.12rem; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-acciones .boton { padding: 20px 44px; font-size: 1.3rem; }   /* el botón principal de la web, más grande que el resto */
.hero-portadas { display: flex; justify-content: center; }
.hero-portadas a { display: block; width: min(300px, 70vw); }
.hero-portadas a + a { margin-left: -70px; margin-top: 40px; }

/* Portadas en 3D: cada libro girado hacia el titular, con el canto de las
   páginas a la derecha. El giro va en la imagen (picture) y no en el enlace,
   porque el enlace lo mueve la animación de entrada (animaciones.js). */
.hero-portadas a { filter: drop-shadow(18px 26px 22px rgba(21, 23, 28, .28)); }
/* Cada libro: --inclinacion gira la imagen ya en 3D; --giro, el libro en su propio
   plano (antes del giro 3D); --z, la profundidad. Cada libro tiene su perspectiva, así
   que sin --z el canto cercano de Casa Cantarranas (detrás) se veía más alto que el
   lejano de Nochebuena (delante): por eso una va 60px más lejos y la otra 40px más cerca. */
.hero-portadas a { --inclinacion: 12deg; --giro: -10deg; --z: -60px; }
.hero-portadas a + a { --inclinacion: 12deg; --giro: 0deg; --z: 40px; }
.hero-portadas a > * {
    display: block;
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(1000px) translateZ(var(--z, 0px)) rotate(var(--inclinacion)) rotateY(-28deg) rotate(var(--giro, 0deg));
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.hero-portadas a:hover > * { transform: perspective(1000px) translateZ(var(--z, 0px)) rotate(var(--inclinacion)) rotateY(-14deg) rotate(var(--giro, 0deg)); }
.hero-portadas .portada { box-shadow: none; border-radius: 2px 4px 4px 2px; }
.hero-portadas a > *::before {   /* el canto de las páginas (algo más grueso que el real, para que se vea) */
    content: "";
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 100%;
    width: 7%;
    transform-origin: left center;
    transform: rotateY(90deg);
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .3)),
        repeating-linear-gradient(90deg, #f6f1e6 0 1px, #ddd5c4 1px 2px);
}
.hero-portadas a > *::after {    /* luz: el pliegue del lomo a la izquierda y algo de sombra a la derecha */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px 4px 4px 2px;
    pointer-events: none;
    transform: translateZ(.5px);
    background: linear-gradient(90deg,
        rgba(0, 0, 0, .3) 0, rgba(255, 255, 255, .25) 1.4%, rgba(0, 0, 0, .14) 3.2%,
        rgba(255, 255, 255, .08) 6%, rgba(255, 255, 255, 0) 14%,
        rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .14) 100%);
}
@media (prefers-reduced-motion: reduce) {
    .hero-portadas a > * { transition: none; }
}
@media (max-width: 859px) {
    .hero { gap: 24px; }
    .hero-portadas a { width: min(190px, 50vw); }   /* que la banda de Navidad asome en la primera pantalla */
}
@media (min-width: 860px) {
    .hero { grid-template-columns: 1.15fr 1fr; gap: 56px; }
    /* En escritorio el hero llena casi toda la primera pantalla, con el contenido
       centrado; abajo asoma la banda siguiente para que se vea que hay más. */
    .banda-hero { display: flex; align-items: center; min-height: clamp(600px, 80vh, 860px); padding-top: 64px; padding-bottom: 72px; }
    .banda-hero > .banda-interior { flex: 1; }
}

/* ── 02 · Navidad ─────────────────────────────────────────────────────── */

.banda-navidad { background: linear-gradient(142deg, #1d1c1c, #6b6b6b); color: #e9eaee; }
.banda-navidad .antetitulo { color: #ff6b74; }
.banda-navidad h2 { color: #fff; }
.navidad { display: grid; gap: 32px; align-items: center; }
.navidad-destacado { font-size: 1.25rem; color: #fff; }
.banda-navidad .boton { background: var(--rojo); color: #fff; }
.navidad-visual { display: flex; flex-direction: column; align-items: center; gap: 26px; }

/* Sello «24 + 13 = 37»: dos puertas de calendario de Adviento como las de la
   portada de «Nochebuena bajo sospecha» (papel, número rojo y bocallave). */
.sello-casos { text-align: center; }
.sello-puertas { display: flex; align-items: center; justify-content: center; gap: 10px; }
.puerta {
    position: relative;
    width: 128px;
    padding: 14px 10px 30px;
    background: #f4e9d6;
    color: #2a1d14;
    border-radius: 3px;
    box-shadow: inset 0 0 0 4px #f4e9d6, inset 0 0 0 5px rgba(42, 29, 20, .35), 0 8px 18px -8px rgba(0, 0, 0, .6);
    font-family: var(--titulos);
    line-height: 1.15;
}
.puerta-num { display: block; font-size: 3.4rem; font-weight: 800; font-stretch: 85%; line-height: 1; color: var(--rojo); }
.puerta-texto { display: block; margin-top: 6px; font-size: .85rem; font-weight: 600; }
.puerta-fecha { display: block; margin-top: 2px; font-family: var(--serif); font-style: italic; font-size: .8rem; color: #6b5340; }
.puerta::after {   /* la bocallave */
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 7px;
    height: 12px;
    margin-left: -3.5px;
    background: radial-gradient(circle at 50% 3.5px, #2a1d14 3.2px, transparent 3.6px),
                linear-gradient(#2a1d14, #2a1d14) 50% 100% / 2.4px 7px no-repeat;
    opacity: .75;
}
.sello-signo { font-family: var(--titulos); font-size: 2.2rem; font-weight: 700; color: #fff; }
.sello-total { margin: 16px 0 0; font-family: var(--titulos); font-size: 1.25rem; color: #e9eaee; }
.sello-total span { color: #ff6b74; font-weight: 700; margin-right: .2em; }
.sello-total strong { color: #fff; font-weight: 800; }
.navidad-visual picture, .navidad-visual .portada { width: min(280px, 70vw); }
@media (min-width: 860px) {
    .navidad { grid-template-columns: 1.4fr 1fr; gap: 56px; }
}

/* ── 03 y 05 · Tarjetas ───────────────────────────────────────────────── */

.tarjetas { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }
.tarjeta { padding: 22px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); }
.tarjeta h3 { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.2; }
.tarjeta h3 a { color: inherit; text-decoration: none; }
.tarjeta h3 a:hover { color: var(--acento); text-decoration: underline; }
.tarjeta p { margin: 0 0 10px; }
.tarjeta-dato { font-size: .9rem; color: var(--tinta-suave); }

.tarjetas-libros .tarjeta { display: grid; grid-template-columns: 100px 1fr; gap: 20px; align-items: start; }
.tarjeta-portada { display: block; }
.tarjeta-portada .portada-vacia { font-size: .8rem; padding: 8px; }
.enlace-flecha { font-weight: 600; }
@media (min-width: 760px) {
    .tarjetas-libros { grid-template-columns: 1fr 1fr; }
    .tarjetas-libros .tarjeta { grid-template-columns: 130px 1fr; }
    .tarjetas-guias { grid-template-columns: repeat(3, 1fr); }
}

.banda-martina { background: var(--papel-oscuro); }
/* Guías: texto en columnas, sin cajas. */
.tarjetas-guias .tarjeta { padding: 0; background: none; border: 0; border-radius: 0; }
.tarjetas-guias .tarjeta h3 a { color: var(--acento); }   /* el titular, en el color de acento: se ve que es un enlace */

/* ── 04 · El caso del día ─────────────────────────────────────────────── */

.banda-caso { background: var(--noche); color: #e9eaee; }
.banda-caso h2 { color: #fff; }
.banda-caso .boton { background: #fff; color: var(--noche); }

/* ── 06 y 07 · Estoikids y editorial ──────────────────────────────────── */

.banda-estoikids { background: #eef3f7; }
.estoikids { display: grid; gap: 28px; align-items: center; }
.estoikids-portadas { display: flex; gap: 16px; justify-content: center; }
.estoikids-portadas > * { width: min(220px, 60vw); }
@media (min-width: 760px) {
    .estoikids { grid-template-columns: auto 1fr; gap: 48px; }
}
@media (min-width: 860px) {   /* más aire en escritorio */
    .banda-martina, .banda-guias, .banda-estoikids, .banda-editorial, .banda-novedades { padding-top: 88px; padding-bottom: 88px; }
}
.banda-editorial { border-top: 1px solid var(--linea); }

/* ── 08 · Novedades ───────────────────────────────────────────────────── */

.banda-novedades { background: var(--noche); color: #e9eaee; }
.banda-novedades h2 { color: #fff; }
.novedades { display: grid; gap: 24px; }
.banda-novedades .formulario { margin: 0; }
.banda-novedades .campo label { color: #fff; }
.banda-novedades .letra-pequena, .banda-novedades .letra-pequena a { color: #a9adb5; }
.banda-novedades .boton { background: #fff; color: var(--noche); }
.banda-novedades .error { color: #ffb4a8; }
@media (min-width: 860px) {
    .novedades { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
}

/* ── /martina/ ────────────────────────────────────────────────────────── */

.coleccion-mas { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--linea); }
.coleccion-mas ul { padding-left: 1.2em; }
.coleccion-mas li { margin: 6px 0; }

/* ── /martina/: el caso de hoy (solo con el juego activo) ─────────────── */

.caso-hoy {
    display: grid; gap: 20px; align-items: center; margin: 8px 0 40px; padding: 26px 24px;
    background: var(--noche); color: #e9eaee; border-radius: 10px;
}
.caso-hoy h2 { margin: 0 0 .3em; color: #fff; font-size: 1.6rem; }
.caso-hoy p { margin: 0 0 1em; }
.caso-hoy-ante { margin: 0 0 .3em !important; font: 600 .8rem var(--titulos); letter-spacing: .1em; text-transform: uppercase; color: var(--oro); }
.caso-hoy .boton { background: #fff; color: var(--noche); }
.caso-hoy-sospechosos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.caso-hoy-sospechosos li {
    width: 84px; padding: 5px 5px 6px; background: #fff; color: var(--tinta); border-radius: 2px; text-align: center;
    transform: rotate(-2deg); box-shadow: 0 8px 16px -8px rgba(0,0,0,.6);
    font: 400 .8rem/1.2 "Special Elite", "Courier New", monospace;
}
.caso-hoy-sospechosos li:nth-child(2n) { transform: rotate(2deg); }
.caso-hoy-sospechosos img { width: 100%; height: auto; margin-bottom: 4px; }
@media (min-width: 760px) {
    .caso-hoy { grid-template-columns: 1.3fr 1fr; padding: 32px 36px; }
}