/* Layout: tienda-vitrina sin precios. Barra de anuncio → logo centrado → héroe con los
   personajes sentados encima del producto → franja de claims → catálogo de empaques
   en color de línea → ingredientes → dónde comprar → vende Punky → comunidad. */
:root {
  --azul: #153c87;      /* institucional, manda */
  --azul-2: #65b7e7;
  --azul-3: #95cff2;
  --azul-4: #c9e8fb;
  --blanco: #f5fbff;
  --tinta: #22304f;
  --tinta-suave: #4a5a7c;
  --papel: #ffffff;
  --display: "Londrina Solid", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --etiqueta: "Bebas Neue", "Arial Narrow", "Helvetica Neue", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { transition: none !important; animation: none !important } }
body { background: var(--blanco); color: var(--tinta); font-family: var(--display); font-weight: 300; font-size: 1.15rem; line-height: 1.45; -webkit-font-smoothing: antialiased }
img { display: block; max-width: 100% }
a { color: inherit }
button { font: inherit; color: inherit; cursor: pointer }
:focus-visible { outline: 3px solid var(--azul-2); outline-offset: 3px; border-radius: 6px }
.envoltura { width: min(1180px, 100%); margin-inline: auto; padding-inline: 20px }
h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: .95; margin: 0; text-wrap: balance; letter-spacing: .005em }
p { margin: 0 }
.rotulo { font-family: var(--etiqueta); letter-spacing: .08em; font-size: 1.05rem; line-height: 1 }

/* ── borrador ── */
.borrador { background: var(--tinta); color: var(--papel); font-family: var(--etiqueta); letter-spacing: .08em; font-size: .95rem; padding: 6px 16px 4px; text-align: center }

/* ── anuncio + cabecera ── */
.anuncio { background: var(--azul); color: var(--papel); text-align: center; padding: 11px 16px 9px }
.anuncio .rotulo { font-size: 1.1rem }
.cabecera { background: var(--blanco); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; border-bottom: 2px solid var(--azul-4) }
.cabecera-fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: 12px 6px }
.cabecera-fila .logo img { height: 58px; width: auto }
.acciones { display: flex; gap: 10px; justify-content: flex-end }
.icono-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: transparent; border: 0; color: var(--azul) }
.icono-btn:hover { background: var(--azul-4) }
.icono-btn svg { width: 24px; height: 24px }
.menu { display: flex; justify-content: center; gap: clamp(14px, 4vw, 40px); padding-block: 4px 12px; flex-wrap: wrap }
.menu a { font-family: var(--display); font-weight: 400; font-size: 1.2rem; color: var(--azul); text-decoration: none; padding: 2px 2px }
.menu a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: var(--azul-2) }

/* ── empaque (doypack en CSS: reemplaza al packshot hasta tener fotos de estudio) ── */
.empaque { --c: var(--azul); --d: #0c2457; position: relative; width: 100%; aspect-ratio: 3 / 4; background: var(--c); border-radius: 14px 14px 22px 22px; color: var(--papel); display: flex; flex-direction: column; align-items: center; overflow: hidden; container-type: inline-size }
.empaque::before { content: ""; position: absolute; inset: 0 0 auto; height: 11%; background: var(--d); }
.empaque::after { content: ""; position: absolute; top: 3.4%; left: 50%; width: 9%; aspect-ratio: 2.4; translate: -50% 0; border-radius: 99px; background: var(--blanco) }
.empaque .e-logo { margin-top: 17%; width: 62%; filter: drop-shadow(1.5px 0 0 var(--azul)) drop-shadow(-1.5px 0 0 var(--azul)) drop-shadow(0 1.5px 0 var(--azul)) drop-shadow(0 -1.5px 0 var(--azul)) }
.empaque .e-nombre { margin-top: 8%; width: 100%; background: var(--d); text-align: center; font-weight: 900; font-size: 12.5cqi; line-height: 1; padding: 4% 4% 3%; text-transform: uppercase }
.empaque .e-especie { margin-top: 6%; font-family: var(--etiqueta); font-size: 9cqi; letter-spacing: .06em; line-height: 1 }
.empaque .e-peso { position: absolute; right: 6%; bottom: 4%; font-family: var(--etiqueta); font-size: 8cqi; letter-spacing: .04em; background: var(--papel); color: var(--d); padding: 2% 5% 1%; border-radius: 99px }
.empaque .e-sello { display: none; position: absolute; left: 6%; bottom: 4%; font-family: var(--etiqueta); font-size: 6.4cqi; letter-spacing: .05em; line-height: .95; border: 2px solid currentColor; border-radius: 50%; width: 26%; aspect-ratio: 1; place-items: center; text-align: center }
@container (min-width: 170px) { .empaque .e-sello { display: grid } }

/* ── héroe ── */
.heroe { background: var(--azul-4); position: relative; overflow: hidden }
.heroe-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; padding-block: 56px 130px }
.heroe-texto { display: grid; gap: 20px; min-width: 0 }
.heroe-texto .rotulo { color: var(--azul); font-size: 1.25rem }
.heroe h1 { color: var(--azul); font-size: clamp(3.2rem, 8.4vw, 6.4rem) }
.heroe-texto p { font-size: 1.35rem; max-width: 30ch; color: var(--tinta) }
.botones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px }
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 900; font-size: 1.25rem; padding: 13px 24px 11px; border-radius: 999px; border: 3px solid var(--azul); text-decoration: none; transition: transform .15s ease }
.btn:hover { transform: translateY(-2px) }
.btn-lleno { background: var(--azul); color: var(--papel) }
.btn-borde { background: var(--papel); color: var(--azul) }
.escena { position: relative; min-width: 0; display: grid; place-items: end center; padding-top: 70px }
.escena-sol { position: absolute; inset: 6% 4% 0; background: var(--azul-3); border-radius: 50% 50% 46% 54% / 55% 52% 48% 45% }
.escena-fila { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: end; gap: 14px; width: min(470px, 100%) }
.escena-fila > div { position: relative }
.escena-fila .gato { position: absolute; bottom: calc(100% - 4px); left: 50%; translate: -50% 0; width: 78% }
.sticker { position: absolute; filter: drop-shadow(0 0 0 transparent) }
.sticker.proteinas { width: clamp(110px, 15vw, 160px); left: -4%; top: 2%; rotate: -8deg }
.sticker.crujiente { width: clamp(100px, 13vw, 140px); right: -2%; top: 18%; rotate: 7deg }

/* ── franja de claims ── */
.claims { background: var(--azul); color: var(--papel); position: relative }
.claims .perro { position: absolute; bottom: calc(100% - 3px); left: clamp(8px, 6vw, 80px); width: clamp(120px, 15vw, 170px) }
.claims ul { list-style: none; margin: 0; padding-block: 18px 15px; display: flex; flex-wrap: wrap; gap: 10px 34px; justify-content: center }
.claims li { display: flex; align-items: center; gap: 9px; font-family: var(--etiqueta); font-size: 1.35rem; letter-spacing: .07em; line-height: 1 }
.claims svg { width: 22px; height: 22px; flex: none }

/* ── secciones ── */
.seccion { padding-block: 72px }
.seccion-cabeza { display: flex; justify-content: space-between; align-items: end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 30px }
.seccion-cabeza h2 { color: var(--azul); font-size: clamp(2.4rem, 5.4vw, 3.8rem) }
.seccion-cabeza p { max-width: 42ch; color: var(--tinta-suave) }
.chips { display: flex; gap: 8px; flex-wrap: wrap }
.chip { border: 2.5px solid var(--azul); background: var(--papel); color: var(--azul); border-radius: 999px; padding: 7px 16px 5px; font-family: var(--etiqueta); font-size: 1.15rem; letter-spacing: .07em }
.chip[aria-pressed="true"] { background: var(--azul); color: var(--papel) }

/* catálogo */
.catalogo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px }
.tarjeta { background: var(--fondo, var(--papel)); border-radius: 22px; padding: 26px 22px 20px; display: grid; gap: 16px; border: 0; text-align: left; transition: transform .18s ease }
.tarjeta:hover { transform: translateY(-4px) }
.tarjeta .empaque { width: min(210px, 72%); justify-self: center }
.tarjeta h3 { font-size: 2rem; color: var(--d) }
.tarjeta .meta { font-family: var(--etiqueta); letter-spacing: .07em; font-size: 1.1rem; color: var(--d); opacity: .8 }
.tarjeta .claim { color: var(--tinta) }
.tarjeta .ver { font-family: var(--display); font-weight: 900; color: var(--d); font-size: 1.1rem; display: inline-flex; gap: 6px; align-items: center }
.tarjeta .ver svg { width: 18px; height: 18px }
.sin-resultados { grid-column: 1 / -1; color: var(--tinta-suave) }

/* ingredientes */
.adentro { background: var(--papel) }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px }
.trio figure { margin: 0; display: grid; gap: 14px; justify-items: center; text-align: center }
.trio img { height: 190px; width: auto; object-fit: contain }
.trio h3 { font-size: 1.8rem; color: var(--azul) }
.trio p { color: var(--tinta-suave); max-width: 28ch }

/* dónde comprar */
.donde-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center }
.donde-grid img { border-radius: 22px; width: 100% }
.donde-texto { display: grid; gap: 18px; min-width: 0 }
.donde-texto h2 { color: var(--azul); font-size: clamp(2.4rem, 5.4vw, 3.8rem) }
.buscador { display: flex; gap: 8px; flex-wrap: wrap }
.buscador input { flex: 1 1 200px; min-width: 0; font: inherit; font-weight: 400; border: 2.5px solid var(--azul); border-radius: 999px; padding: 11px 18px 9px; background: var(--papel); color: var(--tinta) }
.resultado { min-height: 1.5em; color: var(--tinta-suave); font-size: 1.05rem }
.canales { display: flex; gap: 8px; flex-wrap: wrap }
.canales span { background: var(--azul-4); color: var(--azul); border-radius: 999px; padding: 6px 14px 4px; font-family: var(--etiqueta); letter-spacing: .07em; font-size: 1.1rem }

/* vende punky */
.vende { background: var(--azul); color: var(--papel); border-radius: 28px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: 36px; position: relative }
.vende h2 { font-size: clamp(2.4rem, 5.4vw, 3.8rem) }
.vende p { color: var(--azul-4); margin-top: 14px; max-width: 36ch }
.vende ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px }
.vende li { display: flex; gap: 10px; align-items: baseline }
.vende li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--azul-3); flex: none; translate: 0 -2px }
.formulario { background: var(--papel); color: var(--tinta); border-radius: 20px; padding: 24px; display: grid; gap: 12px; align-content: start; min-width: 0 }
.formulario label { display: grid; gap: 4px; font-family: var(--etiqueta); letter-spacing: .07em; font-size: 1.05rem; color: var(--azul) }
.formulario input, .formulario select { font: inherit; font-weight: 400; font-family: var(--display); letter-spacing: 0; font-size: 1.1rem; border: 2px solid var(--azul-3); border-radius: 12px; padding: 10px 12px 8px; background: var(--blanco); color: var(--tinta); width: 100% }
.formulario .btn { justify-content: center; margin-top: 4px }
.gracias { text-align: center; display: grid; gap: 10px; padding-block: 24px }
.gracias strong { font-weight: 900; font-size: 2rem; color: var(--azul) }

/* comunidad */
.comunidad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center }
.comunidad-grid img { border-radius: 22px; width: 100% }
.comunidad-texto { display: grid; gap: 18px; min-width: 0 }
.comunidad-texto h2 { color: var(--azul); font-size: clamp(2.4rem, 5.4vw, 3.8rem) }
.arroba { font-family: var(--etiqueta); font-size: 2.2rem; letter-spacing: .04em; color: var(--azul); line-height: 1 }

/* pie */
.pie { background: var(--azul); color: var(--azul-4); margin-top: 72px }
.pie-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: center; padding-block: 40px }
.pie img { height: 74px; width: auto }
.pie nav { display: flex; gap: 22px; flex-wrap: wrap }
.pie nav a { text-decoration: none; font-weight: 400; color: var(--papel) }
.pie .rotulo { color: var(--papel) }

/* ficha */
.velo { position: fixed; inset: 0; z-index: 40; background: rgba(21, 60, 135, .55); display: grid; place-items: center; padding: 16px }
.ficha { background: var(--papel); border-radius: 26px; width: min(820px, 100%); max-height: calc(100% - 8px); overflow: auto; display: grid; grid-template-columns: 0.8fr 1.2fr; position: relative }
.ficha-color { background: var(--fondo); padding: 36px 30px; display: grid; place-items: center; border-radius: 26px 0 0 26px }
.ficha-color .empaque { width: min(240px, 100%) }
.ficha-texto { padding: 34px 30px 30px; display: grid; gap: 16px; align-content: start; min-width: 0 }
.ficha-texto h2 { font-size: 2.8rem; color: var(--d) }
.ficha-texto .meta { font-family: var(--etiqueta); letter-spacing: .07em; font-size: 1.2rem; color: var(--d) }
.stickers { display: flex; flex-wrap: wrap; gap: 8px }
.stickers span { background: var(--fondo); color: var(--d); border: 2px solid var(--d); border-radius: 999px; padding: 5px 13px 3px; font-family: var(--etiqueta); letter-spacing: .06em; font-size: 1.05rem }
.racion { border: 2px solid var(--azul-3); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px }
.racion strong { font-weight: 900; color: var(--azul); font-size: 1.25rem }
.racion p { color: var(--tinta-suave); font-size: 1rem }
/* La guía de alimentación (13-10): la tabla del empaque, tal cual */
.racion .guia { border-collapse: collapse; width: 100%; max-width: 360px; font-size: 1rem }
.racion .guia th { text-align: left; font-weight: 800; color: var(--azul); border-bottom: 2px solid var(--azul-3); padding: 4px 8px }
.racion .guia td { padding: 4px 8px; border-bottom: 1px solid var(--azul-3) }
.racion .guia td:last-child, .racion .guia th:last-child { text-align: right }
.racion .guia-nota { font-size: .92rem }
.cerrar { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--blanco); color: var(--azul); display: grid; place-items: center; z-index: 2 }
.cerrar svg { width: 20px; height: 20px }
.aviso { position: fixed; z-index: 50; left: 50%; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; background: var(--tinta); color: var(--papel); border-radius: 16px; padding: 12px 18px; max-width: min(460px, calc(100% - 32px)); font-size: 1.05rem; font-weight: 400 }

/* ── responsivo ── */
@media (max-width: 900px) {
  .heroe-grid, .donde-grid, .comunidad-grid, .vende { grid-template-columns: 1fr }
  .heroe-grid { padding-block: 36px 128px; gap: 28px }
  .catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
  .trio { grid-template-columns: 1fr; gap: 40px }
  .pie-grid { grid-template-columns: 1fr }
  .ficha { grid-template-columns: 1fr }
  .ficha-color { border-radius: 26px 26px 0 0; padding: 28px }
  .ficha-color .empaque { width: 170px }
}
@media (max-width: 560px) {
  .cabecera-fila .logo img { height: 46px }
  .menu a { font-size: 1.05rem }
  .tarjeta { padding: 18px 14px 16px; gap: 12px; border-radius: 18px }
  .tarjeta .empaque { width: 86% }
  .tarjeta h3 { font-size: 1.5rem }
  .tarjeta .claim { font-size: 1rem }
  .claims li { font-size: 1.15rem }
  .seccion { padding-block: 56px }
  .escena-fila { gap: 8px }
  .escena { padding-top: 96px }
  .sticker.proteinas { display: none }
  .sticker.crujiente { width: 88px; right: 0; top: 4% }
  .ficha-texto h2 { font-size: 2.2rem }
}

/* foto real del empaque */
.foto { width: 100%; height: auto; filter: drop-shadow(0 14px 16px rgba(21, 60, 135, .22)) }
.tarjeta .foto { width: 100%; height: 270px; object-fit: contain }
.ficha-color .foto { width: min(250px, 100%) }
.escena-fila .foto { filter: drop-shadow(0 10px 12px rgba(21, 60, 135, .28)) }
@media (max-width: 900px) { .ficha-color .foto { width: 170px } }
@media (max-width: 560px) { .tarjeta .foto { height: 190px } }

/* Almohaditas: fotos de ambiente */
.crujiente { background: var(--azul-4) }
.crujiente-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center }
.crujiente-texto { display: grid; gap: 18px; min-width: 0 }
.crujiente-texto .rotulo { color: var(--azul) }
.crujiente-texto h2 { color: var(--azul); font-size: clamp(2.4rem, 5.4vw, 3.8rem) }
.crujiente-texto p { max-width: 36ch; color: var(--tinta) }
.amb { width: 100%; height: auto; border-radius: 22px; object-fit: cover; aspect-ratio: 3 / 4 }
.amb-grande { aspect-ratio: 4 / 5; max-height: 560px }
.amb-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px }
@media (max-width: 900px) { .crujiente-grid { grid-template-columns: 1fr; gap: 28px } .amb-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px } }

.crujiente.amarillo { background: #fdf0cf }
.crujiente-grid.invertida { grid-template-columns: .9fr 1.1fr }
.amb-fila.dos { grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (max-width: 900px) { .crujiente-grid.invertida { grid-template-columns: 1fr } }

.amb-fila.seis { grid-template-columns: repeat(3, minmax(0, 1fr)) }
@media (max-width: 900px) { .amb-fila.seis { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* ilustraciones de marca (decorativas) */
.ilus, .donde-grid img.ilus, .comunidad-grid img.ilus { display: block; width: auto !important; height: 170px; max-width: 100%; object-fit: contain; border-radius: 0 !important; aspect-ratio: auto !important }
.ilus-fila { display: flex; gap: 18px; align-items: flex-end; margin-top: 22px; flex-wrap: wrap }
.ilus-fila .ilus { height: 170px }
.ilus.suelta { height: 170px; justify-self: start; margin-top: 6px }
.gracias-ilus { height: 150px; margin-inline: auto }
.pie { position: relative }
.pie-ilus { position: absolute; right: clamp(16px, 8vw, 120px); bottom: calc(100% - 3px); height: clamp(100px, 13vw, 150px) }
@media (max-width: 560px) { .ilus-fila .ilus, .ilus.suelta { height: 130px } }

/* formulario: campo trampa (fuera de pantalla, no display:none: algunos robots lo ignoran si está oculto) y error */
.trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden }
.form-error { color: #b3261e; font-weight: 400; font-size: 1.05rem }
.formulario .btn:disabled { opacity: .6; cursor: wait }

/* Conoce a Punky */
.punky { background: var(--papel) }
.punky-grid { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center }
.punky-ilus.ilus { height: 260px }
.punky-texto { display: grid; gap: 14px; max-width: 52ch }
.punky-texto .rotulo { color: var(--azul) }
.punky-texto h2 { color: var(--azul); font-size: clamp(2.4rem, 5.4vw, 3.8rem) }
@media (max-width: 700px) { .punky-grid { grid-template-columns: 1fr; justify-items: start; gap: 20px } .punky-ilus.ilus { height: 180px } }
/* «¿Para qué sirve?» en la ficha */
.sirve { border-left: 5px solid var(--azul-2); padding: 4px 0 4px 14px; display: grid; gap: 2px }
.sirve strong { font-weight: 900; color: var(--azul) }
/* Testimonios */
.testimonios { background: var(--azul-4) }
.test-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px }
.test { margin: 0; background: var(--papel); border-radius: 22px; padding: 22px; display: grid; gap: 12px }
.test blockquote { margin: 0; font-weight: 400; font-size: 1.2rem; color: var(--tinta) }
.test figcaption { font-family: var(--etiqueta); letter-spacing: .07em; color: var(--azul); font-size: 1.1rem }
.test-vacio { grid-column: 1 / -1; border: 3px dashed var(--azul-2); border-radius: 22px; padding: 28px; color: var(--azul); background: var(--papel) }

.claims .perro { display: none }

/* ── Escala real del empaque: 1 = el más grande. La foto se encoge hacia el piso, no hacia el centro ── */
.tarjeta .foto { transform: scale(var(--esc, 1)); transform-origin: 50% 100% }
.ficha-color .foto { transform: scale(calc(.55 + .45 * var(--esc, 1))); transform-origin: 50% 100% }
/* ── Galería en la ficha y franja «En acción» ── */
.ficha-galeria { grid-column: 1 / -1; display: flex; gap: 12px; overflow-x: auto; padding: 4px 30px 26px; scroll-snap-type: x proximity }
.ficha-galeria img { height: 220px; width: auto; border-radius: 16px; flex: none; scroll-snap-align: start }
.accion { background: var(--azul-4) }
.accion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.accion-foto { border: 0; padding: 0; background: none; border-radius: 22px; overflow: hidden; transition: transform .18s ease }
.accion-foto:hover { transform: translateY(-4px) }
.accion-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block }
@media (max-width: 900px) { .accion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px } .ficha-galeria { padding-inline: 20px } .ficha-galeria img { height: 170px } }



/* ¿Qué necesita tu pana hoy? */
.necesidades { background: var(--papel) }
.nec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px }
.nec { background: var(--blanco); border: 3px solid var(--azul-4); border-radius: 22px; padding: 22px; display: grid; gap: 10px; align-content: start }
.nec h3 { color: var(--azul); font-size: 1.9rem }
.nec p { color: var(--tinta-suave); font-size: 1.05rem }
.nec-fila { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 6px }
.nec-prod { border: 0; background: none; padding: 0; display: grid; gap: 4px; justify-items: center; width: 92px; transition: transform .15s ease }
.nec-prod:hover { transform: translateY(-3px) }
.nec-prod img { height: 120px; width: 100%; object-fit: contain; object-position: 50% 100%; transform: scale(var(--esc, 1)); transform-origin: 50% 100% }
.nec-prod span { font-family: var(--etiqueta); letter-spacing: .05em; font-size: .95rem; color: var(--azul); line-height: 1; text-align: center }
/* Distribuidores del mundo */
.mundo { background: var(--azul-4) }
.mundo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start }
.mundo-texto { display: grid; gap: 16px; min-width: 0 }
.mundo-texto .rotulo { color: var(--azul) }
.mundo-texto h2 { color: var(--azul); font-size: clamp(2.4rem, 5.4vw, 3.8rem) }
.mundo-texto p { max-width: 42ch }
.mundo-texto .en { color: var(--tinta-suave); font-size: 1.05rem }
.mundo .formulario { box-shadow: 0 10px 30px rgba(21, 60, 135, .12) }
.formulario textarea { font: inherit; font-weight: 400; font-family: var(--display); font-size: 1.1rem; border: 2px solid var(--azul-3); border-radius: 12px; padding: 10px 12px; background: var(--blanco); color: var(--tinta); width: 100%; resize: vertical }
@media (max-width: 900px) { .mundo-grid { grid-template-columns: 1fr; gap: 28px } }

.accion-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 900px) { .accion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* ficha: dos columnas en escritorio, UNA en celular (va al final para que nada la pise) */
.ficha { grid-template-columns: .8fr 1.2fr }
@media (max-width: 900px) { .ficha { grid-template-columns: minmax(0, 1fr) } .ficha-texto { padding: 24px 22px 22px } }
.ficha-texto h2, .ficha-texto p, .stickers { overflow-wrap: anywhere }
/* sombra del empaque más suave: la fuerte se leía como un borde gris sobre el fondo de color */
.foto { filter: drop-shadow(0 8px 10px rgba(21, 60, 135, .16)) }
.ficha-color { overflow: hidden }

/* «Así los disfrutan»: fondo blanco y fotos juntas → un mosaico. Sobre azul claro, cada foto (rosa, amarilla, azul, lila) peleaba con el fondo */
.accion { background: var(--papel) }
.accion-grid { gap: 8px }
.accion-foto { border-radius: 16px }
@media (max-width: 900px) { .accion-grid { gap: 6px } }

.tarjeta { position: relative }
.nuevo { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--azul); color: var(--papel); font-family: var(--etiqueta); letter-spacing: .08em; font-size: 1.05rem; padding: 6px 12px 4px; border-radius: 999px; transform: rotate(-4deg) }

/* ── Portada B: fondo azul de marca, abanico de empaques y Punky grande ── */
.heroe3 { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 78% 20%, #2a5fb8 0%, var(--azul) 55%, #0f2e6a 100%); color: var(--papel) }
/* (02-11) La escena llega escondida y aparece UNA vez, ya con lo elegido en la intranet (banner.js, tope 1,5 s): sin saltos.
   Si el JavaScript no llega a quitar `.esperando` (una copia vieja, un error), la animación la muestra sola a los 2,5 s. */
.h3-escena { transition: opacity .35s ease }
.h3-escena.esperando { opacity: 0; animation: escena-aparece .35s ease 2.5s forwards }
@keyframes escena-aparece { to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .h3-escena { transition: none } .h3-escena.esperando { animation-duration: 0s } }
.heroe3-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; align-items: end; padding-block: 70px 0; min-height: 600px }
.h3-texto { display: grid; gap: 20px; align-content: center; padding-bottom: 150px; position: relative; z-index: 4 }
.h3-texto .rotulo { color: var(--azul-3); font-size: 1.2rem }
.h3-texto h1 { color: var(--papel); font-size: clamp(2.8rem, 5.6vw, 5.2rem) }
.h3-texto p { max-width: 32ch; font-size: 1.3rem; color: var(--azul-4) }
.btn-blanco { background: var(--papel); color: var(--azul); border-color: var(--papel) }
.btn-contorno { background: transparent; color: var(--papel); border-color: var(--papel) }
.h3-escena { position: relative; display: grid; justify-items: center; align-items: end; min-width: 0; min-height: 440px }
.h3-abanico { display: flex; align-items: flex-end; justify-content: center; position: relative; z-index: 2; margin-bottom: 40px }
.h3-p { height: calc(clamp(170px, 24vw, 330px) * var(--esc, 1)); width: auto; margin-inline: clamp(-34px, -2.4vw, -12px); transform: rotate(var(--r, 0deg)); transform-origin: 50% 100%; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .35)); transition: transform .25s ease }
.h3-centro { z-index: 3 }
.h3-abanico:hover .h3-p { transform: rotate(calc(var(--r, 0deg) * 1.5)) translateY(-6px) }
.h3-punky { position: absolute; left: -4%; bottom: 28px; height: clamp(190px, 25vw, 340px); width: auto; z-index: 4; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .35)) }
.h3-gata { position: absolute; right: -4%; bottom: 28px; height: clamp(150px, 17vw, 250px); width: auto; z-index: 4; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .3)) }
.h3-mesa { position: absolute; inset: auto 0 0; height: 78px; background: linear-gradient(#ffffff, #dcecfb); box-shadow: 0 -14px 26px rgba(0, 0, 0, .25); z-index: 1 }
@media (max-width: 900px) {
  .heroe3-grid { grid-template-columns: 1fr; padding-block: 44px 0; min-height: 0; gap: 8px }
  .h3-texto { padding-bottom: 8px; text-align: left }
  .h3-escena { min-height: 330px }
  .h3-p { height: calc(clamp(140px, 40vw, 220px) * var(--esc, 1)); margin-inline: -10px }
  .h3-abanico .h3-p:nth-of-type(1), .h3-abanico .h3-p:nth-of-type(5) { display: none }
  .h3-punky { height: 150px; left: -8px } .h3-gata { height: 130px; right: -8px }
  .h3-mesa { height: 60px }
}

/* B: Punky y Jerry en su propio margen, sin tapar los empaques */
.h3-escena { padding-inline: clamp(70px, 9vw, 140px) }
.h3-punky { left: 0 } .h3-gata { right: 0 }
.h3-p { height: calc(clamp(150px, 20vw, 290px) * var(--esc, 1)) }
@media (max-width: 900px) {
  .h3-escena { min-height: 250px; padding-inline: 62px; margin-top: -4px }
  .h3-p { height: calc(clamp(120px, 34vw, 190px) * var(--esc, 1)) }
  .h3-punky { height: 118px; left: 0 } .h3-gata { height: 108px; right: 0 }
}

/* ── Carrusel «Los favoritos de Punky» ── */
.fav { background: var(--blanco); --w: clamp(250px, 74vw, 340px) }
.fav-cabeza { justify-content: center; text-align: center; flex-direction: column; align-items: center }
.fav-pestanas { display: flex; width: min(420px, 100%); margin: 0 auto 26px; background: var(--papel); border: 3px solid var(--azul-4); border-radius: 999px; padding: 4px; gap: 4px }
.fav-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; background: transparent; color: var(--azul); border-radius: 999px; padding: 4px 14px; font-family: var(--display); font-weight: 900; font-size: 1.25rem; height: 58px; overflow: hidden }
.fav-tab img { height: 54px; width: auto; flex: none }
.fav-tab[aria-pressed="true"] { background: var(--azul-4) }
.fav-marco { position: relative }
.fav-pista { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px calc(50% - var(--w) / 2) 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline-offset: -4px }
.fav-pista::-webkit-scrollbar { display: none }
.fav-pista { cursor: grab }
.fav-pista.arrastrando { cursor: grabbing; user-select: none }
.fav-pista img { -webkit-user-drag: none; user-select: none }
.fav-card { position: relative; flex: none; width: var(--w); scroll-snap-align: center; background: var(--fondo); border-radius: 30px; padding: 26px 22px 24px; display: grid; gap: 10px; justify-items: center; text-align: center; overflow: hidden; transform: scale(.9); opacity: .78; transition: transform .3s ease, opacity .3s ease }
.fav-card.activa { transform: scale(1); opacity: 1 }
.fav-card::before { content: ""; position: absolute; left: -10%; right: -10%; top: 36%; height: 62%; background: rgba(255, 255, 255, .45); border-radius: 50% 50% 0 0 / 38% 38% 0 0 }
.fav-card > * { position: relative }
.fav-foto { height: 300px; display: flex; align-items: flex-end; justify-content: center; width: 100% }
.fav-foto .foto { height: 100%; width: auto; max-width: 100%; transform: scale(var(--esc, 1)); transform-origin: 50% 100% }
.fav-foto .empaque { height: 100%; width: auto; aspect-ratio: 3 / 4 }
.fav-card h3 { color: var(--d); font-size: 2.1rem }
.fav-card p { color: var(--tinta); font-size: 1.05rem; min-height: 2.6em }
.fav-peso { position: absolute; top: 18px; right: 18px; background: var(--papel); color: var(--d); font-family: var(--etiqueta); letter-spacing: .07em; font-size: 1rem; padding: 6px 12px 4px; border-radius: 999px }
.fav-card .nuevo { left: 16px; top: 16px }
.fav-ver { margin-top: 6px }
.fav-flecha { position: absolute; top: 44%; z-index: 5; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--azul); background: var(--papel); color: var(--azul); font-size: 2rem; line-height: 1; display: grid; place-items: center; padding: 0 0 4px; box-shadow: 0 6px 16px rgba(21, 60, 135, .18) }
.fav-ant { left: clamp(4px, 5vw, 80px) } .fav-sig { right: clamp(4px, 5vw, 80px) }
.fav-flecha:hover { background: var(--azul); color: var(--papel) }
.fav-puntos { display: flex; justify-content: center; gap: 8px; margin: 4px 0 26px; flex-wrap: wrap }
.fav-puntos span { width: 10px; height: 10px; border-radius: 50%; background: var(--azul-3); cursor: pointer; transition: all .2s }
.fav-puntos span.on { background: var(--azul); width: 28px; border-radius: 6px }
.fav-todos { text-align: center }
@media (max-width: 560px) { .fav-flecha { width: 42px; height: 42px; font-size: 1.6rem; top: 40% } .fav-foto { height: 250px } .fav-card h3 { font-size: 1.8rem } }
@media (prefers-reduced-motion: reduce) { .fav-card { transition: none } }

.fav-card .fav-peso { z-index: 3 }
.fav-card .nuevo { z-index: 3 }

/* ── Lo último en Instagram ── */
.insta { background: var(--papel) }
.insta-cabeza { align-items: center }
.insta-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px }
.insta-post { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 1; background: var(--azul-4); transition: transform .18s ease }
.insta-post:hover { transform: translateY(-4px) }
.insta-post img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block }
.insta-cam { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)) }
@media (max-width: 900px) { .insta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px } }

/* fotos de relleno (ilustraciones con fondo transparente): enteras, sobre un color */
.insta-post.es-ilus img { object-fit: contain; padding: 12%; object-position: 50% 50% }
.punky-grid { grid-template-columns: minmax(280px, 460px) 1fr; align-items: center }
.punky-galeria { display: grid; gap: 10px; min-width: 0 }
.pk { margin: 0; border-radius: 26px; overflow: hidden; background: var(--azul-4) }
.pk img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block }
.pk.es-ilus img { object-fit: contain; padding: 8% }
.pk-grande { aspect-ratio: 4 / 5 }
.pk-tira { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.pk-chica { aspect-ratio: 1; border-radius: 18px }
.pk.es-ilus.pk-chica img { padding: 10% }
@media (max-width: 700px) { .punky-grid { grid-template-columns: 1fr } .pk-grande { aspect-ratio: 1 } }

/* ── Carrusel: empieza con la fila llena, a la izquierda; sin tarjetas apagadas ── */
.fav-pista { padding: 18px 0 22px; scroll-snap-type: x mandatory; scroll-padding-left: 0 }
.fav-card { scroll-snap-align: start; transform: none; opacity: 1; cursor: pointer; transition: transform .2s ease }
.fav-card:hover { transform: translateY(-4px) }
.fav { --w: clamp(250px, 72vw, 330px) }
.fav-ant { left: -6px } .fav-sig { right: -6px }
@media (min-width: 1240px) { .fav-ant { left: -26px } .fav-sig { right: -26px } }
/* al tocar un título del menú, que el título de la sección no quede tapado por el menú fijo */
[id] { scroll-margin-top: 150px }
@media (max-width: 560px) { [id] { scroll-margin-top: 190px } }

/* ── Dónde comprar: venta en línea (Caracas directo, resto del país por Mercado Libre) ── */
.online { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.online-op { display: grid; gap: 6px; align-content: start; text-decoration: none; background: var(--azul); color: var(--papel); border-radius: 22px; padding: 18px 18px 16px; transition: transform .15s ease }
.online-op:hover { transform: translateY(-3px) }
.online-ml { background: #ffe600; color: #2d3277 }
.online-etq { font-family: var(--etiqueta); letter-spacing: .08em; font-size: 1.05rem; opacity: .9 }
.online-op strong { font-weight: 900; font-size: 1.35rem; line-height: 1.05 }
.online-ir { font-family: var(--etiqueta); letter-spacing: .06em; font-size: 1.05rem; margin-top: 6px }
.o-o { text-align: center; font-family: var(--etiqueta); letter-spacing: .1em; color: var(--tinta-suave); font-size: 1.05rem }
@media (max-width: 560px) { .online { grid-template-columns: 1fr } }

/* ¿Dónde lo consigo?: filtros y resultados reales */
.canales button { background: var(--azul-4); color: var(--azul); border: 2.5px solid transparent; border-radius: 999px; padding: 6px 14px 4px; font-family: var(--etiqueta); letter-spacing: .07em; font-size: 1.1rem }
.canales button[aria-pressed="true"] { background: var(--azul); color: var(--papel) }
.tiendas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.tiendas-lista li { background: var(--papel); border: 2.5px solid var(--azul-4); border-radius: 18px; padding: 12px 16px; display: grid; gap: 2px }
.tiendas-lista strong { font-weight: 900; font-size: 1.25rem; color: var(--azul) }
.tiendas-lista span { font-family: var(--etiqueta); letter-spacing: .06em; color: var(--tinta-suave); font-size: 1.05rem }
.tiendas-lista em { font-style: normal; color: var(--tinta); font-size: 1.05rem }
/* página «Todos los productos» */
.pagina-productos { padding-block: 40px 72px }
.pagina-productos .volver { display: inline-flex; margin-bottom: 18px; font-weight: 400; color: var(--azul); text-decoration: none }
.pagina-productos .volver:hover { text-decoration: underline }

/* fotos reales de Punky: que la cara quede dentro del recorte */
.pk img { object-position: 50% 40% }
.pk-grande img { object-position: 50% 38% }

@media (max-width: 700px) { .punky-grid { justify-items: stretch } .punky-galeria { width: 100% } }

/* Distribuye Punky: un solo bloque, dos pestañas */
.distribuye { padding-top: clamp(40px, 6vw, 72px) }
.dist-tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 0 0 22px }
.dist-tab { border: 2px solid var(--azul); background: #fff; color: var(--azul); border-radius: 999px; padding: 12px 22px; font: 400 1.15rem var(--display); cursor: pointer }
.dist-tab[aria-selected="true"] { background: var(--azul); color: #fff }
.distribuye .mundo { border-radius: 28px; padding: clamp(28px, 5vw, 56px) }
.comunidad-insta-sep { margin-top: clamp(32px, 5vw, 56px) }
#comunidad > .insta { margin-top: clamp(32px, 5vw, 56px) }

/* Aprobado x Punky: el mapa de lugares perrito friendly */
.apr-home { background: var(--azul-4) }
.apr-home-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center }
.apr-home-grid > div { display: grid; gap: 14px; justify-items: start }
.apr-home h2 { color: var(--azul); font-size: clamp(2.4rem, 5.4vw, 3.8rem) }
.apr-home .rotulo { color: var(--azul) }
.apr-cuenta { font-family: var(--display); font-size: 1.4rem; color: var(--azul); min-height: 1.4em }
.apr-home .ilus { justify-self: center }
@media (max-width: 700px) { .apr-home-grid { grid-template-columns: 1fr } }
.pagina-aprobado { padding-block: clamp(28px, 5vw, 56px) }
.apr-barra { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; justify-content: space-between; margin: 8px 0 12px }
.apr-ciudad { display: grid; gap: 4px }
.apr-ciudad select { font: inherit; padding: 10px 14px; border-radius: 999px; border: 2px solid var(--azul); background: #fff; color: var(--azul) }
.apr-cuerpo { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start }
.apr-mapa { height: min(70vh, 640px); min-height: 360px; border-radius: 22px; overflow: hidden; border: 2px solid var(--azul-3); position: relative; z-index: 0 }
.apr-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: min(70vh, 640px); overflow: auto }
.apr-item { width: 100%; text-align: left; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 0; background: #fff; box-shadow: 0 2px 10px rgba(21, 60, 135, .1); cursor: pointer; font: inherit }
.apr-item strong { font-family: var(--display); font-size: 1.15rem; color: var(--azul) }
.apr-item span { color: var(--tinta-suave); font-size: .95rem }
.apr-pin span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--azul); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); font-size: 15px }
.apr-pop strong { font-family: var(--display); font-size: 1.2rem; color: var(--azul) }
.apr-pop p { margin: 4px 0 0 }
.apr-pop-tipos { color: var(--tinta-suave); font-size: .9rem }
.apr-pop-acc { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px }
.apr-pop-acc a { color: var(--azul); font-weight: 700 }
.apr-postula { margin-top: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; background: var(--azul-4); border-radius: 28px; padding: clamp(24px, 5vw, 48px) }
.apr-postula h2 { color: var(--azul); font-size: clamp(2rem, 4.6vw, 3.2rem) }
.apr-postula > div:first-child { display: grid; gap: 12px }
@media (max-width: 900px) { .apr-cuerpo, .apr-postula { grid-template-columns: 1fr } .apr-lista { max-height: 320px } }

/* «¿Dónde lo consigo?»: cerca de mí, zonas de Caracas y «Cómo llegar» */
.cerca-btn { justify-self: start; margin-top: 10px }
.zonas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px }
.zonas button { border: 2px solid var(--azul); background: #fff; color: var(--azul); border-radius: 999px; padding: 6px 14px; font: 400 1.05rem var(--etiqueta); letter-spacing: .05em; cursor: pointer }
.zonas button[aria-pressed="true"] { background: var(--azul); color: #fff }
.tiendas-lista .llegar { justify-self: start; margin-top: 4px; color: var(--azul); font-weight: 700; text-decoration: underline }

/* «Busco: Almohaditas…» */
.busco { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--etiqueta); letter-spacing: .05em; color: var(--azul) }
.busco select { font: inherit; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--azul); background: #fff; color: var(--azul); max-width: 100% }

/* Pie (16-10, Andreas: *«bajar a Punky y Jerry de modo que no quede espacio»*): sin el margen de 72px encima del pie; la pareja
   se asoma sobre la franja dentro del espacio de la última sección. */
.pie { margin-top: 0 }
.pie-ilus { bottom: calc(100% - 6px) }

/* ── Tamaños de la portada (16-10, Andreas: *«los productos tienen que ser más grandes… y Punky y Jerry del mismo tamaño»*) ──
   Dos perillas: --zoom-prod (los empaques) y --zoom-pj (Punky y la gata, SIEMPRE del mismo tamaño — la B tenía
   a Punky fuera de la perilla: Andreas, 16-10, *«dijimos que el perro y el gato iban a ser del mismo tamaño… no veo esa opción»*). En el borrador se
   prueban en vivo con «🔍 Tamaños» (editor.js); el valor que guste se fija acá. */
:root { --zoom-prod: 1.2; --zoom-pj: 1 }
.h3-p { height: calc(clamp(150px, 20vw, 290px) * var(--esc, 1) * var(--zoom-prod)) }
.h3-punky, .h3-gata { height: calc(clamp(150px, 17vw, 250px) * var(--zoom-pj)) }
@media (max-width: 900px) {
  .h3-p { height: calc(clamp(120px, 34vw, 190px) * var(--esc, 1) * var(--zoom-prod)) }
  .h3-punky, .h3-gata { height: calc(108px * var(--zoom-pj)) }
}

/* (25-10) «¡Muy pronto!»: el producto se anuncia pero todavía no está en tiendas (se elige en la intranet). */
.nuevo.pronto { background: var(--tinta); }
.pronto-aviso { opacity: .75; cursor: default; pointer-events: none; }

/* (03-11) Ficha en el teléfono: las fotos del shooting no se veían enteras. La fila de la galería no sabía su alto
   (Safari no lo calcula con imágenes de ancho automático dentro de un carril con scroll) y las fotos quedaban por
   fuera del área que se puede desplazar. Se le da el alto y la proporción explícitos, y la ficha usa el alto
   visible real del teléfono (dvh). */
.ficha { max-height: calc(100dvh - 32px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch }
.ficha-galeria { align-items: flex-start; min-height: calc(220px + 30px) }
.ficha-galeria img { aspect-ratio: 2 / 3; object-fit: cover; max-height: none }
@media (max-width: 900px) { .ficha-galeria { min-height: calc(170px + 30px) } }

/* (03-11) Empaque vivo: Punky cocina sus Tocineticas. Las piezas van en % de la foto. */
.vivo { position: relative }
.vivo img { display: block; width: 100%; height: auto }
.tirita-viva { position: absolute; left: 29%; top: 75%; width: 12%; pointer-events: none; opacity: 0; animation: salta 2.6s cubic-bezier(.3,.1,.5,1) infinite }
.tirita-viva svg, .tirita-viva img { display: block; width: 100%; height: auto }
.tirita-viva.t1 { --dx: -4%; --alto: -290%; --giro: 380deg; animation-delay: 0s }
.tirita-viva.t2 { --dx: 60%; --alto: -360%; --giro: -420deg; animation-delay: .85s }
.tirita-viva.t3 { --dx: -70%; --alto: -250%; --giro: 300deg; animation-delay: 1.7s }
@keyframes salta {
  0% { transform: translate(0, 0) rotate(0) scale(.7); opacity: 0 }
  8% { opacity: 1 }
  45% { transform: translate(var(--dx), var(--alto)) rotate(calc(var(--giro) / 2)) scale(1) }
  88% { opacity: 1 }
  100% { transform: translate(0, 0) rotate(var(--giro)) scale(.7); opacity: 0 }
}
.vapor-vivo { position: absolute; left: 31%; top: 78%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.85); pointer-events: none; opacity: 0; animation: vaporVivo 2.2s ease-out infinite }
.vapor-vivo.v2 { left: 37%; animation-delay: .7s }
.vapor-vivo.v3 { left: 26%; animation-delay: 1.4s }
@keyframes vaporVivo { 0% { transform: translateY(0) scale(.5); opacity: 0 } 20% { opacity: .9 } 100% { transform: translateY(-260%) scale(1.8); opacity: 0 } }
/* (03-11) Empaque vivo: Punky bucea en Salmoncitos. Burbujas del snorkel y salmoncitos nadando (recortados del empaque). */
.vivo-mar { overflow: hidden; border-radius: 12px }
.burbuja-viva { position: absolute; left: 48.5%; top: 55%; width: 7%; aspect-ratio: 1; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px rgba(29,79,154,.35); background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.9) 0 20%, rgba(255,255,255,.15) 40%); pointer-events: none; opacity: 0; animation: burbujaViva 2.4s ease-out infinite }
.burbuja-viva.u2 { animation-delay: .6s; width: 5% } .burbuja-viva.u3 { animation-delay: 1.2s; width: 8.5% } .burbuja-viva.u4 { animation-delay: 1.8s; width: 4.5% }
@keyframes burbujaViva { 0% { transform: translate(0,0) scale(.4); opacity: 0 } 15% { opacity: 1 } 50% { transform: translate(-60%, -280%) scale(1) } 100% { transform: translate(40%, -560%) scale(1.15); opacity: 0 } }
.pez-vivo { position: absolute; top: 77%; left: -18%; width: 14%; pointer-events: none; opacity: 0; animation: nadaVivo 6s linear infinite, apareceVivo 6s linear infinite }
.pez-vivo img { display: block; width: 100%; height: auto }
.pez-vivo.p2 { top: 85%; width: 11%; animation-delay: 1.1s, 1.1s } .pez-vivo.p3 { top: 71%; width: 9%; animation-delay: 2.2s, 2.2s }
@keyframes nadaVivo { 0% { transform: translate(0,0) } 25% { transform: translate(110%,-12%) } 50% { transform: translate(220%,8%) } 75% { transform: translate(330%,-10%) } 100% { transform: translate(440%,0) } }
@keyframes apareceVivo { 0% { opacity: 0 } 6% { opacity: 1 } 60% { opacity: 1 } 70%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .tirita-viva, .vapor-vivo, .burbuja-viva, .pez-vivo { animation: none; opacity: 0 } }

/* (03-11) Tema de temporada: Navidad. Nieve que cae por encima de todo sin tapar los clics, y la franja en rojo. */
.nieve { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden }
.nieve i { position: absolute; top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(21,60,135,.35); animation-name: caeNieve, meceNieve; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate }
@keyframes caeNieve { to { top: 102% } }
@keyframes meceNieve { from { margin-left: -14px } to { margin-left: 14px } }
.tema-navidad .anuncio { background: #b3202b }

/* (03-11) 🐾 Amigos de Punky: formulario + carnet en vivo arriba, el muro de polaroids abajo. */
.pagina-amigos { padding-block: 32px 64px }
.amg-alta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 24px; align-items: start; margin-top: 24px }
.amg-form { background: var(--papel); border-radius: 24px; padding: 22px; display: grid; gap: 14px; min-width: 0; box-shadow: 0 10px 30px -18px rgba(21,60,135,.35) }
.amg-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.amg-form label, .amg-campo { display: grid; gap: 6px; font-family: var(--etiqueta); letter-spacing: .08em; font-size: 1rem; color: var(--tinta-suave) }
.amg-form input[type=text], .amg-form input:not([type]), .amg-form input[type=email], .amg-form input[type=date] { font: 400 1.05rem var(--display); color: var(--tinta); padding: 11px 12px; border-radius: 12px; border: 2px solid var(--azul-4); background: var(--blanco); width: 100%; min-width: 0; letter-spacing: 0 }
.amg-especie { display: flex; gap: 8px }
.amg-opcion { flex: 1; display: flex !important; align-items: center; justify-content: center; gap: 6px; border: 2px solid var(--azul-4); border-radius: 12px; padding: 10px; cursor: pointer; color: var(--tinta) !important; font-size: 1.1rem !important }
.amg-opcion:has(input:checked) { border-color: var(--azul); background: var(--azul); color: var(--papel) !important }
.amg-opcion input { position: absolute; opacity: 0; pointer-events: none }
.amg-foto { border: 2px dashed var(--azul-2); border-radius: 14px; padding: 14px; text-align: center; cursor: pointer; color: var(--azul) !important; font-size: 1.15rem !important; background: var(--azul-4); display: block !important }
.amg-check { display: flex !important; gap: 10px; align-items: flex-start; font-family: inherit !important; letter-spacing: 0 !important; font-size: .95rem !important; line-height: 1.4; color: var(--tinta) !important }
.amg-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--azul); flex: none }
.amg-privado { font-size: .88rem; color: var(--tinta-suave); line-height: 1.4; margin: 0 }
.amg-error { color: #b3261e; margin: 0; font-size: .95rem }
.amg-ok { margin: 0; background: #e3f5e6; color: #1b6b46; border-radius: 12px; padding: 12px 14px; line-height: 1.4 }
.amg-form .btn { justify-self: start }
.amg-carnet-caja { position: sticky; top: 16px; display: grid; gap: 12px }
.amg-carnet { position: relative; aspect-ratio: 4 / 5; border-radius: 26px; background: var(--azul); color: var(--papel); overflow: hidden; padding: 22px; display: grid; grid-template-rows: auto 1fr auto; box-shadow: 0 20px 34px -18px rgba(21,60,135,.6) }
.amg-carnet::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 12%, rgba(101,183,231,.55), transparent 45%), repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px) }
.amg-carnet > * { position: relative }
.amg-cab { display: flex; justify-content: space-between; align-items: start; font-family: var(--etiqueta); letter-spacing: .12em; font-size: 1rem; line-height: 1.1 }
.amg-cab b { font-family: var(--display); font-weight: 900; font-size: 1.3rem; letter-spacing: 0; line-height: .9; text-align: right }
.amg-cfoto { justify-self: center; align-self: center; width: 62%; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--papel); background: var(--azul-2) center / cover no-repeat; display: grid; place-items: center; font: 900 4rem var(--display); color: var(--papel) }
.amg-nombre { font: 900 clamp(2rem, 6vw, 2.8rem)/.95 var(--display); text-align: center; overflow-wrap: anywhere }
.amg-datos { display: flex; justify-content: center; gap: 14px; font-family: var(--etiqueta); letter-spacing: .1em; opacity: .9; margin-top: 6px; flex-wrap: wrap }
.amg-sello { position: absolute; right: 12px; top: 26%; width: 86px; height: 86px; border-radius: 50%; border: 3px dashed var(--papel); display: grid; place-items: center; text-align: center; font-family: var(--etiqueta); line-height: 1; letter-spacing: .06em; transform: rotate(-14deg); background: var(--azul); box-shadow: 0 0 0 4px var(--azul) }
.amg-punky { position: absolute; left: -4px; bottom: 58px; width: 96px; transform: rotate(8deg) }
.amg-muro { margin-top: 40px; background: #f6ecdc; border-radius: 28px; padding: 24px 20px 28px; display: grid; gap: 18px }
.amg-muro-cab { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap }
.amg-muro-cab h2 { color: var(--azul); margin: 0 }
.amg-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 18px }
.amg-polaroid { margin: 0; background: var(--papel); padding: 10px 10px 12px; border-radius: 6px; box-shadow: 0 10px 16px -10px rgba(34,48,79,.45); position: relative; display: grid; gap: 8px; transform: rotate(var(--giro, 0deg)) }
.amg-polaroid::before { content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 20px; translate: -50% 0; background: rgba(101,183,231,.55); transform: rotate(-3deg) }
.amg-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; display: block }
.amg-polaroid b { font: 900 1.45rem/1 var(--display); color: var(--tinta); display: block }
.amg-polaroid small { font-family: var(--etiqueta); letter-spacing: .1em; color: var(--tinta-suave); font-size: .95rem }
.amg-vacio { grid-column: 1 / -1; color: var(--tinta-suave); margin: 0 }
@media (max-width: 820px) {
  .amg-alta { grid-template-columns: minmax(0, 1fr) }
  .amg-carnet-caja { position: static; order: -1; max-width: 360px; justify-self: center; width: 100% }
  .amg-fila { grid-template-columns: minmax(0, 1fr) }
}

/* (03-11) 🐶/🐱 Modo perro · modo gato: el interruptor de la cabecera y el tinte de la página. */
.acciones { display: flex; align-items: center; justify-content: flex-end; gap: 6px }
.modo-sel { display: flex; background: var(--azul-4); border-radius: 999px; padding: 3px; gap: 2px }
.modo-sel button { border: 0; background: transparent; border-radius: 999px; width: 34px; height: 34px; font-size: 1.15rem; cursor: pointer; line-height: 1 }
.modo-sel button[aria-pressed="true"] { background: var(--papel); box-shadow: 0 2px 6px rgba(21,60,135,.25) }
.modo-sel button:focus-visible { outline: 3px solid var(--azul-2); outline-offset: 2px }
html.modo-gato body { background: #f6f0fb }
html.modo-perro body { background: #eef7ff }

/* (03-11) Página 404: «Punky se comió esta página». */
.pagina-404 { padding-block: 56px 80px }
.pagina-404 .envoltura { display: grid; grid-template-columns: minmax(180px, 320px) minmax(0, 1fr); gap: 32px; align-items: center }
.p404-punky { width: 100%; max-width: 320px; animation: lame 1.6s ease-in-out infinite; transform-origin: 50% 100% }
.p404-texto { display: grid; gap: 14px }
.p404-texto h1 { color: var(--azul); font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: .95; margin: 0 }
.p404-texto .botones { display: flex; gap: 10px; flex-wrap: wrap }
@keyframes lame { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(-3deg) scale(1.02) } }
@media (max-width: 700px) { .pagina-404 .envoltura { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center } .p404-texto .botones { justify-content: center } }

/* (03-11) La sorpresa: Punky cruza la pantalla. */
.punky-corre { position: fixed; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: -180px; width: 150px; z-index: 70; pointer-events: none; animation: cruza 3.4s linear forwards }
.punky-corre img { width: 100%; display: block; animation: trota .3s ease-in-out infinite alternate }
.punky-corre .guau { position: absolute; top: -34px; left: 60%; background: var(--papel); border: 3px solid var(--tinta); border-radius: 14px; padding: 4px 10px 2px; font-family: var(--etiqueta); letter-spacing: .06em; font-size: 1.2rem; color: var(--tinta); white-space: nowrap }
.punky-corre.quieto { left: 50%; translate: -50% 0; animation: none }
.punky-corre.quieto img { animation: none }
@keyframes cruza { to { left: calc(100% + 40px) } }
@keyframes trota { from { transform: translateY(0) rotate(-2deg) } to { transform: translateY(-10px) rotate(2deg) } }
@media (prefers-reduced-motion: reduce) { .p404-punky { animation: none } }
@media (max-width: 700px) {
  .p404-punky { max-width: 190px }
  .modo-sel button { width: 28px; height: 28px; font-size: .95rem }
  .punky-corre { width: 110px }
}

/* (03-11) 🧰 Kit para tiendas, dentro de «Distribuye Punky». */
.kit { margin-top: 28px; background: var(--papel); border-radius: 24px; padding: 22px; display: grid; gap: 14px; box-shadow: 0 10px 30px -18px rgba(21,60,135,.35) }
.kit-cabeza h3 { color: var(--azul); margin: 0; font-size: 1.8rem }
.kit-cabeza p { margin: 4px 0 0; color: var(--tinta-suave) }
.kit-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px }
.kit-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--azul-4); color: var(--tinta); text-decoration: none; min-width: 0 }
.kit-item:hover, .kit-item:focus-visible { background: var(--azul-3) }
.kit-icono { font-size: 1.6rem }
.kit-texto { display: grid; gap: 2px; min-width: 0; flex: 1 }
.kit-texto b { font-weight: 900; color: var(--azul); overflow-wrap: anywhere }
.kit-texto small { color: var(--tinta-suave); font-size: .9rem; overflow-wrap: anywhere }
.kit-bajar { font-family: var(--etiqueta); letter-spacing: .08em; color: var(--azul); white-space: nowrap }

/* (03-11) 📚 Guía Punky: artículos cortos para Google, con su índice y un adelanto en el inicio. */
.pagina-guia { padding-block: 32px 64px; display: grid; gap: 40px }
.guia-articulo { max-width: 760px; display: grid; gap: 14px }
.guia-articulo h1 { color: var(--azul); font-size: clamp(2.2rem, 5.6vw, 3.4rem); line-height: .98; margin: 0; text-wrap: balance }
.guia-bajada { font-size: 1.3rem; color: var(--tinta-suave); margin: 0 }
.guia-cuerpo { display: grid; gap: 12px; font-size: 1.2rem; line-height: 1.55 }
.guia-cuerpo h2 { color: var(--azul); font-size: 1.8rem; margin: 18px 0 0 }
.guia-cuerpo p, .guia-cuerpo ul { margin: 0 }
.guia-cuerpo ul { padding-left: 22px; display: grid; gap: 8px }
.guia-cuerpo strong { font-weight: 900 }
.nota-guia { background: var(--azul-4); border-radius: 14px; padding: 12px 16px; font-size: 1.05rem; color: var(--tinta-suave) }
.guia-recomienda { margin-top: 18px; display: grid; gap: 12px }
.guia-recomienda h2 { color: var(--azul); margin: 0; font-size: 1.8rem }
.guia-productos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px }
.guia-producto { background: var(--papel); border-radius: 18px; padding: 16px; display: grid; gap: 6px; box-shadow: 0 10px 24px -18px rgba(21,60,135,.4) }
.guia-producto b { color: var(--azul); font-weight: 900; font-size: 1.3rem }
.guia-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px }
.guia-mas { color: var(--azul); margin: 0 0 14px }
.guia-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px }
.guia-tarjeta { background: var(--papel); border-radius: 20px; padding: 18px; display: grid; gap: 8px; align-content: start; text-decoration: none; color: var(--tinta); box-shadow: 0 10px 24px -18px rgba(21,60,135,.4); min-width: 0 }
.guia-tarjeta b { color: var(--azul); font-weight: 900; font-size: 1.35rem; line-height: 1.1 }
.guia-tarjeta:hover b, .guia-tarjeta:focus-visible b { text-decoration: underline }
.guia-leer { font-family: var(--etiqueta); letter-spacing: .08em; color: var(--azul) }
.guia-teaser { padding-block: 24px 8px; display: grid; gap: 16px }

/* (03-11) 🎮 Momentos de producto: el juego que se abre desde la ficha (cocinar Tocineticas, pescar Salmoncitos). */
.mom-velo { position: fixed; inset: 0; z-index: 80; background: rgba(21, 60, 135, .6); display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)) }
.mom-caja { position: relative; width: min(940px, 100%); height: min(560px, calc(100dvh - 40px)); background: var(--papel); border-radius: 26px; overflow: hidden; display: grid; grid-template-columns: minmax(200px, 270px) 1fr }
.mom-cerrar { position: absolute; top: 10px; right: 10px; z-index: 12; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--papel); box-shadow: 0 2px 10px rgba(21,60,135,.25); font-size: 1.1rem; cursor: pointer; color: var(--azul) }
.mom-info { padding: 24px 20px; display: grid; align-content: start; gap: 12px; z-index: 3; position: relative }
.mom-info h2 { color: var(--azul); margin: 0; font-size: 2rem; line-height: 1 }
.mom-cuenta { font-family: var(--etiqueta); letter-spacing: .08em; color: var(--azul) }
.mom-cuenta b { font-family: var(--display); font-weight: 900; font-size: 2.8rem; display: block; line-height: .9 }
.mom-ayuda { margin: 0; color: var(--tinta-suave) }
.mom-fin { display: grid; gap: 10px }
.mom-fin p { margin: 0 }
.mom-sello { font-family: var(--etiqueta); font-size: 1.7rem; letter-spacing: .04em; color: var(--papel); background: var(--azul); border-radius: 14px; padding: 10px 14px 6px; transform: rotate(-3deg); justify-self: start }
.mom-botones { display: flex; gap: 8px; flex-wrap: wrap }
.mom-escena { position: relative; overflow: hidden; user-select: none; touch-action: none }
.mom-punky { position: absolute; right: 8px; bottom: -6px; width: 170px; transform: translateY(115%); transition: transform .6s cubic-bezier(.2,1.3,.4,1); z-index: 9; pointer-events: none }
.mom-globo { position: absolute; right: 130px; bottom: 190px; background: var(--papel); border: 3px solid var(--tinta); border-radius: 16px; padding: 6px 12px 4px; font-family: var(--etiqueta); font-size: 1.2rem; letter-spacing: .05em; z-index: 10; opacity: 0; transform: scale(.6); transition: .35s .4s; pointer-events: none }
.listo .mom-punky { transform: translateY(0) }
.listo .mom-globo { opacity: 1; transform: scale(1) }
.mom-tocineticas { --fondo-mom: #fbe2e8 } .mom-salmoncitos { --fondo-mom: #ddeffb }
.mom-tocineticas .mom-info, .mom-salmoncitos .mom-info { background: var(--fondo-mom) }
.mom-sarten { position: absolute; left: 50%; top: 42%; width: 260px; height: 260px; translate: -45% -50%; border-radius: 50%; background: radial-gradient(circle at 45% 40%, #4a4f5c, #23262e 70%); box-shadow: 0 0 0 12px #353943, 0 16px 28px rgba(0,0,0,.25) }
.mom-sarten::after { content: ""; position: absolute; left: 96%; top: 44%; width: 130px; height: 26px; border-radius: 12px; background: #2a2d35 }
.mom-sarten.cerca { box-shadow: 0 0 0 12px #353943, 0 0 0 20px rgba(255,170,60,.55), 0 16px 28px rgba(0,0,0,.25) }
.mom-tabla { position: absolute; left: 50%; translate: -50% 0; bottom: 16px; width: 190px; height: 120px; background: linear-gradient(#e0b27c, #c9945c); border-radius: 16px }
.mom-tira { position: absolute; width: 56px; cursor: grab; touch-action: none; z-index: 5; transition: transform .3s; filter: drop-shadow(0 4px 4px rgba(0,0,0,.18)) }
.mom-tira img { display: block; width: 100%; pointer-events: none }
.mom-tira.arrastrando { cursor: grabbing; transition: none; z-index: 20 }
.mom-tira.cocida { filter: saturate(1.3) brightness(.82) drop-shadow(0 2px 2px rgba(0,0,0,.2)) }
.mom-vapor { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.9); pointer-events: none; z-index: 7; animation: momVapor 1.1s ease-out forwards }
@keyframes momVapor { from { transform: translateY(0) scale(.5); opacity: .9 } to { transform: translateY(-80px) scale(1.6); opacity: 0 } }
.mom-cielo { position: absolute; inset: 0 0 auto; height: 100px; background: linear-gradient(#e6f5fd, #cbeaf9) }
.mom-mar { position: absolute; inset: 96px 0 0; background: linear-gradient(#6fc3ee, #2d7fc6 60%, #1f5aa0); border-top: 6px solid #9bd5f2 }
.mom-plato { position: absolute; left: 14px; top: 34px; width: 150px; height: 42px; border-radius: 0 0 80px 80px; background: var(--papel); border: 4px solid var(--tinta); z-index: 4 }
.mom-pez { position: absolute; width: 58px; cursor: pointer; z-index: 3; background: none; border: 0; padding: 0; touch-action: manipulation }
.mom-pez img { display: block; width: 100%; pointer-events: none }
.mom-pez.atrapado { transition: left .6s ease-in, top .6s cubic-bezier(.4,-0.6,.6,1), transform .6s; z-index: 9; pointer-events: none }
.mom-sedal { position: absolute; top: 0; width: 2px; background: var(--tinta); z-index: 8; transition: height .25s ease-out; pointer-events: none }
@media (max-width: 700px) {
  .mom-caja { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(380px, 1fr); height: calc(100dvh - 24px); overflow-y: auto }
  .mom-escena { min-height: 380px }
  .mom-info { padding: 16px 60px 10px 16px; gap: 6px }
  .mom-info h2 { font-size: 1.5rem }
  .mom-cuenta b { font-size: 2rem; display: inline; margin-right: 6px }
  .mom-sarten { width: 200px; height: 200px; top: 38% } .mom-sarten::after { width: 90px; height: 20px }
  .mom-punky { width: 120px } .mom-globo { right: 92px; bottom: 140px; font-size: 1rem }
}
@media (prefers-reduced-motion: reduce) { .mom-punky, .mom-globo { transition: none } }

/* (03-11) Punky y la gata, sin tapar los empaques: «Separación» los corre hacia afuera (% de su ancho) y «detrás» los
   pone por debajo del abanico. Se eligen en «Fotos de la web → Portada». */
:root { --sep-pj: 0 }
.h3-punky { translate: calc(var(--sep-pj) * -1%) 0 }
.h3-gata { translate: calc(var(--sep-pj) * 1%) 0 }
.pj-detras .h3-punky, .pj-detras .h3-gata { z-index: 1 }
.pj-detras .h3-abanico { z-index: 3 }
.h3-escena { overflow-x: clip }
.punky-ig { display: inline-flex; align-items: center; gap: 10px; justify-self: start; align-self: start; width: fit-content }
.punky-ig svg { width: 22px; height: 22px; flex: none }

/* (03-11) Temas: piezas que caen (hallacas, panes de jamón, corazones…), esferas de Navidad y cumpleaños. */
.nieve i.pieza { background: none; box-shadow: none; border-radius: 0; height: auto }
.nieve i.pieza span { display: block; animation: giraPieza linear infinite }
.nieve i.pieza svg { display: block; width: 100%; height: auto }
@keyframes giraPieza { to { transform: rotate(360deg) } }
.guirnalda { position: absolute; inset: 0 0 auto; height: 120px; pointer-events: none; z-index: 5 }
.guirnalda-cuerda { position: absolute; inset: 0 0 auto; width: 100%; height: 40px }
.esfera { position: absolute; top: 14px; width: 2px; height: var(--largo); background: #2e9a5e; transform-origin: 50% 0; animation: meceEsfera 3.2s ease-in-out infinite alternate }
.esfera::after { content: ""; position: absolute; left: 50%; bottom: -24px; width: 26px; height: 26px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.8) 0 12%, transparent 30%), var(--c); border: 2px solid #22304f }
.esfera::before { content: ""; position: absolute; left: 50%; bottom: -2px; width: 10px; height: 6px; translate: -50% 0; background: #c99400; border-radius: 2px; z-index: 1 }
@keyframes meceEsfera { from { transform: rotate(-6deg) } to { transform: rotate(6deg) } }
.tema-carnaval .anuncio { background: linear-gradient(90deg, #e7707a, #f39219, #ffd23f, #2e9a5e, #65b7e7, #8b6fd6) }
.tema-amor .anuncio { background: #d63a6a }
.tema-madres .anuncio { background: #d96ba0 }
.tema-perro .anuncio { background: #f39219 }
.tema-gato .anuncio { background: #8b6fd6 }
.tema-halloween .anuncio { background: #e8701a }
.anuncio.anuncio-cumple { background: linear-gradient(90deg, #8b6fd6, #e7707a, #f39219) }
.cinta-cumple { display: block; text-align: center; padding: 8px 16px; background: #fff3c4; color: var(--tinta); font-family: var(--etiqueta); letter-spacing: .06em; font-size: 1.05rem; text-decoration: none }
.cinta-cumple b { font-family: var(--display); font-weight: 900; letter-spacing: 0 }
@media (max-width: 600px) { .guirnalda { height: 90px } .esfera::after { width: 18px; height: 18px; bottom: -16px } }
@media (prefers-reduced-motion: reduce) { .esfera { animation: none } }