/*
 * Página de inicio (/), dirección «Álbum contemporáneo» (2026-11, referencia aprobada: boceto de Stitch adaptado al producto real).
 * Crema de papel, índigo profundo #221074 y acentos terracota; titulares serif (Fraunces) con acentos en cursiva y texto en Manrope.
 * Solo la portada usa esta hoja: las páginas legales siguen con presentacion.css. Todo es del propio dominio (fuentes OFL de @fontsource
 * copiadas a fonts/), así que la CSP de public/_headers (style-src-elem 'self', font-src 'self', img-src 'self') no cambia.
 * Reglas: las fotos y los collages nunca se recortan ni se tapan (los marcos, cintas y sombras van alrededor); el terracota de texto es
 * #a23e18 (contraste AA sobre crema) y el #c85a32 solo decora; el tema oscuro sigue a theme-init.js (data-theme).
 */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/fraunces-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/fraunces-latin-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/manrope-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/manrope-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('fonts/manrope-latin-700-normal.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --cream: #fbf8f2;
  --paper: #f4efe5;
  --sand: #ebe4d6;
  --card: #fffdf9;
  --ink: #1c1a22;
  --text-2: #4a4656;
  --indigo: #221074;
  --indigo-2: #33208f;
  --on-indigo: #ffffff;
  --on-indigo-2: #e4defc;
  --terra: #a23e18;
  --terra-deco: #c85a32;
  --mint: #4de2a6;
  --plum-wash: #f1ecff;
  --free-bg: #e3f4ec;
  --free-ink: #0d5a3c;
  --prem-bg: #221074;
  --prem-ink: #ffffff;
  --line: rgba(34, 16, 116, 0.12);
  --focus: #221074;
  --btn-bg: #221074;
  --btn-ink: #ffffff;
  --shadow-1: 0 4px 20px -2px rgba(24, 18, 22, 0.08), 0 2px 6px -1px rgba(24, 18, 22, 0.05);
  --shadow-2: 0 18px 40px -10px rgba(34, 16, 116, 0.25), 0 6px 14px -4px rgba(24, 18, 22, 0.1);
  --f-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: max(clamp(16px, 4.5vw, 48px), env(safe-area-inset-left, 0px));
  --gutter-r: max(clamp(16px, 4.5vw, 48px), env(safe-area-inset-right, 0px));
}

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

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.6 var(--f-body);
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 em,
h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--terra);
}

p {
  margin: 0;
}

a {
  color: inherit;
}

.in {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter) var(--gutter-r);
}

.center {
  text-align: center;
}

.k {
  font: 700 12px/1.3 var(--f-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
}

.sub {
  max-width: 62ch;
  color: var(--text-2);
  font-size: 17px;
}

.center .sub {
  margin-inline: auto;
}

.tl {
  color: var(--indigo);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.links .tl,
.privacy-strip .tl,
.center > .tl {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.tl:hover {
  text-decoration-color: var(--terra-deco);
}

/* Foco visible en todo control: anillo índigo sobre papel, blanco con halo sobre el índigo. */
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.video a:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px var(--indigo);
}

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 20;
  background: var(--card);
  color: var(--ink);
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 800;
}

.skip:focus {
  top: 12px;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font: 700 16px/1.1 var(--f-body);
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn.sm {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  white-space: nowrap;
}

.btn.ink {
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: 0 8px 20px -8px rgba(34, 16, 116, 0.55);
}

.btn.paper {
  background: var(--sand);
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn.light {
  background: #fff;
  color: var(--indigo);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Cabecera ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(251, 248, 242, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.top .in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 12px;
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
}

.brand img {
  height: 30px;
  width: auto;
}

.logo-dark {
  display: none;
}

.nav-desk {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 4px clamp(12px, 2vw, 26px);
  font-size: 15px;
  font-weight: 600;
}

.nav-desk a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 2px;
  text-decoration: none;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
}

.nav-desk a:hover {
  color: var(--indigo);
  border-bottom-color: var(--terra-deco);
}

.act {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--indigo);
  text-decoration: none;
  white-space: nowrap;
}

.act:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Selector «🌐 ES | EN» (idioma.js): una píldora discreta, nunca tan fuerte como «Crear mi collage». */
.lang {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 0;
  padding: 0 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
  background: var(--card);
}

.lang svg {
  flex: none;
  margin-right: 3px;
}

.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44×44 px: the tap area the guidelines ask for; the pill only grows by its border. */
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 999px;
  font: 700 13px/1 var(--f-body);
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--text-2);
}

.lang a:hover {
  color: var(--indigo);
  background: var(--plum-wash);
}

.lang a[aria-current='true'] {
  background: var(--indigo);
  color: #fff;
}

.lang select {
  min-height: 44px;
  padding: 0 6px;
  font: 700 13px/1 var(--f-body);
  border: 0;
  background: transparent;
  color: var(--ink);
}

/* Hasta que llega el diccionario de una página que no es en español queda oculta (idioma.js la muestra a los 2.5 s como mucho). */
.i18n-pending body {
  visibility: hidden;
}

.menu-m {
  display: none;
  list-style: none;
}

.menu-m summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font: 700 14px/1 var(--f-body);
  color: var(--indigo);
  list-style: none;
  cursor: pointer;
}

.menu-m summary::-webkit-details-marker {
  display: none;
}

.menu-m nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

.menu-m nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--gutter-r) 0 var(--gutter);
  font: 600 17px/1.2 var(--f-body);
  text-decoration: none;
  border-top: 1px solid var(--line);
}

.menu-m nav a:last-child {
  background: var(--indigo);
  color: #fff;
  font-weight: 700;
}

.menu-m nav a:focus-visible {
  outline-offset: -4px;
}

.menu-m nav a:last-child:focus-visible {
  outline-color: #fff;
}

/* ---------- Portada (hero) ---------- */
.hero {
  position: relative;
  padding-block: 20px 40px;
  background: radial-gradient(60% 70% at 85% 30%, rgba(200, 90, 50, 0.1), transparent 70%), var(--cream);
}

.hero > .in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--indigo);
}

.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terra-deco);
}

.hero h1 {
  font-size: clamp(40px, 6.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--indigo);
}

.hero h1 em {
  display: block;
}

.lead {
  max-width: 34em;
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--text-2);
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}

.trust li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.trust li::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--free-bg) center / 10px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='%230d5a3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* El ejemplo principal: una lámina enmarcada con paspartú, una tira de papel con cinta detrás y un sello. Nada tapa el collage. */
.stage {
  position: relative;
  padding: 18px 8% 64px 4%;
}

.art {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 470px;
  margin-inline: auto;
  transform: rotate(-1.2deg);
}

.frame {
  padding: clamp(12px, 2.2vw, 22px);
  background: var(--card);
  border: 1px solid rgba(24, 18, 22, 0.08);
  border-radius: 6px;
  box-shadow: var(--shadow-2);
}

.frame img {
  width: 100%;
  border-radius: 2px;
}

/* The hero's looping video: the poster is the finished collage; the frame keeps the picture's proportions so nothing jumps. */
.frame {
  position: relative;
}

.frame .hero-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  background: var(--card);
}

.hero-pause {
  position: absolute;
  right: clamp(12px, 2.2vw, 22px);
  bottom: clamp(12px, 2.2vw, 22px);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(24, 18, 22, 0.62);
  color: #fff;
  cursor: pointer;
}

.hero-pause[hidden] {
  display: none;
}

.art[data-off] .hero-pause {
  display: none;
}

.hero-pause:hover {
  background: rgba(24, 18, 22, 0.8);
}

.hero-pause:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #fff;
}

.hero-pause::before,
.hero-pause::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
}

.frame:not([data-state='playing']) .hero-pause::before {
  margin: -7px 0 0 -4px;
  border-left: 12px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.frame[data-state='playing'] .hero-pause::before,
.frame[data-state='playing'] .hero-pause::after {
  width: 4px;
  height: 14px;
  margin-top: -7px;
  background: currentColor;
}

.frame[data-state='playing'] .hero-pause::before {
  margin-left: -6px;
}

.frame[data-state='playing'] .hero-pause::after {
  margin-left: 2px;
}

.tag-ej {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
}

.print {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 6px;
  width: min(62%, 330px);
  padding: 8px;
  background: var(--card);
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  transform: rotate(3deg);
}

.tape {
  position: absolute;
  z-index: 2;
  width: 84px;
  height: 22px;
  background: rgba(237, 217, 73, 0.55);
  border-left: 2px dashed rgba(255, 255, 255, 0.5);
  border-right: 2px dashed rgba(255, 255, 255, 0.5);
}

.print .tape {
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
}

/* El sello punteado es un círculo pequeño anclado a la esquina superior izquierda del marco (detrás de él), así que se mueve con el marco. */
.art::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -14px;
  left: -14px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px dashed rgba(200, 90, 50, 0.5);
  background: radial-gradient(circle, rgba(200, 90, 50, 0.12) 0 38%, transparent 40%);
}

.art .tag-ej {
  max-width: 38%;
  text-align: left;
}

/* El collage debe verse entero en la primera pantalla: su ancho se limita con la altura disponible (4:5 + paspartú + pie + la lámina HOLA de debajo), sin pasar de 470 px ni bajar de 280 px. */
.art {
  max-width: clamp(280px, calc((93svh - 226px) * 0.8 + 44px), 470px);
}

@media (min-width: 901px) and (max-height: 900px) {
  .hero .stage {
    align-self: start;
  }
}

/* ---------- Bandas ---------- */
.band {
  padding-block: clamp(56px, 8vw, 104px);
}

.band > .in {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vw, 36px);
}

.band h2 {
  font-size: clamp(30px, 4.4vw, 48px);
  color: var(--indigo);
}

.head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.head.center {
  align-items: center;
  text-align: center;
}

/* ---------- Catálogo ---------- */
.gal {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 15px;
  font-weight: 700;
  color: var(--indigo);
  text-decoration: none;
}

.chips a:hover {
  background: var(--indigo);
  color: #fff;
}

.cols-g {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
  align-items: start;
}

.card-g {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 14px 14px 18px;
  background: var(--card);
  border: 1px solid rgba(24, 18, 22, 0.06);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-g:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

/* The whole card is the link of its design (to the editor, on that design): the title's link is stretched over it. */
.card-g b a {
  color: inherit;
  text-decoration: none;
}

.card-g b a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
}

.card-g:has(a:focus-visible) {
  box-shadow: 0 0 0 3px var(--indigo), var(--shadow-2);
}

.card-g b a:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 4px;
}

.card-g .n {
  grid-column: 1 / -1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}

/* La etiqueta Gratis/Premium mide lo que dice su texto (con «Para N fotos» ya no comparte fila con el título). */
.card-g .b {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 4px;
}

.card-g:nth-child(3n + 2) {
  margin-top: 28px;
}

.card-g .fm {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--sand);
  border-radius: 8px;
}

.card-g .fm img {
  width: 100%;
  box-shadow: 0 6px 16px -6px rgba(24, 18, 22, 0.35);
}

.card-g figcaption {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 14px 4px 0;
}

.card-g .cat {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra);
}

.card-g b {
  font: 600 21px/1.2 var(--f-serif);
  color: var(--ink);
}

.b,
.st {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.b.free,
.st.ok {
  background: var(--free-bg);
  color: var(--free-ink);
}

.b.prem,
.st.prm {
  background: var(--prem-bg);
  color: var(--prem-ink);
}

.st.pg {
  background: var(--sand);
  color: var(--ink);
}

.gal .tag-ej {
  margin: 0;
}

.gal .cta {
  justify-content: center;
}

.req {
  text-align: center;
  color: var(--text-2);
}

.req a {
  color: var(--indigo);
  font-weight: 700;
}

/* ---------- Inspiración: láminas sobre un escritorio de papel ---------- */
.insp {
  margin-top: clamp(8px, 2vw, 24px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.desk {
  position: relative;
  padding: clamp(28px, 4vw, 48px) clamp(18px, 3vw, 36px);
  border-radius: 18px;
  background: linear-gradient(135deg, #e9dfcc, #dccfb6);
  box-shadow: inset 0 0 0 1px rgba(24, 18, 22, 0.06);
}

.sheet {
  position: relative;
  margin: 0;
  padding: 12px 12px 14px;
  background: var(--card);
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  transform: rotate(-1.5deg);
}

.sheet figcaption {
  padding-top: 10px;
  font: italic 500 16px/1.35 var(--f-serif);
  color: var(--ink);
}

.sheet.small {
  width: min(60%, 320px);
  margin: 26px 4% 0 auto;
  transform: rotate(2.5deg);
}

.sheet .t1 {
  top: -10px;
  left: 18px;
  transform: rotate(-8deg);
}

.sheet .t2 {
  top: -10px;
  right: 18px;
  transform: rotate(7deg);
}

.sheet .t3 {
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
}

.insp-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.insp-text p {
  color: var(--text-2);
  font-size: 17px;
}

.insp-text .links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

/* ---------- Cómo funciona ---------- */
.how {
  background: var(--paper);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--card);
  border: 1px solid rgba(24, 18, 22, 0.06);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
}

.steps .n {
  font: italic 500 54px/1 var(--f-serif);
  color: var(--terra-deco);
}

.steps h3 {
  font-size: 23px;
  color: var(--indigo);
}

.steps p {
  color: var(--text-2);
}

.privacy-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 18px 24px;
  border-radius: 16px;
  background: var(--plum-wash);
  color: var(--indigo);
}

.privacy-strip p {
  flex: 1 1 320px;
  color: var(--ink);
}

.privacy-strip b {
  color: var(--indigo);
}

/* ---------- Video (banda índigo) ---------- */
.video {
  background: var(--indigo);
  color: var(--on-indigo);
}

.video > .in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.video-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.video .k.light {
  color: var(--mint);
}

.video h2 {
  color: #fff;
}

.video h2 em {
  color: #ffb59c;
}

.video p {
  color: var(--on-indigo-2);
}

.vfeat {
  display: grid;
  gap: 14px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.vfeat li {
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--indigo-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.vfeat h3 {
  margin-bottom: 4px;
  font: 700 17px/1.3 var(--f-body);
  letter-spacing: 0;
  color: #fff;
}

.video .cta {
  margin: 4px 0 0;
}

.player {
  margin: 0;
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  background: #160a52;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}

.screen {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0533;
}

.screen video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  background: #0c0533;
  cursor: pointer;
}

.badge-mp4 {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--mint);
  color: #062b1d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 0;
}

.bar[hidden] {
  display: none;
}

/* Play / pause: a 44 px round button, the triangle or the two bars drawn in CSS. */
.bar .play {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}

.bar .play:hover {
  background: rgba(255, 255, 255, 0.2);
}

.bar .play::before,
.bar .play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
}

.player:not([data-state='pause']) .bar .play::before {
  margin: -7px 0 0 -4px;
  border-left: 12px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.player[data-state='pause'] .bar .play::before,
.player[data-state='pause'] .bar .play::after {
  width: 4px;
  height: 14px;
  margin-top: -7px;
  background: currentColor;
}

.player[data-state='pause'] .bar .play::before {
  margin-left: -6px;
}

.player[data-state='pause'] .bar .play::after {
  margin-left: 2px;
}

/* The progress: a real slider (it follows and seeks the playback), drawn as the thin mint line it was. 44 px tall to touch. */
.bar .track {
  flex: 1;
  min-width: 0;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.bar .track::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--mint) var(--p, 0%), rgba(255, 255, 255, 0.2) var(--p, 0%));
}

.bar .track::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--mint) var(--p, 0%), rgba(255, 255, 255, 0.2) var(--p, 0%));
}

.bar .track::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  -webkit-appearance: none;
}

.bar .track::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

.bar :is(.play, .track):focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.player figcaption {
  padding: 6px 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-indigo-2);
}

/* ---------- Herramientas para compartir ---------- */
.tgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

.tc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 30px);
  background: var(--card);
  border: 1px solid rgba(24, 18, 22, 0.06);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
}

.tc h3 {
  font-size: 23px;
  color: var(--indigo);
}

.tc p {
  color: var(--text-2);
}

.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--plum-wash);
  color: var(--indigo);
}

.vermas {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.vermas summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-weight: 700;
  color: var(--indigo);
  cursor: pointer;
  list-style: none;
}

.vermas summary::-webkit-details-marker {
  display: none;
}

.vermas summary::after,
details.q summary::after {
  content: '+';
  font: 400 24px/1 var(--f-body);
  color: var(--terra);
}

.vermas[open] summary::after,
details.q[open] summary::after {
  content: '–';
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding-top: 12px;
}

.fc {
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--paper);
}

.fc h3 {
  margin-bottom: 6px;
  font-size: 20px;
  color: var(--indigo);
}

.fc p {
  color: var(--text-2);
}

.fc b {
  color: var(--ink);
}

/* ---------- Gratis y Premium ---------- */
.plan {
  background: var(--paper);
}

.pcols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  align-items: stretch;
}

.pbox {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--card);
  border: 1px solid rgba(24, 18, 22, 0.08);
  border-radius: 18px;
  box-shadow: var(--shadow-1);
}

.pbox.prem {
  border: 2px solid var(--indigo);
  box-shadow: var(--shadow-2);
}

.ribbon {
  position: absolute;
  top: -14px;
  right: 22px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--terra);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pbox h3 {
  font-size: 25px;
  color: var(--indigo);
}

.pbox ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
}

.pbox li {
  position: relative;
  padding-left: 26px;
}

.pbox li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--free-bg) center / 10px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='%230d5a3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pbox .small {
  margin-top: auto;
  font-size: 14px;
  color: var(--text-2);
}

.pbox .btn {
  margin-top: auto;
}

/* ---------- Privacidad y preguntas ---------- */
.acols {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--card);
  border: 1px solid rgba(24, 18, 22, 0.06);
  border-radius: 18px;
  box-shadow: var(--shadow-1);
}

.about-text h2 {
  font-size: clamp(26px, 3vw, 34px);
}

.about-text p {
  color: var(--text-2);
}

.about-text a {
  color: var(--indigo);
  font-weight: 700;
}

.about-text .proj {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq h2 {
  margin-bottom: 6px;
}

details.q {
  background: var(--card);
  border: 1px solid rgba(24, 18, 22, 0.08);
  border-radius: 14px;
}

details.q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 20px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

details.q summary::-webkit-details-marker {
  display: none;
}

details.q p {
  padding: 0 20px 18px;
  color: var(--text-2);
}

/* ---------- Ideas (con el buzón encendido) ---------- */
.ideas {
  background: var(--paper);
}

.ideas-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.ideas-text p {
  color: var(--text-2);
}

/* ---------- Cierre ---------- */
.final > .in {
  align-items: center;
  text-align: center;
}

.final .seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--indigo);
  color: #fff;
}

.final h2 {
  max-width: 18ch;
  font-size: clamp(34px, 5.4vw, 60px);
}

.final h2 em {
  display: block;
}

.final p {
  max-width: 52ch;
  color: var(--text-2);
  font-size: 17px;
}

.final .cta {
  justify-content: center;
}

/* ---------- Pie ---------- */
.foot {
  padding-block: 56px 32px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.foot .in {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 28px clamp(20px, 4vw, 48px);
}

.foot-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.foot-brand img {
  align-self: flex-start;
  height: 30px;
  width: auto;
}

.foot-brand p {
  max-width: 34ch;
  color: var(--text-2);
  font-size: 15px;
}

.foot nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.foot .fh {
  margin-bottom: 6px;
  font: 800 12px/1.3 var(--f-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
}

.foot nav a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
}

.foot nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.legal-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot .copy {
  grid-column: 1 / -1;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-2);
}

/* ---------- Tema oscuro (el del editor: lo guardado o el del sistema; theme-init.js pone data-theme) ---------- */
:root[data-theme='dark'] {
  color-scheme: dark;
  --cream: #15121d;
  --paper: #1b1726;
  --sand: #2a2438;
  --card: #221d30;
  --ink: #f4efe6;
  --text-2: #cdc6da;
  --on-indigo-2: #e4defc;
  --terra: #ff9f7c;
  --terra-deco: #e07a52;
  --plum-wash: #2c2550;
  --free-bg: #123b2b;
  --free-ink: #b7f0d4;
  --prem-bg: #c7bfff;
  --prem-ink: #170065;
  --line: rgba(199, 191, 255, 0.18);
  --focus: #c7bfff;
  --btn-bg: #c7bfff;
  --btn-ink: #170065;
}

:root[data-theme='dark'] .logo-light {
  display: none;
}

:root[data-theme='dark'] .logo-dark {
  display: block;
}

:root[data-theme='dark'] .top {
  background: rgba(21, 18, 29, 0.9);
}

:root[data-theme='dark'] .band h2,
:root[data-theme='dark'] .hero h1,
:root[data-theme='dark'] .steps h3,
:root[data-theme='dark'] .tc h3,
:root[data-theme='dark'] .fc h3,
:root[data-theme='dark'] .pbox h3,
:root[data-theme='dark'] .tl,
:root[data-theme='dark'] .chips a,
:root[data-theme='dark'] .act,
:root[data-theme='dark'] .eyebrow,
:root[data-theme='dark'] .menu-m summary,
:root[data-theme='dark'] .privacy-strip,
:root[data-theme='dark'] .privacy-strip b,
:root[data-theme='dark'] .about-text a,
:root[data-theme='dark'] .req a,
:root[data-theme='dark'] .vermas summary,
:root[data-theme='dark'] .ic {
  color: #ddd7ff;
}

:root[data-theme='dark'] .chips a:hover {
  background: #c7bfff;
  color: #170065;
}

:root[data-theme='dark'] .lang a[aria-current='true'] {
  background: #c7bfff;
  color: #170065;
}

:root[data-theme='dark'] .menu-m nav a:last-child {
  background: #c7bfff;
  color: #170065;
}

:root[data-theme='dark'] .menu-m nav a:last-child:focus-visible {
  outline-color: #170065;
}

:root[data-theme='dark'] .pbox.prem {
  border-color: #c7bfff;
}

:root[data-theme='dark'] .ribbon {
  background: #ffb59c;
  color: #3b1300;
}

:root[data-theme='dark'] .desk {
  background: linear-gradient(135deg, #2c2638, #231e2f);
}

:root[data-theme='dark'] .video {
  background: #1a0f5c;
}

:root[data-theme='dark'] .final .seal {
  background: #c7bfff;
  color: #170065;
}

/* ---------- Tableta y móvil ---------- */
@media (max-width: 1080px) {
  .nav-desk,
  .act {
    display: none;
  }

  .menu-m {
    display: block;
  }

  .top .in {
    gap: 12px;
  }

  .lang {
    margin-left: auto;
  }
}

@media (max-width: 900px) {
  .hero > .in,
  .insp,
  .video > .in,
  .acols {
    grid-template-columns: minmax(0, 1fr);
  }

  .cols-g,
  .tgrid,
  .pcols,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-g:nth-child(3n + 2) {
    margin-top: 0;
  }

  /* The footer on a narrow screen: the brand across, «Crear» and «Ayuda» side by side, «Legal» below them in a row, then the copyright. */
  .foot .in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px clamp(16px, 4vw, 32px);
  }

  .foot-brand,
  .foot-legal {
    grid-column: 1 / -1;
  }

  .foot-legal .legal-links {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 20px;
  }

  /* The video comes before the cards that explain it. */
  .video .player {
    order: -1;
  }

  .stage {
    max-width: 560px;
    width: 100%;
    margin-inline: auto;
  }

  /* En una columna el collage va antes de las garantías: «Crear mi collage» y el ejemplo caben juntos en la primera pantalla. */
  .hero > .in {
    gap: 18px;
  }

  .copy {
    display: contents;
  }

  .copy > .trust {
    order: 5;
  }

  .stage {
    order: 4;
  }

  .art {
    max-width: 470px;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 72px;
  }

  body {
    font-size: 16px;
  }

  .brand img {
    height: 26px;
  }

  /* El botón principal está en la primera pantalla: el encabezado deja logo, idioma y menú; «Crear mi collage» sigue en el menú. */
  .top > .in > .btn {
    display: none;
  }

  .lang {
    padding-left: 8px;
  }

  .lang a {
    padding: 0 6px;
  }

  .hero {
    padding-top: 16px;
  }

  .copy {
    gap: 18px;
  }

  .hero h1 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .cta .btn {
    flex: 1 1 auto;
  }

  /* Los dos botones de la portada caben en una fila hasta 360 px: así el collage sube casi 60 px. */
  .hero .cta .btn {
    padding-inline: 12px;
    font-size: 15px;
  }

  /* En teléfonos el collage se achica para caber entero bajo los botones (cabecera + texto ≈ 475 px). */
  .art {
    max-width: clamp(200px, calc((100svh - 474px) * 0.8 + 24px), 470px);
  }

  .art .tag-ej {
    max-width: none;
  }

  .trust {
    font-size: 13px;
  }

  .stage {
    padding: 12px 6% 84px 2%;
  }

  .print {
    width: 58%;
  }

  .art::before {
    width: 44px;
    height: 44px;
    top: -12px;
    left: -12px;
  }

  .cols-g {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }

  .card-g {
    padding: 8px 8px 12px;
    border-radius: 12px;
  }

  .card-g .fm {
    padding: 6px;
  }

  .card-g figcaption {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 2px 0;
  }

  .card-g .cat {
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .card-g b {
    font-size: 17px;
  }

  .card-g .b {
    justify-self: start;
  }

  .tgrid,
  .pcols,
  .steps,
  .fgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .desk {
    padding: 24px 14px;
  }

  .sheet.small {
    width: 72%;
  }

  .steps .n {
    font-size: 44px;
  }

  .privacy-strip {
    padding: 18px;
  }

  .video .cta .btn {
    flex: 1 1 auto;
  }

  .player {
    padding: 10px;
  }

  .pbox.prem {
    margin-top: 10px;
  }

  details.q summary {
    padding: 12px 16px;
  }

  details.q p {
    padding: 0 16px 16px;
  }

  .foot {
    padding-block: 36px 24px;
  }

  .foot .copy {
    padding-top: 16px;
  }
}

/* 320–359 px: el globo del selector se va para que logo, idioma y menú quepan en una fila. */
/* En pantallas bajas (teléfonos de ~640–760 px) la etiqueta superior repite la garantía de abajo y estorba al collage. */
@media (max-width: 640px) and (max-height: 760px) {
  .hero .eyebrow {
    display: none;
  }

  .art {
    max-width: clamp(200px, calc((100svh - 414px) * 0.8 + 24px), 470px);
  }
}

@media (max-width: 359px) {
  .lang svg {
    display: none;
  }

  .lang {
    padding-left: 3px;
  }

  .cols-g {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .top,
  .menu-m,
  .video,
  .final .cta {
    display: none;
  }
}