/* ==========================================================================
   Estilos del sitio de Luciana Amicone / Azucena
   Paleta y tipografía tomadas de la tapa del libro.
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
  --papel: #EEE8DD;
  --papel-claro: #F7F3EC;
  --papel-oscuro: #E2D9C8;
  --tinta: #2F2E24;
  --tinta-suave: #5A5747;
  --ocre: #8B5A17;
  --oliva: #5F6236;
  --oliva-oscuro: #474A27;
  --linea: #D2C7B4;
  --error: #9B2C1F;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --manuscrita: "Nothing You Could Do", "Segoe Script", cursive;

  --ancho: 72rem;
  --ancho-texto: 38rem;
  --margen: clamp(1.25rem, 4vw, 3rem);
  --alto-cabecera: 4rem;

  /* Textura de papel: ruido SVG muy suave */
  --textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 1rem);
}

body {
  margin: 0;
  background-color: var(--papel);
  background-image: var(--textura);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  font-optical-sizing: auto;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

img { max-width: 100%; height: auto; display: block; }
main { overflow-x: clip; }

a { color: var(--oliva); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--ocre); }

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

h1, h2, h3 { font-weight: 400; line-height: 1.2; margin: 0 0 1rem; }
p { margin: 0 0 1em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--tinta); color: var(--papel-claro); padding: 0.5rem 1rem;
}
.saltar:focus { top: 1rem; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.7rem 1.5rem;
  background: var(--oliva); color: var(--papel-claro);
  border: 1px solid var(--oliva); border-radius: 2px;
  font: inherit; font-size: 1rem; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.boton:hover { background: var(--oliva-oscuro); border-color: var(--oliva-oscuro); color: var(--papel-claro); }
.boton--linea { background: transparent; color: var(--oliva); }
.boton--linea:hover { background: var(--oliva); color: var(--papel-claro); }
.boton--ancho { width: 100%; }
.boton:disabled { opacity: 0.4; cursor: default; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
}
.cabecera__interior {
  max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen);
  height: var(--alto-cabecera);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.cabecera__marca { color: var(--tinta); text-decoration: none; font-size: 1.0625rem; letter-spacing: 0.02em; }

.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; align-items: center; }
.menu a { color: var(--tinta-suave); text-decoration: none; font-size: 1rem; }
.menu a:hover { color: var(--ocre); }
.menu .menu__destacado { color: var(--oliva); border-bottom: 1px solid currentColor; }

.cabecera__boton-menu { display: none; }

@media (max-width: 860px) {
  .cabecera__boton-menu {
    display: block; position: relative; width: 2.75rem; height: 2.75rem;
    background: none; border: 0; cursor: pointer; margin-right: -0.5rem;
  }
  .cabecera__boton-menu span[aria-hidden],
  .cabecera__boton-menu span[aria-hidden]::before {
    position: absolute; left: 0.6rem; right: 0.6rem; height: 1px; background: var(--tinta);
    content: ""; transition: transform 0.25s;
  }
  .cabecera__boton-menu span[aria-hidden] { top: 1.15rem; }
  .cabecera__boton-menu span[aria-hidden]::before { left: 0; right: 0; top: 0.45rem; }
  .menu-abierto .cabecera__boton-menu span[aria-hidden] { transform: translateY(0.22rem) rotate(45deg); }
  .menu-abierto .cabecera__boton-menu span[aria-hidden]::before { transform: translateY(-0.45rem) rotate(-90deg); }

  .menu {
    position: fixed; inset: calc(var(--alto-cabecera) + env(safe-area-inset-top, 0px)) 0 0 0;
    background: var(--papel); background-image: var(--textura);
    padding: 2rem var(--margen);
    visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0.2s;
  }
  .menu-abierto .menu { visibility: visible; opacity: 1; }
  .menu-abierto { overflow: hidden; }
  .menu ul { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .menu a { font-size: 1.5rem; color: var(--tinta); }
}

/* ---------- Secciones genéricas ---------- */
.seccion { padding: clamp(4rem, 9vw, 7rem) 0; }
.seccion__interior { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.seccion__titulo {
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  font-style: italic; font-weight: 300; color: var(--oliva-oscuro);
  margin-bottom: 1.5rem;
}
.texto-largo { max-width: var(--ancho-texto); }
.texto-largo p { hyphens: auto; }

/* ---------- Hero ----------
   El elemento distintivo: el título en manuscrita y el borde rasgado inferior. */
.hero {
  position: relative;
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) var(--margen) clamp(5rem, 10vw, 8rem);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.hero__titulo {
  font-family: var(--manuscrita); font-weight: 400;
  font-size: clamp(4.5rem, 12vw, 10rem); line-height: 0.9;
  color: var(--oliva-oscuro); margin: 0 0 0.75rem -0.05em;
  letter-spacing: -0.01em;
}
.hero__bajada { font-size: 1.25rem; font-style: italic; color: var(--ocre); margin-bottom: 1.75rem; }
.hero__gancho { max-width: 30rem; color: var(--tinta-suave); margin-bottom: 2.25rem; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__tapa img {
  width: 100%; max-width: 26rem; margin-left: auto;
  box-shadow: 0 1px 1px rgba(47, 46, 36, 0.08), 0 18px 40px -18px rgba(47, 46, 36, 0.45);
  transform: rotate(1.2deg);
}

/* Borde rasgado: separa la portada del resto con el mismo gesto de la tapa */
.pagina-inicio .hero::after {
  content: ""; position: absolute; left: 50%; bottom: -1px;
  width: 100vw; transform: translateX(-50%); height: 2.25rem;
  background: var(--papel-oscuro); background-image: var(--textura);
  clip-path: polygon(0% 100%, 1.1% 29%, 2.8% 24%, 4.2% 42%, 4.9% 50%, 5.6% 46%, 6.3% 25%, 7.6% 70%, 8.4% 33%, 10.0% 77%, 11.5% 44%, 13.6% 23%, 15.6% 37%, 16.5% 27%, 17.5% 69%, 18.4% 55%, 20.1% 42%, 21.5% 24%, 22.2% 32%, 23.9% 46%, 25.0% 55%, 26.3% 38%, 28.2% 62%, 29.2% 54%, 30.6% 73%, 32.4% 37%, 34.6% 27%, 35.9% 65%, 36.7% 49%, 37.4% 60%, 39.2% 54%, 41.2% 39%, 42.9% 56%, 44.4% 47%, 46.4% 77%, 47.7% 60%, 48.4% 62%, 50.1% 80%, 52.0% 37%, 53.2% 60%, 53.8% 48%, 54.7% 27%, 55.4% 66%, 56.2% 35%, 57.4% 72%, 58.2% 47%, 59.6% 73%, 61.5% 72%, 62.6% 45%, 63.8% 73%, 65.9% 29%, 66.8% 34%, 67.7% 49%, 69.3% 36%, 69.9% 45%, 71.1% 54%, 73.2% 61%, 74.6% 57%, 76.3% 23%, 78.4% 67%, 80.4% 68%, 81.6% 44%, 82.4% 58%, 83.1% 24%, 84.0% 30%, 85.1% 23%, 85.7% 29%, 86.5% 42%, 87.1% 72%, 88.7% 29%, 89.7% 41%, 90.9% 27%, 92.9% 80%, 94.2% 49%, 94.9% 26%, 96.1% 36%, 98.0% 30%, 98.7% 77%, 100.0% 29%, 100% 100%);
}
.pagina-inicio .libro { background: var(--papel-oscuro); background-image: var(--textura); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; text-align: left; }
  .hero__tapa { order: -1; }
  .hero__tapa img { max-width: 13rem; margin: 0 auto; }
  .hero__acciones .boton { flex: 1 1 100%; }
}

/* ---------- El libro ---------- */
.libro__grilla { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; column-gap: clamp(2rem, 6vw, 6rem); }
.libro__grilla .seccion__titulo { grid-column: 1 / -1; }
.ficha { margin: 0; align-self: start; border-top: 1px solid var(--linea); }
.ficha__fila { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--linea); font-size: 0.95rem; }
.ficha dt { color: var(--tinta-suave); }
.ficha dd { margin: 0; text-align: right; }
@media (max-width: 760px) {
  .libro__grilla { grid-template-columns: 1fr; }
  .ficha { margin-top: 2rem; }
}

/* ---------- Invitación a leer ---------- */
.muestra { background: var(--oliva); background-image: var(--textura); color: var(--papel-claro); }
.muestra__interior {
  max-width: var(--ancho); margin: 0 auto; padding: 3rem var(--margen);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.muestra__texto { font-size: clamp(1.4rem, 2vw + 0.8rem, 2rem); font-style: italic; font-weight: 300; margin: 0; }
.muestra .boton { background: var(--papel-claro); color: var(--oliva-oscuro); border-color: var(--papel-claro); }
.muestra .boton:hover { background: var(--papel); }

/* ---------- La autora ---------- */
.autora__grilla { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.autora__foto { margin: 0; }
/* Recorte en arco, igual que la foto de la solapa */
.autora__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px 48% 6px 6px / 6px 34% 6px 6px; }
@media (max-width: 760px) {
  .autora__grilla { grid-template-columns: 1fr; }
  .autora__foto { max-width: 16rem; }
}

/* ---------- Comprar ---------- */
.comprar { border-top: 1px solid var(--linea); }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0; }
.opcion { padding: 0.5rem clamp(0rem, 4vw, 3rem) 0.5rem 0; display: flex; flex-direction: column; align-items: flex-start; }
.opcion + .opcion { border-left: 1px solid var(--linea); padding-left: clamp(1.5rem, 4vw, 3rem); }
.opcion__nombre { font-size: 1.5rem; margin-bottom: 0.25rem; }
.opcion__precio { font-size: 2rem; font-weight: 300; margin-bottom: 0.25rem; }
.opcion__estado { font-size: 0.95rem; font-style: italic; color: var(--oliva); }
.opcion__estado--agotado { color: var(--ocre); }
.opcion__estado--preventa { color: var(--ocre); }
.opcion__descripcion { color: var(--tinta-suave); max-width: 24rem; flex-grow: 1; }
.comprar__nota { margin-top: 2.5rem; color: var(--tinta-suave); font-size: 0.95rem; }
@media (max-width: 640px) {
  .opcion + .opcion { border-left: 0; border-top: 1px solid var(--linea); padding: 2rem 0 0; margin-top: 2rem; }
  .opcion .boton { width: 100%; }
}

/* ---------- Puntos de retiro ---------- */
.retiro { padding-top: 0; }
.puntos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2rem 3rem; }
.punto p { margin: 0; }
.punto__nombre { font-size: 1.125rem; font-weight: 500; margin-bottom: 0.25rem; }
.punto__horario { color: var(--tinta-suave); font-size: 0.95rem; }
.punto a { display: inline-block; margin-top: 0.4rem; font-size: 0.95rem; }
.retiro__envio { margin-top: 2.5rem; color: var(--tinta-suave); }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); padding: 3rem 0 calc(2rem + env(safe-area-inset-bottom, 0px)); }
.pie__interior {
  max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen);
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; align-items: baseline;
}
.pie__marca { font-family: var(--manuscrita); font-size: 2rem; color: var(--oliva-oscuro); margin: 0; }
.pie__contacto { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: flex-end; }
.pie__legal { grid-column: 1 / -1; font-size: 0.85rem; color: var(--tinta-suave); margin: 1rem 0 0; }
@media (max-width: 640px) {
  .pie__interior { grid-template-columns: 1fr; }
  .pie__contacto { justify-content: flex-start; }
}

/* ---------- Formulario de compra ---------- */
.compra__grilla { display: grid; grid-template-columns: 16rem minmax(0, 32rem); gap: clamp(2rem, 6vw, 5rem); justify-content: center; align-items: start; }
.compra__resumen { position: sticky; top: calc(var(--alto-cabecera) + 2rem); }
.compra__resumen img { width: 100%; margin-bottom: 1rem; box-shadow: 0 14px 30px -16px rgba(47, 46, 36, 0.5); }
.compra__producto { font-family: var(--manuscrita); font-size: 2rem; color: var(--oliva-oscuro); margin: 0; line-height: 1.2; }
.compra__aviso { color: var(--ocre); font-style: italic; font-size: 0.95rem; }
@media (max-width: 760px) {
  .compra__grilla { grid-template-columns: 1fr; }
  .compra__resumen { position: static; display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: center; }
  .compra__resumen img { margin: 0; }
  .compra__resumen p { margin: 0; }
}

.formulario { display: flex; flex-direction: column; gap: 1.25rem; }
.campo { display: flex; flex-direction: column; gap: 0.35rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo--corto { max-width: 8rem; }
.campo label, .campo legend { font-size: 1rem; padding: 0; }
.campo legend { margin-bottom: 0.5rem; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"],
.campo input[type="password"], .campo input[type="number"], .campo input[type="url"],
.campo select, .campo textarea {
  width: 100%; min-height: 3rem; padding: 0.65rem 0.85rem;
  font: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--papel-claro); border: 1px solid var(--linea); border-radius: 2px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--oliva); box-shadow: 0 0 0 3px rgba(95, 98, 54, 0.18); }
.campo__ayuda { font-size: 0.9rem; color: var(--tinta-suave); margin: 0; }
.campo__error { font-size: 0.9rem; color: var(--error); margin: 0.25rem 0 0; }
.campo--error input, .campo--error select { border-color: var(--error); }
.formulario__error-general { padding: 0.9rem 1rem; border-left: 3px solid var(--error); background: var(--papel-claro); color: var(--error); }
.formulario__nota { font-size: 0.9rem; color: var(--tinta-suave); text-align: center; margin: 0; }

.eleccion, .campo .eleccion { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.8rem 0.9rem; border: 1px solid var(--linea); border-radius: 2px; background: var(--papel-claro); cursor: pointer; margin-bottom: 0.5rem; line-height: 1.45; }
.campo .eleccion:has(input:checked), .eleccion:has(input:checked) { border-color: var(--oliva); }
.eleccion input { accent-color: var(--oliva); margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; flex: none; }
.bloque-entrega[hidden] { display: none; }

/* ---------- Resultado de compra / descarga ---------- */
.resultado__interior { max-width: var(--ancho-texto); text-align: left; }
.resultado__codigo { font-size: 0.95rem; color: var(--tinta-suave); margin-top: 2rem; }
.descargas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }

/* ---------- Lector de muestra ---------- */
.pagina-lector .pie { display: none; }
.lector { display: flex; flex-direction: column; min-height: calc(100svh - var(--alto-cabecera) - env(safe-area-inset-top, 0px)); background: var(--papel-oscuro); background-image: var(--textura); }
.lector__escenario {
  position: relative; flex: 1; min-height: 0;
  height: calc(100svh - var(--alto-cabecera) - 4.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  margin: 1rem var(--margen) 0; display: flex; align-items: center; justify-content: center;
}
.lector__paginas { display: flex; gap: 4px; justify-content: center; align-items: center; height: 100%; width: 100%; cursor: pointer; user-select: none; }
.lector__pagina { background: #fff; box-shadow: 0 1px 2px rgba(47, 46, 36, 0.1), 0 12px 30px -14px rgba(47, 46, 36, 0.45); }
.lector__cargando { color: var(--tinta-suave); font-style: italic; }
.lector__final { max-width: 28rem; text-align: center; }
.lector__final .hero__acciones { justify-content: center; }
.lector__final-titulo { font-family: var(--manuscrita); font-size: clamp(2.2rem, 6vw, 3.25rem); line-height: 1.1; color: var(--oliva-oscuro); }
.lector__controles {
  height: 4.5rem; padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
}
.lector__boton {
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--linea); background: var(--papel-claro); color: var(--tinta);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lector__boton:hover:not(:disabled) { border-color: var(--oliva); color: var(--oliva); }
.lector__boton:disabled { opacity: 0.35; cursor: default; }
.lector__contador { margin: 0; min-width: 5rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}