/* la independencia — hoja de estilos */
:root {
  --papel: #FAFAF7;
  --papel-2: #EFEEE8;
  --blanco: #FFFFFF;
  --tinta: #0A0A0A;
  --gris: #5C5C58;
  --gris-2: #3A3A37;
  --rojo: #F2200D;
  --margen: 72px;
  --font: 'Helvetica Neue', Inter, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--font); font-size: 18px; line-height: 1.5; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--tinta); }
a:hover { color: #C4170A; }
h1, h2, h3, p, blockquote { margin: 0; }
.punteado { text-decoration: underline dotted; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.fino { font-weight: 300; }
.gris { color: var(--gris); }
.b { font-weight: 700; }
.linea-t { border-top: 1px dotted var(--tinta); }
.linea-b { border-bottom: 1px dotted var(--tinta); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- cabecera ---------- */
.cabecera { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 32px var(--margen); font-size: 17px; }
.cabecera nav { display: flex; gap: 32px; align-items: center; font-weight: 300; }
.cabecera nav:last-of-type { justify-content: flex-end; }
.marca { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.marca img { width: 32px; height: 32px; }
.pastilla { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 32px; border-radius: 999px; text-decoration: none; font-size: 17px; border: 1px solid var(--tinta); background: transparent; color: var(--tinta); font-family: inherit; cursor: pointer; }
.pastilla--negra { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.pastilla--negra:hover { color: var(--papel); background: #2a2a28; }
.pastilla--roja { background: var(--rojo); border-color: var(--rojo); color: var(--tinta); font-weight: 600; }
.pastilla--roja:hover { color: var(--tinta); filter: brightness(1.05); }
.pastilla--peq { min-height: 44px; padding: 0 28px; }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 10px; cursor: pointer; }
.menu-movil { display: none; }

/* ---------- portada ---------- */
.portada { min-height: 820px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 56px; text-align: center; padding: 40px var(--margen) 80px; }
.portada video { width: 480px; height: 480px; object-fit: cover; mix-blend-mode: multiply; }
.lema { font-size: 44px; font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; }

/* ---------- manifiesto ---------- */
.manifiesto { padding: 72px 0 96px; display: flex; justify-content: center; }
.manifiesto__lienzo { position: relative; width: 1440px; max-width: 100%; aspect-ratio: 1375.21 / 602.15; }
.manifiesto__fondo { position: absolute; inset: 0; width: 100%; height: 100%; }
.manifiesto__texto { position: absolute; left: 15.6%; right: 15.8%; top: 0; bottom: 0; padding: 0 8%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 36px; }
.manifiesto h2 { font-size: 26px; font-weight: 700; text-align: center; }
.manifiesto__cuerpo { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.manifiesto__grande { font-size: 26px; font-weight: 300; line-height: 1.34; letter-spacing: -0.01em; }
.manifiesto__peq { font-size: 18px; font-weight: 300; line-height: 1.6; }
.manifiesto__cierre { font-size: 26px; font-weight: 700; line-height: 1.34; letter-spacing: -0.01em; }

/* ---------- libros (home) ---------- */
.partido { display: grid; grid-template-columns: 1fr 1fr; }
.partido__imagen { background: var(--papel-2); display: flex; align-items: center; justify-content: center; padding: 80px var(--margen); min-height: 680px; }
.partido__imagen img { width: 360px; box-shadow: 0 24px 48px rgba(0,0,0,.16); }
.partido__texto { padding: 80px var(--margen); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.etiqueta { font-size: 18px; font-weight: 300; color: var(--gris); }
.etiqueta--fuerte { font-weight: 600; color: var(--tinta); }
.punto { color: var(--rojo); }
.titulo-libro { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.035em; }
.autora { font-size: 24px; font-weight: 300; }
.sinopsis { font-size: 19px; font-weight: 300; line-height: 1.55; color: var(--gris-2); max-width: 480px; }
.acciones { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 12px; }
.franja { padding: 72px var(--margen); display: flex; justify-content: space-between; align-items: center; gap: 64px; }
.franja .titulo-libro { font-size: 52px; }

/* ---------- diario / boletín / pie ---------- */
.dos-col { display: grid; grid-template-columns: 1fr 1fr; }
.dos-col > * { padding: 112px var(--margen); }
.blanco { background: var(--blanco); }
.h-seccion { font-size: 26px; font-weight: 700; }
.frase-grande { font-size: 48px; font-weight: 300; line-height: 1.15; letter-spacing: -0.025em; }
.pie { padding: 88px var(--margen) 48px; display: flex; flex-direction: column; gap: 88px; }
.pie__boletin { display: grid; grid-template-columns: 1fr 1fr; gap: 144px; align-items: end; }
.pie__final { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 300; }
.pie__final nav { display: flex; gap: 32px; }

/* formularios */
.form { display: flex; flex-direction: column; gap: 10px; position: relative; }
.form label { font-size: 15px; font-weight: 300; color: var(--gris); }
.form__fila { display: flex; gap: 12px; }
.form input[type=email] { flex: 1; min-width: 0; height: 52px; padding: 0 22px; border: 1px solid var(--tinta); border-radius: 26px; background: transparent; font-size: 17px; font-family: inherit; color: var(--tinta); }
.form input[type=email]:focus { outline: 2px solid var(--tinta); outline-offset: 2px; }
.form .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__legal { font-size: 13px; font-weight: 300; color: var(--gris); line-height: 1.5; }
.form__legal a { color: var(--gris); }
.form__estado { font-size: 16px; font-weight: 600; min-height: 1.5em; }
.form.enviado .form__fila, .form.enviado label { display: none; }

/* ---------- páginas de libro ---------- */
.ficha-portada { min-height: 900px; }
.ficha-portada .partido__imagen img { width: 460px; }
.titulo-ficha { font-size: 80px; font-weight: 700; line-height: .98; letter-spacing: -0.04em; }
.compra { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; margin-top: 8px; border-top: 1px dotted var(--tinta); max-width: 540px; }
.compra__precio { display: flex; justify-content: space-between; align-items: baseline; }
.precio { font-size: 52px; font-weight: 300; letter-spacing: -0.03em; }
.nota { font-size: 15px; font-weight: 300; color: var(--gris); line-height: 1.5; }
.datos { display: grid; grid-template-columns: .8fr 1.2fr 1.6fr 1.4fr .8fr; padding: 0 36px; }
.datos > div { padding: 32px 36px; display: flex; flex-direction: column; gap: 8px; border-right: 1px dotted var(--tinta); }
.datos > div:last-child { border-right: 0; }
.datos span:first-child { font-size: 15px; font-weight: 300; color: var(--gris); }
.datos span:last-child { font-size: 24px; }
.bloque-rojo { background: var(--rojo); padding: 128px var(--margen); }
.cita { font-size: 48px; font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; }
.bio p { font-size: 20px; font-weight: 300; line-height: 1.6; color: var(--gris-2); }
.aviso-campana { display: flex; justify-content: center; align-items: center; gap: 24px; min-height: 48px; padding: 8px 20px; background: var(--rojo); font-size: 15px; font-weight: 600; text-align: center; }
.cabeza-ficha { padding: 104px var(--margen) 88px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.titulo-enorme { font-size: 150px; font-weight: 700; line-height: .92; letter-spacing: -0.045em; }
.widget { border: 1px dotted var(--tinta); border-radius: 16px; padding: 16px; min-height: 200px; background: var(--blanco); }
.presupuesto__fila { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0; border-top: 1px dotted var(--tinta); font-size: 26px; font-weight: 300; }
.presupuesto__fila span:last-child { font-size: 20px; font-weight: 400; }
.presupuesto__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 26px; border-top: 1px solid var(--tinta); }
.cierre-rojo { background: var(--rojo); padding: 104px var(--margen); display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.captura { width: 380px; border-radius: 28px; box-shadow: 0 30px 60px rgba(0,0,0,.18); }
.gracias { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; text-align: center; padding: 80px 24px; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  :root { --margen: 40px; }
  .titulo-libro { font-size: 48px; }
  .titulo-ficha { font-size: 60px; }
  .titulo-enorme { font-size: 96px; }
  .pie__boletin { gap: 64px; }
  .datos { grid-template-columns: repeat(3, 1fr); }
  .datos > div:nth-child(3) { border-right: 0; }
  .manifiesto__grande, .manifiesto__cierre { font-size: 21px; }
  .manifiesto__peq { font-size: 15px; }
}

/* ---------- móvil ---------- */
@media (max-width: 760px) {
  :root { --margen: 20px; }
  body { font-size: 16px; }
  .cabecera { grid-template-columns: 1fr auto; padding: 14px 20px; border-bottom: 1px dotted var(--tinta); }
  .cabecera nav { display: none; }
  .marca { font-size: 21px; gap: 10px; }
  .marca img { width: 26px; height: 26px; }
  .menu-btn { display: block; }
  .menu-movil { border-bottom: 1px dotted var(--tinta); padding: 8px 20px 24px; flex-direction: column; gap: 16px; font-size: 20px; font-weight: 300; }
  .menu-movil.abierto { display: flex; }
  .portada { min-height: 0; gap: 36px; padding: 56px 20px 72px; }
  .portada video { width: 280px; height: 280px; }
  .lema { font-size: 28px; }
  .manifiesto { padding: 0; }
  .manifiesto__lienzo { aspect-ratio: auto; background: var(--rojo); }
  .manifiesto__fondo { display: none; }
  .manifiesto__texto { position: static; padding: 60px 24px 68px; gap: 22px; align-items: stretch; }
  .manifiesto__grande, .manifiesto__cierre { font-size: 22px; }
  .manifiesto__peq { font-size: 16px; }
  .partido, .dos-col, .pie__boletin { grid-template-columns: 1fr; }
  .partido--invertido .partido__imagen { order: -1; }
  .partido__imagen { min-height: 0; padding: 40px 20px; }
  .partido__imagen img { width: 210px; }
  .ficha-portada { min-height: 0; }
  .ficha-portada .partido__imagen img { width: 260px; }
  .partido__texto { padding: 28px 20px 44px; gap: 14px; }
  .titulo-libro { font-size: 34px; }
  .titulo-ficha { font-size: 40px; }
  .titulo-enorme { font-size: 48px; }
  .autora { font-size: 18px; }
  .etiqueta { font-size: 14px; }
  .sinopsis { font-size: 16px; }
  .acciones { gap: 16px; }
  .acciones .pastilla { width: 100%; }
  .franja { flex-direction: column; align-items: stretch; padding: 36px 20px 40px; gap: 20px; }
  .franja .titulo-libro { font-size: 30px; }
  .dos-col > * { padding: 48px 20px 0; }
  .dos-col > *:last-child { padding-bottom: 56px; }
  .frase-grande { font-size: 28px; }
  .h-seccion { font-size: 20px; }
  .pie { padding: 44px 20px 32px; gap: 40px; }
  .pie__boletin { gap: 16px; }
  .pie__boletin h2 { font-size: 28px; }
  .form__fila { flex-direction: column; }
  .form input[type=email] { flex: none; }
  .pie__final { flex-direction: column-reverse; gap: 16px; font-size: 15px; }
  .pie__final nav { gap: 24px; }
  .datos { grid-template-columns: 1fr 1fr; padding: 0; }
  .datos > div { padding: 20px; border-right: 0; border-bottom: 1px dotted var(--tinta); }
  .datos span:last-child { font-size: 18px; }
  .bloque-rojo { padding: 56px 20px; }
  .cita { font-size: 28px; }
  .cabeza-ficha { padding: 56px 20px 48px; }
  .precio { font-size: 40px; }
  .compra .pastilla { width: 100%; }
  .presupuesto__fila { font-size: 18px; }
  .presupuesto__fila span:last-child { font-size: 16px; }
  .cierre-rojo { flex-direction: column; align-items: stretch; padding: 56px 20px; }
  .cierre-rojo h2 { font-size: 32px !important; }
  .captura { width: 260px; }
  .bio p { font-size: 16px; }
  .frase-media { font-size: 24px !important; }
  .autora { font-size: 18px !important; }
  .partido__imagen img[style*="width:420px"] { width: 260px !important; }
}