/* ============================================================================
   TEMPORADAS DEL SITIO — el acento de la temporada (ver _temporadas.php)
   ============================================================================

   Solo se carga cuando hay una temporada activa. Reglas que no se rompen:

   1. LA IDENTIDAD NO SE TOCA. Nada de aca cambia --brand, la tipografia ni
      la estructura: los colores de la temporada viven en --tp-* y solo los
      usan las piezas decorativas.
   2. NADA OCUPA LUGAR. Todo va en capas absolutas o fijas (sin CLS), con
      pointer-events none: nunca tapa un boton ni recibe un toque.
   3. DETRAS DEL TEXTO. En la portada la capa va antes del contenido: una pieza
      que se cruza con el texto queda detras, nunca encima.
   4. SE DETIENE SOLA. Toda animacion tiene un numero de vueltas y termina en
      su pose de reposo. El estado SIN animar es el de reposo: con
      prefers-reduced-motion la pieza se ve quieta y completa.
   5. SOLO transform Y opacity (y stroke-dashoffset en los trazos).
   ============================================================================ */

/* ---------------------------------------------------------------- paletas */
.tp-on { --tp-1: var(--brand); --tp-2: #fff; --tp-3: var(--brand2, #f59e0b); --tp-4: #f8fafc; --tp-osc: #0f172a; --tp-iter: 3; }
.tp-p-patria      { --tp-1: #00a3d9; --tp-2: #ffffff; --tp-3: #0a5fa8; --tp-4: #e8f6fc; --tp-osc: #0a3d66; }
.tp-p-navidad     { --tp-1: #c62828; --tp-2: #1f7a3a; --tp-3: #f2c14e; --tp-4: #fff7ef; --tp-osc: #5c1414; }
.tp-p-anionuevo   { --tp-1: #d4a017; --tp-2: #c0c4cc; --tp-3: #f6d775; --tp-4: #fff8e1; --tp-osc: #1e293b; }
.tp-p-halloween   { --tp-1: #f97316; --tp-2: #6d28d9; --tp-3: #fbbf24; --tp-4: #fff7ed; --tp-osc: #1f1530; }
.tp-p-amor        { --tp-1: #e11d48; --tp-2: #fb7185; --tp-3: #fda4af; --tp-4: #fff1f2; --tp-osc: #881337; }
.tp-p-madre       { --tp-1: #db2777; --tp-2: #f9a8d4; --tp-3: #a78bfa; --tp-4: #fdf2f8; --tp-osc: #831843; }
.tp-p-padre       { --tp-1: #1e3a8a; --tp-2: #0f766e; --tp-3: #94a3b8; --tp-4: #eff6ff; --tp-osc: #172554; }
.tp-p-nino        { --tp-1: #f59e0b; --tp-2: #10b981; --tp-3: #3b82f6; --tp-4: #fef3c7; --tp-osc: #7c2d12; }
.tp-p-santa       { --tp-1: #7c6aa8; --tp-2: #b9a36a; --tp-3: #6b8e5a; --tp-4: #f6f2fb; --tp-osc: #3b2f5c; }
.tp-p-trabajo     { --tp-1: var(--brand); --tp-2: #ffffff; --tp-3: #f59e0b; --tp-4: #f8fafc; --tp-osc: #334155; }
.tp-p-bf          { --tp-1: #111827; --tp-2: #facc15; --tp-3: #ef4444; --tp-4: #f3f4f6; --tp-osc: #0b0b0f; }
.tp-p-aniversario { --tp-1: var(--brand); --tp-2: #fde68a; --tp-3: #ec4899; --tp-4: #fff7ed; --tp-osc: #1e293b; }
.tp-i-sutil { --tp-iter: 1; }

/* ------------------------------------------------ ambientación realista de portada */
.hero-bg { position: relative; }
.tp-on .hero-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  transition: opacity .6s ease;
}
.tp-on.tp-p-halloween .hero-bg::before {
  background:
    radial-gradient(ellipse 55% 45% at 10% 92%, rgba(249, 115, 22, .13) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 90% 88%, rgba(249, 115, 22, .15) 0%, transparent 70%),
    radial-gradient(ellipse 65% 35% at 50% 0%, rgba(109, 40, 217, .09) 0%, transparent 75%);
}
.tp-on.tp-p-navidad .hero-bg::before {
  background:
    radial-gradient(ellipse 60% 50% at 88% 85%, rgba(242, 193, 78, .15) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 12% 85%, rgba(198, 40, 40, .09) 0%, transparent 70%),
    radial-gradient(ellipse 70% 30% at 50% 0%, rgba(31, 122, 58, .07) 0%, transparent 75%);
}
.tp-on.tp-p-anionuevo .hero-bg::before {
  background:
    radial-gradient(ellipse 65% 55% at 50% 20%, rgba(212, 160, 23, .16) 0%, transparent 75%),
    radial-gradient(ellipse 50% 45% at 85% 85%, rgba(246, 215, 117, .12) 0%, transparent 70%);
}
.tp-on.tp-p-amor .hero-bg::before, .tp-on.tp-p-madre .hero-bg::before {
  background:
    radial-gradient(ellipse 60% 50% at 85% 82%, rgba(225, 29, 72, .1) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 15% 85%, rgba(251, 113, 133, .1) 0%, transparent 70%);
}
.tp-on.tp-p-bf .hero-bg::before {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(250, 204, 21, .09) 0%, transparent 75%),
    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(239, 68, 68, .07) 0%, transparent 70%);
}
.tp-on.tp-p-patria .hero-bg::before {
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(0, 163, 217, .1) 0%, transparent 75%),
    radial-gradient(ellipse 50% 40% at 88% 85%, rgba(10, 95, 168, .08) 0%, transparent 70%);
}
.tp-on.tp-p-gamer .hero-bg::before {
  background:
    radial-gradient(ellipse 60% 45% at 15% 85%, rgba(124, 58, 237, .14) 0%, transparent 70%),
    radial-gradient(ellipse 60% 45% at 85% 85%, rgba(6, 182, 212, .12) 0%, transparent 70%);
}

/* Color por elemento (si el dueno lo cambia). */
.tp-col-marca  { --tp-1: var(--brand); --tp-3: var(--brand2, var(--brand)); }
.tp-col-dorado { --tp-1: #d4a017; --tp-2: #fff8e1; --tp-3: #f6c544; }
.tp-col-blanco { --tp-1: #ffffff; --tp-2: #e2e8f0; --tp-3: #cbd5e1; }

/* Los colores dentro de los SVG van por clase: un atributo fill="var()" no funciona. */
:is(.tp-el, .tp-cruce) .c1 { fill: var(--tp-1); } :is(.tp-el, .tp-cruce) .c2 { fill: var(--tp-2); } .tp-el .c3 { fill: var(--tp-3); } .tp-el .c4 { fill: var(--tp-4); }
.tp-el .k1 { stroke: var(--tp-1); } .tp-el .k2 { stroke: var(--tp-2); } .tp-el .k3 { stroke: var(--tp-3); } .tp-el .k4 { stroke: var(--tp-4); }
.tp-el .k0 { stroke: rgba(15, 23, 42, .16); }
:is(.tp-el, .tp-p, .tp-cruce) .co { fill: #e9b730; } :is(.tp-el, .tp-p, .tp-cruce) .cw { fill: #ffd36b; } :is(.tp-el, .tp-p, .tp-cruce) .cr { fill: #ef4444; } :is(.tp-el, .tp-p, .tp-cruce) .cg { fill: #34d399; } :is(.tp-el, .tp-p, .tp-cruce) .cb { fill: var(--brand); }
.tp-p-patria .tp-e-banderines .k3 { stroke: #94a3b8; }

/* ---------------------------------------------------------------- base */
.tp-capa, .tp-capa *, .tp-cielo, .tp-cielo * { pointer-events: none; }
.tp-el { position: absolute; display: block; line-height: 0; }
.tp-el svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Especificidad 0 (:where): cada clase animada puede pedir view-box si lo necesita. */
:where(.tp-el svg *, .tp-cruce svg *, .tp-saludo-ico svg *) { transform-box: fill-box; }
.tp-llamita { transform-box: view-box; }
/* Lo que trae un atributo transform (rotate con centro) se calcula sobre el lienzo: con fill-box se descoloca. */
:where(.tp-el svg [transform], .tp-cruce svg [transform], .tp-p svg [transform], .tp-saludo-ico svg [transform]) { transform-box: view-box; }

/* ---------------------------------------------------------------- cabecera */
.tp-capa-cabecera { position: absolute; inset: 0; z-index: 1; }
.tp-d-cabecera { left: 0; right: 0; top: 100%; height: 26px; transition: opacity .25s ease, transform .25s ease; }
.tp-d-cabecera.tp-e-luces { height: 28px; }
.tp-d-cabecera.tp-e-nieve { top: calc(100% - 7px); height: 18px; filter: drop-shadow(0 2px 2px rgba(15, 23, 42, .08)); }
@media (min-width: 768px) {
  .tp-d-cabecera { height: 34px; }
  .tp-d-cabecera.tp-e-luces { height: 36px; }
  .tp-d-cabecera.tp-e-nieve { height: 22px; }
}
.tp-scroll .tp-d-cabecera, .tp-scroll .tp-d-cabecera_izq.tp-e-arana, .tp-scroll .tp-d-cabecera_der.tp-e-arana { opacity: 0; transform: translateY(-10px); }
.tp-d-cabecera_izq, .tp-d-cabecera_der { top: 0; width: 44px; height: 44px; transition: opacity .25s ease, transform .25s ease; }
.tp-d-cabecera_izq { left: 0; }
.tp-d-cabecera_der { right: 0; }
@media (min-width: 768px) { .tp-d-cabecera_izq, .tp-d-cabecera_der { width: 64px; height: 64px; } }
.tp-d-cabecera_der.tp-e-telarana svg, .tp-d-heroe_der.tp-e-telarana svg { transform: scaleX(-1); }
.tp-d-cabecera_izq.tp-e-telarana, .tp-d-cabecera_der.tp-e-telarana { opacity: .7; }
/* La arana de la cabecera cuelga del borde de abajo, pegada al costado (fuera del texto). */
.tp-e-arana.tp-d-cabecera_izq, .tp-e-arana.tp-d-cabecera_der { top: 100%; width: 22px; height: 66px; }
.tp-e-arana.tp-d-cabecera_izq { left: 6px; } .tp-e-arana.tp-d-cabecera_der { right: 6px; }
.tp-e-arana.tp-v-camina.tp-d-cabecera_izq, .tp-e-arana.tp-v-camina.tp-d-cabecera_der { top: calc(100% - 10px); width: 30px; height: 22px; }
.tp-e-esferas.tp-d-cabecera_izq, .tp-e-esferas.tp-d-cabecera_der { top: 70%; height: 72px; width: 54px; }
.tp-e-muerdago.tp-d-cabecera_izq, .tp-e-muerdago.tp-d-cabecera_der { top: 60%; width: 40px; height: 40px; }
.tp-d-cabecera_der.tp-e-esferas, .tp-d-cabecera_der.tp-e-muerdago { right: 12px; }
.tp-d-cabecera_izq.tp-e-esferas, .tp-d-cabecera_izq.tp-e-muerdago { left: 12px; }

/* ---------------------------------------------------------------- logo */
header a:has(> .tp-capa-logo), a:has(> .tp-capa-logo) { position: relative; }
.tp-capa-logo { position: absolute; inset: 0; z-index: 1; }
.tp-d-logo { --tl: 26px; top: -10px; right: -12px; width: var(--tl); height: var(--tl); }
.tp-d-logo.tp-t-s { --tl: 20px; } .tp-d-logo.tp-t-l { --tl: 34px; }
@media (min-width: 768px) { .tp-d-logo { --tl: 32px; } .tp-d-logo.tp-t-s { --tl: 24px; } .tp-d-logo.tp-t-l { --tl: 42px; } }
/* Los sombreros van arriba a la izquierda, inclinados, como puestos sobre la primera letra. */
.tp-d-logo:is(.tp-e-gorro_santa, .tp-e-sombrero_bruja, .tp-e-gorro_fiesta) { right: auto; left: -10px; top: -14px; width: calc(var(--tl) * 1.25); rotate: -16deg; }
.tp-d-logo.tp-e-estrellas_orbita { top: 50%; right: -8px; margin-top: calc(var(--tl) * -.6); width: calc(var(--tl) * 1.2); height: calc(var(--tl) * 1.2); }
.tp-d-logo.tp-e-bigote { top: auto; bottom: -4px; right: auto; left: 30%; width: calc(var(--tl) * 1.4); height: calc(var(--tl) * .55); }
.tp-d-logo.tp-e-corbata { top: auto; bottom: -14px; right: -4px; }
.tp-d-logo.tp-e-telarana { top: -4px; left: -4px; right: auto; width: calc(var(--tl) * 1.4); height: calc(var(--tl) * 1.4); opacity: .7; }
.tp-d-logo.tp-e-bandera { width: calc(var(--tl) * 1.3); }
.tp-d-logo.tp-e-brillo { inset: 0; width: auto; height: auto; overflow: hidden; border-radius: 6px; }
.tp-e-brillo::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); mix-blend-mode: soft-light; transform: translateX(-160%) skewX(-12deg); opacity: 0; }
.tp-e-brillo.tp-v-dorado::after { background: linear-gradient(100deg, transparent, rgba(246, 199, 68, .9), transparent); mix-blend-mode: soft-light; }
.tp-e-brillo.tp-v-calabaza { overflow: visible; }
.tp-e-brillo.tp-v-calabaza::after { inset: -30% -10%; width: auto; transform: none; background: radial-gradient(closest-side, rgba(249, 115, 22, .38), transparent); mix-blend-mode: multiply; opacity: .55; }

/* ---------------------------------------------------------------- portada */
.tp-capa-heroe { position: absolute; inset: 0; overflow: hidden; }
.tp-capa-heroe .tp-el { --tw: 80px; --k: 0; }
.tp-capa-heroe .tp-t-s { --tw: 60px; } .tp-capa-heroe .tp-t-l { --tw: 104px; }
.tp-d-heroe_izq, .tp-d-heroe_der { width: var(--tw); height: var(--tw); bottom: 10px; }
/* Escritorio: en el margen de los costados, fuera de la columna de texto. */
.tp-d-heroe_der { right: max(10px, calc((100% - 1152px) / 2 - var(--tw) - 12px - var(--k) * (var(--tw) + 8px))); }
.tp-d-heroe_izq { left:  max(10px, calc((100% - 1152px) / 2 - var(--tw) - 12px - var(--k) * (var(--tw) + 8px))); }
@media (max-width: 1365px) {
  .tp-d-heroe_der { right: calc(10px + var(--k) * (var(--tw) + 8px)); }
  .tp-d-heroe_izq { left: calc(10px + var(--k) * (var(--tw) + 8px)); }
  .tp-capa-heroe .tp-el { --tw: 64px; } .tp-capa-heroe .tp-t-s { --tw: 50px; } .tp-capa-heroe .tp-t-l { --tw: 80px; }
}
/* Pedestal de vidrio satinado para emblemas y condecoraciones del héroe */
.tp-capa-heroe :is(.tp-e-laurel, .tp-e-lazo_rosa, .tp-e-bandera, .tp-e-control, .tp-e-copas, .tp-e-sobre, .tp-e-medalla) {
  background: radial-gradient(130% 130% at 30% 20%, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.72) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.18), inset 0 1.5px 2px #ffffff;
  filter: drop-shadow(0 6px 16px rgba(15, 23, 42, 0.14));
}
/* Telefono: una sola pieza, chica, arriba a la derecha (al lado de la cinta del saludo). */
@media (max-width: 639px) {
  /* A 40px del borde: el costado queda libre para la arana que cuelga de la cabecera. */
  .tp-capa-heroe :is(.tp-d-heroe_izq, .tp-d-heroe_der) { --tw: 46px; top: 6px; bottom: auto; left: auto; right: 40px; width: 46px; height: 46px; }
  .tp-capa-heroe .tp-e-cinta { right: 0 !important; }
  .tp-capa-heroe :is(.tp-d-heroe_izq, .tp-d-heroe_der) ~ :is(.tp-d-heroe_izq, .tp-d-heroe_der) { display: none; }
}
/* Lo que se asoma sale del borde de abajo con contacto realista */
.tp-capa-heroe :is(.tp-e-esqueleto, .tp-e-flores, .tp-e-calabaza, .tp-e-palma, .tp-e-arbolito, .tp-e-pastel) { bottom: 0 !important; }
.tp-capa-heroe :is(.tp-e-calabaza, .tp-e-arbolito, .tp-e-pastel)::after {
  content: ""; position: absolute; bottom: -2px; left: 15%; right: 15%; height: 8px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.38) 0%, transparent 70%);
  z-index: -1; pointer-events: none;
}
.tp-capa-heroe .tp-e-arana { top: 0; bottom: auto; height: calc(var(--tw) * 1.5); width: calc(var(--tw) * .5); }
.tp-capa-heroe .tp-e-cinta { top: 0; bottom: auto; }
.tp-e-banderines { filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.18)); }
/* Fondo de la portada (detras de todo). */
.tp-d-heroe_fondo { inset: 0; }
.tp-d-heroe_fondo.tp-e-luna { inset: auto; top: 8%; right: 6%; width: min(240px, 34%); height: auto; aspect-ratio: 4 / 3; opacity: .9; }
.tp-d-heroe_fondo.tp-e-estrellas { inset: auto; top: 10%; right: 8%; width: 110px; height: 104px; opacity: .8; }
.tp-d-heroe_fondo.tp-e-mensaje { inset: auto; right: 3%; bottom: 4%; width: min(620px, 72%); height: auto; aspect-ratio: 5 / 1; }
@media (max-width: 639px) {
  .tp-d-heroe_fondo.tp-e-luna { top: auto; bottom: 4%; right: 4%; width: 120px; opacity: .55; }
  /* En el telefono el texto de la portada llega hasta abajo: el mensaje de fondo no tiene lugar. */
  .tp-d-heroe_fondo.tp-e-mensaje { display: none; }
  .tp-d-heroe_fondo.tp-e-estrellas { display: none; }
}

/* ---------------------------------------------------------------- pie */
footer:has(> .tp-capa-pie) { position: relative; }
.tp-capa-pie { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 1; }
.tp-d-pie { --tw: 64px; bottom: -2px; right: calc(24px + var(--k, 0) * 72px); width: var(--tw); height: var(--tw); }
.tp-d-pie:is(.tp-e-banderines, .tp-e-luces) { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 30px; }
.tp-d-pie.tp-e-pinos { left: 0; right: 0; bottom: -1px; width: auto; height: 40px; }
.tp-pino { fill: var(--ink, #0f172a); }
@media (min-width: 768px) { .tp-d-pie.tp-e-pinos { height: 56px; } }

/* ---------------------------------------------------------------- aviso y saludo */
.tp-aviso { position: relative; overflow: hidden; }
.tp-aviso::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--tp-1), var(--tp-3), var(--tp-1)); opacity: .9; }
.tp-franja-oscura { background: #0b0b0f !important; color: #fff; }
.tp-franja-oscura::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(100deg, transparent, rgba(250, 204, 21, .28), transparent); transform: translateX(-120%); animation: tp-barrido 2.6s ease-in-out .6s 2 both; }
.tp-franja-oscura::after { background: linear-gradient(90deg, #facc15, #ef4444, #facc15); }
.tp-franja-paleta { background: linear-gradient(90deg, color-mix(in srgb, var(--tp-3) 70%, #000), color-mix(in srgb, var(--tp-1) 62%, #000)) !important; }
.tp-franja-rayas { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tp-1) 70%, #000) 0 14px, color-mix(in srgb, var(--tp-3) 70%, #000) 14px 28px) !important; }
.tp-aviso > * { position: relative; z-index: 1; }
.tp-aviso .tp-el { position: relative; }
.tp-e-cuenta { display: inline-flex; align-items: center; gap: 6px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tp-d-aviso.tp-e-cuenta { padding: 2px 10px; border-radius: 999px; background: rgba(0, 0, 0, .22); }
.tp-cuenta-n { font-weight: 700; }
.tp-capa-heroe .tp-e-cuenta { width: auto; height: auto; top: 10px; bottom: auto; padding: 8px 12px; border-radius: 12px; background: #fff; color: var(--tp-osc); font: 600 13px/1.3 inherit; box-shadow: 0 6px 18px rgba(15, 23, 42, .12); flex-direction: column; align-items: flex-start; gap: 0; }
.tp-capa-heroe .tp-e-cuenta .tp-cuenta-n { font-size: 18px; color: var(--tp-1); }
.tp-saludo-ico { display: inline-block; width: 18px; height: 16px; vertical-align: -3px; }
.tp-saludo-ico svg { width: 100%; height: 100%; overflow: visible; }
.tp-saludo-ico .c1 { fill: var(--tp-1); } .tp-saludo-ico .c2 { fill: var(--tp-2); } .tp-saludo-ico .c3 { fill: var(--tp-3); } .tp-saludo-ico .c4 { fill: var(--tp-4); }
.tp-saludo-ico .k1 { stroke: var(--tp-1); } .tp-saludo-ico .k2 { stroke: var(--tp-2); } .tp-saludo-ico .k3 { stroke: var(--tp-3); }

/* ---------------------------------------------------------------- piezas especiales */
/* Cinta: en la computadora, banda diagonal en la esquina; en el telefono, marcapaginas sin texto. */
.tp-e-cinta { --cw: 184px; width: var(--cw) !important; height: var(--cw) !important; overflow: hidden; }
.tp-e-cinta.tp-d-heroe_der { right: 0 !important; } .tp-e-cinta.tp-d-heroe_izq { left: 0 !important; }
.tp-cinta-t { position: absolute; top: 70px; right: -42px; width: 210px; padding: 7px 0; text-align: center; transform: rotate(45deg); font: 700 12px/1.2 inherit; letter-spacing: .04em; text-transform: uppercase; color: var(--tp-osc); background: var(--tp-1); box-shadow: 0 4px 12px rgba(15, 23, 42, .15); white-space: nowrap; }
.tp-d-heroe_izq .tp-cinta-t { right: auto; left: -42px; transform: rotate(-45deg); }
.tp-v-patria .tp-cinta-t { background: linear-gradient(#00a3d9 0 30%, #fff 30% 70%, #00a3d9 70%); color: #0a3d66; padding: 9px 0; }
.tp-v-paleta .tp-cinta-t { color: #fff; background: color-mix(in srgb, var(--tp-1) 80%, #000); }
.tp-v-banda.tp-e-cinta { --cw: 120px; }
.tp-v-banda .tp-cinta-t { top: 0; right: 24px; width: 34px; height: 92px; transform: none; padding: 10px 0 0; writing-mode: vertical-rl; font-size: 11px; color: #fff; background: color-mix(in srgb, var(--tp-1) 82%, #000); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); }
.tp-d-heroe_izq.tp-v-banda .tp-cinta-t { right: auto; left: 24px; }
@media (max-width: 639px) {
  .tp-e-cinta { --cw: 44px; }
  .tp-cinta-t, .tp-d-heroe_izq .tp-cinta-t { top: 0; right: 8px; left: auto; width: 26px; height: 40px; padding: 0; transform: none; font-size: 0; writing-mode: horizontal-tb; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
}
/* Mensaje que se escribe. */
.tp-msg { font: italic 800 54px/1 "Inter", system-ui, sans-serif; fill: var(--tp-1); stroke: var(--tp-1); stroke-width: 1.2; stroke-linejoin: round; letter-spacing: .5px; }
.tp-d-heroe_fondo.tp-e-mensaje { opacity: .2; }
/* Medalla del aniversario. */
.tp-medalla { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tp-1) 70%, #fff), var(--tp-1) 60%, color-mix(in srgb, var(--tp-1) 70%, #000)); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--tp-2), 0 10px 22px rgba(15, 23, 42, .18); line-height: 1; }
.tp-contador-n { font: 800 calc(var(--tw) * .38)/1 inherit; font-variant-numeric: tabular-nums; }
.tp-contador-t { font: 600 calc(var(--tw) * .13)/1.2 inherit; letter-spacing: .06em; text-transform: uppercase; }
/* Medio propio. */
.tp-medio { width: 100%; height: 100%; display: block; }
.tp-forma-redondo { border-radius: 50%; } .tp-forma-redondeado { border-radius: 12px; }
/* Fondos sutiles. */
.tp-e-patron, .tp-e-niebla, .tp-e-amanecer { opacity: .5; -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%); mask-image: linear-gradient(180deg, #000 20%, transparent 95%); }
.tp-e-patron.tp-v-estrellas { background: radial-gradient(circle, color-mix(in srgb, var(--tp-1) 55%, transparent) 1.4px, transparent 2px) 0 0 / 34px 34px, radial-gradient(circle, color-mix(in srgb, var(--tp-3) 60%, transparent) 1px, transparent 1.6px) 17px 17px / 34px 34px; }
.tp-e-patron.tp-v-puntos { background: radial-gradient(circle, color-mix(in srgb, var(--tp-1) 30%, transparent) 1.5px, transparent 2px) 0 0 / 22px 22px; }
.tp-e-patron.tp-v-nieve { background: radial-gradient(circle, #cfe3f3 2px, transparent 2.6px) 0 0 / 46px 46px, radial-gradient(circle, #dbeafe 1.2px, transparent 1.8px) 23px 13px / 46px 46px; }
.tp-e-patron.tp-v-corazones { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 28s-7-4.6-7-9c0-2.2 1.7-3.6 3.6-3.6 1.4 0 2.6.8 3.4 2 .8-1.2 2-2 3.4-2 1.9 0 3.6 1.4 3.6 3.6 0 4.4-7 9-7 9z' fill='%23fb7185' fill-opacity='.35'/%3E%3C/svg%3E") 0 0 / 40px 40px; }
.tp-e-patron.tp-v-confeti { background: linear-gradient(35deg, transparent 47%, color-mix(in srgb, var(--tp-1) 45%, transparent) 47% 53%, transparent 53%) 0 0 / 38px 38px, linear-gradient(-30deg, transparent 47%, color-mix(in srgb, var(--tp-3) 50%, transparent) 47% 53%, transparent 53%) 19px 11px / 38px 38px; }
.tp-e-amanecer { opacity: 1; background: radial-gradient(70% 90% at 15% 0%, color-mix(in srgb, var(--tp-2) 30%, transparent), transparent 70%), radial-gradient(60% 70% at 90% 10%, color-mix(in srgb, var(--tp-1) 14%, transparent), transparent 70%); }
.tp-e-niebla {
  opacity: .85;
  background:
    radial-gradient(ellipse 55% 24% at 25% 88%, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .4) 55%, transparent 75%),
    radial-gradient(ellipse 65% 28% at 80% 92%, rgba(241, 245, 249, .92) 0%, rgba(226, 232, 240, .45) 60%, transparent 80%),
    radial-gradient(ellipse 40% 18% at 50% 82%, rgba(255, 255, 255, .7) 0%, transparent 70%);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}
.hero-bg.tiene-foto .tp-e-niebla { opacity: .45; }

/* ---------------------------------------------------------------- particulas y lo que cruza (las arma el JS) */
.tp-part { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tp-part-pantalla { position: fixed; inset: 0; z-index: 39; overflow: hidden; pointer-events: none; }
.tp-cielo { display: none !important; }
.tp-p { position: absolute; top: 0; left: var(--x); width: var(--s); height: var(--s); opacity: 0; }
.tp-p svg { width: 100%; height: 100%; display: block; }
.tp-p .c1 { fill: var(--c, var(--tp-1)); } .tp-p .c3 { fill: var(--c2, var(--tp-3)); }
.tp-p-confeti { width: calc(var(--s) * .62); border-radius: 2px; background: var(--c); animation: tp-caer var(--d) cubic-bezier(.25, .6, .4, 1) var(--r) 1 both; }
.tp-p-serpentina { width: 4px; height: calc(var(--s) * 2.4); border-radius: 4px; background: var(--c); animation: tp-caer var(--d) cubic-bezier(.25, .6, .4, 1) var(--r) 1 both; }
.tp-p-copo { color: var(--c, #9ec5e6); animation: tp-nevar var(--d) linear var(--r) var(--it, 2) both; }
.hero-bg.tiene-foto .tp-p-copo { --c: #fff; }
.tp-p-cae { animation: tp-caer var(--d) cubic-bezier(.3, .5, .5, 1) var(--r) 1 both; }
.tp-p-sube { top: auto; bottom: 0; animation: tp-subir var(--d) ease-in var(--r) var(--it, 1) both; }
.tp-p-chispa { width: 5px; height: 5px; border-radius: 50%; background: var(--c); animation: tp-estallar 1.1s cubic-bezier(.15, .7, .3, 1) var(--r) 1 both; top: var(--y); }
.tp-cruce { position: absolute; left: 0; top: var(--y); width: var(--s); animation: tp-cruzar var(--d) cubic-bezier(.45, .05, .55, .95) var(--r) 1 both; }
.tp-cruce > span { display: block; animation: tp-ondular 1.6s ease-in-out infinite alternate; }
.tp-cruce svg { width: 100%; height: auto; display: block; overflow: visible; }
.tp-cruce.tp-al-reves svg { transform: scaleX(-1); }

/* ================================================================ ANIMACIONES */
/* Banderines y luces */
.tp-pen { transform-origin: top center; animation: tp-mecer 1.7s ease-in-out calc(var(--i) * -.13s) calc(var(--tp-iter) * 2) alternate both; }
.tp-foco { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .2)); }
.tp-bombilla { animation: tp-bombilla 1.3s ease-in-out calc(var(--i) * .12s) calc(var(--tp-iter) + 2) both; filter: drop-shadow(0 0 7px currentColor); }
.tp-halo { opacity: .35; filter: blur(3.5px); mix-blend-mode: screen; animation: tp-halo 1.3s ease-in-out calc(var(--i) * .12s) calc(var(--tp-iter) + 2) both; }
/* Trazos que se dibujan */
.tp-traza { stroke-dasharray: 1; stroke-dashoffset: 0; animation: tp-dibujar 1.2s ease-out calc(.4s + var(--i, 0) * .22s) 1 both; }
.tp-msg { stroke-dasharray: 900; animation: tp-escribir 3.6s ease .5s 1 both; }
.tp-d-heroe_fondo.tp-e-mensaje { animation: tp-atenuar 5s ease 1 both; }
/* Arana */
.tp-hilo { transform-origin: top; animation: tp-hilo 5.5s ease-in-out .6s 1 both; }
.tp-colgante { animation: tp-colgar 5.5s ease-in-out .6s 1 both; filter: drop-shadow(0 4px 10px rgba(15, 23, 42, .25)); }
.tp-e-arana.tp-v-camina { animation: tp-caminar 8s linear .8s 1 both; filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .25)); }
.tp-d-cabecera_izq.tp-e-arana.tp-v-camina { animation-name: tp-caminar-der; }
.tp-patas { animation: tp-patitas .25s ease-in-out .8s 30 alternate both; }
/* Halloween */
.tp-e-calabaza { filter: drop-shadow(0 8px 20px rgba(15, 23, 42, .22)); }
.tp-cara {
  filter: drop-shadow(0 0 8px #f59e0b) drop-shadow(0 0 18px rgba(249, 115, 22, 0.8));
  animation: tp-vela-realista 2.4s ease-in-out .4s calc(var(--tp-iter) + 1) both;
}
.tp-e-calabaza.tp-v-asoma { animation: tp-asomar 1.3s cubic-bezier(.2, 1.4, .4, 1) .6s 1 both; }
.tp-e-calabaza.tp-v-rueda svg { animation: tp-rodar 1.8s cubic-bezier(.2, .8, .3, 1) .5s 1 both; }
.tp-d-heroe_izq.tp-e-calabaza.tp-v-rueda svg { animation-name: tp-rodar-izq; }
.tp-e-esqueleto { filter: drop-shadow(0 8px 18px rgba(15, 23, 42, .22)); animation: tp-asomar 1.2s cubic-bezier(.2, 1.2, .4, 1) .8s 1 both; }
.tp-brazo { transform-origin: 70% 90%; animation: tp-saludar .5s ease-in-out 2s 6 alternate both; }
.tp-ojo { animation: tp-farol 1.6s ease-in-out 2s 3 both; }
.tp-e-fantasma .tp-cuerpo {
  filter: drop-shadow(0 0 16px rgba(199, 210, 254, .8)) drop-shadow(0 8px 24px rgba(124, 58, 237, .25));
  animation: tp-flotar 3s ease-in-out .3s calc(var(--tp-iter) * 2) alternate both;
}
.tp-e-fantasma .tp-sombra { transform-origin: center; animation: tp-sombra 3s ease-in-out .3s calc(var(--tp-iter) * 2) alternate both; }
.tp-e-luna { filter: drop-shadow(0 0 35px rgba(254, 243, 199, .65)) drop-shadow(0 0 70px rgba(253, 230, 138, .3)); }
.tp-e-caldero { filter: drop-shadow(0 8px 18px rgba(15, 23, 42, .25)); }
.tp-e-caldero .tp-burbujas { filter: drop-shadow(0 0 12px rgba(74, 222, 128, .7)); }
.tp-e-sombrero_bruja { filter: drop-shadow(0 6px 16px rgba(46, 16, 101, .3)); }
.tp-e-gorro_santa { filter: drop-shadow(0 6px 16px rgba(159, 18, 57, .3)); }
.tp-e-arbolito { filter: drop-shadow(0 8px 22px rgba(15, 23, 42, .22)); }
.tp-e-arbolito .tp-punta { filter: drop-shadow(0 0 9px #fef08a) drop-shadow(0 0 18px rgba(245, 158, 11, .75)); }
.tp-e-esferas .tp-pendulo { filter: drop-shadow(0 6px 14px rgba(15, 23, 42, .25)); }
.tp-e-regalo { filter: drop-shadow(0 6px 18px rgba(15, 23, 42, .2)); }
.tp-e-lazo_rosa { filter: drop-shadow(0 4px 12px rgba(236, 72, 153, .4)); }
.tp-niebla { animation: tp-deriva 9s ease-in-out 1 alternate both; }
.tp-e-niebla { animation: tp-deriva-capa 14s ease-in-out 1s 1 both; }
.tp-bur { animation: tp-burbuja 1.8s ease-in calc(var(--i) * .6s) calc(var(--tp-iter) + 2) both; }
.tp-llama { transform-origin: bottom; animation: tp-llama .35s ease-in-out 20 alternate both; }
/* Lo que cae sobre el logo */
.tp-d-logo:is(.tp-e-gorro_santa, .tp-e-sombrero_bruja, .tp-e-gorro_fiesta) svg { animation: tp-caer-logo 1s cubic-bezier(.3, 1.5, .5, 1) .9s 1 both; }
.tp-e-brillo::after { animation: tp-barrido 1.6s ease-in-out 1.2s calc(var(--tp-iter)) both; }
.tp-e-brillo.tp-v-calabaza::after { animation: tp-farol 2.4s ease-in-out .8s calc(var(--tp-iter) + 1) both; }
/* Navidad */
.tp-luz { animation: tp-encender .5s ease-out calc(.6s + var(--i) * .22s) 1 both, tp-titilar 1.2s ease-in-out calc(2.6s + var(--i) * .15s) calc(var(--tp-iter) + 1) alternate; }
.tp-punta { transform-origin: center; animation: tp-latido 1.4s ease-in-out 2.4s 2 both; }
.tp-tapa { transform-origin: 20% 100%; animation: tp-abrir-tapa 1.4s cubic-bezier(.3, 1.4, .5, 1) 1s 1 both; }
.tp-chispa-regalo { animation: tp-salir 1.4s ease-out 1.5s 1 both; }
.tp-destello { transform-origin: center; animation: tp-destello 1.6s ease-in-out calc(var(--i) * .3s) calc(var(--tp-iter) + 1) both; }
.tp-pendulo { transform-origin: top center; animation: tp-pendulo 2.6s ease-in-out calc(.4s + var(--i) * .2s) 1 both; }
.tp-e-palma .tp-pendulo { transform-origin: bottom center; animation-duration: 6s; }
/* Ano nuevo */
.tp-copa-i { transform-origin: bottom center; animation: tp-brindar-i 1.4s ease-in-out .8s 2 both; }
.tp-copa-d { transform-origin: bottom center; animation: tp-brindar-d 1.4s ease-in-out .8s 2 both; }
.tp-brindis-chispa { transform-origin: center; animation: tp-chispazo 1.4s ease-out .8s 2 both; }
.tp-aguja-m { transform-origin: 32px 32px; transform-box: view-box; animation: tp-aguja-m 2.4s cubic-bezier(.3, .1, .2, 1) .6s 1 both; }
.tp-aguja-h { transform-origin: 32px 32px; transform-box: view-box; animation: tp-aguja-h 2.4s cubic-bezier(.3, .1, .2, 1) .6s 1 both; }
.tp-rayos-reloj { animation: tp-chispazo .8s ease-out 3s 2 both; }
.tp-rayo { transform-origin: center; transform-box: view-box; animation: tp-rayo 1.1s ease-out calc(.6s + var(--i) * .04s) calc(var(--tp-iter)) both; }
.tp-e-chispas .tp-rayo { transform-origin: 24px 24px; }
/* Patria */
.tp-onda { animation: tp-ondear 1.1s ease-in-out calc(var(--i) * -.14s) calc(var(--tp-iter) * 3) alternate both; }
.tp-orbita { transform-origin: 30px 30px; transform-box: view-box; animation: tp-girar 7s linear .5s calc(var(--tp-iter) - 1 + 1) both; }
.tp-oreja { transform-origin: 90% 90%; animation: tp-oreja 3s ease-in-out 1.5s 2 both; }
.tp-cola { transform-origin: 90% 90%; animation: tp-oreja 2.2s ease-in-out 1s 2 both; }
.tp-baqueta-i { transform-origin: 9px 5px; transform-box: view-box; animation: tp-redoble-i .22s ease-in-out .8s 12 alternate both; }
.tp-baqueta-d { transform-origin: 55px 5px; transform-box: view-box; animation: tp-redoble-d .22s ease-in-out .91s 12 alternate both; }
/* Amor y familia */
.tp-e-corazon svg { transform-origin: center; animation: tp-latido 1.3s ease-in-out .8s calc(var(--tp-iter)) both; }
.tp-solapa { transform-origin: top; animation: tp-solapa .9s ease-in-out 1s 1 both; }
.tp-carta { animation: tp-carta 1s cubic-bezier(.3, 1.3, .5, 1) 1.7s 1 both; }
.tp-tallo { transform-origin: bottom; animation: tp-crecer 1.1s ease-out calc(.5s + var(--i) * .25s) 1 both; }
.tp-capullo { animation: tp-florecer .8s cubic-bezier(.3, 1.5, .5, 1) calc(1.4s + var(--i) * .25s) 1 both; transform-box: view-box; }
.tp-e-ramo svg, .tp-e-corbata svg { transform-origin: top center; animation: tp-pendulo 2.8s ease-in-out .6s 1 both; }
.tp-e-bigote svg { transform-origin: center; animation: tp-bigote .4s ease-in-out 1.2s 4 alternate both; }
.tp-e-juguete .tp-cuerpo { animation: tp-flotar 2.6s ease-in-out .3s calc(var(--tp-iter) * 2) alternate both; }
.tp-cola-cometa { transform-origin: top; animation: tp-pendulo 2.6s ease-in-out .3s 2 both; }
/* Aniversario */
.tp-llamita { animation: tp-encender .4s ease-out calc(.8s + var(--i) * .45s) 1 both, tp-llama .3s ease-in-out calc(2.4s + var(--i) * .1s) 16 alternate; }
.tp-e-contador .tp-medalla { animation: tp-aparecer .7s cubic-bezier(.3, 1.5, .5, 1) .6s 1 both; }

/* ------------------------------------------------------------------ keyframes */
@keyframes tp-mecer { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes tp-bombilla { 0% { opacity: .35; } 50% { opacity: 1; } 100% { opacity: 1; } }
@keyframes tp-halo { 0% { opacity: 0; } 50% { opacity: .6; } 100% { opacity: .28; } }
@keyframes tp-dibujar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tp-escribir { 0% { stroke-dashoffset: 900; fill-opacity: 0; } 70% { stroke-dashoffset: 0; fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes tp-atenuar { 0%, 70% { opacity: .95; } 100% { opacity: .2; } }
@keyframes tp-hilo { 0% { transform: scaleY(.04); } 30% { transform: scaleY(1); } 55% { transform: scaleY(.45); } 75% { transform: scaleY(.95); } 100% { transform: scaleY(.62); } }
@keyframes tp-colgar { 0% { transform: translateY(-66px); } 30% { transform: translateY(0); } 38% { transform: translateY(0) rotate(8deg); } 46% { transform: translateY(0) rotate(-6deg); } 55% { transform: translateY(-37px); } 75% { transform: translateY(-3px); } 100% { transform: translateY(-26px); } }
@keyframes tp-caminar { from { transform: translateX(0); } to { transform: translateX(-60vw); opacity: 0; } }
@keyframes tp-caminar-der { from { transform: translateX(0); } to { transform: translateX(60vw); opacity: 0; } }
@keyframes tp-patitas { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes tp-farol { 0%, 100% { opacity: 1; } 30% { opacity: .55; } 45% { opacity: .9; } 60% { opacity: .6; } }
@keyframes tp-vela-realista {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px #f59e0b) drop-shadow(0 0 18px rgba(249, 115, 22, 0.75)); }
  22% { opacity: .86; filter: drop-shadow(0 0 6px #f59e0b) drop-shadow(0 0 14px rgba(249, 115, 22, 0.6)); }
  45% { opacity: .98; filter: drop-shadow(0 0 10px #fbbf24) drop-shadow(0 0 22px rgba(249, 115, 22, 0.85)); }
  68% { opacity: .78; filter: drop-shadow(0 0 5px #f59e0b) drop-shadow(0 0 12px rgba(249, 115, 22, 0.5)); }
  85% { opacity: .92; filter: drop-shadow(0 0 9px #fbbf24) drop-shadow(0 0 20px rgba(249, 115, 22, 0.8)); }
}
@keyframes tp-asomar { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes tp-rodar { from { transform: translateX(-260%) rotate(-540deg); } to { transform: translateX(0) rotate(0); } }
@keyframes tp-rodar-izq { from { transform: translateX(260%) rotate(540deg); } to { transform: translateX(0) rotate(0); } }
@keyframes tp-saludar { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@keyframes tp-flotar { from { transform: translateY(0); } to { transform: translateY(-7px) rotate(1.5deg); } }
@keyframes tp-sombra { from { transform: scaleX(1); opacity: .12; } to { transform: scaleX(.8); opacity: .06; } }
@keyframes tp-deriva { from { transform: translateX(-8px); } to { transform: translateX(10px); } }
@keyframes tp-deriva-capa { from { transform: translateX(-4%); opacity: 0; } 20% { opacity: .75; } to { transform: translateX(4%); opacity: .75; } }
@keyframes tp-burbuja { 0% { transform: translateY(4px) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-16px) scale(1.1); opacity: 0; } }
@keyframes tp-llama { from { transform: scaleY(.85) skewX(-3deg); } to { transform: scaleY(1.08) skewX(3deg); } }
@keyframes tp-caer-logo { 0% { transform: translateY(-60px) rotate(-40deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0) rotate(0); opacity: 1; } }
@keyframes tp-barrido { 0% { transform: translateX(-160%) skewX(-12deg); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(360%) skewX(-12deg); opacity: 0; } }
@keyframes tp-encender { from { opacity: .15; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes tp-titilar { from { opacity: 1; } to { opacity: .55; } }
@keyframes tp-latido { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.14); } 60% { transform: scale(1); } }
@keyframes tp-abrir-tapa { 0% { transform: none; } 100% { transform: translate(-3px, -9px) rotate(-16deg); } }
@keyframes tp-salir { 0% { transform: translateY(18px) scale(.3); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes tp-destello { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .45; } }
@keyframes tp-pendulo { 0% { transform: rotate(12deg); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
@keyframes tp-brindar-i { 0%, 100% { transform: rotate(0); } 45%, 55% { transform: rotate(12deg); } }
@keyframes tp-brindar-d { 0%, 100% { transform: rotate(0); } 45%, 55% { transform: rotate(-12deg); } }
@keyframes tp-chispazo { 0%, 40% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes tp-aguja-m { from { transform: rotate(-420deg); } to { transform: rotate(0); } }
@keyframes tp-aguja-h { from { transform: rotate(-60deg); } to { transform: rotate(0); } }
@keyframes tp-rayo { 0% { transform: scale(.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes tp-ondear { from { transform: translateY(-1.6px); } to { transform: translateY(1.6px); } }
@keyframes tp-girar { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes tp-oreja { 0%, 20%, 100% { transform: rotate(0); } 8% { transform: rotate(-14deg); } 14% { transform: rotate(6deg); } }
@keyframes tp-redoble-i { from { transform: rotate(0); } to { transform: rotate(14deg); } }
@keyframes tp-redoble-d { from { transform: rotate(0); } to { transform: rotate(-14deg); } }
@keyframes tp-solapa { from { transform: scaleY(1); } to { transform: scaleY(-1); } }
@keyframes tp-carta { from { transform: translateY(14px); } to { transform: translateY(-6px); } }
@keyframes tp-crecer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tp-florecer { from { transform: scale(0) rotate(-60deg); } to { transform: scale(1) rotate(0); } }
@keyframes tp-bigote { from { transform: scaleX(1) rotate(0); } to { transform: scaleX(1.08) rotate(3deg); } }
@keyframes tp-aparecer { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tp-caer { 0% { transform: translate3d(0, -40px, 0) rotate(0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate3d(var(--dx), var(--h, 100vh), 0) rotate(var(--rot)); opacity: 0; } }
@keyframes tp-nevar { 0% { transform: translate3d(0, -20px, 0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } 100% { transform: translate3d(var(--dx), var(--h, 400px), 0); opacity: 0; } }
@keyframes tp-subir { 0% { transform: translate3d(0, 30px, 0) scale(.8); opacity: 0; } 12% { opacity: var(--op, .9); } 85% { opacity: var(--op, .9); } 100% { transform: translate3d(var(--dx), calc(var(--h, 400px) * -1), 0) scale(1) rotate(var(--rot)); opacity: 0; } }
@keyframes tp-estallar { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
@keyframes tp-cruzar { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }
@keyframes tp-ondular { from { transform: translateY(-6px); } to { transform: translateY(8px); } }

/* Alas: en lo que cruza y en las miniaturas del editor. */
.tp-ala { transform-origin: center bottom; animation: tp-aletear .32s ease-in-out infinite alternate; }
.tp-ala-sup { transform-origin: bottom center; }
@keyframes tp-aletear { from { transform: scaleY(1); } to { transform: scaleY(-.3); } }

/* Fuera de la vista: en pausa (lo marca el JS con un IntersectionObserver). */
.tp-fuera, .tp-fuera * { animation-play-state: paused !important; }

/* ------------------------------------------------------------------ movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .tp-capa, .tp-capa *, .tp-capa *::before, .tp-capa *::after, .tp-aviso::before, .tp-saludo-ico * { animation: none !important; transition: none !important; }
  .tp-cielo, .tp-part { display: none !important; }
  .tp-d-heroe_fondo.tp-e-mensaje { opacity: .2; }
  .tp-e-brillo::after { display: none; }
}

/* Ronda 2 de revision: el corazon del logo no compite con la marca. */
.tp-d-logo.tp-e-corazon { --tl: 20px; top: -6px; right: -10px; }
@media (min-width: 768px) { .tp-d-logo.tp-e-corazon { --tl: 24px; } }
/* El mensaje de fondo es una marca de agua: cruza toda la portada, se escribe
   tenue y queda casi transparente (en el telefono no se muestra). */
.tp-d-heroe_fondo.tp-e-mensaje { inset: 22% 4% auto; width: auto; height: 46%; aspect-ratio: auto; opacity: .08; }
.tp-d-heroe_fondo.tp-e-mensaje { animation-name: tp-marca-agua; }
@keyframes tp-marca-agua { 0%, 70% { opacity: .38; } 100% { opacity: .08; } }
@media (prefers-reduced-motion: reduce) { .tp-d-heroe_fondo.tp-e-mensaje { opacity: .08; } }
/* Los sombreros se apoyan sobre el borde de arriba de la primera letra: tapar una letra es tapar la marca. */
.tp-d-logo:is(.tp-e-gorro_santa, .tp-e-sombrero_bruja, .tp-e-gorro_fiesta) { top: 0; left: -8px; }
/* Medido con CPU x4: escribir trazo a trazo un texto que cruza toda la portada repinta un area
   grande en cada cuadro. De fondo solo aparece (opacidad); el trazo queda para el mensaje chico. */
.tp-d-heroe_fondo .tp-msg { animation: none; stroke: none; }
.tp-d-heroe_fondo.tp-e-mensaje { animation-name: tp-marca-agua-entra; animation-duration: 2.4s; }
@keyframes tp-marca-agua-entra { from { opacity: 0; } to { opacity: .09; } }

/* ================================================================ EN TODA LA PAGINA
   PRESENTACIÓN REALISTA DE TEMPORADA — CERO DIBUJOS SVG PLANOS.
   Sin clipart ni calcomanías: iluminación ambiental, reflejo superior esmaltado,
   láser de diagnóstico temático y halo de luz en interacción. */

/* CERO CLIPART NI DIBUJOS PLANOS SVG EN NINGUNA ZONA */
.tp-cielo,
.tp-cruce,
.tp-d-cabecera svg,
.tp-capa-heroe .tp-el:not(.tp-e-cuenta) svg,
.tp-capa-pie svg,
.tp-sep svg,
.tp-capa-logo svg {
  display: none !important;
}

/* Moldura de iluminación ambiental festiva debajo de la cabecera (haz de luz sutil) */
.tp-d-cabecera.tp-e-banderines {
  height: 3px !important;
  overflow: visible !important;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tp-1) 20%,
    var(--tp-3, #f59e0b) 50%,
    var(--tp-1) 80%,
    transparent 100%
  ) !important;
  box-shadow: 0 1px 12px var(--tp-1), 0 0 20px var(--tp-3, #f59e0b) !important;
  opacity: .9 !important;
}

/* En la portada: sin calcomanías ni piezas sueltas que tapen el diseño */
.tp-capa-heroe :is(.tp-d-heroe_izq, .tp-d-heroe_der) {
  display: none !important;
}

/* Tarjeta principal del héroe en portada: iluminación de borde, reflejo superior y láser temático */
.tp-on [data-hero-tarjeta] .escaner {
  position: relative !important;
  overflow: hidden !important;
  border-color: color-mix(in srgb, var(--tp-1) 28%, #e2e8f0) !important;
  box-shadow: 0 20px 42px -10px color-mix(in srgb, var(--tp-1) 18%, rgba(15, 23, 42, 0.12)),
              0 0 0 1px color-mix(in srgb, var(--tp-1) 14%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  transition: border-color .4s ease, box-shadow .4s ease !important;
}

/* Reflejo esmaltado superior en la tarjeta principal (delicado y sin tapar nada) */
.tp-on [data-hero-tarjeta] .escaner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--tp-1) 85%, #fff) 25%,
    var(--tp-3, #f59e0b) 50%,
    color-mix(in srgb, var(--tp-1) 85%, #fff) 75%,
    transparent 100%
  );
  box-shadow: 0 1px 8px color-mix(in srgb, var(--tp-1) 35%, transparent);
  z-index: 5;
  pointer-events: none;
}

/* El láser de diagnóstico recorre la tarjeta con el color festivo de la temporada (sin tapar texto) */
.tp-on [data-hero-tarjeta] .escaner::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: 2px !important;
  padding: 0 !important;
  transform: none !important;
  text-shadow: none !important;
  border: none !important;
  background: linear-gradient(90deg, transparent 0%, var(--tp-1) 50%, transparent 100%) !important;
  box-shadow: 0 0 16px var(--tp-1) !important;
  opacity: 0 !important;
  animation: escaner-recorre 6s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

/* Portada móvil: tarjeta compacta de catálogo con fino remate de luz */
.tp-on .hero-bg .md\:hidden[href="tienda.php"] {
  position: relative !important;
  overflow: hidden !important;
  border-color: color-mix(in srgb, var(--tp-1) 26%, #e2e8f0) !important;
  box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--tp-1) 16%, rgba(15, 23, 42, 0.1)) !important;
}
.tp-on .hero-bg .md\:hidden[href="tienda.php"]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, var(--tp-1) 30%, var(--tp-3, #f59e0b) 50%, var(--tp-1) 70%, transparent);
  z-index: 5;
  pointer-events: none;
}
.tp-on .hero-bg .md\:hidden[href="tienda.php"]::after {
  display: none !important;
}

/* Tarjetas de carruseles, catálogo y servicios en general */
.tp-on :where(.carr-item, .card-hover.rounded-xl, .sv-cat-enlace, .sv-serv-enlace) {
  position: relative !important;
  overflow: hidden !important;
  border-color: color-mix(in srgb, var(--tp-1) 20%, #e2e8f0) !important;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease !important;
}

/* Borde superior esmaltado con reflejo fino de luz */
.tp-on :where(.carr-item, .card-hover.rounded-xl, .sv-cat-enlace, .sv-serv-enlace)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--tp-1) 85%, #fff) 25%,
    var(--tp-3, #f59e0b) 50%,
    color-mix(in srgb, var(--tp-1) 85%, #fff) 75%,
    transparent 100%
  );
  box-shadow: 0 1px 6px color-mix(in srgb, var(--tp-1) 30%, transparent);
  z-index: 5;
  pointer-events: none;
}

/* Sin cintas que tapen texto ni fotos en las tarjetas de productos */
.tp-on :where(.carr-item, .card-hover.rounded-xl)::after {
  display: none !important;
}

/* Efecto al pasar el cursor sobre las tarjetas: iluminación festiva en el marco */
.tp-on :where(.carr-item, .card-hover.rounded-xl, .sv-cat-enlace, .sv-serv-enlace):hover {
  border-color: color-mix(in srgb, var(--tp-1) 48%, #cbd5e1) !important;
  box-shadow: 0 16px 36px -6px color-mix(in srgb, var(--tp-1) 24%, rgba(15, 23, 42, 0.14)) !important;
}

/* Marco de luz tecnológico rotatorio en el hover de las tarjetas adaptado al color estacional */
.tp-on .marco-luz::before {
  background: conic-gradient(from var(--giro, 0deg),
    transparent 0deg,
    transparent 240deg,
    color-mix(in srgb, var(--tp-1) 90%, transparent) 300deg,
    color-mix(in srgb, var(--tp-3, #f59e0b) 95%, transparent) 330deg,
    transparent 360deg
  ) !important;
}

/* Insignias de oferta con gradiente festivo durante la temporada */
.tp-on .carr-figura :is(.bg-rose-500, .bg-red-500),
.tp-on [data-medir-item] :is(.bg-rose-500, .bg-red-500) {
  background: linear-gradient(135deg, var(--tp-1), color-mix(in srgb, var(--tp-1) 75%, #000)) !important;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--tp-1) 35%, transparent) !important;
}

/* El buho de Aviero (la burbuja del chat) con el accesorio de la fecha. */
.tp-av .aviero-float-btn::after {
  content: ""; position: absolute; top: -16px; left: 4px; width: 34px; height: 30px; pointer-events: none;
  background: var(--tp-aviero) center / contain no-repeat; rotate: -18deg; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .2));
}
.tp-av-bandera .aviero-float-btn::after { top: -10px; left: auto; right: -6px; rotate: 10deg; width: 30px; height: 22px; }
.tp-av-corazon .aviero-float-btn::after, .tp-av-lazo .aviero-float-btn::after { top: -6px; left: auto; right: -4px; width: 22px; height: 22px; rotate: 0deg; }

/* Separadores: un detalle chico arriba de cada seccion de la portada (los pone el JS). */
.tp-sep { position: absolute; top: 0; left: 50%; width: 220px; height: 22px; margin-left: -110px; pointer-events: none; z-index: 1; }
.tp-sep svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.tp-sep-estrellas { width: 54px; height: 54px; margin-left: -27px; top: -27px; opacity: .85; }
.tp-sep .c1 { fill: var(--tp-1); } .tp-sep .c2 { fill: var(--tp-2); } .tp-sep .c3 { fill: var(--tp-3); } .tp-sep .k3 { stroke: var(--tp-3); } .tp-sep .k0 { stroke: rgba(15, 23, 42, .16); }
.tp-sep .cw { fill: #ffd36b; } .tp-sep .cr { fill: #ef4444; } .tp-sep .cg { fill: #34d399; } .tp-sep .co { fill: #e9b730; }
@media (prefers-reduced-motion: reduce) {
  .tp-tj :is(.carr-item, .card-hover.rounded-xl, .sv-cat-enlace, .sv-serv-enlace)::after { animation: none !important; }
  .tp-sep * { animation: none !important; }
}

/* ================================================================ JUNTO AL LOGO, NUNCA ENCIMA
   Decision del dueno (02/10/2026): el logo queda intacto. Lo de la temporada
   va AL LADO, separado, chico y alineado al centro del logo, con una entrada
   breve. En tablet y en computadoras chicas (768-1279) no hay lugar entre el
   logo y el buscador: ahi no se muestra. */
.tp-capa-logo { position: relative; inset: auto; display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; height: 30px; flex: none; }
.tp-capa-logo .tp-d-logo { position: relative; inset: auto; top: auto; right: auto; bottom: auto; left: auto; margin: 0; width: 26px; height: 26px; rotate: none; opacity: 1; }
.tp-capa-logo .tp-d-logo svg { transform: none; animation: tp-aparecer .6s cubic-bezier(.3, 1.5, .5, 1) .5s 1 both; }
.tp-capa-logo .tp-d-logo.tp-e-bandera { width: 34px; height: 24px; }
.tp-capa-logo .tp-d-logo.tp-e-lazo_rosa { width: 18px; height: 26px; }
@media (min-width: 768px) and (max-width: 1279px) { .tp-capa-logo { display: none; } }
@media (prefers-reduced-motion: reduce) { .tp-capa-logo .tp-d-logo svg { animation: none !important; } }

/* El buho: nada encima de la mascota; un sticker chico a su lado (izquierda). */
.tp-av .aviero-float-btn::after, .tp-av-bandera .aviero-float-btn::after, .tp-av-corazon .aviero-float-btn::after, .tp-av-lazo .aviero-float-btn::after {
  top: 50%; left: -34px; right: auto; width: 28px; height: 28px; rotate: 0deg; transform: translateY(-50%);
}