/* Panda Deli · estilos del sitio.
   Sistema del brandbook Panda Deli: fondos claros, texto y contornos en uva, cuatro sabores
   (rosa, amarillo, verde solo para WhatsApp, lila), todo redondo y efecto sticker
   (contorno de 2px + sombra sólida, nunca difuminada). Orden: fuentes, tokens, base,
   componentes, secciones. */

/* ── Tipografía alojada en el sitio (subconjunto latino, licencia SIL OFL 1.1) ── */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fuentes/fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fuentes/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fuentes/fredoka-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fuentes/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fuentes/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fuentes/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fuentes/nunito-latin-800-normal.woff2") format("woff2"); }

/* ── Tokens (nombres del brandbook) ─────────────────────────── */
:root {
  --fondo: #ffffff;
  --fondo-merengue: #fff5f9;
  --fondo-lavanda: #f4eefc;
  --uva: #3c1c4c;               /* todo el texto, contornos y sombras */
  --uva-suave: #6b5577;         /* texto secundario: 5.8:1 o más sobre los fondos */
  --rosa-panda: #fc70ab;        /* relleno del botón primario; nunca texto */
  --amarillo-betun: #fbc41c;    /* resaltado y etiqueta de temporada; nunca texto */
  --verde-gomita: #87e433;      /* solo WhatsApp */
  --lila-deli: #a371e3;         /* acentos decorativos */
  --lavanda-aro: #ac8de1;       /* costura; decorativo */
  --rosa-profundo: #e00561;     /* texto y enlaces en rosa sobre blanco o merengue */
  --lila-profundo: #8542da;     /* texto en lila sobre lavanda */
  --rosa-claro: #ffeef5;
  --amarillo-claro: #fff8e4;
  --verde-claro: #f1fce7;
  --lila-claro: var(--fondo-lavanda);

  --sombra-sticker: 3px 3px 0 var(--uva);
  --sombra-sticker-alta: 5px 5px 0 var(--uva);
  --sombra-pegada: 0 0 0 var(--uva);

  --radio-chico: 8px;
  --radio-mediano: 16px;
  --radio-grande: 28px;
  --radio-pastilla: 999px;

  --font-titulos: "Fredoka", "Baloo 2", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-texto: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Costura: los guiones del aro del logo, como separador. */
  --costura: repeating-linear-gradient(90deg, var(--lavanda-aro) 0 14px, transparent 14px 22px);

  --contenedor: 1200px;
  --margen: clamp(20px, 5vw, 64px);
  --seccion: clamp(56px, 8vw, 104px);
  --alto-cabecera: 72px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 8px);
  scrollbar-color: var(--lavanda-aro) var(--fondo-merengue);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html:has(.visor[open]) { overflow: hidden; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--fondo);
  color: var(--uva);
  font-family: var(--font-texto);
  font-size: 17px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3 { margin: 0; font-family: var(--font-titulos); font-weight: 700; color: var(--uva); text-wrap: balance; }
p, figure, ul, ol, dl, dd { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
input, textarea { caret-color: var(--rosa-profundo); }
[hidden] { display: none !important; }

:where(a) {
  color: var(--rosa-profundo);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  :where(a):hover { color: var(--uva); }
}

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--uva); outline-offset: 3px; }
::selection { background: var(--amarillo-betun); color: var(--uva); }

.contenedor {
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--margen);
}

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

.saltar {
  position: absolute;
  left: 12px; top: 12px;
  z-index: 200;
  padding: 12px 20px;
  border: 2px solid var(--uva);
  border-radius: var(--radio-pastilla);
  background: var(--fondo);
  box-shadow: var(--sombra-sticker);
  color: var(--uva);
  font-family: var(--font-titulos);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.saltar:focus-visible { transform: none; }

/* Resaltado de betún detrás de una frase clave (hero y cierre). El texto sigue en uva. */
.resalte {
  padding: 0 0.14em;
  border-radius: 0.32em;
  background: var(--amarillo-betun);
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── Botones: pastilla con contorno y sombra sticker ────────── */
.btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid var(--uva);
  border-radius: var(--radio-pastilla);
  background: var(--fondo);
  box-shadow: var(--sombra-sticker);
  color: var(--uva);
  font-family: var(--font-titulos);
  font-size: 17px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background-color 120ms ease;
}
.btn svg { display: block; flex: none; }
.btn-whatsapp { background: var(--verde-gomita); }
.btn-primario { background: var(--rosa-panda); }
.btn-ancho { width: 100%; }
.btn-icono { width: 48px; padding: 0; }
/* En pantallas angostas el texto del botón puede partirse en dos líneas en vez de salirse
   de su tarjeta (a 360 px "Abrir WhatsApp con mi mensaje" no cabe en el formulario). */
@media (max-width: 419px) {
  .btn { padding-block: 12px; white-space: normal; text-align: center; text-wrap: balance; }
}

/* Física de sticker: al pasar el cursor se levanta; al presionar "se pega" y pierde la sombra. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .filtro:hover, .trabajo:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sombra-sticker-alta);
  }
}
.btn:active, .filtro:active, .trabajo:active {
  transform: translate(3px, 3px);
  box-shadow: var(--sombra-pegada);
}

/* ── Etiquetas ──────────────────────────────────────────────── */
.etiqueta {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 12px;
  border: 2px solid var(--uva);
  border-radius: var(--radio-pastilla);
  background: var(--fondo);
  color: var(--uva);
  font-family: var(--font-texto);
  font-size: 13px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.etiqueta--rosa { background: var(--rosa-claro); }
.etiqueta--amarillo { background: var(--amarillo-claro); }
.etiqueta--verde { background: var(--verde-claro); }
.etiqueta--lila { background: var(--lila-claro); }
.etiqueta--temporada { background: var(--amarillo-betun); box-shadow: var(--sombra-sticker); }

/* ── Costura y chispas (decoración) ─────────────────────────── */
.costura-aro {
  position: relative;
  height: 20px;
  background: var(--lavanda-aro);
}
.costura-aro::after {
  content: "";
  position: absolute;
  inset: 8px 12px auto;
  height: 4px;
  border-radius: var(--radio-pastilla);
  background: repeating-linear-gradient(90deg, var(--fondo) 0 14px, transparent 14px 22px);
}

.chispas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chispas .ch-rosa { fill: var(--rosa-panda); }
.chispas .ch-amarillo { fill: var(--amarillo-betun); }
.chispas .ch-verde { fill: var(--verde-gomita); }
.chispas .ch-lila { fill: var(--lila-deli); }

/* ── Cabecera ───────────────────────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--costura) left bottom / 100% 4px no-repeat, var(--fondo);
}
.cabecera__barra {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--alto-cabecera);
  padding-bottom: 4px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  margin-right: auto;
  color: var(--uva);
  text-decoration: none;
}
.marca__logo { display: block; width: 64px; height: 64px; object-fit: contain; }

.nav-principal { display: none; gap: 8px; }
.nav-principal a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radio-pastilla);
  color: var(--uva);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-principal a:hover { background: var(--fondo-merengue); color: var(--uva); }
}
.cabecera__cta { display: none; }
.boton-menu { min-height: 44px; padding: 0 18px; }

.menu-movil {
  display: grid;
  padding: 4px var(--margen) 24px;
  background: var(--costura) left bottom / 100% 4px no-repeat, var(--fondo);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
@starting-style {
  .menu-movil { opacity: 0; transform: translateY(-6px); }
}
.menu-movil a:not(.btn) {
  padding: 14px 0;
  background: var(--costura) left bottom / 100% 3px no-repeat;
  color: var(--uva);
  font-family: var(--font-titulos);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
}
.menu-movil .btn { margin-top: 20px; }

@media (min-width: 960px) {
  .nav-principal { display: flex; }
  .cabecera__cta { display: inline-flex; }
  .boton-menu, .menu-movil { display: none !important; }
}

/* ── Encabezados de sección ─────────────────────────────────── */
.seccion__cuerpo { padding-block: var(--seccion); }
.seccion--merengue { background: var(--fondo-merengue); }
.seccion--lavanda { background: var(--fondo-lavanda); }

.titulo-seccion { font-size: 32px; line-height: 38px; }
.texto-seccion { max-width: 52ch; font-size: 17px; line-height: 26px; }
.encabezado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px 64px;
  align-items: end;
  margin-bottom: 40px;
}

/* ── Portada en video (controlada por scroll) ───────────────── */
/* La sección mide data-pantallas pantallas; el escenario queda fijo bajo la cabecera
   y el video se escala para caber completo, centrado sobre el mismo lavanda del video.
   Sin JavaScript no se muestra y la página empieza en el hero. */
.portada-video {
  --bajo-cabecera: var(--alto-cabecera);
  display: none;
  position: relative;
  height: calc(var(--pantallas, 7) * 100vh);
  background: var(--fondo-lavanda); /* el mismo fondo del video: lleva chispas */
}
.js .portada-video { display: block; }
.portada-video__escenario {
  position: sticky;
  top: var(--bajo-cabecera);
  display: grid;
  place-items: center;
  height: calc(100vh - var(--bajo-cabecera));
  overflow: hidden;
}
.portada-video__cuadro {
  position: relative;
  width: min(100%, calc((100vh - var(--bajo-cabecera)) * 9 / 16));
  aspect-ratio: 9 / 16;
}
@supports (height: 100svh) {
  .portada-video { height: calc(var(--pantallas, 7) * 100svh); }
  .portada-video__escenario { height: calc(100svh - var(--bajo-cabecera)); }
  .portada-video__cuadro { width: min(100%, calc((100svh - var(--bajo-cabecera)) * 9 / 16)); }
}
.portada-video canvas { display: block; width: 100%; height: 100%; }
/* En pantallas anchas el video deja campos lavanda a los lados: se llenan de chispas, como sus márgenes. */
@media (min-width: 960px) {
  .portada-video__escenario {
    /* Un mosaico grande y disperso: a 1440 px casi no se repite y las chispas no se juntan. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='820'%3E%3Crect x='58' y='85.5' width='24' height='9' rx='4.5' fill='%23fc70ab' transform='rotate(-35 70 90)'/%3E%3Crect x='318' y='55.5' width='24' height='9' rx='4.5' fill='%23fbc41c' transform='rotate(25 330 60)'/%3E%3Crect x='588' y='145.5' width='24' height='9' rx='4.5' fill='%23a371e3' transform='rotate(60 600 150)'/%3E%3Crect x='168' y='325.5' width='24' height='9' rx='4.5' fill='%23a371e3' transform='rotate(-15 180 330)'/%3E%3Crect x='458' y='375.5' width='24' height='9' rx='4.5' fill='%23fc70ab' transform='rotate(40 470 380)'/%3E%3Crect x='688' y='465.5' width='24' height='9' rx='4.5' fill='%23fbc41c' transform='rotate(-55 700 470)'/%3E%3Crect x='78' y='595.5' width='24' height='9' rx='4.5' fill='%23fbc41c' transform='rotate(30 90 600)'/%3E%3Crect x='368' y='695.5' width='24' height='9' rx='4.5' fill='%23a371e3' transform='rotate(-20 380 700)'/%3E%3Crect x='628' y='755.5' width='24' height='9' rx='4.5' fill='%23fc70ab' transform='rotate(50 640 760)'/%3E%3C/svg%3E");
    background-size: 760px 820px;
  }
}
/* Zona pulsable sobre el botón que dibuja el video en la última escena. */
.portada-video__boton {
  position: absolute;
  visibility: hidden;
  border-radius: var(--radio-pastilla);
  color: transparent;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.portada-video__boton.es-visible { visibility: visible; }

/* Botón flotante de WhatsApp: celular, durante la portada.
   Entra en 200 ms y sale en 150 ms; oculto no se puede enfocar (visibility). */
.whatsapp-flotante {
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition: opacity 150ms ease, transform 150ms var(--ease-out), box-shadow 120ms var(--ease-out), visibility 0s linear 150ms;
}
.whatsapp-flotante.es-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 120ms var(--ease-out), visibility 0s;
}
.whatsapp-flotante.es-visible:active { transform: translate(3px, 3px); }
@media (min-width: 960px) {
  .whatsapp-flotante { display: none; }
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px); }
.hero__grid { display: grid; gap: 36px; align-items: center; }
.hero h1 { max-width: 20ch; font-size: 44px; line-height: 48px; }
.hero__intro { max-width: 46ch; margin-top: 20px; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Cuatro fotos como stickers sobre un bloque lavanda con chispas. */
.collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.4vw, 24px);
  padding: clamp(20px, 3.6vw, 40px);
  border-radius: var(--radio-grande);
  background: var(--fondo-lavanda);
}
.collage figure {
  position: relative;
  padding: 6px;
  border: 2px solid var(--uva);
  border-radius: 20px;
  background: var(--fondo);
  box-shadow: var(--sombra-sticker-alta);
}
.collage figure:nth-of-type(1) { rotate: -3deg; }
.collage figure:nth-of-type(2) { rotate: 2deg; translate: 0 10px; }
.collage figure:nth-of-type(3) { rotate: 2.5deg; translate: 0 -4px; }
.collage figure:nth-of-type(4) { rotate: -2deg; translate: 0 6px; }
.collage img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }

@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 5vw, 72px); }
}
@media (max-width: 599px) {
  .hero__acciones .btn { flex: 1 1 auto; }
}

/* ── Franja de datos ────────────────────────────────────────── */
.datos { background: var(--fondo-merengue); }
.datos__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 32px;
  padding-block: 32px;
}
.datos__item { display: grid; gap: 8px; justify-items: start; align-content: start; }
.datos dd { font-family: var(--font-titulos); font-size: 20px; font-weight: 600; line-height: 26px; }
@media (min-width: 640px) { .datos__lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .datos__lista { grid-template-columns: repeat(4, 1fr); padding-block: 40px; } }

/* ── Productos: tarjetas sticker ────────────────────────────── */
.productos { padding-block: var(--seccion); }
.productos__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 720px) { .productos__lista { grid-template-columns: 1fr 1fr; } }

.producto {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--uva);
  border-radius: var(--radio-grande);
  background: var(--fondo);
  box-shadow: var(--sombra-sticker-alta);
}
.producto__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden; /* sin esto, una foto vertical estira la caja más allá de 4:3 */
  border-bottom: 2px solid var(--uva);
  background: var(--fondo-merengue);
}
.producto__foto img { width: 100%; height: 100%; object-fit: cover; }
.producto__foto--bolis img { object-fit: contain; background: var(--fondo); }
.producto__foto .etiqueta { position: absolute; top: 14px; left: 14px; z-index: 1; box-shadow: var(--sombra-sticker); }
.producto__cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
}
.producto__titulo { font-size: 22px; font-weight: 600; line-height: 28px; }
.producto__texto { max-width: 46ch; }
.producto__opciones { list-style: none; display: grid; gap: 6px; }
.producto__opciones li { display: flex; align-items: center; gap: 12px; color: var(--uva); font-size: 16px; }
/* Viñetas: chispas en el orden de los sabores. */
.producto__opciones li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 7px;
  border-radius: var(--radio-pastilla);
  background: var(--rosa-panda);
  rotate: -30deg;
}
.producto__opciones li:nth-child(2)::before { background: var(--amarillo-betun); rotate: 20deg; }
.producto__opciones li:nth-child(3)::before { background: var(--lila-deli); rotate: -55deg; }
.producto__sabores { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.producto__sabores li {
  padding: 4px 10px;
  border: 1.5px solid var(--uva);
  border-radius: var(--radio-pastilla);
  background: var(--fondo-merengue);
  color: var(--uva);
  font-size: 14px;
  font-weight: 700;
}
.producto__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 12px; }
@media (max-width: 399px) {
  .producto__cuerpo { padding: 20px 16px; }
  .producto__acciones .btn { flex: 1 1 auto; }
}

/* ── Trabajos ───────────────────────────────────────────────── */
.trabajos__cabeza {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 32px;
}

.filtros { display: none; flex-wrap: wrap; gap: 10px; }
.js .filtros { display: flex; }
.filtro {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--uva);
  border-radius: var(--radio-pastilla);
  background: var(--fondo);
  box-shadow: var(--sombra-sticker);
  color: var(--uva);
  font-family: var(--font-texto);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background-color 120ms ease;
}
.filtro[aria-pressed="true"] { background: var(--rosa-panda); }
.filtro__cuenta { color: var(--uva); font-size: 13px; font-weight: 700; opacity: 0.8; font-variant-numeric: tabular-nums; }
/* Sobre el rosa del filtro activo, uva al 80 % da 3.9:1; a opacidad completa da 5.5:1 (AA). */
.filtro[aria-pressed="true"] .filtro__cuenta { opacity: 1; }

.galeria {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 600px) {
  .galeria { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
}
.trabajo {
  display: block;
  padding: 6px;
  border: 2px solid var(--uva);
  border-radius: 20px;
  background: var(--fondo);
  box-shadow: var(--sombra-sticker);
  color: var(--uva);
  text-decoration: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.trabajo__foto {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--fondo-merengue);
}
.trabajo__foto img { width: 100%; height: 100%; object-fit: cover; }
.trabajo__foto--bolis { aspect-ratio: 3 / 2; background: var(--fondo); }
.trabajo__foto--bolis img { object-fit: contain; }
.trabajo__foto .etiqueta { position: absolute; top: 8px; left: 8px; }
.trabajo__pie {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 6px 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}
.trabajo__num { color: var(--uva-suave); font-variant-numeric: tabular-nums; }
.bolis-resumen {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
  padding: 20px 24px;
  border: 2px solid var(--uva);
  border-radius: var(--radio-grande);
  background: var(--fondo);
  box-shadow: var(--sombra-sticker);
  color: var(--uva);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.bolis-resumen[hidden] { display: none; }
.bolis-resumen__titulo { font-size: 22px; font-weight: 600; line-height: 28px; }
.trabajos__nota { margin-top: 32px; color: var(--uva-suave); font-size: 16px; font-weight: 600; }

@media (max-width: 599px) {
  .trabajo { padding: 5px; border-radius: 18px; }
  .trabajo__foto { border-radius: 11px; }
  .trabajo__foto .etiqueta { top: 6px; left: 6px; padding: 3px 8px; font-size: 12px; }
  .trabajo__pie { padding: 6px 4px 1px; font-size: 14px; }
}

/* ── Visor de fotos ─────────────────────────────────────────── */
.visor {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(8px, 3vw, 32px);
  border: 0;
  background: transparent;
  color: var(--uva);
}
.visor[open] { display: grid; place-items: center; }
.visor::backdrop {
  background: rgb(60 28 76 / 0.86);
  transition: opacity 200ms var(--ease-out);
}
.visor__marco {
  display: flex;
  flex-direction: column;
  width: min(1000px, 100%);
  max-height: 100%;
  overflow: hidden;
  border: 2px solid var(--uva);
  border-radius: var(--radio-grande);
  background: var(--fondo);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
@starting-style {
  .visor[open]::backdrop { opacity: 0; }
  .visor[open] .visor__marco { opacity: 0; transform: scale(0.97); }
}
.visor__barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 14px 20px;
  background: var(--costura) left bottom / 100% 4px no-repeat;
}
.visor__titulo {
  margin-right: auto;
  color: var(--uva-suave);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.visor__foto {
  width: 100%;
  min-height: 0;
  max-height: calc(100dvh - 190px);
  object-fit: contain;
  background: var(--fondo-merengue);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-drag: none;
}
.visor__pie { padding: 12px 20px 16px; font-size: 16px; }

/* ── Pedido ─────────────────────────────────────────────────── */
.pedido__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 960px) {
  .pedido__resumen { position: sticky; top: calc(var(--alto-cabecera) + 32px); }
}
.pedido__intro { margin-top: 16px; max-width: 44ch; }

/* Vista previa: el globo de WhatsApp que se reescribe con cada tecla. */
.vista-previa {
  margin-top: 32px;
  overflow: hidden;
  border: 2px solid var(--uva);
  border-radius: var(--radio-grande);
  background: var(--fondo);
  box-shadow: var(--sombra-sticker-alta);
}
.vista-previa__barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 16px;
  background: var(--costura) left bottom / 100% 4px no-repeat;
  font-family: var(--font-titulos);
  font-size: 17px;
  font-weight: 600;
}
.vista-previa__chat { padding: 20px; background: var(--fondo-merengue); }
.globo {
  margin: 0 0 0 auto;
  max-width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--uva);
  border-radius: 18px 18px 6px 18px;
  background: var(--verde-claro);
  color: var(--uva);
  font-family: var(--font-texto);
  font-size: 16px;
  line-height: 24px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.form-pedido {
  container-type: inline-size;
  display: grid;
  gap: 22px;
  padding: clamp(20px, 3vw, 32px);
  border: 2px solid var(--uva);
  border-radius: var(--radio-grande);
  background: var(--fondo);
  box-shadow: var(--sombra-sticker-alta);
}
.campo-grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.campo-grupo legend, .campo > label {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  color: var(--uva);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}
.opciones-producto { display: grid; grid-template-columns: 1fr; gap: 10px; }
@container (min-width: 320px) { .opciones-producto { grid-template-columns: 1fr 1fr; } }
@container (min-width: 640px) { .opciones-producto { grid-template-columns: repeat(4, 1fr); } }
/* Opción elegida: se vuelve sticker rosa. */
.opcion-producto {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 14px 8px 12px;
  border: 2px solid var(--uva);
  border-radius: var(--radio-pastilla);
  background: var(--fondo);
  font-size: 15px;
  font-weight: 700;
  line-height: 19px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, box-shadow 120ms var(--ease-out);
}
.opcion-producto:has(input:checked) { background: var(--rosa-panda); box-shadow: var(--sombra-sticker); }
.opcion-producto:has(input:focus-visible) { outline: 3px solid var(--uva); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .opcion-producto:not(:has(input:checked)):hover { background: var(--rosa-claro); }
}
.opcion-producto input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--uva);
  border-radius: 50%;
  background: var(--fondo);
  cursor: pointer;
}
.opcion-producto input:checked { background: var(--uva); box-shadow: inset 0 0 0 3px var(--fondo); }
.opcion-producto input:focus-visible { outline: none; }

.fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 22px 16px;
}
.input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--uva-suave);
  border-radius: var(--radio-chico);
  background: var(--fondo);
  color: var(--uva);
  font-size: 17px; /* 16px o más evita el zoom automático de iOS al enfocar */
  line-height: 24px;
  transition: border-color 120ms ease;
}
.input::placeholder { color: var(--uva-suave); opacity: 1; }
.input:focus-visible { border-color: var(--uva); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--rosa-profundo); }
@media (hover: hover) and (pointer: fine) {
  .input:hover { border-color: var(--uva); }
}
select.input {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233c1c4c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
textarea.input { min-height: 104px; resize: vertical; }
input[type="date"].input { appearance: none; min-width: 0; }
.campo__error { margin-top: 6px; color: var(--rosa-profundo); font-size: 15px; font-weight: 700; line-height: 20px; }
.campo__error:empty { margin-top: 0; }
.campo__ayuda { margin: 6px 0 0; color: var(--uva-suave); font-size: 14px; font-weight: 600; line-height: 20px; }

.form-pedido__envio { display: grid; gap: 12px; }
.estado { min-height: 22px; font-size: 15px; font-weight: 600; line-height: 22px; }
.estado.es-error { color: var(--rosa-profundo); }
.form-pedido__nota { color: var(--uva-suave); font-size: 14px; font-weight: 600; line-height: 20px; }

/* ── Cómo pedir: tres pasos unidos por la costura ───────────── */
.pasos__titulo { margin-bottom: 40px; }
.pasos { list-style: none; display: grid; grid-template-columns: 1fr; }
.paso {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 20px;
  padding-bottom: 32px;
}
.paso:last-child { padding-bottom: 0; }
.paso:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 76px;
  bottom: 10px;
  width: 4px;
  border-radius: var(--radio-pastilla);
  background: repeating-linear-gradient(180deg, var(--lavanda-aro) 0 14px, transparent 14px 22px);
}
.paso__num {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2px solid var(--uva);
  border-radius: 50%;
  background: var(--rosa-panda);
  box-shadow: var(--sombra-sticker);
  font-family: var(--font-titulos);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.paso:nth-child(2) .paso__num { background: var(--amarillo-betun); }
.paso:nth-child(3) .paso__num { background: var(--lila-deli); }
.paso h3 { margin: 16px 0 6px; font-size: 22px; font-weight: 600; line-height: 28px; }
.paso p:not(.paso__num) { max-width: 36ch; }

@media (min-width: 860px) {
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .paso { display: block; padding-bottom: 0; }
  .paso:not(:last-child)::before {
    left: 84px;
    right: 0;
    top: 30px;
    bottom: auto;
    width: auto;
    height: 4px;
    background: var(--costura);
  }
  .paso h3 { margin-top: 24px; }
}

/* ── Preguntas ──────────────────────────────────────────────── */
.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 32px clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq details { background: var(--costura) left bottom / 100% 3px no-repeat; }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 16px 0;
  font-family: var(--font-titulos);
  font-size: 19px;
  font-weight: 600;
  line-height: 25px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 2px solid var(--uva);
  border-radius: 50%;
  background: var(--fondo);
  transition: rotate 200ms var(--ease-out), background-color 120ms ease;
}
.faq details[open] .faq__icono { rotate: 45deg; background: var(--amarillo-betun); }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover .faq__icono { background: var(--rosa-claro); }
  .faq details[open] summary:hover .faq__icono { background: var(--amarillo-betun); }
}
.faq details p { padding: 0 52px 22px 0; }

/* ── Cierre: tarjeta lavanda con sello del panda ────────────── */
.cierre { padding-block: var(--seccion); }
.cierre__tarjeta {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--radio-grande);
  background: var(--fondo-lavanda);
  box-shadow: var(--sombra-sticker-alta);
}
/* El contorno va encima del sello: si fuera borde de la tarjeta, el lavanda asomaría en las esquinas. */
.cierre__tarjeta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 2px solid var(--uva);
  border-radius: inherit;
  pointer-events: none;
}
.cierre__texto { padding: clamp(28px, 5vw, 56px); }
.cierre h2 { max-width: 20ch; font-size: 32px; line-height: 40px; }
.cierre__texto p { margin-top: 12px; max-width: 40ch; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cierre__sello {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  border-top: 2px solid var(--uva);
  border-radius: 0 0 calc(var(--radio-grande) - 2px) calc(var(--radio-grande) - 2px);
  background: var(--uva);
}
.cierre__sello img { position: relative; width: 160px; height: 160px; }
@media (min-width: 860px) {
  .cierre__tarjeta { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .cierre__sello { border-top: 0; border-left: 2px solid var(--uva); border-radius: 0 calc(var(--radio-grande) - 2px) calc(var(--radio-grande) - 2px) 0; }
  .cierre__sello img { width: 160px; height: 160px; }
}
@media (max-width: 599px) {
  .cierre__acciones .btn { flex: 1 1 auto; }
}

/* ── Pie ────────────────────────────────────────────────────── */
.pie { background: var(--fondo-lavanda); }
.pie__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 28px;
  padding-block: 40px 48px;
  font-size: 16px;
}
.pie__marca { display: flex; align-items: center; }
.pie__marca img { width: 160px; height: 160px; object-fit: contain; }
.pie__etiqueta { margin-bottom: 4px; font-family: var(--font-titulos); font-size: 17px; font-weight: 600; }
.pie a { display: flex; align-items: center; min-height: 44px; width: fit-content; color: var(--uva); }
@media (hover: hover) and (pointer: fine) {
  .pie a:hover { color: var(--lila-profundo); }
}
.pie__legal { margin-top: 12px; color: var(--uva-suave); font-size: 14px; font-weight: 600; line-height: 20px; }

/* ── Movimiento reducido: sin desplazamientos ni escalas; se conservan fundidos y color ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .filtro, .trabajo, .btn:hover, .filtro:hover, .trabajo:hover,
  .btn:active, .filtro:active, .trabajo:active,
  .whatsapp-flotante, .whatsapp-flotante.es-visible:active { transform: none; }
  .faq__icono { transition: background-color 120ms ease; }
  .menu-movil, .visor__marco { transition: opacity 150ms ease; }
  @starting-style {
    .menu-movil { transform: none; }
    .visor[open] .visor__marco { transform: none; }
  }
}