/* Valens Books
   Papel crema, tinta oscura y un color de acento por libro (--acento, que la
   plantilla fija en el <body> con el color de la ficha). */

:root {
    --papel: #faf6ee;
    --papel-oscuro: #f1eadc;
    --tinta: #22262e;
    --tinta-suave: #5b616c;
    --linea: #e3dccd;
    --acento: #2f5d50;
    --error: #b3261e;
    --radio: 12px;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Tipografías de la contraportada de Casa Cantarranas, alojadas aquí (ver
   public/fonts/LICENCIAS.txt). El navegador solo las descarga si se usan. */
@font-face {
    font-family: "Special Elite";
    src: url("/fonts/special-elite.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Parisienne";
    src: url("/fonts/parisienne.woff2") format("woff2");
    font-display: swap;
}

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

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--papel);
    color: var(--tinta);
    font: 17px/1.6 var(--sans);
}

main { flex: 1; width: 100%; }

h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 4vw + 1rem, 2.8rem); margin: 0 0 .4em; }
h2 { font-size: 1.3rem; margin: 2em 0 .5em; }

a { color: var(--acento); }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

/* ── Cabecera y pie ───────────────────────────────────────────────────── */

.cabecera { padding: 20px 16px 0; text-align: center; }
.cabecera-logo { display: inline-block; }
.cabecera-logo img { width: 150px; }

.pie {
    padding: 28px 16px;
    text-align: center;
    font-size: .8rem;
    color: var(--tinta-suave);
}
.pie a { color: inherit; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie span { margin: 0 .5em; }

/* ── Portada del sitio: solo el logo ──────────────────────────────────── */

.pagina-inicio main { display: flex; align-items: center; justify-content: center; }
.inicio-logo { padding: 16px; }
.inicio-logo h1 { margin: 0; }
.inicio-logo img { width: min(420px, 80vw); }
.pagina-inicio .pie { opacity: .6; }

/* ── Ficha del libro ──────────────────────────────────────────────────── */

.libro {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 16px 48px;
    display: grid;
    gap: 32px;
    align-items: start;
}
@media (min-width: 760px) {
    .libro { grid-template-columns: minmax(240px, 380px) 1fr; gap: 56px; padding-top: 56px; }
}

.portada {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 40px -12px rgba(34,38,46,.35);
}
.libro-portada .portada { max-width: 380px; margin: 0 auto; }

.portada-vacia {
    aspect-ratio: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12%;
    background: var(--acento);
    color: #fff;
    font-family: var(--serif);
    font-size: 1.8rem;
    line-height: 1.15;
    text-align: center;
}

.antetitulo {
    margin: 0 0 .6em;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--acento);
}
.subtitulo { font-family: var(--serif); font-size: 1.2rem; color: var(--tinta-suave); margin-top: -.2em; }

.gancho { font-size: 1.6rem; margin: 1.6em 0 0; }
.manuscrita {
    margin: 0 0 1em;
    font-family: "Parisienne", var(--serif);
    font-size: 1.7rem;
    line-height: 1.3;
    color: #a07a35;
}

/* La nota de Martina: papel con clip, como en la contraportada. */
.carta {
    position: relative;
    margin: 28px 0 24px;
    padding: 30px 28px 22px;
    background: #fbf5e6;
    border: 1px solid #e8dcc0;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 30px -14px rgba(34,38,46,.35);
    transform: rotate(-.6deg);
    font-family: "Special Elite", "Courier New", monospace;
    font-size: .98rem;
    line-height: 1.65;
}
.carta::before {   /* el clip */
    content: "";
    position: absolute;
    top: -14px;
    left: 26px;
    width: 14px;
    height: 40px;
    border: 3px solid #9aa1a8;
    border-radius: 8px;
}
.carta p { margin: 0 0 .9em; }
.carta .firma {
    margin: .2em 0 0;
    text-align: right;
    font-family: "Parisienne", var(--serif);
    font-size: 1.9rem;
    line-height: 1;
}

.cierre { font-family: var(--serif); font-style: italic; font-size: 1.15rem; }

.detalles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: 28px 0;
    padding: 18px 0;
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
}
.detalles dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); }
.detalles dd { margin: 2px 0 0; font-weight: 600; }

.proximamente { font-weight: 600; color: var(--acento); }

/* ── Botones ──────────────────────────────────────────────────────────── */

.boton {
    display: inline-block;
    padding: 14px 28px;
    border: 0;
    border-radius: 999px;
    background: var(--acento);
    color: #fff;
    font: 600 1rem/1.2 var(--sans);
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.boton:hover { filter: brightness(1.1); }
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.boton-ancho { width: 100%; padding: 16px; font-size: 1.05rem; }
.boton-secundario { background: transparent; color: var(--acento); box-shadow: inset 0 0 0 2px var(--acento); }

/* ── QR, gracias, baja y errores: una columna estrecha pensada para móvil ── */

.qr { max-width: 480px; margin: 0 auto; padding: 28px 16px 40px; }

.qr-cabecera { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.qr-cabecera picture { flex: none; width: 72px; }
.portada-mini { width: 72px; flex: none; }
.portada-mini.portada-vacia { font-size: .7rem; padding: 6px; }
.qr-cabecera h1 { font-size: 1.8rem; margin: 0; }
.qr-libro { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--acento); font-weight: 600; }
.qr-texto { font-size: 1.05rem; }

.formulario { margin: 24px 0; display: grid; gap: 18px; }

.campo label { display: block; font-weight: 600; margin-bottom: 6px; }
.campo input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--linea);
    border-radius: var(--radio);
    background: #fff;
    color: var(--tinta);
    font: 1.05rem var(--sans);   /* 16px o más: iOS no hace zoom al enfocar */
}
.campo input:focus { outline: none; border-color: var(--acento); }

.casilla { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; font-size: .95rem; }
.casilla input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--acento); }
.casilla .error { grid-column: 2; }

.con-error input[type="email"] { border-color: var(--error); }
.error { margin: 6px 0 0; color: var(--error); font-size: .9rem; }

.aviso { padding: 12px 16px; border-radius: var(--radio); }
.aviso-error { background: #fbe9e7; color: var(--error); }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.letra-pequena { font-size: .78rem; line-height: 1.5; color: var(--tinta-suave); }

.qr-gracias, .pagina-error { text-align: center; padding-top: 48px; }
.icono-ok {
    width: 64px; height: 64px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--acento); color: #fff; font-size: 2rem;
}
.nota { color: var(--tinta-suave); font-size: .95rem; }
.acciones { margin-top: 28px; }
.acciones .boton { min-width: 180px; }
.resena { margin-top: 36px; padding: 24px; border-radius: var(--radio); background: var(--papel-oscuro); }
.resena p { margin-top: 0; }

.codigo-error { font-family: var(--serif); font-size: 4rem; color: var(--acento); margin: 0; line-height: 1; }
.pagina-error h1 { font-size: 1.4rem; margin: 16px 0 28px; }
.detalle-error { text-align: left; white-space: pre-wrap; font-size: .75rem; background: #fff; padding: 12px; border-radius: 8px; overflow: auto; }

/* ── Textos legales ───────────────────────────────────────────────────── */

.texto-legal { max-width: 720px; margin: 0 auto; padding: 32px 16px 48px; }
.texto-legal h1 { font-size: 2rem; }
.texto-legal li { margin-bottom: .5em; }