:root{
  --papel:#f7f8f9; --papel-dos:#eaedee; --niebla:#c5d1d3;
  --tinta:#434f51; --gris:#61696a;
  --azul:#0c769d; --azul-fuerte:#0a6787; --azul-vivo:#47c4f3;
  --pizarra:#17272b;
  --linea:rgba(67,79,81,.16); --linea-clara:rgba(247,248,249,.2);
  --serif:"Bodoni Moda",Didot,Georgia,serif;
  --sans:"Jost",system-ui,sans-serif;
}
@font-face{font-family:"Bodoni Moda";src:url("fuentes/bodoni.woff2") format("woff2");
  font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("fuentes/bodoni-italic.woff2") format("woff2");
  font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url("fuentes/jost.woff2") format("woff2");
  font-weight:300 500;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);
     font-weight:300;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.env{max-width:1240px;margin:0 auto;padding:0 40px}
.eti{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);font-weight:400;margin:0}
.serif{font-family:var(--serif);font-weight:400}
h1,h2,h3,blockquote{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.enlace-flecha{font-family:var(--serif);font-style:italic;font-size:1.06rem;color:var(--azul);
               text-decoration:none;border-bottom:1px solid var(--azul);padding-bottom:3px}
.pill{display:inline-block;border:1px solid var(--azul);color:var(--azul);padding:9px 20px;
      border-radius:999px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.pill.solida{background:var(--azul);color:#fff}

/* cabecera */
.cab{position:sticky;top:0;z-index:40;background:rgba(247,248,249,.93);
     backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.cab .env{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:15px;padding-bottom:15px}
.cab img{width:172px}
nav{display:flex;gap:28px;font-size:.82rem;letter-spacing:.06em}
nav a{text-decoration:none}
nav a:hover{color:var(--azul)}

/* hero */
.hero{padding:86px 0 78px;position:relative;isolation:isolate}
/* trama de curvas de nivel: el mismo lenguaje que el mapa de presiones, pero abstracta,
   para que el hero no sea un plano liso. Se desvanece hacia la izquierda, donde va el texto */
.hero::before{content:"";position:absolute;inset:-40px 0 0;z-index:-1;
  background:url("curvas.svg") center/cover no-repeat;
  opacity:.42;
  -webkit-mask-image:linear-gradient(100deg,transparent 4%,rgba(0,0,0,.30) 32%,#000 66%),
                     linear-gradient(transparent 0%,#000 16%,#000 70%,transparent 100%);
  mask-image:linear-gradient(100deg,transparent 4%,rgba(0,0,0,.30) 32%,#000 66%),
             linear-gradient(transparent 0%,#000 16%,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hero .env{display:grid;grid-template-columns:.96fr 1.04fr;gap:52px;align-items:center;position:relative}
.hero h1{font-size:clamp(2.6rem,4.35vw,3.95rem);line-height:1.03;margin:16px 0 26px;color:var(--tinta)}
.hero p.entrada{font-size:1.02rem;line-height:1.72;color:var(--gris);max-width:40ch;margin:0 0 32px}
.acciones{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.tel{font-size:.86rem;letter-spacing:.08em;color:var(--gris);text-decoration:none}
.collage{position:relative;height:660px}
.collage figure{margin:0;position:absolute;overflow:hidden}
.c-grande{width:68%;right:0;top:0}
.c-grande img{aspect-ratio:3/4;object-fit:cover}
.c-med{width:37%;left:8%;bottom:14px;aspect-ratio:1/1;z-index:2}
.c-peq{width:24%;left:0;top:34px;aspect-ratio:3/4}
.collage img{width:100%;height:100%;object-fit:cover}
.pie-foto{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
          margin-top:9px;text-align:right}

/* marquesina */
.cinta{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
       background:#fff;overflow:hidden;padding:15px 0}
.cinta ul{display:flex;gap:44px;list-style:none;margin:0;padding:0;white-space:nowrap;
          animation:correr 40s linear infinite;width:max-content}
.cinta li{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
          display:flex;align-items:center;gap:44px}
.cinta li svg{width:26px;color:var(--azul-vivo)}
.cinta:hover ul{animation-play-state:paused}
@keyframes correr{to{transform:translateX(-50%)}}

/* sintomas */
.sintomas{padding:104px 0 96px}
.sintomas .env{max-width:840px;position:relative}
.vertical{position:absolute;left:-14px;top:74px;writing-mode:vertical-rl;transform:rotate(180deg);
          font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.sintomas h2{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.18;margin:14px 0 40px;max-width:22ch}
.lista-sintomas{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.lista-sintomas a{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
                  padding:20px 2px;text-decoration:none;font-size:1.06rem}
.lista-sintomas a:hover{color:var(--azul)}
.lista-sintomas .ser{color:var(--azul);font-size:.74rem;letter-spacing:.16em;
                     text-transform:uppercase;white-space:nowrap}

/* servicios */
.servicios{padding:96px 0 104px;background:var(--papel-dos)}
.servicios .cabsec{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:42px}
.servicios h2{font-size:clamp(1.9rem,3.1vw,2.6rem);line-height:1.16;margin:12px 0 0;max-width:16ch}
.circ{width:52px;height:52px;border:1px solid var(--tinta);border-radius:50%;display:grid;
      place-items:center;font-size:1.1rem;flex:0 0 auto;background:none;color:var(--tinta);cursor:pointer}
/* familias de servicio: filas alternas, foto a un lado */
.familia{display:grid;grid-template-columns:.84fr 1.16fr;gap:52px;align-items:stretch;
         padding:56px 0;border-top:1px solid var(--linea)}
.familia:first-of-type{border-top:0;padding-top:20px}
.familia:nth-of-type(even) figure{order:2}
/* la foto se ajusta al alto del texto: el bloque de Podología tiene doce servicios
   y el de Cirugía tres, así que un ratio fijo descuadraba las filas */
.familia figure{margin:0;overflow:hidden;min-height:330px}
.familia figure img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.familia:hover figure img{transform:scale(1.035)}
.num{font-size:.68rem;letter-spacing:.2em;color:var(--gris);margin:0}
.familia h3{font-size:clamp(1.6rem,2.5vw,2.15rem);margin:8px 0 14px}
.familia .intro{font-size:1.02rem;line-height:1.7;color:var(--gris);margin:0 0 30px;max-width:46ch}
.lista-serv{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.lista-serv.dos-col{grid-template-columns:1fr 1fr;gap:18px 34px}
.lista-serv li{border-top:1px solid var(--linea);padding-top:12px}
.lista-serv b{display:block;font-weight:400;font-size:.97rem;color:var(--tinta);margin-bottom:3px}
.lista-serv span{display:block;font-size:.86rem;line-height:1.55;color:var(--gris)}

/* cita */
.cita{padding:112px 0 96px;text-align:center}
.cita .env{max-width:930px}
.cita blockquote{font-size:clamp(1.55rem,2.85vw,2.35rem);line-height:1.3;margin:18px 0 0}
.cita .firma{margin-top:30px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.cita figure{margin:44px auto 0;width:280px}
.cita figure img{aspect-ratio:4/5;object-fit:cover;width:100%}
.credenciales{display:flex;margin-top:46px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.credenciales div{flex:1;padding:22px 18px;border-right:1px solid var(--linea)}
.credenciales div:last-child{border-right:0}
.credenciales b{display:block;font-family:var(--serif);font-weight:400;font-size:1.7rem;margin-bottom:5px;color:var(--azul)}
.credenciales small{font-size:.76rem;line-height:1.5;color:var(--gris)}

/* la cita en oscuro: es el bloque de confianza y al quitar el de bikefitting
   era lo único que podía sostener el corte de tono a mitad de página */
.cita.oscura{background:var(--pizarra);color:var(--papel);position:relative;overflow:hidden}
.cita.oscura .eti{color:var(--niebla)}
.cita.oscura blockquote{color:var(--papel)}
.cita.oscura .firma{color:var(--niebla)}
.cita.oscura .credenciales{border-color:rgba(247,248,249,.18)}
.cita.oscura .credenciales div{border-color:rgba(247,248,249,.18)}
.cita.oscura .credenciales b{color:var(--azul-vivo)}
.cita.oscura .credenciales small{color:var(--niebla)}
.marca-agua{position:absolute;right:3%;top:12%;width:230px;color:var(--azul-vivo);opacity:.16;pointer-events:none}

/* primera visita */
.visita{padding:100px 0;background:var(--papel-dos)}
.visita .env{max-width:900px}
.visita h2{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.18;margin:14px 0 46px;max-width:20ch}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;list-style:none;margin:0;padding:0}
.pasos li{border-top:1px solid var(--linea);padding-top:20px}
.pasos svg{width:34px;color:var(--azul-vivo);margin-bottom:12px}
.pasos h3{font-size:1.14rem;margin:0 0 8px}
.pasos p{font-size:.93rem;line-height:1.65;color:var(--gris);margin:0}

/* preguntas */
.preguntas{padding:100px 0}
.preguntas .env{max-width:840px}
.preguntas h2{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.18;margin:14px 0 36px}
.faq{border-top:1px solid var(--linea)}
.faq .item{border-bottom:1px solid var(--linea)}
.faq button{width:100%;background:none;border:0;padding:22px 2px;display:flex;justify-content:space-between;
            align-items:center;gap:20px;text-align:left;font-family:var(--serif);font-size:1.12rem;
            color:var(--tinta);cursor:pointer}
.faq button:hover{color:var(--azul)}
.faq .signo{font-family:var(--sans);font-size:1.2rem;color:var(--azul);flex:0 0 auto;transition:transform .3s}
.faq button[aria-expanded="true"] .signo{transform:rotate(45deg)}
.faq .cuerpo{overflow:hidden;height:0}
.faq .cuerpo p{margin:0 0 22px;font-size:.98rem;line-height:1.7;color:var(--gris);max-width:62ch}

/* sedes */
.sedes{padding:100px 0 110px;position:relative;overflow:hidden}
.sedes .fondo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:360px;
              color:var(--azul-vivo);opacity:.12;pointer-events:none}
.sedes .env{position:relative}
.sedes h2{font-size:clamp(1.9rem,3.1vw,2.6rem);line-height:1.16;margin:14px 0 46px}
.dos-sedes{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.una-sede{display:grid;place-items:center;text-align:center}
.sede h3{font-size:1.3rem;margin:0 0 14px}
.sede p{margin:0 0 6px;font-size:1rem;line-height:1.7;color:var(--gris)}
.sede a{color:var(--azul);text-decoration:none;border-bottom:1px solid transparent}
.sede a:hover{border-bottom-color:var(--azul)}
.cierre{margin-top:56px;padding-top:40px;border-top:1px solid var(--linea);text-align:center}
.cierre p{color:var(--gris);margin:0 0 22px}

/* pie */
.pie{background:var(--pizarra);color:var(--niebla);padding:64px 0 34px;font-size:.9rem}
.pie img{width:190px;margin-bottom:26px}
.pie .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.pie h4,.pie .pie-titulo{font-family:var(--sans);font-weight:400;font-size:.68rem;letter-spacing:.24em;
        text-transform:uppercase;color:var(--papel);margin:0 0 14px}
.pie ul{list-style:none;margin:0;padding:0;line-height:2}
.pie a{text-decoration:none}
.pie a:hover{color:var(--azul-vivo)}
.legal{margin-top:46px;padding-top:20px;border-top:1px solid var(--linea-clara);
       display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.76rem;color:#8c9a9d}

/* barra movil */
.barra{display:none}

@media (max-width:900px){
  .env{padding:0 22px}
  .hero .env,.pasos,.dos-sedes,.pie .cols,.familia,.lista-serv.dos-col{grid-template-columns:1fr}
  .una-sede{text-align:left;place-items:start}
  .familia{gap:26px;padding:40px 0}
  .familia:nth-of-type(even) figure{order:0}
  .familia figure{min-height:0}
  .familia figure img{aspect-ratio:3/2}
  .hero{padding:44px 0 40px}
  .collage{height:440px;margin-top:22px}
  .hero::before{opacity:.35;inset:0}
  .servicios .cabsec{align-items:flex-start;flex-direction:column}
  .vertical,nav{display:none}
  .cita figure{width:210px}
  .credenciales{flex-direction:column}
  .credenciales div{border-right:0;border-bottom:1px solid var(--linea)}
  .pasos{gap:26px}
  .sedes{padding-bottom:80px}
  .pie{padding-bottom:104px}
  .barra{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:50;
         border-top:1px solid var(--linea);background:rgba(247,248,249,.97);backdrop-filter:blur(8px)}
  .barra a{padding:15px 10px;text-align:center;text-decoration:none;font-size:.8rem;
           letter-spacing:.1em;text-transform:uppercase;color:var(--azul)}
  .barra a+a{border-left:1px solid var(--linea);background:var(--azul);color:#fff}
}
@media (prefers-reduced-motion:reduce){
  .cinta ul{animation:none}
  html{scroll-behavior:auto}
}

/* ---------------------------------------------------------------
   Movimiento. Dos capas:
   - reveal por IntersectionObserver (clase .dentro), funciona en todo
   - parallax y dibujo con líneas de tiempo de scroll, donde haya soporte
   Todo se apaga con prefers-reduced-motion.
   --------------------------------------------------------------- */

.rev{opacity:0;transform:translateY(20px);
     transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
     transition-delay:var(--retardo,0ms)}
.rev.dentro{opacity:1;transform:none}
.is-static .rev{opacity:1;transform:none}

/* la regla de cada síntoma se extiende al entrar */
.lista-sintomas li{position:relative}
/* la línea no es un borde: se dibuja al entrar y se tiñe al pasar por encima */
.lista-sintomas li::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--linea);
  transition:width 1s cubic-bezier(.22,1,.36,1) var(--retardo,0ms),background .35s}
.lista-sintomas li.dentro::after{width:100%}
.lista-sintomas li:hover::after{background:var(--azul)}
.lista-sintomas a{transition:padding-left .35s cubic-bezier(.22,1,.36,1),color .35s}
.lista-sintomas a:hover,.lista-sintomas a:focus-visible{padding-left:26px}
.lista-sintomas a::before{content:"→";position:absolute;left:0;opacity:0;color:var(--azul);
  transform:translateX(-8px);transition:opacity .35s,transform .35s}
.lista-sintomas a:hover::before,.lista-sintomas a:focus-visible::before{opacity:1;transform:none}


/* enlaces con flecha y píldoras */
.enlace-flecha{display:inline-block;transition:color .3s,border-color .3s}
.enlace-flecha .fl{display:inline-block;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.enlace-flecha:hover .fl{transform:translateX(7px)}
.pill{position:relative;overflow:hidden;isolation:isolate;transition:color .4s,transform .3s}
.pill::after{content:"";position:absolute;inset:0;background:var(--azul);transform:translateY(101%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);z-index:-1}
.pill:hover{color:#fff}
.pill:hover::after{transform:none}
.pill.solida::after{background:var(--pizarra)}
.circ{transition:background .4s,color .4s,border-color .4s,transform .4s}
.circ:hover{background:var(--azul);border-color:var(--azul);color:#fff;transform:translateX(3px)}

/* menú: la regla crece desde la izquierda */
nav a{position:relative;transition:color .3s}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--azul);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)}
nav a:hover::after,nav a:focus-visible::after{transform:none}

/* cabecera que se compacta al bajar */
.cab{transition:padding .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.cab .env{transition:padding .45s cubic-bezier(.22,1,.36,1)}
.cab img{transition:width .45s cubic-bezier(.22,1,.36,1)}
.cab.encogida .env{padding-top:9px;padding-bottom:9px}
.cab.encogida img{width:138px}
.cab.encogida{box-shadow:0 1px 18px rgba(23,39,43,.07)}

/* el collage entra escalonado y, con soporte, se mueve a distinta velocidad */
.collage figure{opacity:0;transform:translateY(26px);
  transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--retardo,0ms)}
.collage.dentro figure{opacity:1;transform:none}

@supports (animation-timeline: view()) and (animation-range: 0% 100%) {
  @media (prefers-reduced-motion: no-preference){
    .hero .collage{view-timeline-name:--collage;view-timeline-axis:block}
    .c-grande{animation:flota-8 linear both;animation-timeline:--collage;animation-range:entry 30% exit 100%}
    .c-med{animation:flota-14 linear both;animation-timeline:--collage;animation-range:entry 30% exit 100%}
    .c-peq{animation:flota-3 linear both;animation-timeline:--collage;animation-range:entry 30% exit 100%}
    @keyframes flota-8{to{transform:translateY(-38px)}}
    @keyframes flota-14{to{transform:translateY(-66px)}}
    @keyframes flota-3{to{transform:translateY(-14px)}}


    /* la marquesina reacciona a la dirección del scroll */
    .cinta ul{animation-timeline:auto}
  }
}

/* trazos que se dibujan al entrar */
.dibujo polyline{stroke-dasharray:var(--largo);stroke-dashoffset:var(--largo);
  transition:stroke-dashoffset 2.6s cubic-bezier(.33,1,.68,1) var(--retardo,0ms)}
.dibujo.dentro polyline{stroke-dashoffset:0}

/* las cifras de credenciales */
.credenciales b{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .rev,.collage figure{opacity:1;transform:none;transition:none}
  .dibujo polyline{stroke-dashoffset:0;transition:none}
  .lista-sintomas li::after{width:100%;transition:none}
  .familia figure img,.enlace-flecha .fl,.pill::after{transition:none}
}


/* ---------------------------------------------------------------
   Páginas interiores. Reutilizan el sistema de la home.
   --------------------------------------------------------------- */
.migas{font-size:.72rem;letter-spacing:.08em;color:var(--gris);margin:0 0 22px}
.migas a{text-decoration:none;color:var(--gris)}
.migas a:hover{color:var(--azul)}
.migas span{margin:0 8px;opacity:.6}
.cab-int{padding:64px 0 56px;position:relative;isolation:isolate}
.cab-int::before{content:"";position:absolute;inset:-40px 0 0;z-index:-1;
  background:url("/curvas.svg") center/cover no-repeat;opacity:.30;
  -webkit-mask-image:linear-gradient(100deg,transparent 4%,rgba(0,0,0,.30) 32%,#000 66%),linear-gradient(transparent 0%,#000 16%,#000 70%,transparent 100%);
  mask-image:linear-gradient(100deg,transparent 4%,rgba(0,0,0,.30) 32%,#000 66%),linear-gradient(transparent 0%,#000 16%,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.cab-int .env{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.cab-int h1{font-size:clamp(2.2rem,3.9vw,3.4rem);line-height:1.06;margin:14px 0 22px}
.cab-int .entrada{font-size:1.05rem;line-height:1.72;color:var(--gris);max-width:44ch;margin:0 0 30px}
.cab-int figure{margin:0;overflow:hidden}
.cab-int figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cab-int.corta .env{grid-template-columns:1fr;max-width:840px}
.cuerpo-int{padding:72px 0 64px}
.cuerpo-int .env{max-width:840px}
.cuerpo-int h2{font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:1.18;margin:0 0 20px}
.cuerpo-int p{font-size:1.02rem;line-height:1.75;color:var(--tinta);margin:0 0 18px;max-width:66ch}
.cuerpo-int .bloque{padding:40px 0;border-top:1px solid var(--linea)}
.cuerpo-int .bloque:first-child{border-top:0;padding-top:0}
.lista-cuando{list-style:none;margin:0;padding:0}
.lista-cuando li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--linea);font-size:1rem;line-height:1.6}
.lista-cuando li::before{content:"";position:absolute;left:0;top:19px;width:14px;height:1px;background:var(--azul)}
.pasos-int{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:paso}
.pasos-int li{border-top:1px solid var(--linea);padding-top:16px;counter-increment:paso}
.pasos-int li::before{content:"0" counter(paso);display:block;font-size:.68rem;letter-spacing:.2em;color:var(--azul);margin-bottom:8px}
.pasos-int h3{font-size:1.1rem;margin:0 0 8px}
.pasos-int p{font-size:.92rem;line-height:1.62;color:var(--gris);margin:0}
.relacionados{padding:72px 0;background:var(--papel-dos)}
.relacionados h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:12px 0 30px}
.rejilla-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.rejilla-rel a{display:block;text-decoration:none;border-top:1px solid var(--tinta);padding:16px 0 4px;transition:color .3s}
.rejilla-rel a:hover{color:var(--azul)}
.rejilla-rel .num{margin-bottom:6px}
.rejilla-rel h3{font-size:1.2rem;margin:0 0 6px}
.rejilla-rel p{font-size:.88rem;line-height:1.55;color:var(--gris);margin:0}
.cta-int{padding:80px 0;text-align:center}
.cta-int .env{max-width:720px}
.cta-int h2{font-size:clamp(1.7rem,3vw,2.5rem);margin:12px 0 18px}
.cta-int p{color:var(--gris);margin:0 0 26px;line-height:1.7}
.cta-int .acciones{justify-content:center}
/* índice de servicios */
.indice-fam{padding:56px 0;border-top:1px solid var(--linea)}
.indice-fam:first-of-type{border-top:0}
.indice-fam .env{display:grid;grid-template-columns:.7fr 1.3fr;gap:52px;align-items:start}
.indice-fam h2{font-size:clamp(1.7rem,2.8vw,2.3rem);margin:6px 0 12px}
.indice-fam .resumen{color:var(--gris);line-height:1.7;margin:0}
.indice-fam figure{margin:22px 0 0;overflow:hidden}
.indice-fam figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.lista-trat{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.lista-trat a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:16px 2px;
  border-bottom:1px solid var(--linea);text-decoration:none;transition:padding-left .35s cubic-bezier(.22,1,.36,1),color .3s}
.lista-trat a:hover{padding-left:12px;color:var(--azul)}
.lista-trat b{font-weight:400;font-family:var(--serif);font-size:1.12rem}
.lista-trat span{font-size:.86rem;color:var(--gris);text-align:right;max-width:34ch}
/* sobre nosotros */
.equipo{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:10px}
.persona figure{margin:0 0 16px;overflow:hidden;background:var(--papel-dos)}
.persona figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.persona .vacia{aspect-ratio:4/5;display:grid;place-items:center;color:var(--gris);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.persona h3{font-size:1.35rem;margin:0 0 4px}
.persona .rol{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--azul);margin:0 0 12px}
.persona p{font-size:.96rem;line-height:1.68;color:var(--gris);margin:0 0 10px}
.galeria{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px;margin-top:8px}
.galeria figure{margin:0;overflow:hidden}
.galeria img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.galeria figure:first-child img{aspect-ratio:4/3}
/* contacto */
.contacto-int .env{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start;max-width:1240px}
.datos h2{font-size:1.5rem;margin:0 0 14px}
.datos p{margin:0 0 6px;line-height:1.7;color:var(--gris)}
.datos a{color:var(--azul);text-decoration:none}
.datos .grande{font-family:var(--serif);font-size:1.7rem;color:var(--tinta);margin:6px 0 18px;display:block}
.mapa{margin:26px 0 0;border:1px solid var(--linea);aspect-ratio:4/3;overflow:hidden;background:var(--papel-dos)}
.mapa iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.35) contrast(.95)}
.form{background:#fff;border:1px solid var(--linea);padding:34px 32px 30px}
.form h2{font-size:1.5rem;margin:0 0 6px}
.form .nota{font-size:.9rem;color:var(--gris);margin:0 0 22px;line-height:1.6}
.form label{display:block;margin-bottom:16px}
.form label span{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;border:1px solid var(--linea);background:var(--papel);
  padding:12px 14px;font:inherit;font-size:1rem;color:var(--tinta);border-radius:2px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul)}
.form textarea{min-height:120px;resize:vertical}
.form .dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .acepta{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--gris);line-height:1.5;margin:6px 0 22px}
.form .acepta input{width:auto;margin-top:3px}
.form .acepta a{color:var(--azul)}
.form button{border:0;cursor:pointer;font:inherit}
.form .aviso-error{background:#fbeeee;border:1px solid #e3b4b4;color:#7a2e2e;padding:12px 14px;font-size:.9rem;margin:0 0 20px;border-radius:2px}
.form .aviso-error[hidden]{display:none}
.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* gracias */
.gracias{min-height:70vh;display:grid;place-items:center;text-align:center;padding:80px 0}
.gracias .env{max-width:640px}
.gracias h1{font-size:clamp(2rem,4vw,3.2rem);margin:16px 0 18px}
.gracias p{color:var(--gris);line-height:1.75;margin:0 0 14px}
.gracias .huella{width:120px;color:var(--azul-vivo);margin:0 auto 22px}
@media (max-width:900px){
  .cab-int .env,.pasos-int,.rejilla-rel,.indice-fam .env,.equipo,.contacto-int .env,.form .dos{grid-template-columns:1fr}
  .galeria{grid-template-columns:1fr 1fr}
  .cab-int{padding:40px 0 36px}
  .cab-int figure img{aspect-ratio:4/3}
  .form{padding:26px 20px}
  .lista-trat a{flex-direction:column;align-items:flex-start;gap:4px}
  .lista-trat span{text-align:left;max-width:none}
}


/* ---------------------------------------------------------------
   Menú: desplegable de servicios y menú móvil
   --------------------------------------------------------------- */
.hamb{display:none}
.solo-movil{display:none}
.menu-serv{display:flex;align-items:center;gap:6px}
.abrir-serv{background:none;border:0;padding:4px;color:var(--gris);cursor:pointer;display:grid;place-items:center;
  transition:transform .35s cubic-bezier(.22,1,.36,1),color .3s}
.abrir-serv:hover,.menu-serv:hover .abrir-serv{color:var(--azul)}
.abrir-serv[aria-expanded="true"]{transform:rotate(180deg);color:var(--azul)}
/* el panel cuelga de la cabecera entera, a todo el ancho */
.desplegable{position:absolute;left:0;right:0;top:100%;z-index:39;background:var(--papel);
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  box-shadow:0 18px 40px rgba(23,39,43,.08);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1),visibility 0s .3s}
.menu-serv:hover .desplegable,.menu-serv:focus-within .desplegable,.menu-serv.abierto .desplegable{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}
.desplegable .cols-serv{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;column-gap:36px;row-gap:24px;padding-top:34px;padding-bottom:30px}
.col-serv .fam{display:block;font-family:var(--serif);font-size:1.22rem;color:var(--tinta);text-decoration:none;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--tinta);letter-spacing:0}
.col-serv .fam .num{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;color:var(--gris);margin-bottom:4px}
.col-serv .fam:hover{color:var(--azul)}
.col-serv ul{list-style:none;margin:0;padding:0;columns:1}
.col-serv li{break-inside:avoid}
.col-serv li a{display:block;padding:5px 0;font-size:.86rem;letter-spacing:.01em;color:var(--tinta);text-decoration:none;
  transition:padding-left .3s cubic-bezier(.22,1,.36,1),color .3s}
.col-serv li a:hover{color:var(--azul);padding-left:8px}
.col-serv:nth-child(2) ul{columns:2;column-gap:22px}
.todos{grid-column:1 / -1;grid-row:2;justify-self:start;margin-top:2px;font-family:var(--serif);font-style:italic;font-size:1.02rem;
  color:var(--azul);text-decoration:none;border-bottom:1px solid var(--azul);padding-bottom:2px}
.todos .fl{display:inline-block;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.todos:hover .fl{transform:translateX(7px)}
nav a[aria-current="page"]{color:var(--azul)}

@media (max-width:900px){
  nav{display:none}
  .solo-escritorio{display:none}
  .hamb{display:grid;gap:5px;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
  .hamb span{display:block;width:24px;height:1.5px;background:var(--tinta);transition:transform .35s,opacity .3s}
  .cab.abierta .hamb span:first-child{transform:translateY(6.5px) rotate(45deg)}
  .cab.abierta .hamb span:last-child{transform:translateY(-6.5px) rotate(-45deg)}
  .cab.abierta nav{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;background:var(--papel);border-top:1px solid var(--linea);
    border-bottom:1px solid var(--linea);padding:6px 22px 22px;max-height:calc(100vh - 70px);overflow:auto;z-index:39}
  .cab.abierta nav>a,.cab.abierta .menu-serv>a{display:block;padding:14px 0;font-size:1rem;border-bottom:1px solid var(--linea)}
  .cab.abierta nav>a::after{display:none}
  .menu-serv{display:block;position:static}
  .menu-serv>a{display:inline-block}
  .abrir-serv{position:absolute;right:22px;margin-top:12px}
  .desplegable{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    display:none;background:transparent}
  .menu-serv.abierto .desplegable{display:block}
  .desplegable .cols-serv{grid-template-columns:1fr;gap:18px;padding:6px 0 14px}
  .col-serv:nth-child(2) ul{columns:1}
  .col-serv .fam{font-size:1.05rem}
  .col-serv li a{font-size:.92rem;padding:7px 0}
  .todos{grid-row:auto;order:9;margin:4px 0 6px}
  .solo-movil{display:inline-block;align-self:flex-start;margin-top:18px}
  .cab.abierta{box-shadow:0 1px 18px rgba(23,39,43,.07)}
}
@media (prefers-reduced-motion:reduce){
  .desplegable,.abrir-serv,.hamb span{transition:none}
}


/* --- páginas legales --- */
.pag-legal .bloque p{max-width:74ch}
.pag-legal .lista-cuando li{padding-left:22px;font-size:.98rem}
.pag-legal .lista-cuando li::before{top:17px;width:10px}
.pag-legal .fecha{margin-top:34px;padding-top:20px;border-top:1px solid var(--linea);
  font-size:.84rem;color:var(--gris)}
.pie .legales a{text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.pie .legales a:hover{color:var(--azul-vivo);border-bottom-color:var(--azul-vivo)}

/* --- mapa que solo carga si lo pide el visitante: sin cookies de terceros ni banner --- */
.mapa{position:relative;display:grid;place-items:center}
.mapa .ver-mapa{width:100%;height:100%;display:grid;place-items:center;gap:8px;padding:28px;
  background:var(--papel-dos);border:0;cursor:pointer;font:inherit;color:var(--tinta);text-align:center;
  transition:background .3s}
.mapa .ver-mapa:hover{background:#e2e7e8}
.ver-mapa-t{font-family:var(--serif);font-size:1.15rem}
.ver-mapa-n{font-size:.78rem;line-height:1.5;color:var(--gris);max-width:30ch}
.como-llegar{margin:12px 0 0;font-size:.9rem}
.como-llegar a{color:var(--azul);text-decoration:none;border-bottom:1px solid var(--azul);padding-bottom:2px}
.como-llegar .fl{display:inline-block;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.como-llegar a:hover .fl{transform:translateX(6px)}


/* --- consentimiento del formulario, en capas como pide la AEPD --- */
.info-basica{border:1px solid var(--linea);background:var(--papel);margin:4px 0 20px}
.info-basica summary{padding:12px 14px;cursor:pointer;font-size:.82rem;letter-spacing:.02em;color:var(--azul);list-style:none}
.info-basica summary::-webkit-details-marker{display:none}
.info-basica summary::before{content:"+";display:inline-block;width:14px;color:var(--azul)}
.info-basica[open] summary::before{content:"–"}
.info-basica summary:hover{background:var(--papel-dos)}
.info-basica dl{margin:0;padding:2px 14px 14px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;
  font-size:.82rem;line-height:1.55}
.info-basica dt{font-weight:400;color:var(--tinta);letter-spacing:.04em}
.info-basica dd{margin:0;color:var(--gris)}
.info-basica a{color:var(--azul)}
.form .acepta{margin:0 0 14px}
/* el texto del consentimiento tiene que leerse: aquí no vale el estilo de etiqueta
   de campo, en versalita y espaciado, que hereda de .form label span */
.form .acepta span{display:block;font-size:.88rem;line-height:1.55;letter-spacing:0;
  text-transform:none;color:var(--gris);margin-bottom:0}
.marca-obl{display:inline-block;margin-left:4px;font-weight:400;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul-fuerte);white-space:nowrap}
.marca-opc{color:var(--gris)}
#acepta-salud.exigido .marca-opc{color:var(--azul-fuerte)}
.nota-retirar{font-size:.8rem;line-height:1.55;color:var(--gris);margin:2px 0 20px}
.nota-retirar a{color:var(--azul)}
@media (max-width:900px){ .info-basica dl{grid-template-columns:1fr;gap:2px} .info-basica dt{margin-top:8px} }