/* Estilos compartidos por las páginas públicas (herramientas gratuitas + landing).
   Mismos tokens que la app para que todo se vea como una sola marca. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --accent:#2563eb;--accent2:#1d4ed8;--accent-light:#eff6ff;
  --green:#10b981;--red:#ef4444;--orange:#f59e0b;
  --text:#0f172a;--text2:#64748b;--text3:#94a3b8;
  --bg:#f8f9ff;--bg2:#eef1fb;--white:#ffffff;--border:#e4e8f5;
  --shadow:0 4px 24px rgba(37,99,235,0.10);
  --shadow-lg:0 12px 48px rgba(37,99,235,0.18);
}
html{scroll-behavior:smooth;}
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;line-height:1.6;}
a{text-decoration:none;color:inherit;}
img,svg{max-width:100%;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 20px;}
.nav-inner{max-width:1140px;margin:0 auto;height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-logo-icon{width:32px;height:32px;border-radius:9px;overflow:hidden;display:flex;flex-shrink:0;}
.nav-logo-icon img{width:100%;height:100%;object-fit:cover;}
.nav-logo-text{font-size:1rem;font-weight:800;letter-spacing:-0.5px;}
.nav-links{display:flex;align-items:center;gap:20px;}
.nav-links a{font-size:0.85rem;font-weight:600;color:var(--text2);}
.nav-links a:hover{color:var(--accent);}
.nav-cta{background:var(--accent);color:#fff!important;padding:9px 18px;border-radius:50px;font-size:0.85rem;font-weight:700;white-space:nowrap;}
@media(max-width:430px){.nav-cta{padding:8px 14px;font-size:0.79rem;}.nav-logo-text{font-size:0.92rem;}.nav-logo-icon{width:30px;height:30px;}}
.nav-cta:hover{background:var(--accent2);}
@media(max-width:820px){.nav-links a:not(.nav-cta){display:none;}}

/* MENÚ MÓVIL
   Sin esto, en el móvil solo queda el botón azul: para saltar de una
   herramienta a otra había que bajar hasta el pie de página. */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:4.5px;
  width:40px;height:40px;padding:0 9px;background:none;border:none;cursor:pointer;flex-shrink:0;}
.nav-burger span{display:block;height:2.5px;border-radius:2px;background:var(--text);
  transition:transform .25s ease,opacity .2s ease;}
.nav-burger.abierto span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.abierto span:nth-child(2){opacity:0;}
.nav-burger.abierto span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-menu{display:none;}
@media(max-width:820px){
  .nav-burger{display:flex;}
  .nav-menu{position:fixed;top:62px;left:0;right:0;z-index:99;background:var(--white);
    border-bottom:1px solid var(--border);box-shadow:0 12px 30px rgba(15,23,42,0.10);
    padding:8px 14px 14px;
    display:block;max-height:0;overflow:hidden;opacity:0;
    transition:max-height .28s ease,opacity .2s ease,padding .28s ease;}
  .nav-menu.abierto{max-height:80vh;opacity:1;overflow-y:auto;}
  .nav-menu:not(.abierto){padding-top:0;padding-bottom:0;}
  .nav-menu a{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:12px;
    font-size:0.95rem;font-weight:700;color:var(--text);}
  .nav-menu a:active{background:var(--bg);}
  .nav-menu a span{font-size:1.15rem;width:24px;text-align:center;flex-shrink:0;}
  .nav-menu a small{display:block;font-size:0.74rem;font-weight:500;color:var(--text3);margin-top:1px;}
  .nav-menu .sep{height:1px;background:var(--border);margin:6px 12px;}
  .nav-menu .destacado{background:var(--accent-light);color:var(--accent);}
}

/* PRO */
.pro{display:block;}
.pro-flota{animation:flota 4.5s ease-in-out infinite;}
@keyframes flota{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@media(prefers-reduced-motion:reduce){.pro-flota{animation:none;}}
.pro-halo{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:6%;}
.pro-halo::before{content:"";position:absolute;left:-14%;right:-14%;top:6%;bottom:4%;border-radius:50%;background:radial-gradient(circle at 45% 40%,#dbe6ff 0%,#eef2ff 55%,rgba(238,242,255,0) 72%);}
.pro-halo .pro{position:relative;z-index:1;}

/* CABECERA DE HERRAMIENTA */
.tool-head{padding:84px 20px 22px;background:linear-gradient(180deg,#eef2ff 0%,#f6f8ff 70%,var(--white) 100%);text-align:center;}
.tool-head .pro{width:auto;height:104px;margin:0 auto;}
.tool-head .pro-halo{display:flex;width:max-content;margin:0 auto 4px;padding:3%;}
.migas{font-size:0.76rem;color:var(--text3);font-weight:600;margin-bottom:8px;}
.migas a:hover{color:var(--accent);}
.tool-head h1{font-size:clamp(1.7rem,4.2vw,2.5rem);font-weight:900;letter-spacing:-1.2px;line-height:1.12;margin-bottom:10px;max-width:760px;margin-left:auto;margin-right:auto;}
.tool-head .lead{font-size:clamp(0.96rem,1.7vw,1.08rem);color:var(--text2);max-width:600px;margin:0 auto;line-height:1.7;}
.libre{display:inline-flex;align-items:center;gap:7px;background:var(--white);color:var(--green);font-size:0.75rem;font-weight:800;padding:6px 14px;border-radius:50px;border:1px solid rgba(16,185,129,0.28);margin-bottom:12px;}

/* LAYOUT */
.wrap{max-width:1000px;margin:0 auto;padding:0 20px;}
.wrap-txt{max-width:760px;margin:0 auto;padding:0 20px;}
section{padding:44px 0;}
h2{font-size:clamp(1.35rem,2.6vw,1.85rem);font-weight:900;letter-spacing:-0.6px;line-height:1.2;margin-bottom:14px;}
h3{font-size:1.05rem;font-weight:800;margin:26px 0 8px;}
.wrap-txt p{color:var(--text2);margin-bottom:14px;}
.wrap-txt ul{color:var(--text2);margin:0 0 16px 20px;}
.wrap-txt li{margin-bottom:7px;}
.wrap-txt strong{color:var(--text);}
.bg-suave{background:var(--bg);}

/* TARJETA DE HERRAMIENTA */
.tool-card{background:var(--white);border:1.5px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lg);padding:26px;max-width:760px;margin:0 auto;}
@media(max-width:560px){.tool-card{padding:20px 16px;border-radius:18px;}}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:560px){.campos{grid-template-columns:1fr;}}
.campo{display:flex;flex-direction:column;gap:6px;}
.campo.ancho{grid-column:1/-1;}
.campo label{font-size:0.79rem;font-weight:800;color:var(--text);}
.campo .pista{font-size:0.73rem;color:var(--text3);font-weight:500;line-height:1.45;}
.inp{position:relative;display:flex;align-items:center;}
.inp input,.inp select{width:100%;padding:13px 15px;border:2px solid var(--border);border-radius:13px;font-family:inherit;font-size:1rem;font-weight:600;color:var(--text);background:var(--white);outline:none;transition:border-color .2s;}
.inp.euro input{padding-right:36px;}
.inp input:focus,.inp select:focus{border-color:var(--accent);}
.inp .suf{position:absolute;right:14px;font-weight:700;color:var(--text3);pointer-events:none;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-weight:800;border-radius:50px;transition:all .2s;}
.btn-primary{background:var(--accent);color:#fff;padding:15px 30px;font-size:1rem;box-shadow:0 6px 20px rgba(37,99,235,0.3);}
.btn-primary:hover{background:var(--accent2);transform:translateY(-2px);}
.btn-outline{background:var(--white);color:var(--text);border:2px solid var(--border);padding:13px 26px;font-size:0.93rem;}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.btn-white{background:#fff;color:var(--accent);padding:14px 30px;font-size:0.95rem;box-shadow:0 6px 20px rgba(0,0,0,0.15);}
.btn-ancho{width:100%;}

/* RESULTADO */
.res{display:none;margin-top:24px;padding-top:24px;border-top:1px solid var(--border);}
.res.on{display:block;animation:aparece .35s ease;}
@keyframes aparece{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.res-top{background:linear-gradient(135deg,var(--accent) 0%,#4338ca 100%);border-radius:18px;padding:22px;text-align:center;color:#fff;margin-bottom:16px;}
.res-top .et{font-size:0.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;opacity:0.8;}
.res-top .big{font-size:clamp(2rem,6vw,2.8rem);font-weight:900;letter-spacing:-1.5px;margin:4px 0;}
.res-top .sub{font-size:0.83rem;opacity:0.85;}
.desglose{border:1.5px solid var(--border);border-radius:16px;overflow:hidden;}
.dl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);font-size:0.88rem;}
.dl:last-child{border-bottom:none;}
.dl .k{color:var(--text2);}
.dl .k small{display:block;font-size:0.71rem;color:var(--text3);}
.dl .v{font-weight:800;white-space:nowrap;}
.dl.total{background:var(--bg);font-weight:800;}
.dl.total .k{color:var(--text);font-weight:800;}
.aviso{display:flex;gap:11px;align-items:flex-start;background:#fffbeb;border:1px solid rgba(245,158,11,0.3);border-radius:13px;padding:13px 15px;margin-top:16px;font-size:0.79rem;color:#92400e;line-height:1.55;}
.aviso b{color:#78350f;}

/* CAJA PRO / CTA */
.pro-caja{display:flex;gap:14px;align-items:flex-start;background:var(--bg);border:1.5px solid var(--border);border-radius:18px;padding:18px;margin-top:20px;}
.pro-caja .pro{width:58px;flex-shrink:0;}
@media(max-width:560px){.pro-caja{flex-direction:column;align-items:center;text-align:center;}}
.pro-caja h4{font-size:1rem;font-weight:800;margin-bottom:6px;}
.pro-caja p{font-size:0.85rem;color:var(--text2);line-height:1.6;margin-bottom:14px;}

/* BARRA FIJA (tras el primer uso) */
.barra-app{position:fixed;left:0;right:0;bottom:0;z-index:200;background:rgba(15,23,42,0.97);backdrop-filter:blur(10px);color:#fff;padding:12px 18px;display:none;align-items:center;gap:14px;justify-content:center;box-shadow:0 -6px 26px rgba(15,23,42,0.28);}
.barra-app.on{display:flex;}
.barra-app .pro{width:40px;flex-shrink:0;}
.barra-app .txt{font-size:0.85rem;line-height:1.4;max-width:460px;}
.barra-app .txt b{font-weight:800;}
.barra-app .btn{padding:11px 22px;font-size:0.85rem;flex-shrink:0;}
.barra-app .cerrar{background:none;border:none;color:rgba(255,255,255,0.5);font-size:1.3rem;cursor:pointer;line-height:1;padding:0 4px;flex-shrink:0;}
@media(max-width:640px){.barra-app{flex-wrap:wrap;padding:11px 14px;gap:10px;}.barra-app .txt{font-size:0.79rem;flex:1;min-width:0;}.barra-app .pro{display:none;}}

/* FAQ */
.faq-item{background:var(--white);border:1.5px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden;}
.faq-q{padding:16px 18px;font-size:0.9rem;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq-q:hover{color:var(--accent);}
.faq-arrow{color:var(--text3);font-size:0.75rem;flex-shrink:0;transition:transform .2s;}
.faq-item.open .faq-arrow{transform:rotate(180deg);}
.faq-a{padding:0 18px;max-height:0;overflow:hidden;transition:all .3s;}
.faq-item.open .faq-a{max-height:600px;padding:0 18px 16px;}
.faq-a p{font-size:0.85rem;color:var(--text2);line-height:1.7;margin-bottom:10px;}
.faq-a p:last-child{margin-bottom:0;}

/* CTA FINAL */
.cta{background:linear-gradient(135deg,var(--accent) 0%,#4338ca 100%);padding:60px 20px;text-align:center;color:#fff;}
.cta .pro{width:auto;height:200px;margin:0 auto 14px;}
.cta h2{color:#fff;margin-bottom:12px;}
.cta p{color:rgba(255,255,255,0.8);max-width:520px;margin:0 auto 26px;}

/* ENLACES ENTRE HERRAMIENTAS */
.otras{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:640px){.otras{grid-template-columns:1fr;}}
.otra{display:block;background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:18px;transition:all .2s;}
.otra:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px);}
.otra .t{font-size:0.95rem;font-weight:800;margin-bottom:5px;}
.otra .d{font-size:0.82rem;color:var(--text2);line-height:1.55;}

/* FOOTER */
footer{background:var(--text);color:rgba(255,255,255,0.5);padding:40px 20px 26px;}
.footer-inner{max-width:1140px;margin:0 auto;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:30px;}
@media(max-width:760px){.footer-top{grid-template-columns:1fr 1fr;gap:24px;}}
@media(max-width:460px){.footer-top{grid-template-columns:1fr;}}
.footer-logo{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.footer-logo-icon{width:28px;height:28px;border-radius:7px;overflow:hidden;display:flex;flex-shrink:0;}
.footer-logo-icon img{width:100%;height:100%;object-fit:cover;}
.footer-logo-text{font-size:0.94rem;font-weight:800;color:#fff;}
.footer-brand p{font-size:0.8rem;line-height:1.65;max-width:280px;}
.footer-col-title{font-size:0.69rem;font-weight:800;color:rgba(255,255,255,0.8);text-transform:uppercase;letter-spacing:1.4px;margin-bottom:12px;}
.footer-col a{display:block;font-size:0.81rem;margin-bottom:8px;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:0.75rem;}
body.con-barra footer{padding-bottom:90px;}


/* En el móvil la pantalla es oro: Pro se hace pequeño para que el titular
   y el formulario entren sin tener que bajar. */
@media(max-width:560px){
  .tool-head{padding:76px 18px 18px;}
  .tool-head .pro{height:74px;}
  .tool-head .lead{font-size:0.9rem;line-height:1.6;}
  .migas{margin-bottom:6px;}
}