/* frasly-moderna.css (3-oct-2026): cabecera de frasly.html con la misma estética que la portada. Solo CSS, no toca el HTML ni el JavaScript. */
header.hero{position:relative;overflow:hidden;padding:2.6rem 0 3.6rem;background:var(--bg)}
header.hero::before{content:"";position:absolute;width:60%;aspect-ratio:1;left:-18%;top:-10%;background:radial-gradient(closest-side,rgba(59,130,246,.18),transparent);pointer-events:none}
header.hero::after{content:"";position:absolute;width:50%;aspect-ratio:1;right:-10%;bottom:0;background:radial-gradient(closest-side,rgba(242,169,59,.26),transparent);pointer-events:none}
html[data-tema="oscuro"] header.hero::before{background:radial-gradient(closest-side,rgba(59,130,246,.34),transparent)}
header.hero .hero-grid{position:relative;z-index:2;max-width:1180px;align-items:center}
header.hero h1{font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.08;font-size:clamp(2rem,4.2vw,3.2rem)!important}
header.hero h1 .baja{background:linear-gradient(90deg,#B9770A,#C2410C);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-tema="oscuro"] header.hero h1 .baja{background:linear-gradient(90deg,#F2A93B,#ffd388);-webkit-background-clip:text;background-clip:text}
header.hero .marca-logo{transform:scale(.8);transform-origin:left top;margin-bottom:-.6rem}
header.hero .soy-yo{background:var(--glass,rgba(255,255,255,.75));border:1px solid var(--line);box-shadow:none;border-radius:999px;padding:.5rem 1.1rem .5rem .5rem}
header.hero .soy-yo img{border-radius:50%;object-fit:cover}
header.hero .hero-llave{background:none!important;border:0!important;padding:0!important;box-shadow:none!important;font-family:Inter,system-ui,sans-serif!important;font-size:1.15rem!important;font-weight:400;line-height:1.5;color:var(--ink2);max-width:36ch}
header.hero .hero-llave strong{color:var(--ink);font-weight:700}
header.hero .hero-botones{gap:.8rem;margin-top:1.4rem}
header.hero .btn-es{background:#F2A93B;color:#2E2947;border:0;border-radius:14px;font-weight:800;box-shadow:0 5px 0 #b97a14,0 12px 24px rgba(194,120,10,.25)}
header.hero .btn-es:hover{filter:brightness(1.04)}
header.hero .btn-ghost{border-radius:14px;border:1px solid var(--line);background:transparent;font-weight:700}
header.hero .hero-garantia-linea{border-radius:999px;background:var(--glass,rgba(255,255,255,.75))}
header.hero .confianza{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:18px;background:var(--glass,rgba(255,255,255,.75));padding:.9rem 0;max-width:520px}
header.hero .confianza>div{text-align:center;border-right:1px solid var(--line);padding:0 .5rem}
header.hero .confianza>div:last-child{border:0}
header.hero .confianza b{display:block;font-size:1.35rem;letter-spacing:-.02em}
header.hero .hay-persona{border:1px solid var(--line)!important;border-left:1px solid var(--line)!important;border-radius:18px;background:var(--glass,rgba(255,255,255,.75));padding:1rem 1.2rem;box-shadow:none}
header.hero .hay-persona .hp-titular{font-family:Inter,system-ui,sans-serif!important;font-weight:800;color:var(--ink)!important;font-size:1.02rem}
/* tarjeta de prueba */
header.hero .demo{border-radius:26px;border:1px solid var(--line);background:var(--card,#fff);box-shadow:0 30px 60px rgba(20,27,46,.16);padding:2.1rem 1.5rem 1.4rem}
html[data-tema="oscuro"] header.hero .demo{box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 50px rgba(59,130,246,.18)}
header.hero .demo-badge-toca{background:#F2A93B!important;color:#2E2947!important;border-radius:999px;font-weight:800;box-shadow:0 10px 24px rgba(0,0,0,.25)}
header.hero .demo-tab{border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font-weight:700}
header.hero .demo-tab.on{background:#F2A93B!important;color:#2E2947!important;border-color:transparent}
header.hero .demo .btn-en{background:#F2A93B;color:#2E2947;border-radius:12px;box-shadow:0 4px 0 #b97a14}
header.hero .demo .btn-ghost{border-radius:12px}
header.hero .demo .frase{font-family:Fraunces,Georgia,serif}
@media (max-width:860px){header.hero .hero-grid{gap:2.4rem}header.hero .hero-llave{max-width:none}}
@media (max-width:560px){header.hero{padding-top:1.4rem}header.hero .confianza{max-width:none}}
header.hero .demo>p.honesto:first-of-type{margin-top:1.5rem!important}