/* ============================================================
   TU PLANTILLA — scenery-tibio.css · escenografía del ACTO TIBIO
   ------------------------------------------------------------
   Estila los decorados que INYECTA js/scenery-tibio.js en:
   c02-marquee (divisor onda) · t01-equipo · t02-garantia ·
   t03-sietedias · t04-mantencion · t05-resenas
   Reglas: solo azul/negro/blanco/crema · fuerza 5-12% ·
   el contenido (.container) queda SIEMPRE por encima (z2).
   ============================================================ */

/* El contenido de mis secciones vive sobre el decorado */
#t01-equipo > .container,
#t02-garantia > .container,
#t03-sietedias > .container,
#t04-mantencion > .container,
#t05-resenas > .container{position:relative;z-index:2}

/* Capa de decorado: entre el fondo global (z0) y el contenido (z2) */
.tp-deco{
  position:absolute;inset:0;overflow:hidden;
  pointer-events:none;z-index:1;
}

/* ══════ c02 · divisor de onda (la banda azul se funde con lo que viene) ══════ */
.tp-wave{
  position:relative;z-index:2;pointer-events:none;
  height:clamp(22px,4vw,44px);
  margin-top:calc(-1 * clamp(10px,2vw,20px)); /* se monta sobre el borde de la banda */
}
.tp-wave svg{display:block;width:100%;height:100%}

/* ══════ t01 · plano técnico + dona crema + puntos azules ══════ */
.tp-corner{position:absolute;width:clamp(18px,2.4vw,28px);aspect-ratio:1}
.tp-corner--tl{top:14px;left:14px;border-top:2px solid rgba(9,9,14,.28);border-left:2px solid rgba(9,9,14,.28)}
.tp-corner--tr{top:14px;right:14px;border-top:2px solid rgba(9,9,14,.28);border-right:2px solid rgba(9,9,14,.28)}
.tp-corner--bl{bottom:14px;left:14px;border-bottom:2px solid rgba(9,9,14,.28);border-left:2px solid rgba(9,9,14,.28)}
.tp-corner--br{bottom:14px;right:14px;border-bottom:2px solid rgba(9,9,14,.28);border-right:2px solid rgba(9,9,14,.28)}

.tp-t01-arc{
  position:absolute;top:-14%;right:max(-16vw,-220px);
  width:clamp(300px,34vw,520px);aspect-ratio:1;border-radius:50%;
  border:clamp(34px,4vw,64px) solid #ece6d9; /* crema más oscura sobre #fbfaf6 */
  opacity:.6;
  will-change:transform;
}
.tp-plus{
  position:absolute;font-family:var(--f-display);font-weight:800;
  font-size:clamp(15px,1.6vw,21px);line-height:1;font-style:normal;
  color:#2440ff;opacity:.38;
}
.tp-plus--1{top:16%;left:6%}
.tp-plus--2{top:64%;right:9%}
.tp-plus--3{bottom:9%;left:30%}

/* ══════ t02 · "50/50" gigante outline + rayos diagonales azules ══════ */
.tp-t02-5050{
  position:absolute;top:9%;left:-2%;
  font-family:var(--f-display);font-weight:800;font-stretch:125%;
  font-size:22vw;line-height:1;letter-spacing:-.02em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.06);
  will-change:transform;
}
.tp-ray{
  position:absolute;left:-22%;width:145%;height:clamp(70px,10vw,130px);
  background:linear-gradient(90deg,transparent,rgba(36,64,255,.09),transparent);
  transform:rotate(-16deg);
}
.tp-ray--1{top:16%}
.tp-ray--2{top:60%}

/* ══════ t03 · número de día gigante (reacciona al juguete) + blueprint ══════ */
.tp-deco--t03::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(244,239,230,.045) 0 1px,transparent 1px 84px);
  background-position:0 42px;   /* la 1ª raya dejaba una costura de 1px a todo el ancho */
}
.tp-t03-num{
  position:absolute;top:3%;right:-1%;
  font-family:var(--f-display);font-weight:800;font-stretch:125%;
  font-size:25vw;line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.07);
  will-change:transform,opacity;
}

/* ══════ t04 · patrón de cruces + "$" gigante outline azul ══════ */
.tp-deco--t04::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 10v10M10 15h10' stroke='rgba(9,9,14,0.06)' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.tp-t04-usd{
  position:absolute;top:10%;right:3%;
  font-family:var(--f-display);font-weight:800;
  font-size:18vw;line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(36,64,255,.10);
  will-change:transform;
}

/* ══════ t05 · comillas gigantes azules + estrellitas que titilan ══════ */
.tp-quote{
  position:absolute;font-family:var(--f-display);font-weight:800;
  font-size:clamp(130px,19vw,270px);line-height:.9;
  color:transparent;-webkit-text-stroke:2.5px rgba(36,64,255,.13);
  will-change:transform;
}
.tp-quote--l{top:2%;left:0}
.tp-quote--r{bottom:-2%;right:1%}
.tp-star{
  position:absolute;font-style:normal;font-weight:400;
  color:#2440ff;opacity:.3;font-size:clamp(11px,1.3vw,16px);line-height:1;
}
.tp-star--1{top:20%;right:12%}
.tp-star--2{top:58%;left:5%}
.tp-star--3{bottom:12%;right:28%}

/* ══════ Móvil: menos piezas, escala legible ══════ */
@media(max-width:767.9px){
  .tp-t01-arc,.tp-ray,.tp-quote--r,.tp-plus--3{display:none}
  .tp-t02-5050{font-size:34vw;top:2%}
  .tp-t04-usd{font-size:30vw}
  .tp-corner{width:16px}
}

/* ══════ Desktop: el número de día gigante gana presencia ══════ */
@media(min-width:1080px){
  /* 23-ago · t04 se volvió lateral (widget a la derecha): el "$" se muda al
     flanco izquierdo, detrás del texto, y sube un punto de presencia */
  .tp-t04-usd{top:16%;right:auto;left:-1%;font-size:15vw;-webkit-text-stroke:2.5px rgba(36,64,255,.14)}
  /* t04b espejado: la burbuja izquierda quedaría DETRÁS del teléfono; el ✓✓
     baja al rincón inferior derecho, bajo las píldoras */
  .tp-t04b-bub--l{display:none}
  .tp-t04b-check{top:auto;bottom:6%;right:3%}
}

/* ══════ t04b · burbujas fantasma + ✓✓ gigante ══════ */
.tp-t04b-bub{
  position:absolute;border:2px solid rgba(36,64,255,.14);border-radius:18px;
}
.tp-t04b-bub--l{left:3%;top:12%;width:clamp(120px,14vw,200px);height:clamp(60px,7vw,100px);border-bottom-left-radius:4px}
.tp-t04b-bub--r{right:4%;bottom:14%;width:clamp(100px,11vw,170px);height:clamp(54px,6vw,88px);border-bottom-right-radius:4px}
.tp-t04b-check{
  position:absolute;right:8%;top:6%;
  font-family:var(--f-display);font-weight:800;font-size:clamp(70px,9vw,130px);
  line-height:1;letter-spacing:-.12em;
  color:transparent;-webkit-text-stroke:2px rgba(36,64,255,.12);
}
@media(max-width:767.9px){.tp-t04b-bub--r{display:none}.tp-t04b-check{font-size:64px;top:3%}}

/* ── 29-ago · el día gigante vive DENTRO del escenario pineado ── */
.tp-deco--t03num{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.t03-anim .t03-layout{position:relative;z-index:2}
@media(min-width:1080px){ .tp-t03-num{ font-size:26vw; top:calc(50% - .45em); left:-3%; right:auto } }
@media(max-width:1079.9px){ .tp-t03-num{ display:none } }

/* ── 30-ago · los bucles de opacidad merecen su propia capa (repaint continuo) ── */
.tp-star,.tp-quote,.tp-t01-arc{will-change:opacity}