/* v14 (20/9/2026, auditoría F · velocidad móvil): los 13 fondos de ambiente de las secciones (~300 KB) ya NO se piden al abrir la página:
cada sección los pinta solo cuando lleva la clase atm-on, que g2.js v4 le pone al acercarse (media pantalla antes). Sin JS: color liso de la sección.
La primera pantalla del pack (--atm-pack) sigue cargando al abrir: es lo que se ve primero. */
/* acabado v12 (19/9/2026, fila 20): solo cambian las dos pilas de letra de la primera pantalla (añaden el respaldo con medidas). */
/* =====================================================================
ACABADO «PREMIUM Y CÁLIDO» · 16/9/2026
Capa de acabado sobre G2, sacada de la prueba con ChatGPT que eligió Javi
(comparador: informes/comparador_chatgpt_g2.html · imágenes 02, 06, 08, 11 y 14).
Se carga la ÚLTIMA, después de g2.css y de los estilos de cada sección.
Idea en una línea: la misma web, con luz, relieve y toques arena.
Reglas del acabado (detalle en SISTEMA_DISENO_PXN.md):
- Luz: brillo interior arriba en botones y tarjetas (inset 0 1px 0 blanco), halos de color
suaves (nunca sombras negras cortas: amplias y transparentes).
- Calidez: el ámbar/arena solo como luz y acento (el momento estrella, sellos, iconos de garantía),
nunca como fondo de un botón.
- Vidrio: sobre fondos oscuros, cajas translúcidas con borde fino claro.
- Profundidad: el móvil de la hoja real, en perspectiva en ordenador, sobre un pedestal arena.
- Nada de letra manuscrita: solo Fraunces y Manrope.
===================================================================== */
:root{
--g3-luz:inset 0 1px 0 rgba(255,255,255,.38);
--g3-vidrio:rgba(255,255,255,.08);
--g3-vidrio-borde:rgba(255,255,255,.18);
--g3-halo-cian:0 0 0 6px rgba(10,183,198,.10),0 30px 70px rgba(10,183,198,.28);
--g3-halo-verde:0 0 0 4px rgba(39,199,116,.18),0 18px 40px rgba(26,157,90,.40);
--g3-halo-ambar:0 0 0 1px rgba(240,180,41,.55),0 20px 60px rgba(240,180,41,.32);
--g3-oro:linear-gradient(135deg,#FFE7A3 0%,#F0B429 55%,#D9951A 100%);
--g3-arena-luz:linear-gradient(135deg,#FFF8E6 0%,#F8EBC8 60%,#F2DDA8 100%);
--g3-sombra-amplia:0 24px 60px rgba(15,41,66,.14)
}
/* ---------- botones: brillo y relieve ---------- */
.g2 .g2-btn{box-shadow:var(--g3-luz),var(--g3-sombra-amplia)}
.g2 .g2-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 48%);pointer-events:none}
.g2 .g2-btn--compra{box-shadow:var(--g3-luz),var(--g3-halo-verde)}
.g2 .g2-btn--compra .fl{background:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.g2 .g2-btn--linea{background:var(--g3-vidrio);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),var(--g3-luz);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.g2 .g2-btn--linea .fl{background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.g2 .g2-btn--claro,.g2 .g2-btn--suave{box-shadow:inset 0 1px 0 #fff,var(--g3-sombra-amplia)}
/* ---------- tarjetas y sombras: amplias y transparentes ---------- */
.g2 .g2-tarj{box-shadow:inset 0 1px 0 #fff,0 18px 44px rgba(15,41,66,.08)}
.g2 .g2-plega[open]{box-shadow:0 22px 50px rgba(15,41,66,.12)}
/* =====================================================================
PORTADA · 1 · primera pantalla (imagen 02 en móvil, 06 en ordenador)
===================================================================== */
.g2-hero::after{content:"";position:absolute;z-index:-1;inset:auto -20% -30% auto;width:min(120vw,900px);height:420px;background:radial-gradient(closest-side,rgba(240,180,41,.20),rgba(240,180,41,0));pointer-events:none}
.g2-hero .iso{opacity:.13;filter:drop-shadow(0 0 24px rgba(127,227,236,.35))}
/* selector «Estoy embarazada / Ya ha nacido»: vidrio con relieve */
.g2 .g2-hero .g2-conmuta{background:var(--g3-vidrio);box-shadow:inset 0 0 0 1px var(--g3-vidrio-borde),inset 0 2px 8px rgba(0,0,0,.12)}
.g2 .g2-hero .g2-conmuta button[aria-pressed="true"]{box-shadow:inset 0 -2px 0 rgba(15,41,66,.06),0 10px 24px rgba(0,0,0,.22)}
/* el mensaje del selector, en una caja de vidrio con el check en círculo */
.g2-hero .msg{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);max-width:48ch}
.g2-hero .msg .i{box-sizing:content-box;width:14px;height:14px;padding:4px;border-radius:50%;background:rgba(127,227,236,.18);margin-top:0}
/* «Pago único · Precio a la vista · Sin extras»: una barra con iconos ámbar */
.g2-hero .g2-chips-mini{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:0;margin-top:16px;padding:10px 6px;border-radius:16px;background:var(--g3-vidrio);box-shadow:inset 0 0 0 1px var(--g3-vidrio-borde),var(--g3-luz);font-size:13.5px}
.g2-hero .g2-chips-mini span{flex:1 1 0;justify-content:center;padding:2px 6px;min-width:0}
.g2-hero .g2-chips-mini span+span{border-left:1px solid rgba(255,255,255,.16)}
.g2-hero .g2-chips-mini .i{color:var(--g2-ambar)}
@media (max-width:560px){
/* en móvil cada aviso ocupa lo que mide (no tercios iguales): así «Precio a la vista» no pisa la raya */
.g2-hero .g2-chips-mini{padding:10px 4px;font-size:12.5px}
.g2-hero .g2-chips-mini span{flex:1 1 auto;gap:4px;padding:2px 5px}
.g2-hero .g2-chips-mini .i{width:14px;height:14px}
/* «Estoy embarazada» es más largo que «Ya ha nacido»: cada botón mide lo suyo, no mitades iguales */
.g2 .g2-hero .g2-conmuta button{flex:1 1 auto;font-size:14.5px;gap:6px;padding:12px 10px}
.g2 .g2-hero .g2-conmuta button .i{width:16px;height:16px}
}
@media (max-width:380px){
.g2 .g2-hero .g2-conmuta button{font-size:14px;padding:12px 8px}
.g2 .g2-hero .g2-conmuta button .i{display:none}
}
@media (min-width:700px){.g2-hero .g2-chips-mini{max-width:560px;padding:14px 10px;font-size:15px}}
/* ordenador: móvil en perspectiva sobre un pedestal arena, con luz dorada detrás */
@media (min-width:1000px){
.g2-hero .visual{padding:30px 0 70px;perspective:1600px}
.g2-hero .visual::before{content:"";position:absolute;z-index:0;left:-10%;right:-18%;bottom:-2%;height:78%;pointer-events:none;background:
radial-gradient(circle at 88% 62%,#FFF8E6 0 26px,#F2DDA8 44px,rgba(242,221,168,0) 46px),
radial-gradient(circle at 80% 74%,#FFF8E6 0 40px,#EBD29A 62px,rgba(235,210,154,0) 64px),
radial-gradient(ellipse 46% 13% at 50% 92%,#F8EBC8 0%,#E9D3A0 70%,rgba(233,211,160,0) 72%),
radial-gradient(ellipse 60% 55% at 55% 62%,rgba(240,180,41,.30),rgba(240,180,41,0) 70%)}
.g2-hero .visual .g2-movil{z-index:1;width:340px;transform:rotateY(-14deg) rotateX(5deg) rotateZ(1.5deg);transform-style:preserve-3d}
.g2-hero .visual .g2-movil .marco{box-shadow:30px 50px 90px rgba(3,15,28,.55),inset 0 0 0 2px rgba(255,255,255,.14),inset 8px 0 18px rgba(255,255,255,.06)}
.g2-hero .visual .etiqueta{position:relative;z-index:1}
.g2-hero .g2-chips-mini .i{width:20px;height:20px}
}
.g2 .g2-flota{box-shadow:inset 0 1px 0 #fff,0 18px 40px rgba(3,15,28,.28)}
/* =====================================================================
PORTADA · 3 · «Así lo veis vosotros» (imagen 08)
===================================================================== */
.g2-ves::after{content:"";position:absolute;z-index:-1;left:-20%;right:-20%;bottom:0;height:380px;background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(242,221,168,.22),rgba(242,221,168,0) 70%);pointer-events:none}
/* iconos de los pasos con halo de luz y línea de puntos luminosa */
.g2-s--navy .g2-paso .pt,.g2-s--marca .g2-paso .pt{background:radial-gradient(circle at 50% 35%,rgba(127,227,236,.22),rgba(10,183,198,.06));border:1.5px solid rgba(127,227,236,.75);box-shadow:0 0 0 5px rgba(10,183,198,.08),0 0 24px rgba(10,183,198,.45)}
.g2-s--navy .g2-paso::before,.g2-s--marca .g2-paso::before{width:3px;left:24.5px;background:radial-gradient(circle,rgba(127,227,236,.95) 1.3px,transparent 1.8px) 0 0/3px 10px repeat-y;filter:drop-shadow(0 0 3px rgba(10,183,198,.7))}
/* «Esto es lo que recibís»: tarjeta dorada que brilla (el momento estrella) */
.g2-ves .g2-paso--final .pt{background:var(--g3-oro)!important;border:0!important;color:#fff!important;box-shadow:0 0 0 6px rgba(240,180,41,.18),0 0 30px rgba(240,180,41,.55)!important}
.g2-ves .g2-paso--final .pt .i{stroke-width:2.2}
.g2-ves .final{position:relative;background:var(--g3-arena-luz);border:0;color:var(--g2-navy);box-shadow:var(--g3-halo-ambar),inset 0 1px 0 #fff}
.g2-ves .final .cuando{color:#9A6412!important}
.g2-ves .final h3{color:var(--g2-navy)}
.g2-ves .final p{color:#3B4B5C}
.g2-ves .final p b{color:var(--g2-navy)}
.g2-ves .final .g2-enlace{color:var(--g2-navy);text-decoration-color:var(--g2-ambar)}
.g2-ves .final .g2-enlace:hover{text-decoration-color:#D9951A}
/* pestañas del móvil sobre navy: vidrio */
.g2-ves .lado .g2-tabs{background:var(--g3-vidrio);box-shadow:inset 0 0 0 1px var(--g3-vidrio-borde)}
.g2 .g2-ves .lado .g2-tab[aria-selected="true"]{background:linear-gradient(180deg,#fff,#E9F6FB);box-shadow:var(--g3-luz),0 10px 24px rgba(0,0,0,.25)}
/* =====================================================================
PORTADA · 6 · los niveles (imagen 11)
===================================================================== */
.g2-niveles::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:
radial-gradient(circle at 12% 18%,rgba(240,180,41,.10),rgba(240,180,41,0) 26%),
radial-gradient(circle at 90% 60%,rgba(10,183,198,.12),rgba(10,183,198,0) 30%)}
.g2-nivel{box-shadow:inset 0 1px 0 #fff,0 20px 50px rgba(15,41,66,.10)}
.g2-nivel--rec{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,#7FE3EC,#0AB7C6 45%,#B9EEF3) border-box;box-shadow:var(--g3-halo-cian),inset 0 1px 0 #fff}
.g2-nivel .sello-rec{left:50%;transform:translateX(-50%);white-space:nowrap;background:linear-gradient(90deg,#0AB7C6,#23C8D5);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px rgba(10,183,198,.40)}
.g2-nivel .g2-ico--cian{background:linear-gradient(145deg,#3FD3DE,#0AB7C6 60%,#0896A3);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 22px rgba(10,183,198,.35)}
.g2-nivel .precio .n{font-size:64px;letter-spacing:-.02em}
/* lo que incluye: check en círculo verde relleno */
.g2-nivel .g2-lista li:not(.no)>.i{box-sizing:border-box;width:24px;height:24px;padding:4px;border-radius:50%;background:linear-gradient(145deg,#27C774,#1A9D5A);color:#fff;stroke-width:3;box-shadow:0 4px 10px rgba(26,157,90,.28)}
.g2-nivel .plazo{background:linear-gradient(180deg,#F4FBFD,#E9F6FB);box-shadow:inset 0 0 0 1px #D6EEF4}
.g2-nivel .g2-plega{border-radius:999px;background:#F7FBFD}
.g2-nivel .g2-plega[open]{border-radius:var(--g2-r-m)}
/* garantías: tres tarjetas de vidrio claro */
.g2-niveles .g2-sellos .g2-sello{background:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff,0 10px 24px rgba(15,41,66,.06);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:14px 8px}
/* casos especiales: tarjetas navy con brillo y flecha redonda que luce */
.g2-ruta{background:linear-gradient(150deg,#16395C 0%,#0F2942 55%,#0B1F33 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 22px 50px rgba(11,31,51,.28)}
.g2-ruta .g2-ico{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.g2-ruta .fl{border-radius:50%;background:linear-gradient(145deg,#3FD3DE,#0AB7C6);box-shadow:0 0 0 5px rgba(10,183,198,.16),0 0 22px rgba(10,183,198,.5)}
/* =====================================================================
FICHA DEL PACK · primera pantalla (imagen 14)
===================================================================== */
.g2-pk-hero::after{content:"";position:absolute;z-index:-1;right:-10%;bottom:6%;width:520px;height:320px;background:radial-gradient(closest-side,rgba(240,180,41,.18),rgba(240,180,41,0));pointer-events:none}
.g2-pk-p-ico{background:var(--g3-vidrio);box-shadow:inset 0 0 0 1px var(--g3-vidrio-borde),var(--g3-luz)}
.g2-pk-caja{box-shadow:inset 0 1px 0 #fff,0 40px 90px rgba(3,15,28,.36)}
.g2 .g2-pk-niveles{background:linear-gradient(180deg,#F3F8FA,#EAF3F6);box-shadow:inset 0 0 0 1px #DDEBF0}
.g2 .g2-pk-niveles .g2-tab{background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 #fff}
.g2 .g2-pk-niveles .g2-tab[aria-selected="true"],.g2 .g2-pk-niveles .g2-tab[aria-selected="true"]:hover,.g2 .g2-pk-niveles .g2-tab[aria-selected="true"]:focus{box-shadow:inset 0 0 0 2px var(--g2-cian),0 0 0 3px rgba(10,183,198,.10),0 12px 26px rgba(10,183,198,.24)}
.g2-pk-rec{background:linear-gradient(90deg,#0AB7C6,#23C8D5);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px rgba(10,183,198,.40)}
.g2-pk-precio .n{letter-spacing:-.02em}
/* botón de compra: halo verde y el carrito separado por una línea */
.g2 .g2-pk-cta{box-shadow:var(--g3-luz),var(--g3-halo-verde)}
.g2 .g2-pk-cta .fl{background:transparent;box-shadow:none;border-left:1px solid rgba(255,255,255,.35);border-radius:0;width:62px;height:40px}
/* garantías en tarjetas arena con icono verde */
.g2-pk-hero .g2-pk-caja .g2-sello{background:linear-gradient(180deg,#FFFBF1,#F8EFD8);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #F0E2BD;padding:12px 6px}
.g2-pk-hero .g2-pk-caja .g2-sello .i{color:var(--g2-verde);width:24px;height:24px}
.g2-pk-caja .g2-plega{background:#F7FBFD;box-shadow:inset 0 1px 0 #fff}
@media (prefers-reduced-motion:reduce){.g2-hero .visual .g2-movil{transform:none}}
/* =====================================================================
HERO · primera pantalla móvil · ajuste paleta corporativa (16/9/2026)
Reproducimos el objetivo cuidando tamaños, alineación y brillos.
Paleta obligatoria: navy #0F2942 · cian #0AB7C6 · hielo #E9F6FB
· arena #F5EDD6 · ámbar #F0B429. Verde solo en CTA de compra.
===================================================================== */
/* ---------- fondo: degradado diagonal + aros translúcidos + luz cian ---------- */
.g2-hero{
position:relative;
background:
radial-gradient(circle at 92% 6%, rgba(10,183,198,.50) 0%, rgba(10,183,198,0) 40%),
radial-gradient(circle at 8% 96%, rgba(10,183,198,.35) 0%, rgba(10,183,198,0) 48%),
linear-gradient(158deg,#0F2942 0%,#123553 34%,#154462 60%,#17516F 82%,#1B5E7B 100%);
padding-block:clamp(2px,1vw,24px) clamp(120px,26vw,190px);
-webkit-font-smoothing:antialiased;
font-smooth:always;
font-family:"Manrope","Manrope respaldo","Manrope respaldo B",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
.g2-hero::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(circle at 86% 9%, rgba(255,255,255,0) 0 38px, rgba(10,183,198,.28) 38px 41px, rgba(255,255,255,0) 42px),
radial-gradient(circle at 96% 17%, rgba(255,255,255,0) 0 22px, rgba(10,183,198,.22) 22px 25px, rgba(255,255,255,0) 26px),
radial-gradient(circle at 74% 4%, rgba(255,255,255,0) 0 15px, rgba(10,183,198,.18) 15px 17px, rgba(255,255,255,0) 18px),
radial-gradient(circle at 93% 70%, rgba(255,255,255,0) 0 12px, rgba(10,183,198,.16) 12px 14px, rgba(255,255,255,0) 15px);
}
.g2-hero::after{
content:"";position:absolute;z-index:-1;inset:auto 0 0 0;height:56%;pointer-events:none;
background:
radial-gradient(circle at 94% 34%, rgba(15,41,66,.85) 0 26px, rgba(15,41,66,0) 27px),
radial-gradient(circle at 97% 47%, rgba(15,41,66,.72) 0 18px, rgba(15,41,66,0) 19px),
radial-gradient(120% 90% at 8% 108%, rgba(245,237,214,.45) 0%, rgba(245,237,214,0) 55%);
}
.g2-hero .iso{opacity:.10;filter:blur(1.5px) drop-shadow(0 0 30px rgba(10,183,198,.18))}
/* aire entre bloques OK (objetivo 1,18; medido 1,19): no tocar alturas globales */
.g2-hero .g2-eti{margin-bottom:6px}
.g2-hero .g2-acciones{gap:10px}
/* márgenes laterales: la referencia respira más */
.g2-hero>.g2-w{padding-inline:clamp(30px,12.8vw,56px)}
/* ---------- etiqueta de arriba ---------- */
.g2-hero .g2-eti{
border-radius:22px;
background:linear-gradient(90deg,rgba(15,41,66,.92),rgba(15,41,66,.38));
box-shadow:inset 0 1px 0 rgba(233,246,251,.35),inset 0 0 0 1px rgba(10,183,198,.55);
color:#0AB7C6;padding:5px 14px 5px 6px;font-size:10px;line-height:1.25;letter-spacing:.08em;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
}
.g2-hero .g2-eti .i{width:19px;height:19px;padding:5px;box-sizing:content-box;border-radius:50%;background:rgba(15,41,66,.9);box-shadow:inset 0 0 0 1px rgba(10,183,198,.45);color:#0AB7C6}
/* ---------- titular y entradilla ---------- */
.g2 .g2-hero h1{
font-family:"Fraunces","Fraunces respaldo","Fraunces respaldo B",Georgia,"Times New Roman",serif;
font-weight:800;
font-size:clamp(31px,8.3vw,66px);
line-height:.955;letter-spacing:-.022em;max-width:18.8ch;margin-top:2px;
text-wrap:wrap;hyphens:none;word-break:normal;overflow-wrap:normal;
}
/* entradilla */
.g2-hero .sub{
font-size:clamp(13px,3.35vw,18px);
line-height:1.33;color:rgba(233,246,251,.84);max-width:33ch;margin-top:6px
}
.g2-hero .sub b{color:#fff}
/* ---------- conmutador: cápsula de vidrio con la elegida en blanco ---------- */
.g2 .g2-hero .g2-conmuta{
padding:5px;border-radius:24px;background:rgba(15,41,66,.55);
box-shadow:
inset 0 0 0 1px rgba(10,183,198,.28),
inset 0 2px 10px rgba(0,0,0,.25),
0 0 0 2px rgba(10,183,198,.35),
0 10px 28px rgba(10,183,198,.26);
margin:8px 0 6px
}
.g2 .g2-hero .g2-conmuta button{border-radius:17px;padding:7px 12px;font-size:13.2px;color:#E9F6FB;min-width:0;white-space:nowrap}
.g2 .g2-hero .g2-conmuta button[aria-pressed="true"]{background:#fff;color:#0F2942;box-shadow:0 10px 22px rgba(3,15,28,.35)}
.g2 .g2-hero .g2-conmuta button .i{color:currentColor}
/* ---------- mensaje del conmutador: tarjeta vidrio con check ---------- */
.g2-hero .msg{
gap:10px;padding:8px 11px;border-radius:15px;
background:linear-gradient(180deg,rgba(18,54,77,.62),rgba(13,44,64,.62));
box-shadow:inset 0 0 0 1px rgba(10,183,198,.25);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
font-size:13px;line-height:1.35;color:rgba(233,246,251,.88);margin-bottom:8px;min-width:0
}
.g2-hero .msg b{color:#fff}
.g2-hero .msg .i{
width:21px;height:21px;padding:9px;box-sizing:content-box;border-radius:50%;
background:rgba(10,183,198,.16);box-shadow:inset 0 0 0 1.5px rgba(10,183,198,.55);color:#0AB7C6;stroke-width:2.6
}
/* ---------- botones ---------- */
.g2 .g2-hero .g2-btn{min-height:58px;border-radius:19px;padding:9px 10px 9px 16px;font-size:17.5px}
.g2 .g2-hero .g2-btn .txt{min-width:0}
.g2 .g2-hero .g2-btn .txt>span,.g2 .g2-hero .g2-btn .txt{white-space:nowrap}
@media (max-width:400px){.g2 .g2-hero .g2-btn{font-size:16.5px}.g2 .g2-hero .g2-btn .txt small{font-size:12.2px}}
.g2 .g2-hero .g2-btn .txt small{font-size:12.8px;font-weight:700;opacity:.95;margin-top:2px}
.g2 .g2-hero .g2-btn .fl{width:42px;height:42px;border-radius:13px}
/* compra (verde único): degradado + borde luminoso + halo */
.g2 .g2-hero .g2-btn--compra{
position:relative;
background:
radial-gradient(120% 140% at 18% 22%, rgba(255,255,255,.35) 0 18%, rgba(255,255,255,0) 38%),
linear-gradient(180deg,#22C079 0%,#16AA66 42%,#0E9257 72%,#0A7A49 100%);
border:1px solid rgba(28,184,112,.9);
box-shadow:
inset 0 1.5px 0 rgba(255,255,255,.45),
inset 0 0 0 1px rgba(28,184,112,.9),
0 0 0 3px rgba(54,183,128,.38),
0 0 0 2px rgba(10,183,198,.46),
0 0 32px rgba(10,183,198,.28),
0 22px 42px rgba(7,70,50,.55);
}
.g2 .g2-hero .g2-btn--compra .fl{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
/* secundario: vidrio, icono a la IZQUIERDA y flecha a la derecha */
.g2 .g2-hero .g2-btn--linea{
justify-content:flex-start;gap:12px;padding:9px 16px 9px 10px;
background:linear-gradient(180deg,rgba(18,54,77,.6),rgba(12,40,60,.6));
box-shadow:inset 0 0 0 1px rgba(10,183,198,.28),0 16px 34px rgba(3,15,28,.32);
color:#E9F6FB;
}
.g2 .g2-hero .g2-btn--linea .fl{order:0;background:rgba(9,38,56,.85);box-shadow:inset 0 0 0 1px rgba(10,183,198,.24)}
.g2 .g2-hero .g2-btn--linea .txt{order:1;flex:1 1 auto}
.g2 .g2-hero .g2-btn--linea::after{
content:"";order:2;flex:none;width:24px;height:24px;margin-left:auto;
background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
opacity:.9
}
/* ---------- barra de avisos: vidrio con separadores e iconos cian ----------
Arreglo en origen (16/9, cuartel): las celdas no pueden ser de ancho fijo con texto sin partir,
porque «Precio a la vista» no cabe en un tercio a 390 px y los iconos se montaban sobre el texto.
Cada celda mide lo que mide su texto; si aun así no cabe (≤ 340 px), la barra parte en dos filas. */
.g2-hero .g2-chips-mini{
margin-top:14px;border-radius:20px;
background:linear-gradient(180deg,rgba(18,54,77,.55),rgba(12,40,60,.55));
box-shadow:inset 0 0 0 1px rgba(10,183,198,.26);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:0;padding:5px 4px;margin-inline:-12px;
font-size:11.5px;font-weight:700;letter-spacing:0;line-height:1.25;color:#E9F6FB
}
.g2-hero .g2-chips-mini span{
display:inline-flex;align-items:center;justify-content:center;gap:5px;
padding:7px 5px;white-space:nowrap;text-align:center;min-width:0;flex:0 1 auto
}
@media (max-width:372px){.g2-hero .g2-chips-mini{font-size:11px;padding:5px 2px}.g2-hero .g2-chips-mini span{padding:7px 3px;gap:4px}}
.g2-hero .g2-chips-mini span+span{border-left:1px solid rgba(10,183,198,.24)}
.g2-hero .g2-chips-mini .i{width:14px;height:14px;flex:none;color:#0AB7C6;stroke-width:2}
@media (min-width:420px){
.g2-hero .g2-chips-mini{font-size:12.5px;padding:6px;margin-inline:0}
.g2-hero .g2-chips-mini span{gap:8px;padding:8px 12px;flex:1 1 0}
.g2-hero .g2-chips-mini .i{width:17px;height:17px}
}
/* ---------- paso a la sección siguiente: ola arena + hielo y arco ámbar ---------- */
.g2-hero .g2-ola{height:clamp(110px,30vw,190px);z-index:2}
.g2-hero .g2-ola path{fill:#E9F6FB}
.g2-hero .g2-ola::before{
content:"";position:absolute;left:-6%;right:-6%;bottom:0;height:200%;z-index:-1;pointer-events:none;
background:
radial-gradient(150% 100% at 6% 118%, #F5EDD6 0 38%, rgba(245,237,214,0) 62%),
radial-gradient(120% 90% at 2% 128%, rgba(240,180,41,.55) 0 30%, rgba(240,180,41,0) 55%)
}
@media (min-width:1000px){
.g2-hero{padding-block:clamp(30px,4vw,70px) clamp(90px,10vw,150px)}
.g2 .g2-hero h1{font-size:clamp(50px,4.4vw,70px);max-width:13ch}
.g2-hero .sub{font-size:19px;max-width:38ch}
.g2-hero>.g2-w{padding-inline:clamp(40px,5vw,72px)}
.g2 .g2-hero .g2-btn{min-height:70px;font-size:20px;border-radius:22px}
.g2 .g2-hero .g2-btn .txt small{font-size:14.5px}
.g2 .g2-hero .g2-btn .fl{width:50px;height:50px;border-radius:16px}
.g2-hero .g2-chips-mini{max-width:660px;padding:16px 10px;font-size:15px}
.g2-hero .g2-chips-mini .i{width:22px;height:22px;color:#F0B429}
/* aros grandes y difusos detrás del móvil */
.g2-hero::before{background:
radial-gradient(circle at 62% 42%, rgba(255,255,255,0) 0 190px, rgba(10,183,198,.16) 190px 196px, rgba(255,255,255,0) 200px),
radial-gradient(circle at 57% 30%, rgba(255,255,255,0) 0 120px, rgba(10,183,198,.13) 120px 125px, rgba(255,255,255,0) 128px),
radial-gradient(circle at 76% 12%, rgba(255,255,255,0) 0 52px, rgba(10,183,198,.22) 52px 56px, rgba(255,255,255,0) 58px),
radial-gradient(circle at 88% 62%, rgba(255,255,255,0) 0 30px, rgba(10,183,198,.18) 30px 33px, rgba(255,255,255,0) 35px)}
/* pedestal arena + luz ámbar */
.g2-hero .visual{padding:24px 0 86px;perspective:1800px}
.g2-hero .visual::before{
content:"";position:absolute;z-index:0;pointer-events:none;
left:-16%;right:-24%;bottom:-6%;height:86%;
background:
radial-gradient(circle at 92% 63%, #FFF8E8 0 34px, #F5EDD6 60px, rgba(245,237,214,0) 62px),
radial-gradient(circle at 80% 78%, #FFFCF2 0 52px, #F5EDD6 86px, rgba(245,237,214,0) 88px),
radial-gradient(ellipse 40% 12% at 48% 93%, #F5EDD6 0 62%, rgba(245,237,214,0) 64%),
radial-gradient(ellipse 34% 9% at 48% 99%, rgba(120,90,40,.22) 0 60%, rgba(120,90,40,0) 62%),
radial-gradient(ellipse 62% 58% at 54% 58%, rgba(240,180,41,.30), rgba(240,180,41,0) 70%)}
.g2-hero .visual .g2-movil{width:392px;transform:rotateY(-17deg) rotateX(6deg) rotateZ(2deg)}
.g2-hero .visual .g2-movil .marco{box-shadow:38px 62px 110px rgba(3,15,28,.6),inset 0 0 0 2px rgba(255,255,255,.16)}
.g2-hero .visual .g2-flota.f1{right:-10%;top:12%}
.g2-hero .visual .g2-flota.f2{right:-14%;top:calc(12% + 62px)}
}
/* NOTAS:
- Titular: aumento max-width a 18.8ch y desactivo balanceo para forzar las 4 líneas «Los papeles del / bebé, hechos por / nosotras. Tú, a lo / tuyo.» en 390 px sin cambiar tamaño.
- Conmutador: añado halo cian suave (box-shadow exterior 0 0 0 2px + blur) sin variar alturas.
- CTA verde: añado brillo cian exterior (ring + blur) como en el objetivo; sin tocar dimensiones.
- Barra de avisos: paso a display:flex con celdas centradas, padding lateral mayor, gap entre icono y texto y separadores finos; tipografía a 12.5px para caber sin apretar.
*/
/* ajustes_cuartel.css · capa del CUARTEL que se carga la ÚLTIMA (después de copia_chatgpt.css). ChatGPT no la ve ni la reescribe. Aquí van los arreglos a mano que no pueden perderse en una vuelta de ChatGPT. */
/* encaje_ordenador.css · 16/9/2026 · javi-b2
PRIMERA PANTALLA QUE CABE EN LA PANTALLA (ordenador). Capa aparte, se carga la última.
Problema medido: en 1536×750 (1920 al 125 %) el botón verde de la portada quedaba pegado al borde
y en la ficha ni se veía. Causa: tamaños fijados por ANCHO (vw) sin mirar la ALTURA.
Regla: en ordenador, el titular, los espacios y el móvil escalan con la ALTURA (vh) con topes,
para que el bloque entero (etiqueta → barra de avisos) entre en una pantalla. */
@media (min-width:1024px){
/* ---- PORTADA ---- */
.g2 .g2-hero{padding-block:clamp(18px,3.2vh,44px) clamp(64px,9vh,120px)}
.g2 .g2-hero .rej{gap:clamp(24px,3vw,40px);align-items:center}
.g2 .g2-hero .g2-eti{font-size:11.5px;padding:6px 12px 6px 6px;margin-bottom:clamp(8px,1.4vh,14px)}
.g2 .g2-hero h1{font-size:clamp(38px,6.1vh,58px);line-height:.98;max-width:12ch;margin-top:0;margin-bottom:clamp(8px,1.4vh,14px)}
.g2 .g2-hero .g2-entrada,.g2 #g2-hero .texto>p{font-size:clamp(15px,2.15vh,18px);line-height:1.4;margin-bottom:clamp(8px,1.5vh,14px)}
.g2 .g2-hero .g2-conmuta{margin-bottom:clamp(8px,1.3vh,12px)}
.g2 .g2-hero .g2-conmuta button{padding-block:9px;font-size:15px}
.g2 .g2-hero .g2-msg,.g2 .g2-hero .mensaje{padding:10px 14px;font-size:14.5px;margin-bottom:clamp(8px,1.3vh,12px)}
.g2 .g2-hero .g2-btn--grande{min-height:clamp(54px,7.4vh,64px);font-size:clamp(17px,2.4vh,19px);border-radius:18px}
.g2 .g2-hero .g2-btn--grande .fl{width:44px;height:44px;border-radius:13px}
.g2 .g2-hero .g2-chips-mini{margin-top:clamp(8px,1.4vh,14px);font-size:12px}
/* el móvil no puede ser más alto que la pantalla: su ancho sale de la altura disponible */
.g2 .g2-hero .visual .g2-movil{width:min(392px,calc((100vh - 64px - 12vh) * 320 / 660))}
/* ---- FICHA DEL PACK ---- */
.g2 .g2-pk-hero{padding-block:clamp(10px,1.8vh,30px) clamp(64px,9vh,120px)}
.g2 .g2-pk-hero h1{font-size:clamp(32px,5.4vh,50px);line-height:1.02;max-width:14ch;margin-bottom:clamp(8px,1.4vh,14px)}
.g2 .g2-pk-hero .g2-pk-migas{margin-bottom:clamp(6px,1vh,10px);font-size:13px}
.g2 .g2-pk-hero .g2-lista li{font-size:clamp(15px,2.1vh,17px);margin-block:clamp(4px,.9vh,8px)}
.g2 .g2-pk-caja{padding:clamp(12px,1.9vh,20px)}
.g2 .g2-pk-caja .g2-pk-niveles{margin-bottom:clamp(8px,1.4vh,14px);padding:6px;gap:6px}
.g2 .g2-pk-caja .g2-pk-niveles .g2-tab{padding-block:6px;font-size:13.5px}
.g2 .g2-pk-caja .g2-pk-nom{font-size:clamp(24px,3.3vh,30px)}
.g2 .g2-pk-precio .n{font-size:clamp(32px,4.6vh,42px)}
.g2 .g2-pk-caja .g2-pk-meta{margin-block:clamp(6px,1vh,10px)}
.g2 .g2-pk-caja .g2-pk-lista-tit{margin-block:clamp(6px,1vh,10px) 4px;font-size:11.5px}
.g2 .g2-pk-caja .g2-lista li{font-size:14px;line-height:1.25;margin-block:2px}
.g2 .g2-pk-caja .g2-btn--grande{min-height:clamp(48px,6.4vh,58px);font-size:17px;margin-top:clamp(6px,1.1vh,12px)}
.g2 .g2-pk-caja .g2-sellos{margin-top:clamp(8px,1.2vh,12px)}
.g2 .g2-pk-caja .g2-sello{padding:8px 4px;font-size:12px}
}
/* ---- afinado del cuartel (16/9 06:50): selectores reales de la portada (.sub, .msg, .g2-conmuta) y
pantallas bajas (≤ 800 px de alto): el bloque entero, hasta la barra de avisos, tiene que caber. ---- */
@media (min-width:1024px){
.g2 .g2-hero h1{font-size:clamp(36px,5.6vh,58px)}
.g2 .g2-hero .sub{font-size:clamp(15px,2.1vh,18px);line-height:1.38;margin-bottom:clamp(8px,1.4vh,14px);max-width:40ch}
.g2 .g2-hero .msg{padding:9px 14px;font-size:14px;margin-bottom:clamp(8px,1.2vh,12px)}
.g2 .g2-hero .g2-acciones{gap:clamp(8px,1.2vh,12px)}
.g2 .g2-hero .g2-btn--grande{min-height:clamp(50px,6.8vh,62px);font-size:clamp(16px,2.3vh,19px)}
.g2 .g2-hero .g2-chips-mini{margin-top:clamp(8px,1.2vh,12px);padding:5px 6px;font-size:12px}
.g2 .g2-hero .g2-chips-mini span{padding:6px 10px}
}
@media (min-width:1024px) and (max-height:800px){
.g2 .g2-hero{padding-block:14px clamp(56px,8vh,100px)}
.g2 .g2-hero .g2-eti{margin-bottom:8px;font-size:11px}
.g2 .g2-hero h1{font-size:clamp(34px,5.2vh,50px);margin-bottom:8px}
.g2 .g2-hero .sub{margin-bottom:8px}
.g2 .g2-hero .g2-conmuta{margin-bottom:8px}
.g2 .g2-hero .msg{margin-bottom:8px;padding:8px 12px;font-size:13.5px}
.g2 .g2-hero .g2-btn--grande{min-height:50px;font-size:16.5px}
.g2 .g2-hero .g2-chips-mini{margin-top:8px}
}
/* ---- primera pantalla ENCUADRADA (16/9 07:10, orden de Javi): nada se corta en el pliegue.
El bloque de reseñas (.g2-prueba) sale de la columna de texto y va en su propia fila, después de la
rejilla; la rejilla mide exactamente lo que mide la pantalla, y lo demás llega al bajar. ---- */
.g2 .g2-hero>.g2-w.g2-prueba-fila{padding-top:0}
.g2 .g2-hero .g2-prueba{margin-top:18px}
@media (max-width:1023px){
.g2 .g2-hero{padding-top:14px}
.g2 #g2-hero .texto{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 64px - 34px);min-height:calc(100svh - 64px - 34px)}
.g2 .g2-hero .g2-prueba{margin-top:6px}
}
@media (min-width:1024px){
.g2 .g2-hero{padding-top:10px}
.g2 .g2-hero .rej{min-height:calc(100vh - 64px - 40px);align-items:center}
.g2 .g2-hero .g2-prueba{margin-top:8px;padding-top:22px}
}
@media (min-width:1024px) and (max-height:820px){
.g2 .g2-hero{padding-top:6px}
.g2 .g2-hero .g2-eti{margin-bottom:6px}
.g2 .g2-hero h1{font-size:clamp(34px,4.9vh,48px);margin-bottom:6px}
.g2 .g2-hero .sub{margin-bottom:6px;font-size:clamp(15px,2vh,17px)}
.g2 .g2-hero .g2-conmuta{margin-bottom:6px}
.g2 .g2-hero .msg{margin-bottom:6px;min-height:0}
.g2 .g2-hero .g2-acciones{gap:8px}
.g2 .g2-hero .g2-btn--grande{min-height:48px}
.g2 .g2-hero .g2-chips-mini{margin-top:6px}
.g2 .g2-hero .rej{min-height:calc(100vh - 64px - 24px)}
}
/* ---- ficha del pack en ordenador bajo (≤ 820 px de alto): la tarjeta entera, con botón y sellos,
dentro de la primera pantalla. ---- */
@media (min-width:1024px) and (max-height:820px){
.g2 .g2-pk-hero{padding-top:8px}
.g2 .g2-pk-hero .g2-pk-migas{margin-bottom:6px;font-size:12.5px}
.g2 .g2-pk-hero h1{font-size:clamp(30px,5vh,46px);margin-bottom:10px}
.g2 .g2-pk-hero .g2-lista li{font-size:15px;margin-block:3px}
.g2 .g2-pk-caja{padding:12px 14px}
.g2 .g2-pk-caja .g2-pk-niveles{margin-bottom:8px;padding:4px;gap:4px}
.g2 .g2-pk-caja .g2-pk-niveles .g2-tab{padding-block:5px;font-size:13px}
.g2 .g2-pk-caja .g2-pk-nom{font-size:clamp(22px,3vh,28px)}
.g2 .g2-pk-precio .n{font-size:clamp(30px,4.2vh,40px)}
.g2 .g2-pk-caja .g2-pk-meta{margin-block:4px 6px}
.g2 .g2-pk-caja .g2-pk-meta>*{padding-block:3px;font-size:12.5px}
.g2 .g2-pk-caja .g2-pk-lista-tit{margin-block:6px 2px;font-size:11px}
.g2 .g2-pk-caja .g2-lista li{font-size:13.5px;line-height:1.2;margin-block:0;padding-block:3px}
.g2 .g2-pk-caja .g2-lista .i{width:16px;height:16px}
.g2 .g2-pk-caja .g2-pk-lista-tit--no{margin-top:4px}
.g2 .g2-pk-caja .g2-btn--grande{min-height:46px;font-size:16px;margin-top:6px}
.g2 .g2-pk-caja .g2-sellos{margin-top:8px;gap:6px}
.g2 .g2-pk-caja .g2-sello{padding:6px 4px;font-size:11.5px;line-height:1.2}
.g2 .g2-pk-caja .g2-sello .i{width:16px;height:16px}
}
@media (min-width:1024px) and (max-height:820px){
/* el desplegable «comparar» sale de la tarjeta en pantallas bajas: la comparación completa está más abajo en la ficha */
.g2 .g2-pk-caja .g2-pk-cmp{display:none}
.g2 .g2-pk-caja{padding-bottom:8px}
.g2 .g2-pk-caja .g2-sello{padding:5px 4px}
.g2 .g2-pk-caja .g2-btn--grande{margin-top:4px}
}
/* ---- de javi-b2 (encaje_ordenador_v2.css): ola más baja en ordenador y hueco inferior mayor que la ola; tarjeta dorada de la ficha ---- */
/* encaje_ordenador_v2.css · 16/9/2026 · javi-b2
Añadir DESPUÉS de encaje_ordenador.css (al final de ajustes_cuartel.css).
Dos arreglos que Javi señaló con capturas:
1) La ola del final de la primera pantalla tapaba la franja de confianza
(«5,0 en Google · Bárbara, Miriam y Paula») en portada y en la ficha.
Causa: el acabado sube la ola a 190 px de alto y el encaje dejó el hueco de
abajo en ~60-70 px. El hueco de abajo tiene que ser SIEMPRE mayor que la ola.
2) En la ficha, la tarjeta «Esto es lo que recibís» iba en azul marino con borde
fino: en la portada (y en el diseño de ChatGPT, imagen 08) es la tarjeta dorada
que brilla. Misma tarjeta en las dos páginas. */
@media (min-width:1024px){
/* 1) ola más baja en ordenador y hueco inferior = ola + 14 px, en todas las alturas */
.g2 .g2-hero .g2-ola{height:clamp(70px,7.5vw,120px)}
.g2 .g2-hero,
.g2 .g2-hero.g2-pk-hero{padding-bottom:calc(clamp(70px,7.5vw,120px) + 14px)}
.g2 .g2-hero .g2-prueba{margin-top:clamp(14px,2.2vh,24px);padding-top:clamp(12px,1.8vh,20px)}
}
@media (min-width:1024px) and (max-height:800px){
.g2 .g2-hero,
.g2 .g2-hero.g2-pk-hero{padding-bottom:calc(clamp(70px,7.5vw,120px) + 14px)}
}
/* 2) ficha · «Esto es lo que recibís» = la tarjeta dorada de la portada */
.g2 .g2-pk-despues .g2-paso--final .pt{background:var(--g3-oro)!important;border:0!important;color:#fff!important;box-shadow:0 0 0 6px rgba(240,180,41,.18),0 0 30px rgba(240,180,41,.55)!important}
.g2 .g2-pk-despues .g2-paso--final .pt .i{stroke-width:2.2}
.g2 .g2-pk-despues .g2-pk-final{position:relative;background:var(--g3-arena-luz);border:0;color:var(--g2-navy);box-shadow:var(--g3-halo-ambar),inset 0 1px 0 #fff}
.g2 .g2-pk-despues .g2-pk-final .cuando{color:#9A6412!important}
.g2 .g2-pk-despues .g2-pk-final h3{color:var(--g2-navy)}
.g2 .g2-pk-despues .g2-pk-final p{color:#3B4B5C}
.g2 .g2-pk-despues .g2-pk-final p b,
.g2 .g2-pk-despues .g2-pk-final .g2-lista li b{color:var(--g2-navy)}
.g2 .g2-pk-despues .g2-pk-final .g2-lista li{color:#3B4B5C}
.g2 .g2-pk-despues .g2-pk-final .g2-lista li>.i{color:#D9951A}
/* hero_v3.css · 16/9/2026 · CUARTEL · se carga la ÚLTIMA de todas.
Primera pantalla calcada de la imagen que eligió Javi (Higgsfield v2, móvil y ordenador):
fondo pintado sin textos (higgsfield_2026-09-16/fondos), titular grande, subtítulo blanco,
en ordenador: botones en una fila, aviso y barra sin cajas, móvil grande y poco inclinado,
siempre en la portada de la hoja. Nada de encoger letra para «caber»: se aprietan espacios. */
:root{
--g2-fondo-hero-movil:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/fondo_hero_movil_a_1520x2688.webp");
--g2-fondo-hero-pc:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/fondo_hero_ordenador_b_2688x1152.webp");
}
/* fondo pintado: fuera los adornos por código (aros, luces, pedestal) */
/* MÓVIL: de momento sin fondo pintado (el que hay lleva la ola al pie y en el móvil la primera pantalla no acaba en ola:
pedido a Higgsfield un fondo sin ola). El contenido arranca arriba, como en la imagen, y deja aire abajo. */
@media (max-width:1023px){
.g2 #g2-hero .texto{justify-content:flex-start;padding-top:22px}
}
.g2 #g2-hero .etiqueta{display:none!important} /* nota de trabajo: no se ve */
.g2 #g2-hero .sub{color:#fff}
.g2 #g2-hero .sub b{color:#fff}
.g2 #g2-hero h1 .acento{color:#7FE3EC}
@media (min-width:1024px){
.g2 #g2-hero{background:#06233E var(--g2-fondo-hero-pc) center bottom/cover no-repeat;padding-top:0;padding-bottom:calc(clamp(70px,7.5vw,120px) + 14px)}
.g2 #g2-hero::before,.g2 #g2-hero::after,.g2 #g2-hero .visual::before,.g2 #g2-hero .iso,.g2 #g2-hero .burbuja{display:none!important;content:none!important}
.g2 #g2-hero>.g2-w{padding-inline:clamp(32px,4.2vw,64px)}
.g2 #g2-hero .rej{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(24px,3vw,56px);align-items:center;min-height:calc(100vh - 64px - 24px);padding-top:8px}
/* texto */
.g2 #g2-hero .g2-eti{font-size:12px;letter-spacing:.14em;padding:8px 14px 8px 8px;margin-bottom:clamp(10px,1.8vh,18px)}
.g2 #g2-hero h1{font-size:min(5.1vw,8.4vh);line-height:.97;max-width:11ch;margin:0 0 clamp(10px,1.8vh,18px);letter-spacing:-.01em}
.g2 #g2-hero .sub{font-size:min(1.4vw,2.7vh);line-height:1.38;max-width:40ch;margin:0 0 clamp(12px,2vh,20px)}
.g2 #g2-hero .g2-conmuta{margin:0 0 clamp(10px,1.6vh,16px);padding:5px}
.g2 #g2-hero .g2-conmuta button{font-size:15.5px;padding:10px 18px;border-radius:999px}
/* aviso: texto limpio con check cian, sin caja */
.g2 #g2-hero .msg{background:none!important;box-shadow:none!important;border:0!important;padding:0!important;min-height:0;margin:0 0 clamp(12px,2vh,22px);font-size:min(1.15vw,2.2vh);line-height:1.45;max-width:48ch;align-items:flex-start}
.g2 #g2-hero .msg .i{width:22px;height:22px;flex:none;background:none!important;border:0!important;box-shadow:none!important;border-radius:0;padding:0;color:#7FE3EC;margin-top:1px;stroke-width:2.4}
/* botones en una fila */
.g2 #g2-hero .g2-acciones{display:flex;flex-wrap:nowrap;gap:14px;margin:0 0 clamp(10px,1.6vh,16px)}
.g2 #g2-hero .g2-acciones .g2-btn{flex:1 1 0;min-width:0;min-height:clamp(60px,8.6vh,74px);font-size:min(1.3vw,2.4vh);border-radius:20px;padding:8px 10px 8px 18px}
.g2 #g2-hero .g2-acciones .g2-btn .txt small{font-size:.72em}
.g2 #g2-hero .g2-acciones .g2-btn .fl{width:46px;height:46px;border-radius:14px}
.g2 #g2-hero .g2-btn--linea{background:rgba(9,38,56,.55);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.g2 #g2-hero .g2-btn--linea .fl{order:2;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.g2 #g2-hero .g2-btn--linea .txt{order:1}
.g2 #g2-hero .g2-btn--linea::after{display:none}
/* barra: texto limpio con checks, sin caja ni separadores */
.g2 #g2-hero .g2-chips-mini{background:none!important;box-shadow:none!important;border:0!important;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;margin:0;gap:0 28px;justify-content:flex-start;font-size:min(1.1vw,2.1vh);font-weight:700}
.g2 #g2-hero .g2-chips-mini span{padding:0;border:0!important;flex:0 0 auto;gap:9px}
.g2 #g2-hero .g2-chips-mini .i{width:19px;height:19px;color:#7FE3EC;stroke-width:2.4}
/* móvil: grande, casi toda la altura, poco inclinado, en la portada de la hoja */
.g2 #g2-hero .visual{padding:0;perspective:none;display:flex;justify-content:center;align-items:center;position:relative}
.g2 #g2-hero .visual .g2-movil{width:min(392px,calc((100vh - 64px - 40px) * .49));transform:rotate(-3.5deg);margin:0 auto}
.g2 #g2-hero .visual .g2-movil .marco{box-shadow:24px 44px 90px rgba(3,15,28,.55),0 0 0 1.5px rgba(255,255,255,.18)}
.g2 #g2-hero .visual .g2-flota.f1{right:2%;top:19%}
.g2 #g2-hero .visual .g2-flota.f2{right:-2%;top:calc(19% + 66px)}
.g2 #g2-hero .visual .desliza{bottom:10px}
/* la franja de reseñas, bajo la rejilla */
.g2 #g2-hero .g2-prueba{margin-top:14px;padding-top:18px}
}
@media (min-width:1024px) and (max-height:760px){
.g2 #g2-hero .rej{min-height:calc(100vh - 64px - 12px);padding-top:4px}
.g2 #g2-hero .g2-eti{margin-bottom:8px}
.g2 #g2-hero h1{font-size:min(4.8vw,8vh);margin-bottom:8px}
.g2 #g2-hero .sub{margin-bottom:10px}
.g2 #g2-hero .g2-conmuta{margin-bottom:8px}
.g2 #g2-hero .msg{margin-bottom:10px}
.g2 #g2-hero .g2-acciones{margin-bottom:8px}
.g2 #g2-hero .visual .g2-flota.f2{top:calc(19% + 60px)}
}
/* afinado 1 (07:50): etiqueta en una línea; botones que nunca se pisan (si no caben, el segundo baja);
chips del móvil colgando del borde derecho; móvil con aire arriba */
@media (min-width:1024px){
.g2 #g2-hero .g2-eti{white-space:nowrap;letter-spacing:.12em;font-size:11.5px}
.g2 #g2-hero .g2-acciones{flex-wrap:wrap}
.g2 #g2-hero .g2-acciones .g2-btn{flex:1 1 auto;min-width:max-content;font-size:min(1.15vw,2.25vh);padding-left:15px}
.g2 #g2-hero .g2-acciones .g2-btn .fl{width:42px;height:42px}
.g2 #g2-hero .visual .g2-movil{width:min(392px,calc((100vh - 64px - 40px) * .46))}
.g2 #g2-hero .visual .g2-flota.f1{right:-4%;top:20%}
.g2 #g2-hero .visual .g2-flota.f2{right:-9%;top:calc(20% + 64px)}
}
/* afinado 2: la primera pantalla usa casi todo el ancho, como en la imagen (el resto de la página sigue a 1080) */
@media (min-width:1024px){
.g2 #g2-hero>.g2-w{max-width:1400px}
.g2 #g2-hero .rej{grid-template-columns:minmax(0,47fr) minmax(0,53fr)}
}
/* MÓVIL con fondo pintado sin ola (08:30): la imagen arriba (ancho completo, 9:16) y funde a navy #06233E;
debajo sigue el navy y el degradado de siempre para las reseñas y el móvil con la hoja */
@media (max-width:1023px){
.g2 #g2-hero{background:#06233E;background-image:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/fondo_hero_movil_a_sinola_1520x2688.webp"),linear-gradient(180deg,#06233E 0%,#06233E 45%,#0E5570 100%);background-size:100% auto,auto;background-position:center top,center;background-repeat:no-repeat}
.g2 #g2-hero::before,.g2 #g2-hero::after,.g2 #g2-hero .visual::before,.g2 #g2-hero .iso,.g2 #g2-hero .burbuja{display:none!important;content:none!important}
}
/* hero_v4.css · 16/9/2026 · CUARTEL · se carga DESPUÉS de hero_v3.css (la última de todas).
Primera pantalla LITERAL de la imagen aprobada por Javi:
- ordenador: gpt_05 (variante A «premium y cálida», 15/9) vaciada de textos por Higgsfield.
- móvil: Higgsfield v2 (16/9) vaciada de textos por Higgsfield.
Método: la pintura es el fondo de una caja con las proporciones de la imagen (1586×913 sin cabecera);
cada texto y botón real va en las coordenadas medidas sobre la imagen, en unidades --u = ancho de caja / 1586.
La caja se escala UNIFORME para caber en la pantalla (ancho o alto, lo que limite): es la imagen tal cual, a escala. */
:root{
--g2-hero-pc:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/fondo_hero_pc_gpt05_vacio_ancho_4032x1520.webp?v=1");
--g2-hero-mv:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/fondo_hero_movil_v2_vacio_1520x2688.webp?v=2");
}
@media (min-width:1024px){
.g2 #g2-hero{--bw:min(100vw,calc((100vh - 74px) * 1586 / 913));--u:calc(var(--bw) / 1586);
position:relative;isolation:isolate;overflow:hidden;background:#0A2F4E!important;padding:0!important;min-height:0}
/* v10 (19/9/2026, Javi: «nunca dije difuminar los laterales»): la pintura es ahora la versión ANCHA (4032×1520, el
original exacto en el centro y 672 px pintados a cada lado), a la MISMA escala que la caja, sin difuminar ni fundir.
Este fondo difuminado solo asoma en la banda de la cabecera (74 px) y en pantallas más anchas que 1,5 × la caja. */
.g2 #g2-hero::before{content:""!important;display:block!important;position:absolute;inset:-60px;z-index:-1;
background:var(--g2-hero-pc) center/cover no-repeat;filter:blur(46px) brightness(.62) saturate(1.1);opacity:1}
.g2 #g2-hero::after,.g2 #g2-hero .iso,.g2 #g2-hero .burbuja,.g2 #g2-hero .visual::before{display:none!important;content:none!important}
/* la caja = la imagen */
.g2 #g2-hero>.g2-w.rej{position:relative;display:block;width:var(--bw);height:calc(var(--u) * 913);min-height:0;max-width:none;
margin:0 auto;padding:0!important;gap:0;background:none}
/* la pintura ancha va en un pseudo-elemento que se sale de la caja por los dos lados (2379 u = 1586 × 1,5), a escala exacta:
el centro coincide con la caja, así que los textos y botones siguen en su sitio. Sin fundido lateral. */
.g2 #g2-hero>.g2-w.rej::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - var(--u) * 1189.5);width:calc(var(--u) * 2379);z-index:0;
background:var(--g2-hero-pc) center/100% 100% no-repeat}
.g2 #g2-hero>.g2-w.rej>*{z-index:1}
/* columna de texto: x 160, y 64→856 de la imagen */
.g2 #g2-hero .texto{position:absolute;left:calc(var(--u) * 160);top:calc(var(--u) * 64);width:calc(var(--u) * 690);height:calc(var(--u) * 800);
display:block;padding:0!important;margin:0;justify-content:normal;min-height:0}
.g2 #g2-hero .texto>*{position:absolute;left:0;margin:0!important}
.g2 #g2-hero .g2-eti{top:0;height:calc(var(--u) * 39);display:inline-flex;align-items:center;gap:calc(var(--u) * 10);padding:0 calc(var(--u) * 18) 0 calc(var(--u) * 14)!important;
font-size:calc(var(--u) * 13.5);letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:#7FE3EC;white-space:nowrap;
background:rgba(10,58,92,.55);border:1px solid rgba(127,227,236,.45);border-radius:999px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.g2 #g2-hero .g2-eti .i{width:calc(var(--u) * 17);height:calc(var(--u) * 17);color:#7FE3EC}
.g2 #g2-hero h1{top:calc(var(--u) * 57);width:calc(var(--u) * 660);max-width:none;font-size:calc(var(--u) * 84)!important;line-height:.95!important;letter-spacing:-.012em;color:#fff}
.g2 #g2-hero h1 .acento{color:#5FE0F0}
.g2 #g2-hero .sub{top:calc(var(--u) * 392);width:calc(var(--u) * 575);max-width:none;font-size:calc(var(--u) * 22)!important;line-height:1.4!important;color:#EAF6FA}
.g2 #g2-hero .sub b{color:#fff}
.g2 #g2-hero .g2-conmuta{top:calc(var(--u) * 512);width:calc(var(--u) * 445);height:calc(var(--u) * 57);display:flex;padding:calc(var(--u) * 4)!important;box-sizing:border-box;
background:rgba(6,35,62,.55);border:1.5px solid rgba(255,255,255,.35);border-radius:999px;box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.g2 #g2-hero .g2-conmuta button{flex:1 1 0;height:100%;min-height:0;padding:0 calc(var(--u) * 12)!important;font-size:calc(var(--u) * 17)!important;font-weight:700;border-radius:999px;gap:calc(var(--u) * 10);color:#fff;background:transparent;box-shadow:none}
.g2 #g2-hero .g2-conmuta button[aria-pressed="true"]{background:#fff;color:#0F2942}
.g2 #g2-hero .g2-conmuta button .i{width:calc(var(--u) * 20);height:calc(var(--u) * 20)}
.g2 #g2-hero .msg{top:calc(var(--u) * 592);width:calc(var(--u) * 560);display:flex;gap:calc(var(--u) * 12);align-items:flex-start;
background:none!important;box-shadow:none!important;border:0!important;padding:0!important;min-height:0;font-size:calc(var(--u) * 18)!important;line-height:1.35!important;color:#EAF6FA}
.g2 #g2-hero .msg b{color:#fff}
.g2 #g2-hero .msg .i{width:calc(var(--u) * 22);height:calc(var(--u) * 22);flex:none;background:none!important;border:0!important;box-shadow:none!important;padding:0;color:#3FD3DE;margin-top:calc(var(--u) * 1);stroke-width:2.6}
.g2 #g2-hero .g2-acciones{top:calc(var(--u) * 662);display:flex;flex-wrap:nowrap;gap:calc(var(--u) * 12);width:auto}
.g2 #g2-hero .g2-acciones .g2-btn{flex:none;width:calc(var(--u) * 333);min-width:0;height:calc(var(--u) * 85);min-height:0;box-sizing:border-box;border-radius:calc(var(--u) * 20);
padding:0 calc(var(--u) * 16) 0 calc(var(--u) * 32)!important;font-size:calc(var(--u) * 22)!important;line-height:1.1;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 10)}
.g2 #g2-hero .g2-acciones .g2-btn .txt{display:flex;flex-direction:column;gap:calc(var(--u) * 3);align-items:flex-start;text-align:left}
.g2 #g2-hero .g2-acciones .g2-btn .txt small{font-size:calc(var(--u) * 15);font-weight:500;opacity:.92}
.g2 #g2-hero .g2-acciones .g2-btn .fl{width:calc(var(--u) * 46);height:calc(var(--u) * 46);border-radius:calc(var(--u) * 14);flex:none;order:2}
.g2 #g2-hero .g2-acciones .g2-btn .fl .i{width:calc(var(--u) * 24);height:calc(var(--u) * 24)}
.g2 #g2-hero .g2-btn--compra{background:linear-gradient(180deg,#2ED07A 0%,#1BAE62 55%,#149453 100%);color:#fff;
box-shadow:0 0 0 1.5px rgba(120,255,180,.45),0 0 28px rgba(46,208,122,.45),0 10px 30px rgba(0,0,0,.25)}
.g2 #g2-hero .g2-btn--compra .fl{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.g2 #g2-hero .g2-btn--linea{background:rgba(8,42,66,.62);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),0 10px 30px rgba(0,0,0,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.g2 #g2-hero .g2-btn--linea::after{content:none!important}
.g2 #g2-hero .g2-btn--linea .fl{order:2;width:calc(var(--u) * 46);height:calc(var(--u) * 46);border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.g2 #g2-hero .g2-btn--linea .txt{order:1}
.g2 #g2-hero .g2-chips-mini{top:calc(var(--u) * 762);display:flex;flex-wrap:nowrap;gap:calc(var(--u) * 34);width:auto;padding:0!important;
background:none!important;border:0!important;box-shadow:none!important;font-size:calc(var(--u) * 17)!important;font-weight:700;color:#fff;white-space:nowrap}
.g2 #g2-hero .g2-chips-mini span{display:inline-flex;align-items:center;gap:calc(var(--u) * 10);padding:0!important;background:none!important;border:0!important;font-size:inherit!important}
.g2 #g2-hero .g2-chips-mini .i{width:calc(var(--u) * 20);height:calc(var(--u) * 20);color:#3FD3DE;stroke-width:2.6}
/* el móvil está PINTADO en la imagen: fuera el de código; los dos chips, en su sitio (x 1248, y 216 y 293) */
.g2 #g2-hero .visual{position:absolute;inset:0;display:block;pointer-events:none;transform:none!important}
.g2 #g2-hero .visual .g2-movil,.g2 #g2-hero .visual .etiqueta{display:none!important}
.g2 #g2-hero .visual .g2-flota{position:absolute;right:auto!important;left:calc(var(--u) * 1248)!important;width:calc(var(--u) * 270);height:calc(var(--u) * 57);box-sizing:border-box;
display:inline-flex;align-items:center;gap:calc(var(--u) * 14);padding:0 calc(var(--u) * 20)!important;margin:0;transform:none!important;
background:#fff;color:#0F2942;border-radius:calc(var(--u) * 16);font-size:calc(var(--u) * 17)!important;font-weight:700;white-space:nowrap;
box-shadow:0 14px 34px rgba(3,15,28,.35),inset 0 1px 0 #fff;pointer-events:auto}
.g2 #g2-hero .visual .g2-flota.f1{top:calc(var(--u) * 216)!important}
.g2 #g2-hero .visual .g2-flota.f2{top:calc(var(--u) * 293)!important}
.g2 #g2-hero .visual .g2-flota .i{width:calc(var(--u) * 22);height:calc(var(--u) * 22);color:#1A9D5A;flex:none}
/* tercer chip: la nota de Google, a la vista al llegar (decisión repetida de Javi) */
.g2 #g2-hero .visual .g2-flota.f3{top:calc(var(--u) * 370)!important;width:auto;min-width:calc(var(--u) * 270);gap:calc(var(--u) * 8);padding:0 calc(var(--u) * 18)!important}
.g2 #g2-hero .visual .g2-flota.f3>span:not(.n){display:contents}
.g2 #g2-hero .visual .g2-flota.f3 .est{order:1}.g2 #g2-hero .visual .g2-flota.f3 .n{order:2}.g2 #g2-hero .visual .g2-flota.f3 small{order:3}
.g2 #g2-hero .visual .g2-flota.f3 .est{display:flex;gap:1px;color:#F0B429}
.g2 #g2-hero .visual .g2-flota.f3 .est .i{width:calc(var(--u) * 17);height:calc(var(--u) * 17);fill:currentColor;stroke:none;color:#F0B429}
.g2 #g2-hero .visual .g2-flota.f3 .n{font-family:var(--g2-tit);font-size:calc(var(--u) * 24);line-height:1;margin-left:calc(var(--u) * 4)}
.g2 #g2-hero .visual .g2-flota.f3 small{font-size:calc(var(--u) * 14);font-weight:700;color:#35506A;margin:0;white-space:nowrap}
.g2 #g2-hero .g2-prueba-fila .g2-nota{display:none}
/* PRUEBA SOCIAL a la vista al llegar (decisión repetida de Javi): dentro de la caja, bajo la fila «Pago único…»,
en el hueco libre de la imagen (y 866→906 de 913), en una sola línea */
.g2 #g2-hero>.g2-w.g2-prueba-fila{position:absolute;z-index:2;left:calc(50% - var(--bw) / 2 + var(--u) * 160);top:calc(var(--u) * 866);width:calc(var(--u) * 1060);
max-width:none;margin:0;padding:0!important}
.g2 #g2-hero .g2-prueba{display:flex;flex-wrap:nowrap;align-items:center;gap:calc(var(--u) * 26);margin:0!important;padding:0!important;border-top:0;white-space:nowrap}
.g2 #g2-hero .g2-prueba .g2-nota{gap:calc(var(--u) * 10);color:#fff}
.g2 #g2-hero .g2-prueba .g2-nota .n{font-size:calc(var(--u) * 26);line-height:1}
.g2 #g2-hero .g2-prueba .g2-nota .est .i{width:calc(var(--u) * 16);height:calc(var(--u) * 16)}
.g2 #g2-hero .g2-prueba .g2-nota small{font-size:calc(var(--u) * 14);margin-top:calc(var(--u) * 2);color:#EAF6FA;opacity:1}
.g2 #g2-hero .g2-prueba .g2-equipo{font-size:calc(var(--u) * 14.5);line-height:1.25;gap:calc(var(--u) * 10);color:#EAF6FA;white-space:normal;max-width:calc(var(--u) * 520)}
.g2 #g2-hero .g2-prueba .g2-equipo b{color:#fff}
.g2 #g2-hero .g2-prueba .g2-cara{width:calc(var(--u) * 32);height:calc(var(--u) * 32);font-size:calc(var(--u) * 13);border-width:2px;border-color:#0A2F4E}
.g2 #g2-hero .g2-ola{position:relative}
}
/* ===== MÓVIL (<1024): la imagen Higgsfield v2 (1520×2504 sin cabecera) vaciada; --u = ancho de pantalla / 1520 ===== */
@media (max-width:1023px){
.g2 #g2-hero{--u:calc(100vw / 1520);position:relative;isolation:isolate;overflow:hidden;background:#E4F9FD!important;padding:0!important;min-height:0}
.g2 #g2-hero::before,.g2 #g2-hero::after,.g2 #g2-hero .iso,.g2 #g2-hero .burbuja,.g2 #g2-hero .visual{display:none!important;content:none!important}
.g2 #g2-hero>.g2-w.rej{position:relative;display:block;width:100vw;height:calc(var(--u) * 2504);min-height:0!important;max-width:none;margin:0;padding:0!important;gap:0;
background:#06233E var(--g2-hero-mv) center top/100% 100% no-repeat}
.g2 #g2-hero .texto{position:absolute;left:calc(var(--u) * 195);top:calc(var(--u) * 81);width:calc(var(--u) * 1140);height:calc(var(--u) * 2210);
display:block;padding:0!important;margin:0;min-height:0!important;justify-content:normal}
.g2 #g2-hero .texto>*{position:absolute;left:0;margin:0!important}
.g2 #g2-hero .g2-eti{top:0;width:calc(var(--u) * 1000);min-height:calc(var(--u) * 114);box-sizing:border-box;display:inline-flex;align-items:center;gap:calc(var(--u) * 26);
padding:calc(var(--u) * 14) calc(var(--u) * 40) calc(var(--u) * 14) calc(var(--u) * 30)!important;white-space:normal;
font-size:calc(var(--u) * 33);line-height:1.25;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#7FE3EC;
background:rgba(10,58,92,.6);border:calc(var(--u) * 3) solid rgba(127,227,236,.45);border-radius:calc(var(--u) * 60)}
.g2 #g2-hero .g2-eti .i{width:calc(var(--u) * 48);height:calc(var(--u) * 48);flex:none;color:#7FE3EC}
.g2 #g2-hero h1{top:calc(var(--u) * 256);width:calc(var(--u) * 1080);max-width:none;font-size:calc(var(--u) * 138)!important;line-height:.95!important;letter-spacing:-.012em;color:#fff}
.g2 #g2-hero h1 .acento{color:#5FE0F0}
.g2 #g2-hero .sub{top:calc(var(--u) * 834);width:calc(var(--u) * 1100);max-width:none;font-size:calc(var(--u) * 49)!important;line-height:1.28!important;color:#EAF6FA}
.g2 #g2-hero .sub b{color:#fff}
.g2 #g2-hero .g2-conmuta{top:calc(var(--u) * 1096);width:calc(var(--u) * 1130);height:calc(var(--u) * 187);display:flex;padding:calc(var(--u) * 12)!important;box-sizing:border-box;
background:rgba(6,35,62,.55);border:calc(var(--u) * 4) solid rgba(255,255,255,.35);border-radius:999px;box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.g2 #g2-hero .g2-conmuta button{flex:1 1 0;height:100%;min-height:0;padding:0 calc(var(--u) * 16)!important;font-size:calc(var(--u) * 46)!important;font-weight:700;border-radius:999px;gap:calc(var(--u) * 18);color:#fff;background:transparent;box-shadow:none;white-space:nowrap}
.g2 #g2-hero .g2-conmuta button[aria-pressed="true"]{background:#fff;color:#0F2942}
.g2 #g2-hero .g2-conmuta button .i{width:calc(var(--u) * 56);height:calc(var(--u) * 56)}
.g2 #g2-hero .msg{top:calc(var(--u) * 1316);width:calc(var(--u) * 1130);height:calc(var(--u) * 242);box-sizing:border-box;display:flex;align-items:center;gap:calc(var(--u) * 34);
padding:0 calc(var(--u) * 44)!important;min-height:0;font-size:calc(var(--u) * 46)!important;line-height:1.32!important;color:#EAF6FA;
background:rgba(14,60,95,.55)!important;border:calc(var(--u) * 3) solid rgba(127,227,236,.35)!important;border-radius:calc(var(--u) * 44);box-shadow:none!important}
.g2 #g2-hero .msg b{color:#fff}
.g2 #g2-hero .msg .i{width:calc(var(--u) * 100);height:calc(var(--u) * 100);flex:none;box-sizing:border-box;padding:calc(var(--u) * 24);border-radius:50%;
background:rgba(10,183,198,.32)!important;border:calc(var(--u) * 3) solid rgba(127,227,236,.55)!important;box-shadow:none!important;color:#7FE3EC;margin:0;stroke-width:2.6}
.g2 #g2-hero .g2-acciones{top:calc(var(--u) * 1601);width:calc(var(--u) * 1153);display:flex;flex-direction:column;gap:calc(var(--u) * 34)}
.g2 #g2-hero .g2-acciones .g2-btn{width:100%;min-width:0;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;line-height:1.08}
.g2 #g2-hero .g2-acciones .g2-btn .txt{display:flex;flex-direction:column;gap:calc(var(--u) * 8);align-items:flex-start;text-align:left}
.g2 #g2-hero .g2-btn--compra{height:calc(var(--u) * 245);min-height:0;border-radius:calc(var(--u) * 52);padding:0 calc(var(--u) * 50) 0 calc(var(--u) * 100)!important;font-size:calc(var(--u) * 72)!important;
background:linear-gradient(180deg,#2ED07A 0%,#1BAE62 55%,#149453 100%);color:#fff;box-shadow:0 0 0 calc(var(--u) * 4) rgba(120,255,180,.45),0 0 calc(var(--u) * 80) rgba(46,208,122,.45)}
.g2 #g2-hero .g2-btn--compra .txt small{font-size:calc(var(--u) * 44);font-weight:500;opacity:.95}
.g2 #g2-hero .g2-btn--compra .fl{width:calc(var(--u) * 150);height:calc(var(--u) * 150);border-radius:calc(var(--u) * 36);background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 calc(var(--u) * 3) rgba(255,255,255,.35);flex:none;order:2}
.g2 #g2-hero .g2-btn--compra .fl .i{width:calc(var(--u) * 70);height:calc(var(--u) * 70)}
.g2 #g2-hero .g2-btn--linea{height:calc(var(--u) * 200);min-height:0;border-radius:calc(var(--u) * 46);padding:0 calc(var(--u) * 50) 0 calc(var(--u) * 60)!important;font-size:calc(var(--u) * 58)!important;
background:rgba(8,42,66,.62);color:#fff;box-shadow:inset 0 0 0 calc(var(--u) * 3) rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);gap:calc(var(--u) * 40)}
.g2 #g2-hero .g2-btn--linea .txt small{font-size:calc(var(--u) * 44);font-weight:500;opacity:.92}
.g2 #g2-hero .g2-btn--linea .fl{order:0;width:calc(var(--u) * 120);height:calc(var(--u) * 120);border-radius:calc(var(--u) * 30);background:rgba(10,183,198,.22);box-shadow:inset 0 0 0 calc(var(--u) * 3) rgba(127,227,236,.35);flex:none}
.g2 #g2-hero .g2-btn--linea .fl .i{width:calc(var(--u) * 56);height:calc(var(--u) * 56)}
.g2 #g2-hero .g2-btn--linea .txt{order:1;flex:1 1 auto}
.g2 #g2-hero .g2-btn--linea::after{order:2;width:calc(var(--u) * 60);height:calc(var(--u) * 60);margin:0}
.g2 #g2-hero .g2-chips-mini{top:calc(var(--u) * 2134);width:calc(var(--u) * 1135);height:calc(var(--u) * 148);box-sizing:border-box;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;
padding:0 calc(var(--u) * 44)!important;margin-inline:0!important;background:rgba(8,42,66,.5)!important;border:calc(var(--u) * 3) solid rgba(255,255,255,.35)!important;border-radius:calc(var(--u) * 44);box-shadow:none!important;
font-size:calc(var(--u) * 40)!important;font-weight:700;color:#fff;white-space:nowrap}
.g2 #g2-hero .g2-chips-mini span{display:inline-flex;align-items:center;gap:calc(var(--u) * 16);padding:0!important;background:none!important;border:0!important;font-size:inherit!important;flex:none}
.g2 #g2-hero .g2-chips-mini span+span{border-left:1px solid rgba(255,255,255,.3)!important;padding-left:calc(var(--u) * 30)!important}
.g2 #g2-hero .g2-chips-mini .i{width:calc(var(--u) * 46);height:calc(var(--u) * 46);color:#F0B429;stroke-width:2.4}
/* debajo de la imagen (que ya acaba en la ola pintada): las reseñas sobre claro; la ola por código, fuera */
.g2 #g2-hero .g2-ola{display:none!important}
.g2 #g2-hero>.g2-w.g2-prueba-fila{position:relative;background:#E4F9FD;padding:14px 20px 18px!important;margin:0;max-width:none}
.g2 #g2-hero .g2-prueba{margin-top:0!important;padding-top:0!important;border-top:0;color:#0F2942}
.g2 #g2-hero .g2-prueba .g2-nota,.g2 #g2-hero .g2-prueba .g2-nota small,.g2 #g2-hero .g2-equipo,.g2 #g2-hero .g2-equipo b{color:#0F2942}
.g2 #g2-hero .g2-prueba .g2-nota small{opacity:.8}
.g2 #g2-hero .g2-cara{border-color:#E4F9FD}
}
/* secciones_v1.css · 16/9/2026 · CUARTEL · se carga después de hero_v4.css.
Toda la web con el diseño de las referencias (decisión 47 del cuartel): atmósfera pintada por sección
(Higgsfield deja la referencia en «atmósfera»: solo ilustración y luz) + tarjetas de vidrio calcadas en código.
Cada sección tiene su variable --atm-; hasta que llega su imagen, la sección sigue con su color de G2. */
:root{
--atm-casos:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_02_movil_1520x2688.webp?v=2");
--atm-hace:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_03_movil_1520x2688.webp?v=2");
--atm-ves:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_04_movil_1520x2688.webp?v=2");
--atm-cobra:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_05_movil_1520x2688.webp?v=2");
--atm-meses:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_06_movil_1520x2688.webp?v=2");
--atm-niveles:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_07_movil_1520x2688.webp?v=2");
--atm-compara:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_08_movil_1520x2688.webp?v=2");
--atm-resenas:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_09_movil_1520x2688.webp?v=2");
--atm-personas:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_10_movil_1520x2688.webp?v=2");
--atm-ayudas:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_11_movil_1520x2688.webp?v=2");
--atm-regala:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_12_movil_1520x2688.webp?v=2");
--atm-faq:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_13_movil_1520x2688.webp?v=2");
--atm-final:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_14_movil_1520x2688.webp?v=2");
}
/* ---------- atmósfera por sección (móvil: imagen 9:16 arriba; ordenador: la versión ancha cuando exista) ---------- */
.g2 .g2-s[id]{background-repeat:no-repeat;background-position:center top;background-size:cover}
.g2 .g2-s.g2-casos{background-image:none}.g2 .g2-s.g2-casos.atm-on{background-image:var(--atm-casos,none)}
.g2 .g2-s.g2-hace{background-image:none}.g2 .g2-s.g2-hace.atm-on{background-image:var(--atm-hace,none)}
.g2 .g2-s.g2-ves{background-image:radial-gradient(120% 80% at 100% 0%,#16395C 0%,#0F2942 45%,#0B1F33 100%)}.g2 .g2-s.g2-ves.atm-on{background-image:var(--atm-ves,none),radial-gradient(120% 80% at 100% 0%,#16395C 0%,#0F2942 45%,#0B1F33 100%)}
.g2 .g2-s.g2-cobra{background-image:none}.g2 .g2-s.g2-cobra.atm-on{background-image:var(--atm-cobra,none)}
.g2 .g2-s.g2-meses{background-image:none}.g2 .g2-s.g2-meses.atm-on{background-image:var(--atm-meses,none)}
.g2 .g2-s.g2-niveles{background-image:linear-gradient(165deg,#CFF3F6 0%,#E9F6FB 55%,#F7FCFE 100%)}.g2 .g2-s.g2-niveles.atm-on{background-image:var(--atm-niveles,none),linear-gradient(165deg,#CFF3F6 0%,#E9F6FB 55%,#F7FCFE 100%)}
.g2 .g2-s.g2-cmp{background-image:radial-gradient(120% 80% at 100% 0%,#16395C 0%,#0F2942 45%,#0B1F33 100%)}.g2 .g2-s.g2-cmp.atm-on{background-image:var(--atm-compara,none),radial-gradient(120% 80% at 100% 0%,#16395C 0%,#0F2942 45%,#0B1F33 100%)}
.g2 .g2-s.g2-res{background-image:none}.g2 .g2-s.g2-res.atm-on{background-image:var(--atm-resenas,none)}
.g2 .g2-s.g2-per{background-image:none}.g2 .g2-s.g2-per.atm-on{background-image:var(--atm-personas,none)}
.g2 .g2-s.g2-ayu{background-image:none}.g2 .g2-s.g2-ayu.atm-on{background-image:var(--atm-ayudas,none)}
.g2 .g2-s.g2-reg{background-image:none}.g2 .g2-s.g2-reg.atm-on{background-image:var(--atm-regala,none)}
.g2 .g2-s.g2-faq{background-image:none}.g2 .g2-s.g2-faq.atm-on{background-image:var(--atm-faq,none)}
.g2 .g2-s.g2-cie{background-image:var(--g2-grad)}.g2 .g2-s.g2-cie.atm-on{background-image:var(--atm-final,none),var(--g2-grad)}
/* ---------- tarjetas de vidrio (secciones claras), calcadas de las referencias ---------- */
.g2 .g2-s:not(.g2-s--navy):not(.g2-s--marca) .g2-ficha,
.g2 .g2-s:not(.g2-s--navy):not(.g2-s--marca) .g2-tarj,
.g2 .g2-s:not(.g2-s--navy):not(.g2-s--marca) .g2-nivel,
.g2 .g2-s:not(.g2-s--navy):not(.g2-s--marca) .g2-sello{
background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(236,249,252,.92) 100%);
border:1px solid rgba(255,255,255,.95);
box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(15,41,66,.04),0 18px 40px rgba(15,41,66,.10),0 0 0 1px rgba(10,183,198,.06)}
.g2 .g2-ficha[aria-pressed="true"]{
background:linear-gradient(180deg,#F2FDFE 0%,#CDF1F6 100%)!important;border:2px solid #2BC4D6!important;
box-shadow:inset 0 1px 0 #fff,0 0 0 5px rgba(43,196,214,.14),0 22px 44px rgba(10,183,198,.22)!important}
.g2 .g2-ico{background:linear-gradient(180deg,#F4FCFE 0%,#D9F3F8 100%);box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(10,183,198,.14);color:#0E8FA0}
.g2 .g2-ficha[aria-pressed="true"] .g2-ico{background:linear-gradient(145deg,#3FD3DE 0%,#0AB7C6 60%,#0897A6 100%);color:#fff;box-shadow:0 0 0 4px rgba(10,183,198,.16),0 10px 22px rgba(10,183,198,.35)}
.g2 .g2-respuesta{background:linear-gradient(180deg,#fff 0%,#F3FBFD 100%);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 26px 60px rgba(15,41,66,.14),0 0 0 1px rgba(10,183,198,.08)}
/* marca de agua algo más presente mientras no hay atmósfera pintada */
.g2 .g2-s:not(.g2-s--navy):not(.g2-s--marca) .g2-marca-agua{opacity:.11}
/* ---------- FICHA DEL PACK · atmósfera de gpt_14 (variante 2 aprobada): navy curvado arriba con marca de agua, arena abajo ---------- */
:root{--atm-pack:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_gpt14_1520x2688.webp?v=2")}
.g2 .g2-hero.g2-pk-hero{background:#0F2942 var(--atm-pack) center top/cover no-repeat}
.g2 .g2-hero.g2-pk-hero::before,.g2 .g2-hero.g2-pk-hero::after,.g2 .g2-pk-hero .iso,.g2 .g2-pk-hero .burbuja{display:none!important;content:none!important}
.g2 .g2-pk-caja{background:linear-gradient(180deg,#fff 0%,#F6FCFE 100%);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 26px 60px rgba(15,41,66,.16)}
.g2 .g2-pk-nivel{background:linear-gradient(180deg,#fff 0%,#F7FCFE 100%)}
/* en la ficha del pack manda su propia barra fija (nivel + añadir): la genérica del cascarón, fuera (en WordPress lo hace pxn_hf4_ctx=false) */
body:has(.g2-pk-hero) #hf4-dock{display:none!important}
/* ---------- atmósfera base por código, para TODAS las secciones que aún no tienen pintura (y para las páginas sin maqueta):
marca de agua del bebé grande, alternando lado, y luces suaves arena/cian. En WordPress, --g2-iso apunta al isotipo subido. ---------- */
.g2 .g2-s:not(.g2-hero){overflow:clip}
.g2 .g2-s:not(.g2-hero)::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;
background:radial-gradient(52% 60% at 100% 0%,rgba(10,183,198,.14) 0%,rgba(10,183,198,0) 70%),radial-gradient(48% 50% at 0% 100%,rgba(240,180,41,.16) 0%,rgba(240,180,41,0) 70%)}
.g2 .g2-s--navy::before,.g2 .g2-s--marca::before{background:radial-gradient(52% 60% at 100% 0%,rgba(63,211,222,.18) 0%,rgba(63,211,222,0) 70%),radial-gradient(48% 50% at 0% 100%,rgba(240,180,41,.14) 0%,rgba(240,180,41,0) 70%)}
.g2 .g2-s:not(.g2-hero)::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:min(78vw,760px);aspect-ratio:1;right:-16%;top:-4%;
background:#0AB7C6;opacity:.09;
-webkit-mask:var(--g2-iso,url("g2_iso_blanco.svg")) center/contain no-repeat;mask:var(--g2-iso,url("g2_iso_blanco.svg")) center/contain no-repeat}
.g2 .g2-s:not(.g2-hero):nth-of-type(even)::after{right:auto;left:-18%;top:auto;bottom:-6%;transform:scaleX(-1)}
.g2 .g2-s--navy::after,.g2 .g2-s--marca::after{background:#7FE3EC;opacity:.10}
.g2 .g2-s--ambar::after,.g2 .g2-s--arena::after{background:#D9951A;opacity:.07}
@media (max-width:1023px){.g2 .g2-s:not(.g2-hero)::after{width:120vw;right:-46%;top:-2%}.g2 .g2-s:not(.g2-hero):nth-of-type(even)::after{left:-52%;bottom:-4%}}
/* el iso de marcado que ya existe en algunas secciones sobra al haber marca de agua por código */
.g2 .g2-s:not(.g2-hero) .g2-marca-agua{display:none}
/* encaje móvil: las claras pintan la atmósfera arriba (ancho completo) y siguen con el color de su pie; las navy, a cubrir */
.g2 .g2-s.g2-casos{background-color:#DAF5F9!important;background-size:100% auto}
.g2 .g2-s.g2-hace{background-color:#E9F8FB!important;background-size:100% auto}
.g2 .g2-s.g2-cobra{background-color:#FAF2E0!important;background-size:100% auto}
.g2 .g2-s.g2-meses{background-color:#E4F6FA!important;background-size:100% auto}
.g2 .g2-s.g2-niveles{background-color:#E4F6F7!important;background-size:100% auto}
.g2 .g2-s.g2-res{background-color:#F0EEE1!important;background-size:100% auto}
.g2 .g2-s.g2-per{background-color:#F1FAFC!important;background-size:100% auto}
.g2 .g2-s.g2-ayu{background-color:#E5F5F6!important;background-size:100% auto}
.g2 .g2-s.g2-reg{background-color:#FCECC7!important;background-size:100% auto}
.g2 .g2-s.g2-faq{background-color:#E9F8FB!important;background-size:100% auto}
.g2 .g2-s.g2-ves,.g2 .g2-s.g2-cmp,.g2 .g2-s.g2-cie{background-size:cover,auto;background-position:center bottom,center}
/* ORDENADOR: la atmósfera ancha de cada sección (lote 3), a cubrir */
@media (min-width:1024px){
:root{
--atm-casos:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_02_pc_2688x1520.webp?v=2");
--atm-hace:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_03_pc_2688x1520.webp?v=2");
--atm-ves:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_04_pc_2688x1520.webp?v=2");
--atm-cobra:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_05_pc_2688x1520.webp?v=2");
--atm-meses:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_06_pc_2688x1520.webp?v=2");
--atm-niveles:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_07_pc_2688x1520.webp?v=2");
--atm-compara:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_08_pc_2688x1520.webp?v=2");
--atm-resenas:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_09_pc_2688x1520.webp?v=2");
--atm-personas:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_10_pc_2688x1520.webp?v=2");
--atm-ayudas:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_11_pc_2688x1520.webp?v=2");
--atm-regala:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_12_pc_2688x1520.webp?v=2");
--atm-faq:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_13_pc_2688x1520.webp?v=2");
--atm-final:url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/atm_portada_14_pc_2688x1520.webp?v=2");
}
.g2 .g2-s[id]{background-size:cover;background-position:center center}
.g2 .g2-s.g2-ves,.g2 .g2-s.g2-cmp,.g2 .g2-s.g2-cie{background-size:cover,auto;background-position:center center,center}
.g2 .g2-s[id]:not(.g2-hero)::after{display:none}
}
/* con pintura arriba, la marca de agua por código va abajo */
.g2 .g2-s[id]:not(.g2-hero)::after{top:auto;bottom:-6%}
/* ---------- PRIMERA PANTALLA de las demás páginas (quiénes somos, contacto, regala tiempo, guías, servicios…):
la misma atmósfera pintada de la portada, sin el móvil (ordenador) y la del móvil v2 vaciada (móvil) ---------- */
.g2 .g2-hero:not(#g2-hero):not(.g2-pk-hero){background:#06233E url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/fondo_hero_movil_v2_vacio_1520x2504.webp?v=2") center top/100% auto no-repeat}
.g2 .g2-hero:not(#g2-hero):not(.g2-pk-hero)::before,.g2 .g2-hero:not(#g2-hero):not(.g2-pk-hero)::after,.g2 .g2-hero:not(#g2-hero):not(.g2-pk-hero) .iso,.g2 .g2-hero:not(#g2-hero):not(.g2-pk-hero) .burbuja{display:none!important;content:none!important}
@media (min-width:1024px){
.g2 .g2-hero:not(#g2-hero):not(.g2-pk-hero){background:#06233E url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/fondo_hero_pc_gpt05_sinmovil_2688x1520.webp?v=2") center center/cover no-repeat}
}
/* ficha en ordenador: la misma escena pintada de la portada sin el móvil; la tarjeta del pack ocupa el sitio del móvil, sobre la piedra */
@media (min-width:1024px){
.g2 .g2-hero.g2-pk-hero{background:#06233E url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/fondo_hero_pc_gpt05_sinmovil_2688x1520.webp?v=2") center center/cover no-repeat}
}
/* =====================================================================
CABECERA INTEGRADA sobre la primera pantalla (cuartel, 16/9/2026 tarde)
El sistema (fragmento 332) marca el cuerpo con `hf4-oscura` en cuanto un pintor de página nueva la pinta
desde template_redirect; la cabecera (278) pasa a transparente con logo y texto blancos.
Con `hf4-oscura` el cuerpo ya NO deja hueco arriba (body.hf4-oscura.hf4-pad{padding-top:0}),
así que cada primera pantalla se reserva ella misma la altura de la cabecera: --hf4h (74 px; 64 px hasta 900 px).
===================================================================== */
/* portada · ordenador: la caja de la imagen ya mide 100vh − 74 px (hero_v4); la banda de arriba la cubre el mismo fondo difuminado */
body.hf4-oscura .g2 #g2-hero{padding-top:var(--hf4h,74px)!important}
/* portada · móvil: la misma banda difuminada, con la imagen del móvil (su borde de arriba no es de un solo color) */
@media (max-width:1023px){
body.hf4-oscura .g2 #g2-hero{padding-top:var(--hf4h,64px)!important;background:#06233E!important}
body.hf4-oscura .g2 #g2-hero::before{content:""!important;display:block!important;position:absolute;inset:-60px;z-index:-1;
background:#06233E var(--g2-hero-mv) center top/cover no-repeat;filter:blur(34px) brightness(.8)}
}
/* páginas interiores (quiénes somos, contacto, regala, guías, servicios…) y ficha del pack: su relleno de siempre más la cabecera */
body.hf4-oscura .g2 .g2-hero:not(#g2-hero):not(.g2-pk-hero){padding-top:calc(var(--hf4h,74px) + clamp(34px,6vw,84px))}
body.hf4-oscura .g2 .g2-hero.g2-pk-hero{padding-top:calc(var(--hf4h,74px) + clamp(20px,4vw,60px))}
/* cualquier otra página cuya primera sección sea una .g2-s oscura (p. ej. el artículo del blog): el mismo hueco
de la cabecera por dentro de la sección, para que el título no quede debajo del menú */
body.hf4-oscura .g2 > .g2-s:first-child:not(.g2-hero){padding-top:calc(var(--hf4h,74px) + clamp(64px,10vw,116px))}
:root{--g2-iso:url("/wp-content/uploads/pxn-g2/v2/iso-blanco.svg")}
/* =====================================================================
LEGIBILIDAD EN MÓVIL (pata LEGIBILIDAD · 18/9/2026) — va al FINAL del acabado (v7)
Javi vio el 18/9 en el móvil textos ilegibles en las páginas interiores. Dos causas, las dos aquí:
1) PRIMERA PANTALLA de las páginas interiores (quiénes somos, opiniones, regala tiempo, autoras, contacto…):
el fondo pintado del móvil medía «todo el ancho, alto proporcional» y se anclaba ARRIBA. Cuando el texto de la
página es más alto que la imagen (título de 3 líneas + reseñas + tarjeta), lo último caía SOBRE LA NUBE BLANCA
del pie de la imagen (texto blanco sobre blanco: «5,0 en Google · 757 reseñas», «Personas con nombre al otro
lado…», la tarjeta «La respuesta corta») y debajo asomaba una franja azul lisa antes de la sección siguiente.
Ahora la imagen se ancla ABAJO (la nube cierra siempre la sección, como en las páginas cortas), por arriba se
funde con el azul del fondo, y la sección se reserva sitio en el pie para que ninguna línea pise la nube.
2) BOTÓN SECUNDARIO («Preguntar por WhatsApp», «Descargar la tarjeta regalo»): el texto tenía prohibido partirse
y a 390 px se metía debajo de la flecha. En pantallas estrechas puede ir en dos líneas.
La portada (#g2-hero) y la ficha del pack (.g2-pk-hero) NO se tocan.
===================================================================== */
@media (max-width:1023px){
.g2 .g2-hero:not(#g2-hero):not(.g2-pk-hero){
background:
linear-gradient(180deg,#06233E 0,rgba(6,35,62,.9) 30px,rgba(6,35,62,0) 170px) center bottom/100% calc(100vw * 2504 / 1520) no-repeat,
url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/fondo_hero_movil_v2_vacio_1520x2504.webp?v=2") center bottom/100% auto no-repeat,
#06233E;
padding-bottom:clamp(100px,30vw,200px)
}
}
@media (max-width:560px){
.g2 .g2-hero:not(#g2-hero):not(.g2-pk-hero) .g2-btn .txt,
.g2 .g2-hero:not(#g2-hero):not(.g2-pk-hero) .g2-btn .txt>span{white-space:normal}
}
/* 3) (v8, 18/9 noche) PÁRRAFO PEGADO A LOS BOTONES en la primera pantalla de TODAS las páginas interiores en móvil
(gestoría, quiénes somos, denegada, preguntas, opiniones…): el párrafo de presentación terminaba en el mismo píxel
en que empezaba el botón verde (0 px de aire). En ordenador el acabado le da un margen abajo, pero esa regla solo
vive a partir de 1024 px; en móvil el sistema deja el párrafo sin margen abajo y el bloque de botones sin margen
arriba. Aquí se abre el hueco entre los dos, solo en móvil y tableta. La portada y la ficha del pack no se tocan. */
@media (max-width:1023px){
.g2 .g2-hero:not(#g2-hero):not(.g2-pk-hero) .sub+.g2-acciones{margin-top:clamp(18px,5vw,26px)}
}
/* 4) (v9, 18/9 noche) NEGRITA DENTRO DE LA DESCRIPCIÓN de las tarjetas de ruta (gestoría, denegada, preguntas, opiniones;
motor 365): el sistema (g2.css) dice «.g2-ruta b» = bloque a 18 px, pensado solo para el TÍTULO de la tarjeta. Pero la
descripción («su baja va POR AUTÓNOMOS, sin certificado…») también lleva negritas, y cada una saltaba a línea propia
en grande: la tarjeta parecía tener tres títulos y el texto se rompía en trozos. La negrita dentro de la descripción
vuelve a ir en línea, con el tamaño del texto que la rodea. El título no cambia. */
.g2 .g2-ruta small b{display:inline;font-size:inherit;line-height:inherit}
/* ===== v11: la hoja de ruta VIVA dentro del móvil pintado de la primera pantalla (solo ordenador, ≥1024) =====
v15 (20/9/2026 01:50, Javi «ajusta esto»): la deformación de v11 se salía del marco arriba a la izquierda y se quedaba 12-14 px corta abajo
(se veía una tira de la pantalla pintada). Esquinas REALES de la pantalla pintada medidas sobre la caja 1586×913 (borde negro del marco):
921,88 · 1244,55.6 · 1211.6,855 · 874.5,855 → la hoja se coloca 1 px hacia dentro: 922,89 · 1243,56.6 · 1210.6,854 · 875.5,854.
El radio de las esquinas pasa de 30 a 48 px (en px de la hoja; ≈38 px en pantalla, como el marco pintado).
Capa de 1586×913 escalada con --k (= ancho de la caja / 1586, lo pone el guion de la portada) y dentro la pantalla de 390×890
deformada con matrix3d a esas cuatro esquinas. */
@media (min-width:1024px){
.g2 #g2-hero>.g2-w.rej{--k:1} /* el factor real lo pone un guion mínimo: ancho de la caja / 1586 */
.g2 #g2-hero .g2-hoja-viva{position:absolute;left:0;top:0;width:1586px;height:913px;transform:scale(var(--k));transform-origin:0 0;z-index:1;pointer-events:none;display:block}
.g2 #g2-hero .g2-hoja-viva .pant{position:absolute;left:0;top:0;width:390px;height:890px;transform:matrix3d(0.693575,-0.0889738,0,-0.000104185,-0.0975033,0.815406,0,-5.16917e-05,0,0,1,0,922,89,0,1);transform-origin:0 0;
border-radius:48px;overflow:hidden;pointer-events:auto;background:#0b3a5c;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}
.g2 #g2-hero .g2-hoja-viva iframe{display:block;width:390px;height:890px;border:0;background:#fff}
/* brillo suave del cristal, como en la pintura */
.g2 #g2-hero .g2-hoja-viva .pant::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 28%,rgba(255,255,255,0) 50%)}
}
@media (max-width:1023.98px){.g2 #g2-hero .g2-hoja-viva{display:none}}