/* ============================================================
   EGA México — hoja de estilos
   Editar aquí colores, tipografías y espaciados del sitio.
   ============================================================ */

:root{
  --tinta:#111111;         /* negro principal */
  --tinta-suave:#3a3a3a;   /* texto de párrafo */
  --gris:#8a8a8a;          /* etiquetas / secundario */
  --linea:#e6e6e6;         /* bordes */
  --crema:#f6f4f1;         /* fondo sección clientes */
  --whatsapp:#25D366;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Lato', Helvetica, Arial, sans-serif;
  --ancho:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0; background:#fff; color:var(--tinta);
  font-family:var(--sans); font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ max-width:100%; }
a{ color:var(--tinta); text-decoration:none; }
a:hover{ color:#6f6f6f; }
::selection{ background:var(--tinta); color:#fff; }
input,textarea,select,button{ font-family:var(--sans); }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid #111; outline-offset:3px;
}

.skip{ position:absolute; left:-9999px; top:0; background:#111; color:#fff; padding:12px 18px; z-index:200; }
.skip:focus{ left:8px; top:8px; color:#fff; }

h1,h2,h3{ font-family:var(--serif); font-weight:400; }

/* ---------- barra superior ---------- */
.barra{
  background:var(--tinta); color:#fff; font-size:12px; letter-spacing:.04em;
  padding:9px 20px; display:flex; justify-content:center; align-items:center;
  gap:12px; flex-wrap:wrap; text-align:center;
}
.barra a{ color:#fff; opacity:.85; }
.barra a:hover{ color:#fff; opacity:1; }
.barra .sep{ opacity:.35; }
.barra span{ opacity:.85; }

/* ---------- encabezado ---------- */
.encabezado{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.97); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linea);
}
.encabezado .interior{
  max-width:var(--ancho); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:14px;
}
.encabezado img{ height:48px; width:auto; display:block; }
.marca{ font-family:var(--serif); font-size:22px; letter-spacing:.2em; font-weight:600; white-space:nowrap; }
.nav{
  margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end;
  gap:8px 16px; font-size:11.5px; letter-spacing:.11em;
}
@media (min-width:1180px){ .nav{ gap:8px 20px; font-size:12px; letter-spacing:.14em; } }
.nav a{ padding-bottom:3px; border-bottom:1px solid transparent; }
.nav a:hover,.nav a[aria-current="true"]{ border-bottom-color:var(--tinta); color:var(--tinta); }
.menu-btn{
  display:none; margin-left:auto; background:none; border:1px solid var(--linea);
  padding:10px 12px; cursor:pointer; line-height:0;
}
.menu-btn span{ display:block; width:20px; height:1.5px; background:#111; margin:4px 0; }

/* ---------- hero ----------
   El bloque principal (antetitulo, título, párrafo y botones) se centra solo:
   la cita de Hipócrates sale del flujo y se ancla al pie de la sección, para que
   no jale el peso visual hacia abajo y el titular quede realmente al centro.
   Ritmo vertical progresivo entre filas: 18 → 26 → 38 px.
   ------------------------------------------------------------------------- */
.hero{
  position:relative; min-height:clamp(580px,76vh,720px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(78px,10vh,112px) 20px clamp(104px,14vh,140px);
  background:url('media/hero.jpg') center/cover; overflow:hidden; isolation:isolate;
}
.hero video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.95) contrast(.97) brightness(1.02);
}
.hero .velo-1{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.24) 45%,rgba(0,0,0,.52) 100%); }
.hero .velo-2{ position:absolute; inset:0; background:radial-gradient(ellipse 62% 55% at 50% 50%,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 75%); }
.hero .contenido{ position:relative; text-align:center; color:#fff; max-width:900px; }
.hero .antetitulo{
  font-size:11px; letter-spacing:.36em; margin:0 0 18px;
  text-shadow:0 1px 10px rgba(0,0,0,.8),0 1px 2px rgba(0,0,0,.5);
}
.hero h1{
  font-size:clamp(38px,6vw,64px); line-height:1.12; margin:0 0 26px; text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.5);
}
.hero .contenido > p:not(.antetitulo){
  font-weight:300; font-size:clamp(16px,2vw,19px); line-height:1.7; margin:0 auto 38px; max-width:600px;
  text-shadow:0 1px 12px rgba(0,0,0,.75),0 1px 2px rgba(0,0,0,.45);
}
.hero .cita{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(32px,4.6vh,46px); z-index:1;
  width:min(100% - 40px, 640px); margin:0; padding:22px 0 0; text-align:center; color:#fff;
  border-top:1px solid rgba(255,255,255,.28);
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(16px,1.5vw,19px); line-height:1.5; opacity:.93;
  text-shadow:0 1px 12px rgba(0,0,0,.78),0 1px 2px rgba(0,0,0,.45);
}
@media (max-width:700px){
  /* la cita vuelve al flujo: el hero se apila en columna para que quede debajo */
  .hero{ min-height:auto; padding:60px 20px 64px; flex-direction:column; }
  .hero .cita{
    position:static; transform:none; width:auto; margin:38px auto 0;
    padding:20px 0 0; max-width:420px;
  }
}
.acciones{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 40px; font-size:12px; letter-spacing:.24em; cursor:pointer;
  border:1px solid transparent; transition:background .2s,color .2s;
}
.btn-claro{ background:#fff; color:var(--tinta); }
.btn-claro:hover{ background:#e8e8e8; color:var(--tinta); }
.btn-linea{ border-color:rgba(255,255,255,.75); color:#fff; }
.btn-linea:hover{ background:rgba(255,255,255,.14); color:#fff; }
.btn-linea-solido:hover{ background:#fff; color:var(--tinta); }
.btn-oscuro{ background:var(--tinta); color:#fff; border-color:var(--tinta); }
.btn-oscuro:hover{ background:#fff; color:var(--tinta); }
.btn-wa{ background:var(--whatsapp); color:#fff; border-color:var(--whatsapp); }
.btn-wa:hover{ background:#1eb757; color:#fff; }

/* ---------- cifras ---------- */
.cifras{ background:var(--tinta); color:#fff; padding:44px 20px; }
.cifras .rejilla{
  max-width:var(--ancho); margin:0 auto; text-align:center;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:32px;
}
.cifras .numero{ font-family:var(--serif); font-size:44px; line-height:1; }
.cifras .etiqueta{ font-size:11px; letter-spacing:.24em; opacity:.7; margin-top:8px; }

/* columnas emparejadas: la foto crece a la altura del texto */
.dos-columnas.igualadas{ align-items:stretch; }
.dos-columnas.igualadas > div{ display:flex; flex-direction:column; justify-content:center; }
.dos-columnas.igualadas .foto-equipo{ height:100%; min-height:340px; flex:1; }

/* ---------- secciones genéricas ---------- */
.seccion{ max-width:var(--ancho); margin:0 auto; padding:clamp(60px,9vw,100px) 20px; }
.ancla{ height:1px; }
.etiqueta{ font-size:11px; letter-spacing:.34em; color:var(--gris); margin-bottom:14px; }
.titulo{ font-size:clamp(34px,4.4vw,46px); margin:0 0 12px; line-height:1.15; }
.centrado{ text-align:center; }
.parrafo{ font-weight:300; font-size:18px; line-height:1.85; margin:0 0 20px; color:var(--tinta-suave); text-wrap:pretty; }

/* quiénes somos */
.dos-columnas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(36px,6vw,70px); align-items:center;
}
.foto-equipo{ width:100%; height:clamp(300px,42vw,480px); object-fit:cover; display:block; }
.pie-foto{ display:flex; align-items:center; gap:14px; margin-top:18px; font-size:12px; letter-spacing:.16em; color:var(--gris); }
.datos-clave{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px;
  border-top:1px solid var(--linea); padding-top:22px; font-size:14px; color:var(--tinta-suave);
}
.datos-clave strong{ font-weight:700; display:block; margin-bottom:4px; }

/* ---------- bandas con imagen de fondo ---------- */
.banda{ position:relative; padding:clamp(70px,10vw,110px) 20px; background-size:cover; background-position:center; }
.banda .velo{ position:absolute; inset:0; }
.banda .contenido{ position:relative; margin:0 auto; color:#fff; text-align:center; }
@media (hover:hover) and (min-width:900px){ .banda{ background-attachment:fixed; } }

/* rejilla de servicios */
.servicios{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.22);
  text-align:left;
}
.servicio{ background:rgba(17,17,17,.55); padding:28px 26px; backdrop-filter:blur(2px); }
.servicio h3{
  font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; margin:0 0 10px; color:#fff;
}
.servicio p{ font-weight:300; font-size:14.5px; line-height:1.75; margin:0; color:rgba(255,255,255,.82); }

.lista-servicios{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 40px;
  text-align:left; font-weight:300; font-size:16px;
}
.lista-servicios li{ border-top:1px solid rgba(255,255,255,.28); padding:15px 2px; list-style:none; }
.lista-servicios{ margin:0; padding:0; }
.lista-servicios li.ancho{ grid-column:1/-1; text-align:center; border-bottom:1px solid rgba(255,255,255,.28); }

.pildoras{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding:0; margin:0; }
.pildoras li{ border:1px solid rgba(255,255,255,.6); padding:12px 26px; font-size:12.5px; letter-spacing:.16em; list-style:none; }

/* ---------- menús / tarjetas ---------- */
.tarjetas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(36px,5vw,52px); }
.tarjeta{ text-align:center; }
.tarjeta img{ width:190px; height:190px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 26px; }
.tarjeta h3{ font-weight:600; font-size:25px; margin:0 0 16px; }
.tarjeta p{ font-weight:300; font-size:15px; line-height:1.8; color:#4a4a4a; margin:0 0 14px; }
.enlace-sub{ font-size:12px; letter-spacing:.2em; border-bottom:1px solid var(--tinta); padding-bottom:3px; }

/* ---------- testimonios ---------- */
.clientes{ background:var(--crema); padding:clamp(60px,9vw,100px) 20px; }
.clientes .interior{ max-width:var(--ancho); margin:0 auto; }
.rejilla-testimonios{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:26px; }
.testimonio{
  background:#fff; border:1px solid #e8e4df; padding:36px 32px; margin:0;
  display:flex; flex-direction:column; gap:22px;
}
.testimonio .comilla{ font-family:var(--serif); font-size:44px; line-height:.6; color:#c9c2b8; }
.testimonio blockquote{ margin:0; font-weight:300; font-size:16px; line-height:1.8; color:var(--tinta-suave); flex:1; text-wrap:pretty; }
.testimonio figcaption{ border-top:1px solid #e8e4df; padding-top:18px; }
.testimonio .nombre{ font-size:14px; font-weight:700; }
.testimonio .cargo{ font-size:12.5px; color:var(--gris); margin-top:4px; }
.testimonio .servicio{ font-size:11px; letter-spacing:.2em; color:#b0a89d; margin-top:10px; }

.logos{ margin-top:52px; border-top:1px solid #e2ddd6; padding-top:34px; }
.logos .titulillo{ text-align:center; font-size:11px; letter-spacing:.28em; color:#a09789; margin-bottom:24px; }
.logos .fila{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.logos .fila div{ border:1px solid #ddd7ce; color:#8a8175; padding:14px 26px; font-size:12.5px; letter-spacing:.16em; background:#fff; }
.nota{ text-align:center; font-size:11.5px; color:#a09789; margin-top:18px; }

/* ---------- certificados ---------- */
.sello{ width:104px; height:auto; display:block; margin:0 auto 26px; background:#fff; border-radius:50%; padding:12px; }

/* ---------- expediente de cumplimiento ---------- */
.expediente{ background:var(--crema); padding:clamp(60px,9vw,100px) 20px; }
.expediente .interior{ max-width:var(--ancho); margin:0 auto; }
.expediente .intro{ max-width:660px; margin:0 auto 56px; text-align:center; }
.expediente .intro p{ font-weight:300; font-size:17px; line-height:1.8; color:var(--tinta-suave); margin:0; }
.rejilla-expediente{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2px; background:#e2ddd6; border:1px solid #e2ddd6; }
.punto{ background:#fff; padding:30px 28px; display:flex; gap:18px; align-items:flex-start; }
.punto .num{
  font-family:var(--serif); font-size:22px; line-height:1; color:#b0a89d;
  border:1px solid #ddd7ce; width:44px; height:44px; flex:0 0 44px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.punto h3{ font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:.02em; margin:0 0 8px; }
.punto p{ font-weight:300; font-size:14.5px; line-height:1.75; color:#4a4a4a; margin:0; }
.cierre-expediente{
  margin-top:34px; background:var(--tinta); color:#fff; padding:34px 30px; text-align:center;
}
.cierre-expediente .lema{ font-family:var(--serif); font-size:clamp(22px,3vw,29px); font-weight:300; margin:0 0 10px; line-height:1.35; }
.cierre-expediente p{ font-weight:300; font-size:15px; opacity:.85; margin:0 0 24px; }

/* ---------- páginas interiores ---------- */
.cabecera-pagina{ position:relative; padding:clamp(70px,10vw,120px) 20px; background-size:cover; background-position:center; }
.cabecera-pagina .velo{ position:absolute; inset:0; background:rgba(0,0,0,.62); }
.cabecera-pagina .contenido{ position:relative; max-width:820px; margin:0 auto; text-align:center; color:#fff; }
.cabecera-pagina p.bajada{ font-weight:300; font-size:clamp(16px,2vw,18px); line-height:1.7; margin:14px auto 0; max-width:620px; opacity:.92; }

.linea-tiempo{ max-width:820px; margin:0 auto; padding:0; list-style:none; }
.linea-tiempo li{ display:grid; grid-template-columns:130px 1fr; gap:26px; padding:30px 0; border-top:1px solid var(--linea); }
.linea-tiempo .anio{ font-family:var(--serif); font-size:34px; line-height:1; color:var(--tinta); }
.linea-tiempo h3{ font-family:var(--sans); font-size:16px; font-weight:700; margin:0 0 10px; }
.linea-tiempo p{ font-weight:300; font-size:16px; line-height:1.8; color:var(--tinta-suave); margin:0; }

.mosaico{ display:grid; grid-template-columns:1fr; gap:3px; }
@media (min-width:620px){ .mosaico{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){
  .mosaico-3{ grid-template-columns:repeat(3,1fr); }
  .mosaico-4{ grid-template-columns:repeat(4,1fr); }
}
.mosaico figure{ margin:0; position:relative; }
.mosaico img{ width:100%; height:260px; object-fit:cover; display:block; }
.mosaico img{ height:300px; }
.mosaico figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:44px 18px 16px; color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55) 45%,rgba(0,0,0,.86));
}
.mosaico figcaption b{
  display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; margin-bottom:7px;
}
.mosaico figcaption span{
  display:block; font-weight:300; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.88);
}

.tres-cajas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; }
.caja{ border:1px solid var(--linea); padding:34px 30px; }
.caja h3{ font-size:23px; font-weight:600; margin:0 0 14px; }
.caja p{ font-weight:300; font-size:15.5px; line-height:1.8; color:var(--tinta-suave); margin:0 0 12px; }
.caja ul{ margin:0; padding-left:18px; font-weight:300; font-size:15px; line-height:1.9; color:var(--tinta-suave); }

.pasos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:30px; counter-reset:paso; }
.paso{ border-top:2px solid var(--tinta); padding-top:20px; }
.paso .n{ font-size:11px; letter-spacing:.28em; color:var(--gris); display:block; margin-bottom:10px; }
.paso h3{ font-family:var(--sans); font-size:16px; font-weight:700; margin:0 0 10px; }
.paso p{ font-weight:300; font-size:15px; line-height:1.75; color:var(--tinta-suave); margin:0; }

.equipo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px; }
.persona{ border-top:1px solid var(--linea); padding-top:18px; }
.persona .nombre{ font-size:16px; font-weight:700; margin-bottom:6px; }
.persona .puesto{ font-weight:300; font-size:14.5px; color:var(--tinta-suave); }

.cita-bloque{
  max-width:760px; margin:0 auto; text-align:center; font-family:var(--serif);
  font-size:clamp(22px,3.2vw,30px); font-weight:300; line-height:1.5; color:var(--tinta);
}

@media (max-width:600px){
  .linea-tiempo li{ grid-template-columns:1fr; gap:10px; }
  .linea-tiempo .anio{ font-size:28px; }
  .mosaico img{ height:210px; }
}

/* ---------- formulario ---------- */
.formulario{ max-width:900px; margin:0 auto; padding:clamp(60px,9vw,100px) 20px; text-align:center; }
.campos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; text-align:left; }
.campos label{ display:block; }
.campos label.ancho{ grid-column:1/-1; }
.campos .rotulo{ font-size:11px; letter-spacing:.2em; color:var(--gris); display:block; }
.campos input,.campos select,.campos textarea{
  width:100%; border:0; border-bottom:1px solid #cfcfcf; padding:11px 0; font-size:15px;
  outline:none; background:transparent; border-radius:0; color:var(--tinta);
}
.campos textarea{ resize:vertical; }
.campos input:focus,.campos select:focus,.campos textarea:focus{ border-bottom-color:var(--tinta); }
.campos input[aria-invalid="true"],.campos textarea[aria-invalid="true"]{ border-bottom-color:#a33a2c; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.envio{ margin-top:38px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.mensaje-error{ font-size:13.5px; color:#a33a2c; }
.mensaje-ok{ font-size:14px; color:#2f6b3f; }
.privacidad{ font-size:12px; color:var(--gris); max-width:520px; margin:0 auto; line-height:1.6; }

/* ---------- galería (usa también las clases de .mosaico) ---------- */
.galeria{ display:grid; grid-template-columns:1fr; gap:3px; }
@media (min-width:620px){ .galeria{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .galeria{ grid-template-columns:repeat(4,1fr); } }

/* ---------- accesos a páginas interiores ---------- */
.accesos{ display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,40px); }
@media (min-width:800px){ .accesos{ grid-template-columns:repeat(2,1fr); } }
.acceso{
  display:flex; flex-direction:column; border:1px solid var(--linea);
  color:var(--tinta); transition:border-color .2s;
}
.acceso:hover{ border-color:var(--tinta); color:var(--tinta); }
.acceso img{ width:100%; height:clamp(200px,26vw,280px); object-fit:cover; display:block; }
.acceso .cuerpo{ padding:clamp(26px,3.5vw,36px); display:flex; flex-direction:column; flex:1; }
.acceso h3{ font-size:clamp(26px,3vw,32px); font-weight:400; margin:0 0 14px; }
.acceso .txt{ font-weight:300; font-size:15.5px; line-height:1.8; color:var(--tinta-suave); margin:0 0 26px; flex:1; }
.acceso .btn{ align-self:flex-start; }
.acceso:hover .btn{ background:#fff; color:var(--tinta); }

/* ---------- pie ---------- */
.pie{ position:relative; padding:clamp(60px,9vw,96px) 20px 60px; background:url('media/strip-especiales.jpg') center/cover; }
.pie .velo{ position:absolute; inset:0; background:rgba(0,0,0,.74); }
.pie .contenido{ position:relative; max-width:900px; margin:0 auto; text-align:center; color:#fff; }
.pie img{ width:104px; display:block; margin:0 auto 24px; filter:invert(1); }
.pie .lema{ font-family:var(--serif); font-size:clamp(26px,3.6vw,34px); font-weight:300; line-height:1.4; }
.pie .contactos{ margin-top:26px; font-size:14px; opacity:.9; display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.pie .contactos a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.5); }
.pie .horario{ margin-top:12px; font-size:13px; opacity:.6; }
.pie .legal{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.22);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:11.5px; letter-spacing:.16em; opacity:.7;
}
.pie .legal a{ color:#fff; }

/* ---------- botón flotante WhatsApp ---------- */
.wa-flotante{
  position:fixed; right:20px; bottom:20px; z-index:60; display:flex; align-items:center; gap:10px;
  background:var(--whatsapp); color:#fff; padding:14px 20px; border-radius:999px;
  box-shadow:0 6px 22px rgba(0,0,0,.24); font-size:13px; letter-spacing:.06em; min-height:48px;
}
.wa-flotante:hover{ background:#1eb757; color:#fff; }

/* ---------- responsivo ---------- */
@media (max-width:860px){
  .menu-btn{ display:block; }
  .nav{
    display:none; width:100%; order:3; margin-left:0; flex-direction:column;
    align-items:flex-start; gap:0; border-top:1px solid var(--linea); padding-top:8px; margin-top:10px;
  }
  .nav.abierto{ display:flex; }
  .nav a{ padding:12px 0; width:100%; border-bottom:1px solid #f1f1f1; }
  .encabezado .interior{ flex-wrap:wrap; }
  .hero{ min-height:520px; padding:80px 20px; }
  .wa-flotante{ right:14px; bottom:14px; padding:14px 18px; }
  .galeria img{ height:220px; }
}

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

/* ============================================================
   AJUSTES MÓVIL — áreas táctiles y anchos seguros
   ============================================================ */
@media (max-width:860px){
  /* enlaces de texto: área táctil mínima cómoda */
  .barra a,
  .pie .contactos a,
  .pie .legal a,
  .privacidad a,
  .formulario a[href^="tel"],
  .formulario a[href^="mailto"],
  .enlace-sub{
    display:inline-block; padding:9px 4px; min-height:40px; line-height:22px;
  }
  .barra{ padding:4px 16px; gap:4px 12px; }
  .barra .sep{ display:none; }
  .pie .contactos{ gap:6px 20px; }
  .pie .legal{ justify-content:center; text-align:center; gap:6px 16px; }

  /* ninguna rejilla fuerza un ancho mayor que la pantalla */
  .dos-columnas,
  .tarjetas, .tres-cajas, .modelos, .dolor, .pasos, .equipo,
  .rejilla-testimonios, .rejilla-expediente, .campos, .datos-clave,
  .servicios, .cifras .rejilla{
    grid-template-columns:1fr;
  }
  .lista-servicios{ grid-template-columns:1fr; }
  .mosaico img, .galeria img{ height:240px; }
  .btn{ padding:15px 26px; }
  .acciones .btn{ width:100%; }
}

@media (max-width:400px){
  .marca{ font-size:18px; letter-spacing:.14em; }
  .encabezado img{ height:40px; }
  .mosaico figcaption, .galeria figcaption{ padding:36px 14px 14px; }
  .mosaico figcaption span, .galeria figcaption span{ font-size:12.5px; }
}