/* ─────────────────────────────────────────────────────────────────────────────
   Almenara · clon de healthcare-institution-128 (modo clon)
   Paleta, rejilla, ritmo, escala y movimiento copiados del original. Las medidas
   duras estan tomadas del DOM del original CARGADO a 1280x800, no de la captura:
   contenido 1170 centrado en 1200 con margen 15, cortes de seccion en
   0/800/1065/1958/3022/3805/4355/5095/5892/6836.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  --dark:#160828;        /* --primary-dark del original */
  --green:#e0ecde;       /* --primary: el acento; 43 % del area */
  --green-soft:#f4fbf3;  /* --light-green */
  --slate:#425f66;       /* --paragraph-green */
  --yellow:#fcff70;      /* --yellow: el unico saturado */
  --white:#fff;
  --gray:#6f6f6f;
  --ink-soft:#0d0d0d;
  --star:#eda23b;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--dark);
  font-family:Inter,system-ui,sans-serif; font-size:18px; line-height:27px; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:"Noto Sans Bengali",Inter,sans-serif; margin:0; font-weight:700}
h5{font-size:20px; line-height:26px; font-weight:600}
p{margin:0}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
input{font:inherit}

.base{width:100%; max-width:1200px; margin:0 auto; padding:0 15px; position:relative}

/* huecos de imagen: fondo de la casa por debajo, para que un fichero que aun no
   existe se lea como un bloque de color y no como una imagen rota */
[data-img],.hero-photo,.hero-service-image,.git-right,.video-bg,.reviews-left,.news-image{
  background-color:var(--green-soft);
  background-position:50%; background-repeat:no-repeat; background-size:cover;
}

.image-cover[data-img="servicio-1.jpg"]{background-image:url("img/servicio-1.jpg")}
.image-cover[data-img="servicio-2.jpg"]{background-image:url("img/servicio-2.jpg")}
.image-cover[data-img="servicio-3.jpg"]{background-image:url("img/servicio-3.jpg")}
.image-cover[data-img="servicio-4.jpg"]{background-image:url("img/servicio-4.jpg")}
.image-cover[data-img="servicio-5.jpg"]{background-image:url("img/servicio-5.jpg")}
.image-cover[data-img="servicio-6.jpg"]{background-image:url("img/servicio-6.jpg")}
/* La ficha de articulo mide 448 de alto y la caja de texto le tapa 284, asi que de la foto solo
   se ven los 164 de arriba. En esta toma el sujeto quedo a media altura y en esa banda solo
   entraba techo y la cara cortada por los labios. Se reencuadra: ampliando al 160 % y anclando al
   60 %, la banda visible pasa a mostrar las coordenadas 101 a 203 del original, que es donde esta
   la cara entera. Regenerarla habria sido mejor, pero la cuenta de imagenes se quedo sin saldo. */
.image-cover[data-img="articulo-1.jpg"]{background-image:url("img/articulo-1.jpg");
  background-size:auto 160%; background-position:50% 60%}
.image-cover[data-img="articulo-2.jpg"]{background-image:url("img/articulo-2.jpg")}
.image-cover[data-img="articulo-3.jpg"]{background-image:url("img/articulo-3.jpg")}

.shadows{position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:linear-gradient(0deg,rgba(0,0,0,.5) 49%,rgba(255,255,255,0))}

/* ══ botones ══ */
.primary-button{
  display:inline-block; padding:11px 40px; border:1px solid var(--green);
  background:var(--green); color:var(--dark); border-radius:50px;
  font-size:18px; line-height:27px; font-weight:500; text-align:center;
  transition:all .5s;
}
.primary-button:hover{border-color:var(--yellow); background:var(--yellow)}

.white-button-wrap{
  position:relative; display:inline-flex; align-items:center; gap:10px; overflow:hidden;
  padding:12px 40px; background:var(--white); color:var(--dark); border-radius:50px;
}
.white-button-wrap span{position:relative; z-index:2; font-size:18px; line-height:27px; font-weight:400}
.white-button-wrap .play{position:relative; z-index:2; width:14px; height:14px}
.white-button-wrap::after{
  content:""; position:absolute; left:-5%; bottom:-5%; width:10px; height:10px;
  border-radius:100%; background:var(--green); transform:scale(1); transform-origin:center;
  transition:transform .5s;
}
.white-button-wrap:hover::after{transform:scale(40)}

.secondary-button-wrap{
  position:relative; display:inline-block; overflow:hidden; padding:12px 40px;
  border:1px solid var(--green); border-radius:50px; color:var(--slate);
  font-size:18px; line-height:27px; font-weight:500;
}
.secondary-button-wrap::after{
  content:""; position:absolute; left:-5%; bottom:-5%; width:10px; height:10px;
  border-radius:100%; background:var(--green); transition:transform .5s; z-index:-1;
}
.secondary-button-wrap:hover{background:var(--green); color:var(--dark)}

.dark-button{
  padding:11px 40px; border-radius:50px; background:var(--dark); color:var(--yellow);
  font-size:18px; line-height:27px; font-weight:500; text-align:center; transition:all .5s;
}
.dark-button:hover{background:var(--yellow); color:var(--dark)}

.primary-button-with-icon{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 40px; background:var(--white); color:var(--dark); border-radius:50px;
}
.primary-button-with-icon span,.primary-button-with-icon svg{position:relative; z-index:2}
.primary-button-with-icon::after{
  content:""; position:absolute; left:-5%; bottom:-5%; width:10px; height:10px;
  border-radius:100%; background:var(--green); transition:transform .5s;
}
.primary-button-with-icon:hover::after{transform:scale(40)}

.link-black{display:flex; color:var(--dark); transition:all .3s}
.link-black:hover{opacity:.7}
.link-white{color:var(--white)}
.link-white:hover,.link-red{color:var(--yellow)}
.link-red:hover{color:var(--white)}

.ico20{width:20px; height:32px}
.ico24{width:24px; height:25px; flex:none}
.ico32{width:32px; height:32px; flex:none}

/* ══ barra fija ══ */
.nav{position:fixed; inset:0 0 auto; z-index:900; height:87px; background:transparent;
  transition:background-color .12s linear}
.nav.is-solid{background:var(--white)}
.nav.is-solid .brand{color:var(--dark)}
.nav.is-solid .brand-mark{color:var(--slate)}
.nav.is-solid .nav-item-link{color:var(--dark)}
.nav.is-solid .caret{border-color:var(--dark)}
.nav.is-solid .nav-burger i{background:var(--dark)}
.nav .brand,.nav .nav-item-link,.nav .brand-mark,.nav .caret{transition:color .12s linear, border-color .12s linear}
.nav-inner{width:100%; max-width:1200px; margin:0 auto; padding:0 15px;
  display:flex; align-items:center; justify-content:space-between; height:87px}
.brand{display:flex; align-items:center; gap:12px; color:var(--white)}
.brand-mark{width:34px; height:34px; color:var(--green); flex:none}
.nav.is-solid .brand-mark{color:var(--slate)}
.brand-name{font-size:18px; line-height:22px; font-weight:400}

.menu{display:flex; align-items:center}
.dropdown-item{position:relative; display:flex; align-items:center; padding:20px; height:87px}
.dropdown-item .nav-item-link,.dropdown-item .caret{transition:opacity .5s}
.dropdown-item:hover .nav-item-link,.dropdown-item:hover .caret{opacity:.7}
.nav-item-link{display:flex; padding:0 10px; color:var(--white);
  font-size:18px; line-height:27px; font-weight:500}
.caret{width:10px; height:10px; margin-left:-6px; border-right:2px solid #fff;
  border-bottom:2px solid #fff; transform:rotate(45deg) translateY(-2px)}
.submenu{display:none; position:absolute; top:87px; left:20px; min-width:190px;
  padding:15px 20px 18px; background:var(--white); border:1px solid var(--green);
  box-shadow:0 12px 30px rgba(22,8,40,.12); opacity:1}
.dropdown-item:hover .submenu{display:block; opacity:1}
.submenu a{display:block; padding:7px 10px; color:var(--dark); font-size:18px; line-height:27px;
  white-space:nowrap}
.submenu a:hover{color:var(--slate)}
.nav-right{display:flex; align-items:center; gap:30px}
.nav-burger{display:none}

/* ══ 1 · portada · 0 → 800 ══ */
.hero{position:relative; overflow:hidden; min-height:800px; padding-bottom:100px;
  display:flex; align-items:flex-end}
.hero-photo{position:absolute; inset:0; background-image:url("img/portada.jpg"); background-color:#8f938f}
.hero .shadows{height:calc(100% + 80px); top:-80px}
.hero-base{z-index:3}
.hero-intro{width:644px; display:flex; flex-direction:column; align-items:flex-start}
.hero-title{margin:10px 0; font-size:62px; line-height:68.2px; color:var(--white)}
.hero-desc{margin:20px 0 40px; width:547px; display:flow-root}
.hero-desc p{margin:10px 0; color:var(--white); font-size:18px; line-height:27px}
.hero-buttons{display:flex; align-items:center; gap:30px; height:51px}
.next-section-link{width:51px; height:51px; display:flex; align-items:center; justify-content:center}
.icon-ring{width:49px; height:49px; border:1px solid var(--yellow); border-radius:100%;
  display:flex; align-items:center; justify-content:center; color:var(--white);
  transition:background-color .4s, color .4s}
.icon-ring svg{width:20px; height:20px}
.next-section-link:hover .icon-ring{background:var(--yellow); color:var(--dark)}

/* ══ 2 · cifras · 800 → 1065 ══ */
.benefits{padding-top:80px; position:relative}
.benefit-row{display:flex; justify-content:space-around; width:100%}
.benefit{position:relative; width:18%; padding-bottom:80px;
  display:flex; flex-direction:column; align-items:center}
.content-info{display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start}
.content-info h2{margin:0 0 10px; font-size:62px; line-height:68.2px; color:var(--slate)}
.content-info p{font-size:18px; line-height:27px; font-weight:400; color:var(--dark)}
.benefit-line{position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--dark)}

/* ══ secciones genericas ══ */
.section{padding:130px 0; position:relative}
.section.no-top{padding-top:0}

.subtitle-wrapper{display:flex; justify-content:space-between; align-items:flex-end;
  width:100%; margin:0 auto 60px}
.subtitle-left{width:55%}
.h2-title{margin:10px 0 20px; font-size:42px; line-height:46.2px; color:var(--dark)}
.lead{margin:10px 0 0; width:550px; font-size:18px; line-height:27px; font-weight:400}
.dont-shrink-button{flex:none; display:flex; align-items:center; justify-content:center}

/* ══ 3 · especialidades · 1065 → 1958 ══ */
.services-home{display:flex; justify-content:space-between; gap:60px; width:100%}
.hero-service-image{flex:none; width:527px; background-image:url("img/panel-servicios.jpg");
  background-position:50% 100%}
.right-services{display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; width:583px}
.hero-item{display:flex; flex-direction:column; gap:10px; width:45%}
.pict{width:60px; height:60px; color:var(--dark); flex:none; overflow:visible}
.content-wrapper h5{margin:10px 0; color:var(--dark)}
.content-wrapper p{margin:10px 0 0; font-size:16px; line-height:24px; font-weight:400}

/* ══ 4 · rejilla de servicios · 1958 → 3022 ══ */
.grid-services{display:grid; grid-template-columns:1fr 1fr 1fr; gap:30px; width:100%; margin-bottom:80px}
.grid-item{position:relative; overflow:hidden; height:380px; padding:0 30px;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center}
.serv-image{position:absolute; inset:0; height:300px; overflow:hidden; display:block}
.serv-image .image-cover{display:block; width:100%; height:100%; transition:transform .5s}
.serv-image:hover .image-cover.hover{transform:scale(1.05)}
.content-info-wrap{position:relative; overflow:hidden; width:100%;
  padding:20px 20px 20px 24px; background:var(--white)}
.benefit-line-vertical{position:absolute; left:0; top:0; width:4px; height:100%; background:var(--green)}
.serv-title{margin:0 0 10px; color:var(--dark); transition:all .3s}
.serv-title:hover{color:var(--slate)}
.content-info-wrap p{font-size:16px; line-height:24px; font-weight:400}

.short-info{display:flex; justify-content:space-between; gap:30px; width:100%; min-height:64px}
.info-item{display:flex; flex-direction:column; justify-content:center; width:auto}
.item-row{display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-start; gap:20px}
.item-row>svg{width:32px; height:32px; flex:none}
.info-item .phones{display:flex; flex-direction:column; gap:10px}
.info-item.address{width:270px}
.address-text{font-size:18px; line-height:27px; font-weight:400}
.info-item.form{flex:1; max-width:489px}
.inline-form{display:flex; align-items:center; gap:15px; width:100%}
.field-pill{flex:1; height:51px; padding:12px 25px; border:1px solid var(--green);
  border-radius:50px; background:var(--white); color:var(--dark); font-size:18px; outline:none}
.field-pill::placeholder{color:var(--gray)}
.field-pill:focus{border-color:var(--slate)}
.inline-form .dark-button{flex:none; height:51px}

/* ══ 5 · siempre de guardia · 3022 → 3805 ══ */
.git{position:relative; overflow:hidden; padding:0 0 130px}
.git-band{position:absolute; left:0; right:0; bottom:0; height:584px; background:var(--green)}
.git .base{z-index:2}
.git-container{display:flex; justify-content:space-between; gap:80px; width:100%; position:relative}
.git-left{position:relative; z-index:50; flex:none; width:468px;
  display:flex; flex-direction:column; align-items:flex-start; gap:80px; margin-right:auto}
.git-title{margin:10px 0; font-size:42px; line-height:46.2px; color:var(--dark)}
.git-rows{display:flex; flex-direction:column; align-items:flex-start; gap:30px; width:415px}
.git-row{display:flex; flex-direction:column; gap:20px}
.string-wrapper{display:flex; flex-direction:row; align-items:center; gap:20px}
.white-circle{flex:none; width:50px; height:50px; border-radius:100%; background:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:27px; font-weight:500; color:var(--dark)}
.git-row h5{margin:10px 0; color:var(--dark)}
.row-dark-text{max-width:415px; font-size:16px; line-height:24px; font-weight:400; color:var(--dark)}

.git-right .shadows{background-image:linear-gradient(0deg,rgba(0,0,0,.62) 58%,rgba(0,0,0,.08))}
.git-right{position:relative; z-index:1; flex:none; width:689px; margin-right:-117px;
  min-height:653px; display:flex; align-items:flex-end; overflow:hidden;
  background-image:url("img/contacto.jpg"); background-color:#7d8380}
.contacts-info{position:relative; z-index:4; width:460px; padding:0 0 67px 60px}
.top-content{display:flex; flex-direction:column; gap:20px; width:380px; margin-bottom:40px}
.git-h3{font-size:35px; line-height:38.5px; color:var(--white)}
.white-desc{color:var(--white); font-size:18px; line-height:27px; font-weight:400}
.phone-wrapper{display:flex; align-items:center; gap:10px; color:var(--white)}
.phone-wrapper .link-white{font-size:18px; line-height:27px; font-weight:500}

/* ══ 6 · como trabajamos · 3805 → 4355 ══ */
.video-section{position:relative; overflow:hidden; height:550px}
.video-wrapper{display:flex; align-items:flex-end; width:100%; height:100%; padding-bottom:80px}
.video-bg{position:absolute; inset:0; background-image:url("img/video.jpg"); background-color:#9a9d9b}
.video-section .base{z-index:3}
.video-content{position:relative; z-index:100; display:flex; flex-direction:column;
  align-items:flex-start; gap:40px; width:100%}
.title-wrap{display:flex; flex-direction:column; gap:20px; width:415px}
.text-white{font-size:42px; line-height:46.2px; color:var(--white)}

/* ══ 7 · testimonios · 4355 → 5095 ══ */
.reviews{position:relative; display:flex; justify-content:space-between; align-items:center;
  gap:100px; width:100%; min-height:480px}
.reviews-left{flex:none; width:480px; align-self:stretch;
  background-image:url("img/testimonio.jpg"); background-color:#cfcfcb}
.reviews-right{width:590px}
.kicker{margin:10px 0 20px; color:var(--slate); font-size:18px; line-height:27px;
  font-weight:400; letter-spacing:.1em; text-transform:uppercase}
.reviews-text{font-family:"Noto Sans Bengali",Inter,sans-serif; font-size:38px; font-weight:700;
  line-height:1.3em; color:var(--dark)}
.name-container{margin-top:40px}
.autor-name{margin:10px 0; color:var(--dark)}
.stars{display:flex; gap:6px}
.stars svg{width:18px; height:18px; color:var(--star)}
.review-arrow{position:absolute; bottom:0; right:0; width:51px; height:51px; border-radius:100%;
  border:1px solid transparent; background:rgba(111,111,111,.1);
  display:flex; align-items:center; justify-content:center; transition:all .3s}
.review-arrow svg{width:22px; height:22px; color:var(--dark)}
.review-arrow.prev{right:81px}
.review-arrow:hover{background:var(--yellow)}

/* ══ 8 · lo ultimo · 5095 → 5892 ══ */
.blog-list{display:grid; grid-template-columns:1fr 1fr 1fr; gap:30px; width:100%}
.blog-item{min-height:450px; height:450px; overflow:hidden; border:1px solid rgba(111,111,111,.4)}
.blog-hero{position:relative; display:flex; align-items:flex-end;
  width:100%; height:448px; margin:1px}
.blog-main-image{position:absolute; inset:0; display:block; transition:transform .5s}
.blog-hero:hover .blog-main-image.hover{transform:scale(1.05)}
.white-blog-container{position:relative; z-index:50; width:calc(100% + 10px);
  margin:0 -5px -5px; padding:20px 25px 25px; background:var(--white)}
.blog-title{margin:0 0 10px; color:var(--ink-soft); transition:opacity .35s}
/* variante destacada: la ficha central del original prescinde de la caja blanca, deja ver la
   foto entera y pasa titular, cuerpo, enlace y fecha a blanco. Es permanente, no un hover. */
.white-blog-container.destacada{background:transparent}
.blog-hero:has(.destacada)::after{content:""; position:absolute; inset:0; z-index:10;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(22,8,40,.82) 42%,rgba(22,8,40,.55) 62%,rgba(22,8,40,.12))}
.white-blog-container.destacada .blog-title,
.white-blog-container.destacada .blog-desc,
.white-blog-container.destacada .blog-date{color:var(--white)}
.white-blog-container.destacada .link-black{color:rgba(255,255,255,.88)}
.white-blog-container .w-inline-block{display:block}
.w-inline-block:hover .blog-title{opacity:.7}
.blog-desc{margin:10px 0 20px; color:var(--gray); font-size:16px; line-height:24px; font-weight:400}
.blog-bottom{display:flex; justify-content:space-between; align-items:flex-end}
.blog-bottom .link-black{color:var(--ink-soft); font-size:18px; line-height:27px; font-weight:500}
.blog-date{color:var(--ink-soft); font-size:16px; line-height:24px; font-weight:400}

/* ══ 9 · pie · 5892 → 6836 ══ */
.site-footer{width:100%}
.subscribe{margin-bottom:-50px; position:relative; z-index:2}
.news-container{display:flex; justify-content:space-between; width:100%; background:var(--green)}
.news-info{flex:1; width:51%; padding:50px 100px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start}
.ico32.mail{color:var(--dark); display:block}
.subscribe-title{margin:10px 0 30px; width:397px; font-size:42px; line-height:46.2px; color:var(--dark)}
.news-form{display:flex; flex-direction:column; align-items:flex-start; gap:30px; width:300px}
.news-form .dark-button{height:49px; padding:0 40px; display:flex; align-items:center; justify-content:center}
.field-form{width:300px; height:50px; min-height:50px; line-height:24px; padding:12px 20px; background:transparent;
  border:none; border-bottom:1px solid var(--dark); color:var(--dark); font-size:14px; outline:none}
.field-form::placeholder{color:var(--dark); opacity:.72; font-size:18px}
.field-form:focus{border-bottom-color:var(--slate)}
.news-image{flex:none; width:49%; background-image:url("img/boletin.jpg"); background-color:#b9c5b7}

.footer-top{background:var(--dark); padding:130px 0 50px; text-align:center}
.footer-top-inner{display:flex; flex-direction:column; justify-content:space-between;
  align-items:flex-start; gap:50px; width:100%}
.footer-brand{color:var(--white)}
.footer-brand .brand-mark{color:var(--green)}
.logo-top-wrapper{display:flex; justify-content:space-between; align-items:center; width:100%}
.footer-contacts{display:flex; justify-content:space-around; align-items:flex-start; gap:50px; width:100%}
.contacts-item{display:flex; flex-direction:row; justify-content:flex-start;
  align-items:flex-start; gap:20px; text-align:left; color:var(--white)}
.contacts-item.first-item{width:275px}
.footer-contacts .contacts-item:nth-child(2){width:205px}
.footer-contacts .contacts-item:nth-child(3){width:231px}
.footer-address{color:var(--white); font-size:16px; line-height:24px; font-weight:400}
.phone-col{display:flex; flex-direction:column; gap:10px}
.phone-col .footer-contact-link{white-space:nowrap}
.footer-contact-link{color:var(--white); font-size:16px; line-height:24px; font-weight:500}
.footer-contact-link:hover{color:var(--yellow)}

.footer-bottom{position:relative; background:var(--dark); padding:50px 0 80px; text-align:center}
.footer-line{position:absolute; inset:0 0 auto; height:1px; background:rgba(255,255,255,.2)}
.footer-bottom-inner{display:flex; flex-direction:column; align-items:center; gap:50px; width:100%}
.footer-links{display:flex; gap:50px}
.footer-links a{font-size:18px; line-height:27px; font-weight:500}
.footer-rights-wrapper{display:flex; flex-flow:column wrap; justify-content:center; align-items:center}
.footer-copyright{color:var(--white); font-size:18px; line-height:27px; font-weight:500}
.footer-link-copyright{display:inline; color:var(--white); margin-bottom:10px}
.footer-link-copyright:hover{color:var(--yellow)}
.footer-rights{display:flex; gap:5px; flex-wrap:wrap; justify-content:center; color:var(--white); font-size:18px; line-height:27px; font-weight:500}
.footer-copyright-link{display:inline; color:var(--yellow)}
.footer-copyright-link:hover{color:var(--white)}

/* ─────────────────────────────────────────────────────────────────────────────
   MOVIMIENTO. En el original TODO el movimiento es un solo gesto: revelado por
   opacidad mas subida corta que DISPARA UNA VEZ (bajando, las tomas 03, 04, 11 y
   12 de la hoja salen en blanco; subiendo, esas mismas fracciones salen solidas).
   Sin scrub, sin pin, sin parallax: pinSpacers = 0 en las 31 tomas y la sonda de
   inercia dio 0.23 de delta.

   EL REPOSO LO DECLARA EL CSS: por defecto todo esta visible y en su sitio. El
   desplazamiento lo pone el JS al arrancar, y solo si el JS corre. Asi un fallo
   de script deja la pagina entera, no una pagina en blanco.
   ───────────────────────────────────────────────────────────────────────────── */
.js .rv[data-rv="off"]{opacity:0; transform:translateY(40px)}
.js .rv{transition:opacity .3s ease-out, transform .3s ease-out}

@media (prefers-reduced-motion:reduce){
  .js .rv[data-rv="off"]{opacity:1; transform:none}
  .js .rv,.white-button-wrap::after,.serv-image .image-cover,.blog-main-image{transition:none}
}

/* ═════════════════════════════════════════════════════════════════════════════
   MOVIL · medido sobre el original a 390x844
   Documento de 11524 px (13.7 pantallas) con los cortes de seccion en
   0/650/1336/2959/5562/6772/7272/8250/10030/11524. Contenido de 360 con margen
   15 (no 55). Escala 45/35/30/28/20/18/16.

   TRES COSAS QUE CAMBIAN Y NO SON PEREZA:
   1. La barra se pliega: el original a 390 esconde el telefono, el menu y el
      boton, y deja marca y hamburguesa.
   2. El bloque de la banda verde (.git-band) DESAPARECE. El original le pone
      display:none a .red-absolute-bg en movil: al apilar, la banda dejaria de
      cabalgar nada y solo ensuciaria el fondo.
   3. El bloque de suscripcion invierte el orden (column-reverse): la foto sube
      arriba y el formulario baja. Es lo que hace el original, y sin eso el
      formulario queda a 300 px de la unica imagen que lo acompana.
   ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width:991px){
  .base,.nav-inner{padding:0 15px}
  .subtitle-wrapper{flex-direction:column; align-items:flex-end; gap:40px; margin-bottom:60px}
  .subtitle-left{width:100%}
  .services-home{flex-direction:column; gap:40px}
  .hero-service-image{width:100%; height:350px}
  .right-services{width:100%}
  .grid-services,.blog-list{grid-template-columns:1fr 1fr}
  .git-container{flex-direction:column; gap:60px}
  .git-left,.git-right{width:100%; margin:0}
  .reviews{flex-direction:column; gap:40px}
  .reviews-left,.reviews-right{width:100%}
}

@media (max-width:767px){
  /* ── barra: marca y hamburguesa ── */
  .nav,.nav-inner{height:80px}
  .menu,.nav-right{display:none}
  .nav-burger{display:flex; flex-direction:column; justify-content:center; gap:6px;
    width:42px; height:40px; padding:0}
  .nav-burger i{display:block; height:2px; background:var(--white); transition:background-color .12s linear}
  .nav-burger i:last-child{width:70%; margin-left:auto}

  /* ── 1 · portada · 0 → 650 ── */
  .hero{min-height:650px; padding-bottom:60px}
  .hero-photo{background-position:78% 50%}
  .hero .shadows{height:calc(100% + 80px); top:-80px;
    background-image:linear-gradient(0deg,rgba(0,0,0,.55) 40%,rgba(0,0,0,.34))}
  .hero-intro{width:100%}
  .hero-title{font-size:45px; line-height:49.5px}
  .hero-desc{width:100%; margin:10px 0 40px}
  .hero-buttons{gap:30px}

  /* ── 2 · cifras · 650 → 1336 ── */
  .benefits{padding-top:60px}
  .benefit-row{flex-wrap:wrap; gap:40px}
  .benefit{width:80%; padding-bottom:40px; align-items:center}
  .content-info{align-items:center; text-align:center}
  .content-info h2{font-size:45px; line-height:49.5px}

  /* ── secciones ── */
  .section{padding:60px 0}
  .section.no-top{padding-top:0}
  .subtitle-wrapper{margin-bottom:40px}
  .h2-title{font-size:35px; line-height:38.5px; margin:10px 0 20px}
  .lead{width:100%}

  /* ── 3 · especialidades · 1336 → 2959 ── */
  .right-services{flex-direction:column; gap:40px}
  .hero-item{width:100%; align-items:center; text-align:center}
  .content-wrapper p{width:100%}

  /* ── 4 · rejilla de servicios · 2959 → 5562 ── */
  .grid-services{grid-template-columns:1fr; gap:30px; margin-bottom:40px}
  .grid-item{height:340px; padding:0 20px}
  .serv-image{height:260px}
  .grid-item{justify-content:flex-end}
  .content-info-wrap{margin-top:-26px}

  .short-info{flex-wrap:wrap; gap:40px; min-height:0}
  .info-item,.info-item.address,.info-item.form{width:100%; max-width:none}
  .inline-form{flex-direction:column; align-items:stretch; gap:15px; width:100%}
  .inline-form .dark-button{width:100%}

  /* ── 5 · siempre de guardia · 5562 → 6772 ── */
  .git{padding:60px 0; background:var(--green)}
  .git-band{display:none}          /* el absoluto se esconde: el color pasa a la seccion entera */
  .git-title{font-size:35px; line-height:38.5px}
  .git-left{gap:40px}
  .git-rows{width:100%}
  .string-wrapper{align-items:flex-start}
  .git-row h5{margin:12px 0 10px}
  .git-right{width:100%; min-height:398px; padding:60px 0; align-items:center}
  .git-right .shadows{background-image:linear-gradient(0deg,rgba(0,0,0,.66) 45%,rgba(0,0,0,.42))}
  .contacts-info{width:100%; padding:0 15px; text-align:center;
    display:flex; flex-direction:column; align-items:center}
  .top-content{width:330px; align-items:center; margin-bottom:40px}
  .git-h3{font-size:30px; line-height:33px}
  .phone-wrapper{justify-content:center}

  /* ── 6 · como trabajamos · 6772 → 7272 ── */
  .video-section{height:500px}
  .video-section .shadows{background-image:linear-gradient(0deg,rgba(0,0,0,.6) 45%,rgba(0,0,0,.5))}
  .video-wrapper{padding-bottom:0; align-items:center}
  .video-content{align-items:center; gap:40px}
  .title-wrap{width:100%; align-items:center; text-align:center}
  .text-white{font-size:35px; line-height:38.5px}

  /* ── 7 · testimonios · 7272 → 8250 ── */
  .reviews{align-items:stretch; min-height:0; gap:40px; padding-bottom:80px}
  .reviews-left{width:100%; height:360px; align-self:stretch}
  .reviews-right{width:100%}
  .reviews-text{font-size:28px; line-height:36.4px}
  /* las flechas se quedan donde las pone el escritorio: pegadas al margen derecho del
     contenido, que es exactamente donde caen en el fotograma del original a 390 */

  /* ── 8 · lo ultimo · 8250 → 10030 ── */
  .blog-list{grid-template-columns:1fr; gap:30px}
  .blog-main-image{background-position:50% 22%}

  /* ── 9 · pie · 10030 → 11524 ── */
  .news-container{flex-direction:column-reverse}
  .news-image{width:100%; height:300px}
  .news-info{width:100%; padding:60px 15px 84px; align-items:center; text-align:center}
  .subscribe-title{width:330px; font-size:35px; line-height:38.5px; text-align:center}
  .news-form{width:330px; align-items:center}
  .news-form .field-form{width:330px}

  .footer-top{padding:110px 0 50px}
  .footer-top-inner{gap:50px}
  .logo-top-wrapper{flex-direction:column; align-items:flex-start;
    justify-content:space-between; gap:40px}
  .primary-button-with-icon{width:100%}
  .footer-contacts{flex-direction:column; gap:15px}
  .contacts-item{align-items:center}
  .contacts-item.first-item{width:100%}

  .footer-bottom{padding:50px 0 60px}
  .footer-bottom-inner{align-items:flex-start; gap:50px}
  .footer-links{display:grid; grid-template-columns:repeat(3,1fr); gap:10px 20px; width:100%}
  .footer-rights-wrapper{align-items:flex-start; width:100%; text-align:left}
  .footer-rights{flex-wrap:wrap}
}

/* ── Distintivo de Clínicas: el camino de vuelta al portafolio ────────────────
   Lo añade scripts/publicar-piezas.mjs al publicar. NO está en la fuente de la pieza, y no debe:
   el vídeo del portafolio se graba de la fuente y ahí este sello sobra. */
.ct-firma{position:fixed;left:14px;bottom:14px;z-index:2147483000;display:inline-flex;align-items:center;gap:.35em;
  padding:.55em .85em;border-radius:999px;background:rgba(17,17,17,.84);color:#fff;
  font:500 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  letter-spacing:.01em;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 1px 4px rgba(0,0,0,.22);opacity:.6;transition:opacity .18s ease}
.ct-firma:hover,.ct-firma:focus-visible{opacity:1;color:#fff;text-decoration:none}
.ct-firma b{font-weight:700}
@media (max-width:520px){.ct-firma{left:10px;bottom:10px;font-size:11px;padding:.5em .75em}}
@media (prefers-reduced-motion:reduce){.ct-firma{transition:none}}
@media print{.ct-firma{display:none}}