/* Alma Rivera · landing
   Colores de marca: crema #f6efe4, tinta #1c1815, rojo #c0262f, melocotón #f0b48f.
   El amarillo de las pegatinas sale del look amarillo de Alma. */

/* Una sola letra, Inter, también en los titulares (800 y 900). Dani, 7 nov por la noche, tras probar Fraunces y Unbounded:
   «una más sencilla. Que sea negrita, pero que no sea curvada ni nada. Algo más recto» */
@font-face {
  font-family: "Inter";
  src: url("fuentes/inter.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --crema: #f6efe4;
  --papel: #fffaf3;
  --tinta: #1c1815;
  --tinta-suave: #4a403a;
  --rojo: #c0262f;
  --rojo-oscuro: #9e1d25;
  --melocoton: #f0b48f;
  --melocoton-claro: #fde3d3;
  --amarillo: #ffd447;
  --gris: #6e625a;
  --gris-claro: #d9cdbf;
  --ancho: 1160px;
  --margen: clamp(16px, 4.5vw, 40px);
  --titular: var(--sans);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, video, svg { display: block; max-width: 100%; }
p { margin: 0 0 1em; }
a { color: inherit; }
button { font: inherit; color: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.bloque--oscuro :focus-visible,
.bloque--rojo :focus-visible,
.cierre :focus-visible,
.pie :focus-visible,
.visor :focus-visible { outline-color: var(--amarillo); }

.saltar {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  padding: 10px 14px; border-radius: 10px;
  background: var(--tinta); color: var(--papel); font-weight: 700;
}
.saltar:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icono {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Piezas comunes ---------- */

.etiqueta-ia {
  display: inline-flex; align-items: center;
  padding: 5px 10px; border-radius: 999px;
  background: var(--tinta); color: var(--crema);
  font: 600 0.75rem/1 var(--sans); letter-spacing: 0.01em; white-space: nowrap;
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 22px;
  border: 2px solid var(--tinta); border-radius: 999px;
  background: var(--rojo); color: var(--papel);
  box-shadow: 4px 4px 0 var(--tinta);
  font: 700 1rem/1.1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}
.boton:hover { background: var(--rojo-oscuro); }
.boton:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.boton__icono { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.boton--grande { min-height: 58px; padding: 15px 28px; font-size: 1.125rem; }
.boton--ancho { width: 100%; }
.boton--claro { background: var(--papel); color: var(--tinta); }
.boton--claro:hover { background: var(--amarillo); }
.boton--crema { background: var(--crema); color: var(--tinta); }
.boton--crema:hover { background: var(--amarillo); }

.pegatina {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 8px 14px 8px 12px;
  border: 2px solid var(--tinta); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--tinta);
  font: 700 0.9375rem/1.1 var(--sans);
  transform: rotate(-3deg);
}
.pegatina .icono { width: 18px; height: 18px; }
.pegatina--amarilla { background: var(--amarillo); color: var(--tinta); }
.pegatina--roja { background: var(--rojo); color: var(--papel); }

.enlace-suave {
  font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.enlace-suave:hover { text-decoration-color: var(--rojo); }

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: rgba(246, 239, 228, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--tinta);
}
.cabecera__dentro {
  max-width: var(--ancho); margin: 0 auto; padding: 10px var(--margen);
  display: flex; align-items: center; gap: 10px;
}
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.marca__cara { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--tinta); }
.marca__nombre { font: 800 1.3125rem/1 var(--titular); letter-spacing: -0.03em; white-space: nowrap; }
.boton--cabecera { margin-left: auto; min-height: 44px; padding: 8px 16px; font-size: 0.9375rem; box-shadow: 3px 3px 0 var(--tinta); }

@media (max-width: 520px) {
  .boton--cabecera { width: 46px; padding: 0; }
  .boton--cabecera span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 350px) {
  .marca__cara { display: none; }
}

/* ---------- Portada ---------- */

.portada {
  max-width: var(--ancho); margin: 0 auto;
  padding: 28px var(--margen) 64px;
  display: grid; gap: 36px;
}
@media (min-width: 960px) {
  .portada { grid-template-columns: 1fr 1.02fr; align-items: center; gap: 48px; padding-top: 52px; padding-bottom: 88px; }
}

.portada__titulo, .titulo-bloque, .ultimo__titulo, .presentador__nombre, .paso__titulo { text-wrap: balance; }
.portada__titulo {
  margin: 0 0 20px;
  font: 900 clamp(2.75rem, 1.5rem + 5.4vw, 5.5rem)/1 var(--titular);
  letter-spacing: -0.045em;
}
@media (min-width: 960px) {
  /* con dos columnas, el titular solo tiene la mitad del ancho */
  .portada__titulo { font-size: clamp(3.6rem, 1.2rem + 4.6vw, 5.2rem); }
}
.portada__salto { display: block; }

.rotulador { position: relative; z-index: 0; background: none; color: inherit; white-space: nowrap; }
.rotulador::before {
  content: ""; position: absolute; z-index: -1;
  left: -0.1em; right: -0.12em; bottom: 0.08em; height: 0.46em;
  background: var(--amarillo); border-radius: 0.18em 0.3em 0.22em 0.32em;
  transform: rotate(-2deg);
}

.portada__entradilla { max-width: 33em; margin: 0 0 22px; font-size: 1.1875rem; color: var(--tinta-suave); }

.sin-lista { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sin {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border: 2px solid var(--tinta); border-radius: 999px;
  background: var(--papel); font-weight: 700; font-size: 0.9375rem;
}
.sin .icono { width: 22px; height: 22px; color: var(--rojo); }

.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.portada__nota { margin: 18px 0 0; font-size: 0.9375rem; color: var(--gris); }

/* El equipo: 5 personas de verdad detrás de Alma */
.equipo { display: flex; align-items: center; gap: 14px; max-width: 34em; margin: 24px 0 0; }
.equipo__caras { display: flex; flex: none; list-style: none; margin: 0; padding: 0 0 0 8px; }
.equipo__caras li {
  display: grid; place-items: center; width: 36px; height: 36px; margin-left: -8px;
  border: 2px solid var(--tinta); border-radius: 50%; background: var(--melocoton);
}
.equipo__caras li:nth-child(2) { background: var(--amarillo); }
.equipo__caras li:nth-child(3) { background: var(--rojo); color: var(--papel); }
.equipo__caras li:nth-child(4) { background: var(--melocoton-claro); }
.equipo__caras li:nth-child(5) { background: var(--papel); }
.equipo__caras .icono { width: 20px; height: 20px; }
.equipo__texto { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--tinta-suave); }
.equipo__texto strong { color: var(--tinta); }
@media (max-width: 420px) {
  .equipo { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* De 3 fotos a un vídeo */
.cambio { position: relative; width: min(100%, 560px); margin: 0 auto 44px; aspect-ratio: 1 / 1.04; }
.cambio__circulo {
  position: absolute; right: 0; top: 5%; width: 76%; aspect-ratio: 1;
  border-radius: 50%; background: var(--rojo); border: 2px solid var(--tinta);
}
.cambio__foto {
  --giro: 0deg;
  position: absolute; z-index: 2; width: 32%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border: 5px solid var(--papel); border-radius: 6px;
  box-shadow: 0 2px 0 var(--tinta), 0 12px 26px rgba(28, 24, 21, 0.26);
  transform: rotate(var(--giro));
}
.cambio__foto--1 { --giro: -9deg; left: 1%; top: 13%; }
.cambio__foto--2 { --giro: 6deg; left: 15%; top: 36%; }
.cambio__foto--3 { --giro: -4deg; left: 2%; top: 59%; }
.cambio__pegatina-fotos { position: absolute; z-index: 5; left: 0; top: 2%; }
.cambio__flecha { position: absolute; z-index: 4; left: 31%; top: 37%; width: 19%; overflow: visible; }
.cambio__trazo, .cambio__punta, .cambio__halo { fill: none; stroke: var(--tinta); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.cambio__halo { stroke: var(--papel); stroke-width: 11; }
.cambio__movil { position: absolute; z-index: 3; right: 8%; top: 1%; width: 49%; }
.cambio__pegatina-video { position: absolute; z-index: 5; right: 0; bottom: 3%; transform: rotate(3deg); }
.cambio__pie {
  position: absolute; left: 0; right: 0; top: calc(100% + 12px);
  margin: 0; text-align: center; font-size: 0.8125rem; color: var(--gris);
}

.movil {
  padding: 7px;
  background: var(--tinta); border-radius: 30px;
  box-shadow: 6px 6px 0 rgba(28, 24, 21, 0.35);
}
.movil__video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 24px; background: #000; }
.movil__sonido {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border: 2px solid var(--tinta); border-radius: 999px;
  background: var(--papel); color: var(--tinta);
  font: 700 0.8125rem/1 var(--sans); white-space: nowrap; cursor: pointer;
}
.movil__sonido .icono { width: 18px; height: 18px; }
.movil__sonido:hover { background: var(--amarillo); }
.movil__pausa {
  position: absolute; right: 14px; top: 16px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(28, 24, 21, 0.55); color: var(--papel); cursor: pointer;
}
.movil__pausa .icono { width: 16px; height: 16px; }

@media (prefers-reduced-motion: no-preference) {
  .cambio__foto { animation: caer 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
  .cambio__foto--1 { animation-delay: 0.1s; }
  .cambio__foto--2 { animation-delay: 0.22s; }
  .cambio__foto--3 { animation-delay: 0.34s; }
  .cambio__movil { animation: subir 0.75s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .cambio__circulo { animation: crecer 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .cambio__trazo, .cambio__halo { stroke-dasharray: 130; stroke-dashoffset: 130; animation: trazar 0.55s 0.8s ease-out forwards; }
  .cambio__punta, .cambio__halo--punta { opacity: 0; stroke-dashoffset: 0; animation: aparecer 0.15s 1.3s forwards; }
  .cambio__pegatina-fotos { animation: pegar 0.45s 1.05s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
  .cambio__pegatina-video { animation: pegar-video 0.45s 1.35s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
}
@keyframes caer {
  from { opacity: 0; transform: translateY(-40px) rotate(calc(var(--giro) - 14deg)); }
  to { opacity: 1; transform: rotate(var(--giro)); }
}
@keyframes subir { from { opacity: 0; transform: translateY(36px) scale(0.96); } }
@keyframes crecer { from { transform: scale(0.6); opacity: 0; } }
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }
@keyframes pegar { from { opacity: 0; transform: scale(0.5) rotate(-12deg); } }
@keyframes pegar-video { from { opacity: 0; transform: scale(0.5) rotate(14deg); } }

/* ---------- Cinta ---------- */

.cinta {
  overflow: hidden; background: var(--rojo); color: var(--papel);
  border-block: 2px solid var(--tinta);
}
.cinta__pista { display: flex; width: max-content; }
.cinta__lista { display: flex; list-style: none; margin: 0; padding: 14px 0; }
.cinta__lista li {
  display: inline-flex; align-items: center; gap: 22px; padding-right: 22px;
  font: 800 1.375rem/1 var(--titular); letter-spacing: -0.02em; white-space: nowrap;
}
.cinta__lista li::before {
  content: ""; width: 26px; height: 26px; background: var(--amarillo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6.5' width='13' height='11' rx='2.5'/%3E%3Cpath d='m15.5 10.5 6-3v9l-6-3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6.5' width='13' height='11' rx='2.5'/%3E%3Cpath d='m15.5 10.5 6-3v9l-6-3'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .cinta__pista { animation: desfilar 40s linear infinite; }
}
@keyframes desfilar { to { transform: translateX(-50%); } }

/* ---------- Bloques ---------- */

.bloque { padding: clamp(60px, 9vw, 112px) 0; }
.bloque__dentro { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.bloque__dentro--estrecho { max-width: 880px; }
.bloque--oscuro { background: var(--tinta); color: var(--crema); }
.bloque--melocoton { background: var(--melocoton); border-block: 2px solid var(--tinta); }
.bloque--papel { background: var(--papel); }
.bloque--rojo { background: var(--rojo); color: var(--papel); border-block: 2px solid var(--tinta); }
.bloque--amarillo { background: var(--amarillo); border-block: 2px solid var(--tinta); }

.titulo-bloque {
  margin: 0 0 14px;
  font: 900 clamp(2.2rem, 1.3rem + 3.6vw, 3.9rem)/1.04 var(--titular);
  letter-spacing: -0.045em;
}
.entradilla { max-width: 36em; margin: 0 0 36px; font-size: 1.1875rem; }
.bloque--oscuro .entradilla { color: var(--gris-claro); }
.bloque--papel .entradilla, .bloque .entradilla { color: inherit; }

/* ---------- Vídeos en rejilla ---------- */

.rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (min-width: 1000px) {
  .rejilla { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .rejilla--cuatro { grid-template-columns: repeat(4, 1fr); }
  .rejilla--tres { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 719px) {
  .rejilla {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--margen)); padding: 4px var(--margen) 14px; gap: 12px;
  }
  .rejilla::-webkit-scrollbar { display: none; }
  .rejilla > li { flex: 0 0 46%; scroll-snap-align: start; }
}

.pieza {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden;
  padding: 0; border: 2px solid var(--tinta); border-radius: 18px;
  background: #000; color: #fff; text-align: left; cursor: pointer;
}
.bloque--oscuro .pieza { border-color: #3a322c; }
.pieza__portada, .pieza__vista { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pieza__vista { opacity: 0; transition: opacity 0.35s ease; }
.pieza__vista.is-lista { opacity: 1; }
.pieza::after {
  content: ""; position: absolute; inset: 45% 0 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 11, 9, 0.82), rgba(14, 11, 9, 0));
}
.pieza__play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; display: grid; place-items: center;
  border: 2px solid var(--tinta); border-radius: 50%;
  background: var(--amarillo); color: var(--tinta);
  box-shadow: 3px 3px 0 var(--tinta);
  transition: transform 0.15s ease;
}
.pieza__play .icono { width: 22px; height: 22px; margin-left: 3px; }
.pieza:hover .pieza__play { transform: translate(-50%, -50%) scale(1.08); }
.pieza__duracion {
  position: absolute; z-index: 2; right: 8px; top: 8px;
  padding: 3px 8px; border-radius: 999px; background: rgba(14, 11, 9, 0.62);
  font: 700 0.75rem/1.3 var(--sans);
}
.pieza__texto { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 5px; }
.pieza__nombre { font: 800 1.0625rem/1.2 var(--titular); letter-spacing: -0.02em; }
/* en los móviles más estrechos, «Residencial» no cabe en la tarjeta */
@media (max-width: 359px) {
  .pieza__nombre { font-size: 0.875rem; }
}
.pieza__tipo { display: inline-flex; align-items: center; gap: 6px; font: 600 0.8125rem/1.2 var(--sans); color: var(--melocoton); }
.pieza__tipo .icono { width: 16px; height: 16px; }
.pieza__capitulo {
  align-self: flex-start; padding: 3px 8px; border-radius: 6px;
  background: var(--rojo); color: var(--papel); font: 700 0.75rem/1.2 var(--sans);
}

.aviso-ejemplo { margin: 26px 0 0; font-size: 0.875rem; color: var(--gris-claro); }

/* Lo último */
.ultimo { display: grid; gap: 26px; align-items: center; margin: 0 0 48px; }
.pieza.pieza--grande { max-width: 360px; border-width: 3px; border-color: var(--amarillo); box-shadow: 8px 8px 0 var(--rojo); }
.pieza--grande .pieza__play { width: 70px; height: 70px; }
.pieza--grande .pieza__play .icono { width: 28px; height: 28px; }
@media (min-width: 760px) {
  .ultimo { grid-template-columns: minmax(260px, 360px) 1fr; gap: 48px; }
}
.ultimo__texto { max-width: 30em; }
.ultimo__texto .pegatina { margin-bottom: 18px; }
.ultimo__titulo { margin: 0 0 8px; font: 900 clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem)/1.05 var(--titular); letter-spacing: -0.045em; }
.ultimo__tipo { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-weight: 700; color: var(--melocoton); }
.ultimo__texto > p:not(.pegatina):not(.ultimo__tipo) { font-size: 1.125rem; color: var(--gris-claro); margin-bottom: 24px; }

/* ---------- Tú eliges ---------- */

.eleccion { display: grid; gap: 40px; }
.eleccion__pregunta { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 700 1.3125rem/1.2 var(--sans); }
.eleccion__numero {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--tinta); color: var(--amarillo);
  font: 800 1rem/1 var(--sans);
}

.presentadores__fila { display: grid; gap: 18px; }
@media (min-width: 900px) { .presentadores__fila { grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; } }
@media (max-width: 899px) {
  /* en el móvil, las tres tarjetas se pasan con el dedo */
  .presentadores__fila {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--margen)); padding: 4px var(--margen) 18px; gap: 14px;
  }
  .presentadores__fila::-webkit-scrollbar { display: none; }
  .presentador { flex: 0 0 min(82%, 340px); scroll-snap-align: start; }
  .voz { aspect-ratio: 1 / 1; }
  .presentador__medios--doble .voz { aspect-ratio: 1 / 2; }
}
.eleccion__pista { margin: -6px 0 14px; font-size: 0.9375rem; color: var(--tinta-suave); }
@media (min-width: 900px) { .eleccion__pista { display: none; } }

.presentador {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 14px 18px;
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 24px;
  box-shadow: 6px 6px 0 var(--tinta);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.presentador:has(input:checked) { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--rojo); }
.presentador__medios { display: grid; gap: 8px; margin-bottom: 10px; }
.presentador__medios--doble { grid-template-columns: 1fr 1fr; }
.voz { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: #000; }
.presentador__medios--doble .voz { aspect-ratio: 2 / 5; }
.voz__portada, .voz__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.etiqueta-ia--sobre { position: absolute; z-index: 2; left: 50%; top: 8px; transform: translateX(-50%); padding: 4px 8px; font-size: 0.6875rem; }
.voz__boton {
  position: absolute; z-index: 2; right: 10px; bottom: 10px;
  width: 54px; height: 54px; display: grid; place-items: center;
  border: 2px solid var(--tinta); border-radius: 50%;
  background: var(--rojo); color: var(--papel); box-shadow: 2px 2px 0 var(--tinta); cursor: pointer;
}
.voz__boton .icono { width: 22px; height: 22px; margin-left: 2px; }
.voz__boton[aria-pressed="true"] { background: var(--tinta); }
.voz__boton[aria-pressed="true"] .icono { margin-left: 0; }

.presentador__nombre { margin: 4px 0 0; font: 800 1.625rem/1.1 var(--titular); letter-spacing: -0.02em; }
.presentador__texto { margin: 0; color: var(--tinta-suave); }
/* la frase de cada voz va derecha y entre sus comillas: la Inter de la web no trae cursiva */
.cita { margin: 4px 0 0; font: 600 1.0625rem/1.4 var(--sans); color: var(--rojo-oscuro); }
.presentador__precio { margin: auto 0 0; padding-top: 12px; font: 800 1.1875rem/1.2 var(--sans); }
.presentador__precio-nota { font-weight: 500; font-size: 0.9375rem; color: var(--gris); }

.opcion, .ficha { position: relative; }
.opcion { margin-top: 12px; }
.opcion input, .ficha input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opcion__caja {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 10px 16px;
  border: 2px solid var(--tinta); border-radius: 999px;
  background: var(--crema); font-weight: 700; cursor: pointer;
}
.opcion__caja .icono { display: none; width: 20px; height: 20px; stroke-width: 2.4; }
.opcion__caja:hover { background: var(--amarillo); }
.opcion input:checked + .opcion__caja { background: var(--tinta); color: var(--amarillo); }
.opcion input:checked + .opcion__caja .icono { display: block; }
.opcion input:focus-visible + .opcion__caja,
.ficha input:focus-visible + .ficha__caja { outline: 3px solid var(--rojo); outline-offset: 3px; }

.fichas { display: flex; flex-wrap: wrap; gap: 10px; }
.ficha__caja {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 8px 16px 8px 12px;
  border: 2px solid var(--tinta); border-radius: 999px;
  background: var(--papel); font-weight: 700; font-size: 0.9375rem; cursor: pointer;
}
.ficha__caja .icono { width: 20px; height: 20px; color: var(--rojo); }
.ficha__caja:hover { background: var(--amarillo); }
.ficha input:checked + .ficha__caja { background: var(--tinta); color: var(--amarillo); }
.ficha input:checked + .ficha__caja .icono { color: var(--amarillo); }

.mensaje {
  max-width: 640px; padding: 22px;
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 24px;
  box-shadow: 6px 6px 0 var(--tinta);
}
.mensaje__burbuja {
  margin: 0 0 20px; padding: 14px 16px;
  border: 2px solid var(--tinta); border-radius: 18px 18px 4px 18px;
  background: var(--melocoton-claro); font-size: 1.0625rem;
}
.mensaje__nota { margin: 14px 0 0; font-size: 0.875rem; color: var(--gris); }

/* ---------- La serie ---------- */

.serie { display: grid; gap: 30px; }
@media (min-width: 960px) { .serie { grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; } }
.serie__texto .pegatina { margin-bottom: 18px; }
.serie .rejilla { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 719px) { .serie .rejilla { display: flex; } }

/* ---------- Cómo funciona ---------- */

.pasos { list-style: none; margin: 0 0 56px; padding: 0; display: grid; gap: 22px; }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.paso {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 22px 22px;
  background: var(--crema); border: 2px solid var(--tinta); border-radius: 24px;
}
.paso__icono {
  position: relative; width: 66px; height: 66px; display: grid; place-items: center;
  border: 2px solid var(--tinta); border-radius: 50%; background: var(--rojo); color: var(--papel);
}
.paso__icono .icono { width: 30px; height: 30px; }
.paso__numero {
  position: absolute; right: -10px; top: -8px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 2px solid var(--tinta); border-radius: 50%; background: var(--amarillo); color: var(--tinta);
  font: 800 0.9375rem/1 var(--sans);
}
.paso__titulo { margin: 10px 0 0; font: 800 1.5rem/1.12 var(--titular); letter-spacing: -0.02em; }
.paso__texto { margin: 0 0 14px; color: var(--tinta-suave); }

.burbuja {
  display: flex; flex-direction: column; gap: 8px; align-self: flex-start;
  margin-top: auto; padding: 10px 12px;
  border: 2px solid var(--tinta); font-weight: 700; font-size: 0.9375rem;
}
.burbuja--cliente { background: var(--papel); border-radius: 18px 18px 18px 4px; }
.burbuja--alma { align-self: flex-end; background: var(--melocoton); border-radius: 18px 18px 4px 18px; }
.burbuja__fotos { display: flex; gap: 4px; }
.burbuja__fotos img { width: 58px; height: 76px; object-fit: cover; border-radius: 8px; }
.burbuja__video { position: relative; width: 88px; }
.burbuja__video img { width: 88px; height: 156px; object-fit: cover; border-radius: 10px; }
.burbuja__video .icono { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; color: #fff; }

.detalles { display: grid; gap: 32px; }
@media (min-width: 860px) { .detalles { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } }
.detalles__titulo { margin: 0 0 16px; font: 800 1.625rem/1.15 var(--titular); letter-spacing: -0.02em; }

.lista-iconos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lista-iconos li { display: flex; align-items: flex-start; gap: 12px; }
.lista-iconos .icono { width: 26px; height: 26px; color: var(--rojo); }

.lista-puntos { margin: 0; padding-left: 1.2em; }
.lista-puntos li { margin: 0 0 6px; }
.lista-puntos li::marker { color: var(--rojo); }

.desplegable { margin: 0 0 12px; background: var(--papel); border: 2px solid var(--tinta); border-radius: 18px; }
.bloque--papel .desplegable { background: var(--crema); }
.desplegable summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 16px 60px 16px 18px; font: 700 1.0625rem/1.35 var(--sans);
}
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::after {
  content: "+"; position: absolute; right: 14px; top: 50%;
  width: 30px; height: 30px; margin-top: -15px; display: grid; place-items: center;
  border: 2px solid var(--tinta); border-radius: 50%; background: var(--amarillo);
  font: 700 1.25rem/1 var(--sans); transition: transform 0.2s ease;
}
.desplegable[open] summary::after { transform: rotate(45deg); }
.desplegable__cuerpo { padding: 0 18px 16px; }
.desplegable__cuerpo p:last-child { margin-bottom: 0; }

/* ---------- Precios ---------- */

.bloque--rojo .entradilla { color: var(--melocoton-claro); }
.carta {
  list-style: none; margin: 0 0 22px; padding: 6px 22px;
  background: var(--crema); color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: 24px; box-shadow: 8px 8px 0 var(--tinta);
}
.carta__plato { position: relative; padding: 24px 0; border-bottom: 2px dashed #d6c3ad; }
.carta__plato:last-child { border-bottom: 0; }
.carta__linea { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.carta__nombre { font: 800 clamp(1.45rem, 1.1rem + 1.3vw, 1.95rem)/1.1 var(--titular); letter-spacing: -0.02em; }
.carta__puntos { flex: 1; min-width: 16px; border-bottom: 3px dotted rgba(28, 24, 21, 0.45); transform: translateY(-7px); }
.carta__precio {
  font: 900 clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem)/1 var(--titular); letter-spacing: -0.02em;
  color: var(--rojo); white-space: nowrap;
}
.carta__detalle { margin: 8px 0 14px; color: var(--tinta-suave); }
.carta__pedir {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
  border-radius: 999px; background: var(--tinta); color: var(--papel);
  font-weight: 700; font-size: 0.9375rem; text-decoration: none;
}
.carta__pedir:hover { background: var(--rojo); }
.carta__recomendado { margin: 0 0 12px; transform: rotate(-2deg); }
.carta__iva { margin: -6px 0 22px; padding-right: 8px; text-align: right; font-weight: 700; font-size: 0.9375rem; color: var(--melocoton-claro); }
.carta__todos { display: flex; align-items: center; gap: 10px; margin: 0 0 30px; font-weight: 700; }
.carta__todos .icono { width: 24px; height: 24px; color: var(--amarillo); }
.extras .detalles__titulo { color: var(--papel); }
.bloque--rojo .lista-puntos li::marker { color: var(--amarillo); }

/* ---------- Alma te lo explica ---------- */

.mas-instagram { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 28px 0 0; font-weight: 700; }
.mas-instagram .icono { width: 24px; height: 24px; color: var(--rojo); }
.mas-instagram a { color: var(--rojo); }

/* ---------- Soy IA ---------- */

.sincero { display: grid; gap: 34px; align-items: center; }
@media (min-width: 860px) { .sincero { grid-template-columns: minmax(220px, 300px) 1fr; gap: 60px; } }
.pieza--sola { max-width: 300px; border-width: 3px; box-shadow: 8px 8px 0 var(--tinta); }
.promesas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.promesas li { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 1.0625rem; }
.promesas .icono {
  width: 40px; height: 40px; padding: 8px; flex: none;
  border-radius: 50%; background: var(--tinta); color: var(--amarillo); stroke-width: 2;
}

/* ---------- Cierre ---------- */

.cierre { padding: clamp(64px, 10vw, 120px) 0; background: var(--rojo); color: var(--papel); text-align: center; border-top: 2px solid var(--tinta); }
.cierre__dentro { max-width: 760px; margin: 0 auto; padding: 0 var(--margen); display: flex; flex-direction: column; align-items: center; }
.cierre__cara { width: 88px; height: 88px; margin-bottom: 18px; border: 3px solid var(--tinta); border-radius: 50%; box-shadow: 4px 4px 0 var(--tinta); }
.cierre__titulo {
  margin: 0 0 12px;
  /* el tope de 12.5vw es para los móviles estrechos: así «¿Empezamos?» cabe en 320 px */
  font: 900 min(clamp(3rem, 1.7rem + 5.4vw, 5.6rem), 12.5vw)/1 var(--titular);
  letter-spacing: -0.045em;
}
.cierre__texto { margin: 0 0 30px; font-size: 1.25rem; }
.cierre__nota { margin: 24px 0 0; font-size: 0.9375rem; color: var(--melocoton-claro); }
.cierre__nota a { color: var(--papel); font-weight: 700; }

/* ---------- Pie ---------- */

.pie { padding: 48px 0; background: var(--tinta); color: var(--gris-claro); font-size: 0.9375rem; }
.pie__dentro { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.pie__marca { margin: 0 0 8px; font: 800 1.375rem/1.2 var(--titular); letter-spacing: -0.02em; color: var(--crema); }
.pie__enlaces { list-style: none; margin: 20px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.pie__enlaces a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--crema); font-weight: 700; text-decoration: none; }
.pie__enlaces a:hover { text-decoration: underline; }
.pie__enlaces .icono { width: 20px; height: 20px; color: var(--melocoton); }
.pie__firma { margin: 0 0 6px; }
.pie__firma a { color: var(--crema); font-weight: 700; }
.pie__nota { margin: 0; }

/* ---------- Barra fija (móvil) ---------- */

.barra-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  /* --alto-sello lo pone landing.js si Netlify mete su sello abajo: el botón queda por encima */
  padding: 12px var(--margen) calc(12px + env(safe-area-inset-bottom) + var(--alto-sello, 0px));
  background: linear-gradient(to top, rgba(246, 239, 228, 0.98) 72%, rgba(246, 239, 228, 0));
  transform: translateY(115%); transition: transform 0.3s ease;
}
.barra-fija.is-visible { transform: none; }
@media (min-width: 900px) { .barra-fija { display: none; } }
@media (max-width: 899px) { .pie { padding-bottom: calc(110px + env(safe-area-inset-bottom) + var(--alto-sello, 0px)); } }

/* ---------- Visor de vídeos ---------- */

.visor {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--crema);
}
.visor::backdrop { background: rgba(14, 11, 9, 0.9); }
.visor__caja {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 64px 16px 20px;
}
.visor__video {
  width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 160px); aspect-ratio: 9 / 16;
  border-radius: 18px; background: #000;
}
.visor__pie { text-align: center; }
.visor__titulo { margin: 0; font: 800 1.375rem/1.2 var(--titular); letter-spacing: -0.02em; }
.visor__aviso { margin: 4px 0 0; font-size: 0.8125rem; color: var(--gris-claro); }
.visor__cerrar {
  position: absolute; right: 14px; top: 14px;
  width: 50px; height: 50px; display: grid; place-items: center;
  border: 2px solid var(--crema); border-radius: 50%; background: rgba(14, 11, 9, 0.5); color: var(--crema); cursor: pointer;
}
.visor__cerrar .icono { width: 24px; height: 24px; stroke-width: 2.4; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}