/* ═══════════════════════════════════════════════════════════
   CORDEL CLÍNICA DENTAL — Landing
   Paleta extraída del logotipo (turquesa #1FA9BE + blanco)
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Marca */
  --brand:        #1FA9BE;
  --brand-500:    #34B7CD;
  --brand-300:    #7BE0EE;
  --brand-100:    #D6F5FA;
  --brand-700:    #0E7A8C;
  --brand-800:    #0B6B7D;
  --brand-900:    #063A45;
  --accent:       #FF7A5C;   /* coral, sólo para acentos y urgencias */
  --accent-soft:  #FFE7E0;
  --gold:         #FFC24D;
  --wa:           #22C55E;
  --wa-dark:      #16A34A;

  /* Neutros */
  --ink:          #08262C;
  --ink-2:        #3B5A61;
  --ink-3:        #6F8B92;
  --line:         #E2EEF1;
  --bg:           #FFFFFF;
  --bg-soft:      #F3FAFC;

  /* Sistema */
  --radius:       18px;
  --radius-lg:    28px;
  --radius-xl:    40px;
  --shadow-sm:    0 2px 8px rgba(8,38,44,.06);
  --shadow:       0 14px 40px -12px rgba(8,38,44,.16);
  --shadow-lg:    0 40px 80px -30px rgba(11,107,125,.38);
  --ease:         cubic-bezier(.22,1,.36,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
  --maxw:         1200px;

  --font-d: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-b: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
/* Compensa la barra fija al navegar con enlaces ancla */
section[id]{ scroll-margin-top:5.5rem; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-b); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
h1,h2,h3,h4,h5{ font-family:var(--font-d); line-height:1.08; letter-spacing:-.025em; margin:0; font-weight:700; }
h2{ font-size:clamp(2rem,4.2vw,3.4rem); }
h3{ font-size:1.28rem; letter-spacing:-.015em; }
p{ margin:0 0 1em; }
svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
::selection{ background:var(--brand-300); color:var(--brand-900); }
:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:6px; }

.wrap{ width:min(100% - 3rem, var(--maxw)); margin-inline:auto; }
.grad{
  background:linear-gradient(100deg,var(--brand-700),var(--brand) 45%,var(--brand-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-light{
  background:linear-gradient(100deg,var(--brand-300),#fff 60%,var(--brand-300));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── Progreso de scroll ─────────────────────────────── */
.scroll-progress{
  position:fixed; inset:0 auto auto 0; height:3px; width:0;
  background:linear-gradient(90deg,var(--brand-700),var(--brand-500),var(--brand-300));
  z-index:1000; transition:width .1s linear;
}

/* ── Preloader ──────────────────────────────────────── */
/* Solo existe si hay JS; de lo contrario nadie podría quitarlo. */
.preloader{ display:none; }
.js .preloader{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--brand-900),var(--brand-800) 55%,var(--brand-700));
  transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__mark{ text-align:center; color:#fff; }
.preloader__mark svg{ width:84px; height:100px; margin-inline:auto; }
.preloader__mark span{
  display:block; margin-top:14px; font-family:var(--font-d); font-weight:800;
  letter-spacing:.42em; font-size:.82rem; opacity:.85; padding-left:.42em;
}
.tooth-draw{
  fill:none; stroke:#fff; stroke-width:3; stroke-dasharray:420; stroke-dashoffset:420;
  animation:draw 1.5s var(--ease) forwards, glowPulse 2s 1.2s ease-in-out infinite;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes glowPulse{ 50%{ filter:drop-shadow(0 0 12px rgba(123,224,238,.9)); } }

/* ── Botones ────────────────────────────────────────── */
.btn{
  --bg-b:var(--brand); --fg-b:#fff;
  position:relative; display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.5rem; border:0; border-radius:100px; cursor:pointer;
  background:var(--bg-b); color:var(--fg-b);
  font-family:var(--font-d); font-weight:600; font-size:.98rem; letter-spacing:-.01em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  overflow:hidden; white-space:nowrap;
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.38),transparent 80%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn:hover::after{ transform:translateX(120%); }
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px) scale(.99); }

.btn--primary{ background:linear-gradient(120deg,var(--brand-700),var(--brand) 60%,var(--brand-500)); box-shadow:0 12px 28px -12px rgba(31,169,190,.85); }
.btn--primary:hover{ box-shadow:0 20px 40px -14px rgba(31,169,190,.9); }
.btn--wa{ background:linear-gradient(120deg,var(--wa-dark),var(--wa)); box-shadow:0 12px 28px -12px rgba(34,197,94,.75); }
.btn--wa:hover{ box-shadow:0 20px 40px -14px rgba(34,197,94,.85); }
.btn--ghost{ background:transparent; color:var(--brand-800); box-shadow:inset 0 0 0 2px var(--line); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 2px var(--brand-300); background:var(--brand-100); }
.btn--light{ background:#fff; color:var(--brand-800); }
.btn--lg{ padding:1.05rem 1.9rem; font-size:1.04rem; }
.btn--sm{ padding:.6rem 1.1rem; font-size:.88rem; }
.btn--block{ width:100%; justify-content:center; }
.ico-wa{ fill:currentColor; stroke:none; }

.pill{
  display:inline-flex; align-items:center; gap:.55rem; padding:.42rem 1rem;
  border-radius:100px; background:rgba(255,255,255,.14); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.26); color:#EAFBFE;
  font-size:.85rem; font-weight:600; letter-spacing:.01em;
}
.pill .dot{
  width:8px; height:8px; border-radius:50%; background:#4ADE80; flex:none;
  box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:ping 2s infinite;
}
@keyframes ping{ 70%{ box-shadow:0 0 0 9px rgba(74,222,128,0); } 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); } }

.eyebrow{
  display:inline-block; margin-bottom:.85rem; padding:.32rem .9rem; border-radius:100px;
  background:var(--brand-100); color:var(--brand-700);
  font-family:var(--font-d); font-weight:700; font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.section--dark .eyebrow{ background:rgba(123,224,238,.16); color:var(--brand-300); }

/* ── Navegación ─────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900; padding:1.1rem 0;
  transition:padding .4s var(--ease), background .4s, box-shadow .4s;
}
.nav__inner{
  width:min(100% - 2.5rem, 1320px); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav.is-stuck{ padding:.5rem 0; background:rgba(255,255,255,.95); backdrop-filter:blur(16px) saturate(1.4); box-shadow:0 6px 30px -18px rgba(8,38,44,.4); }
/* z-index: el cajón del menú es position:fixed y taparía logo y hamburguesa */
.brand{ display:flex; align-items:center; gap:.7rem; position:relative; z-index:2; }
.brand img{ width:46px; height:46px; border-radius:14px; box-shadow:0 8px 20px -10px rgba(11,107,125,.6); }
/* nowrap: sin esto "CLÍNICA DENTAL" se partía en dos líneas y crecía la barra */
.brand__text strong{ display:block; font-family:var(--font-d); font-weight:800; font-size:1.06rem; letter-spacing:.16em; color:#fff; line-height:1; white-space:nowrap; }
.brand__text small{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.7); white-space:nowrap; }
.nav.is-stuck .brand__text strong{ color:var(--brand-900); }
.nav.is-stuck .brand__text small{ color:var(--ink-3); }

.nav__links{ display:flex; align-items:center; gap:.3rem; margin-left:auto; }
.nav__links > a{
  position:relative; padding:.5rem .85rem; border-radius:100px; white-space:nowrap;
  font-size:.94rem; font-weight:600; color:rgba(255,255,255,.88); transition:color .25s, background .25s;
}
.nav__links > a::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.28rem; height:2px;
  background:var(--brand-300); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links > a:hover::after{ transform:scaleX(1); }
.nav.is-stuck .nav__links > a{ color:var(--ink-2); }
.nav.is-stuck .nav__links > a:hover{ color:var(--brand-800); background:var(--brand-100); }
.nav.is-stuck .nav__links > a::after{ background:var(--brand); }
.nav__links-cta{ display:none; }

.nav__actions{ display:flex; align-items:center; gap:.7rem; position:relative; z-index:2; }

/* Menú abierto: el panel es blanco, así que logo, teléfono y hamburguesa
   deben pasar a color oscuro o quedan invisibles sobre blanco. */
.nav.is-menu .brand__text strong{ color:var(--brand-900); }
.nav.is-menu .brand__text small{ color:var(--ink-3); }
.nav.is-menu .nav__phone{ color:var(--brand-800); }
.nav.is-menu .nav__burger{ background:var(--brand-100); }
.nav.is-menu .nav__burger span{ background:var(--brand-800); }
.nav__phone{ display:flex; align-items:center; gap:.45rem; font-weight:600; font-size:.92rem; color:#fff; white-space:nowrap; }
.nav__phone svg{ width:18px; height:18px; fill:currentColor; stroke:none; }
.nav.is-stuck .nav__phone{ color:var(--brand-800); }
.nav__burger{
  display:none; width:44px; height:44px; border:0; border-radius:14px; background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px); cursor:pointer; padding:0; place-items:center; gap:5px;
}
.nav__burger span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .35s var(--ease), opacity .25s; }
.nav.is-stuck .nav__burger{ background:var(--brand-100); }
.nav.is-stuck .nav__burger span{ background:var(--brand-800); }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── HERO ───────────────────────────────────────────── */
.hero{
  position:relative; min-height:min(100svh,940px); display:grid; align-items:center;
  padding:clamp(7rem,13vh,10rem) 0 clamp(4rem,8vh,6rem);
  background:linear-gradient(165deg,#052E37 0%,var(--brand-900) 28%,var(--brand-800) 62%,var(--brand-700) 100%);
  overflow:hidden; isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-1; }
.hero__bg .blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.blob--1{ width:44vw; height:44vw; top:-12%; right:-8%; background:radial-gradient(circle,#2FD3E8,transparent 68%); animation:drift 22s var(--ease) infinite alternate; }
.blob--2{ width:36vw; height:36vw; bottom:-14%; left:-6%; background:radial-gradient(circle,#0FB2C8,transparent 68%); animation:drift 27s 2s var(--ease) infinite alternate-reverse; }
.blob--3{ width:26vw; height:26vw; top:38%; left:44%; background:radial-gradient(circle,#67F0DF,transparent 70%); opacity:.3; animation:drift 19s 1s var(--ease) infinite alternate; }
@keyframes drift{ to{ transform:translate3d(6vw,-5vh,0) scale(1.18); } }
.grid-lines{
  position:absolute; inset:0; opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 75% 60% at 50% 45%,#000,transparent 78%);
}
#particles{ position:absolute; inset:0; width:100%; height:100%; }

.hero__inner{
  width:min(100% - 3rem, 1320px); margin-inline:auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero__title{ font-size:clamp(2.6rem,6.1vw,5rem); font-weight:800; color:#fff; margin:1.1rem 0 1.3rem; }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .line__i{ display:inline-block; }
.hero__lead{ font-size:clamp(1.03rem,1.5vw,1.2rem); color:rgba(230,250,254,.84); max-width:56ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin:2rem 0 2.6rem; }
.hero__trust{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3.5vw,2.8rem); }
.hero__trust li{ position:relative; }
.hero__trust li + li::before{ content:""; position:absolute; left:calc(-1 * clamp(.6rem,1.75vw,1.4rem)); top:12%; bottom:12%; width:1px; background:rgba(255,255,255,.2); }
.hero__trust strong{ display:block; font-family:var(--font-d); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; color:#fff; line-height:1; }
.hero__trust span{ font-size:.83rem; color:rgba(214,245,250,.72); }

/* Orbit visual */
.hero__visual{ position:relative; display:grid; place-items:center; min-height:440px; }
.orbit{ position:relative; width:min(100%,420px); aspect-ratio:1; display:grid; place-items:center; }
.orbit__ring{ position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(255,255,255,.25); }
.orbit__ring--1{ animation:spin 34s linear infinite; }
.orbit__ring--2{ inset:12%; border-style:solid; border-color:rgba(123,224,238,.28); animation:spin 24s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.orbit__core{
  position:relative; width:62%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6), 0 0 0 10px rgba(255,255,255,.07);
  animation:bob 6s ease-in-out infinite;
}
.orbit__core img{ width:100%; height:100%; object-fit:cover; }
@keyframes bob{ 50%{ transform:translateY(-14px); } }
.orbit__chip{
  position:absolute; padding:.5rem .9rem; border-radius:100px; white-space:nowrap;
  background:rgba(255,255,255,.94); color:var(--brand-800);
  font-family:var(--font-d); font-weight:600; font-size:.84rem;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5); animation:bob 5s ease-in-out infinite;
}
.orbit__chip--a{ top:2%; left:6%; animation-delay:.2s; }
.orbit__chip--b{ top:26%; right:-6%; animation-delay:1.1s; }
.orbit__chip--c{ bottom:16%; left:-6%; animation-delay:.7s; }
.orbit__chip--d{ bottom:1%; right:12%; animation-delay:1.6s; }

.float-card{
  position:absolute; background:rgba(255,255,255,.96); border-radius:var(--radius);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.5); padding:1rem 1.1rem; width:265px;
}
.float-card--ai{ top:-2%; right:-2%; width:auto; display:flex; align-items:center; gap:.7rem; padding:.75rem 1.1rem; }
.avatar{
  display:grid; place-items:center; width:36px; height:36px; border-radius:12px; flex:none;
  background:linear-gradient(135deg,var(--brand-700),var(--brand-500)); color:#fff;
  font-family:var(--font-d); font-weight:700; font-size:.78rem;
}
.float-card--ai strong{ display:block; font-family:var(--font-d); font-size:.9rem; }
.float-card--ai small{ font-size:.75rem; color:var(--ink-3); }
.ai-dot{ width:10px; height:10px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:ping 1.8s infinite; }

.hero__scroll{
  position:absolute; left:50%; bottom:1.6rem; translate:-50% 0;
  width:26px; height:44px; border-radius:100px; border:2px solid rgba(255,255,255,.35); display:grid; place-items:start center; padding-top:7px;
}
.hero__scroll span{ width:4px; height:8px; border-radius:4px; background:#fff; animation:scrollDot 1.7s var(--ease) infinite; }
@keyframes scrollDot{ 60%{ transform:translateY(16px); opacity:0; } 61%{ opacity:0; transform:translateY(0); } }

/* ── Marquee ────────────────────────────────────────── */
.marquee{ background:var(--brand-900); color:rgba(255,255,255,.92); padding:.95rem 0; overflow:hidden; }
.marquee__track{ display:flex; align-items:center; gap:1.6rem; width:max-content; animation:slide 42s linear infinite; }
.marquee__track span{ font-family:var(--font-d); font-weight:600; font-size:.98rem; letter-spacing:.02em; white-space:nowrap; }
.marquee__track i{ color:var(--brand-300); font-size:.7rem; font-style:normal; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── Secciones ──────────────────────────────────────── */
.section{ position:relative; padding:clamp(4.5rem,10vh,7.5rem) 0; }
.section--soft{ background:var(--bg-soft); }
.section--dark{
  background:linear-gradient(170deg,var(--brand-900),var(--brand-800) 60%,#0A5F70);
  color:#EAFBFE; overflow:hidden;
}
.section--dark h2{ color:#fff; }
.section--dark p{ color:rgba(214,245,250,.8); }
.section__head{ max-width:62ch; margin-bottom:clamp(2.4rem,5vh,3.6rem); }
.section__head p{ font-size:1.06rem; color:var(--ink-2); }
.section__head--light p{ color:rgba(214,245,250,.82); }

/* ── Cards servicios ────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1.15rem; }
.card{
  position:relative; padding:1.7rem 1.5rem 1.5rem; border-radius:var(--radius-lg);
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s;
  transform-style:preserve-3d; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(31,169,190,.14),transparent 62%);
  transition:opacity .4s;
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:var(--brand-300); }
.card:hover::before{ opacity:1; }
/* Banda de imagen: sangra hasta el borde de la tarjeta (que ya recorta) */
.card__media{
  position:relative; margin:-1.7rem -1.5rem 1.4rem; aspect-ratio:16/10;
  overflow:hidden; background:var(--brand-100);
}
.card__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  transition:transform .9s var(--ease);
}
.card:hover .card__media img{ transform:scale(1.06); }
/* Degradado inferior: separa la foto del ícono y del texto */
.card__media::after{
  content:""; position:absolute; inset:auto 0 0; height:45%; pointer-events:none;
  background:linear-gradient(transparent,rgba(6,58,69,.32));
}

.card p{ font-size:.95rem; color:var(--ink-2); margin:.5rem 0 .9rem; }
.card__meta{ display:inline-block; font-size:.8rem; font-weight:700; color:var(--brand-700); background:var(--brand-100); padding:.28rem .7rem; border-radius:100px; }
.card__link{
  display:flex; align-items:center; gap:.4rem; margin-top:1.05rem; padding-top:.9rem;
  border-top:1px dashed var(--line); font-family:var(--font-d); font-weight:600; font-size:.9rem; color:var(--brand-700);
}
.card__link i{ font-style:normal; transition:transform .35s var(--ease); }
.card__link:hover i{ transform:translateX(6px); }
.card--urgent{ background:linear-gradient(160deg,#FFF6F3,#fff); border-color:#FFD9CF; }
.card--urgent .card__meta{ background:var(--accent-soft); color:#C6421F; }
.card--urgent .card__link{ color:#D9481F; }

/* ── Flujo automatización ───────────────────────────── */
.auto__glow{ position:absolute; width:60vw; height:60vw; top:-25%; right:-15%; border-radius:50%; background:radial-gradient(circle,rgba(52,183,205,.3),transparent 65%); filter:blur(60px); }
.flow{ display:grid; grid-template-columns:1fr auto 1.05fr auto 1fr; gap:1rem; align-items:stretch; }
.flow__label{
  display:block; margin-bottom:.9rem; font-family:var(--font-d); font-weight:700; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brand-300);
}
.flow__items{ display:grid; gap:.65rem; }
.chan{
  display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; border-radius:16px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(6px);
  transition:transform .35s var(--ease), background .35s, border-color .35s;
}
.chan:hover{ transform:translateX(6px); background:rgba(255,255,255,.13); border-color:rgba(123,224,238,.45); }
.chan strong{ display:block; font-size:.9rem; font-family:var(--font-d); color:#fff; }
.chan small{ font-size:.76rem; color:rgba(214,245,250,.7); }
.chan__ico{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none; font-weight:700; font-size:.95rem; color:#fff; }
.chan__ico.wa{ background:linear-gradient(135deg,var(--wa-dark),var(--wa)); }
.chan__ico.web{ background:linear-gradient(135deg,var(--brand-700),var(--brand-500)); }
.chan__ico.ig{ background:linear-gradient(135deg,#7B3FE4,#E1306C); }
.chan__ico.tel{ background:linear-gradient(135deg,#334E58,#5A7D89); }
.chan__ico.ok{ background:rgba(255,255,255,.14); }

.flow__arrow{ display:grid; align-content:center; gap:.5rem; }
.flow__arrow i{ width:7px; height:7px; border-radius:50%; background:var(--brand-300); opacity:.35; animation:pulseDot 1.5s ease-in-out infinite; }
.flow__arrow i:nth-child(2){ animation-delay:.2s; }
.flow__arrow i:nth-child(3){ animation-delay:.4s; }
@keyframes pulseDot{ 50%{ opacity:1; transform:scale(1.5); } }

.brain{
  position:relative; height:100%; padding:1.6rem 1.4rem; border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(123,224,238,.2),rgba(255,255,255,.06));
  border:1px solid rgba(123,224,238,.4); overflow:hidden;
}
.brain__pulse{
  position:absolute; inset:auto -30% -60% -30%; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(123,224,238,.45),transparent 65%); animation:brainPulse 3.4s ease-in-out infinite;
}
@keyframes brainPulse{ 50%{ transform:scale(1.25); opacity:.55; } }
.brain > strong{ position:relative; display:block; font-family:var(--font-d); font-size:1.3rem; color:#fff; margin-bottom:.9rem; }
.brain ul{ position:relative; list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.brain li{ position:relative; padding-left:1.6rem; font-size:.92rem; color:rgba(234,251,254,.9); }
.brain li::before{
  content:"›"; position:absolute; left:0; top:-.1em; width:20px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.16); color:var(--brand-300); display:grid; place-items:center; font-weight:700;
}

/* ── Agenda / Booking ───────────────────────────────── */
.booking{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1.4rem; align-items:start; }
.booking__main{ display:grid; gap:1.4rem; align-content:start; min-width:0; }
.booking__body{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow-sm);
}
.steps{
  list-style:none; margin:0; display:flex; gap:.4rem; background:#fff;
  border:1px solid var(--line); border-radius:100px; padding:.45rem; box-shadow:var(--shadow-sm);
}
.steps li{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem .8rem; border-radius:100px; font-size:.88rem; font-weight:600; color:var(--ink-3);
  transition:background .35s, color .35s;
}
.steps li i{
  display:grid; place-items:center; width:24px; height:24px; border-radius:50%; flex:none;
  background:var(--brand-100); color:var(--brand-700); font-style:normal; font-size:.78rem; font-weight:700;
  transition:background .35s, color .35s;
}
.steps li.is-active{ background:var(--brand-100); color:var(--brand-800); }
.steps li.is-active i{ background:var(--brand); color:#fff; }
.steps li.is-done i{ background:var(--wa); color:#fff; }
.steps li.is-done i::after{ content:"✓"; }
.steps li.is-done i{ font-size:0; }
.steps li.is-done i::after{ font-size:.8rem; }

.step{ display:none; border:0; margin:0; padding:0; animation:stepIn .5s var(--ease); }
.step.is-active{ display:block; }
@keyframes stepIn{ from{ opacity:0; transform:translateY(14px); } }
.step__title{ font-family:var(--font-d); font-weight:700; font-size:1.25rem; padding:0; margin-bottom:1.2rem; color:var(--brand-900); }
.step__nav{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.8rem; }
.step__legal{ margin:1rem 0 0; font-size:.78rem; color:var(--ink-3); }

.options{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:.7rem; }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt__box{
  display:block; height:100%; padding:.95rem 1.05rem; border-radius:16px; cursor:pointer;
  border:2px solid var(--line); background:#fff; transition:all .3s var(--ease);
}
.opt__box b{ display:block; font-family:var(--font-d); font-size:.97rem; color:var(--brand-900); }
.opt__box small{ font-size:.79rem; color:var(--ink-3); }
.opt__box:hover{ border-color:var(--brand-300); transform:translateY(-2px); }
.opt input:checked + .opt__box{ border-color:var(--brand); background:linear-gradient(160deg,var(--brand-100),#fff); box-shadow:0 10px 24px -14px rgba(31,169,190,.8); }
.opt input:focus-visible + .opt__box{ outline:3px solid var(--brand); outline-offset:2px; }
.opt--urgent input:checked + .opt__box{ border-color:var(--accent); background:linear-gradient(160deg,var(--accent-soft),#fff); box-shadow:0 10px 24px -14px rgba(255,122,92,.8); }

.datepick{ display:grid; gap:1.3rem; }
.datepick__days{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.4rem; scrollbar-width:thin; }
.day{
  flex:none; width:78px; padding:.7rem .4rem; border-radius:16px; border:2px solid var(--line);
  background:#fff; text-align:center; cursor:pointer; transition:all .3s var(--ease);
}
.day small{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.day strong{ display:block; font-family:var(--font-d); font-size:1.3rem; color:var(--brand-900); line-height:1.2; }
.day span{ font-size:.7rem; color:var(--ink-3); }
.day:hover:not(:disabled){ border-color:var(--brand-300); transform:translateY(-3px); }
.day.is-sel{ border-color:var(--brand); background:linear-gradient(170deg,var(--brand-700),var(--brand)); }
.day.is-sel small,.day.is-sel strong,.day.is-sel span{ color:#fff; }
.day:disabled{ opacity:.38; cursor:not-allowed; }
.slots__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.8rem; flex-wrap:wrap; }
.slots__head strong{ font-family:var(--font-d); font-size:1.02rem; color:var(--brand-900); }
.slots__hint{ font-size:.8rem; color:var(--ink-3); }
.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:.5rem; }
.slot{
  padding:.65rem .4rem; border-radius:12px; border:2px solid var(--line); background:#fff;
  font-family:var(--font-d); font-weight:600; font-size:.92rem; color:var(--brand-800); cursor:pointer;
  transition:all .25s var(--ease);
}
.slot:hover:not(:disabled){ border-color:var(--brand-300); transform:translateY(-2px); }
.slot.is-sel{ background:linear-gradient(160deg,var(--brand-700),var(--brand)); border-color:var(--brand); color:#fff; }
.slot:disabled{ opacity:.34; text-decoration:line-through; cursor:not-allowed; }
.slots__empty{ grid-column:1/-1; padding:1rem; border-radius:14px; background:var(--bg-soft); color:var(--ink-2); font-size:.9rem; }

.fields{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.field{ display:grid; gap:.35rem; }
.field--full{ grid-column:1/-1; }
.field > span{ font-size:.85rem; font-weight:600; color:var(--ink-2); }
.field input,.field select,.field textarea{
  font:inherit; font-size:.96rem; padding:.8rem .95rem; border-radius:13px;
  border:2px solid var(--line); background:#fff; color:var(--ink); transition:border-color .25s, box-shadow .25s;
  width:100%; resize:vertical;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 4px rgba(31,169,190,.14); }
.field input:invalid:not(:placeholder-shown){ border-color:#F5A79A; }
.check{ display:flex; align-items:flex-start; gap:.6rem; font-size:.86rem; color:var(--ink-2); }
.check input{ width:20px; height:20px; accent-color:var(--brand); margin-top:.15rem; flex:none; }

.summary{ margin-top:1.4rem; padding:1.1rem 1.2rem; border-radius:18px; background:var(--bg-soft); border:1px dashed var(--brand-300); }
.summary > strong{ font-family:var(--font-d); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-700); }
.summary ul{ list-style:none; margin:.7rem 0 0; padding:0; display:grid; gap:.4rem; }
.summary li{ display:flex; justify-content:space-between; gap:1rem; font-size:.92rem; }
.summary li span{ color:var(--ink-3); }
.summary li b{ font-family:var(--font-d); color:var(--brand-900); text-align:right; }

.booked{ display:none; text-align:center; padding:1rem 0; animation:stepIn .55s var(--ease); }
.booked.is-active{ display:block; }
.booked__check{
  width:76px; height:76px; margin:0 auto 1.2rem; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--wa-dark),var(--wa)); color:#fff; box-shadow:0 18px 40px -18px rgba(34,197,94,.9);
  animation:pop .6s var(--ease);
}
.booked__check svg{ width:34px; height:34px; stroke-width:2.6; }
@keyframes pop{ from{ transform:scale(.5); opacity:0; } }
.booked h3{ font-size:1.7rem; color:var(--brand-900); }
.booked p{ color:var(--ink-2); max-width:46ch; margin-inline:auto; }
.booked__card{
  margin:1.4rem auto; max-width:420px; text-align:left; padding:1.1rem 1.3rem; border-radius:18px;
  background:linear-gradient(160deg,var(--brand-900),var(--brand-800)); color:#EAFBFE;
}
.booked__card dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem; font-size:.92rem; }
.booked__card dt{ color:rgba(214,245,250,.65); }
.booked__card dd{ margin:0; font-family:var(--font-d); font-weight:600; text-align:right; }
.booked__acts{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }

.booking__side{ display:grid; gap:1rem; align-content:start; }
.side__card{ padding:1.3rem; border-radius:var(--radius-lg); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.side__card h4{ font-family:var(--font-d); font-size:1rem; margin-bottom:.7rem; color:var(--brand-900); }
.side__card p{ font-size:.89rem; color:var(--ink-2); margin-bottom:.9rem; }
.side__card--brand{ background:linear-gradient(160deg,var(--brand-800),var(--brand-700)); border-color:transparent; color:#EAFBFE; }
.side__card--brand h4{ color:#fff; }
.side__card--brand p{ color:rgba(214,245,250,.85); }
.hours{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.hours li{ display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; padding:.3rem 0; border-bottom:1px dashed var(--line); }
.hours li:last-child{ border:0; }
.hours li span:first-child{ color:var(--ink-2); text-transform:capitalize; }
.hours li span:last-child{ font-weight:600; color:var(--brand-800); }
.hours li.is-today{ background:var(--brand-100); border-radius:10px; padding:.35rem .55rem; border-bottom-color:transparent; }
.hours li.is-closed span:last-child{ color:var(--ink-3); }
.pays{ font-size:.89rem; color:var(--ink-2); margin:0; }

/* ── Nosotros ───────────────────────────────────────── */
.about{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.about__frame{ position:relative; border-radius:var(--radius-xl); overflow:visible; }
.about__frame img{
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  transform:rotate(-2.5deg); transition:transform .6s var(--ease);
}
.about__frame:hover img{ transform:rotate(0) scale(1.02); }
.about__badge{
  position:absolute; right:-1.2rem; bottom:-1.4rem; padding:1.1rem 1.3rem; border-radius:22px;
  background:#fff; box-shadow:var(--shadow); text-align:center;
}
.about__badge strong{ display:block; font-family:var(--font-d); font-size:2rem; font-weight:800; color:var(--brand); line-height:1; }
.about__badge span{ font-size:.76rem; color:var(--ink-2); }
.feats{ list-style:none; margin:1.6rem 0 2rem; padding:0; display:grid; gap:1rem; }
.feats li{ display:flex; gap:.9rem; }
.feats i{
  flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-style:normal;
  background:linear-gradient(140deg,var(--brand-700),var(--brand)); color:#fff; font-size:.8rem; font-weight:700;
  box-shadow:0 8px 18px -10px rgba(31,169,190,.9);
}
.feats strong{ display:block; font-family:var(--font-d); font-size:1rem; color:var(--brand-900); }
.feats span{ font-size:.92rem; color:var(--ink-2); }

/* ── Testimonios ────────────────────────────────────── */
.rail{ overflow:hidden; padding:.5rem 0 1rem; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.rail__track{ display:flex; gap:1.1rem; width:max-content; animation:slide 46s linear infinite; }
.rail:hover .rail__track{ animation-play-state:paused; }
.quote{
  width:352px; margin:0; padding:1.5rem; border-radius:var(--radius-lg);
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:.9rem;
}
.stars{ color:var(--gold); letter-spacing:.16em; font-size:.95rem; }
.quote blockquote{ margin:0; font-size:.98rem; color:var(--ink-2); line-height:1.6; flex:1; }
.quote figcaption{ display:flex; align-items:center; gap:.7rem; padding-top:.9rem; border-top:1px dashed var(--line); }
.quote figcaption strong{ display:block; font-family:var(--font-d); font-size:.94rem; color:var(--brand-900); }
.quote figcaption small{ font-size:.78rem; color:var(--ink-3); }

/* ── FAQ ────────────────────────────────────────────── */
.faq{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.faq__head{ position:sticky; top:6.5rem; }
.faq__head p{ color:var(--ink-2); margin-bottom:1.4rem; }
.faq__list{ display:grid; gap:.65rem; }
.ac{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:0 1.2rem;
  box-shadow:var(--shadow-sm); transition:border-color .3s, box-shadow .3s;
}
.ac[open]{ border-color:var(--brand-300); box-shadow:var(--shadow); }
.ac summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer;
  padding:1.1rem 0; font-family:var(--font-d); font-weight:600; font-size:1.02rem; color:var(--brand-900);
  list-style:none;
}
.ac summary::-webkit-details-marker{ display:none; }
.ac summary i{
  position:relative; flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--brand-100); transition:background .3s, transform .4s var(--ease);
}
.ac summary i::before,.ac summary i::after{
  content:""; position:absolute; inset:50% 25% auto; height:2px; background:var(--brand-700);
  border-radius:2px; translate:0 -50%; transition:transform .35s var(--ease), background .3s;
}
.ac summary i::after{ transform:rotate(90deg); }
.ac[open] summary i{ background:var(--brand); transform:rotate(180deg); }
.ac[open] summary i::before,.ac[open] summary i::after{ background:#fff; }
.ac[open] summary i::after{ transform:rotate(0); }
.ac p{ margin:0 0 1.15rem; font-size:.96rem; color:var(--ink-2); max-width:62ch; animation:stepIn .4s var(--ease); }

/* ── Contacto ───────────────────────────────────────── */
.contact{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
.contact__list{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:1.3rem; }
.contact__list li{ display:flex; gap:1rem; }
.ci{
  flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:1.15rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
}
.contact__list strong{ display:block; font-family:var(--font-d); color:#fff; margin-bottom:.2rem; }
.contact__list p{ margin:0 0 .35rem; font-size:.95rem; color:rgba(214,245,250,.82); }
.contact__list a{ color:var(--brand-300); font-weight:600; font-size:.92rem; }
.contact__list a:hover{ text-decoration:underline; }
.contact__map{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}
.contact__map-alt{
  position:absolute; inset:0; z-index:0; display:grid; place-content:center; gap:.5rem;
  justify-items:center; text-align:center; padding:1.5rem;
  color:var(--brand-300); font-family:var(--font-d); font-weight:600; font-size:.95rem;
}
.contact__map-alt span{ font-size:1.6rem; }
.contact__map-alt:hover{ text-decoration:underline; }
.contact__map iframe{ position:relative; z-index:1; width:100%; height:420px; border:0; display:block; filter:saturate(1.05); }

/* ── Footer ─────────────────────────────────────────── */
.footer{ background:#04222A; color:rgba(214,245,250,.72); padding:clamp(3rem,6vh,4.5rem) 0 1.5rem; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2rem; }
.footer h5{ font-family:var(--font-d); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:1rem; }
.footer__grid > div > a{ display:block; margin-bottom:.55rem; font-size:.93rem; transition:color .25s, transform .25s; }
.footer__grid > div > a:hover{ color:var(--brand-300); transform:translateX(4px); }
.footer__brand img{ border-radius:16px; margin-bottom:1rem; }
.footer__brand p{ font-size:.93rem; max-width:34ch; }
.footer__social{ display:flex; gap:.5rem; }
.footer__social a{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; margin:0;
  background:rgba(255,255,255,.08); color:#fff; font-weight:700; transition:background .3s, transform .3s;
}
.footer__social a:hover{ background:var(--brand); transform:translateY(-3px); }
.footer__hrs{ display:block; font-size:.86rem; margin:.4rem 0 1rem; color:rgba(214,245,250,.55); }
.footer__bottom{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.1);
  font-size:.82rem; color:rgba(214,245,250,.5);
}
.footer__legal{ display:inline-flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
/* Acceso al panel: discreto para el paciente, fácil de hallar para la clínica */
.footer__admin{
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem;
  border-radius:100px; border:1px solid rgba(255,255,255,.16);
  color:rgba(214,245,250,.62); font-weight:600; letter-spacing:.02em;
  transition:color .25s, border-color .25s, background .25s;
}
.footer__admin svg{ width:14px; height:14px; stroke-width:2; }
.footer__admin:hover{ color:#fff; border-color:var(--brand-300); background:rgba(123,224,238,.12); }

/* ── FAB ────────────────────────────────────────────── */
.fab{
  position:fixed; right:1.4rem; z-index:850; width:56px; height:56px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:#fff;
  transition:transform .35s var(--ease), opacity .35s, box-shadow .35s;
}
.fab svg{ width:26px; height:26px; }
/* Orden en la esquina: asistente arriba, WhatsApp abajo */
.fab--wa{ bottom:1.5rem; background:linear-gradient(140deg,var(--wa-dark),var(--wa)); box-shadow:0 14px 30px -12px rgba(34,197,94,.9); }
.fab--wa svg{ fill:#fff; stroke:none; }
.fab--wa::before{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa);
  animation:ripple 2.4s ease-out infinite;
}
/* Pulso contenido: con 1.7 los anillos de los dos botones se tocaban */
@keyframes ripple{ to{ transform:scale(1.42); opacity:0; } }
.fab--top{
  bottom:1.4rem; right:auto; left:1.4rem; width:46px; height:46px; background:var(--brand-800);
  opacity:0; pointer-events:none; box-shadow:var(--shadow);
}
.fab--top .fab__tip{ right:auto; left:calc(100% + .7rem); }
.fab--top.is-on{ opacity:1; pointer-events:auto; }
.fab:hover{ transform:translateY(-4px) scale(1.05); }
.fab__tip{
  position:absolute; right:calc(100% + .7rem); padding:.35rem .75rem; border-radius:100px;
  background:var(--brand-900); color:#fff; font-size:.8rem; white-space:nowrap;
  opacity:0; transform:translateX(6px); transition:all .3s var(--ease); pointer-events:none;
}
.fab:hover .fab__tip{ opacity:1; transform:translateX(0); }

/* ── Lanzador de chat ───────────────────────────────── */
.chat-launch{
  position:fixed; right:1.4rem; bottom:7.5rem; z-index:850;
  display:flex; align-items:center; gap:.6rem; padding:.55rem 1.1rem .55rem .6rem;
  border:0; border-radius:100px; cursor:pointer;
  background:linear-gradient(120deg,var(--brand-800),var(--brand)); color:#fff;
  box-shadow:0 18px 38px -16px rgba(11,107,125,.95);
  transition:transform .4s var(--ease), opacity .3s, visibility .3s;
}
.chat-launch:hover{ transform:translateY(-4px); }
.chat-launch__ring{ position:absolute; inset:0; border-radius:100px; border:2px solid var(--brand-300); animation:ripple 2.8s ease-out infinite; }
.chat-launch__ico{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:1.1rem; }
.chat-launch__label{ font-family:var(--font-d); font-size:.78rem; line-height:1.25; text-align:left; }
.chat-launch__label b{ font-size:.92rem; }
.chat-launch__badge{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:100px;
  background:var(--accent); color:#fff; font-size:.72rem; font-weight:700; display:grid; place-items:center;
}
.chat-launch.is-hidden{ opacity:0; visibility:hidden; transform:scale(.85); }

/* ── Ventana de chat ────────────────────────────────── */
.chat{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:860; width:min(calc(100vw - 2rem),382px);
  height:min(72vh,620px); display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:26px; box-shadow:0 40px 90px -24px rgba(4,34,42,.55);
  opacity:0; visibility:hidden; transform:translateY(24px) scale(.96); transform-origin:bottom right;
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.chat.is-open{ opacity:1; visibility:visible; transform:none; }
.chat__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1rem;
  background:linear-gradient(120deg,var(--brand-900),var(--brand-700)); color:#fff;
}
.chat__id{ display:flex; align-items:center; gap:.7rem; }
.chat__avatar{ position:relative; }
.chat__avatar img{ width:36px; height:36px; border-radius:12px; }
.online{
  position:absolute; right:-2px; bottom:-2px; width:11px; height:11px; border-radius:50%;
  background:#4ADE80; border:2px solid var(--brand-900);
}
.chat__id strong{ display:block; font-family:var(--font-d); font-size:.96rem; }
.chat__id small{ font-size:.74rem; color:rgba(214,245,250,.8); }
.chat__close{ background:rgba(255,255,255,.14); border:0; color:#fff; width:40px; height:40px; border-radius:12px; cursor:pointer; font-size:1rem; }
.chat__close:hover{ background:rgba(255,255,255,.26); }
.chat__log{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; background:var(--bg-soft); scroll-behavior:smooth; }
.msg{ max-width:84%; padding:.7rem .9rem; border-radius:16px; font-size:.92rem; line-height:1.5; animation:msgIn .35s var(--ease); }
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px); } }
.msg--bot{ align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:5px; color:var(--ink); }
.msg--me{ align-self:flex-end; background:linear-gradient(135deg,var(--brand-700),var(--brand)); color:#fff; border-bottom-right-radius:5px; }
.msg b{ font-weight:700; }
.msg a{ color:var(--brand-700); font-weight:600; text-decoration:underline; }
.msg--me a{ color:#fff; }
.msg ul{ margin:.4rem 0 0; padding-left:1.1rem; }
.typing{ align-self:flex-start; display:flex; gap:4px; padding:.8rem .9rem; background:#fff; border:1px solid var(--line); border-radius:16px; border-bottom-left-radius:5px; }
.typing i{ width:7px; height:7px; border-radius:50%; background:var(--brand-300); animation:bounce 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.15s; }
.typing i:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 40%{ transform:translateY(-6px); background:var(--brand); } }
.chat__quick{ display:flex; gap:.4rem; padding:.6rem .8rem 0; flex-wrap:wrap; background:var(--bg-soft); }
.qk{
  padding:.42rem .8rem; border-radius:100px; border:1px solid var(--brand-300); background:#fff;
  color:var(--brand-800); font-size:.82rem; font-weight:600; cursor:pointer; transition:all .25s var(--ease);
}
.qk:hover{ background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-2px); }
.chat__form{ display:flex; gap:.5rem; padding:.8rem; background:var(--bg-soft); border-top:1px solid var(--line); }
.chat__form input{
  flex:1; font:inherit; font-size:.94rem; padding:.75rem .95rem; border-radius:100px;
  border:2px solid var(--line); background:#fff;
}
.chat__form input:focus{ outline:0; border-color:var(--brand); }
.chat__form button{
  width:44px; height:44px; flex:none; border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand-700),var(--brand)); color:#fff; transition:transform .3s var(--ease);
}
.chat__form button svg{ width:20px; height:20px; fill:currentColor; stroke:none; }
.chat__form button:hover{ transform:scale(1.08) rotate(8deg); }
.chat__foot{ padding:0 1rem .8rem; font-size:.72rem; color:var(--ink-3); text-align:center; background:var(--bg-soft); }

/* ── Reveal ─────────────────────────────────────────────
   Se ocultan SOLO con la clase .js: si el script no carga,
   el contenido se muestra normal en lugar de quedar invisible. */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal-scale{ opacity:0; transform:scale(.9); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.is-in,.js .reveal-scale.is-in{ opacity:1; transform:none; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width:1080px){
  /* A partir de aquí el menú completo ya no cabe en una línea:
     pasa a cajón desplegable en lugar de romperse en varios renglones. */
  .nav__links{
    position:fixed; inset:0 0 auto 0; flex-direction:column; align-items:stretch; gap:.2rem;
    padding:6rem 1.5rem 2rem; background:#fff; box-shadow:0 30px 60px -20px rgba(8,38,44,.35);
    transform:translateY(-102%); transition:transform .5s var(--ease); border-radius:0 0 30px 30px;
    z-index:1;
  }
  .nav__links.is-open{ transform:none; }
  .nav__links > a{ color:var(--ink); padding:.9rem 1rem; border-radius:14px; font-size:1.05rem; }
  .nav__links > a::after{ display:none; }
  .nav__links-cta{ display:inline-flex; justify-content:center; margin-top:.6rem; color:#fff !important; }
  .nav__burger{ display:grid; }

  .hero__inner{ grid-template-columns:1fr; }
  /* En una columna esta tarjeta cae junto al lanzador del chat y repite
     el mismo texto ("Asistente Cordel"): se oculta para no duplicar. */
  .float-card--ai{ display:none; }
  /* El mensaje primero: la imagen no debe empujar el titular fuera de pantalla */
  .hero__copy{ order:-1; }
  .hero__visual{ order:0; min-height:360px; margin-top:2.6rem; }
  .flow{ grid-template-columns:1fr; }
  .flow__arrow{ grid-auto-flow:column; justify-content:center; padding:.5rem 0; }
  .booking{ grid-template-columns:1fr; }
  .booking__side{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
  .about,.faq,.contact{ grid-template-columns:1fr; }
  .faq__head{ position:static; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav__phone span,.nav__cta span{ display:none; }
  .nav__cta{ padding:.8rem; }
  .nav__cta svg{ width:20px; height:20px; }
  /* En móvil estorba: se cruza con el ícono de las tarjetas y aporta poco */
  .fab--top{ display:none; }
  .hero__trust li + li::before{ display:none; }
  .hero__visual{ min-height:320px; margin-top:2.4rem; }
  .chat-launch{ bottom:7.9rem; }
  .fields{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .chat-launch__label{ display:none; }
  .chat-launch{ padding:.55rem; }
  .chat{ right:.7rem; bottom:.7rem; height:min(78vh,600px); }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ width:calc(100% - 2rem); }
  .orbit__chip--b,.orbit__chip--d{ font-size:.76rem; }
  .steps li span{ display:none; }
  .steps li{ flex:0 0 auto; }
  .quote{ width:290px; }
  .booked__acts .btn{ width:100%; justify-content:center; }
}

/* ── Accesibilidad / impresión ──────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal,.reveal-scale{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}
@media print{
  .nav,.fab,.chat,.chat-launch,.preloader,.scroll-progress,.hero__bg,.marquee{ display:none !important; }
  body{ color:#000; }
}