/* AGENDARTE — Landing comercial v25 · 2026-10-16
   Estilo propio de la marca. No se modifican flujos de Auth, reservas o pagos. */
:root {
  --blue:#075dc8; --blue2:#0878ed; --navy:#09234f; --navy2:#0d3674;
  --sky:#e8f4ff; --orange:#ff962b; --cream:#fffaf4;
  --white:#ffffff; --ink:#102447; --muted:#546780; --line:#dae6f3;
  --shadow:0 12px 38px rgba(9,45,94,.09); --radius:21px;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:90px}
body {margin:0;background:var(--white);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input {font:inherit}button {cursor:pointer}
a {color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible {outline:3px solid #ffb759;outline-offset:3px}
.container {width:min(1210px,calc(100% - 52px));margin-inline:auto}
.skip-link {position:fixed;top:-200px;left:12px;background:white;color:#09234f;padding:10px;z-index:1000}
.skip-link:focus {top:12px}
.caps {font:800 11px 'DM Sans',Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em}
.serif {font-family:'Outfit',Arial,sans-serif;font-style:normal;font-weight:800;letter-spacing:-.055em}
.top-note {height:26px;display:flex;align-items:center;justify-content:center;gap:4px;background:#08275c;color:#fff;text-align:center;font-size:10px;font-weight:700;letter-spacing:.12em}
.top-note strong {color:#ffd094}
.logo {font-family:'Outfit',Arial,sans-serif;font-size:29px;font-weight:800;letter-spacing:-.07em;color:var(--blue);display:inline-flex;align-items:baseline;line-height:1}
.brand-dot {width:13px;height:13px;margin-left:6px;border:4px solid var(--orange);border-radius:50%;transform:translateY(-11px)}
.site-header {position:sticky;top:0;z-index:70;background:rgba(255,255,255,.98);border-bottom:1px solid #e8edf4;backdrop-filter:blur(18px)}
.nav {min-height:67px;display:flex;align-items:center;gap:24px}
.nav-links {display:flex;align-items:center;gap:21px;margin-left:auto;color:#243b57;font-size:12px;font-weight:800;white-space:nowrap}
.nav-links a {transition:color .2s}.nav-links a:hover {color:var(--blue)}
.mobile-menu {display:none}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 19px;min-height:44px;border-radius:999px;border:1px solid transparent;font:800 12px 'DM Sans',Arial,sans-serif;letter-spacing:.01em;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover {transform:translateY(-2px);box-shadow:0 11px 20px rgba(9,47,111,.18)}
.btn-blue {background:var(--blue);color:white}.btn-blue:hover {background:#034fae}
.btn-orange {background:var(--orange);color:#092446}.btn-orange:hover {background:#ffad57}
.btn-white {background:white;color:var(--blue)}.btn-white:hover {background:#eef7ff}
.btn-outline {background:white;border:1.5px solid #c2d7ee;color:var(--blue)}.btn-outline:hover{background:#f0f8ff}
.header-action {white-space:nowrap;padding-inline:23px}

/* Hero principal: jerarquía de alto impacto y pantalla del producto que ya pertenece a Agendarte */
.hero {position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(118deg,#083577 0%,#0759c2 49%,#187be5 100%);color:white}
.hero::before {content:"";position:absolute;width:670px;height:670px;right:-245px;top:-380px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.hero::after {content:"";position:absolute;width:400px;height:400px;left:35%;bottom:-310px;border-radius:50%;background:rgba(76,173,255,.17);pointer-events:none}
.hero .container {position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:center;gap:34px;padding-block:54px 72px}
.hero-text {min-width:0}.eyebrow {display:inline-flex;align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:50px;padding:7px 13px;color:#fefefe;font-size:10px;font-weight:900;letter-spacing:.125em;text-transform:uppercase}
.hero h1 {font:800 clamp(39px,4.35vw,65px)/1.08 'Outfit',Arial,sans-serif;letter-spacing:-.055em;margin:22px 0 17px;max-width:700px;text-wrap:balance}
.hero h1 .serif {color:#ffbe73}.hero-text>p:not(.trustline) {font-size:clamp(14px,1.25vw,17px);color:#eaf3ff;font-weight:500;line-height:1.62;max-width:525px;margin:0}
.hero-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:27px}
.hero-actions .btn {font-size:13px;padding:14px 21px;min-height:48px}
.hero .btn-blue {background:var(--orange);color:#082d67}.hero .btn-blue:hover {background:#ffaf58}
.hero .btn-white {background:transparent;color:white;border:1.5px solid rgba(255,255,255,.54)}.hero .btn-white:hover {background:rgba(255,255,255,.12)}
.trustline {font-size:11px!important;color:#d9e9ff!important;font-weight:700;display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:15px 0 0!important;letter-spacing:.005em}
.trustline b {color:#ffa844}
.hero-showcase {position:relative;min-width:0;border-radius:25px;background:#f1f8ff;padding:9px;box-shadow:0 35px 65px rgba(1,29,80,.24);transform:rotate(-1.2deg);border:1px solid rgba(255,255,255,.58)}
.hero-showcase>img {display:block;width:100%;height:auto;max-height:430px;object-fit:cover;object-position:center;border-radius:17px}
.email-product-overlay {position:absolute;right:6%;bottom:8%;display:flex;align-items:center;gap:9px;padding:11px 13px;background:#fff;color:var(--navy);border-radius:12px;box-shadow:0 8px 25px rgba(6,54,103,.22);max-width:220px;transform:rotate(1.2deg)}
.email-product-icon {background:#0da978;color:white;width:37px;height:37px;border-radius:10px;display:grid;place-items:center;font-size:18px;font-weight:800;flex:none}
.email-product-overlay strong {display:block;font-size:12px}.email-product-overlay small {display:block;font-size:10px;line-height:1.35;color:#5f7288}

/* Cifras ciertas sobre el PRODUCTO, no métricas ficticias de clientes */
.proof {position:relative;z-index:2;margin-top:-29px}
.proof-card {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:940px;margin:auto;padding:18px;background:white;border:1px solid #e8ebf0;border-radius:19px;box-shadow:0 17px 36px rgba(3,39,83,.13)}
.proof-cell {text-align:center;padding:4px 15px}.proof-cell+.proof-cell{border-left:1px solid #dfe9f3}
.proof-number {font:800 27px/1.2 'Outfit',Arial,sans-serif;letter-spacing:-.03em;color:var(--blue)}
.proof-label {font-size:11px;font-weight:800;color:#455672;margin-top:2px}
.proof-note {font-size:11px;text-align:center;color:#63738c;margin:10px 0 0}

/* Secciones: más densas, más directas */
.block {padding:67px 0}
.block .section-intro {max-width:780px;text-align:center;margin:0 auto 29px}
.kicker {display:inline-block;margin-bottom:9px;font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.section-intro h2 {font:800 clamp(31px,3.3vw,45px)/1.14 'Outfit',Arial,sans-serif;letter-spacing:-.045em;color:var(--navy);margin:0 0 10px;text-wrap:balance}
.section-intro .serif {font-size:1em;color:var(--blue)}
.section-intro>p {color:var(--muted);font-size:14px;line-height:1.58;max-width:615px;margin:0 auto}
.retention-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.ret-card {padding:21px 19px 19px;background:white;border:1px solid #dbe7f1;border-radius:17px;min-height:179px;box-shadow:0 5px 15px rgba(5,42,92,.025)}
.ret-icon {width:42px;height:42px;display:grid;place-items:center;background:#e8f4ff;color:var(--blue);border-radius:12px;font:800 22px 'Outfit',sans-serif;margin-bottom:13px}
.ret-icon svg {width:23px;height:23px;stroke:var(--blue)}
.ret-card h3 {font:700 16px/1.3 'Outfit',sans-serif;margin:0 0 7px;color:var(--navy)}
.ret-card p {font-size:12px;color:#596b83;line-height:1.5;margin:0}

/* Fotos documentales de servicios, reales, con imágenes obtenidas de Unsplash */
.block.soft {background:#edf5fd}
.rubros {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.rubro {background:white;overflow:hidden;border-radius:17px;border:1px solid #dce6f0;box-shadow:0 5px 18px rgba(11,56,104,.07);transition:transform .2s ease,box-shadow .2s ease}
.rubro:hover {transform:translateY(-4px);box-shadow:0 16px 31px rgba(10,59,115,.11)}
.rubro-visual {height:153px;position:relative;overflow:hidden;background:linear-gradient(125deg,#badff4,#cce9ff)!important}
.rubro-visual img {width:100%;height:100%;display:block;object-fit:cover;object-position:center;transition:transform .35s ease}
.rubro:hover .rubro-visual img{transform:scale(1.055)}
.corner-tag {position:absolute;left:12px;top:12px;z-index:1;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.92);color:#082e59;font-size:9px;font-weight:900;letter-spacing:.1em;box-shadow:0 2px 12px rgba(0,0,0,.09)}
.rubro-body {padding:15px 17px 18px}.rubro h3 {font:700 18px/1.2 'Outfit',sans-serif;letter-spacing:-.02em;color:var(--navy);margin:0 0 7px}
.rubro p {margin:0 0 12px;color:#566a82;font-size:12px;line-height:1.48;min-height:36px}
.text-link {display:inline-flex;align-items:center;color:var(--blue);font-weight:900;font-size:11px}
.text-link:hover {text-decoration:underline}

/* Punto de inflexión: contraste fuerte, sin simular funcionalidades activas */
.block.retention {position:relative;overflow:hidden;background:linear-gradient(115deg,#082553 5%,#064ea9 57%,#0874d8 100%);color:white}
.block.retention::after{content:"";position:absolute;pointer-events:none;top:-200px;right:-120px;width:600px;height:600px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 75px rgba(255,255,255,.035)}
.retention .container{position:relative;z-index:1}
.retention .kicker {color:#ffc07b}.retention .section-intro h2{color:white}.retention .section-intro .serif{color:#ffbd69}
.retention .section-intro p{color:#d2e4ff}
.retention .ret-card {background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.23);color:white;box-shadow:none;min-height:171px}
.retention .ret-icon {background:rgba(255,255,255,.17);color:#ffbd6d}
.retention .ret-card h3 {color:white}.retention .ret-card p{color:#dbe9fc}

/* Cómo funciona: paso simple y compacto */
.steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.step {padding:22px 23px 20px;border:1px solid #dbe5ef;border-radius:19px;background:#fff;position:relative;box-shadow:0 7px 23px rgba(11,44,85,.04)}
.step-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px}
.step-no {font:800 36px/1 'Outfit',sans-serif;color:var(--blue);letter-spacing:-.045em}
.step .caps{color:#637998;font-size:10px}
.step h3{font:700 19px/1.2 'Outfit',sans-serif;color:var(--navy);margin:0 0 7px}
.step p{font-size:12px;color:#586c86;margin:0;min-height:37px}
.step-demo{display:none}

/* Bloque azul de precios, protagonismo Pro y datos reales */
.block.pricing{background:linear-gradient(127deg,#075abf 0%,#064caa 48%,#083573 100%);color:white}
.pricing .kicker{color:#ffd5a8}.pricing .section-intro h2{color:white}.pricing .section-intro .serif{color:#ffb76f}.pricing .section-intro p{color:#e3ecff}
.tiers-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:17px}
.tier-card{display:flex;flex-direction:column;background:white;color:var(--navy);padding:24px 23px 21px;border-radius:20px;border:1px solid rgba(255,255,255,.65);box-shadow:0 19px 36px rgba(4,32,89,.12)}
.tier-card.tier-featured{background:#e7f5ff;border:2px solid #ff9d36;transform:translateY(-8px);box-shadow:0 25px 43px rgba(2,28,78,.2)}
.tier-badge{display:inline-flex;align-self:flex-start;background:#e8f2ff;padding:6px 11px;border-radius:40px;font-size:9px;font-weight:900;letter-spacing:.075em;color:#23588e}
.tier-badge-featured{background:#ff9d36;color:#092b54}
.tier-card h3{font:800 29px/1.1 'Outfit',sans-serif;letter-spacing:-.04em;margin:13px 0 2px}
.tier-tag {margin:0;color:#536880;font-size:12px;min-height:20px}
.tier-value {font-size:12px;font-weight:900;color:var(--blue);margin:1px 0 6px}
.tier-price {font:800 clamp(33px,3.2vw,45px)/1 'Outfit',sans-serif;letter-spacing:-.045em;color:#092d5d;margin:21px 0 0}
.tier-price span {font:700 11px 'DM Sans',sans-serif;display:block;letter-spacing:0;color:#48647e;margin:6px 0}
.tier-trial {align-self:flex-start;margin:9px 0 13px;border-radius:9px;background:#dcecff;color:#0a58a9;padding:6px 10px;font-size:11px;font-weight:800}
.tier-audience{font-size:12px;color:#597089;line-height:1.4;min-height:35px;margin:2px 0 11px}
.tier-features{list-style:none;padding:0;margin:2px 0 15px;flex:1;border-top:1px solid #d8e6f3}
.tier-features li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid #e1e9f0;font-size:11px;line-height:1.42;color:#324f71}
.tier-features li::before{content:"✓";font-weight:900;color:var(--blue);display:inline-flex;align-items:center;justify-content:center;flex:0 0 14px;width:14px;min-width:14px;line-height:1;margin-top:1px}
.tier-card>.btn{width:100%;margin-top:auto;min-height:45px}
.tier-small{font-size:10px;color:#6d7c8e;line-height:1.4;text-align:center;margin:10px 0 0}
.plans-disclosure{font-size:11px;text-align:center;color:#35506f;margin:32px auto 0;max-width:930px;background:#eef5fb;border:1px solid rgba(255,255,255,.45);border-radius:22px;padding:22px 26px;box-shadow:0 14px 28px rgba(4,32,89,.10)}
.plans-disclosure strong{display:block;color:#0c2f61;font-size:13px;margin-bottom:6px}.plans-disclosure p{margin:6px auto 0;max-width:760px;color:#53708d}

/* Preguntas en dos columnas, estilo editorial claro */
#preguntas .container{display:grid;grid-template-columns:.7fr 1.3fr;align-items:start;gap:55px;max-width:1120px}
#preguntas .section-intro{text-align:left;margin:0}
#preguntas .section-intro>p{margin-left:0}
.faq{border:1px solid #dbe6f1;border-radius:19px;background:white;overflow:hidden;box-shadow:0 8px 25px rgba(1,43,89,.04)}
.faq details+details{border-top:1px solid #e0e9f3}
.faq summary{position:relative;display:block;padding:17px 49px 17px 18px;list-style:none;font-size:13px;line-height:1.4;font-weight:800;cursor:pointer;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font:800 21px 'Outfit',sans-serif;color:var(--blue)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 18px 17px;color:#597087;font-size:12px;line-height:1.65;margin:0}

.end-cta{background:linear-gradient(112deg,#0b3171,#092454);padding:58px 0;text-align:center;color:white}
.end-cta .container{max-width:790px}.end-cta h2{font:800 clamp(31px,3.7vw,49px)/1.13 'Outfit',sans-serif;letter-spacing:-.045em;margin:0 0 10px}.end-cta .serif{color:#ffba72}
.end-cta p{font-size:14px;color:#d9e7ff;max-width:550px;margin:0 auto 19px}
.footer{padding:35px 0 22px;background:#071b3b;color:#dbe8f9}
.footer .logo{color:white}.footer-top{display:grid;grid-template-columns:minmax(210px,.85fr) 1.15fr;gap:40px;align-items:start}
.footer-top>div:first-child p{color:#aabfd8;font-size:12px;max-width:325px;line-height:1.65}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:flex-end;padding-top:7px}
.footer-links a{font-size:11px;font-weight:700;color:#e0edff}.footer-links a:hover{color:#ffba72}
.footer-last{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:10px;color:#9eb8d5;margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.photo-credits {color:#aab9d4;font-size:10px;text-align:left;margin-top:16px}.photo-credits summary {cursor:pointer}.photo-credits a {color:#d0e4ff;text-decoration:underline}

@media(max-width:1020px){
  .container{width:min(100% - 36px,1100px)}.nav{gap:13px}.nav-links{gap:13px;font-size:11px}.header-action{padding-inline:15px}
  .hero .container{gap:22px}.hero h1{font-size:clamp(37px,4.3vw,55px)}
  .retention-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tiers-grid{gap:12px}.tier-card{padding:19px 17px}
  .rubros{gap:12px}
}
@media(max-width:760px){
  html{scroll-padding-top:70px}.container{width:calc(100% - 32px)}.top-note{font-size:9px}
  .nav{min-height:60px;gap:10px}.logo{font-size:25px}.brand-dot{width:12px;height:12px;transform:translateY(-10px)}
  .mobile-menu{display:grid;place-items:center;margin-left:auto;background:#edf5fe;color:var(--blue);border:1px solid #d2e5f6;border-radius:10px;width:43px;height:42px;font-size:22px}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:white;border-top:1px solid #ddeaf6;padding:16px 20px 22px;box-shadow:0 15px 27px rgba(0,22,76,.11);gap:4px;flex-direction:column;align-items:stretch;margin:0;font-size:13px}
  .nav-links.open{display:flex}.nav-links a{padding:9px 6px}.header-action{font-size:10px;padding:11px 13px;min-height:40px}
  .hero .container{grid-template-columns:1fr;padding-block:42px 47px;gap:31px}
  .hero h1{font-size:clamp(40px,8.8vw,56px);max-width:570px;margin:16px 0}.hero-text>p:not(.trustline){font-size:14px}
  .hero-showcase{max-width:570px;width:100%;margin:auto}.hero-showcase>img{max-height:430px}
  .proof{margin-top:-22px}.proof-card{padding:13px 7px;border-radius:15px}.proof-number{font-size:21px}.proof-label{font-size:9px}.proof-cell{padding-inline:7px}
  .block{padding:52px 0}.section-intro h2{font-size:clamp(29px,6.2vw,39px)}
  .rubros{grid-template-columns:repeat(2,minmax(0,1fr))}.rubro-visual{height:155px}
  .steps{gap:12px}.step{padding:15px}.step-no{font-size:29px}.step h3{font-size:16px}
  .tiers-grid{grid-template-columns:1fr;max-width:510px;margin:auto;gap:14px}.tier-card.tier-featured{transform:none}.tier-price{font-size:41px}.tier-audience{min-height:0}
  #preguntas .container{grid-template-columns:1fr;gap:18px}
  #preguntas .section-intro{text-align:center}#preguntas .section-intro>p{margin-inline:auto}
  .footer-top{grid-template-columns:1fr;gap:8px}.footer-links{justify-content:flex-start;padding-top:0}
}
@media(max-width:520px){
  .hero h1{font-size:40px}.hero-actions{gap:9px}.hero-actions .btn{min-width:0;font-size:11px;padding:12px 14px;min-height:43px}.trustline{font-size:9px!important}
  .hero-showcase{border-radius:16px}.hero-showcase>img{border-radius:11px}.email-product-overlay{right:3%;bottom:5%;padding:7px 8px;gap:6px;max-width:155px}.email-product-overlay strong{font-size:10px}.email-product-overlay small{font-size:9px}.email-product-icon{width:27px;height:27px;font-size:14px;border-radius:7px}
  .rubros{gap:10px}.rubro-visual{height:130px}.rubro-body{padding:12px 12px 15px}.rubro h3{font-size:15px}.rubro p{font-size:11px;min-height:50px}.corner-tag{font-size:8px;top:9px;left:9px}
  .retention-grid{grid-template-columns:1fr;gap:10px}.ret-card{min-height:0;padding:17px}
  .steps{grid-template-columns:1fr}.step{min-height:0;padding:15px 18px}.step-head{margin-bottom:9px}.step p{min-height:0}
  .hero .container{padding-block:33px 44px}.block{padding:45px 0}.section-intro>p{font-size:12px}
  .end-cta{padding:45px 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
/* Correcciones visuales del mockup heredado: ocultamos restos de texto
   de una captura antigua sin cambiar su contenido ni los demás recursos. */
.hero-showcase::before{content:"";position:absolute;z-index:2;pointer-events:none;left:9px;top:9%;width:10.7%;height:22%;background:linear-gradient(113deg,#e3f3fd 0%,#e4f3fc 100%);border-radius:5px}
.hero-showcase::after{content:"";position:absolute;z-index:2;pointer-events:none;right:3%;bottom:7%;width:34%;height:15%;background:#f7fbfd;border-radius:12px}
.email-product-overlay{z-index:3}
/* Si un proveedor externo de fotografía está inaccesible, conservar
   las tarjetas legibles y evitar texto ALT desordenado superpuesto. */
.rubro-visual img{color:transparent;font-size:0}
