/* ==========================================================================
   Conoce Piruli — adornos del mockup 12105 (Marina, 30-sep, ticket 291820):
   manchas, gotitas, corazones, cajas con orilla ondulada y el caminito
   punteado EN ONDAS de la línea de tiempo. La clase base .deco y los dibujos
   están en publico-deco.css.
   ========================================================================== */
.cp-inicio, .cp-marige, .cp-historia, .cp-equipo, .cp-cierre { position: relative; }
.cp-inicio { overflow: hidden; }
.cp-historia { overflow-x: clip; }
.cp-inicio .pb-wrap { position: relative; z-index: 1; }
.cp-deco-mancha-izq { --w: 120px; --x: -70px; --y: 45%; --z: 0; }
.cp-deco-mancha-der { --w: 34%; --xr: -6%; --y: -4%; --r: 20deg; --z: 0; }
.cp-titulo--inicio { position: relative; }
/* Caminito de "Conoce Piruli": ocupa desde el final del antetítulo hasta
   .8rem antes de la foto (se come el hueco de la rejilla). Trazo fino fijo:
   el SVG se estira pero el trazo no (non-scaling-stroke). */
.cp-antetitulo { display: flex; align-items: center; gap: .9rem; }
.cp-camino-ante {
  position: relative; flex: 1 1 auto; align-self: stretch;
  margin-right: calc(-1 * clamp(1.75rem, 4.5vw, 3.5rem) + .8rem);
}
.cp-camino-ante svg { position: absolute; left: 0; top: -.35rem; width: 100%; height: 130px; overflow: visible; pointer-events: none; }
.cp-camino-ante path {
  fill: none; stroke: #F0735F; stroke-width: 1.8; stroke-dasharray: 8 6;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.cp-deco-corazon-ante { --w: 2.2rem; --xr: -.7rem; --y: calc(130px - .35rem - 1.2rem); --r: 12deg; }
@media (max-width: 767.98px) { .cp-camino-ante { display: none; } }
.cp-deco-gotas-inicio { --w: 46px; --xr: -3rem; --y: 16%; --r: 80deg; }
.cp-foto--inicio img { transform: rotate(1.2deg); }
@media (max-width: 767.98px) { .cp-deco-gotas-inicio { --xr: -1rem; } }

/* Caja con orillas onduladas del cierre (celeste). */
.cp-cierre-caja { position: relative; background: url("../img/publico/deco/caja-celeste.svg") no-repeat center / 100% 100% !important; border-radius: 0 !important; }

/* ------------------------------------------------------ línea de tiempo -- */
.cp-historia-cabeza { position: relative; padding-right: 110px; }
.cp-ave--historia { width: 84px; right: 0; top: -1rem; }
.cp-etapas { margin-top: 2.5rem !important; }
.cp-camino {
  position: absolute !important;
  left: 0; right: 0; top: -6.2rem; height: 12rem;
  list-style: none; pointer-events: none; z-index: 0;
}
.cp-camino svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cp-camino path {
  fill: none; stroke: #F0735F; stroke-width: 1.8; stroke-dasharray: 8 6; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Corazón centrado justo en el hueco del trazo (y = 118 de 240 = 94px). */
.cp-camino-corazon { --w: 26px; --y: calc(94px - 10px); transform: translateX(-50%); }
.cp-camino-corazon--1 { --x: 25%; }
.cp-camino-corazon--2 { --x: 50%; }
.cp-camino-corazon--3 { --x: 75%; }
@media (max-width: 991.98px) {
  .cp-camino svg, .cp-camino-corazon { display: none; }
  .cp-etapas { margin-top: 1rem !important; }
  .cp-historia-cabeza { padding-right: 0; }
  .cp-ave--historia { display: none; }
}

/* --------------------------------------------------------------- cierre -- */
.cp-ave--cierre { width: clamp(90px, 12vw, 150px) !important; }
.cp-deco-gotas-cierre { --w: 40px; --x: clamp(5rem, 13vw, 10rem); --y: 1.2rem; --r: 30deg; }
.cp-deco-gotas-cierre2 { --w: 40px; --xr: 1.5rem; --y: .6rem; --r: 60deg; }
@media (max-width: 767.98px) { .cp-deco-gotas-cierre { --x: 58%; } }