/* ==========================================================================
   raffty.com — hoja única.
   Se sirve con ?v=filemtime() desde asset(), así que Hostinger nunca entrega
   una versión vieja. Editar este archivo es seguro.
   ========================================================================== */

/* --------------------------------------------------------------- Tokens
   Colores tomados del sitio en producción (post-370.css de Elementor). */
:root {
    --verde:        #5B8685;
    --verde-osc:    #527D7C;
    --verde-claro:  #598181;
    --crema:        #F5F5EF;
    --negro:        #0E0E0E;
    --texto:        #272626;
    --blanco:       #FFFFFF;
    --borde:        #E3E3DC;

    --fuente: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Tipografía fluida: escala sola entre 360px y 1440px, sin media queries. */
    --t-hero:  clamp(2.5rem, 1.2rem + 5.8vw, 5.5rem);
    --t-h2:    clamp(1.75rem, 1.1rem + 2.9vw, 3rem);
    --t-h3:    clamp(1.15rem, 0.95rem + 0.9vw, 1.5rem);
    --t-base:  clamp(1rem, 0.96rem + 0.18vw, 1.125rem);

    /* Ritmo vertical. El sitio viejo tenía huecos de 600px; esto lo acota. */
    --seccion-y: clamp(3.5rem, 2rem + 6vw, 6rem);
    --ancho:     1200px;
    --canal:     clamp(1.25rem, 0.5rem + 3vw, 3rem);

    --radio: 6px;
}

/* --------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--crema);
    color: var(--texto);
    font-family: var(--fuente);
    font-size: var(--t-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }

h1, h2, h3 {
    color: var(--negro);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-wrap: balance;
}

p { text-wrap: pretty; }

/* aspect-ratio + height:auto evita el salto de layout al cargar cada imagen. */
img, picture, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }

/* --------------------------------------------------------------- Layout */
.contenedor {
    width: min(100% - var(--canal) * 2, var(--ancho));
    margin-inline: auto;
}

.seccion { padding-block: var(--seccion-y); }

/* El navegador no calcula layout de secciones fuera de pantalla.
   contain-intrinsic-size le da una altura estimada para que la barra
   de scroll no brinque mientras baja. */
.seccion--difiere {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* --------------------------------------------------------------- Botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.75rem;
    border: 1px solid transparent;
    border-radius: var(--radio);
    background: var(--verde);
    color: var(--blanco);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.btn:hover  { background: var(--verde-osc); }
.btn:active { transform: translateY(1px); }

.btn--light {
    background: var(--blanco);
    color: var(--verde-osc);
    border-color: var(--blanco);
}

.btn--light:hover { background: var(--crema); }

.btn--ghost {
    background: transparent;
    color: var(--blanco);
    border-color: currentColor;
}

.btn--ghost:hover { background: rgb(255 255 255 / .12); }

/* --------------------------------------------------------------- Títulos de sección */
.seccion__titulo {
    font-size: var(--t-h2);
    text-align: center;
    margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.seccion__titulo--izq { text-align: left; }

/* =========================================================================
   HOME
   ========================================================================= */

/* --------------------------------------------------------------- Splash
   Pantalla verde de entrada. El original dejaba el logo suelto en medio de
   un lienzo vacío; aquí el contenido va centrado y el chevron anclado abajo,
   así no queda hueco muerto en pantallas altas.
   100svh y no 100vh: en móvil la barra del navegador no recorta el chevron. */
.splash {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-content: center;
    padding: var(--canal);
    background: var(--verde);
    color: var(--blanco);
    text-align: center;
}

.splash__contenido { display: grid; justify-items: center; gap: 1.5rem; }

.splash__logo { width: min(560px, 78vw); height: auto; }

.splash__titulo {
    color: var(--blanco);
    font-size: var(--t-h3);
    letter-spacing: .02em;
}

.splash__bajar {
    position: absolute;
    inset-inline: 0;
    bottom: clamp(1.5rem, 4vh, 3rem);
    margin-inline: auto;
    width: 56px; height: 56px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--blanco);
    cursor: pointer;
    animation: rebote 2.4s ease-in-out infinite;
}

.splash__bajar:hover { background: rgb(255 255 255 / .14); }

@keyframes rebote {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(7px); }
}

/* --------------------------------------------------------------- Selector de idioma */
.idiomas { display: flex; gap: .5rem; }

.idiomas__opcion {
    min-width: 58px;
    padding: .5rem 1.1rem;
    border: 1px solid rgb(255 255 255 / .55);
    border-radius: var(--radio);
    color: var(--blanco);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.idiomas__opcion:hover { background: rgb(255 255 255 / .16); }

.idiomas__opcion.es-actual {
    background: var(--blanco);
    border-color: var(--blanco);
    color: var(--verde-osc);
}

/* --------------------------------------------------------------- Grid de libros
   auto-fit + minmax: las columnas se acomodan solas de 1 a 4 según el ancho.
   Sin media queries y sin que la última fila quede coja. */
.libros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.libro {
    display: block;
    position: relative;
    color: inherit;
    text-decoration: none;
}

.libro__portada {
    width: 100%;
    /* Reserva el espacio antes de que cargue la imagen: nada salta al scrollear. */
    aspect-ratio: 855 / 1350;
    object-fit: cover;
    border-radius: var(--radio);
    box-shadow: 0 10px 30px rgb(0 0 0 / .12);
    transition: transform .3s ease, box-shadow .3s ease;
}

.libro:hover .libro__portada {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgb(0 0 0 / .18);
}

.libro__nombre {
    display: block;
    margin-top: .9rem;
    font-weight: 600;
    text-align: center;
}

/* Producto sin página publicada: se ve, no se puede clicar. */
.libro--pendiente { cursor: default; }
.libro--pendiente .libro__portada { filter: grayscale(.35); opacity: .58; }

.libro__badge {
    position: absolute;
    top: .75rem;
    inset-inline-start: .75rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--negro);
    color: var(--blanco);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------- Autor */
.autor__rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: center;
}

.autor__texto p + p { margin-top: 1rem; }

.autor__foto { margin: 0; }

.autor__foto img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radio);
}

/* --------------------------------------------------------------- Footer
   Fondo verde a propósito: el logo negro de marca (LOGO-RAFFTY-Negro2.png)
   trae la "y" de Raffty encimada sobre la "E" de E-BOOK — el defecto está en
   el archivo, no en el CSS, y se ve igual en el sitio actual. El logo blanco
   sí está limpio, así que el footer va en verde y usa ese.
   Cuando haya un PNG negro corregido, basta cambiar la imagen en el partial. */
.pie {
    padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    background: var(--verde);
    color: var(--blanco);
}

.pie__interior {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 2rem;
    align-items: start;
}

.pie__logo { width: 240px; height: auto; }

.pie__titulo { color: var(--blanco); font-size: 1rem; margin-bottom: 1rem; }

.pie dl { display: grid; gap: .15rem; margin: 0; }
.pie dt { font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; opacity: .72; }
.pie dd { margin: 0 0 .85rem; }
.pie dd a { text-decoration: none; }
.pie dd a:hover { text-decoration: underline; }

/* =========================================================================
   PRODUCTO
   ========================================================================= */

/* --------------------------------------------------------------- Skip link
   El sitio actual tiene uno pero en español incluso en las páginas en inglés. */
.salta-al-contenido {
    position: absolute;
    left: 50%;
    top: -100px;
    z-index: 100;
    transform: translateX(-50%);
    padding: .75rem 1.5rem;
    border-radius: 0 0 var(--radio) var(--radio);
    background: var(--negro);
    color: var(--blanco);
    text-decoration: none;
    transition: top .2s ease;
}

.salta-al-contenido:focus { top: 0; }

/* --------------------------------------------------------------- Cabecera */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(255 255 255 / .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borde);
}

.cabecera__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
}

.cabecera__logo img { width: 150px; height: auto; }

.cabecera__acciones { display: flex; align-items: center; gap: .75rem; }

.btn--sm { padding: .5rem 1.15rem; font-size: .9rem; }

.idiomas--compacto .idiomas__opcion {
    min-width: 44px;
    padding: .35rem .7rem;
    border-color: var(--borde);
    color: var(--texto);
    font-size: .82rem;
}

.idiomas--compacto .idiomas__opcion:hover { background: var(--crema); }

.idiomas--compacto .idiomas__opcion.es-actual {
    background: var(--verde);
    border-color: var(--verde);
    color: var(--blanco);
}

/* --------------------------------------------------------------- Hero */
.hero {
    position: relative;
    min-height: min(88svh, 780px);
    display: grid;
    place-items: center;
    padding: clamp(3rem, 8vh, 6rem) var(--canal);
    background-color: var(--crema);
    background-size: cover;
    background-position: center;
    text-align: center;
}

/* El texto del original cae directo sobre la foto y en algunas zonas
   queda ilegible. Un velo suave garantiza contraste sin tapar la imagen. */
.hero__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(255 255 255 / .30) 0%, rgb(255 255 255 / .62) 55%, rgb(255 255 255 / .30) 100%);
}

.hero__contenido { position: relative; display: grid; justify-items: center; gap: 1.15rem; }

.hero__titulo { font-size: var(--t-hero); max-width: 14ch; }

.hero__subtitulo {
    font-size: var(--t-h3);
    text-transform: uppercase;
    letter-spacing: .04em;
    max-width: 22ch;
}

.hero__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1rem; }

/* --------------------------------------------------------------- Sistema */
.sistema__rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: center;
}

.sistema__bajada { font-size: var(--t-h3); font-weight: 400; line-height: 1.45; }

.sistema__libro { margin: 0; }

.sistema__libro img {
    width: min(100%, 380px);
    margin-inline: auto;
    aspect-ratio: 855 / 1350;
    object-fit: cover;
    border-radius: var(--radio);
    box-shadow: 0 20px 50px rgb(0 0 0 / .18);
}

/* --------------------------------------------------------------- Capítulos */
.capitulos__intro {
    max-width: 62ch;
    margin: -1.5rem auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.acordeon {
    max-width: 820px;
    margin-inline: auto;
    display: grid;
    gap: .6rem;
}

.capitulo {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
}

.capitulo__titulo {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;             /* quita el triángulo por defecto */
    transition: background-color .2s ease;
}

.capitulo__titulo::-webkit-details-marker { display: none; }

.capitulo__titulo:hover { background: var(--crema); }

.capitulo__num {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--verde);
    color: var(--blanco);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

/* Flecha propia, gira al abrir. */
.capitulo__titulo::after {
    content: '';
    flex: 0 0 auto;
    margin-inline-start: auto;
    width: 10px; height: 10px;
    border-right: 2px solid var(--verde);
    border-bottom: 2px solid var(--verde);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.capitulo[open] .capitulo__titulo::after { transform: rotate(-135deg) translate(-2px, -2px); }

.capitulo__cuerpo { padding: 0 1.25rem 1.25rem calc(1.25rem + 32px + .9rem); }

/* --------------------------------------------------------------- Carrusel */
.carrusel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(88%, 380px);
    gap: clamp(1rem, 2vw, 1.75rem);
    margin: 0;
    padding: 0 0 1rem;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.carrusel__item { scroll-snap-align: center; }

/* A partir de 3 columnas caben todos: se apaga el deslizamiento. */
@media (min-width: 1100px) {
    .carrusel {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, 1fr);
        overflow-x: visible;
    }
}

.testimonio {
    display: grid;
    gap: 1rem;
    height: 100%;
    margin: 0;
}

.testimonio__foto {
    width: 100%;
    aspect-ratio: 10 / 7;
    object-fit: cover;
    border-radius: var(--radio);
}

.testimonio__nombre { font-weight: 600; }

.testimonio__texto {
    margin: .5rem 0 0;
    font-style: italic;
    line-height: 1.6;
}

/* --------------------------------------------------------------- Pasos */
.pasos__lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.paso { display: grid; gap: .6rem; justify-items: center; text-align: center; }

.paso__num {
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--verde);
    color: var(--blanco);
    font-size: 1.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.paso__titulo { font-size: var(--t-h3); }

/* --------------------------------------------------------------- Beneficios */
.beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.beneficio {
    display: grid;
    gap: .6rem;
    justify-items: center;
    padding: 2rem 1.25rem;
    background: var(--blanco);
    border-radius: var(--radio);
    text-align: center;
}

.beneficio__icono { width: 72px; height: 72px; object-fit: contain; }

.beneficio__titulo { font-size: 1.05rem; }

/* --------------------------------------------------------------- Soporte */
.soporte__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1.5rem;
    margin: 0;
    text-align: center;
}

.soporte__datos dt { font-size: var(--t-h3); font-weight: 600; margin-bottom: .35rem; }
.soporte__datos dd { margin: 0; }

/* --------------------------------------------------------------- Formulario */
.contacto__caja {
    max-width: 640px;
}

.formulario {
    display: grid;
    gap: 1.15rem;
}

/* El honeypot: fuera de pantalla, no display:none.
   Los bots saltan lo que está oculto con display; esto lo rellenan igual. */
.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.campo {
    display: grid;
    gap: .35rem;
}

.campo label {
    font-weight: 600;
    font-size: .92rem;
}

.campo__opcional {
    font-weight: 400;
    opacity: .6;
}

.campo input {
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.campo input:focus {
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgb(91 134 133 / .18);
    outline: none;
}

.campo__error {
    min-height: 1.1em;
    color: #A33A2C;
    font-size: .85rem;
}

.formulario__enviar {
    justify-self: start;
    min-width: 160px;
}

.formulario__enviar:disabled {
    opacity: .6;
    cursor: progress;
}

.formulario__aviso {
    margin: 0;
    min-height: 1.4em;
    font-weight: 600;
}

.formulario__aviso:empty {
    display: none;
}

.aviso {
    padding: .85rem 1.1rem;
    border-radius: var(--radio);
    border-inline-start: 4px solid;
    font-weight: 600;
}

.aviso--ok    { border-color: var(--verde); background: rgb(91 134 133 / .10); color: var(--verde-osc); }
.aviso--error { border-color: #A33A2C;      background: rgb(163 58 44 / .08);  color: #A33A2C; }

/* --------------------------------------------------------------- Errores */
.error-page {
    min-height: 100dvh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    padding: var(--canal);
    background: var(--verde);
    color: var(--blanco);
    text-align: center;
}

.error-page__logo { width: min(320px, 70vw); margin-bottom: 1rem; }
.error-page h1    { color: var(--blanco); font-size: var(--t-h2); }
.error-page p     { max-width: 46ch; opacity: .9; }
.error-page .btn  { margin-top: 1rem; }

/* --------------------------------------------------------------- Utilidades */
.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* =========================================================================
   PUENTES ENTRE DIVISIONES

   Raffty tiene dos negocios bajo el mismo dominio: los libros (/) y el spa
   (/spa). Estas reglas viven en app.css y no en spa.css porque las usan las
   páginas de LIBROS para enlazar al spa; spa.css solo se carga en /spa.
   ========================================================================= */

.cabecera__cruce {
    color: var(--texto);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    opacity: .7;
}

.cabecera__cruce:hover { opacity: 1; color: var(--verde-osc); }

/* Franja del pie que enlaza con la otra división. La usan los dos pies. */
.pie__cruce {
    margin-top: clamp(2rem, 1rem + 3vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid rgb(255 255 255 / .2);
    font-size: .9rem;
    text-align: center;
}

/* Bloque del spa en la home de los libros. */
.puente-spa { background: var(--verde); color: var(--blanco); }

.puente-spa__interior { max-width: 46rem; }

.puente-spa__division {
    margin-bottom: .5rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .75;
}

.puente-spa__titulo { color: var(--blanco); margin-bottom: 1rem; }

.puente-spa__texto { max-width: 55ch; margin-bottom: 1.75rem; }

.puente-spa .btn {
    background: var(--blanco);
    color: var(--verde-osc);
}

.puente-spa .btn:hover { background: var(--crema); }