/* [ROSA 2026-10-20] Portada de prueba 4.php: misma portada, más luz y menos cajas. Solo la usa 4.php. */
body{background:#fff !important;background-image:none !important}
.p4{overflow-x:clip;--p4-ink:#2b1d27;--p4-soft:#8a6b78;--p4-rose:#ff2d6f;--p4-line:rgba(183,110,121,.16);color:var(--p4-ink)}

/* ---------- HERO: los dos productos en la primera pantalla ---------- */
.p4-hero{position:relative;text-align:center;padding:6px 18px 28px;margin:-18px auto 0;max-width:1080px}
.p4-h1{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.025em;color:var(--p4-ink);
  font-size:clamp(25px,3.7vw,46px);line-height:1.08;margin:6px auto 8px;max-width:820px;text-wrap:balance}
.p4-h1-soft{display:block;color:#c06b8a;font-weight:700}
.p4-lead{margin:0 auto 18px;font-size:clamp(14.5px,1.4vw,18px);font-weight:600;color:var(--p4-soft);max-width:640px;text-wrap:balance}

.p4-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px 64px;max-width:760px;margin:0 auto;align-items:start}
.p4-prod{display:flex;flex-direction:column;align-items:center;min-width:0}
.p4-name{font-family:'Dancing Script',cursive;font-weight:700;font-size:clamp(27px,3.4vw,44px);line-height:1.05;margin:0;letter-spacing:-.3px;white-space:nowrap}
.p4-name .ttl{background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:textGradientSweep 4s linear infinite}
.p4-name .emo{-webkit-text-fill-color:initial}
.p4-stat{margin:4px 0 10px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--p4-soft)}
.p4-stat strong{color:var(--p4-rose);font-weight:800}

.p4 .mockup-container{max-width:206px;margin:0 auto 16px;gap:8px}
.p4 .demo-caption{min-height:30px;align-items:flex-end;font-size:12.5px;color:#a2456b;animation:bounceCall 2.4s infinite ease-in-out}
.p4 .demo-caption svg{color:#ff2d6f}
.p4 .iphone-mockup{box-shadow:0 30px 60px -18px rgba(255,45,111,.28),0 12px 24px -10px rgba(43,29,39,.22),inset 0 0 0 1px rgba(255,255,255,.1)}

.p4-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:260px;
  padding:13px 18px;border-radius:999px;text-decoration:none;color:#fff !important;font-family:'Manrope',sans-serif;font-weight:800;font-size:15.5px;letter-spacing:-.01em;
  background-size:200% auto;transition:transform .25s,box-shadow .25s,background-position .6s}
.p4-cta-rosa{background-image:linear-gradient(90deg,#ff2d6f,#e84bd0,#ff2d6f);box-shadow:0 10px 24px -8px rgba(255,45,111,.55)}
.p4-cta-boton{background-image:linear-gradient(90deg,#ff3d7f,#ff7aa8,#ff3d7f);box-shadow:0 10px 24px -8px rgba(255,61,127,.5)}
.p4-cta:hover{transform:translateY(-2px);background-position:right center}

/* ---------- CÓMO FUNCIONA: sin tarjetas ---------- */
.p4-how{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:980px;margin:34px auto 0;padding:56px 24px;border-top:1px solid var(--p4-line)}
.p4-how-col{scroll-margin-top:90px}
.p4-eyebrow{margin:0 0 6px;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#c4a484}
.p4-h2{font-family:'Dancing Script',cursive;font-weight:700;font-size:clamp(32px,3.4vw,42px);line-height:1.1;color:#c0577f;margin:0 0 14px}
.p4-text{font-size:17px;line-height:1.6;font-weight:500;color:#4a3b46;margin:0 0 16px}
.p4-text strong{color:var(--p4-rose);font-weight:800}
.p4-list{list-style:none;margin:0 0 18px;padding:0}
.p4-list li{position:relative;padding:7px 0 7px 26px;font-size:15px;line-height:1.55;font-weight:500;color:#5b4a55}
.p4-list li::before{content:"";position:absolute;left:4px;top:15px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#ff8fb3,#ff2d6f)}
.p4-list li.p4-li-plus{color:#7b3fa0;font-weight:600}
.p4-list li.p4-li-plus::before{background:linear-gradient(135deg,#c084fc,#7c3aed)}
.p4-link{font-weight:800;font-size:15px;color:var(--p4-rose);text-decoration:none}
.p4-link:hover{text-decoration:underline}

/* ---------- QUÉ ES + FAQ: texto limpio, sin cajas ---------- */
.p4-about{max-width:720px;margin:0 auto;padding:56px 24px 8px;text-align:center;border-top:1px solid var(--p4-line)}
.p4-about p{font-size:17px;line-height:1.65;font-weight:500;color:#5b4a55;margin:0 0 12px;text-wrap:balance}
.p4-about strong{color:var(--p4-ink);font-weight:800}
.p4-faq{max-width:720px;margin:0 auto 70px;padding:48px 24px 0}
.p4-faq .p4-h2{text-align:center}
.p4-q{border-bottom:1px solid var(--p4-line)}
.p4-q:first-of-type{border-top:1px solid var(--p4-line)}
.p4-q summary{list-style:none;cursor:pointer;padding:18px 32px 18px 0;position:relative;font-size:16.5px;font-weight:800;color:var(--p4-ink)}
.p4-q summary::-webkit-details-marker{display:none}
.p4-q summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:500;color:var(--p4-rose);transition:transform .2s}
.p4-q[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.p4-q p{margin:0 0 18px;font-size:15.5px;line-height:1.6;color:#5b4a55;font-weight:500}
.p4-contact{text-align:center;margin:26px 0 0;font-size:14.5px;color:var(--p4-soft);font-weight:600}
.p4-contact a{color:var(--p4-rose);font-weight:800;text-decoration:none}

/* ---------- Barra fija móvil (dos botones) ---------- */
.p4-sticky{position:fixed;left:0;right:0;bottom:0;z-index:850;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--p4-line);
  transform:translateY(110%);transition:transform .3s ease}
.p4-sticky.show{transform:none}
.p4-sticky-btn{flex:1;text-align:center;padding:12px 8px;border-radius:999px;color:#fff !important;text-decoration:none;font-family:'Manrope',sans-serif;font-weight:800;font-size:14.5px}
@media (min-width:901px){.p4-sticky{display:none}}

/* ---------- Móvil: los dos iPhone uno al lado del otro ---------- */
@media (max-width:900px){
  .p4-hero{padding:4px 12px 22px;margin-top:-14px}
  .p4-h1{font-size:clamp(21px,6.1vw,26px)}
  .p4-lead{margin-bottom:16px}
  .p4-duo{gap:10px 14px;max-width:420px}
  .p4-name{font-size:clamp(22px,6.4vw,28px);white-space:nowrap}
  .p4-name .emo{display:none}
  .p4-stat{font-size:11px;margin:2px 0 8px}
  .p4 .mockup-container{max-width:152px;margin-bottom:14px}
  .p4 .demo-caption{font-size:11px;min-height:40px;line-height:1.2}
  .p4 .demo-caption svg{width:12px;height:12px}
  .p4-cta{font-size:13.5px;padding:12px 10px;max-width:none}
  .p4-how{grid-template-columns:1fr;gap:44px;margin-top:22px;padding:40px 22px}
  .p4-text{font-size:16px}
  .p4-list li{font-size:14.5px}
  .p4-about{padding:40px 22px 4px}
  .p4-about p{font-size:15.5px}
  .p4-faq{padding:36px 22px 0;margin-bottom:40px}
  .p4-q summary{font-size:15.5px}
  .p4-q p{font-size:14.5px}
}
/* [20-10 v8] Sin marca de agua. Productos justo bajo el menú. H1 solo para lectores de pantalla. */
.p4-hero{position:relative;padding-top:0;margin-top:-22px}
@media (max-width:900px){.p4-hero{margin-top:-14px}}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}