/* =========================================================================
   Spa Business — hoja de estilo única
   ========================================================================= */

:root{
  --verde:#0f5151;
  --verde-osc:#0a3b3b;
  --verde-claro:#e8f2f1;
  --oro:#c9a227;
  --tinta:#1c2426;
  --gris:#5d6b6d;
  --linea:#dde5e5;
  --fondo:#fff;
  --fondo-alt:#f6faf9;
  --radio:10px;
  --sombra:0 2px 14px rgba(15,81,81,.09);
  --sombra-alta:0 10px 30px rgba(15,81,81,.16);
  --ancho:1180px;
  --tipo:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--tipo);color:var(--tinta);background:var(--fondo);
  font-size:17px;line-height:1.65;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--verde-osc)}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,4.2vw,2.7rem)}
h2{font-size:clamp(1.4rem,2.8vw,1.95rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}

.contenedor{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.contenedor--txt{max-width:820px}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-9999px;background:var(--verde);color:#fff;padding:.6rem 1rem;z-index:99}
.saltar:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--oro);outline-offset:2px}

/* ------------------------------------------------------------- botones */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  padding:.72rem 1.3rem;border-radius:var(--radio);font-weight:600;font-size:.95rem;
  text-decoration:none;border:2px solid transparent;transition:.18s ease;
}
.btn--wa{background:var(--verde);color:#fff}
.btn--wa:hover{background:var(--verde-osc);color:#fff}
.btn--linea{border-color:var(--verde);color:var(--verde);background:transparent}
.btn--linea:hover{background:var(--verde-claro);color:var(--verde-osc)}
.btn--claro{background:#fff;color:var(--verde)}
.btn--claro:hover{background:var(--verde-claro)}
.ico{width:1.1em;height:1.1em;fill:currentColor;flex:none}

/* ----------------------------------------------------------- cabecera */
.cab{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--linea)}
.cab__barra{background:var(--verde);color:#fff;font-size:.78rem}
.cab__barra-int{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:34px;flex-wrap:wrap}
.cab__dato{opacity:.85}
.cab__ciudades{display:flex;gap:.75rem;align-items:center}
.cab__ciudades-et{opacity:.7}
.cab__ciudades a{color:#fff;text-decoration:none;opacity:.8}
.cab__ciudades a:hover{opacity:1;text-decoration:underline}
.cab__ciudades a[aria-current]{opacity:1;font-weight:600;border-bottom:2px solid var(--oro)}

.cab__int{display:flex;align-items:center;gap:1.25rem;padding:.7rem 0}
.logo{display:flex;flex-direction:column;text-decoration:none;line-height:1.05;flex:none}
.logo__marca{font-weight:700;font-size:1.18rem;letter-spacing:.14em;color:var(--verde)}
.logo__sub{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}

.nav{margin-left:auto}
.nav__lista{display:flex;gap:.25rem;list-style:none;margin:0;padding:0;align-items:center}
.nav__item{position:relative}
.nav__enlace{
  display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .7rem;border-radius:8px;
  font-size:.92rem;font-weight:600;color:var(--tinta);text-decoration:none;
  background:none;border:0;font-family:inherit;cursor:pointer;
}
.nav__enlace:hover{background:var(--verde-claro);color:var(--verde)}
.nav__flecha{width:.4rem;height:.4rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.nav__sub{
  position:absolute;left:0;top:calc(100% + .35rem);min-width:270px;background:#fff;
  border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra-alta);
  list-style:none;margin:0;padding:.4rem;display:none;z-index:20;
}
/* Puente invisible sobre el hueco: sin él, al bajar el puntero del botón al
   panel se pierde el :hover y el submenú se cierra. */
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-.6rem;height:.6rem}

.nav__item--sub:focus-within .nav__sub,
.nav__enlace[aria-expanded="true"]+.nav__sub{display:block}
/* Sin JavaScript el submenú sigue abriéndose al pasar el puntero. */
html:not(.js) .nav__item--sub:hover .nav__sub{display:block}
.nav__sub a{display:block;padding:.5rem .7rem;border-radius:6px;font-size:.9rem;color:var(--tinta);text-decoration:none}
.nav__sub a:hover{background:var(--verde-claro);color:var(--verde)}
.nav__sub-todo{border-top:1px solid var(--linea);margin-top:.3rem;padding-top:.3rem}
.nav__sub-todo a{font-weight:600;color:var(--verde)}
.nav__sub-sep{border-top:1px solid var(--linea);margin:.35rem .7rem}

/* atajos a las especialidades en el catálogo */
.atajos{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.atajos a{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .85rem;background:#fff;
  border:1px solid var(--linea);border-radius:99px;text-decoration:none;font-size:.87rem;font-weight:600}
.atajos a:hover{border-color:var(--verde);background:var(--verde-claro)}
.atajos span{background:var(--verde);color:#fff;border-radius:99px;padding:0 .45rem;font-size:.75rem}
.bloque__txt{color:var(--gris);margin:-.6rem 0 1.1rem;max-width:60em}

.menu-check,.menu-boton{display:none}
.cab__cta{flex:none}

/* --------------------------------------------------------------- hero */
.hero{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hero::-webkit-scrollbar{display:none}
.hero__slide{position:relative;flex:0 0 100%;scroll-snap-align:start;min-height:min(64vh,520px)}
.hero__img{width:100%;height:min(64vh,520px);object-fit:cover}
.hero__slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,59,59,.86) 0%,rgba(10,59,59,.45) 55%,rgba(10,59,59,.1) 100%)}
.hero__caja{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;z-index:2;
  width:min(100% - 2.5rem,var(--ancho));margin-inline:auto;color:#fff;max-width:640px;padding-inline:1.25rem}
.hero__eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;margin:0 0 .5rem;color:#fff;opacity:.8}
.hero__tit{font-size:clamp(2rem,5vw,3.2rem);margin:0 0 .4em;color:#fff}
.hero__txt{font-size:1.05rem;max-width:30em;margin-bottom:1.4rem;color:rgba(255,255,255,.92)}
.hero__puntos{position:absolute;bottom:1rem;left:0;right:0;display:flex;gap:.5rem;justify-content:center;z-index:3}
.hero__puntos a{width:34px;height:5px;border-radius:99px;background:rgba(255,255,255,.45)}
.hero__puntos a:hover{background:#fff}

/* -------------------------------------------------------------- intro */
.intro{padding:3rem 0 1rem}
.intro__h1{margin-bottom:.6rem}
.intro__txt{font-size:1.08rem;color:var(--gris)}
.intro__cifras{margin-top:1.5rem;padding:.9rem 1.1rem;background:var(--verde-claro);border-radius:var(--radio);
  font-size:.92rem;color:var(--verde-osc)}
.intro__cifras strong{font-size:1.15rem}

/* ---------------------------------------------------------- encabezado */
.encabezado{padding:2.5rem 0 1rem;background:var(--fondo-alt);border-bottom:1px solid var(--linea)}
.encabezado__txt{color:var(--gris);max-width:60em}
.encabezado__n{display:inline-block;margin-top:.5rem;padding:.3rem .7rem;background:var(--verde);color:#fff;
  border-radius:99px;font-size:.8rem;font-weight:600}
.encabezado__fecha{color:var(--gris);font-size:.88rem}
.encabezado--foto__int{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center}
.encabezado__foto img{border-radius:var(--radio);box-shadow:var(--sombra)}

/* --------------------------------------------------------------- miga */
.miga{background:#fff;border-bottom:1px solid var(--linea);font-size:.82rem}
.miga__lista{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:.6rem 0}
.miga__item+.miga__item::before{content:"›";margin-right:.4rem;color:var(--gris)}
.miga a{color:var(--gris);text-decoration:none}
.miga a:hover{color:var(--verde);text-decoration:underline}
.miga [aria-current]{color:var(--tinta);font-weight:600}

/* ------------------------------------------------------------ bloques */
.bloque{padding:2.2rem 0}
.bloque__cab{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.bloque__tit{margin:0}
.bloque__ver{font-size:.9rem;font-weight:600;white-space:nowrap}

.rejilla{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* ------------------------------------------------------------ tarjeta */
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  transition:.2s ease;display:flex}
.tarjeta:hover{box-shadow:var(--sombra-alta);transform:translateY(-3px);border-color:transparent}
.tarjeta__enlace{display:flex;flex-direction:column;text-decoration:none;color:inherit;width:100%}
.tarjeta__foto{aspect-ratio:4/3;overflow:hidden;background:var(--verde-claro)}
.tarjeta__img{width:100%;height:100%;object-fit:cover;transition:.35s ease}
.tarjeta:hover .tarjeta__img{transform:scale(1.05)}
.tarjeta__cuerpo{padding:.95rem 1rem 1.1rem;display:flex;flex-direction:column;flex:1}
.tarjeta__cat{margin:0 0 .25rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--verde);font-weight:600}
.tarjeta__tit{font-size:1.02rem;margin:0 0 .4rem}
.tarjeta__txt{font-size:.87rem;color:var(--gris);margin:0 0 .9rem;flex:1}
.tarjeta__mas{font-size:.85rem;font-weight:600;color:var(--verde)}
.tarjeta__mas::after{content:" →"}

/* --------------------------------------------------------- categorías */
.rejilla--cat{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.cat{border-radius:var(--radio);overflow:hidden;position:relative;background:var(--verde-osc)}
.cat__enlace{display:block;text-decoration:none;color:#fff}
.cat__foto{aspect-ratio:4/3}
.cat__img{width:100%;height:100%;object-fit:cover;opacity:.62;transition:.3s ease}
.cat:hover .cat__img{opacity:.42;transform:scale(1.05)}
.cat__cuerpo{position:absolute;inset:auto 0 0 0;padding:1rem}
.cat__tit{font-size:1rem;margin:0;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.cat__n{margin:.2rem 0 0;font-size:.78rem;color:rgba(255,255,255,.85)}

/* ------------------------------------------------------------- franja */
.franja{background:var(--verde);padding:2.2rem 0;margin:2rem 0}
.franja__tit{color:#fff;text-align:center;margin-bottom:1.4rem;font-size:1.35rem}
.franja__lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;list-style:none;margin:0;padding:0}
.franja__lista a{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-decoration:none;color:#fff}
.franja__foto{width:96px;height:96px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.35);display:block}
.franja__img{width:100%;height:100%;object-fit:cover}
.franja__lista a:hover .franja__foto{border-color:var(--oro)}
.franja__nom{font-size:.87rem;font-weight:600;text-align:center}

/* ---------------------------------------------------------------- CTA */
.cta{background:var(--verde-claro);margin-top:2.5rem}
.cta__int{display:flex;gap:1.5rem;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:2.2rem 0}
.cta__tit{margin:0 0 .3rem;color:var(--verde-osc)}
.cta__txt{margin:0;color:var(--gris);max-width:44em}
.cta__botones{display:flex;gap:.7rem;flex-wrap:wrap}

/* --------------------------------------------------------------- ficha */
.ficha{padding:2rem 0}
.ficha__int{display:grid;grid-template-columns:1fr;gap:1.8rem;align-items:start}
.ficha__img{border-radius:var(--radio);box-shadow:var(--sombra);width:100%}
.ficha__cat{margin:0 0 .4rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.ficha__cat a{text-decoration:none}
.ficha__h1{margin-bottom:.5rem}
.ficha__resumen{color:var(--gris)}
.ficha__datos-lista{list-style:none;margin:1.2rem 0;padding:0;border-top:1px solid var(--linea)}
.ficha__datos-lista li{display:flex;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--linea);font-size:.9rem}
.ficha__datos-lista span{flex:0 0 9.5rem;color:var(--gris);font-weight:600}
.ficha__acciones{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.ficha__nota{margin-top:.9rem;font-size:.82rem;color:var(--gris)}
.ficha__otras{margin:.4rem 0 0;font-size:.9rem;color:var(--gris)}
.ficha__otras a{font-weight:600;white-space:nowrap}
.ficha__intro{padding-top:1.6rem}
.ficha__intro p{margin:0;font-size:1.08rem;line-height:1.6;color:var(--tinta);
  padding:1.1rem 1.3rem;background:var(--fondo-alt);border-left:3px solid var(--oro);
  border-radius:0 var(--radio) var(--radio) 0}

/* ==================================================== guía / texto largo
   El bloque SEO de la portada se presenta como una guía editorial: sumario
   lateral pegajoso + artículo en tarjeta, con cada pregunta (H2) separada
   como sección propia. */
.guia{background:var(--fondo-alt);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:3rem 0;margin-top:1rem}
.guia__int{display:grid;gap:2rem;grid-template-columns:1fr;max-width:1080px;margin-inline:auto}
.guia__cuerpo{min-width:0;background:#fff;border:1px solid var(--linea);border-radius:16px;
  box-shadow:var(--sombra);padding:1.8rem 1.4rem}

/* sumario lateral */
.guia__indice{display:none}
.guia__indice-tit{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--verde);
  font-weight:700;margin:0 0 .9rem}
.guia__indice-lista{list-style:none;margin:0;padding:0;border-left:2px solid var(--linea)}
.guia__indice-lista a{display:block;margin-left:-2px;padding:.5rem 0 .5rem 1rem;border-left:2px solid transparent;
  font-size:.85rem;line-height:1.35;color:var(--gris);text-decoration:none;transition:color .15s,border-color .15s}
.guia__indice-lista a:hover{color:var(--verde)}
.guia__indice-lista a.activo{color:var(--verde-osc);font-weight:600;border-left-color:var(--oro)}

@media(min-width:1024px){
  .guia__int{grid-template-columns:245px minmax(0,1fr);gap:3rem}
  .guia__cuerpo{padding:3rem 3.4rem}
  .guia__indice{display:block;align-self:start;position:sticky;top:118px;
    max-height:calc(100vh - 150px);overflow:auto}
}

/* tipografía editorial */
.texto{font-size:1.03rem}
.texto [style*="justify"]{text-align:left!important}
.texto>p:first-of-type{font-size:1.2rem;line-height:1.6;color:var(--tinta);font-weight:450;margin-bottom:1.3em}

.texto h2{font-size:clamp(1.3rem,2.5vw,1.7rem);margin:2.6em 0 .7em;padding-top:2.3rem;
  border-top:1px solid var(--linea);scroll-margin-top:118px}
.texto h2::before{content:"";display:block;width:44px;height:3px;border-radius:3px;
  background:var(--oro);margin-bottom:.95rem}
.texto h2:first-of-type{margin-top:.2em;padding-top:0;border-top:0}
.texto h3{margin-top:1.9em;font-size:1.16rem;color:var(--verde-osc)}

.texto blockquote{margin:1.8em 0;padding:1.2rem 1.4rem 1.2rem 1.5rem;background:var(--verde-claro);
  border-left:4px solid var(--oro);border-radius:0 var(--radio) var(--radio) 0}
.texto blockquote h5{margin:0;font-size:1.06rem;line-height:1.5;color:var(--verde-osc);font-weight:600}

.texto img{border-radius:var(--radio);margin:1.2em 0}

/* listas con viñeta de marca */
.texto ul{list-style:none;padding-left:0;margin:1em 0 1.3em}
.texto ul li{position:relative;padding-left:1.8rem;margin-bottom:.6em}
.texto ul li::before{content:"";position:absolute;left:.2rem;top:.62em;width:.5rem;height:.5rem;
  border-radius:50%;background:var(--verde);box-shadow:0 0 0 4px var(--verde-claro)}

/* enlaces de la prosa (no los de las tarjetas embebidas) */
.texto a{color:var(--verde);font-weight:500;text-decoration:underline;
  text-decoration-color:rgba(15,81,81,.35);text-underline-offset:3px}
.texto a:hover{text-decoration-color:var(--verde)}
.texto .bloque a,.texto .franja a,.texto .rejilla a{text-decoration:none;font-weight:inherit}

.texto .bloque{padding-top:1rem}
.texto .franja{border-radius:var(--radio)}

@media(max-width:600px){
  .guia__cuerpo{padding:1.5rem 1.15rem;border-radius:12px}
  .texto>p:first-of-type{font-size:1.1rem}
}

.faq{border:1px solid var(--linea);border-radius:var(--radio);margin:.6rem 0;background:#fff}
.faq summary{cursor:pointer;padding:.9rem 1.1rem;font-weight:600;list-style:none;display:flex;
  justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--verde);font-size:1.3rem;line-height:1}
.faq[open] summary::after{content:"−"}
.faq[open] summary{border-bottom:1px solid var(--linea)}
.faq__cuerpo{padding:1rem 1.1rem}
.faq__cuerpo p:last-child{margin-bottom:0}

.pagina__foto img{border-radius:var(--radio);margin-top:1.5rem}
.aviso{padding:1.2rem;background:var(--verde-claro);border-radius:var(--radio)}

/* --------------------------------------------------- buscador / 404 útil */
.buscador{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.2rem 0 .4rem}
.buscador__campo{flex:1;min-width:240px;padding:.72rem 1rem;font-size:1rem;font-family:inherit;
  border:1px solid var(--linea);border-radius:var(--radio);background:#fff;color:var(--tinta)}
.buscador__campo:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-claro)}
.sugerencias{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.sugerencias a{display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:.75rem 1rem;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  text-decoration:none;color:var(--tinta);transition:.18s ease}
.sugerencias a:hover{border-color:var(--verde);background:var(--verde-claro);transform:translateY(-2px)}
.sugerencias__nom{font-weight:600}
.sugerencias__tipo{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--verde);
  background:var(--verde-claro);padding:.15rem .5rem;border-radius:99px;white-space:nowrap;flex:none}

.otras{padding:1.5rem 0}
.otras__lista{list-style:none;padding:0;margin:0;display:flex;gap:.6rem;flex-wrap:wrap}
.otras__lista a{display:inline-block;padding:.5rem 1rem;border:1px solid var(--linea);border-radius:99px;
  text-decoration:none;font-size:.9rem;background:#fff}
.otras__lista a:hover{border-color:var(--verde);background:var(--verde-claro)}

/* ----------------------------------------------------------- contacto */
.contacto{display:grid;grid-template-columns:1fr;gap:2rem;padding:2.2rem 0}
.contacto h2{font-size:1.05rem;margin-top:1.5rem}
.contacto h2:first-child{margin-top:0}
.contacto__dir{font-style:normal;color:var(--gris)}
.contacto__lista{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem}
.contacto__mapa iframe{width:100%;height:380px;border:0;border-radius:var(--radio);box-shadow:var(--sombra)}
.contacto__mapa-pie{font-size:.85rem;margin-top:.5rem}

/* ----------------------------------------------------------------- pie */
.pie{background:var(--verde);color:rgba(255,255,255,.85);margin-top:3rem;font-size:.9rem}
.pie__cols{display:grid;grid-template-columns:1fr;gap:1.8rem;padding:2.6rem 0}
.pie__tit{font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:#fff;margin-bottom:.9rem}
.pie__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.pie__lista--2{columns:2;column-gap:1rem;display:block}
.pie__lista--2 li{margin-bottom:.4rem;break-inside:avoid}
.pie a{color:rgba(255,255,255,.85);text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie__dir{font-style:normal;line-height:1.8}
.pie__horario{list-style:none;padding:0;margin:.8rem 0;opacity:.8;font-size:.85rem}
.pie__redes{display:flex;gap:.6rem;margin-top:.8rem}
.pie__redes a{padding:.35rem .8rem;border:1px solid rgba(255,255,255,.4);border-radius:6px;font-size:.82rem}
.pie__base{background:var(--verde-osc);padding:1.4rem 0;text-align:center;font-size:.83rem}
.pie__base p{margin:.2rem 0}
.pie__marca{font-weight:700;letter-spacing:.12em;color:#fff}
.pie__legal{opacity:.6;font-size:.76rem;max-width:60em;margin-inline:auto;margin-top:.8rem;text-align:center}

/* ------------------------------------------------------- botón flotante */
.flotante{
  position:fixed;right:1rem;bottom:1rem;z-index:60;display:inline-flex;align-items:center;gap:.55rem;
  background:#25d366;color:#fff;padding:.7rem 1.1rem;border-radius:99px;text-decoration:none;
  font-weight:600;font-size:.9rem;box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.flotante:hover{background:#1eb457;color:#fff}

/* ------------------------------------------------------------ pantallas */
@media (min-width:700px){
  .encabezado--foto__int{grid-template-columns:1.4fr 1fr}
  .ficha__int{grid-template-columns:1fr 1fr;gap:2.5rem}
  .contacto{grid-template-columns:1fr 1.15fr}
}
@media (min-width:960px){
  .pie__cols{grid-template-columns:1fr 1.2fr 1fr 1.3fr}
}

@media (max-width:900px){
  /* Cabecera «smart sticky»: en móvil la barra verde superior NO se queda
     pegada (con un top negativo del alto de esa barra se desplaza fuera de
     la pantalla) y solo permanece la fila del logo/menú. Además la fila se
     oculta al bajar y reaparece al subir, para no comerse la pantalla.
     --barra-h la mide app.js; el 34px es el valor de respaldo sin JS. */
  .cab{
    top:calc(-1 * var(--barra-h,34px));
    transition:transform .25s ease;
    will-change:transform;
  }
  .cab--oculta{transform:translateY(-100%)}
  /* Al bajar y volver a subir, sombra tenue para separar del contenido. */
  .cab--pegada{box-shadow:0 4px 14px rgba(15,81,81,.10)}
  .cab__int{padding:.55rem 0}
  /* El menú desplegado nunca debe superar la pantalla: se hace desplazable. */
  .menu-check:checked~.nav{
    max-height:calc(100vh - 8.5rem);overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  /* Los anclajes no deben quedar debajo de la cabecera fija. */
  html{scroll-padding-top:5rem}

  /* Logo, WhatsApp y botón de menú en UNA sola línea: así la parte fija de
     la cabecera mide ~60px en vez de las dos filas que medía antes. */
  .cab__int{gap:.6rem}
  .logo__marca{font-size:1.02rem;letter-spacing:.1em}
  .logo__sub{font-size:.6rem;letter-spacing:.18em}
  .cab__cta span{display:none}
  .menu-boton{
    display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;order:2;
    padding:.5rem .8rem;border:1px solid var(--linea);border-radius:8px;font-size:.9rem;
    font-weight:600;cursor:pointer;
  }
  .menu-boton span{width:18px;height:2px;background:var(--tinta);box-shadow:0 5px 0 var(--tinta),0 -5px 0 var(--tinta)}
  .nav{order:4;flex-basis:100%;margin-left:0;display:none}
  .menu-check:checked~.nav{display:block}
  .cab__int{flex-wrap:wrap}
  .nav__lista{flex-direction:column;align-items:stretch;gap:0;padding-bottom:.6rem}
  .nav__enlace{width:100%;justify-content:space-between;padding:.75rem .5rem;border-bottom:1px solid var(--linea)}
  .nav__sub{position:static;display:none;box-shadow:none;border:0;border-bottom:1px solid var(--linea);
    background:var(--fondo-alt);border-radius:0;min-width:0}
  .nav__sub::before{display:none}
  html:not(.js) .nav__item--sub:hover .nav__sub{display:none}
  .nav__enlace[aria-expanded="true"]+.nav__sub{display:block}
  .cab__cta{order:3;padding:.55rem .9rem}
  .hero__slide::after{background:linear-gradient(180deg,rgba(10,59,59,.35) 0%,rgba(10,59,59,.85) 100%)}
  .flotante span{display:none}
  .flotante{padding:.85rem}
}

/* En pantallas muy angostas el WhatsApp de la cabecera sobra: el botón
   flotante cumple la misma función y así la fila fija no se parte en dos. */
@media (max-width:359px){
  .cab__cta{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------- blog con barra lateral */
/* Maquetación de dos columnas para el índice del blog y los artículos.
   En móvil la barra lateral pasa debajo del contenido. */
.conlateral{display:grid;gap:2rem;grid-template-columns:1fr;align-items:start}
.conlateral__cuerpo{min-width:0}
.rejilla--blog{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

.lateral{display:flex;flex-direction:column;gap:1.4rem;min-width:0}
.lateral__caja{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:1.1rem 1.2rem}
.lateral__caja--cta{background:var(--verde-claro);border-color:transparent}
.lateral__caja--cta p{font-size:.92rem;color:var(--tinta);margin:.3rem 0 1rem}
.lateral__caja--cta .btn{width:100%;justify-content:center;text-align:center}
.lateral__tit{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--verde);
  margin:0 0 .9rem;font-weight:700}
.lateral__lista{list-style:none;margin:0;padding:0}
.lateral__lista li{padding:.65rem 0;border-top:1px solid var(--linea)}
.lateral__lista li:first-child{border-top:0;padding-top:0}
.lateral__lista a{display:block;font-size:.93rem;line-height:1.4;font-weight:600;text-decoration:none;color:var(--tinta)}
.lateral__lista a:hover{color:var(--verde)}
.lateral__fecha{display:block;font-size:.75rem;color:var(--gris);margin-top:.2rem}
.lateral__todos{display:inline-block;margin-top:.9rem;font-size:.85rem;font-weight:600}

/* espacios publicitarios */
.anuncio{border:1px solid var(--linea);border-radius:var(--radio);background:#fff;padding:.7rem;text-align:center}
.anuncio__eti{margin:0 0 .5rem;font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--gris)}
.anuncio__enlace{display:block;line-height:0}
.anuncio__img{width:100%;height:auto;border-radius:calc(var(--radio) - 4px)}
.anuncio__html img,.anuncio__html iframe{max-width:100%}
.anuncio__vacio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  min-height:180px;padding:1.2rem .8rem;text-decoration:none;border:2px dashed var(--linea);
  border-radius:calc(var(--radio) - 4px);background:var(--fondo-alt);transition:.25s ease}
.anuncio__vacio:hover{border-color:var(--oro);background:#fff}
.anuncio__vacio-tit{font-weight:700;color:var(--verde-osc);font-size:.95rem;line-height:1.3}
.anuncio__vacio-med{font-size:.78rem;color:var(--gris)}
.anuncio__vacio-cta{margin-top:.4rem;font-size:.83rem;font-weight:600;color:var(--verde)}

@media (min-width:1000px){
  .conlateral{grid-template-columns:minmax(0,1fr) 300px;gap:2.6rem}
}

/* Texto ampliado de fichas de tratamiento y de áreas: reutiliza el bloque
   editorial de la portada, pero sin sumario cuando el texto es corto (si no,
   la columna del sumario quedaría vacía y descuadraría el cuerpo). */
.guia__int--solo{grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.guia__int--solo{grid-template-columns:minmax(0,1fr);max-width:860px}}
.guia__cuerpo .faq{background:var(--fondo-alt)}

/* Figuras dentro del cuerpo de artículos/guías (imágenes con pie de foto) */
.texto figure{margin:1.8em 0}
.texto figure img{width:100%;height:auto;border-radius:var(--radio);box-shadow:var(--sombra)}
.texto figcaption{margin-top:.6em;font-size:.85rem;line-height:1.5;color:var(--gris);text-align:center}
.texto .figura--retrato{max-width:420px;margin-inline:auto}