/* ==========================================================================
HOME — sistema del prototipo «Pigyfante Home standalone.dc.html» (candidata B),
la fuente aprobada por Dani el 2026-09-07. Portado literal.
Referencia visual exacta: «Pigyfante Home.html», el mismo diseno aplanado.
Se retiraron SOLO los reset globales: en el lienzo la pagina era suya entera;
aqui habrian reescrito el resto del sitio, checkout incluido.
========================================================================== */
/* ===== RESPONSIVE SYSTEM — the only thing CSS owns. All visual styling is inline. ===== */
.pfc{container-type:inline-size;container-name:pf}
.pf{--pad:16px; --gut:12px; --sec:44px;
--h1:30px; --h2:22px; --h3:17px; --body:14px; --small:12px;
--hero-min:0px}
.r-desk{display:none!important}
.r-desk-f{display:none!important}
.r-tab{display:none!important}
.g-cat{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
padding:0 0 6px}
.g-cat::-webkit-scrollbar{display:none}
.g-cat > *{flex:0 0 74%;scroll-snap-align:start}
@container pf (min-width:600px){ .g-cat > *{flex:0 0 43%} }
.up-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.up-grid > *:nth-child(n+7){display:none}
@container pf (min-width:1024px){
.up-grid{grid-template-columns:repeat(4,1fr)}
.up-grid > *:nth-child(n+7){display:block}
}
.g-prod{display:grid;gap:var(--gut);grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.g-prod h3{min-height:2.7em;flex:1}
.g-prod h3 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.g-prod > *{height:100%}
.pf-wordmark{width:132px}
/* BANNER DE CAMPAÑA · navy premium. Móvil: texto, CTA y dos agendas debajo. */
.camp{position:relative;max-width:1400px;margin:0 auto;background:#1A2A6E;border-radius:28px;
overflow:hidden;padding:24px 22px 0;display:flex;flex-direction:column;gap:14px}
.camp-h{font-size:clamp(27px,6vw,34px)}
.camp-txt{font-size:14px;max-width:44ch}
.camp-stage{position:relative;height:152px;margin:0 -22px}
.camp-glow{position:absolute;left:50%;top:-24%;transform:translateX(-50%);width:84%;aspect-ratio:1/1;z-index:0;
background:radial-gradient(circle at 50% 45%,rgba(125,230,231,.34) 0%,rgba(125,230,231,.12) 46%,rgba(125,230,231,0) 70%)}
.camp-art{position:absolute;inset:0;z-index:2}
.camp-art img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.camp figure{margin:0;position:absolute;border-radius:14px 4px 4px 14px;overflow:hidden;background:#fff}
.camp figure img{width:100%;height:100%;object-fit:cover;display:block}
.camp-a{left:50%;bottom:0;width:104px;height:139px;transform:translateX(-64%);z-index:3;
box-shadow:0 20px 38px -14px rgba(0,0,0,.5)}
.camp-b{left:50%;bottom:12px;width:88px;height:117px;transform:translateX(14%) rotate(4deg);z-index:2;
box-shadow:0 16px 30px -14px rgba(0,0,0,.45)}
.camp-c{display:none}
.camp img.camp-char{position:absolute;left:5%;bottom:-4px;width:72px;height:auto;object-fit:contain;z-index:4}
.camp-heart{position:absolute;left:16%;top:12%;width:20px;height:20px;z-index:4;opacity:.95}
.camp-spark{position:absolute;right:14%;top:20%;width:18px;height:18px;z-index:4;opacity:.95}
@container pf (min-width:768px) and (max-width:1023px){
.camp{flex-direction:row;align-items:center;gap:0;padding:0 0 0 26px}
.camp-copy{flex:0 0 47%;padding:22px 0}
.camp-h{font-size:26px}
.camp-txt{font-size:13.5px;max-width:38ch}
.camp-stage{flex:1;min-width:0;align-self:stretch;height:auto;margin:0}
.camp-a{left:12%;bottom:0;width:34%;height:78%;transform:none}
.camp-b{left:44%;bottom:12%;width:29%;height:60%;transform:rotate(3deg)}
.camp img.camp-char{left:0;bottom:0;width:17%}
}
@container pf (min-width:768px){
.camp{padding:30px 30px 0}
.camp-stage{height:240px;margin:0 -30px}
.camp-a{width:152px;height:203px}
.camp-b{width:126px;height:168px}
.camp img.camp-char{width:104px}
}
/* Escritorio: escena horizontal, tres agendas con escala distinta. */
@container pf (min-width:1024px){
.camp{flex-direction:row;align-items:center;gap:0;padding:0 0 0 clamp(34px,3.4vw,52px);
border-radius:32px;min-height:308px}
.camp-copy{flex:0 0 44%;padding:24px 0}
.camp-h{font-size:clamp(34px,2.7vw,40px)}
.camp-txt{font-size:15px;max-width:40ch}
.camp-stage{flex:1;min-width:0;align-self:stretch;height:auto;margin:0}
.camp-glow{left:52%;top:-14%;width:78%}
.camp-a{left:14%;bottom:0;width:31%;height:82%;transform:none;z-index:3;
transition:transform .2s;box-shadow:0 30px 60px -18px rgba(0,0,0,.55)}
.camp-a:hover{transform:translateY(-3px)}
.camp-b{left:41%;bottom:14%;width:26%;height:62%;transform:rotate(3deg);z-index:2}
.camp-c{display:block;left:63%;bottom:26%;width:21%;height:48%;transform:rotate(-4deg);z-index:1;
box-shadow:0 14px 28px -14px rgba(0,0,0,.4)}
.camp img.camp-char{left:0;bottom:0;width:15%}
.camp-heart{left:11%;top:16%;width:22px;height:22px}
.camp-spark{right:20%;top:24%;width:20px;height:20px}
.camp-cta:hover .camp-arrow{transform:translateX(3px)}
}
/* NAVY · una protagonista y tres secundarias, no una fila uniforme. */
.navy-stage{position:relative;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.navy-stage > a{aspect-ratio:1/1}
.navy-lead{grid-column:1/-1;aspect-ratio:4/3!important}
.gf-shape{width:56px;height:56px;border-radius:99px}
#newsletter-email:focus-visible,#newsletter-consent:focus-visible,form button[type="submit"]:focus-visible{
outline:3px solid #FF5C8A;outline-offset:2px}
.sr-h{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.conf-band{display:flex;flex-direction:column;gap:18px}
.conf-sig{display:flex;flex-direction:column;gap:12px}
.conf-track{min-width:0}
@container pf (min-width:600px){ .conf-sig{flex-direction:row;gap:26px} }
@container pf (min-width:1024px){
.conf-band{flex-direction:row;align-items:center;justify-content:space-between;gap:30px;padding:18px 24px}
.conf-sig{flex:0 0 auto;gap:30px}
.conf-track{flex:1;max-width:460px}
}
/* HISTORIA · escena de marca con photobook y fotos que rompen el eje. */
.emo-stage{position:relative;display:flex;justify-content:center;align-items:flex-end}
img.emo-chars{position:relative;z-index:2;width:100%;max-width:420px;height:auto;display:block}
@container pf (min-width:1024px){
img.emo-chars{max-width:546px;width:100%}
}
/* NEWSLETTER · escena postal. Móvil: sobre y personajes en flujo, sin absolutos frágiles. */
.news-scene{position:relative;display:flex;justify-content:center;align-items:flex-end;
min-height:214px;padding-top:16px}
.news-blob{position:absolute;right:50%;bottom:0;transform:translateX(50%);width:78%;aspect-ratio:1/.86;z-index:0;
pointer-events:none;background:radial-gradient(58% 60% at 50% 55%,#DFF7F8 0%,#EAF8FA 54%,rgba(234,248,250,0) 74%);
border-radius:56% 44% 50% 50%/48% 52% 48% 52%}
.news-scene img.news-chars{position:relative;z-index:4;width:100%;max-width:250px;height:auto;
object-fit:contain;display:block;margin-bottom:clamp(-30px,-2.4vw,-20px)}
@container pf (min-width:768px){
.news-scene{min-height:250px}
.news-scene img.news-chars{max-width:280px}
}
@container pf (min-width:1024px){
.news-scene{min-height:262px;align-items:flex-end;justify-content:flex-end;padding-top:12px}
.news-blob{right:-4%;transform:none;width:82%}
.news-scene img.news-chars{max-width:none;width:78%}
}
.nav-row{overflow-x:auto;scrollbar-width:none}
.nav-row::-webkit-scrollbar{display:none}
.gf-wide .gf-shape{width:64px;height:64px;border-radius:56% 44% 52% 48%/48% 52% 48% 52%}
@container pf (min-width:1024px){
.g-occ{grid-template-columns:repeat(4,minmax(0,1fr))!important}
/* Seis ocasiones en cuatro columnas: si la primera y la ultima ocupan dos,
suman ocho huecos y la rejilla cierra exacta, sin espacios muertos. */
.gf-big{grid-column:span 2}
.gf-wide{grid-column:span 2}
.gf-wide .gf-shape{width:84px;height:84px}
}
.navy-d{grid-column:1/-1;aspect-ratio:16/7!important}
.navy-star,.navy-heart,.navy-line{display:none}
@container pf (min-width:768px){
.navy-stage{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,132px);gap:14px}
.navy-lead{grid-column:1/3;grid-row:1/4;aspect-ratio:auto!important}
.navy-b{grid-column:3;grid-row:1}
.navy-c{grid-column:3;grid-row:2}
.navy-d{grid-column:3;grid-row:3;aspect-ratio:auto!important}
.navy-stage > a:not(.navy-lead){aspect-ratio:auto!important}
}
@container pf (min-width:1024px){
.navy-stage{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:250px 190px;gap:16px}
.navy-lead{grid-column:1/8;grid-row:1/3;aspect-ratio:auto!important}
.navy-b{grid-column:8/13;grid-row:1;aspect-ratio:auto!important}
.navy-c{grid-column:8/11;grid-row:2;aspect-ratio:auto!important}
.navy-d{grid-column:11/13;grid-row:2;aspect-ratio:auto!important}
.navy-star{display:block;position:absolute;left:-18px;top:-14px;width:22px;height:22px;opacity:.9}
.navy-heart{display:block;position:absolute;right:-14px;bottom:18%;width:20px;height:20px;opacity:.9}
.navy-line{display:block;position:absolute;left:44%;bottom:-26px;width:24%;height:36px;opacity:.8}
}
/* ESCENA DE REGALO. Móvil: protagonista + un objeto delante, personajes discretos. */
.scene{position:relative;padding:2px 0 22px}
.scene figure{margin:0}
.scene img{display:block;width:100%;height:100%;object-fit:cover}
.scene-hero{position:relative;width:62%;margin-left:auto;border-radius:24px;overflow:hidden;background:#fff;
box-shadow:0 22px 44px -18px rgba(26,42,110,.34);aspect-ratio:3/4;z-index:2}
.scene-hero figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:99px;
background:rgba(255,255,255,.94);font-size:11.5px;font-weight:800;color:#0A1F66;letter-spacing:.01em}
.scene-back{display:none}
.scene-front{position:absolute;left:0;bottom:36px;width:34%;border-radius:18px;overflow:hidden;
background:#fff;aspect-ratio:1/1;box-shadow:0 16px 32px -16px rgba(26,42,110,.32);z-index:3}
.scene img.scene-chars{position:absolute;left:1%;bottom:-4px;width:37%;height:auto;object-fit:contain;z-index:4}
@container pf (min-width:768px){
.scene{padding:10px 0 40px}
.scene-hero{width:66%}
.scene-front{width:34%;bottom:64px}
.scene img.scene-chars{width:38%}
}
/* Escritorio: asimetría real — protagonista, objeto detrás, objeto delante,
personajes interactuando y microelementos dirigiendo la mirada. */
@container pf (min-width:1024px){
.scene{padding:0}
.scene-hero{position:relative;width:58%;margin-left:8%;aspect-ratio:4/5;border-radius:26px;z-index:3;
transform:rotate(-1.2deg);box-shadow:0 30px 60px -22px rgba(26,42,110,.4)}
.scene-hero figcaption{left:14px;bottom:14px;font-size:12.5px;padding:7px 14px}
.scene-back{display:none;position:absolute;right:2%;top:6%;width:42%;aspect-ratio:4/5;z-index:2;
border-radius:22px;overflow:hidden;background:#fff;transform:rotate(2deg);
box-shadow:0 22px 44px -20px rgba(26,42,110,.32)}
.scene-front{left:2%;bottom:14%;width:31%;aspect-ratio:1/1;border-radius:20px;z-index:4;
transform:rotate(-2deg);box-shadow:0 20px 40px -18px rgba(26,42,110,.34)}
.scene img.scene-chars{left:17%;bottom:-22px;width:40%;z-index:5}
}
.g-occ{display:grid;gap:var(--gut);grid-template-columns:repeat(2,minmax(0,1fr))}
.g-step{display:grid;gap:var(--gut);grid-template-columns:repeat(2,minmax(0,1fr))}
.g-rev{display:grid;gap:var(--gut);grid-template-columns:repeat(1,minmax(0,1fr))}
.g-blog{display:grid;gap:var(--gut);grid-template-columns:repeat(1,minmax(0,1fr))}
.g-trust{display:grid;gap:22px;grid-template-columns:repeat(1,minmax(0,1fr))}
.g-hero{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
.g-pers{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.g-emo{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.g-news{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.g-foot{display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
.swipe{display:flex;gap:var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin:0 calc(var(--pad)*-1);padding-left:var(--pad);padding-right:var(--pad)}
.swipe > *{scroll-snap-align:start;flex:0 0 74%;max-width:280px}
@container pf (min-width:600px){
.pf{--pad:24px;--gut:16px;--sec:46px;--h1:38px;--h2:26px;--h3:18px;--body:15px}
.g-prod{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.g-occ{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-step{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-rev{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-blog{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
.swipe > *{flex:0 0 42%}
}
@container pf (min-width:768px){
.pf{--pad:32px;--sec:52px;--h1:42px;--h2:29px;--hero-min:0px}
.r-tab{display:block!important}
.g-hero{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:center}
.hero-col{height:470px}
.g-pers{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.g-emo{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
.g-news{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:center;gap:30px}
.g-foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px}
}
@container pf (min-width:768px) and (max-width:1023px){
.g-hero{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:18px;align-items:center}
.g-hero > *:first-child > h1{font-size:38px}
.scene{padding:0}
}
@container pf (min-width:860px){
.g-prod{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container pf (min-width:1024px){
.pf{--pad:40px;--gut:22px;--sec:54px;--h1:50px;--h2:38px;--h3:21px;--body:16.5px;--small:13px;--hero-min:0px}
.r-desk{display:block!important}
.r-desk-f{display:flex!important}
.r-mob{display:none!important}
.pf-wordmark{width:174px}
.hero-col{height:660px}
.g-cat{display:grid;gap:14px;grid-template-columns:repeat(6,minmax(0,1fr));
overflow:visible;scroll-snap-type:none;padding:0}
.g-cat > *{flex:auto;border:0!important;box-shadow:none!important}
.g-cat img{aspect-ratio:4/3!important}
.g-prod{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-occ{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-rev{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-trust{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.swipe{display:grid;gap:var(--gut);grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:0}
.swipe > *{max-width:none;flex:none}
}
@container pf (min-width:1280px){
.pf{--pad:48px;--h1:52px;--h2:40px}
}
@container pf (min-width:1600px){ .pf{--pad:56px;--sec:68px} }
@keyframes pfBenefit{0%,26%{transform:translateY(0)}33%,59%{transform:translateY(-100%)}66%,92%{transform:translateY(-200%)}100%{transform:translateY(-300%)}}
@keyframes pfPop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes pfFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes pfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pfSlide{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes pfRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
.pf-benefit-track{animation:pfBenefit 12s cubic-bezier(.6,0,.4,1) infinite}
.pf-pop{animation:pfPop .4s ease}
.pf-float{animation:pfFloat 6s ease-in-out infinite}
.pf-in{animation:pfIn .28s ease both}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important}}
/* --------------------------------------------------------------------------
ANCHO A SANGRE. El diseno usa consultas de CONTENEDOR, no media queries, y
Storefront lo encerraba en `.col-full` (max-width 1063,98 px): a 1440 se
quedaba en el tramo de 1024 y todo salia un 26 % mas pequeno. Se le devuelve
el ancho de ventana. Solo afecta a `.pigyhome`, que solo existe en la portada.
-------------------------------------------------------------------------- */
.pigyhome{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:100vw; }
.site-content .col-full:has(> .pigyhome){ padding-left:0; padding-right:0; max-width:none; }
/* Mismo reset acotado que en el marco, y por el mismo motivo. */
.pigyhome ul,
.pigyhome ol{ margin:0; padding:0; list-style:none; }
.pigyhome li{ list-style:none; }
.pigyhome a{ text-decoration:none; }
.pigyhome p{ margin:0; }
.pigyhome h1,.pigyhome h2,.pigyhome h3,.pigyhome h4{ margin:0; }
.pigyhome button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
/* --------------------------------------------------------------------------
«Hechos una sola vez, para una sola persona». Los nombres reales de categoria
—«Cuadros familiares personalizados»— son mucho mas largos que los del
prototipo y en la tarjeta estrecha se partian casi letra a letra.
Se acotan a dos lineas, con un punto menos de tamaño SOLO aqui y corte por
silaba. Ni una medida de la rejilla cambia.
-------------------------------------------------------------------------- */
.pigyhome .g-cat .cat h3,
.pigyhome .pf-escena-nombre{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
hyphens: auto;
line-height: 1.25;
}
/* La reduccion de tamano es SOLO en las escenas de la seccion 8, que es donde el
nombre real desbordaba. Las tarjetas de categoria conservan el suyo.
El `display` lleva `!important` porque el marcado del prototipo trae
`display:block` EN LINEA, y un estilo en linea gana a una clase: sin esto el
`-webkit-line-clamp` no recortaba nada y el nombre seguia en seis lineas. */
.pigyhome .pf-escena-nombre{
font-size: 15px !important;
display: -webkit-box !important;
}
/* ══════════════════════════════════════════════════════════════════════════
SECCIÓN 14 · NOVEDADES
Port de `16_EVIDENCIAS/MIG-0179_NOVEDADES/REFERENCIA.png`. Colores
muestreados del PNG. Todo cuelga de `.pf-news`, y esta hoja solo se encola
en la portada: no puede afectar a ninguna otra pantalla.
══════════════════════════════════════════════════════════════════════════ */
/* La secuencia franja → novedades → pie tiene que leerse como una sola
composición. Los 64px de `--sec * .8` abrían un desierto blanco justo antes
del pie; abajo no se separa nada: la tarjeta entrega directamente al azul.
MIG-0257 · al retirar el bloque de blog del pie, «Comprar aquí es seguro»
quedó pegado al newsletter (14px medidos) y hubo que abrir este margen.
MIG-0258 · y ahora se ajusta SOLO, que es lo que hacía falta: la sección de
opiniones solo se pinta si Google ha contestado, así que el newsletter unas
veces la tiene encima y otras no. Por defecto se separa; cuando las opiniones
van justo antes, se pega a ellas, porque ese bloque ya trae su propio aire. */
.pf-news{ margin:calc(var(--sec)*.62) 0 0; padding-bottom:16px; background:#fff; }
.pfop + .pf-news{ margin-top:clamp(12px,1vw,15px); }
/* Respiro blanco antes del pie. Va como PADDING de la sección, no como margen:
un margen inferior colapsaría a través de los contenedores y dejaría ver el
fondo azul del documento en lugar de blanco. */
@container pf (min-width:760px){ .pf-news{ padding-bottom:20px; } }
@container pf (min-width:1080px){ .pf-news{ padding-bottom:24px; } }
/* MIG-0332 · Separación clara entre «Te avisamos antes que a nadie» y el footer (solo portada):
el relleno inferior de la propia sección, que es blanca. Sin bloques vacíos, sin tocar el footer. */
.pigyhome .pf-news{ padding-bottom:64px; }
@media (max-width:1279px){ .pigyhome .pf-news{ padding-bottom:48px; } }
@media (max-width:1023px){ .pigyhome .pf-news{ padding-bottom:40px; } }
@media (max-width:767px){ .pigyhome .pf-news{ padding-bottom:32px; } }
/* Mismo contenedor que el pie: `min(1480, 100%) − 2×32` = 1376px de ancho útil
a 1440. Antes eran 1296 y la tarjeta se veía angosta contra un pie a ancho
completo. Centrada y sin llegar al borde. */
.pf-news-marco{ max-width:1480px; margin:0 auto; padding:0 var(--pad); }
/* Mismo acolchado que el contenedor del pie a partir de 900: así ambos dan
exactamente el mismo ancho útil. Por debajo manda `--pad`, porque un valor
fijo estrechaba la tarjeta en móvil (358 → 326px). */
@container pf (min-width:900px){ .pf-news-marco{ padding:0 32px; } }
.pf-news-tarjeta{
position:relative; border-radius:30px; overflow:hidden;
/* Degradado muy leve en vez de un plano: da profundidad sin tocar identidad
ni recurrir a sombras. */
background:linear-gradient(168deg,#F1F7FD 0%,#E9F2FB 46%,#E2EDF9 100%);
display:grid; gap:22px; grid-template-columns:minmax(0,1fr);
padding:clamp(18.5px,2vw,24px) clamp(20px,3vw,44px) clamp(16.5px,1.75vw,20px);
}
/* ── Columna izquierda ───────────────────────────────────────────────────── */
.pf-news-texto{ max-width:680px; }
/* Rótulo. En la referencia NO es una píldora: es un guion coral y la palabra en
versalitas. Se replica tal cual. */
.pf-news-badge{
display:flex; align-items:center; gap:11px; margin:0 0 9px;
font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
color:#0A1F66;
}
.pf-news-badge span{ width:26px; height:3.5px; border-radius:99px; background:#FA3C78; flex:none; }
.pf-news-titulo{
font-family:Nunito, sans-serif; font-size:clamp(27px,2.6vw,36px); font-weight:900;
color:#0A1F66; line-height:1.12; letter-spacing:-.01em; margin:0 0 7px;
}
.pf-news-desc{ font-size:clamp(15px,1.15vw,17px); color:#4A5590; line-height:1.55; margin:0 0 14px; max-width:60ch; }
/* ── Formulario ──────────────────────────────────────────────────────────── */
/* El formulario ahora envuelve también la casilla (MIG-0183). La disposición
en fila que antes tenía el propio