/* ==========================================================================
   Landing «Tu salón, sin obra». Móvil primero; texto de 19 px como mínimo.
   Tokens y recursos (regla, cota, etiqueta, sello…) en marca.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font: 500 1.1875rem/1.6 var(--sans);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--terracota-osc); text-underline-offset: .18em; text-decoration-thickness: 2px; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--terracota-osc); outline-offset: 3px; border-radius: 4px; }
strong, b { font-weight: 700; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; color: var(--tinta); text-wrap: balance; }
h2 { font-size: 2rem; line-height: 1.1; letter-spacing: -.015em; }
h3 { font-size: 1.4375rem; line-height: 1.2; }
h2 em, h1 em { font-style: italic; color: var(--terracota-osc); }
p { margin: 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 8px; top: -60px; background: var(--tinta); color: var(--blanco); padding: 10px 16px; border-radius: 8px; z-index: 50; }
.saltar:focus { top: 8px; }
.saltar:hover { color: var(--blanco); }

.envoltura { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.estrecha { max-width: 780px; }
.seccion { padding: 56px 0 60px; }
.encabezado { display: grid; gap: 12px; margin-bottom: 30px; max-width: 760px; }
.encabezado--centro { margin-inline: auto; text-align: center; justify-items: center; }
.entradilla { font-size: 1.25rem; color: var(--tinta); }

/* Modo borrador: resalta lo que falta decidir antes de publicar */
.borrador .pendiente { background: #FFF1A8; box-shadow: 0 0 0 2px #FFF1A8; border-radius: 2px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 62px; padding: 14px 26px;
  border-radius: 12px;
  background: var(--terracota-osc); color: var(--blanco);
  font: 800 1.1875rem/1.2 var(--sans); text-decoration: none; text-align: center;
  box-shadow: 0 1px 2px rgba(52, 41, 31, .25), 0 12px 24px -10px rgba(52, 41, 31, .55);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.boton:hover { background: #8C3F1E; color: var(--blanco); transform: translateY(-1px); }
.boton:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(52, 41, 31, .3), 0 6px 14px -8px rgba(52, 41, 31, .5); }
.boton__precio { flex: none; white-space: nowrap; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .18); font-size: 1.125rem; }
.boton--pequeno { white-space: nowrap; min-height: 46px; padding: 8px 16px; font-size: 1rem; border-radius: 10px; box-shadow: 0 1px 2px rgba(52, 41, 31, .25), 0 8px 16px -10px rgba(52, 41, 31, .5); }
.boton--ancho { width: 100%; }
.microcopia { margin-top: 14px; font: 600 1rem/1.45 var(--sans); color: var(--tinta-2); }
.microcopia--centro { text-align: center; }

/* ---------- Aviso de precio y cabecera ---------- */
.aviso-precio {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px;
  padding: 9px 16px; background: var(--tinta); color: var(--crema);
  font: 600 1rem/1.3 var(--sans); text-align: center;
}
.aviso-precio strong { color: var(--cinta); }
.aviso-precio__luego { opacity: .9; }
.cabecera { position: sticky; top: 0; z-index: 20; background: rgba(244, 238, 230, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.cabecera__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 66px; }
.marca { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--tinta); text-decoration: none; font: 800 0.9375rem/1.2 var(--sans); letter-spacing: .02em; }
.marca > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca__icono { width: 30px; height: 30px; fill: none; stroke: var(--terracota-osc); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Iconos de trazo ---------- */
svg use { pointer-events: none; }
.hero__puntos svg, .regalos__titulo svg, .tarjeta-precio__lista svg, .tarjeta-precio__garantia svg, .deslizable__boton svg {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Fotos y huecos de imágenes que aún no existen ---------- */
.foto { position: relative; margin: 0; border-radius: var(--radio); overflow: hidden; background: var(--beige); box-shadow: var(--sombra); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--falta { background: repeating-linear-gradient(45deg, var(--beige) 0 18px, #DDCDB6 18px 36px); min-height: 180px; }
.foto--falta img { visibility: hidden; }
.foto--falta::after {
  content: "Falta imagen: " attr(data-falta);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max-content; max-width: 86%; padding: 8px 12px; border-radius: 8px;
  background: var(--papel); color: var(--tinta); font: 700 0.875rem/1.3 var(--sans); text-align: center;
}

/* ============================ HERO ============================ */
.hero { padding: 36px 0 56px; position: relative; }
.hero__rejilla { display: grid; gap: 40px; }
.hero__texto { display: grid; gap: 18px; align-content: start; }
.hero__titulo { font-size: 2.875rem; line-height: 1.0; letter-spacing: -.025em; }
.hero__titulo em { display: inline-block; }
.hero__entrada { font-size: 1.3125rem; line-height: 1.5; }
.hero__puntos { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; font-weight: 600; }
.hero__puntos li { display: flex; align-items: center; gap: 12px; }
.hero__puntos svg { width: 30px; height: 30px; flex: none; color: var(--terracota-osc); }
.hero__accion { margin-top: 8px; }
.hero__accion .boton { width: 100%; }

.hero__visual { position: relative; padding-bottom: 28px; }
.foto--hero { aspect-ratio: 3 / 2.1; }
.hero__portada { position: absolute; left: -6px; bottom: -6px; width: 31%; transform: rotate(-4deg); box-shadow: var(--sombra); border-radius: 3px; overflow: hidden; }
.hero__etiqueta { position: absolute; right: 8px; top: -18px; }

/* entrada del hero */
.hero__texto > * { animation: subir .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero__texto > :nth-child(2) { animation-delay: .06s; }
.hero__texto > :nth-child(3) { animation-delay: .12s; }
.hero__texto > :nth-child(4) { animation-delay: .18s; }
.hero__texto > :nth-child(5) { animation-delay: .24s; }
.hero__visual { animation: subir .9s .15s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================ DOLORES ============================ */
.seccion--dolores { background: var(--papel); border-block: 1px solid var(--borde); }
.seccion--dolores h2 { margin: 0 0 24px; font-size: 2.25rem; }
.dolores { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 0; counter-reset: d; }
.dolores li {
  position: relative; padding: 16px 0 16px 48px;
  border-bottom: 1px dashed #D5C4AC; font-size: 1.25rem; line-height: 1.45;
}
.dolores li::before {
  counter-increment: d; content: counter(d);
  position: absolute; left: 0; top: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--terracota); color: var(--terracota-osc);
  display: grid; place-items: center; font: 800 0.9375rem/1 var(--sans);
}
.giro { margin-top: 26px; font-family: var(--serif); font-weight: 500; font-size: 1.5625rem; line-height: 1.35; }
.giro strong { font-weight: 600; color: var(--terracota-osc); }

/* ============================ ANTES Y DESPUÉS ============================ */
.comparador__pestanas { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: none; }
.comparador__pestanas::-webkit-scrollbar { display: none; }
.comparador__pestanas button {
  flex: none; min-height: 48px; padding: 10px 16px; border-radius: 999px;
  border: 2px solid var(--tinta); background: transparent; color: var(--tinta);
  font: 700 1rem/1 var(--sans); cursor: pointer;
}
.comparador__pestanas button[aria-selected="true"] { background: var(--tinta); color: var(--crema); }
.comparador__marco { aspect-ratio: 3 / 2; touch-action: pan-y; }
.comparador__marco img { position: absolute; inset: 0; }
.comparador__despues { clip-path: inset(0 0 0 var(--pos)); }
.comparador__eti { position: absolute; top: 12px; z-index: 2; }
.comparador__eti--antes { left: 12px; }
.comparador__eti--despues { right: 12px; }
.comparador__linea { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--blanco); z-index: 2; pointer-events: none; }
.comparador__linea span {
  position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: var(--blanco); box-shadow: var(--sombra-s);
}
.comparador__linea span::before, .comparador__linea span::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -7px;
  border-block: 7px solid transparent;
}
.comparador__linea span::before { left: 11px; border-right: 9px solid var(--tinta); }
.comparador__linea span::after { right: 11px; border-left: 9px solid var(--tinta); }
.comparador__deslizador {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.comparador__deslizador:focus-visible + * , .comparador__marco:focus-within { outline: 3px solid var(--terracota-osc); outline-offset: 3px; }
.comparador__pie { margin-top: 16px; font-size: 1.125rem; color: var(--tinta); max-width: 720px; }
.nota-imagenes { margin-top: 10px; font: 600 0.9375rem/1.4 var(--sans); color: var(--tinta-2); }

/* ============================ LAS CUENTAS ============================ */
.seccion--cuentas { background: var(--papel); border-block: 1px solid var(--borde); }
.cuentas { display: grid; gap: 16px; }
.cuenta { padding: 24px 22px; border-radius: var(--radio); }
.cuenta--ellos { background: var(--crema); border: 1px solid var(--borde); }
.cuenta--nosotros { background: var(--tinta); color: var(--crema); box-shadow: var(--sombra); }
.cuenta__titulo { font-size: 1.375rem; margin-bottom: 14px; }
.cuenta--nosotros .cuenta__titulo { color: var(--crema); }
.cuenta--nosotros .cuenta__titulo em { color: var(--cinta); }
.cuenta__lista { list-style: none; margin: 0; padding: 0; }
.cuenta__lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px dashed #D5C4AC; }
.cuenta--nosotros .cuenta__lista li { border-bottom-color: #6A5848; }
.cuenta__lista span { font-size: 1.125rem; line-height: 1.4; }
.cuenta__lista b { flex: none; font: 600 1.3125rem/1.2 var(--serif); white-space: nowrap; }
.cuenta--ellos .cuenta__lista b { color: var(--tinta-2); }
.cuenta__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; font: 800 0.9375rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.cuenta__total b { font: 600 2.375rem/1 var(--serif); letter-spacing: -.02em; text-transform: none; }
.cuenta--ellos .cuenta__total b { color: var(--terracota-osc); }
.cuenta--nosotros .cuenta__total b { color: var(--cinta); }
.ahorro { margin-top: 26px; font: 500 1.5rem/1.35 var(--serif); text-wrap: balance; }
.ahorro strong { font-weight: 600; color: var(--terracota-osc); background: linear-gradient(transparent 62%, rgba(242, 194, 48, .55) 62%); }
.cuentas__nota { margin-top: 10px; font: 600 0.9375rem/1.45 var(--sans); color: var(--tinta-2); max-width: 760px; }

/* Tabla comparativa: en el móvil, el concepto ocupa su fila y las 4 respuestas van debajo */
.tabla__titulo { margin: 52px 0 18px; font-size: 1.625rem; }
.tabla { display: grid; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); background: var(--crema); }
.tabla__fila { display: grid; grid-template-columns: repeat(4, 1fr); }
.tabla__fila + .tabla__fila { border-top: 1px solid var(--borde); }
.tabla__fila--cabecera { background: var(--tinta); color: var(--crema); }
.tabla__vacia { display: none; }
.tabla__col { padding: 12px 4px; font: 800 0.9375rem/1.2 var(--sans); text-align: center; letter-spacing: .02em; }
.tabla__col--nuestra { background: var(--terracota-osc); color: var(--blanco); }
.tabla__concepto { grid-column: 1 / -1; padding: 14px 16px 4px; font: 700 1.125rem/1.3 var(--sans); }
.tabla__concepto small { display: block; font: 600 0.9375rem/1.35 var(--sans); color: var(--tinta-2); margin-top: 2px; }
.tabla__celda { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 2px 14px; font: 700 1rem/1.2 var(--sans); text-align: center; }
.tabla__celda--nuestra { background: rgba(158, 74, 38, .08); }
.tabla__precio { font: 600 1.125rem/1.1 var(--serif); white-space: nowrap; }
.tabla__celda--nuestra.tabla__precio { color: var(--terracota-osc); font-size: 1.375rem; }
.tabla__celda.si::before, .tabla__celda.no::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background-position: center; background-size: 14px; background-repeat: no-repeat; }
.tabla__celda.si { color: var(--oliva-osc); }
.tabla__celda.si::before { background-color: var(--oliva-osc); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 17l6 6L26 9' fill='none' stroke='white' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tabla__celda.no { color: var(--terracota-osc); }
.tabla__celda.no::before { background-color: var(--terracota-osc); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 9l14 14M23 9 9 23' fill='none' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.tabla__celda.aveces { color: var(--tinta-2); font-weight: 600; }
.cuentas__accion { margin-top: 30px; }
.cuentas__accion .boton { width: 100%; }

/* ============================ PLAN ============================ */
.seccion--plan { background: var(--beige); }
.dias { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.caja-dia { display: grid; grid-template-columns: 70px 1fr; gap: 14px; align-items: start; padding: 20px 20px 22px; border-radius: var(--radio); background: var(--papel); border: 1px solid #DCCBB4; }
.caja-dia h3 { font-size: 1.3125rem; margin-bottom: 6px; }
.caja-dia p { font-size: 1.125rem; line-height: 1.5; }
.caja-dia .dia__num { font-size: 2.875rem; }
.caja-dia--estrella { border: 2px solid var(--terracota-osc); box-shadow: var(--sombra-s); }
.caja-dia--estrella .pastilla { margin-bottom: 8px; font-size: 0.75rem; padding: 5px 9px; }
.regla-oro { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font: 600 1.3125rem/1.4 var(--serif); }
.regla-oro .regla--cinta { font-size: 0.9375rem; letter-spacing: .1em; text-transform: uppercase; }

/* ============================ TIPOS ============================ */
.tipos { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.tipo .foto { aspect-ratio: 3 / 2; margin-bottom: 14px; }
.tipo h3 { font-size: 1.375rem; }
.tipo p { color: var(--tinta-2); font-weight: 600; font-size: 1.125rem; }

/* ============================ INCLUYE ============================ */
.incluye { display: grid; gap: 40px; align-items: center; }
.incluye__mockup { position: relative; aspect-ratio: 3 / 2; }
.escena { position: absolute; inset: 0; }
.escena__hoja { position: absolute; width: 30%; aspect-ratio: 210 / 297; box-shadow: 0 10px 22px rgba(50, 35, 20, .32); background: var(--papel); }
.escena__hoja--a { left: 22%; top: 13%; transform: rotate(-6deg); z-index: 2; }
.tableta { position: absolute; right: 4%; bottom: -6%; width: 34%; aspect-ratio: 3 / 4; padding: 3.2%; border-radius: 14px; background: #1E1A17; box-shadow: 0 16px 34px rgba(30, 20, 10, .4); z-index: 3; transform: rotate(4deg); }
.tableta__pantalla { width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: var(--crema); }
.tableta__pantalla .portada { height: 100%; aspect-ratio: auto; }
.piezas { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.pieza { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; }
.pieza__num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tinta); color: var(--crema); font: 600 1.375rem/1 var(--serif); }
.pieza h3 { margin-bottom: 4px; }

/* ============================ REGALOS (dentro de «Qué recibes») ============================ */
.regalos { margin-top: 44px; }
.regalos__titulo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font: 600 1.625rem/1.2 var(--serif); }
.regalos__titulo svg { width: 34px; height: 34px; color: var(--terracota-osc); }
.regalos__fila { display: grid; gap: 16px; }
.regalo { display: grid; grid-template-columns: 104px 1fr; gap: 18px; align-items: start; padding: 18px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--borde); }
.regalo__portada { box-shadow: var(--sombra-s); border-radius: 2px; overflow: hidden; transform: rotate(-3deg); }
.regalo__texto { display: grid; gap: 8px; }
.regalo__texto .pastilla { justify-self: start; font-size: 0.75rem; padding: 5px 9px; }
.regalo__texto h3 { font-size: 1.3125rem; }
.regalo__texto p { font-size: 1.125rem; line-height: 1.5; }

/* ============================ RESEÑAS ============================ */
.seccion--resenas { background: var(--beige); }
.resenas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.resena { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: var(--radio); background: var(--papel); box-shadow: var(--sombra-s); }
.estrellas { display: flex; gap: 3px; color: var(--cinta); }
.estrellas svg { width: 22px; height: 22px; fill: currentColor; stroke: #B88A12; stroke-width: 1; }
.estrellas .estrella--vacia { fill: none; }
.resena blockquote { margin: 0; font: 500 1.3125rem/1.42 var(--serif); }
.resena__autor { font: 700 1rem/1.3 var(--sans); color: var(--tinta-2); }
/* Las reseñas de ejemplo solo se ven en modo borrador */
body:not(.borrador) [data-ejemplo] { display: none !important; }
.aviso-ejemplo { margin-bottom: 22px; padding: 12px 16px; border-radius: 10px; background: #FFF1A8; font: 700 1rem/1.4 var(--sans); }

/* ============================ AUTORA ============================ */
.autora { display: grid; gap: 30px; align-items: start; }
.autora__foto { margin: 0; width: 82%; max-width: 380px; justify-self: center; position: relative; z-index: 0; }
.autora__foto img { border-radius: var(--radio); box-shadow: var(--sombra); transform: rotate(-2deg); }
.autora__foto::after { content: ""; position: absolute; left: -14px; bottom: -14px; width: 46%; height: 46%; border: 2px solid var(--terracota); border-radius: var(--radio); z-index: -1; }
.autora__texto { display: grid; gap: 16px; max-width: 640px; }
.autora__texto h2 { margin-bottom: 4px; }
.autora__cita { position: relative; margin: 10px 0 4px; padding-left: 1.25em; font: 500 italic 1.5rem/1.4 var(--serif); }
.autora__cita::before { content: "«"; position: absolute; left: 0; top: .02em; font: 500 normal 1.7em/1 var(--serif); color: var(--terracota); }
.autora__firma { font: 600 italic 1.875rem/1 var(--serif); color: var(--terracota-osc); }
.autora__enlace { font-weight: 700; }

/* ============================ PRECIO ============================ */
.seccion--precio { background: var(--papel); border-block: 1px solid var(--borde); }
.tarjeta-precio { position: relative; max-width: 560px; margin: 0 auto; padding: 26px 22px 24px; border-radius: 18px; background: var(--crema); border: 2px solid var(--tinta); box-shadow: var(--sombra); }
.tarjeta-precio__portadas { position: relative; height: 170px; margin: -6px 0 16px; }
.tarjeta-precio__portadas .portada { position: absolute; top: 0; width: 104px; box-shadow: var(--sombra-s); border-radius: 2px; }
.tarjeta-precio__portadas .portada:nth-child(1) { left: calc(50% + 6px); transform: rotate(9deg); top: 12px; }
.tarjeta-precio__portadas .portada:nth-child(2) { left: calc(50% - 110px); transform: rotate(-9deg); top: 12px; }
.tarjeta-precio__portadas .portada:nth-child(3) { left: calc(50% - 60px); width: 120px; z-index: 2; }
.tarjeta-precio__lista { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.tarjeta-precio__lista li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; }
.tarjeta-precio__lista svg { width: 24px; height: 24px; margin-top: 3px; color: var(--oliva-osc); stroke-width: 3; }
.tarjeta-precio__cifra { display: grid; justify-items: center; gap: 4px; margin-bottom: 18px; padding-top: 18px; border-top: 2px dashed #D5C4AC; }
.tarjeta-precio__antes { font: 700 1.125rem/1.2 var(--sans); color: var(--tinta-2); text-align: center; }
.tarjeta-precio__antes s { text-decoration-thickness: 2px; text-decoration-color: var(--terracota-osc); }
.tarjeta-precio__antes small { display: block; font-size: 0.9375rem; font-weight: 600; }
.tarjeta-precio__ahora { font: 600 5.25rem/1 var(--serif); letter-spacing: -.03em; color: var(--tinta); }
.tarjeta-precio__iva { font: 700 1rem/1.2 var(--sans); color: var(--tinta-2); }

/* ============================ GARANTÍA ============================ */
.garantia { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; }
.garantia__icono { width: 60px; height: 60px; color: var(--oliva-osc); stroke-width: 1.8; }
.garantia h2 { margin: 0 0 10px; }

/* ============================ AUTOR ============================ */

/* ============================ FAQ ============================ */
.seccion--faq { background: var(--beige); }
.seccion--faq h2 { margin: 0 0 22px; }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--papel); border-radius: 12px; border: 1px solid #D9C8B0; }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 56px 18px 20px; font: 700 1.1875rem/1.35 var(--sans); min-height: 60px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 14px; height: 14px; margin-top: -10px;
  border: solid var(--terracota-osc); border-width: 0 3px 3px 0; transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details p { padding: 0 20px 20px; }

/* ============================ CIERRE ============================ */
.seccion--cierre { padding: 80px 0 96px; }
.cierre { display: grid; justify-items: center; text-align: center; gap: 18px; }
.cierre h2 { font-size: 2.25rem; }
.cierre .boton { width: 100%; max-width: 480px; }

/* ============================ PIE ============================ */
.pie { background: var(--tinta); color: var(--crema); padding: 40px 0 48px; }
.pie__in { display: grid; gap: 14px; }
.pie__marca { font: 800 1rem/1.3 var(--sans); }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pie a { color: var(--crema); font-weight: 600; font-size: 1.0625rem; }
.pie a:hover { color: var(--cinta); }
.pie__legal { font: 500 0.9375rem/1.5 var(--sans); color: #E3D7C6; }
.borrador .pie .pendiente { color: var(--tinta); }

/* ============================ PORTADA (componente) ============================ */
/* Escala con su propio ancho (unidades cqw): 1cqw = 1% del ancho. Mismas proporciones que el A4 impreso. */
.portada {
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 210 / 297; overflow: hidden;
  background: linear-gradient(180deg, #EFE6DA 0 46%, #D8C4A8 46% 100%);
  color: var(--tinta);
}
.portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.portada__texto { position: absolute; left: 7.6cqw; right: 7.6cqw; top: 7.6cqw; display: grid; gap: 2.2cqw; justify-items: start; }
.portada__ante { font: 800 2cqw/1 var(--sans); letter-spacing: .16em; color: var(--terracota-osc); text-transform: uppercase; }
.portada__pill { font: 800 2.2cqw/1 var(--sans); letter-spacing: .14em; color: var(--blanco); padding: 1.2cqw 2.2cqw; border-radius: 1cqw; text-transform: uppercase; }
.portada .portada__titulo { font: 600 11.2cqw/.94 var(--serif); letter-spacing: -.02em; margin: 0; color: var(--tinta); }
.portada .portada__titulo em { font-style: italic; color: var(--terracota-osc); }
.portada .portada__titulo--medio { font-size: 8.4cqw; line-height: .98; }
.portada__sub { font: 500 2.75cqw/1.32 var(--serif); max-width: 58cqw; color: var(--tinta); }
.portada__sello { position: absolute; right: 6cqw; top: 52cqw; width: 23cqw; height: 23cqw; color: var(--terracota-osc); transform: rotate(8deg); }
.portada__sello text { font: 800 0.525rem var(--sans); letter-spacing: .06em; fill: currentColor; }
.portada__banda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3.2cqw 7.6cqw 3cqw; background: var(--crema);
  display: grid; gap: 1.2cqw;
}
.portada__banda::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.4cqw;
  border-top: .5cqw solid var(--roble);
  background:
    repeating-linear-gradient(90deg, var(--roble) 0 .4cqw, transparent .4cqw 10cqw) top left / 100% 2.2cqw no-repeat,
    repeating-linear-gradient(90deg, var(--roble) 0 .25cqw, transparent .25cqw 2cqw) top left / 100% 1.1cqw no-repeat;
}
.portada__datos { font: 700 1.85cqw/1.3 var(--sans); color: var(--tinta); }
.portada__marca { font: 800 1.7cqw/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }

/* ==========================================================================
   Tableta y escritorio
   ========================================================================== */
@media (min-width: 700px) {
  body { font-size: 1.25rem; }
  .seccion { padding: 76px 0 80px; }
  h2 { font-size: 2.75rem; }
  .hero__titulo { font-size: 4rem; }
  .hero__accion .boton { width: auto; }
  .tipos { grid-template-columns: repeat(2, 1fr); }
  .muestras__fila { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 4px; }
  .dias { grid-template-columns: 1fr 1fr; }
  .regalos__fila { grid-template-columns: 1fr 1fr; }
  .resenas { grid-template-columns: 1fr 1fr; }
  .cuentas { grid-template-columns: 1fr 1fr; gap: 20px; }
  .cuentas__accion .boton { width: auto; }
  .tabla__fila { grid-template-columns: 1.6fr repeat(4, 1fr); align-items: stretch; }
  .tabla__vacia { display: block; }
  .tabla__concepto { grid-column: auto; padding: 16px 18px; align-self: center; }
  .tabla__celda { padding: 14px 8px; }
  .tabla__col { padding: 16px 8px; font-size: 1rem; display: flex; align-items: center; justify-content: center; }
}

@media (min-width: 960px) {
  .hero { padding: 64px 0 88px; }
  .hero__rejilla { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 56px; }
  .hero__titulo { font-size: 4.875rem; }
  .hero__entrada { font-size: 1.4375rem; }
  .foto--hero { aspect-ratio: 4 / 4.3; }
  .hero__portada { width: 34%; left: -46px; bottom: -28px; }
  .tipos { grid-template-columns: repeat(6, 1fr); }
  .tipo { grid-column: span 2; }
  .tipo:nth-child(4) { grid-column: 2 / span 2; }
  .incluye { grid-template-columns: 1.1fr 1fr; gap: 64px; }
  .resenas { grid-template-columns: repeat(3, 1fr); }
  .autora { grid-template-columns: 380px 1fr; gap: 64px; align-items: center; }
  .autora__foto { width: 100%; }
  .regalo { grid-template-columns: 120px 1fr; padding: 22px; }
  .seccion--dolores h2, .cierre h2 { font-size: 3rem; }
}

/* ==========================================================================
   v3 · Capa de personalidad: papel, cinta métrica y movimiento
   Todo el movimiento se apaga con prefers-reduced-motion (regla al principio del archivo).
   ========================================================================== */

/* Grano de papel muy suave sobre toda la página */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .14 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .2;
}

/* Cinta métrica que cruza la página entre el hero y «Qué recibes» */
.cinta {
  position: relative; z-index: 3; width: 104%; margin: -6px 0 0 -2%;
  transform: rotate(-1.6deg); overflow: hidden;
  background:
    repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 8px) bottom left / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--tinta) 0 1.5px, transparent 1.5px 40px) bottom left / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 8px) top left / 100% 5px no-repeat,
    var(--cinta);
  border-block: 2px solid #C79A16;
  box-shadow: 0 12px 26px rgba(60, 40, 25, .2);
}
.cinta__pista { display: flex; width: max-content; animation: cinta 48s linear infinite; }
.cinta__pista span {
  display: inline-flex; align-items: center; gap: 22px; padding: 16px 0 20px 22px;
  font: 800 0.9375rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta); white-space: nowrap;
}
.cinta__pista span::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--terracota-osc); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Aparecer al hacer scroll (landing.js añade .js-anim a <html> y .rv a cada bloque) */
/* Se usa la propiedad translate (no transform) para no pisar los giros y los efectos al pasar el ratón */
.js-anim .rv { opacity: 0; translate: 0 26px; transition: opacity .85s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), translate .85s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.js-anim .rv.visible { opacity: 1; translate: 0 0; }
.js-anim .rv--izq { translate: -32px 0; }

/* Pequeños movimientos con vida */
.foto--hero img { animation: respirar 20s ease-in-out infinite alternate; transform-origin: 60% 60%; }
@keyframes respirar { to { transform: scale(1.06); } }
.hero__etiqueta { transform-origin: 10% 50%; animation: colgar 3.6s cubic-bezier(.3, .6, .3, 1) 1.1s both; }
@keyframes colgar { 0% { transform: rotate(-14deg); } 35% { transform: rotate(2deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(-2deg); } 100% { transform: rotate(-3deg); } }
.hero__portada { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.boton { position: relative; overflow: hidden; }
.boton::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg); transition: left .7s ease;
}
@media (hover: hover) {
  .boton:hover::after { left: 130%; }
  .hero__visual:hover .hero__portada { transform: rotate(-1deg) translateY(-8px); }
  .caja-dia, .resena, .regalo, .cuenta, .pagina-real__boton, .tipo .foto, .pieza__num {
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, background .35s ease;
  }
  .caja-dia:hover, .resena:hover, .regalo:hover { transform: translateY(-5px); box-shadow: var(--sombra); }
  .caja-dia:hover .dia__num { color: var(--terracota-osc); }
  .tipo:hover .foto { transform: translateY(-5px) rotate(-.6deg); }
  .pieza:hover .pieza__num { transform: rotate(-10deg) scale(1.08); background: var(--terracota-osc); }
}

/* Mockup de «Qué recibes»: el libro impreso y la tableta, uno junto al otro sobre la misma escena */
.escena__hoja { overflow: hidden; }
.tableta__pantalla img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.escena__hoja--a { left: 17%; top: 9%; width: 34%; transform: rotate(-5deg); }
.tableta { left: 50%; right: auto; top: 14%; bottom: auto; width: 34%; transform: rotate(4deg); }
.incluye__accion { margin-top: 36px; display: grid; justify-items: start; }
.incluye__accion .boton { width: 100%; }

/* Páginas reales del libro */
.muestras { margin-top: 56px; }
.muestras__nota { color: var(--tinta-2); letter-spacing: .02em; text-transform: none; font-weight: 600; }
.muestras__fila { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 6px 20px 22px; }
.pagina-real { margin: 0; display: grid; gap: 12px; scroll-snap-align: start; }
.pagina-real__boton { display: block; padding: 0; border: 0; background: var(--papel); cursor: zoom-in; border-radius: 4px; overflow: hidden; box-shadow: var(--sombra-s); }
.pagina-real:nth-child(odd) .pagina-real__boton { transform: rotate(-1.2deg); }
.pagina-real:nth-child(even) .pagina-real__boton { transform: rotate(1deg); }
.pagina-real__boton img { width: 100%; height: auto; }
.pagina-real figcaption { font: 700 1rem/1.35 var(--sans); color: var(--tinta-2); }
@media (hover: hover) { .pagina-real__boton:hover { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: var(--sombra); } }

/* Visor para ampliar una página */
.visor { padding: 0; border: 0; background: transparent; max-width: min(94vw, 760px); max-height: 94vh; overflow: visible; }
.visor::backdrop { background: rgba(30, 20, 12, .84); }
.visor img { display: block; max-width: 100%; max-height: 90vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.visor__cerrar {
  position: absolute; top: -18px; right: -12px; z-index: 2; width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: var(--papel); color: var(--tinta); font: 600 2.125rem/1 var(--serif); cursor: pointer; box-shadow: var(--sombra-s);
}
.visor[open] { animation: abrir .3s cubic-bezier(.2, .7, .2, 1); }
@keyframes abrir { from { opacity: 0; transform: scale(.94); } }

@media (min-width: 700px) {
  .incluye__accion .boton { width: auto; }
  .muestras__fila { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 6px 0 0; }
  .cinta__pista span { font-size: 1rem; }
}

/* ==========================================================================
   Impeccable · typeset + layout (16/10/2026)
   ========================================================================== */

/* Superficies del navegador con la paleta */
::selection { background: var(--terracota-clara); color: var(--tinta); }
html { scrollbar-color: var(--roble) var(--crema); caret-color: var(--terracota-osc); }

/* Cifras alineadas en precios y tablas */
.cuenta__lista b, .cuenta__total b, .tabla__precio, .tarjeta-precio__ahora, .tarjeta-precio__antes, .boton__precio, .dia__num {
  font-variant-numeric: lining-nums tabular-nums;
}

/* Titular de las páginas de muestra (antes era un antetítulo) */
.muestras__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 18px; font-size: 1.5rem; }
.muestras__nota { font: 600 1rem/1.3 var(--sans); color: var(--tinta-2); letter-spacing: 0; text-transform: none; }

/* «Haz las cuentas», el clímax: banda oscura a toda anchura */
.seccion--cuentas { background: var(--tinta); color: var(--crema); border: 0; }
.seccion--cuentas h2, .seccion--cuentas .tabla__titulo { color: var(--crema); }
.seccion--cuentas h2 em { color: var(--terracota-clara); }
.cuenta--ellos { background: #43362A; border: 1px solid #5A4A3B; color: var(--crema); }
.cuenta--ellos .cuenta__lista li { border-bottom-color: #64523F; }
.cuenta--ellos .cuenta__lista b { color: #D8CBBA; }
.cuenta--ellos .cuenta__total b { color: var(--terracota-clara); }
.cuenta--nosotros { background: var(--papel); color: var(--tinta); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55); }
.cuenta--nosotros .cuenta__titulo { color: var(--tinta); }
.cuenta--nosotros .cuenta__titulo em { color: var(--terracota-osc); }
.cuenta--nosotros .cuenta__lista li { border-bottom-color: #D5C4AC; }
.cuenta--nosotros .cuenta__total b { color: var(--terracota-osc); }
.ahorro { color: var(--crema); }
.ahorro strong { color: var(--cinta); background: none; }
.cuentas__nota { color: #D8CBBA; }
.tabla { color: var(--tinta); border-color: #5A4A3B; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6); }
.cuenta--ellos .cuenta__titulo { color: var(--crema); }

/* Móvil: los salones tipo y las reseñas en una fila que se desliza, para acortar la página */
@media (max-width: 699px) {
  .tipos, .resenas {
    grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 -20px; padding: 4px 20px 18px; scrollbar-width: thin;
  }
  .tipo, .resena { scroll-snap-align: start; }
  .caja-dia { padding: 16px 16px 18px; grid-template-columns: 58px 1fr; gap: 12px; }
  .caja-dia .dia__num { font-size: 2.5rem; }
}

/* ==========================================================================
   Impeccable · pasada 2 (dual-agent): typeset + layout + polish (16/10/2026)
   ========================================================================== */

/* ---- Tipografía: roles con escalones claros ---- */
p, li, blockquote, summary, figcaption { text-wrap: pretty; }
.microcopia { font: 600 1.125rem/1.45 var(--sans); text-wrap: balance; max-width: 40ch; }
.microcopia--centro { margin-inline: auto; }
.pastilla { font: 700 1rem/1.15 var(--sans); text-transform: none; letter-spacing: .01em; padding: 7px 12px; }
.caja-dia--estrella .pastilla, .regalo__texto .pastilla { font-size: 1rem; padding: 7px 12px; }
.comparador__eti { font: 800 0.9375rem/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.dia__rotulo { font-size: 0.9375rem; letter-spacing: .1em; }
.hero__etiqueta .etiqueta__fecha { font: 600 1rem/1.25 var(--sans); }
.cuentas__nota, .nota-imagenes, .tabla__concepto small, .tarjeta-precio__antes small, .pie__legal { font-size: 1rem; line-height: 1.5; }
.cuentas__nota { max-width: 60ch; }
.giro, .ahorro, .autora__cita { font-size: 1.375rem; }
.resena blockquote { font-size: 1.375rem; }
.muestras__titulo, .tabla__titulo, .regalos__titulo { font-size: 1.625rem; }
h3, .caja-dia h3, .regalo__texto h3, .tipo h3, .cuenta__titulo { font-size: 1.375rem; }
.tipo p { color: var(--tinta); font-weight: 500; line-height: 1.5; }
.seccion--dolores h2, .cierre h2 { font-size: 2.5rem; line-height: 1.05; letter-spacing: -.02em; }
.seccion--cuentas .cuenta__lista span { line-height: 1.5; letter-spacing: .005em; }
.comparador__ayuda { margin: 0 0 12px; font: 600 1.0625rem/1.4 var(--sans); color: var(--tinta-2); }

/* ---- Comparador: las 4 pestañas a la vista en el móvil (rejilla 2×2) ---- */
@media (max-width: 699px) {
  .comparador__pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; padding: 2px 0 14px; }
  .comparador__pestanas button { min-height: 56px; white-space: normal; line-height: 1.2; border-radius: 12px; padding: 8px 10px; }
}

/* ---- Filas deslizables: margen al encajar y botones ‹ › con contador ---- */
.muestras__fila { scroll-padding-inline: 20px; }
.deslizable__barra { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 6px; }
.deslizable__boton {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--tinta); background: var(--papel); color: var(--tinta); cursor: pointer;
}
.deslizable__boton svg { width: 24px; height: 24px; stroke-width: 3; }
.deslizable__boton:disabled { opacity: .35; cursor: default; }
.deslizable__cuenta { min-width: 6ch; text-align: center; font: 700 1.125rem/1 var(--sans); font-variant-numeric: tabular-nums; }
@media (max-width: 699px) {
  .tipos, .resenas { scroll-padding-inline: 20px; }
}
@media (min-width: 700px) {
  .deslizable__barra { display: none; }
}

/* ---- Tabla comparativa: cabecera fija mientras se recorre ---- */
.tabla { overflow: clip; }
@supports not (overflow: clip) { .tabla { overflow: visible; } }
.tabla__fila--cabecera { position: sticky; top: 67px; z-index: 2; box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .35); }
.tabla__col { display: flex; align-items: center; justify-content: center; }
@media (max-width: 420px) {
  .tabla__col { padding: 10px 1px; font-size: 0.875rem; letter-spacing: 0; }
  .tabla__precio { font-size: 1rem; }
  .tabla__celda--nuestra.tabla__precio { font-size: 1.1875rem; }
}

/* ---- Tarjeta de precio: garantía y pago junto al botón ---- */
.tarjeta-precio__garantia {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center;
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radio-s);
  background: rgba(86, 91, 51, .10); font: 600 1.125rem/1.4 var(--sans);
}
.tarjeta-precio__garantia svg { width: 36px; height: 36px; color: var(--oliva-osc); stroke-width: 1.8; }
.tarjeta-precio__garantia strong { font-weight: 800; }
.tarjeta-precio__pago { margin-top: 12px; font: 600 1.125rem/1.45 var(--sans); color: var(--tinta-2); text-align: center; }

/* ---- Dolores: casillas sin marcar en vez de números (son síntomas, no pasos) ---- */
.dolores { counter-reset: none; }
.dolores li::before {
  counter-increment: none; content: ""; top: 17px;
  width: 26px; height: 26px; border-radius: 4px; border: 2px solid var(--tinta); background: var(--papel);
}

/* ---- Pie: zonas táctiles cómodas ---- */
.pie__enlaces { gap: 4px 20px; }
.pie__enlaces a { display: inline-block; padding-block: 9px; }

/* ---- El aviso «Falta imagen» solo en modo borrador ---- */
body:not(.borrador) .foto--falta::after { display: none; }

@media (min-width: 700px) {
  .entradilla { font-size: 1.375rem; }
  .seccion--dolores h2, .cierre h2 { font-size: 3rem; }
  .giro, .ahorro, .autora__cita { font-size: 1.5rem; }
}
@media (min-width: 960px) {
  .entradilla { font-size: 1.4375rem; }
  .seccion--dolores h2, .cierre h2 { font-size: 3.5rem; }
  .giro, .ahorro, .autora__cita { font-size: 1.625rem; }
  .muestras__titulo, .tabla__titulo, .regalos__titulo { font-size: 1.875rem; }
  h3, .caja-dia h3, .regalo__texto h3, .tipo h3, .cuenta__titulo { font-size: 1.5rem; }
  .incluye { align-items: start; }
  .incluye__mockup { position: sticky; top: 96px; }
}

/* Cuenta atrás del precio de lanzamiento (fecha real) */
.aviso-precio__cuenta { font-weight: 800; color: var(--cinta); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Pasada 3 (16/10/2026): colorize + bolder del cierre + Fraunces óptica
   ========================================================================== */
:root {
  --salvia: #E3DFD1;        /* crema con un 14% de oliva: fondo de «Qué hay dentro» */
  --oliva-banda: var(--oliva-osc);
  --noche: #2A2019;          /* base del cierre, más honda que la tinta */
}
h1, h2, h3, h4 { font-optical-sizing: auto; }

/* «Qué hay dentro»: fondo salvia para separarlo de las secciones beige */
.seccion--plan { background: var(--salvia); }

/* El precio: banda oliva, la decisión de compra como momento propio */
.seccion--precio { background: var(--oliva-banda); color: var(--crema); border: 0; }
.seccion--precio h2 { color: var(--crema); }
.seccion--precio h2 em { color: var(--terracota-clara); }
.seccion--precio .entradilla { color: #E8E4D3; }
.seccion--precio .tarjeta-precio { color: var(--tinta); box-shadow: 0 30px 60px -24px rgba(20, 18, 8, .6); }

/* ---------- Cierre (bolder): el final de la página como pico ----------
   La misma habitación de noche con la luz cálida encendida, a toda anchura, y el titular a pleno tamaño. */
.seccion--cierre {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 104px 0 112px; background: var(--noche); color: var(--crema);
}
.seccion--cierre::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/A4_despues-1600.webp") center 55% / cover no-repeat;
}
.seccion--cierre::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(42, 32, 25, .55), rgba(42, 32, 25, .86)),
    linear-gradient(rgba(42, 32, 25, .35), rgba(42, 32, 25, .7));
}
.seccion--cierre .cierre { gap: 22px; }
.seccion--cierre .sello { color: var(--crema); width: 108px; height: 108px; }
.seccion--cierre h2 { color: var(--crema); font-size: 2.75rem; line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.seccion--cierre h2 em { color: var(--cinta); }
.seccion--cierre .cierre > p:not(.microcopia) { font: 500 1.375rem/1.45 var(--serif); color: #EFE7DB; max-width: 32ch; }
.seccion--cierre .microcopia { color: #E3D7C6; }
.seccion--cierre .boton { box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 36px -12px rgba(0, 0, 0, .7); }
@media (min-width: 700px) {
  .seccion--cierre { padding: 140px 0 150px; }
  .seccion--cierre h2 { font-size: 4rem; }
}
@media (min-width: 960px) {
  .seccion--cierre { min-height: 82vh; display: grid; align-items: center; }
  .seccion--cierre h2 { font-size: 5.25rem; }
  .seccion--cierre .cierre > p:not(.microcopia) { font-size: 1.625rem; }
}

/* Firma de Elena en el hero: quien llega desde su vídeo la reconoce junto al título */
.hero__firma { display: flex; align-items: center; gap: 14px; margin-top: -2px; }
.hero__firma img {
  flex: none; width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--papel), 0 0 0 4.5px var(--terracota-clara), var(--sombra-s);
}
.hero__firma p { font: 500 1.0625rem/1.35 var(--sans); color: var(--tinta-2); }
.hero__firma strong { display: block; font: 700 1.125rem/1.25 var(--sans); color: var(--tinta); }
.hero__firma span { display: block; }
@media (min-width: 960px) {
  .hero__firma img { width: 64px; height: 64px; }
}

/* ==========================================================================
   Página de descarga / agradecimiento (ruta secreta, ver README)
   ========================================================================== */
.descarga { padding: 48px 0 72px; }
.descarga__cabeza { display: grid; justify-items: start; gap: 14px; margin-bottom: 34px; }
.descarga__sello { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--oliva-osc); color: var(--crema); box-shadow: var(--sombra-s); }
.descarga__sello svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.descarga__titulo { font-size: 2.75rem; line-height: 1.02; letter-spacing: -.02em; }
.descarga__titulo em { font-style: italic; color: var(--terracota-osc); }
.descarga__entrada { font-size: 1.3125rem; line-height: 1.5; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.paso { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 22px 20px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--borde); }
.paso h2 { font-size: 1.5rem; margin-bottom: 8px; }
.paso p + p, .paso p + ul, .paso ul + a { margin-top: 12px; }
.paso__icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--crema); color: var(--terracota-osc); }
.paso__icono svg, .archivos svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.paso__icono svg { width: 28px; height: 28px; }
.archivos, .consejos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.archivos li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-weight: 600; }
.archivos svg { width: 24px; height: 24px; margin-top: 3px; color: var(--oliva-osc); stroke-width: 3; }
.consejos li { padding-left: 18px; position: relative; }
.consejos li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--terracota); }
.descarga__boton { margin-top: 18px; width: 100%; }
.descarga__ayuda { margin-top: 26px; padding: 22px 20px; border-radius: var(--radio); background: var(--salvia); }
.descarga__ayuda h2 { font-size: 1.375rem; margin-bottom: 8px; }
.descarga__firma { display: flex; align-items: center; gap: 16px; margin-top: 34px; }
.descarga__firma img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--papel), 0 0 0 4.5px var(--terracota-clara); }
.descarga__firma p { font: 500 1.0625rem/1.4 var(--sans); color: var(--tinta-2); }
.descarga__firma strong { display: block; font: 600 italic 1.5rem/1.2 var(--serif); color: var(--terracota-osc); margin-top: 2px; }
.descarga__firma a { display: inline-block; margin-top: 2px; font-weight: 700; }
@media (min-width: 700px) {
  .descarga { padding: 72px 0 96px; }
  .descarga__titulo { font-size: 3.75rem; }
  .paso { padding: 28px; grid-template-columns: 60px 1fr; }
  .descarga__boton { width: auto; }
}

/* ==========================================================================
   Precios por elemento (18/10/2026): regalos con su precio suelto, complementos incluidos
   ========================================================================== */
.incluye__texto { display: grid; gap: 22px; }
.piezas__nota { padding: 14px 16px; border-left: 3px solid var(--oliva); background: rgba(122, 127, 79, .1); border-radius: 0 var(--radio) var(--radio) 0; font-size: 1.0625rem; line-height: 1.5; }
.regalo__precio { font: 600 1rem/1.4 var(--sans); color: var(--tinta-2); }
.regalo__precio strong { color: var(--oliva-osc); white-space: nowrap; }
.tarjeta-precio__lista li:has(.tarjeta-precio__valor) { grid-template-columns: 26px 1fr auto; align-items: start; }
.tarjeta-precio__valor { font: italic 500 1rem/1.3 var(--serif); color: var(--tinta-2); text-align: right; white-space: nowrap; padding-top: 5px; }
.tarjeta-precio__valor b { display: block; font: 700 normal .9375rem/1.3 var(--sans); color: var(--oliva-osc); text-transform: uppercase; letter-spacing: .06em; }
.tarjeta-precio__valor small { display: block; font: 500 normal .875rem/1.3 var(--sans); color: var(--tinta-2); }
.tarjeta-precio__suma { margin: -6px 0 22px; padding: 12px 14px; border-radius: var(--radio); background: var(--crema); font-size: 1.0625rem; line-height: 1.45; text-align: center; }
.tarjeta-precio__suma strong { color: var(--terracota-osc); }

/* Página de descarga: un botón por archivo */
.archivos--descarga { gap: 10px; margin-top: 16px; }
.archivos--descarga li { display: block; }
.archivo { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; min-height: 72px; padding: 12px 16px; border-radius: var(--radio); background: var(--crema); border: 1px solid var(--borde); color: var(--tinta); text-decoration: none; transition: background-color .2s, border-color .2s, transform .2s; }
.archivo:hover { background: var(--beige); border-color: var(--roble); }
.archivo:active { transform: scale(.99); }
.archivo:focus-visible { outline: 3px solid var(--terracota); outline-offset: 2px; }
.archivo__icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--terracota-osc); color: var(--crema); }
.archivos--descarga .archivo__icono svg { width: 26px; height: 26px; margin: 0; color: var(--crema); stroke-width: 2.6; }
.archivo__texto { display: grid; gap: 2px; }
.archivo__texto b { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.archivo__texto small { font: 500 .9375rem/1.3 var(--sans); color: var(--tinta-2); }
.archivo__accion { font: 700 .875rem/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--terracota-osc); }
@media (max-width: 699px) {
  .paso .archivos--descarga { margin-left: -68px; }
  .archivo { grid-template-columns: 44px 1fr; padding: 12px 14px; }
  .archivo__icono { width: 44px; height: 44px; }
  .archivo__accion { display: none; }
}