/* ==========================================================================
   Inicio — adornos y formas del mockup de Marina (12090 / 12103; 30-sep,
   ticket 291820): "el diseño debe quedar IDÉNTICO, gotitas y elementos
   incluidos". Va aparte de publico-home.css para no pasar de 300 líneas; los
   dibujos y la clase base .deco están en publico-deco.css.
   ========================================================================== */

/* ---------------------------------------------------------------- banner -- */
/* Fondo de la cara 1: el tono oscuro cubre TODO el lema (los dos renglones) y
   el claro arranca, en onda, justo arriba de las áreas (Marina 7-oct, adj.
   13204). El claro va pegado a .ph-mini-areas en vez de un % fijo, así queda
   en su lugar en cualquier ancho; llega hasta el borde de abajo en un solo
   beige (Marina 30-sep). */
.ph-cara--1 { isolation: isolate; background: linear-gradient(180deg, #FFF3E6, #FDEDE2); }
.ph-mini-areas { position: relative; }
.ph-mini-areas::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -3.2rem; left: -3rem; right: -45%; bottom: -100vh;
  background:
    url("../img/publico/deco/onda-clara-borde.svg") no-repeat top / 100% 4rem,
    linear-gradient(#FFF9F2, #FFF9F2) no-repeat 0 3.95rem / 100% 100%;
}
/* La onda (Marina 7-oct: "la misma formita que antes, como ondita") baja bajo
   «yo crezco contigo.» y sube hacia la derecha, junto al logo y la foto. */
.ph-cara1-cabeza { position: relative; padding-left: clamp(2.2rem, 4.5vw, 3.8rem); }
.ph-deco-corazon { --w: clamp(34px, 4.2vw, 60px); --x: -.4rem; --y: 26%; --r: -12deg; }
.ph-deco-gotas-lema { --w: clamp(26px, 3vw, 42px); --x: clamp(.6rem, 2vw, 1.8rem); --y: -1.3rem; --r: -20deg; }
.ph-lema, .ph-cara1-logo { position: relative; z-index: 1; }
/* Camino y destello viven dentro del logo, pegados al pajarito: el camino
   termina en sus patas con el corazón-lazo justo antes, y el destello sale
   junto a su cabeza. En escritorio TODO el encabezado (sangría, lema, logo,
   camino) se mide en cqw del cuerpo, así guarda la misma proporción del
   mockup en cualquier ancho: el logo nunca alcanza la foto y el camino corre
   por el hueco entre los dos renglones del lema sin tocarlos. El SVG tiene
   1 unidad = 1cqw y escala parejo, así el trazo queda fino (~1.6px a 1440). */
.ph-deco-camino-lema, .ph-deco-gotas-logo { display: none; }
@media (min-width: 992px) {
  .ph-cara1-cuerpo { container-type: inline-size; }
  .ph-cara1-cabeza { flex-wrap: nowrap; align-items: flex-start; gap: 0; padding-left: 9cqw; }
  .ph-lema { font-size: 7.2cqw; }
  .ph-lema span { white-space: nowrap; }
  .ph-lema-2 { margin-top: .45em; }
  .ph-cara1-logo { font-size: 7cqw !important; margin: 0 0 0 auto; }
  /* El corazón del banner va SUELTO y el camino arranca solo, abajo del lema
     (Marina 7-oct, adj. 13222: sin tramo diagonal que lo una al corazón). */
  .ph-deco-camino-lema { display: block; --w: 72cqw; --xr: calc(100% - .8cqw); --y: 0; --ar: 72 / 14; --z: -1; }
  .ph-deco-gotas-logo { display: block; --w: 3.6cqw; --x: -2.6cqw; --y: -2.8cqw; --r: -40deg; }
}

/* Nombres de las áreas sobre una nube, como en el mockup. */
.ph-mini-icono { position: relative; }
.ph-mini-nombre { background: no-repeat center / 100% 100% !important; padding: .55rem 1.6rem .45rem; border-radius: 0; }
.ph-mini--nido .ph-mini-nombre, .ph-mini--cuidame .ph-mini-nombre { background-image: url("../img/publico/deco/nube-rosa.svg") !important; }
.ph-mini--kinder .ph-mini-nombre { background-image: url("../img/publico/deco/nube-celeste.svg") !important; }
.ph-mini--fiestas .ph-mini-nombre { background-image: url("../img/publico/deco/nube-amarilla.svg") !important; }
.ph-mini-nombre { font-weight: 700; }
.ph-mini--nido .ph-mini-nombre { color: #E4432F; }
.ph-mini--cuidame .ph-mini-nombre { color: #E4432F; }
.ph-mini--fiestas .ph-mini-nombre { color: #A66C00; }  /* Marina 7-oct: Fiestas en amarillo oscuro de su área (3.6:1 sobre la nube, texto grande) */
.ph-mini-gotas { --w: 26px; }
.ph-mini--nido .ph-mini-gotas { background-image: url("../img/publico/deco/gotas-azul.svg"); --x: -26px; --y: 10px; --r: -60deg; }
.ph-mini--kinder .ph-mini-gotas { background-image: url("../img/publico/deco/gotas-coral.svg"); --xr: -28px; --y: 4px; --r: 45deg; }
.ph-mini--fiestas .ph-mini-gotas { display: none; }
.ph-mini--cuidame .ph-mini-gotas { background-image: url("../img/publico/deco/gotas-amarillo.svg"); --xr: -28px; --y: 10px; --r: 60deg; }

/* Foto con la orilla izquierda en onda + gotitas amarillas y celestes. */
.ph-cara1-foto img {
  border-radius: 0 !important;
  -webkit-mask: url("../img/publico/deco/forma-banner.svg") no-repeat center / 100% 100%;
  mask: url("../img/publico/deco/forma-banner.svg") no-repeat center / 100% 100%;
}
.ph-deco-gotas-foto { --w: 42px; --x: -4px; --y: 26%; --r: -80deg; --z: 3; }
.ph-deco-gotas-foto2 { --w: 38px; --xr: 10px; --yb: 12px; --r: 130deg; --z: 3; }

.ph-deco-gotas-cara2 { --w: 46px; --x: clamp(.5rem, 5vw, 4.5rem); --y: 1.6rem; --r: -70deg; }
.ph-deco-gotas-cara2b { --w: 40px; --xr: 27%; --y: .8rem; --r: 10deg; }
.ph-deco-gotas-nota { --w: 36px; --xr: clamp(.5rem, 2.5vw, 2rem); --yb: 5.6rem; --r: 60deg; }
@media (max-width: 991.98px) {
  .ph-cara1-cabeza { padding-left: 2.4rem; }
  .ph-cara1-foto img { -webkit-mask: none; mask: none; }
  .ph-deco-gotas-foto, .ph-deco-gotas-foto2, .ph-deco-gotas-nota { display: none; }
}

/* ----------------------------------------------------------------- áreas -- */
.ph-titulo--gotas { position: relative; display: inline-block; }
.ph-titulo--gotas .deco { --w: 34px; --xr: -44px; --y: -2px; --r: 80deg; }
.ph-area-foto img {
  border-radius: 0 !important;
  -webkit-mask: url("../img/publico/deco/forma-tarjeta.svg") no-repeat center / 100% 100%;
  mask: url("../img/publico/deco/forma-tarjeta.svg") no-repeat center / 100% 100%;
}

/* -------------------------------------------------------------- por qué -- */
/* Orilla de arriba en onda (antes era un arco) y onda crema al pie. */
.ph-porque::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: 40px;
  background: url("../img/publico/deco/onda-celeste.svg") no-repeat bottom / 100% 100%;
}
.ph-porque-grid { position: relative; }
.ph-porque-texto { position: relative; }
.ph-porque-frase > span { display: block; }
.ph-porque-frase > span:nth-child(2) { padding-left: .4em; }
.ph-porque-frase > span:nth-child(3) { padding-left: 1.6em; }
.ph-porque-frase > span:nth-child(4) { padding-left: 3.4em; position: relative; }
.ph-deco-corazon-porque { --w: 1.2em; display: inline-block !important; position: relative !important; vertical-align: -.25em; --r: -8deg; }
.ph-porque-foto { position: relative; }
.ph-porque-foto img {
  border-radius: 0 !important;
  aspect-ratio: 13 / 10 !important;
  max-width: 470px !important;
  -webkit-mask: url("../img/publico/deco/forma-mancha.svg") no-repeat center / 100% 100%;
  mask: url("../img/publico/deco/forma-mancha.svg") no-repeat center / 100% 100%;
}
.ph-deco-gotas-porque { --w: 48px; --x: 0; --y: -8px; --r: -60deg; }
.ph-deco-punto-porque { --w: 20px; --xr: 0; --y: 8%; --c: #F0735F; }
.ph-deco-gotas-ave { --w: 36px; --xr: 70px; --yb: 12%; --r: -40deg; }
.ph-deco-camino-porque { --w: 40%; --xr: 60px; --yb: -2.4rem; --ar: 10 / 1.2; --z: 0; }
.ph-porque-ave { bottom: -3.2rem !important; width: 76px !important; }

/* ------------------------------------------------------------- valores -- */
/* Franja crema con orilla de arriba en onda y el caminito punteado en ONDAS
   con lazos de corazón por debajo de los valores (captura 12158, Marina). */
.ph-etapas::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: 34px;
  background: url("../img/publico/deco/onda-crema.svg") no-repeat bottom / 100% 100%, var(--ph-celeste);
}
.ph-etapas-fila { gap: 1.25rem !important; }
.ph-valores { gap: .75rem 1.1rem !important; flex-wrap: nowrap !important; }
.ph-valor { font-size: clamp(1.1rem, 1.6vw, 1.45rem) !important; }
@media (max-width: 1199.98px) { .ph-valores { flex-wrap: wrap !important; } }
.ph-etapas-fila { position: relative; flex-wrap: nowrap; }
.ph-valores-caja { position: relative; flex: 1; min-width: 0; padding-bottom: 1.6rem; }
.ph-valores { padding-bottom: 0; }
.ph-valor svg { width: 36px; height: 36px; stroke-width: 2.1; }
.ph-valores-camino { position: absolute; left: -1%; right: 0; bottom: -.4rem; height: 2rem; pointer-events: none; }
.ph-valores-camino .deco--camino { --x: 0; --y: 0; --w: 100%; --ar: auto; height: 100%; }
@media (max-width: 767.98px) {
  .ph-etapas-fila { flex-wrap: wrap; }
  .ph-valores-caja { flex-basis: 100%; }
}

/* ---------------------------------------------------------- testimonios -- */
.ph-testimonios { position: relative; overflow: hidden; }
.ph-testimonios::before, .ph-testimonios::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  background: no-repeat center / 100% 100%;
}
.ph-testimonios::before { right: -6%; top: -60px; width: 34%; height: 190px; background-image: url("../img/publico/deco/mancha-rosa.svg"); }
.ph-testimonios::after { left: 0; right: 0; bottom: 0; height: 90px; background-image: url("../img/publico/deco/onda-crema.svg"); opacity: .8; }
.ph-testimonios .pb-wrap { position: relative; z-index: 1; }
.ph-testimonios-head { position: relative; }
.ph-titulo-1, .ph-titulo-2 { position: relative; }
.ph-titulo-1 { display: inline-block !important; }
.ph-deco-gotas-t1 { --w: 38px; --xr: -50px; --y: -12px; --r: 70deg; }
.ph-deco-gotas-t2 { --w: 38px; --x: -46px; --y: 8px; --r: -100deg; }
.ph-deco-camino-testimonios { --w: 44%; --xr: 0; --y: 22%; --ar: 400 / 66; --z: 0; }

/* Tarjetas con orillas onduladas (mockup 94561, Marina 7-oct): arriba, al
   centro, el pajarito de su área sobresaliendo de la orilla y debajo el
   NOMBRE del área en su color; luego comillas, cita y firma. */
.pb-carrusel-pista { padding: 3.9rem .5rem 1.25rem; }  /* el pajarito ya baja dentro de la tarjeta */
.pb-testimonio { background: no-repeat center / 100% 100% !important; border-radius: 0; }
.pb-testimonio--nido, .pb-testimonio--cuidame { background-image: url("../img/publico/deco/tarjeta-rosa.svg") !important; }
.pb-testimonio--kinder { background-image: url("../img/publico/deco/tarjeta-celeste.svg") !important; }
.pb-testimonio--fiestas { background-image: url("../img/publico/deco/tarjeta-amarilla.svg") !important; }
.pb-testimonio--nido, .pb-testimonio--cuidame { --pb-t-color: #F0735F; }
.pb-testimonio--kinder { --pb-t-color: #3E6CB0; }
.pb-testimonio--fiestas { --pb-t-color: #F5B81C; }
/* Firma de la mamá EXACTAMENTE en el mismo tono que la palabra del área de su
   tarjeta (Marina 7-oct, 2a vuelta: "el mismo tono exacto del título"). */
.pb-testimonio .pb-testimonio-firma { color: var(--pb-t-color); }

.pb-testimonio-cabeza {
  position: absolute; left: 0; right: 0; top: -3rem; z-index: 2;
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.pb-testimonio-ave { position: static !important; display: block; height: 96px !important; width: auto; transform: none !important; }
.pb-testimonio-area {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.65rem; line-height: 1; letter-spacing: .01em; color: var(--pb-t-color);
  margin-top: .85rem;    /* Marina 7-oct (2a vuelta): bloque más abajo, ya dentro de la tarjeta,
                            y con aire entre pajarito y palabra; nunca se tocan */
}
/* Rayitas del mockup a los dos lados del pajarito, iguales en las 4 áreas
   (Marina 7-oct: Nido ya no lleva corazón a la derecha). */
.pb-testimonio-deco, .pb-testimonio-deco2 { z-index: 2; }
.pb-testimonio-deco { background-image: url("../img/publico/deco/gotas-coral.svg"); --w: 30px; --x: calc(50% - 82px); --y: .4rem; --r: -60deg; }
.pb-testimonio-deco2 { background-image: url("../img/publico/deco/gotas-coral.svg"); --w: 30px; --x: calc(50% + 52px); --y: .4rem; --r: 60deg; }
.pb-testimonio--kinder .pb-testimonio-deco, .pb-testimonio--fiestas .pb-testimonio-deco { background-image: url("../img/publico/deco/gotas-amarillo.svg"); }
.pb-testimonio--kinder .pb-testimonio-deco2, .pb-testimonio--fiestas .pb-testimonio-deco2 { background-image: url("../img/publico/deco/gotas-amarillo.svg"); }
.pb-testimonio blockquote { padding: 6.4rem 1.7rem 1.75rem; }  /* reserva el alto de pajarito + palabra */
.pb-testimonio .pb-testimonio-comillas { height: 3.4rem; }
.pb-testimonio .pb-testimonio-cita { line-height: 1.55; }
/* El mockup reparte las 4 tarjetas a casi todo el ancho: en escritorio el
   carrusel se sale del contenedor y las flechas quedan en la orilla. */
@media (min-width: 1200px) {
  .ph-testimonios .pb-carrusel { margin-inline: -4rem; gap: .5rem; }
  .ph-testimonios .pb-carrusel-pista { gap: 1.25rem; grid-auto-columns: calc((100% - 3.75rem) / 4); }
}
.pb-testimonio-comillas { color: var(--pb-t-color) !important; }


/* Tarjeta del banner que contiene las dos caras y la franja de la Tienda
   (Marina, 7-oct, mockup 94555). La sombra y la orilla pasan de las caras a
   la tarjeta; el fondo es el mismo beige claro de la parte baja de la cara 1. */
.ph-banner-tarjeta {
  background: #FFF9F2;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(51, 66, 74, .12);
  padding-bottom: clamp(.6rem, 1.2vw, 1rem);
}
.ph-banner-tarjeta .ph-cara { box-shadow: none; }
.ph-banner:not([data-ph-listo]) .ph-banner-tarjeta .ph-cara--2 { margin-top: 0; }

/* Tarjetas de áreas con salto escrito a mano: se respetan sus renglones tal
   cual y nunca se envuelven a uno extra (Marina 7-oct: Kínder en 2 renglones,
   Cuídame en 2). */
.ph-area--kinder .ph-area-texto, .ph-area--fiestas .ph-area-texto, .ph-area--cuidame .ph-area-texto { white-space: pre; }
/* Con las 4 tarjetas en una fila la columna de texto es angosta: la foto cede
   un poco para que «Un lugar para crecer» quepa con aire, sin pegarse a la orilla. */
@media (min-width: 1200px) { .ph-area { grid-template-columns: 41% minmax(0, 1fr); } }