/* Satoshi: coloca Satoshi-Bold.woff2 y Satoshi-Black.woff2 en assets/fonts/ y toma el control sola.
   Mientras no estén, el navegador cae a Figtree sin romper nada. */
@font-face{font-family:Satoshi;src:url("../fonts/Satoshi-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url("../fonts/Satoshi-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  --display:Satoshi,Figtree,"Segoe UI",Helvetica,sans-serif;
  --text:Inter,"Segoe UI",system-ui,sans-serif;
  --ground:#FFFFFF;      /* pagina en blanco */
  --surface:#F3F5F8;     /* superficies: este gris hace de separador, sin bordes */
  --white:#FFFFFF;
  --ink:#2C2F3A;
  --ink-2:#565B69;
  --muted:#78898７;
  --muted:#878C9A;
  --line:#E7E4F6;
  --teal:#9AA0B2;
  --teal-600:#3B4050;    /* boton primario: carbon, no acento */
  --teal-800:#2C2F3A;
  --wash:#E7E4FB;
  --wash-2:#F0EDFD;
  --field:#FFFFFF;       /* controles dentro de tarjetas lila */
  --sand:#EDEDF2;
  --blue:#6355F0;        /* el morado de la marca: iconos y acentos */
  --blue-700:#4436CE;    /* el mismo, oscurecido para texto pequeno */
  --blue-900:#312597;
  --blue-soft:#E9E6FE;   /* fondo suave de icono */
  --r:16px;
  --btn-h:54px;   /* botones principales */
  --btn-sm:44px;  /* controles secundarios */
  --shadow-s:none;       /* en reposo las superficies son planas: el fondo las separa */
  --shadow-m:0 2px 6px rgba(44,47,58,.05),0 26px 50px -34px rgba(44,47,58,.45);
  --arch:180px 180px 20px 20px;
  --container:1160px;
  --gutter:clamp(20px,3.4vw,60px);
  --gutter-in:clamp(20px,3.4vw,60px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;padding-bottom:0;
}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.06;letter-spacing:-.028em;text-wrap:balance}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--teal-800);text-decoration:none}
:focus-visible{outline:2.5px solid var(--teal-800);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
/* la etiqueta de cada seccion: pildora gris con un diente en el morado de la
   marca. El icono va como mascara, no como imagen, para que tome el color del
   token y no haya que repetir el hex dentro del SVG. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;background:var(--surface);border-radius:99px;
  padding:9px 20px 9px 16px;font-family:var(--display);font-weight:600;font-size:13.5px;
  letter-spacing:0;text-transform:none;color:var(--ink);
}
.eyebrow::before{
  content:"";width:18px;height:18px;flex:none;background-color:var(--blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.4c1.8 0 2.4.9 3.8.9 2.2 0 3.6 1.5 3.6 3.9 0 3-1.3 4.6-1.8 7-.5 2.1-.6 4.5-2 4.5-1.3 0-1.2-2.2-1.6-4.1-.3-1.2-1.6-1.2-1.9 0-.4 1.9-.3 4.1-1.6 4.1-1.4 0-1.5-2.4-2-4.5-.5-2.4-1.8-4-1.8-7 0-2.4 1.4-3.9 3.6-3.9.6 0 1.1-.9 1.7-.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.4c1.8 0 2.4.9 3.8.9 2.2 0 3.6 1.5 3.6 3.9 0 3-1.3 4.6-1.8 7-.5 2.1-.6 4.5-2 4.5-1.3 0-1.2-2.2-1.6-4.1-.3-1.2-1.6-1.2-1.9 0-.4 1.9-.3 4.1-1.6 4.1-1.4 0-1.5-2.4-2-4.5-.5-2.4-1.8-4-1.8-7 0-2.4 1.4-3.9 3.6-3.9.6 0 1.1-.9 1.7-.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
em.hl{font-style:normal;color:inherit}   /* el acento vive en los iconos, no en el texto */
/* un solo tamaño de titular de seccion: antes convivian cuatro escalas */
h2.sec,.srv-head h2,.smile h2,.about-head h2{
  font-family:var(--display);font-size:clamp(30px,4.2vw,48px);font-weight:600;
  letter-spacing:-.03em;line-height:1.06;margin-top:14px;
}
.sec-lead{color:var(--ink-2);max-width:58ch;margin-top:14px;font-size:18px}
section{padding:84px 0}
.sec-head{margin-bottom:44px}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.005em;line-height:1;
  padding:0 26px;border-radius:99px;border:2px solid transparent;cursor:pointer;
  height:var(--btn-h);transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.btn-primary{background:var(--teal-600);color:#fff;box-shadow:0 8px 20px -12px rgba(44,47,58,.85)}
.btn-primary:hover{background:var(--teal-800);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--teal);background:var(--wash-2)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#15161E}
.btn svg{width:19px;height:19px;flex:none}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;background:var(--ground);padding:20px 0;
  transition:box-shadow .25s ease,padding .25s ease;
}
.nav.stuck{box-shadow:0 1px 0 var(--line);padding:12px 0}
.nav-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:32px;height:auto;
  max-width:none;padding-left:clamp(18px,2.2vw,34px);padding-right:clamp(18px,2.2vw,34px)}
.nav-left{display:none}
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.navlinks{display:flex;align-items:center;justify-content:center;gap:9px}
.navlinks a{
  font-family:var(--text);font-size:15px;font-weight:500;color:var(--ink-2);
  padding:9px 16px;border-radius:99px;display:inline-flex;align-items:center;gap:8px;
  transition:.16s;white-space:nowrap;
}
.navlinks a:hover{color:var(--ink);background:var(--wash-2)}
.navlinks a.on{background:#E9EAF1;color:var(--ink);font-weight:600}
.navlinks a.on:hover{background:#DFE1EA;color:var(--ink)}
.brandmark{display:flex;align-items:center;justify-content:center}
.brandmark img{height:48px;width:auto;display:block}
.nav-cta{
  /* mismas declaraciones que .act — cualquier cambio va en los dos */
  background:#22242E;color:#fff;border-radius:99px;padding:0 24px 0 7px;font-family:var(--display);
  font-weight:600;font-size:15px;line-height:1;display:inline-flex;align-items:center;gap:12px;
  height:var(--btn-h);white-space:nowrap;transition:.18s;
  box-shadow:0 12px 26px -18px rgba(15,26,31,.9);
}
.nav-cta:hover{background:#000}
.nav-cta i{
  width:40px;height:40px;border-radius:50%;background:#fff;color:#22242E;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.nav-cta i svg{width:18px;height:18px}
.burger{
  display:none;width:46px;height:46px;border:0;background:var(--surface);
  border-radius:12px;align-items:center;justify-content:center;cursor:pointer;
}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media (max-width:1120px){
  /* el menu ocupa la pantalla entera, por debajo de la barra */
  .navlinks{
    display:none;position:fixed;inset:0;z-index:55;
    flex-direction:column;align-items:stretch;justify-content:center;gap:2px;
    background:var(--ground);padding:96px 24px calc(28px + env(safe-area-inset-bottom));
    overflow-y:auto;
  }
  .navlinks.open{display:flex}
  .navlinks a{
    padding:15px 4px;font-family:var(--display);font-size:clamp(26px,7vw,34px);font-weight:600;
    letter-spacing:-.03em;color:var(--ink);border-radius:0;background:none;
  }
  .navlinks a:hover{background:none;color:var(--blue-700)}
  .navlinks a.on{background:none;color:var(--blue-700)}
  .navlinks a.on:hover{background:none}
  /* el boton de reservar vive dentro del menu */
  .navlinks a.nav-menu-cta{
    display:inline-flex;align-items:center;gap:12px;margin-top:26px;align-self:flex-start;
    background:#22242E;color:#fff;border-radius:99px;padding:0 26px 0 7px;height:58px;
    font-family:var(--display);font-size:16px;font-weight:600;
  }
  .navlinks a.nav-menu-cta i{width:44px;height:44px;border-radius:50%;background:#fff;color:#22242E;
    display:grid;place-items:center;flex:none}
  .navlinks a.nav-menu-cta svg{width:19px;height:19px}
  .navlinks a.nav-menu-cta:hover{background:#000;color:#fff}
  .burger{display:flex;position:relative;z-index:70}
  /* la hamburguesa se vuelve una equis */
  .burger span{transition:background .18s ease}
  .burger span::before,.burger span::after{transition:transform .24s cubic-bezier(.3,0,.2,1)}
  .burger[aria-expanded="true"] span{background:transparent}
  .burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
  .burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
  body.menu-abierto{overflow:hidden}
}
@media (max-width:700px){
  /* abajo esta la barra fija con las dos acciones: en la cabecera sobra */
  .nav-cta{display:none}
}
@media (min-width:1121px){.nav-menu-cta{display:none}}
@media (max-width:560px){
  .nav{padding:14px 0}
  .nav-cta{padding:0 18px 0 7px;font-size:14px}
  .brandmark img{height:36px}
}

/* ---------- hero ---------- */
.hero{padding:0 0 clamp(34px,4vw,56px)}
.hero-card{
  position:relative;overflow:hidden;isolation:isolate;margin:16px;border-radius:20px;
  min-height:1080px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(44px,6vw,76px) var(--gutter) clamp(58px,7.2vw,86px);
}
.hero-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;z-index:-2}
.hero-card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(0,0,0,.52);
}
.hero-badge{display:flex;align-items:center;gap:14px;margin-bottom:26px;max-width:520px}
.hero-badge span{
  display:inline-flex;align-items:center;gap:8px;background:rgba(28,30,40,.4);
  border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);color:#fff;border-radius:99px;
  padding:7px 15px;font-size:13px;font-weight:600;white-space:nowrap;
}
.hero-badge i{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.hero-badge i:first-child{background:linear-gradient(270deg,rgba(255,255,255,.55),rgba(255,255,255,0));max-width:38px}
.hero-card h1{
  font-family:var(--display);font-weight:600;color:#fff;letter-spacing:-.024em;line-height:1.05;
  font-size:clamp(40px,5.7vw,76px);max-width:23ch;margin:0;
}
.hero-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-top:26px;
}
.hero-sub{color:rgba(255,255,255,.84);font-size:17.5px;line-height:1.55;max-width:42ch;margin:0;font-weight:400}
.hero-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:none}
.act{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:12px;border-radius:99px;padding:0 24px 0 7px;
  font-family:var(--display);font-weight:600;font-size:15px;height:var(--btn-h);line-height:1;transition:.18s;
}
.act i{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.act svg{width:18px;height:18px}
.act.dark{background:#22242E;color:#fff;box-shadow:0 12px 28px -18px rgba(0,0,0,.9)}
.act.dark i{background:#fff;color:#22242E}
.act.dark:hover{background:#000;box-shadow:0 14px 30px -18px rgba(0,0,0,1)}
.act.light{background:#F2F3F7;color:var(--ink)}
.act.light i{background:var(--wash);color:var(--teal-800)}
.act.light:hover{background:#E8E9F0}
.hero-notch{
  position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:4;
  width:74px;height:50px;background:var(--ground);border-radius:18px 18px 0 0;
  display:flex;align-items:center;justify-content:center;color:var(--muted);transition:color .2s;
}
.hero-notch:hover{color:var(--ink)}
.mouse{
  position:relative;width:19px;height:29px;border:1.6px solid currentColor;border-radius:11px;
  display:block;
}
.mouse i{
  position:absolute;left:50%;top:6px;width:2.6px;height:6px;border-radius:2px;background:currentColor;
  animation:mouse-wheel 1.9s ease-in-out infinite;
}
@keyframes mouse-wheel{
  0%{opacity:0;transform:translate(-50%,0)}
  22%{opacity:1}
  72%{opacity:1;transform:translate(-50%,9px)}
  100%{opacity:0;transform:translate(-50%,11px)}
}
@media (prefers-reduced-motion:reduce){.mouse i{animation:none;transform:translate(-50%,0);opacity:1}}
@media (max-width:900px){.hero-notch{display:none}}

.hero-social{
  position:absolute;right:var(--gutter-in);top:clamp(30px,4vw,54px);display:flex;gap:4px;padding:5px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:99px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.hero-social a{
  width:36px;height:36px;border-radius:50%;background:transparent;border:0;
  display:flex;align-items:center;justify-content:center;color:#fff;transition:.16s;
}
.hero-social a:first-child{background:#22242E}
.hero-social a:hover{background:rgba(255,255,255,.24)}
.hero-social a:first-child:hover{background:#000}
.hero-social svg{width:16px;height:16px}
@media (max-width:900px){
  /* el contenido se alinea con el margen de la pagina (24 px) y respira mas */
  .hero-card{min-height:0;margin:16px;padding:38px 16px 30px}
  .hero-badge{margin-bottom:22px}
  .hero-social{position:static;margin-top:22px;order:4;align-self:flex-start}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:26px;margin-top:30px}
  .hero-acts{width:100%;gap:11px}
  .hero-acts .act{width:100%}
  .hero-badge{order:1}.hero-card h1{order:2}.hero-foot{order:3}
  .hero-card>img{object-position:78% 40%}
}

/* ---------- nosotros ---------- */
.about{padding:clamp(44px,5vw,72px) 0 clamp(48px,6vw,76px)}
.about .trust-row{margin-top:clamp(38px,4vw,54px)}
.about-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.about-pill{
  display:inline-flex;align-items:center;border:0;border-radius:99px;background:var(--surface);
  padding:7px 18px;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--white);
}
.about-head h2{max-width:19ch}
.about-head p{color:var(--ink-2);font-size:16.5px;line-height:1.6;max-width:74ch}
.about-cta{margin-top:10px}
.about-photo{margin:clamp(34px,4.5vw,54px) 16px 0;border-radius:20px;overflow:hidden}
.about-photo img{width:100%;height:auto;display:block;aspect-ratio:12/5;object-fit:cover}
@media (max-width:820px){.about-photo img{aspect-ratio:4/3}}

/* ---------- equipo: la foto de Marco con puntos que se abren ----------
   Los cuatro datos ya no son tarjetas sueltas debajo: son chinches sobre la
   foto. Cada uno entra en tres tiempos (punto -> hilo -> ficha) y se queda.
   En movil el mismo HTML se convierte en una rejilla normal debajo. */
.doc-stage{position:relative;margin:clamp(30px,3.6vw,46px) 16px clamp(26px,3vw,38px)}
.doc-banner{position:relative;border-radius:20px;overflow:hidden}
.doc-banner img{width:100%;height:auto;display:block;aspect-ratio:21/8;object-fit:cover;object-position:50% 34%}
.doc-banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,22,32,.8) 0%,rgba(20,22,32,.2) 32%,transparent 55%)}
.doc-plac{position:absolute;left:clamp(20px,3vw,44px);bottom:clamp(18px,2.4vw,32px);z-index:2}
.doc-plac b{display:block;font-family:var(--display);font-size:clamp(24px,2.8vw,36px);font-weight:600;letter-spacing:-.025em;color:#fff}
.doc-plac span{display:block;font-size:14.5px;color:rgba(255,255,255,.84);margin-top:3px}

/* --- chinches --- */
.pins{position:absolute;inset:0;z-index:3;pointer-events:none}
.pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0;pointer-events:auto}

.pin-dot{
  position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3),0 6px 16px rgba(10,12,20,.45);
  transform:scale(0);transition:transform .5s cubic-bezier(.2,.9,.3,1.35);transition-delay:var(--d)
}
.pin-dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;opacity:0;
  box-shadow:0 0 0 0 rgba(255,255,255,.55)
}
.doc-stage.on .pin-dot{transform:scale(1)}
.doc-stage.on .pin-dot::after{animation:pinPulso 3.2s ease-out infinite;animation-delay:calc(var(--d) + .5s);opacity:1}
@keyframes pinPulso{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}55%,100%{box-shadow:0 0 0 13px rgba(255,255,255,0)}}

.pin-hilo{
  position:absolute;top:-1px;height:1.5px;width:38px;border-radius:2px;
  background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(12,14,22,.35);transform:scaleX(0);
  transition:transform .42s cubic-bezier(.3,0,.15,1);transition-delay:calc(var(--d) + .18s)
}
.pin.r .pin-hilo{left:7px;transform-origin:left center}
.pin.l .pin-hilo{right:7px;transform-origin:right center}
.doc-stage.on .pin-hilo{transform:scaleX(1)}

.pin-ficha{
  position:absolute;top:50%;width:clamp(196px,15.5vw,238px);
  background:rgba(255,255,255,.97);border-radius:14px;padding:11px 14px 12px;
  box-shadow:0 20px 44px -24px rgba(12,14,22,.8);
  opacity:0;transition:opacity .44s ease,transform .52s cubic-bezier(.25,.9,.3,1.05);
  transition-delay:calc(var(--d) + .34s)
}
.pin.r .pin-ficha{left:45px;transform:translate(-14px,-50%)}
.pin.l .pin-ficha{right:45px;transform:translate(14px,-50%)}
.doc-stage.on .pin-ficha{opacity:1;transform:translate(0,-50%)}
.pin-ficha em{
  font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--blue-soft);color:var(--blue-700);margin-bottom:9px
}
.pin-ficha em svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pin-ficha b{display:block;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.015em;color:var(--ink);line-height:1.25}
.pin-ficha i{font-style:normal;display:block;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:4px}

/* --- sus redes, sobre la esquina de la foto --- */
.doc-redes{
  position:absolute;right:clamp(16px,2vw,32px);bottom:clamp(16px,2.2vw,30px);z-index:4;
  display:flex;gap:8px;padding:6px;border-radius:99px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.25,.9,.3,1.05);transition-delay:1.5s
}
.doc-stage.on .doc-redes{opacity:1;transform:none}
.doc-redes a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  border:1px solid rgba(255,255,255,.36);transition:.16s
}
.doc-redes a:first-child{background:#22242E;border-color:#22242E}
.doc-redes a:hover{background:rgba(255,255,255,.24)}
.doc-redes a:first-child:hover{background:#000}
.doc-redes svg{width:17px;height:17px}

@media (max-width:1024px){
  /* las fichas ya no caben sobre la foto: bajan a una rejilla normal */
  .pins{position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
  .pin{position:static;width:auto;height:auto}
  .pin-dot,.pin-hilo{display:none}
  .pin-ficha{
    position:static;width:auto;background:var(--surface);box-shadow:none;padding:16px 18px 17px;
    border-radius:16px;opacity:1;transform:none!important;transition:none
  }
  .doc-banner img{aspect-ratio:4/3}
  .doc-redes{right:14px;bottom:14px;gap:6px;padding:5px;transition-delay:.35s}
  .doc-redes a{width:36px;height:36px}
}
@media (max-width:560px){.pins{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .pin-dot{transform:scale(1)}
  .pin-dot::after{animation:none}
  .pin-hilo{transform:scaleX(1)}
  .pin-ficha{opacity:1;transform:translate(0,-50%)}
  .doc-redes{opacity:1;transform:none}
}

/* ---------- servicios ---------- */
.srv-head{text-align:center;max-width:62ch;margin:0 auto 24px}

.srv-head p{color:var(--ink-2);font-size:17px;line-height:1.6;margin-top:16px;max-width:52ch;margin-inline:auto}

.srv-nav{display:flex;justify-content:center;gap:10px;margin:0 0 clamp(30px,4vw,44px)}
.srv-nav button{
  width:50px;height:50px;border-radius:50%;border:0;background:var(--surface);
  cursor:pointer;display:grid;place-items:center;transition:.16s;color:var(--ink);
}
.srv-nav button:hover:not(:disabled){background:var(--blue);color:#fff;box-shadow:var(--shadow-m)}
.srv-nav button:disabled{opacity:.3;cursor:default}
.srv-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* el riel se sale del contenedor y llega al borde derecho de la pantalla */
.srv-rail{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* el riel ocupa toda la pantalla, pero la primera tarjeta arranca en la linea
     del contenedor; al desplazarse las tarjetas cruzan ese margen y siguen visibles
     hasta el borde izquierdo, en vez de cortarse en la linea. */
  --edge:max(24px,calc((100vw - var(--container))/2 + 24px));
  margin-inline:calc(50% - 50vw);
  padding:6px 8px 24px var(--edge);
  scroll-padding-left:var(--edge);
  scrollbar-width:none;-ms-overflow-style:none;
}
.srv-rail::-webkit-scrollbar{display:none}
.srv-rail .scard{flex:0 0 clamp(292px,28vw,394px);scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){.srv-rail{scroll-behavior:auto}}

.scard{
  display:flex;flex-direction:column;background:var(--surface);border:0;
  border-radius:22px;padding:36px 34px 32px;transition:.22s;
  box-shadow:var(--shadow-s);
}
.scard:hover{box-shadow:var(--shadow-m);transform:translateY(-4px)}
.scard-ico{width:54px;height:54px;margin-bottom:clamp(22px,2.4vw,32px)}
.scard-ico svg{width:100%;height:100%;display:block}
.scard h4{
  font-family:var(--display);font-size:clamp(22px,2.1vw,27px);font-weight:600;letter-spacing:-.025em;
  margin:0;color:var(--ink);line-height:1.15;
}
.scard p{margin:14px 0 0;flex:1;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.scard-more{
  margin:clamp(26px,2.8vw,36px) 0 0;align-self:flex-start;
  display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;
  border-radius:99px;border:0;background:var(--field);font-family:var(--display);font-weight:600;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-700);transition:.16s;
}
.scard:hover .scard-more{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- sonrisa ---------- */
/* el bloque va a todo el ancho con 24 px de aire, como el bento del proceso */
#sonrisa .wrap{max-width:none;padding-inline:16px}
/* ---------- diseño de sonrisa: foto a la izquierda, pasos desplegables ----------
   Los tres pasos ya no son una lista fija: uno esta abierto y los otros dos
   esperan. Asi el bloque ocupa lo mismo pero se lee de a un paso. */
.sm-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(28px,3.4vw,44px)}
.sm-head h2{margin-top:14px;max-width:16ch}
.sm-lead{color:var(--ink-2);font-size:17px;line-height:1.6;max-width:46ch}
@media (max-width:880px){.sm-head{grid-template-columns:1fr;gap:16px;align-items:start}}

.sm-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,24px);align-items:stretch}
@media (max-width:940px){.sm-grid{grid-template-columns:1fr}}

.sm-foto{position:relative;margin:0;border-radius:24px;overflow:hidden;background:var(--surface);min-height:clamp(300px,25vw,420px)}
.sm-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.sm-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,22,32,.5) 0%,rgba(20,22,32,.05) 34%,transparent 60%)}
.sm-chips{position:absolute;top:16px;right:16px;display:flex;gap:8px;z-index:2}
.sm-chips span{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;color:var(--blue-700);
  box-shadow:0 10px 24px -14px rgba(16,18,26,.7);
}
.sm-chips svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sm-pill{
  position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.95);border-radius:99px;padding:6px 8px 6px 20px;
  font-family:var(--display);font-size:14.5px;font-weight:600;color:var(--ink);
  box-shadow:0 14px 30px -16px rgba(16,18,26,.8);transition:.18s;
}
.sm-pill:hover{background:#fff;transform:translateY(-2px)}
.sm-pill i{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none}
.sm-pill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sm-pasos{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,14px)}
/* los tres reparten el alto de la foto; el abierto se queda con el doble */
.sm-p{background:var(--surface);border-radius:20px;overflow:hidden;
  flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;
  transition:background .32s ease,flex-grow .4s cubic-bezier(.3,0,.15,1)}
.sm-p.on{background:var(--blue);flex-grow:2}
.sm-cab{
  width:100%;border:0;background:none;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:14px;padding:clamp(18px,1.9vw,26px) clamp(18px,1.9vw,26px);
  font:inherit;color:inherit;
}
.sm-n{
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;
  color:var(--muted);font-variant-numeric:tabular-nums;flex:none;transition:color .32s ease;
}
.sm-p.on .sm-n{color:rgba(255,255,255,.72)}
.sm-cab b{
  flex:1;min-width:0;font-family:var(--display);font-size:clamp(17px,1.5vw,21px);font-weight:600;
  letter-spacing:-.02em;line-height:1.25;color:var(--ink);transition:color .32s ease;
}
.sm-p.on .sm-cab b{color:#fff}
.sm-fl{
  width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-2);transition:background .32s ease,color .32s ease,transform .32s ease;
}
.sm-p.on .sm-fl{background:#fff;color:var(--blue-700);width:46px;height:46px;transform:rotate(45deg)}
.sm-fl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sm-cab:focus-visible{outline:2.5px solid var(--blue);outline-offset:-4px;border-radius:20px}

/* el cuerpo abre con grid 0fr -> 1fr: sin medir alturas a mano */
.sm-cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.3,0,.15,1)}
.sm-p.on .sm-cuerpo{grid-template-rows:1fr}
.sm-cuerpo>div{overflow:hidden}
.sm-cuerpo p{
  margin:0;padding:0 clamp(18px,1.9vw,26px) clamp(18px,1.9vw,26px) calc(clamp(18px,1.9vw,26px) + 34px);
  font-size:15px;line-height:1.55;color:rgba(255,255,255,.82);max-width:42ch;
}
@media (prefers-reduced-motion:reduce){
  .sm-cuerpo{transition:none}
  .sm-p,.sm-fl,.sm-cab b,.sm-n{transition:none}
}

/* ---------- proceso: bento con maquetas animadas del registro ---------- */
#proceso .wrap{max-width:none;padding-inline:16px}
#casos .wrap{max-width:none;padding-inline:clamp(16px,3.4vw,64px)}
#proceso .sec-head,#casos .sec-head{text-align:center;display:flex;flex-direction:column;align-items:center}
#proceso .sec-lead,#casos .sec-lead{margin-inline:auto}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.4vw,20px);margin-top:clamp(30px,3.4vw,44px)}
.bx{position:relative;overflow:hidden;background:var(--surface);border-radius:24px;padding:clamp(20px,1.9vw,28px);display:flex;flex-direction:column}
.bx-1{grid-column:span 7} .bx-2{grid-column:span 5}
.bx-3{grid-column:span 5} .bx-4{grid-column:span 4} .bx-5{grid-column:span 3}
@media (max-width:1180px){.bx-1,.bx-2{grid-column:span 12}.bx-3{grid-column:span 12}.bx-4{grid-column:span 7}.bx-5{grid-column:span 5}}
@media (max-width:720px){.bx-4,.bx-5{grid-column:span 12}}

/* cabecera de cada tarjeta */
.bx-h{display:flex;align-items:flex-start;gap:13px;margin-bottom:clamp(16px,1.8vw,22px)}
.bx-n{
  flex:none;width:38px;height:38px;border-radius:11px;background:var(--blue-soft);color:var(--blue-700);
  display:grid;place-items:center;font-family:var(--display);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.bx h4{font-family:var(--display);font-size:clamp(17px,1.5vw,20px);font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--ink);margin:0}
.bx h4+p{font-size:13.5px;line-height:1.5;color:var(--muted);margin:5px 0 0;max-width:38ch}
.bx-art{margin-top:0}
.mk{background:var(--white);border-radius:18px;padding:clamp(14px,1.4vw,20px)}

/* ---- 01 · panel de reserva ---- */
.mkp{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.6vw,22px)}
@media (max-width:560px){.mkp{grid-template-columns:1fr}}
.mkp-lab{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.mk-serv{display:flex;flex-direction:column;gap:7px}
.mk-serv i{
  font-style:normal;display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:86px;padding:11px 12px;border-radius:14px;background:var(--surface);
  font-family:var(--display);font-size:12px;font-weight:600;color:var(--ink-2);
}
.mk-serv i svg{width:22px;height:22px;display:block}
.mk-serv i.on{background:var(--blue-soft);color:var(--blue-700)}
@media (max-width:560px){.mk-serv{flex-direction:row}}

.mk-days{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.mk-days i{
  border-radius:14px;background:var(--surface);display:grid;place-items:center;gap:1px;
  padding:9px 0 10px;font-style:normal;font-family:var(--display);line-height:1.15;
}
.mk-days u{text-decoration:none;font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.05em}
.mk-days b{font-size:19px;font-weight:600;color:var(--ink)}
.mk-days s{text-decoration:none;font-size:10px;color:var(--muted)}
.mk-days i:nth-child(1){animation:tapA 8s ease infinite}
.mk-days i:nth-child(2){animation:tapB 8s ease infinite}
.mk-days i:nth-child(4){animation:tapC 8s ease infinite}
.mk-days i:nth-child(1) b{animation:txtA 8s linear infinite}
.mk-days i:nth-child(2) b{animation:txtB 8s linear infinite}
.mk-days i:nth-child(4) b{animation:txtC 8s linear infinite}
.mk-days i:nth-child(1) u,.mk-days i:nth-child(1) s{animation:subA 8s linear infinite}
.mk-days i:nth-child(2) u,.mk-days i:nth-child(2) s{animation:subB 8s linear infinite}
.mk-days i:nth-child(4) u,.mk-days i:nth-child(4) s{animation:subC 8s linear infinite}
@keyframes tapA{0%{background:var(--ink);transform:scale(.93)}2%{background:var(--ink);transform:scale(1.03)}
  4%,26%{background:var(--ink);transform:scale(1)}26.5%,100%{background:var(--surface);transform:scale(1)}}
@keyframes tapB{0%,26.4%{background:var(--surface);transform:scale(1)}26.5%{background:var(--ink);transform:scale(.93)}
  28.5%{background:var(--ink);transform:scale(1.03)}30.5%,59%{background:var(--ink);transform:scale(1)}
  59.5%,100%{background:var(--surface);transform:scale(1)}}
@keyframes tapC{0%,59.4%{background:var(--surface);transform:scale(1)}59.5%{background:var(--ink);transform:scale(.93)}
  61.5%{background:var(--ink);transform:scale(1.03)}63.5%,100%{background:var(--ink);transform:scale(1)}}
@keyframes txtA{0%,26%{color:#fff}26.5%,100%{color:var(--ink)}}
@keyframes txtB{0%,26.4%{color:var(--ink)}26.5%,59%{color:#fff}59.5%,100%{color:var(--ink)}}
@keyframes txtC{0%,59.4%{color:var(--ink)}59.5%,100%{color:#fff}}
@keyframes subA{0%,26%{color:rgba(255,255,255,.72)}26.5%,100%{color:var(--muted)}}
@keyframes subB{0%,26.4%{color:var(--muted)}26.5%,59%{color:rgba(255,255,255,.72)}59.5%,100%{color:var(--muted)}}
@keyframes subC{0%,59.4%{color:var(--muted)}59.5%,100%{color:rgba(255,255,255,.72)}}

.mkp-row{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,1.6vw,22px);margin-top:16px;align-items:start}
.mkp-sep{width:1px;background:var(--surface);align-self:stretch}
@media (max-width:560px){.mkp-row{grid-template-columns:1fr}.mkp-sep{display:none}}
.mk-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.mk-slots i{
  padding:10px 0;border-radius:11px;background:var(--surface);display:grid;place-items:center;
  font-style:normal;font-family:var(--display);font-size:13px;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.mk-slots i:nth-child(3){animation:tapSlot 8s ease infinite}
@keyframes tapSlot{0%,67%{background:var(--surface);color:var(--ink-2);transform:scale(1)}
  68%{background:var(--ink);color:#fff;transform:scale(.92)}70%{background:var(--ink);color:#fff;transform:scale(1.04)}
  72%,96%{background:var(--ink);color:#fff;transform:scale(1)}100%{background:var(--surface);color:var(--ink-2);transform:scale(1)}}

.mk-sum{display:flex;flex-direction:column;gap:9px}
.mk-sum li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);list-style:none}
.mk-sum svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mk-sum b{position:relative;display:inline-block;min-width:132px;font-weight:600;color:var(--ink)}
.mk-sum b s{text-decoration:none;opacity:0;white-space:nowrap}
.mk-sum b s+s{position:absolute;left:0;top:0}
.mk-sum b s:nth-of-type(1){animation:sum1 8s linear infinite}
.mk-sum b s:nth-of-type(2){animation:sum2 8s linear infinite}
.mk-sum b s:nth-of-type(3){animation:sum3 8s linear infinite}
@keyframes sum1{0%,26%{opacity:1}26.5%,100%{opacity:0}}
@keyframes sum2{0%,26.4%{opacity:0}26.5%,59%{opacity:1}59.5%,100%{opacity:0}}
@keyframes sum3{0%,59.4%{opacity:0}59.5%,100%{opacity:1}}
.mk-cta{
  margin-top:14px;display:grid;place-items:center;height:44px;border-radius:12px;
  background:var(--ink);color:#fff;font-family:var(--display);font-size:13.5px;font-weight:600;
  opacity:.3;animation:btnOn 8s ease infinite;
}
@keyframes btnOn{0%,67%{opacity:.3;background:var(--ink)}72%,96%{opacity:1;background:var(--blue)}100%{opacity:.3;background:var(--ink)}}

/* ---- 02 · la conversacion, sin marco de telefono ----
   Burbujas sueltas sobre la tarjeta: la paciente a la izquierda en gris, la
   clinica a la derecha en lila. Debajo de cada una, la foto y la hora. */
.bx-2 .bx-art{margin-top:clamp(14px,1.6vw,20px);flex:1;display:flex}
/* la ventana del chat: una tarjeta blanca dentro de la tarjeta gris */
.chat{
  flex:1;width:100%;background:var(--white);border-radius:20px;
  padding:clamp(15px,1.5vw,21px) clamp(14px,1.4vw,19px) clamp(7px,.8vw,10px);
  display:flex;flex-direction:column;gap:3px;justify-content:center;
}
.chat-m{display:flex;flex-direction:column;align-items:flex-start;gap:5px;max-width:88%;opacity:0;animation:burbuja 13s ease infinite}
.chat-m.der{align-self:flex-end;align-items:flex-end}
.chat-m p{
  margin:0;padding:11px 15px;border-radius:16px;font-size:13px;line-height:1.45;color:var(--ink);
  background:var(--surface);border-bottom-left-radius:5px;
}
.chat-m.der p{background:var(--blue-soft);border-bottom-left-radius:16px;border-bottom-right-radius:5px}
.chat-m p em{
  font-style:normal;display:block;font-family:var(--display);font-size:9.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--blue-700);margin-bottom:4px;
}
.chat-pie{display:flex;align-items:center;gap:8px;padding:0 3px 9px}
.chat-m.der .chat-pie{flex-direction:row-reverse}
.chat-pie i{
  width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none;background:var(--wash);
  display:grid;place-items:center;box-shadow:0 0 0 2px var(--wash-2);
}
.chat-pie i img{width:100%;height:100%;object-fit:cover;display:block}
.chat-m.der .chat-pie i{background:var(--white);padding:3px;box-shadow:0 0 0 2px var(--blue-soft)}
.chat-m.der .chat-pie i img{object-fit:contain}
.chat-pie span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.chat-m.dos{animation-delay:1.6s}
.chat-m.tres{animation-delay:3.2s}
.chat-m.cuatro{animation-delay:4.8s}
@keyframes burbuja{
  0%,2%{opacity:0;transform:translateY(9px)}
  7%,92%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(9px)}
}
@media (prefers-reduced-motion:reduce){.chat-m{opacity:1;transform:none;animation:none}}

/* ---- 03 · foto con la lista encima ---- */
.bx-3{padding:0;background:var(--ink)}
.bx-3 .foto{position:absolute;inset:0}
.bx-3 .foto img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;display:block}
.bx-3 .foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(24,26,36,.82) 0%,rgba(24,26,36,.5) 42%,rgba(24,26,36,.28) 100%)}
.bx-3 .capa{flex:1;position:relative;padding:clamp(20px,1.9vw,28px) clamp(20px,1.9vw,28px) clamp(16px,1.5vw,20px);display:flex;flex-direction:column;min-height:360px}
.bx-3 .bx-n{background:rgba(255,255,255,.9);color:var(--blue-700)}
.bx-3 h4{color:#fff}
.bx-3 h4+p{color:rgba(255,255,255,.78)}
/* una baraja de tres tarjetas: la de adelante entra desde abajo, se queda y se
   va; detras asoman las otras dos. Sin barras de avance: las lineas se leian
   como diagrama y era justo lo que sobraba. */
.deck{position:relative;height:118px;margin:auto 0 24px}

.dk{
  position:absolute;inset:0;background:var(--white);border-radius:18px;
  box-shadow:0 18px 40px -26px rgba(20,22,32,.85);padding:13px 16px 14px;
  display:flex;flex-direction:column;
  animation:baraja 13.5s cubic-bezier(.33,0,.18,1) infinite;
}
/* Las tres tarjetas SON el mazo: no hay capas falsas detras. Cada una recorre
   frente -> tercera -> segunda -> frente, y el salto al fondo ocurre en el unico
   instante en que esta invisible. Asi el frente nunca queda vacio, que era el
   parpadeo transparente al cambiar de tarjeta.
   La clave del relevo: la tarjeta que sube termina de acomodarse en el frente
   (opacidad 1, sin transform) en 94.67%, que son exactamente dos tercios de
   ciclo despues del 28% en que la de adelante empieza a irse. O sea que cuando
   la de adelante se disuelve, la siguiente YA esta debajo, entera y en el mismo
   sitio: no hay hueco transparente ni dos tarjetas descuadradas encimadas. */
.dk:nth-of-type(2){animation-delay:-9s}
.dk:nth-of-type(3){animation-delay:-4.5s}
@keyframes baraja{
  0%,28%        {opacity:1;transform:none;z-index:3}
  29.3%         {opacity:0;transform:none;z-index:3}
  29.4%         {opacity:0;transform:translateY(25px) scale(.914);z-index:1}
  33%,60%       {opacity:.34;transform:translateY(25px) scale(.914);z-index:1}
  63.33%,86%    {opacity:.62;transform:translateY(12px) scale(.957);z-index:2}
  94.67%        {opacity:1;transform:none;z-index:2}
  100%          {opacity:1;transform:none;z-index:3}
}

.dk-top{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.dk-top .pt{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.dk-top em{font-style:normal;font-family:var(--display);font-size:12px;font-weight:600;color:var(--ink)}
.dk-top u{margin-left:auto;text-decoration:none;font-family:var(--display);font-size:10.5px;
  font-weight:600;letter-spacing:.05em;color:var(--muted);font-variant-numeric:tabular-nums}
.dk-body{display:flex;align-items:center;gap:13px;flex:1}
.dk-body em{width:38px;height:38px;flex:none;border-radius:12px;background:var(--blue-soft);display:grid;place-items:center}
.dk-body em svg{width:19px;height:19px;fill:none;stroke:var(--blue-700);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dk-body div{min-width:0;flex:1}
.dk-body strong{display:block;font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.dk-body span{display:block;font-size:12.5px;line-height:1.4;color:var(--muted);margin-top:3px}
.dk-body i{font-style:normal;font-family:var(--display);font-size:11px;font-weight:600;color:var(--ink-2);
  background:var(--surface);border-radius:99px;padding:4px 10px;flex:none}

@media (prefers-reduced-motion:reduce){
  .deck{height:auto;display:flex;flex-direction:column;gap:9px}
  .dk{position:static;opacity:1;transform:none;animation:none}
  .dk .pt{animation:none}
}

/* ---- 04 · calendario del mes ---- */
.mk-cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mk-cal-top b{font-family:var(--display);font-size:13.5px;font-weight:600;color:var(--ink)}
.mk-cal-top i{width:26px;height:26px;border-radius:8px;background:var(--surface);display:grid;place-items:center}
.mk-cal-top i svg{width:13px;height:13px;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mk-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mk-cal u{text-decoration:none;font-family:var(--display);font-size:9.5px;font-weight:600;color:var(--muted);text-align:center;padding-bottom:4px}
.mk-cal i{
  position:relative;aspect-ratio:1;border-radius:9px;display:grid;place-items:center;font-style:normal;
  font-family:var(--display);font-size:11.5px;font-weight:600;color:var(--ink-2);
}
.mk-cal i.off{color:transparent}
.mk-cal i.dom{color:#C4C9D6}
.mk-cal i.hoy{background:var(--blue);color:#fff;animation:hoyPulse 3.4s ease infinite}
@keyframes hoyPulse{0%,100%{box-shadow:0 0 0 0 rgba(99,85,240,.35)}55%{box-shadow:0 0 0 7px rgba(99,85,240,0)}}
.mk-cal i.cit::after{content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--blue)}

/* ---- 05 · el paso a la reserva ---- */
.bx-5{background:linear-gradient(150deg,var(--blue) 0%,var(--blue-700) 60%,var(--blue-900) 100%);color:#fff;justify-content:flex-end}
.bx-5 .marca{
  position:absolute;top:clamp(-6px,-.4vw,0px);right:-14px;width:132px;height:132px;
  opacity:.14;fill:none;stroke:#fff;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;
}
.bx-5>*{position:relative}
.bx-5 h4{color:#fff;font-size:clamp(21px,2vw,27px);line-height:1.12}
.bx-5 p{color:rgba(255,255,255,.9);font-size:14px;margin:9px 0 0}
.bx-5 .btn{
  margin-top:clamp(18px,2vw,26px);align-self:flex-start;background:#fff;color:var(--blue-700);
  height:48px;padding:0 12px 0 22px;gap:12px;
}
.bx-5 .btn span{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none}
.bx-5 .btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bx-5 .btn:hover{background:#fff;transform:translateY(-1px)}

@media (prefers-reduced-motion:reduce){
  .mk-days i,.mk-days b,.mk-days u,.mk-days s,.mk-slots i,.mk-sum b s,.mk-cta,
  .mk-cal i.hoy{animation:none}
  .mk-sum b s:not(:first-of-type){display:none}.mk-sum b s{opacity:1}
  .mk-days i:nth-child(4){background:var(--ink)}
  .mk-days i:nth-child(4) b{color:#fff}
  .mk-days i:nth-child(4) u,.mk-days i:nth-child(4) s{color:rgba(255,255,255,.72)}
  .mk-slots i:nth-child(3){background:var(--ink);color:#fff}
  .mk-cta{opacity:1;background:var(--blue)}
  .mkl-body div em{background:var(--blue)}
  .mkl-body div em svg{stroke:#fff}
  .mkl-body div span{color:var(--ink)}
  .mkl-body div i{opacity:1;color:var(--blue-700)}
  .mkl-top .pt{animation:none}
}

/* ---------- casos: filas alternadas, texto y comparador ---------- */
.cases{display:flex;flex-direction:column;gap:clamp(44px,5.5vw,86px);margin-top:clamp(34px,4vw,54px)}
/* columnas iguales: con 1fr 1.12fr el comparador cambiaba de ancho segun el
   lado en el que cayera, y las filas quedaban desparejas */
.cs{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(24px,3vw,56px);background:transparent;
}
.cs:nth-child(odd) .cs-body{order:1}
.cs:nth-child(odd) .cs-media{order:2}
.cs:nth-child(even) .cs-media{order:1}
.cs:nth-child(even) .cs-body{order:2}
@media (max-width:860px){
  .cs{grid-template-columns:1fr;gap:22px}
  .cs .cs-media{order:1}
  .cs .cs-body{order:2}
}

.cs-media{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:22px;background:var(--surface);
  touch-action:pan-y;isolation:isolate;
}
.cs-img{position:absolute;inset:0}
.cs-img img{width:100%;height:100%;display:block;object-fit:cover}
/* la capa "antes" se recorta hasta la posicion del control */
.cs-b{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cs-b::after{
  content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:2px;
  background:#fff;transform:translateX(-1px);
}
.cs-tag{
  position:absolute;bottom:14px;z-index:3;font-family:var(--display);font-size:11px;
  font-weight:600;letter-spacing:.04em;color:#fff;background:rgba(28,30,40,.82);
  border-radius:99px;padding:6px 13px;pointer-events:none;
}
.cs-tag.tb{left:14px}
.cs-tag.ta{right:14px}
.cs-handle{
  position:absolute;top:50%;left:var(--pos);z-index:3;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 6px 20px -6px rgba(28,30,40,.5);pointer-events:none;
}
.cs-handle svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* el control real: un range transparente encima, asi funciona con mouse, dedo y teclado */
.cs-range{
  position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;
}
.cs-range::-webkit-slider-thumb{-webkit-appearance:none;width:48px;height:100%;cursor:ew-resize}
.cs-range::-moz-range-thumb{width:48px;height:100%;border:0;background:transparent;cursor:ew-resize}
.cs-media:has(.cs-range:focus-visible) .cs-handle{box-shadow:0 0 0 3px var(--blue)}

.cs-body{padding:0;max-width:46ch}
.cs:nth-child(odd) .cs-body{justify-self:end}
.cs-meta{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.cs-ico{width:28px;height:28px;color:var(--blue);display:block}
.cs-ico svg{width:100%;height:100%;display:block}
.cs-n{
  font-family:var(--display);font-size:11.5px;font-weight:600;color:var(--blue-700);
  background:var(--blue-soft);border-radius:7px;padding:3px 9px;font-variant-numeric:tabular-nums;
}
.cs h4{
  font-family:var(--display);font-size:clamp(24px,2.7vw,36px);font-weight:600;
  letter-spacing:-.028em;line-height:1.1;margin:0;color:var(--ink);
}
.cs p{font-size:16px;line-height:1.55;color:var(--ink-2);margin:9px 0 0;max-width:46ch}
.cs-go{
  display:inline-flex;align-items:center;gap:8px;margin-top:15px;font-family:var(--display);
  font-size:14.5px;font-weight:600;color:var(--blue-700);
}
.cs-go span{transition:transform .18s}
.cs-go:hover span{transform:translateX(3px)}

/* ---------- equipo ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:820px){.team{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.team{grid-template-columns:1fr}}
.doc{background:var(--surface);border:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s)}
.doc .portrait{aspect-ratio:4/5;background:var(--wash-2);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.doc .portrait img{width:100%;height:100%;object-fit:cover;object-position:52% 6%}
.mono{
  width:88px;height:88px;border-radius:50%;background:var(--wash);color:var(--teal-800);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:30px;
}
.doc .portrait .tag{
  position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.93);border-radius:8px;
  padding:4px 9px;font-family:var(--display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.doc .info{padding:18px 20px 22px}
.doc h4{font-size:19px;font-weight:700}
.doc .esp{color:var(--teal-800);font-size:14.5px;font-weight:600;margin-top:3px}
.doc .cop{font-size:13.5px;color:var(--muted);margin-top:9px;font-variant-numeric:tabular-nums}
.doc .bio{font-size:14.5px;color:var(--ink-2);margin-top:10px;line-height:1.5}

/* ---------- etapas: titular fijo y fotos que suben desde abajo ----------
   Cada foto vive en su propio panel de una pantalla de alto, pegado arriba.
   Los paneles van uno tras otro en el flujo: el siguiente entra desde abajo,
   sube hasta el centro y ahi se queda, tapando al anterior porque va despues
   en el DOM. No hace falta JavaScript: el sticky del navegador hace todo. */
#etapas{padding:0}
.et-pista{
  --fw:clamp(196px,19vw,330px);
  --fh:clamp(250px,23.5vw,408px);
  position:relative;overflow:clip;
  background:var(--surface);
}
.et-panels{position:relative}
.et-panel{position:sticky;top:0;height:100vh;display:grid;place-items:center}
/* sin esta cola el ultimo panel llegaba y se iba en el mismo instante: la
   seccion terminaba sin dejarte ver la ultima foto */
.et-cola{position:relative;height:96vh}
.et-fin{position:absolute;inset:0}
/* forma de sticker: esquinas grandes y desparejas, y cada panel inclinado al
   reves que el anterior. En el relevo se cruzan dos siluetas giradas y ahi
   aparece el borde en capas del reference. */
.et-card{
  margin:0;width:var(--fw);height:var(--fh);
  border-radius:clamp(18px,2.1vw,30px) clamp(20px,2.4vw,34px)
                clamp(18px,2.1vw,30px) clamp(19px,2.3vw,32px);
  overflow:hidden;background:var(--surface);
  box-shadow:0 38px 70px -36px rgba(20,22,32,.5);
}
.et-card{transition:transform .85s cubic-bezier(.22,.9,.28,1)}
.et-panel:nth-child(odd) .et-card{transform:rotate(-2.4deg)}
.et-panel:nth-child(even) .et-card{transform:rotate(2.8deg)}
/* cierre: al llegar al final la ultima foto toma el protagonismo y el
   titular se abre hacia los lados */
.et-pista.fin .et-panel.ultimo .et-card{transform:rotate(2deg) scale(1.62)}
.et-linea h2{transition:opacity .7s ease,transform .85s cubic-bezier(.22,.9,.28,1)}
.et-pista.fin .et-linea h2:first-of-type{opacity:.18;transform:translateX(-11%)}
.et-pista.fin .et-linea h2:last-of-type{opacity:.18;transform:translateX(11%)}
.et-card img{width:100%;height:100%;object-fit:cover;display:block}
/* cada foto tiene su punto de encuadre: en un marco vertical el centro deja
   fuera justo lo que importa */
/* las tres primeras ya vienen recortadas en retrato: van al centro */
.et-panel:nth-child(4) img{object-position:50% 50%}

/* el titular no se mueve: va en su propia capa, tambien pegada arriba */
.et-titular{position:absolute;inset:0;z-index:2;pointer-events:none}
.et-fijo{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.et-linea{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,3.1vw,54px);padding:0 clamp(20px,2.4vw,40px);width:100%;
}
.et-linea h2{
  font-family:var(--display);font-size:clamp(25px,3.1vw,44px);font-weight:600;
  letter-spacing:-.032em;line-height:1.05;color:var(--ink);margin:0;white-space:nowrap;
  flex:1 1 0;min-width:0;
}
.et-linea h2:first-of-type{text-align:right}
.et-linea h2:last-of-type{text-align:left}
.et-linea em{
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.12em;letter-spacing:-.01em;padding-right:.06em;
}
/* hueco del ancho de la foto, para que el titular se abra a los lados */
.et-hueco{flex:none;width:var(--fw)}

@media (max-width:900px){
  .et-linea{flex-direction:column;gap:clamp(14px,3vw,22px);text-align:center}
  .et-linea h2{font-size:clamp(25px,6.6vw,38px);white-space:normal;text-wrap:balance;flex:none;text-align:center!important}
  .et-hueco{width:auto;height:var(--fh)}
}
@media (prefers-reduced-motion:reduce){
  .et-panel{position:static;height:auto;padding:14px 0}
  .et-cola{display:none}
  .et-card,.et-linea h2{transition:none}
  .et-pista.fin .et-panel.ultimo .et-card{transform:rotate(2.8deg)}
  .et-pista.fin .et-linea h2{opacity:1;transform:none}
  .et-titular{position:static;inset:auto}
  .et-fijo{position:static;height:auto;padding:clamp(48px,6vw,84px) 0 0}
  .et-linea{flex-direction:column;gap:18px}
  .et-hueco{display:none}
}

/* ---------- formulario de contacto ----------
   Tarjeta blanca flotando sobre la pagina. Dos ideas para que no parezca un
   formulario de tramite: la etiqueta vive dentro del campo y sube al escribir,
   y las preguntas cerradas son fichas que se tocan, no desplegables. */
#contacto{padding-bottom:clamp(56px,6vw,88px)}
.frm-cab{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:clamp(30px,3.4vw,46px)}
.frm-cab h2{max-width:18ch}
.frm-cab p{color:var(--ink-2);font-size:17px;max-width:48ch;margin:0}

/* sin tarjeta: los campos y las fichas se apoyan directamente en la pagina */
.frm{max-width:880px;margin:0 auto}
.frm fieldset{border:0;margin:0;padding:0;min-width:0}
.frm-bloque + .frm-bloque{margin-top:clamp(22px,2.6vw,34px)}
.frm-tit{
  font-family:var(--display);font-size:14.5px;font-weight:600;color:var(--ink);
  margin:0 0 12px;display:block;padding:0;
}
.frm-par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px)}
@media (max-width:720px){.frm-par{grid-template-columns:1fr}}

/* campo con icono a la izquierda y etiqueta que flota al escribir */
.fld{position:relative;min-width:0}
.fld input,.fld select,.fld textarea{
  width:100%;border:0;background:var(--surface);border-radius:16px;
  font-family:var(--text);font-size:16px;color:var(--ink);
  padding:26px 18px 10px 52px;height:68px;
  appearance:none;-webkit-appearance:none;
  transition:background .16s ease,box-shadow .16s ease;
}
.fld select{cursor:pointer;padding-right:46px;line-height:1.2}
.fld textarea{height:auto;min-height:120px;line-height:1.5;resize:vertical;padding-top:30px}
.fld label{
  position:absolute;left:52px;top:23px;font-size:16px;color:var(--muted);
  pointer-events:none;transform-origin:left top;
  transition:transform .18s cubic-bezier(.3,0,.2,1),color .18s ease;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:0;background:var(--wash-2);box-shadow:0 0 0 2px var(--blue);
}
.fld input:focus + label,.fld input:not(:placeholder-shown) + label,
.fld textarea:focus + label,.fld textarea:not(:placeholder-shown) + label{
  transform:translateY(-13px) scale(.78);color:var(--blue-700);
}
.fld input::placeholder,.fld textarea::placeholder{color:transparent}
/* un select siempre muestra algo, asi que su etiqueta vive arriba desde el inicio */
.fld.sel label{transform:translateY(-13px) scale(.78)}
.fld.sel select:focus ~ label{color:var(--blue-700)}

/* el icono del campo */
.fld > svg{
  position:absolute;left:18px;top:24px;width:20px;height:20px;pointer-events:none;
  fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .16s ease;
}
.fld:focus-within > svg{stroke:var(--blue-700)}
/* la flecha del desplegable */
.fld.sel::after{
  content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;pointer-events:none;
  border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
  transform:translateY(-70%) rotate(45deg);
}

.frm-envio{margin-top:clamp(26px,3vw,38px)}
.frm-btn{
  width:100%;height:62px;border:0;border-radius:99px;cursor:pointer;
  background:var(--ink);color:#fff;font-family:var(--display);font-size:16.5px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;transition:.18s;
}
.frm-btn:hover:not(:disabled){background:#15161E;transform:translateY(-1px)}
.frm-btn:disabled{background:var(--surface);color:var(--muted);cursor:not-allowed;transform:none}
.frm-btn svg{width:18px;height:18px;fill:currentColor}
.frm-nota{margin:14px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.fld label{transition:none}}

/* ---------- faq: lista limpia, sin cajas ----------
   Solo una linea de pelo entre pregunta y pregunta, el signo a la derecha y la
   respuesta en gris debajo. La respuesta abre con grid 0fr -> 1fr para no tener
   que medir alturas. */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,72px);align-items:start}
@media (max-width:880px){.faq-grid{grid-template-columns:1fr;gap:28px}}

.faq-item{border-bottom:1px solid var(--line)}
.faq-p{
  width:100%;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:inherit;
  display:flex;align-items:center;gap:24px;padding:clamp(18px,1.9vw,24px) 4px;
}
.faq-p span{
  flex:1;min-width:0;font-family:var(--text);font-size:clamp(16px,1.35vw,18.5px);font-weight:400;
  line-height:1.35;color:var(--ink);transition:color .2s;
}
.faq-p:hover span{color:var(--blue-700)}
/* el signo: dos trazos, y al abrir se va el vertical */
.faq-mas{position:relative;width:18px;height:18px;flex:none}
.faq-mas::before,.faq-mas::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink);border-radius:1px;
  transition:transform .28s cubic-bezier(.3,0,.15,1),opacity .2s ease;
}
.faq-mas::before{width:17px;height:1.6px;transform:translate(-50%,-50%)}
.faq-mas::after{width:1.6px;height:17px;transform:translate(-50%,-50%)}
.faq-item.on .faq-mas::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.3,0,.15,1)}
.faq-item.on .faq-r{grid-template-rows:1fr}
.faq-r>div{overflow:hidden}
.faq-r p{
  margin:0;padding:0 46px clamp(18px,1.9vw,24px) 4px;
  font-size:15.5px;line-height:1.6;color:var(--muted);max-width:74ch;
}
.faq-p:focus-visible{outline:2.5px solid var(--blue);outline-offset:-3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){.faq-r,.faq-mas::before,.faq-mas::after{transition:none}}

/* ---------- ubicación ---------- */
/* el mapa toma todo el ancho de la pantalla y la ficha flota encima,
   alineada con la columna del contenido */
.mapa{
  position:relative;margin-inline:calc(50% - 50vw + 16px);width:calc(100vw - 32px);
  height:clamp(360px,38vw,500px);overflow:hidden;background:#EDEFF5;border-radius:24px;
}
.mapa .base{position:absolute;inset:0;width:100%;height:100%;display:block}
/* rotulos del plano */
.mp-via{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.16em;fill:#AFB5C6}
.mp-via.mp-fuerte{fill:#9298AB;letter-spacing:.2em}
.mp-lug{font-family:var(--text);font-size:15px;fill:#A2A9BB}

/* la chincheta esta en el centro exacto del plano: con xMidYMid el centro del
   viewBox cae siempre en el centro del contenedor, asi que el punto no se
   despega del dibujo al cambiar el ancho */
.mapa-pin{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2}
.mapa-pin b{
  position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;
  background:rgba(99,85,240,.16);opacity:0;
}
.mapa-pin i{
  position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50% 50% 50% 6px;
  transform:rotate(-45deg) scale(0);transform-origin:center;
  background:var(--blue);display:grid;place-items:center;
  box-shadow:0 14px 30px -12px rgba(38,58,150,.75);
  transition:transform .6s cubic-bezier(.2,.9,.3,1.5) .3s;
}
.mapa-pin i img{width:26px;height:26px;object-fit:contain;transform:rotate(45deg);filter:brightness(0) invert(1)}
#ubicacion.on .mapa-pin i{transform:rotate(-45deg) scale(1)}
#ubicacion.on .mapa-pin b{opacity:1;animation:mapaLatido 2.9s ease-out infinite .9s}
#ubicacion.on .mapa-pin{animation:pinFlota 4.2s ease-in-out infinite 1.1s}
@keyframes pinFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes mapaLatido{0%{transform:scale(.5);opacity:.75}70%,100%{transform:scale(2.5);opacity:0}}

/* la ruta se dibuja sola y un punto la recorre hasta la chincheta */
.mp-ruta{
  fill:none;stroke:#6355F0;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:548;stroke-dashoffset:548;opacity:0;
}
#ubicacion.on .mp-ruta{animation:rutaDibuja 7.5s cubic-bezier(.45,0,.25,1) infinite 1.1s}
@keyframes rutaDibuja{
  0%{stroke-dashoffset:548;opacity:0}
  7%{opacity:.5}
  46%,78%{stroke-dashoffset:0;opacity:.5}
  92%,100%{stroke-dashoffset:0;opacity:0}
}
.mp-movil{opacity:0}
#ubicacion.on .mp-movil{
  offset-path:path("M980 680V340H812V302");offset-rotate:0deg;
  animation:rutaViaja 7.5s cubic-bezier(.45,0,.25,1) infinite 1.1s;
}
@keyframes rutaViaja{
  0%{offset-distance:0%;opacity:0}
  7%{opacity:1}
  46%{offset-distance:100%;opacity:1}
  56%,100%{offset-distance:100%;opacity:0}
}

/* el hilo que une la ficha con el punto */
.mapa-hilo{
  position:absolute;top:50%;right:calc(50% + 36px);width:38px;height:1.6px;z-index:2;
  background:var(--blue);transform:scaleX(0);transform-origin:right center;
  transition:transform .45s cubic-bezier(.3,0,.15,1) .55s;
}
#ubicacion.on .mapa-hilo{transform:scaleX(1)}

/* ficha pegada al punto */
.mapa-ficha{
  position:absolute;z-index:3;top:50%;right:calc(50% + 74px);
  transform:translateY(-50%);opacity:0;
  width:min(348px,calc(50vw - 110px));background:var(--white);border-radius:22px;
  padding:18px 20px 20px;box-shadow:0 34px 70px -30px rgba(14,16,24,.55);
  transition:opacity .6s ease .15s;
}
#ubicacion.on .mapa-ficha{opacity:1}
.mf-top{display:flex;align-items:center;gap:12px}
.mf-logo{
  width:46px;height:46px;border-radius:14px;background:var(--surface);flex:none;
  display:grid;place-items:center;padding:7px;
}
.mf-logo img{width:100%;height:100%;object-fit:contain;display:block}
.mf-top div{min-width:0;flex:1}
.mf-top b{display:block;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.mf-top span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.mf-ir{
  width:34px;height:34px;border-radius:50%;background:var(--surface);flex:none;
  display:grid;place-items:center;color:var(--ink-2);transition:.16s;
}
.mf-ir:hover{background:var(--blue);color:#fff}
.mf-ir svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.mf-datos{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:9px}
.mf-datos li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);line-height:1.35}
.mf-datos svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--blue-700);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mf-datos b{font-weight:600;color:var(--ink)}

.mf-acts{display:flex;align-items:center;gap:9px;margin-top:18px}
footer.site a.mf-btn{color:#fff}
.mf-btn{
  flex:1;height:48px;border-radius:14px;background:var(--ink);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-size:14.5px;font-weight:600;transition:.18s;
}
.mf-btn:hover{background:#15161E}
.mf-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mf-ico{
  width:48px;height:48px;flex:none;border-radius:14px;background:var(--surface);color:var(--ink);
  display:grid;place-items:center;transition:.18s;
}
.mf-ico:hover{background:var(--blue-soft);color:var(--blue-700)}
.mf-ico svg{width:19px;height:19px}

@media (max-width:980px){
  /* la ficha ya no cabe al lado del punto: baja debajo del plano */
  .f-panel .mapa{height:auto;display:flex;flex-direction:column;margin-inline:12px;width:auto;border-radius:16px}
  .mapa .base{position:relative;inset:auto;height:clamp(240px,54vw,330px)}
  .mapa-pin{top:calc(clamp(240px,54vw,330px) / 2)}
  .mapa-hilo{display:none}
  .mapa-ficha{
    position:relative;top:auto;right:auto;width:auto;margin:-30px 12px 12px;
    transform:none;border-radius:20px;opacity:1;
  }
  #ubicacion.on .mapa-ficha{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .mapa-pin i{transform:rotate(-45deg) scale(1)}
  .mapa-pin b{animation:none;opacity:0}
  .mapa-pin{animation:none}
  .mp-ruta{animation:none;stroke-dashoffset:0;opacity:.45}
  .mp-movil{animation:none;opacity:0}
  .mapa-hilo{transform:scaleX(1)}
  .mapa-ficha{opacity:1}
}

/* ---------- footer: claro y sin cajas ----------
   Una sola rejilla de cuatro columnas y dos filas: arriba la marca y los tres
   indices, abajo el credito y los datos de contacto alineados con ellos. */
footer.site{background:var(--ground);color:var(--ink-2);padding:0 0 16px;font-size:15px}
/* el pie va dentro de una placa gris con 24 px de aire a los lados y abajo */
.f-panel{background:var(--surface);border-radius:clamp(22px,2.4vw,32px);margin:0 16px;
  padding:0 0 clamp(30px,3.4vw,52px);overflow:hidden}
/* el mapa entra como cabecera del footer, no como seccion aparte */
.f-mapa{padding:clamp(40px,4.6vw,72px) 0 0}
.f-panel .mapa{margin-inline:clamp(14px,1.7vw,24px);width:auto;
  height:clamp(320px,33vw,440px);border-radius:clamp(16px,1.8vw,22px)}
.f-mapa-t{font-family:var(--display);font-size:clamp(23px,2.5vw,34px);font-weight:600;
  letter-spacing:-.03em;line-height:1.1;color:var(--ink);margin:13px 0 clamp(20px,2.4vw,30px)}
.f-mapa + .wrap .f-grid{padding-top:clamp(46px,5.4vw,86px)}
.f-grid{
  display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;
  column-gap:clamp(24px,3.4vw,56px);row-gap:clamp(52px,6.5vw,96px);
}
@media (max-width:900px){.f-grid{grid-template-columns:1fr 1fr;row-gap:clamp(34px,5vw,52px)}}
@media (max-width:560px){.f-grid{grid-template-columns:1fr;row-gap:34px}}

.f-marca{display:flex;align-items:center;gap:13px}
.f-marca img{height:44px;width:auto;display:block}
.f-redes{display:flex;gap:9px;margin-top:clamp(20px,2.2vw,28px)}
.f-redes a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--white);color:var(--ink);transition:.16s;
}
.f-redes a:first-child{background:var(--ink);color:#fff}
.f-redes a:hover{background:var(--blue-soft);color:var(--blue-700)}
.f-redes a:first-child:hover{background:#15161E;color:#fff}
.f-redes svg{width:17px;height:17px}
.f-claim{
  font-family:var(--display);font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.025em;
  line-height:1.22;color:var(--ink);margin:clamp(24px,2.6vw,34px) 0 0;max-width:19ch;text-wrap:balance;
}
footer.site a.f-cta{color:#fff}
.f-cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:clamp(20px,2.2vw,28px);
  background:var(--ink);color:#fff;border-radius:99px;padding:6px 8px 6px 22px;
  font-family:var(--display);font-size:15px;font-weight:600;transition:.18s;
}
.f-cta:hover{background:#15161E;transform:translateY(-1px)}
.f-cta i{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.f-cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

footer.site h5{
  font-family:var(--text);font-size:15px;font-weight:400;color:var(--muted);
  margin:0 0 clamp(18px,2vw,26px);letter-spacing:0;text-transform:none;
}
footer.site ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
footer.site a{color:var(--ink)}
footer.site li a:hover{color:var(--blue-700)}
.f-dato{font-size:15.5px;line-height:1.5;color:var(--ink);max-width:26ch}
.f-legal{font-size:13.5px;line-height:1.7;color:var(--muted);align-self:end}
.f-legal a{color:var(--muted)}
.f-legal a:hover{color:var(--ink)}
.f-legal p{margin:0}
.f-legal .f-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

/* ---------- barra móvil ---------- */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:none;gap:10px;transform:translateY(110%);transition:transform .25s ease;
}
.mbar.show{transform:translateY(0)}
.mbar .btn{flex:1;padding:13px 10px;min-height:50px;font-size:15.5px}
@media (max-width:820px){.mbar{display:flex}body{padding-bottom:74px}}