/* ==========================================================================
   M. Martín — cáscara de autora
   Capa permanente y neutra de género. No introducir aquí nada específico de
   un título: cada libro aporta su color vía --book-accent (ver libro.css).
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
    --ink:            #1A1714;
    --ink-soft:       #4A423A;
    --ink-muted:      #7A6F63;
    --paper:          #F5F1E8;
    --paper-warm:     #EDE6D8;
    --paper-pure:     #FFFCF6;
    --rule:           #DDD3C0;

    --gold:           #C4A86A;
    --gold-deep:      #9A7C3E;
    --gold-wash:      #F0E6CE;

    /* Pieles de libro. Cada ficha redefine --book-accent / --book-wash. */
    --copa-accent:    #37605C;
    --copa-wash:      #E4EDEA;
    --fusion-accent:  #463C74;
    --fusion-wash:    #E9E5F2;
    --relato-accent:  #B0614A;
    --relato-wash:    #F6E7E1;

    --book-accent:    var(--gold-deep);
    --book-wash:      var(--gold-wash);

    --font-display:   "Cinzel", Georgia, serif;
    --font-body:      "EB Garamond", Georgia, serif;

    --size-hero:      clamp(2.3rem, 5.4vw, 3.7rem);
    --size-h2:        clamp(1.8rem, 4vw, 2.6rem);
    --size-h3:        clamp(1.15rem, 2.2vw, 1.45rem);
    --size-body:      clamp(1.05rem, 1.4vw, 1.18rem);
    --size-small:     0.875rem;

    --space-section:  clamp(4rem, 9vw, 7rem);
    --width-page:     1120px;
    --width-prose:    60ch;
    --gutter:         clamp(1.25rem, 5vw, 3rem);

    --radius:         3px;
    --transition:     200ms ease;
    --shadow-cover:   0 2px 4px rgba(26, 23, 20, 0.08),
                      0 12px 28px -12px rgba(26, 23, 20, 0.32);
}

/* --- Reset -------------------------------------------------------------- */

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    margin: 0 0 0.6em;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Foco visible para quien navega con teclado. */
:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 3px;
    border-radius: 2px;
}

/* --- Primitivas de layout ----------------------------------------------- */

.wrap {
    width: 100%;
    max-width: var(--width-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 760px; }

section { padding-block: var(--space-section); }

.section--warm { background: var(--paper-warm); }
.section--ink  { background: var(--ink); color: var(--paper); }

.eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 1.1rem;
}

/* Filete fino antes del antetítulo: detalle de oficio editorial. */
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    margin-right: 0.75rem;
    vertical-align: middle;
    background: currentColor;
    opacity: 0.55;
}
.center .eyebrow::after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    margin-left: 0.75rem;
    vertical-align: middle;
    background: currentColor;
    opacity: 0.55;
}

.section--ink .eyebrow { color: var(--gold); }

.lead {
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    color: var(--ink-soft);
    max-width: var(--width-prose);
}

/* Para frases cortas que deben caber en una sola línea en escritorio. */
.lead--wide { max-width: none; }

.badge-free {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.8rem;
    padding: 0.4rem 0.95rem;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--gold);
    border-radius: 99px;
}


.section--ink .lead { color: rgba(245, 241, 232, 0.8); }

.center { text-align: center; }
.center .lead, .center .eyebrow { margin-inline: auto; }

.rule {
    width: 60px;
    height: 1px;
    background: var(--gold);
    border: 0;
    margin: 2rem 0;
}
.center .rule { margin-inline: auto; }

/* --- Botones ------------------------------------------------------------ */

.btn {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.05rem 2.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
}

.btn--primary {
    background: var(--ink);
    color: var(--paper-pure);
}
.btn--primary:hover { background: var(--book-accent); transform: translateY(-2px); }

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule);
}
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }

.section--ink .btn--primary { background: var(--gold); color: var(--ink); }
.section--ink .btn--primary:hover { background: var(--paper-pure); }
.section--ink .btn--ghost { color: var(--paper); border-color: rgba(245, 241, 232, 0.35); }
.section--ink .btn--ghost:hover { border-color: var(--paper); }

.btn--block { width: 100%; }

.link-arrow {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--book-accent);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity var(--transition);
}
.link-arrow:hover { opacity: 0.6; }

/* --- Barra de lanzamiento ----------------------------------------------- */

.strip {
    background: var(--ink);
    color: var(--paper);
    font-size: 0.9rem;
    text-align: center;
    padding: 0.7rem var(--gutter);
}
.strip a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.strip__label {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-right: 0.6rem;
}

/* --- Navegación --------------------------------------------------------- */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.1rem var(--gutter);
    background: rgba(245, 241, 232, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition);
}
.nav--scrolled { border-bottom-color: var(--rule); }

.nav__brand {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
}

.nav__links { display: flex; align-items: center; gap: 1.8rem; }

.nav__link {
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--ink-soft);
    transition: color var(--transition);
}
.nav__link:hover { color: var(--ink); }

.nav__cta {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.7rem 1.3rem;
    background: var(--ink);
    color: var(--paper-pure);
    border-radius: var(--radius);
    transition: background var(--transition);
}
.nav__cta:hover { background: var(--relato-accent); }

/* En el móvil los enlaces caben, pero solo apretando las separaciones y
   bajando un punto el tamaño: sumados miden 297 px de los 350 disponibles. */
@media (max-width: 720px) {
    .nav { gap: 0.7rem; padding-inline: 1rem; }
    .nav__brand { font-size: 0.86rem; letter-spacing: 0.14em; }
    .nav__links { gap: 0.9rem; }
    .nav__link { font-size: 0.86rem; }
    .nav__cta { padding: 0.65rem 0.9rem; font-size: 0.64rem; letter-spacing: 0.08em; }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
    padding-block: clamp(3rem, 8vw, 6rem);
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
    overflow: hidden;
}

.hero__grid { display: grid; gap: clamp(3rem, 7vw, 5rem); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } }

.hero__byline {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.4rem;
}

.hero__avatar {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 22%;
    border: 1px solid var(--rule);
}

.hero__name {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--ink-soft);
    margin: 0;
}

.hero__title {
    font-size: var(--size-hero);
    letter-spacing: 0;
    margin-bottom: 0;
    text-wrap: balance;
}
.hero__title em { font-style: italic; color: var(--gold-deep); }

.hero__sub {
    font-size: clamp(1.1rem, 2vw, 1.28rem);
    color: var(--ink-soft);
    max-width: 46ch;
    margin: 1.4rem 0 2.2rem;
}

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
}

/* Las dos portadas en abanico: lo primero que se ve es que hay libros. */
.hero__covers {
    position: relative;
    display: flex;
    justify-content: center;
    padding-block: 1.5rem;
}

.hero__cover {
    width: clamp(160px, 34vw, 250px);
    border-radius: var(--radius);
    box-shadow: 0 26px 60px -22px rgba(26, 23, 20, 0.6);
    transition: transform 400ms ease;
}

/* La Copa Celestial va delante y a la izquierda: es el libro I. */
.hero__cover--front {
    transform: rotate(-5deg) translateX(6%);
    position: relative;
    z-index: 2;
}
.hero__cover--back {
    transform: rotate(5deg) translateX(-6%);
    filter: brightness(0.94);
}

.hero__covers:hover .hero__cover--front { transform: rotate(-8deg) translateX(2%); }
.hero__covers:hover .hero__cover--back { transform: rotate(8deg) translateX(-2%); }

/* --- Formulario --------------------------------------------------------- */

.form { max-width: 460px; }
.center .form { margin-inline: auto; }

.form__row { display: grid; gap: 0.8rem; margin-bottom: 1rem; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }

.form__input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.95rem 1.1rem;
    color: var(--ink);
    background: var(--paper-pure);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    transition: border-color var(--transition);
}
.form__input:focus {
    outline: none;
    border-color: var(--book-accent);
}
.form__input::placeholder { color: var(--ink-muted); }

.form__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: var(--size-small);
    line-height: 1.55;
    color: var(--ink-soft);
    text-align: left;
    margin-bottom: 1.2rem;
    cursor: pointer;
}
.form__consent input { margin-top: 0.3rem; flex-shrink: 0; accent-color: var(--book-accent); }
.form__consent a { color: var(--book-accent); }

.form__note {
    font-size: var(--size-small);
    color: var(--ink-muted);
    margin-top: 1rem;
}

.form__error {
    font-size: var(--size-small);
    color: #A33B2A;
    margin-top: 0.8rem;
}
.section--ink .form__error { color: #E5927F; }

.form__input--error {
    border-color: #A33B2A;
    background: rgba(163, 59, 42, 0.04);
}

/* Botón para aceptar la corrección de un dominio mal escrito. */
.form__fix {
    font-family: var(--font-body);
    font-size: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    padding: 0;
    cursor: pointer;
}
.form__fix:hover { opacity: 0.7; }

/* Campo trampa: fuera de la pantalla, pero no oculto con display:none,
   porque hay robots que se saltan lo que está oculto de esa forma. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }

.section--ink .form__input { background: rgba(255, 252, 246, 0.06); border-color: rgba(245, 241, 232, 0.25); color: var(--paper); }
.section--ink .form__input::placeholder { color: rgba(245, 241, 232, 0.5); }
.section--ink .form__consent { color: rgba(245, 241, 232, 0.75); }
.section--ink .form__consent a,
.section--ink .form__note { color: var(--gold); }

.form__success {
    border: 1px solid var(--gold);
    background: var(--gold-wash);
    color: var(--ink);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
}
.form__success h3 { margin-bottom: 0.5rem; }

/* --- Prueba social -------------------------------------------------------
   El dato más persuasivo que existe para vender un libro: que otros ya lo
   han leído y les ha gustado.
   ------------------------------------------------------------------------ */

.rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.3rem;
    font-size: 0.95rem;
    color: var(--ink-muted);
}

.rating__stars {
    color: var(--gold-deep);
    letter-spacing: 0.1em;
    font-size: 0.9rem;
}

/* --- Etiquetas (tropes) -------------------------------------------------- */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 1.8rem 0 0;
}

.tags li {
    font-family: var(--font-display);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.5rem 0.95rem;
    color: var(--gold-deep);
    background: var(--gold-wash);
    border-radius: 99px;
}

/* --- Presentación de la trilogía ---------------------------------------- */

/* Una sola columna, centrada bajo las dos portadas: se lee de corrido y no
   parece colgar del primer libro. */
.trilogy {
    max-width: 800px;
    margin: clamp(3rem, 6vw, 4.5rem) auto 0;
    padding-block: 2.2rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
}


/* --- Qué recibes --------------------------------------------------------- */

.perk { margin-bottom: 1.2rem; }

.perk__label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--relato-accent);
    margin-bottom: 0.35rem;
}
.section--ink .perk__label { color: var(--gold); }

/* --- Redes y contacto ---------------------------------------------------- */

.social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
}

.social a {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.75rem 1.3rem;
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 99px;
    background: var(--paper-pure);
    transition: border-color var(--transition), color var(--transition),
                transform var(--transition);
}
.social a:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
}

.center .social { justify-content: center; }

.section--ink .social a {
    color: var(--paper);
    background: transparent;
    border-color: rgba(245, 241, 232, 0.3);
}
.section--ink .social a:hover { border-color: var(--gold); color: var(--gold); }

/* --- Rejilla de libros -------------------------------------------------- */

.books {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
    margin-top: 3.5rem;
}
@media (min-width: 720px) { .books { grid-template-columns: 1fr 1fr; } }

.book-card { display: flex; flex-direction: column; }
.book-card__body { display: flex; flex-direction: column; flex: 1; }

.book-card__cover-link { display: block; position: relative; }

.book-card__cover {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-cover);
    transition: transform var(--transition);
}
.book-card__cover-link:hover .book-card__cover { transform: translateY(-4px); }

.book-card__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.45rem 0.85rem;
    background: var(--paper-pure);
    color: var(--book-accent);
    border-radius: var(--radius);
}

.book-card__series {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--book-accent);
    margin: 1.6rem 0 0.7rem;
}

.book-card__title { font-size: var(--size-h2); margin-bottom: 0.5rem; }

.book-card__hook {
    font-style: italic;
    color: var(--ink-soft);
    margin-bottom: 1rem;
}

.book-card__synopsis {
    color: var(--ink-soft);
    font-size: 1.02rem;
    margin-bottom: 1.6rem;
}

.book-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: auto; }

.books__note {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
    font-size: 1.05rem;
    color: var(--ink-soft);
    max-width: var(--width-prose);
}

/* --- Portada tipográfica (marcador hasta tener la del relato) ----------- */

.typecover {
    aspect-ratio: 1700 / 2560;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
    padding: 2.5rem 1.8rem;
    background: linear-gradient(170deg, #C97C63 0%, var(--relato-accent) 55%, #7E3F31 100%);
    color: var(--paper-pure);
    border-radius: var(--radius);
    box-shadow: var(--shadow-cover);
}
.typecover__author {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.85;
}

.typecover__kicker {
    padding: 0.5rem 1.1rem;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--relato-accent);
    background: var(--paper-pure);
    border-radius: 99px;
}
.typecover__title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.1;
    margin: 0;
}
.typecover__rule { width: 48px; height: 1px; background: currentColor; opacity: 0.6; }
.typecover__sub { font-style: italic; font-size: 0.98rem; line-height: 1.5; max-width: 22ch; opacity: 0.92; }

/* --- Portada con fotografía ---------------------------------------------
   Misma forma que una portada de libro, con la imagen de fondo y el título
   encima: así el lector lee "esto es algo que me voy a descargar" y no
   "esto es una ilustración decorativa".
   ------------------------------------------------------------------------ */

.photocover {
    position: relative;
    aspect-ratio: 1700 / 2560;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-cover);
}

.photocover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
}

.photocover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(26, 23, 20, 0.92) 0%,
        rgba(26, 23, 20, 0.6) 28%,
        rgba(26, 23, 20, 0) 62%);
}

.photocover__text {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.6rem 1.6rem 1.5rem;
    margin: 0;
    text-align: center;
    color: var(--paper-pure);
    font-style: italic;
    font-size: clamp(1.02rem, 2.4vw, 1.18rem);
    line-height: 1.45;
}

/* Los libros y Sobre mí comparten fondo, así que entre ellos basta con una
   pausa, no con el hueco completo entre secciones: se leía como un vacío. */
#libros   { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
#sobre-mi { padding-top:    clamp(2.5rem, 5vw, 3.5rem); }

/* --- Página de gracias ---------------------------------------------------
   Una página entera en vez de una caja: se ve, se celebra, y tiene URL propia
   para poder medir cuánta gente se suscribe de verdad.
   ------------------------------------------------------------------------ */

.thanks { padding-block: clamp(4rem, 10vw, 7rem); }

.thanks__mark {
    font-size: 1.6rem;
    color: var(--gold);
    margin-bottom: 1.2rem;
}

.thanks__title {
    font-size: clamp(2.2rem, 5.4vw, 3.2rem);
    margin-bottom: 0.8rem;
}

.thanks__note {
    max-width: 48ch;
    margin-inline: auto;
    margin-top: 1.6rem;
    font-size: 1rem;
    color: var(--ink-muted);
}

.thanks__sign {
    margin-top: 2.6rem;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-style: italic;
    color: var(--gold-deep);
}

.thanks__author {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 0.4rem;
}

/* --- Siguiente libro ----------------------------------------------------- */

.upnext {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.8rem);
    justify-items: center;
    align-items: center;
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
}

/* Portada a la izquierda, texto a la derecha; deliberadamente pequeña, porque
   este bloque va DESPUÉS del formulario y no debe competir con él. */
@media (min-width: 620px) {
    .upnext {
        grid-template-columns: auto 1fr;
        justify-items: start;
        text-align: left;
    }
}

.upnext__cover {
    width: clamp(110px, 16vw, 145px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-cover);
}

.upnext__body h2 { margin-bottom: 0.4rem; }
.upnext__body p { margin-bottom: 1.4rem; }

/* --- Bloque del relato -------------------------------------------------- */

.relato { --book-accent: var(--relato-accent); --book-wash: var(--relato-wash); }

.relato__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 860px) { .relato__grid { grid-template-columns: 0.72fr 1.28fr; } }

.relato__list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    /* Hueco para la barra fija: si no, al saltar aquí desde un botón la
       primera línea queda escondida debajo. */
    scroll-margin-top: 92px;
}
.relato__list li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.7rem;
    color: var(--ink-soft);
}
.relato__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--relato-accent);
}
.section--ink .relato__list li { color: rgba(245, 241, 232, 0.8); }

/* --- Sobre mí ----------------------------------------------------------- */

.about { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 820px) { .about { grid-template-columns: 0.8fr 1.2fr; } }

.about__photo {
    width: 100%;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: 16px 16px 0 -1px var(--gold-wash),
                0 14px 30px -16px rgba(26, 23, 20, 0.3);
}

.about__services {
    margin-top: 1.8rem;
    padding: 1.3rem 1.5rem;
    border-left: 2px solid var(--gold);
    background: var(--paper-pure);
    font-size: 1rem;
    color: var(--ink-soft);
}
.about__services a { color: var(--gold-deep); }

/* --- Pie ---------------------------------------------------------------- */

.footer {
    background: var(--ink);
    color: rgba(245, 241, 232, 0.75);
    padding-block: 3.5rem 2rem;
    font-size: 0.95rem;
}

.footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(245, 241, 232, 0.14);
}

.footer__brand {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--paper);
    text-decoration: none;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.footer__links a { text-decoration: none; transition: color var(--transition); }
.footer__links a:hover { color: var(--gold); }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
    justify-content: space-between;
    padding-top: 1.6rem;
    font-size: var(--size-small);
    color: rgba(245, 241, 232, 0.5);
}
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { color: var(--gold); }

/* --- Páginas de texto legal --------------------------------------------- */

.legal { padding-block: clamp(3rem, 7vw, 5rem); }
.legal h1 { font-size: var(--size-h2); }
.legal h2 { font-size: var(--size-h3); margin-top: 2.5rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.5rem; }

/* --- Ventana de la lista de correo --------------------------------------
   No aparece al entrar: se dispara a media página o cuando el visitante va a
   irse. En móvil es un panel inferior que se cierra deslizando hacia abajo.
   ------------------------------------------------------------------------ */

.popup {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    background: rgba(26, 23, 20, 0.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}
.popup.is-open { opacity: 1; pointer-events: auto; }

.popup__panel {
    --book-accent: var(--relato-accent);
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100dvh - 2 * var(--gutter));
    overflow-y: auto;
    padding: clamp(1.8rem, 5vw, 2.6rem);
    background: var(--paper-pure);
    border-radius: var(--radius);
    box-shadow: 0 30px 70px -20px rgba(26, 23, 20, 0.55);
    transform: translateY(24px) scale(0.98);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.popup.is-open .popup__panel { transform: none; }

.popup__close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink-muted);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.popup__close:hover { color: var(--ink); background: var(--paper-warm); }

.popup__handle { display: none; }

.popup__eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--relato-accent);
    margin-bottom: 0.9rem;
}

.popup__title { font-size: clamp(1.5rem, 4vw, 1.9rem); margin-bottom: 0.7rem; }

.popup__text { font-size: 1.02rem; color: var(--ink-soft); margin-bottom: 1.5rem; }

.popup .form { max-width: none; }
.popup .form__note { margin-top: 0.8rem; }

/* Móvil: panel inferior que se arrastra hacia abajo para cerrar. */
@media (max-width: 640px) {
    .popup { align-items: flex-end; padding: 0; }

    .popup__panel {
        max-width: none;
        padding-top: 2.2rem;
        padding-bottom: calc(1.8rem + env(safe-area-inset-bottom, 0px));
        border-radius: 14px 14px 0 0;
        transform: translateY(100%);
        touch-action: pan-y;
    }
    .popup.is-open .popup__panel { transform: none; }
    .popup__panel.is-dragging { transition: none; }

    .popup__handle {
        display: block;
        position: absolute;
        top: 0.7rem;
        left: 50%;
        width: 44px;
        height: 4px;
        margin-left: -22px;
        background: var(--rule);
        border-radius: 99px;
    }

    .popup__close { top: 1rem; right: 0.5rem; }
}

/* --- Ajustes de móvil ----------------------------------------------------
   En una pantalla de 390 px, una portada a ancho completo ocupa dos tercios
   de lo que se ve. Lo que en escritorio está proporcionado, apilado resulta
   abrumador, así que aquí se reduce y se pasa a disposiciones horizontales.
   ------------------------------------------------------------------------ */

@media (max-width: 719px) {

    section { padding-block: 3.2rem; }

    /* Ficha de libro en horizontal: portada pequeña a la izquierda, datos a
       la derecha. Se lee como un estante, no como un cartel.
       Con flex el bloque de texto se centra solo frente a la portada, tenga
       tres elementos o cuatro; con rejilla quedaba descolocado. */
    .book-card {
        flex-direction: row;
        align-items: center;
        gap: 1.2rem;
    }
    .book-card__cover-link { flex: 0 0 118px; }
    .book-card__body { flex: 1 1 auto; }

    .book-card__series { margin-top: 0; margin-bottom: 0.4rem; font-size: 0.58rem; }
    /* El título cabe en una línea junto a la portada. */
    .book-card__title {
        font-size: 1.2rem;
        letter-spacing: 0;
        white-space: nowrap;
        margin-bottom: 0.9rem;
    }
    .book-card__actions .btn { padding: 0.7rem 1rem; font-size: 0.62rem; letter-spacing: 0.08em; }
    .books { gap: 2.2rem; margin-top: 2.5rem; }

    .book-card__badge {
        top: 0.4rem;
        left: 0.4rem;
        padding: 0.3rem 0.5rem;
        font-size: 0.5rem;
        letter-spacing: 0.08em;
    }

    /* Las portadas de los regalos siguen vendiendo, pero sin comerse la
       pantalla entera. */
    /* Portada arriba y centrada, con aire alrededor: flotando a un lado el
       texto quedaba en columnas estrechas y todo se veía apretado. */
    .relato__grid { display: block; }
    .relato__grid > div:first-child { margin-bottom: 1.8rem; }

    .typecover,
    .photocover { max-width: 150px; margin-inline: auto; }

    .typecover { padding: 1.4rem 0.8rem; gap: 0.7rem; }
    .typecover__kicker {
        white-space: nowrap;
        font-size: 0.48rem;
        letter-spacing: 0.14em;
        padding: 0.35rem 0.75rem;
    }
    .typecover__title { font-size: 1.12rem; }
    .typecover__sub { font-size: 0.72rem; }
    .typecover__author { font-size: 0.55rem; letter-spacing: 0.18em; }

    .about__photo {
        max-width: 200px;
        margin-inline: auto;
        box-shadow: 9px 9px 0 -1px var(--gold-wash),
                    0 10px 22px -14px rgba(26, 23, 20, 0.3);
    }

    .eyebrow::before,
    .eyebrow::after { display: none; }

    .tags { gap: 0.4rem; margin-top: 1.4rem; }
    .tags li { font-size: 0.56rem; padding: 0.4rem 0.7rem; letter-spacing: 0.1em; }

    .trilogy { margin-top: 2.5rem; padding-block: 1.8rem; }

    .rating { font-size: 0.82rem; gap: 0.35rem; margin-bottom: 1rem; }
    .rating__stars { font-size: 0.8rem; }

    .about,
    .hero__grid { gap: 2.2rem; }

    /* Páginas de aterrizaje (/relato y /capitulo): el titular iba a tamaño de
       escritorio y se comía cinco líneas. */
    .relato h1 {
        font-size: 1.45rem;
        line-height: 1.25;
        margin-bottom: 1rem;
    }
    .relato .eyebrow { font-size: 0.6rem; letter-spacing: 0.16em; margin-bottom: 0.9rem; }
    .relato p { font-size: 1rem; margin-bottom: 0.95rem; }

    /* La página del QR: antetítulo y titular centrados sobre la foto, cuerpo
       alineado a la izquierda para que se lea bien. */
    .relato--pagina .eyebrow,
    .relato--pagina h1 { text-align: center; }
    .relato--pagina .photocover { max-width: 225px; }
    .relato--pagina .photocover__text {
        padding: 2.4rem 1.1rem 1.3rem;
        font-size: 0.95rem;
        line-height: 1.4;
    }
    .relato--pagina .relato__grid > div:first-child { margin-bottom: 1.6rem; }
    .relato--pagina .perk { margin-bottom: 1rem; }

    .relato__list { margin-bottom: 2.2rem; }
    .relato__list li { margin-bottom: 0.9rem; }

    /* Redes: tres botones iguales en una fila, sin ninguno descolgado. */
    .social {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.45rem;
        margin-top: 2.2rem;
    }
    /* El enlace ocupa su columna entera: como inline-block se encogía al
       texto y los botones salían de anchos distintos. */
    /* Misma forma de pastilla que en escritorio, pero ocupando toda la
       columna: como inline-block se encogían al texto. */
    .social a {
        display: block;
        padding: 1.05rem 0.3rem;
        font-size: 0.58rem;
        letter-spacing: 0.02em;
        text-align: center;
    }
}

/* --- Animación de entrada ----------------------------------------------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease, transform 600ms ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    [data-reveal] { opacity: 1; transform: none; }
}

/* Móviles pequeños (iPhone SE y similares). */
@media (max-width: 359px) {
    /* En la barra ya no caben los enlaces: manda el botón, que es lo que convierte. */
    .nav__links .nav__link { display: none; }

    /* El título dejaba de caber en una línea y empujaba la ficha fuera de la
       pantalla; aquí sí se le deja partir. */
    .book-card__title { white-space: normal; font-size: 1.05rem; }
    .book-card__cover-link { flex: 0 0 100px; }
    .book-card__actions .btn { font-size: 0.58rem; padding: 0.65rem 0.8rem; }

    /* Las dos portadas del hero, giradas, se salían un pelo por el borde. */
    .hero__cover { width: 132px; }
}