/* La guitarra en el folklore · landing de lanzamiento
   Concepto: «la partitura que suena». Pantallas que alternan negro y verde de la tapa. */
@font-face { font-family: "Bricolage"; src: url("assets/fonts/bricolage-extrabold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "OpenSans"; src: url("assets/fonts/opensans-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OpenSans"; src: url("assets/fonts/opensans-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --negro: #0e0f0d;
  --negro-2: #1a1c18;
  --verde: #01ff48;
  --verde-osc: #00c238;
  --blanco: #f4f4ef;
  --gris: #9a9d94;
  --papel: #ecece6;
  --titulo: "Bricolage", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --texto: "OpenSans", "Helvetica Neue", Arial, sans-serif;
  --ancho: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--negro); color: var(--blanco); font-family: var(--texto); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
section { padding-block: clamp(64px, 10vw, 128px); position: relative; overflow: hidden; }
.verde { background: var(--verde); color: var(--negro); }
.negro { background: var(--negro); color: var(--blanco); }
.kicker { font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; display: inline-block; }
.negro .kicker { color: var(--verde); }
h1, h2, h3 { font-family: var(--titulo); font-weight: 800; line-height: .98; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(52px, 9vw, 116px); }
h2 { font-size: clamp(40px, 6.4vw, 84px); margin-bottom: 20px; }
h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; }
.bajada { font-size: clamp(18px, 1.8vw, 22px); max-width: 640px; margin: 0 0 32px; }
.negro .bajada { color: #cfd1c9; }
.pendiente { background: #fff3a8; color: #6b4f00; padding: 0 4px; border-radius: 3px; font-size: .9em; }

/* Franja superior */
.franja { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--verde); color: var(--negro); font-weight: 700; font-size: 14px; text-align: center; padding: 9px max(16px, env(safe-area-inset-left)); }
.franja .reloj { font-variant-numeric: tabular-nums; margin-left: 8px; white-space: nowrap; }

/* Botones */
.boton { display: inline-flex; align-items: center; gap: 10px; background: var(--verde); color: var(--negro); font-weight: 700; font-size: 18px; text-decoration: none; padding: 16px 28px; border-radius: 999px; border: 0; cursor: pointer; transition: transform .15s; }
.boton:hover { transform: translateY(-2px); }
.verde .boton { background: var(--negro); color: var(--verde); }
.boton:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.verde .boton:focus-visible, .verde button:focus-visible { outline-color: var(--negro); }
.link-sec { font-weight: 700; text-underline-offset: 4px; }

/* Portada */
.portada { padding-top: clamp(48px, 7vw, 96px); }
.portada .grilla { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.portada .autor { font-family: var(--titulo); font-size: clamp(26px, 3vw, 40px); color: var(--verde); margin: 14px 0 20px; }
.portada .puntos { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 10px 22px; color: #cfd1c9; font-weight: 700; font-size: 15px; }
.portada .puntos li::before { content: "■ "; color: var(--verde); }
.precio { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.precio .antes { text-decoration: line-through; color: var(--gris); font-size: 22px; }
.precio .ahora { font-family: var(--titulo); font-size: clamp(40px, 5vw, 56px); color: var(--verde); }
.verde .precio .ahora { color: var(--negro); }
.precio .etiqueta { background: var(--verde); color: var(--negro); font-weight: 700; font-size: 13px; padding: 3px 9px; border-radius: 4px; }
.verde .precio .etiqueta { background: var(--negro); color: var(--verde); }
.nota-precio { color: var(--gris); font-size: 14px; margin: 0 0 24px; }
.acciones { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.tapa-hero { position: relative; justify-self: center; }
.tapa-hero img { width: min(420px, 80vw); border-radius: 4px 10px 10px 4px; box-shadow: 0 40px 80px -20px rgba(1,255,72,.25), 0 30px 60px -10px rgba(0,0,0,.8); transform: rotate(-3deg); }
.avisame { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.avisame input[type=email], .avisame input[type=text] { flex: 1 1 240px; min-width: 0; font: inherit; padding: 16px 20px; border-radius: 999px; border: 2px solid var(--verde); background: transparent; color: inherit; }
.avisame-ok { color: var(--verde); font-weight: 700; }

/* Video de Pedro */
.video-pedro { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--negro-2); }
.video-pedro img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; opacity: .55; }
.video-pedro .cartel { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; }
.play { width: 84px; height: 84px; border-radius: 50%; background: var(--verde); display: grid; place-items: center; margin: 0 auto 14px; }
.play::after { content: ""; border-left: 26px solid var(--negro); border-top: 16px solid transparent; border-bottom: 16px solid transparent; margin-left: 6px; }

/* Estudios */
.estudios-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.selector { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.selector button, .pistas button { font: inherit; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--negro); background: transparent; color: var(--negro); cursor: pointer; }
.selector button[aria-pressed="true"], .pistas button[aria-pressed="true"] { background: var(--negro); color: var(--verde); }
.reproductor { background: var(--negro); color: var(--blanco); border-radius: 16px; padding: 22px; }
.reproductor h3 { color: var(--verde); margin-bottom: 4px; }
.reproductor .sub { color: var(--gris); font-size: 14px; margin: 0 0 16px; }
.pistas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pistas button { border-color: var(--verde); color: var(--verde); }
.pistas button[aria-pressed="true"] { background: var(--verde); color: var(--negro); }
.reproductor audio { width: 100%; }
.pagina-estudio { background: #fff; border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); overflow: hidden; position: relative; }
.pagina-estudio .barra { position: absolute; left: 0; top: 0; height: 6px; background: var(--negro); width: 0; transition: width .25s linear; }
.pagina-estudio .vacia { aspect-ratio: 595 / 842; display: grid; place-items: center; text-align: center; padding: 30px; color: var(--negro); }

/* Recorrido por los géneros */
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; margin-top: 10px; }
.carrusel > * { scroll-snap-align: start; }
.tarjeta-genero { background: var(--negro-2); border-radius: 14px; overflow: hidden; }
.tarjeta-genero .medio { aspect-ratio: 4 / 5; background: #fff; position: relative; cursor: pointer; }
.tarjeta-genero .medio img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tarjeta-genero .medio video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.tarjeta-genero .medio .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.tarjeta-genero .texto { padding: 18px 20px 22px; }
.tarjeta-genero .num { color: var(--verde); font-weight: 700; font-size: 13px; letter-spacing: .14em; }
.tarjeta-genero h3 { margin: 6px 0 8px; }
.tarjeta-genero p { margin: 0; color: #cfd1c9; font-size: 15px; }

/* Cómo funciona */
.cuatro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 30px; }
.cuatro .item { border-top: 3px solid currentColor; padding-top: 16px; }
.cuatro h3 { font-size: 22px; margin-bottom: 8px; }
.cuatro p { margin: 0; font-size: 15px; }
.cifra { font-family: var(--titulo); font-size: clamp(90px, 16vw, 200px); line-height: .85; letter-spacing: -.04em; }
.cifra-texto { font-weight: 700; font-size: 20px; max-width: 360px; }
.fila-cifra { display: flex; gap: 28px; align-items: flex-end; flex-wrap: wrap; margin-top: 50px; }

/* Aprender */
.ejes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 20px; }
.eje { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 24px; background: var(--negro-2); border-radius: 14px; }
.eje .n { font-family: var(--titulo); font-size: 44px; color: var(--verde); line-height: 1; }
.eje p { margin: 8px 0 0; color: #cfd1c9; font-size: 15px; }
details.indice { margin-top: 36px; border-top: 1px solid #33362f; padding-top: 18px; }
details.indice summary { cursor: pointer; font-weight: 700; color: var(--verde); }
details.indice .paginas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }

/* Hojealo */
.galeria { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 420px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; }
.galeria button { padding: 0; border: 0; background: none; cursor: zoom-in; scroll-snap-align: start; }
.galeria img { border-radius: 8px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.5); background: #fff; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 20px; }
.lightbox img { max-height: 92vh; width: auto; border-radius: 6px; }
.lightbox button { position: absolute; top: 16px; right: 16px; font: inherit; font-weight: 700; background: var(--verde); color: var(--negro); border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer; }

/* Berta */
.cita { font-family: var(--titulo); font-size: clamp(34px, 5vw, 66px); line-height: 1.04; max-width: 1000px; margin: 0; }
.cita-larga { color: #cfd1c9; max-width: 720px; margin: 30px 0 18px; }
.firma { color: var(--verde); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Para quién */
.tarjetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 26px; }
.tarjeta { background: var(--negro); color: var(--blanco); border-radius: 14px; padding: 24px; }
.tarjeta .rotulo { color: var(--verde); font-family: var(--titulo); font-size: 28px; display: block; margin-bottom: 10px; }
.tarjeta p { margin: 0; font-size: 15px; color: #cfd1c9; }
.exterior { margin-top: 28px; font-weight: 700; }

/* Preventa */
.beneficios { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 10px; }
.beneficio { background: var(--negro-2); border-radius: 16px; overflow: hidden; display: grid; grid-template-rows: 220px auto; }
.beneficio img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.beneficio .texto { padding: 24px; }
.beneficio .texto p { color: #cfd1c9; margin: 8px 0 0; }
.beneficio .dato { color: var(--verde); font-weight: 700; margin-top: 10px; }
.compra { margin-top: 30px; border: 2px solid var(--verde); border-radius: 18px; padding: clamp(22px, 4vw, 40px); display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; }
.compra ul { margin: 12px 0 0; padding: 0; list-style: none; color: #cfd1c9; }
.compra ul li::before { content: "✓  "; color: var(--verde); font-weight: 700; }
.reloj-grande { font-family: var(--titulo); font-variant-numeric: tabular-nums; font-size: 26px; color: var(--verde); margin-top: 14px; }

/* Presentación */
.evento { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.evento .datos { font-size: 20px; font-weight: 700; }
.evento ol { padding-left: 20px; margin: 0; }
.evento li { margin-bottom: 10px; }

/* Pedro */
.pedro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.pedro img { border-radius: 14px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; width: 100%; }
.pedro p { color: #cfd1c9; }

/* FAQ */
.faq { max-width: 860px; }
.faq details { border-bottom: 2px solid rgba(14,15,13,.25); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::after { content: "+"; font-family: var(--titulo); font-size: 26px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 10px 0 0; }

/* Cierre y pie */
.cierre { text-align: center; }
.cierre .tapa { width: min(260px, 60vw); margin: 0 auto 30px; transform: rotate(-3deg); box-shadow: 0 30px 60px -10px rgba(0,0,0,.8); border-radius: 3px 8px 8px 3px; }
.cierre .precio, .cierre .acciones { justify-content: center; }
footer { background: #000; color: var(--gris); font-size: 14px; padding-block: 40px 110px; }
footer .fila { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
footer img { width: 110px; }

/* Botón fijo en celular */
.fijo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--verde); color: var(--negro); display: none; justify-content: space-between; align-items: center; gap: 12px; padding: 12px max(16px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)); font-weight: 700; text-decoration: none; transform: translateY(110%); transition: transform .25s; }
.fijo.visible { transform: none; }

@media (max-width: 900px) {
  .portada .grilla, .estudios-grilla, .evento, .pedro, .beneficios { grid-template-columns: 1fr; }
  .tapa-hero { order: -1; }
  .tapa-hero img { width: min(300px, 70vw); }
  .cuatro, .tarjetas { grid-template-columns: 1fr 1fr; }
  .ejes { grid-template-columns: 1fr; }
  .compra { grid-template-columns: 1fr; }
  .fijo { display: flex; }
}
@media (max-width: 560px) {
  .cuatro, .tarjetas { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  .franja { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.consentimiento { flex-basis: 100%; font-size: 13px; color: var(--gris); display: flex; gap: 8px; align-items: flex-start; }
.consentimiento input { margin-top: 3px; accent-color: var(--verde); }
.nota-estudios { font-size: 13px; margin-top: 16px; }

[hidden] { display: none !important; }
@media (max-width: 560px) {
  .tapa-hero img { width: min(200px, 52vw); }
  .portada { padding-top: 32px; }
  .portada .grilla { gap: 28px; }
}

.otras-ediciones { margin-top: 14px; }
.otras-ediciones summary { cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; list-style: none; }
.otras-ediciones summary::-webkit-details-marker { display: none; }
.otras-ediciones form { margin-top: 16px; }
.verde .avisame input[type=email] { border-color: var(--negro); }
.opciones { border: 0; padding: 0; margin: 0; flex-basis: 100%; display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }
.opciones input, .verde .consentimiento input { accent-color: var(--negro); }
.verde .consentimiento, .verde .avisame-ok { color: var(--negro); }

.verde .avisame input::placeholder { color: rgba(14,15,13,.55); }
.negro .avisame input::placeholder { color: #8c8f86; }
.consentimiento input, .opciones input { width: 16px; height: 16px; flex: none; }
.opciones label { display: flex; gap: 8px; align-items: center; }
/* Avisame inglés/ebook: más discreto que la línea del exterior */
.otras-ediciones summary { font-size: 14px; font-weight: 400; }
.otras-ediciones form { max-width: 420px; gap: 8px; }
.otras-ediciones input[type=email] { padding: 10px 16px; font-size: 14px; border-width: 1.5px; }
.otras-ediciones .opciones { font-size: 13px; }
.otras-ediciones .consentimiento { font-size: 12px; }
.otras-ediciones .boton { font-size: 14px; padding: 10px 20px; }
.otras-ediciones .avisame-ok { font-size: 14px; }

.beneficio .texto p.dato { color: var(--verde); font-weight: 700; }

body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--verde); }

/* Portada: que entre entera en la primera pantalla de la compu */
@media (min-width: 901px) {
  .portada { padding-block: 40px 56px; min-height: calc(100vh - 40px); display: flex; align-items: center; }
  .portada .grilla { width: 100%; }
  .portada h1 { font-size: clamp(52px, 5.6vw, 92px); }
  .portada .autor { font-size: clamp(24px, 2.2vw, 32px); margin: 10px 0 14px; }
  .portada .bajada { margin-bottom: 18px; font-size: 19px; }
  .portada .puntos { margin-bottom: 18px; }
  .tapa-hero img { width: auto; max-height: min(74vh, 640px); }
}

/* Portada: título + autor juntos; bajada + datos juntos */
.portada h1 + .autor { margin: 6px 0 28px; }
.portada .autor + .bajada { margin: 0 0 8px; }
.portada .bajada + .puntos { margin: 0 0 26px; }

/* ===== Compu: cada sección entra en una pantalla (alto de la ventana menos la franja) ===== */
@media (min-width: 901px) {
  section { padding-block: 44px; min-height: calc(100vh - 40px); max-height: none; display: flex; align-items: center; }
  section > .envoltura { width: 100%; }
  h2 { font-size: clamp(36px, 4.2vw, 64px); margin-bottom: 12px; }
  .bajada { font-size: 18px; margin-bottom: 18px; }

  /* Pedro presenta */
  .video-pedro { height: calc(100vh - 330px); width: auto; max-width: 100%; margin: 0 auto; }

  /* Estudios */
  .estudios-grilla { align-items: center; }
  .pagina-estudio { justify-self: center; width: auto; }
  .pagina-estudio img { max-height: calc(100vh - 130px); width: auto; }
  .pagina-estudio .vacia { height: calc(100vh - 130px); }
  .selector { margin-bottom: 14px; }
  .reproductor { padding: 18px; }

  /* Géneros */
  .carrusel { grid-auto-columns: minmax(220px, 250px); }
  .tarjeta-genero .medio { aspect-ratio: auto; height: calc(100vh - 420px); }
  .tarjeta-genero .texto { padding: 12px 16px 16px; }
  .tarjeta-genero p { font-size: 14px; }

  /* Cómo funciona */
  .cuatro { margin-top: 18px; }
  .fila-cifra { margin-top: 26px; }
  .cifra { font-size: clamp(80px, 11vw, 150px); }

  /* Aprender */
  .ejes { gap: 16px; }
  .eje { padding: 18px; }
  details.indice { margin-top: 18px; }

  /* Hojealo */
  .galeria img { max-height: calc(100vh - 260px); width: auto; }

  /* Preventa: beneficios y compra en una fila */
  #preventa .envoltura { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 20px; align-items: stretch; }
  #preventa .kicker, #preventa h2 { grid-column: 1 / -1; }
  #preventa .beneficios { display: contents; }
  .beneficio { grid-template-rows: calc(100vh - 560px) auto; }
  .beneficio .texto { padding: 16px 18px; font-size: 15px; }
  .beneficio .texto p { font-size: 14px; }
  .compra { margin-top: 0; grid-template-columns: 1fr; gap: 14px; align-content: center; padding: 22px; }
  .compra ul { font-size: 14px; }
  .reloj-grande { font-size: 20px; margin-top: 8px; }

  /* Pedro */
  .pedro img { max-height: calc(100vh - 130px); width: auto; justify-self: center; }

  /* Preguntas frecuentes en dos columnas */
  .faq { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-content: start; }
  .faq .kicker, .faq h2 { grid-column: 1 / -1; }
  .faq details { padding: 12px 0; }
  .faq summary { font-size: 16px; }

  /* Cierre */
  .cierre .tapa { width: auto; max-height: calc(100vh - 420px); }
}
@media (min-width: 901px) {
  .video-pedro { height: calc(100vh - 420px); }
  .pagina-estudio img { max-height: calc(100vh - 180px); }
  .pagina-estudio .vacia { height: calc(100vh - 180px); }
  #estudios .bajada { margin-bottom: 12px; }
  .nota-estudios { margin-top: 10px; font-size: 12px; }
  .tarjeta-genero .medio { height: calc(100vh - 560px); min-height: 200px; }
  .carrusel { padding-bottom: 10px; margin-top: 4px; }
  .cierre .tapa { max-height: calc(100vh - 560px); margin-bottom: 18px; }
  .cierre .bajada { margin: 10px auto 14px !important; }
}
@media (min-width: 901px) {
  #estudios h2 { font-size: clamp(34px, 3.6vw, 56px); }
  #estudios .selector { gap: 6px; }
  #estudios .selector button, #estudios .pistas button { padding: 6px 12px; font-size: 13px; }
  #estudios .reproductor h3 { font-size: 22px; }
  #estudios .reproductor .sub { margin-bottom: 10px; }
  #estudios .pistas { margin-bottom: 10px; }
  .tarjeta-genero .medio { height: calc(100vh - 600px); min-height: 150px; }
  section:has(.carrusel) .bajada { font-size: 16px; max-width: 900px; margin-bottom: 10px; }
  .beneficio { grid-template-rows: calc(100vh - 600px) auto; }
}

section[id] { scroll-margin-top: 40px; }
@media (min-width: 901px) {
  #presenta h2 { font-size: clamp(34px, 3.6vw, 56px); }
  #presenta .bajada { max-width: 900px; font-size: 17px; }
  .video-pedro { height: calc(100vh - 470px); min-height: 240px; }
}
#presenta .bajada strong { color: var(--blanco); }
@media (min-width: 901px) { #presenta .bajada { max-width: none; } }
@media (max-width: 900px) { .solo-compu { display: none; } }
.portada { position: relative; }
.logo-tienda { position: absolute; top: 22px; left: max(20px, env(safe-area-inset-left)); z-index: 5; opacity: .9; transition: opacity .15s; }
.logo-tienda:hover { opacity: 1; }
.logo-tienda img { width: 92px; height: auto; }
@media (min-width: 901px) { .logo-tienda { left: max(32px, calc((100vw - var(--ancho)) / 2 - 120px)); top: 28px; } .logo-tienda img { width: 110px; } }
@media (max-width: 900px) { .portada { padding-top: 84px; } }

.arriba { position: fixed; z-index: 61; right: max(18px, env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); width: 48px; height: 48px; border-radius: 50%; background: var(--negro); color: var(--verde); border: 2px solid var(--verde); display: grid; place-items: center; font-family: var(--titulo); font-size: 22px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.arriba:hover { background: var(--verde); color: var(--negro); }
@media (max-width: 900px) { .arriba { bottom: calc(76px + env(safe-area-inset-bottom)); width: 44px; height: 44px; } }

/* Estudios: media página con fundido abajo */
.pagina-estudio::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events: none; }
.pagina-estudio .barra { z-index: 2; }
.pagina-estudio .vacia { aspect-ratio: 1075 / 985; height: auto !important; }
@media (min-width: 901px) { .pagina-estudio img { max-height: calc(100vh - 150px); } .pagina-estudio .vacia { width: min(520px, 40vw); } }
.nota-estudios { font-size: 14px !important; margin-top: 14px; }

/* Recorrido sobre verde y estudios sobre negro */
.verde .kicker { color: var(--negro); }
.verde .tarjeta-genero { box-shadow: 0 20px 40px -20px rgba(0,0,0,.45); }
.negro .selector button { border-color: var(--verde); color: var(--verde); }
.negro .selector button[aria-pressed="true"] { background: var(--verde); color: var(--negro); }
.negro .reproductor { background: var(--negro-2); }
.negro .nota-estudios { color: #cfd1c9; }

#recorrido .bajada { max-width: 1000px; }

@media (min-width: 901px) { #recorrido .tarjeta-genero .medio { height: calc(100vh - 640px); min-height: 140px; } #recorrido h2 { font-size: clamp(34px, 3.6vw, 56px); } }

.tarjeta-genero audio { width: 100%; margin-top: 10px; height: 36px; }
.tarjeta-genero .medio.solo-imagen { cursor: default; }

.tarjeta-genero { color: var(--blanco); }
.tarjeta-genero h3 { color: var(--verde); font-size: 22px; }

.tarjeta-genero .medio.solo-imagen { cursor: zoom-in; }
.lightbox { z-index: 200; }

/* Flecha discreta para pasar a la sección siguiente */
.siguiente { position: absolute; left: 50%; bottom: clamp(16px, 3vw, 32px); transform: translateX(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid currentColor; font-size: 20px; line-height: 1; text-decoration: none; opacity: .55; transition: opacity .2s, transform .2s; }
.siguiente:hover, .siguiente:focus-visible { opacity: 1; transform: translateX(-50%) translateY(3px); }
.verde .siguiente { color: var(--negro); }
.negro .siguiente { color: var(--verde); }

/* Índice en plano: páginas blancas, se amplían al tocarlas */
details.indice .paginas .medio { cursor: zoom-in; background: #fff; border-radius: 4px; overflow: hidden; }
details.indice .paginas img { display: block; width: 100%; height: auto; }
details.indice .nota-indice { margin-top: 10px; font-size: 14px; color: #cfd1c9; }
/* Índice ampliado: a lo ancho, para leerlo, con scroll */
.lightbox.lectura { place-items: start center; overflow-y: auto; }
.lightbox.lectura img { max-height: none; width: min(1000px, 100%); border-radius: 4px; }
.lightbox.lectura button { position: fixed; }

/* Nuevo orden (26/10): «Qué vas a explorar» y Berta en verde, «Para quién» en negro */
.verde details.indice { border-top-color: rgba(14,15,13,.25); }
.verde details.indice summary { color: var(--negro); }
.verde details.indice .nota-indice { color: rgba(14,15,13,.7); }
.verde .eje { color: var(--blanco); }
.verde .cita-larga { color: rgba(14,15,13,.78); }
.verde .firma { color: var(--negro); }
.negro .tarjeta { background: var(--negro-2); }
.negro .opciones input { accent-color: var(--verde); }

/* Video de Pedro listo: foto a pleno y se reproduce al tocarla */
.video-pedro.listo { cursor: pointer; }
.video-pedro.listo img { opacity: .9; }
.video-pedro video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
/* Video vertical en el celular */
.video-pedro.vertical { aspect-ratio: 9 / 16; height: auto; width: min(100%, calc(78vh * 9 / 16)); min-height: 0; margin: 0 auto; }
/* Rótulos de «Para quién es» en dos líneas: interlineado más cerrado */
.tarjeta .rotulo { line-height: 1.05; }
@media (min-width: 901px) { #explorar .bajada { max-width: none; } }
/* País en el formulario de ediciones */
.otras-ediciones select { flex: 1 1 100%; font: inherit; font-size: 14px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--negro); background: transparent; color: inherit; }
.negro .otras-ediciones select { border-color: var(--verde); }
/* La tapa de la portada mantiene su proporción en todos los tamaños */
.tapa-hero img { height: auto; }

/* Casillas propias: vacías se ven como un recuadro con borde, marcadas con tilde (igual en todos los navegadores) */
.consentimiento input[type=checkbox], .opciones input[type=checkbox] {
  -webkit-appearance: none; appearance: none; margin: 2px 0 0; border: 2px solid var(--casilla, var(--verde)); border-radius: 3px;
  background: transparent; display: inline-grid; place-content: center; cursor: pointer;
}
.consentimiento input[type=checkbox]::after, .opciones input[type=checkbox]::after {
  content: ""; width: 4px; height: 8px; border: solid var(--casilla-tilde, var(--negro)); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0;
}
.consentimiento input[type=checkbox]:checked, .opciones input[type=checkbox]:checked { background: var(--casilla, var(--verde)); }
.consentimiento input[type=checkbox]:checked::after, .opciones input[type=checkbox]:checked::after { opacity: 1; }
.consentimiento input[type=checkbox]:focus-visible, .opciones input[type=checkbox]:focus-visible { outline: 2px solid var(--casilla, var(--verde)); outline-offset: 2px; }
.verde { --casilla: var(--negro); --casilla-tilde: #fff; }

/* Lupa sobre las páginas sin video: indica que se pueden ampliar */
.tarjeta-genero .medio .lupa {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; background: var(--verde) no-repeat center / 40px 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0f0d' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
  box-shadow: 0 10px 30px rgba(0,0,0,.4); pointer-events: none; transition: transform .2s;
}
.tarjeta-genero .medio.solo-imagen:hover .lupa { transform: translate(-50%, -50%) scale(1.08); }