/* =====================================
   APROSA – CSS limpio y MOBILE-FIRST
   (reordenado, sin duplicados evidentes)
   -------------------------------------
   Convención de breakpoints (min-width):
   -- sm: 560px, md: 640px, lg: 900px, xl: 1024px, 2xl: 1200px
   ===================================== */

/* ============================
   1) VARIABLES
============================ */
:root{
  /* Colores base */
  --color-azul:#5882c1;
  --color-naranja:#f07f39;
  --color-gris-claro:#f2f2f2;
  --color-texto:#333;
  --color-blanco:#fff;
  --color-footer:#2e6eb6;   /* (en uso indirecto) */
  --color-footer-bajo:#1d4c80;/* (en uso indirecto) */

  /* Fondos de secciones (por defecto) */
  --serv-bg:#f5f7fa;
  --contact-bg:#f2f0ee;
}

/* Modificadores de fondo por tema */
.bg--gris{ --serv-bg:#f5f7fa; --contact-bg:#f2f0ee; }
.bg--azul{ --serv-bg:#eef6ff; --contact-bg:#f2f0ee; }

/* ============================
   2) RESET / BASE
============================ */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:100%}
html,body{height:100%}
body{
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:400; line-height:1.6; font-size:1rem;
  color:var(--color-texto);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease}
a:hover{color:var(--color-naranja)}

/* ============================
   3) TIPOGRAFÍA
============================ */
h1,h2,h3,h4,h5,h6{
  font-weight:700; line-height:1.3; color:var(--color-texto);
  margin-bottom:1rem;
}
h1{font-size:2.2rem}
h2{font-size:1.8rem}
h3{font-size:1.3rem}
h4{font-size:1.05rem}
p{font-size:1.1rem;margin-bottom:1.1rem;color:#555}

@media (min-width:640px){ h1{font-size:2.6rem} h2{font-size:2rem} }
@media (min-width:1024px){ h1{font-size:2.8rem} h3{font-size:1.4rem} }


header {
  transition: background .25s ease, box-shadow .25s ease;
}
header.is-hero{
  background: transparent !important;
  box-shadow: none !important;
}





/* Ya tienes un degradado en .hero-int::before; lo mantenemos para el top */


/* ============================
   4) BOTONES
============================ */
.botH, button, .btnNaranja, .btnContacto{
  font-weight:700; font-size:.95rem; text-transform:uppercase;
  background:var(--color-naranja); color:#fff!important;
  padding:12px 28px; border:0; border-radius:0; display:inline-block;
  cursor:pointer; transition:background .25s ease;
}
.botH:hover,button:hover,.btnNaranja:hover,.btnContacto:hover{background:#d96e2e}

/* ============================
   5) LAYOUT / CONTENEDORES
============================ */
.Contenedor100{width:100%}
.ContenidoCentrado{max-width:1200px;margin:0 auto;padding:0 20px}

/* Utilidades de grid y cards reutilizables */
.grid2{display:grid; grid-template-columns:1fr; gap:2rem; margin:40px 0}
.grid3{display:grid; grid-template-columns:1fr; gap:2rem; margin:40px 0}
@media (min-width:900px){ .grid2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .grid3{grid-template-columns:repeat(3,1fr)} }

.card{background:#fff;border:1px solid #e5e5e5;border-radius:8px;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,.05);transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-4px); box-shadow:0 6px 15px rgba(0,0,0,.1)}
.card h3{font-size:1.1rem;margin:15px 0 10px;color:var(--color-texto)}
.card p{margin:0 0 15px;color:#555}
@media (min-width:1024px){ .card h3{font-size:1.2rem} }

/* ============================
   6) HEADER + MENÚ
============================ */
header{
  position:fixed; inset:0 auto auto 0; height:72px; width:100%;
  display:flex; align-items:center; z-index:3000;
  background:#fff; transition:background .3s, box-shadow .3s; overflow:visible;
  box-shadow:0 2px 5px rgba(0,0,0,.05);
}
header .ContenidoCentrado{display:flex; align-items:center; width:100%; gap:16px}
header .logo img{height:44px}

/* Estado sobre hero (opcional): añade .is-hero para degradado */
header.is-hero{background:transparent;box-shadow:none}
header.is-hero::before{
  content:""; position:absolute; inset:0; height:100%;
  background:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
  pointer-events:none; z-index:-1;
}
header.is-hero .menu>a, header.is-hero .menu>li>a, header.is-hero .langSwitch a, header.is-hero .langSwitch span{color:#fff}

/* Nav */
.mainNav{ margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:16px; min-width:auto; }
.menu{ list-style:none; display:flex; align-items:center; gap:16px }
.menu>li{ position:relative }
.menu>li>a{ display:inline-block; padding:22px 8px 16px; font-weight:500; font-size:1rem }

/* Columna derecha: idiomas + botón */
.navRight{display:flex; flex-direction:column; align-items:flex-end; gap:6px; min-width:140px}
.langSwitch{font-size:.75rem; font-weight:800; letter-spacing:.3px; line-height:1}
.btnContacto{padding:10px 18px}

@media (min-width:1200px){
  header{height:88px}
  header .logo img{height:52px}
  .menu{gap:28px}
  .menu>li>a{font-size:1.2rem; padding:30px 10px 20px}
}
@media (min-width:1024px){ .menu{gap:18px; font-size:.9375rem} header .logo img{height:48px} }

/* Submenús */
.submenu{
  position:absolute; top:100%; left:0;
  min-width:260px; max-width:360px; padding:14px 16px;
  list-style:none; display:none; background:#001940; color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.25); z-index:9999;
}
.has-sub:hover>.submenu, .has-sub:focus-within>.submenu{display:block}
.submenu a{display:block; padding:8px 0; color:#fff; font-weight:500}
.submenu a:hover{color:var(--color-naranja)}
.submenu .caret{margin-right:8px; opacity:.8}

/* ============================
   7) HERO HOME (cross-fade)
============================ */
.hero{position:relative; width:100%; height:60vh; overflow:hidden}
.hero-slider{position:relative; width:100%; height:100%; background:transparent}
.hero-slider .slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-color:transparent;
  opacity:0; transition:opacity .8s ease; will-change:opacity;
}
.hero-slider .slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.25));
}
.hero-slider .slide.active{opacity:1}
.hero-content{
  position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; color:#fff; max-width:900px; padding:0 20px;
}
.hero-content h1{font-size:2.2rem;font-weight:700;margin-bottom:10px;color:#fff}
.hero-content p{font-size:1.2rem;margin-bottom:20px;color:#fff;line-height:1.6}

@media (min-width:640px){ .hero{height:72vh} .hero-content h1{font-size:2.8rem} .hero-content p{font-size:1.4rem} }
@media (min-width:1200px){ .hero{height:80vh} .hero-content h1{font-size:3rem} .hero-content p{font-size:1.6rem} }

/* ============================
   8) HERO INTERIOR
============================ */
.hero-int{ position:relative; width:100%; min-height:60vh; color:#fff; isolation:isolate; overflow:hidden }
.hero-int__bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:translateZ(0); z-index:-2 }
.hero-int::before{
  content:""; position:absolute; inset:0 0 40% 0;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,0) 100%);
  z-index:-1;
}
.hero-int__inner{
  max-width:1200px; margin:0 auto;
  padding:clamp(20px,3vw,36px); padding-top:clamp(80px,12vh,140px);
  display:grid; grid-template-columns:1fr; gap:clamp(20px,4vw,48px); align-items:center;
}
.hero-int__copy{ max-width:680px; text-align:left }
.hero-int__title{font-size: clamp(28px,5vw,40px);line-height:1.1;margin:0 0 .35em;color:#fff}
.hero-int__subtitle{ font-size:clamp(16px,2.2vw,22px); font-weight:400; opacity:.95; margin:0 0 1.25rem; color:#fff }
.hero-int .btnNaranja{ text-transform:uppercase }

.hero-int__form{ justify-self:start; width:min(520px,100%) }
.form-int{
  background:rgba(255,255,255,.92); color:#222; border-radius:0; box-shadow:0 12px 30px rgba(0,0,0,.18);
  padding:clamp(16px,2.4vw,26px); backdrop-filter:blur(2px);
}
.form-int h3{ margin:0 0 .35rem; font-size:clamp(18px,2.4vw,24px); color:#111 }
.form-int__desc{ margin:0 0 .75rem; color:#555; font-size:.95rem }
.form-int__row{ display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:12px }
.form-int input,.form-int textarea{
  width:100%; border:1px solid #dde1e5; border-radius:0;
  padding:.75rem .8rem; font:inherit; outline:none; background:#fff;
}
.form-int textarea{ margin-bottom:.6rem }
.form-int input:focus,.form-int textarea:focus{ border-color:var(--color-naranja); box-shadow:0 0 0 3px rgba(240,127,57,.15) }

@media (min-width:1024px){
  .hero-int{ min-height:68vh }
  .hero-int__inner{ grid-template-columns:1.1fr .9fr }
  .hero-int__form{ justify-self:end }
  .form-int__row{ grid-template-columns:1fr 1fr }
}

/* ============================
   9) SECCIÓN – OBRAS FINALIZADAS
============================ */
.obrasFinalizadas{ padding: clamp(24px,4vw,48px) 0 clamp(40px,6vw,80px); }
.obrasGrid{ display:grid; grid-template-columns:1fr; gap:clamp(14px, 2vw, 24px); align-items:stretch }
@media (min-width:560px){ .obrasGrid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:900px){ .obrasGrid{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1200px){ .obrasGrid{ grid-template-columns:repeat(4,1fr) } }

.obraCard{ background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.08); display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease }
.obraCard:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12) }
.obraCard img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block }
.obraCard__text{ padding:14px 16px 16px }
.obraCard__title{ margin:0 0 4px; font-weight:800; font-size:clamp(16px,1.6vw,18px); color:#1d2246 }
.obraCard__loc{ margin:0; color:#6b7280; font-size:clamp(14px,1.4vw,16px) }

/* ============================
   10) SERVICIOS (INTRO + GRID)
============================ */
.hero--servicios .hero-content h1{ margin-bottom:.25em }
.hero--servicios .hero-content p{ font-size:clamp(16px,2vw,20px); max-width:48ch }

.servicios-intro, .servicios-grid{ background:var(--serv-bg) }

.servicios-intro{ padding:clamp(28px,5vw,56px) 0 0 }
.servicios-intro .ContenidoCentrado{ width:min(1100px,92vw) }
.servicios-intro h2{ margin:0 0 .5em }
.servicios-intro p{ margin:0 0 .8em; font-size:clamp(16px,1.8vw,18px); line-height:1.6 }

.servicios-grid{ padding:clamp(24px,4vw,48px) 0 clamp(40px,6vw,80px) }
.servGrid{ display:grid; grid-template-columns:1fr; gap:clamp(16px,2.5vw,28px); align-items:stretch }
@media (min-width:640px){ .servGrid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .servGrid{ grid-template-columns:repeat(3,1fr) } }

.servCard{
  background:#f07f39; color:#fff; text-align:center; padding:clamp(18px,3.2vw,32px);
  border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.08);
  display:flex; flex-direction:column; justify-content:center; min-height:200px;
}
.servCard h3{ margin:0 0 .6em; font-size:clamp(18px,2.2vw,22px); font-weight:700; color:#fff }
.servCard p{ margin:0; font-size:clamp(14px,1.8vw,16px); line-height:1.6; opacity:.98; color:#fff }

@media (hover:hover){ .servCard:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.12) } }

/* ============================
   11) PRÓXIMA OFICINA (UNIFICADO)
============================ */
.proxima-oficina{ padding:48px 0; background:#f2f0ee }
.proxima-oficina h2{ margin:0 auto 28px; text-align:center; line-height:1.25; font-size:1.5rem }
.proxima-oficina .grid2{ display:grid; grid-template-columns:1fr; gap:28px; align-items:start }

.proxima-oficina .card{ background:#fff; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.08); display:flex; flex-direction:column; height:100% }
.proxima-oficina .card>img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.proxima-oficina .card-content{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; height:100% }
.proxima-oficina .card-content h3{ font-size:clamp(1.15rem, 1vw + 1rem, 1.5rem); margin:0 }
.proxima-oficina .card-content em{ display:block; color:#555; font-style:italic }
.proxima-oficina .card-content p{ font-size:.95rem; color:#444 }
.proxima-oficina .card-content .btnNaranja{ margin-top:auto; align-self:flex-start }

@media (min-width:980px){
  .proxima-oficina{ padding:60px 0 }
  .proxima-oficina .grid2{ grid-template-columns:repeat(2,1fr) }
  .proxima-oficina h2{ font-size:1.6rem; margin-bottom:40px }
}
@media (max-width:980px){
  .proxima-oficina .card-content p{
    display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
  }
  .proxima-oficina .card-content .btnNaranja{ width:100%; text-align:center }
}

/* ============================
   12) OFICINAS DISPONIBLES (FONDO AZUL)
============================ */
.oficinas-disponibles{ background:var(--color-azul); color:#fff; text-align:center; padding:48px 20px }
.oficinas-disponibles h2{font-size:1.6rem; font-weight:700; margin-bottom:10px; text-transform:uppercase; color:#fff}
.oficinas-disponibles p{font-size:1rem; margin-bottom:28px; color:#fff}
.oficinas-disponibles .grid3{display:grid; grid-template-columns:1fr; gap:2rem}
@media (min-width:1024px){ .oficinas-disponibles .grid3{ grid-template-columns:repeat(3,1fr) } }

.oficinas-disponibles .card{ background:#fff; color:var(--color-texto); border-radius:0; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.15); display:flex; flex-direction:column; text-align:left }
.oficinas-disponibles .card img{width:100%; height:auto}
.oficinas-disponibles .card-content{padding:20px}
.oficinas-disponibles .card-content h3{font-size:1.15rem; font-weight:700; margin-bottom:10px}
.oficinas-disponibles .card-content h3 span{font-weight:400; font-style:italic; display:block; margin-top:4px}
.oficinas-disponibles .card-content p{font-size:.95rem; margin-bottom:20px; color:#444}
.oficinas-disponibles .btnNaranja{width:100%; text-align:center}

/* ============================
   13) BLOQUE FORMULARIO REUTILIZABLE
============================ */
.bloque-form{background:#fff; padding:48px 20px}
.formGrid{display:grid; grid-template-columns:1fr; gap:24px; align-items:start}
.formText h2{font-size:1.8rem; font-weight:800; margin-bottom:16px; color:var(--color-texto)}
.formText p{font-size:1.05rem; color:var(--color-texto)}
.formBox{width:100%}
.formBox .hp{position:absolute; left:-9999px; opacity:0; visibility:hidden}
.formRow{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px}
.formRow textarea{grid-column:1/-1}
.formBox input,.formBox textarea{
  width:100%; padding:14px 16px; font-size:.95rem;
  border:1px solid #d8d8d8; border-radius:0; background:#fff; color:var(--color-texto);
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.formBox input::placeholder,.formBox textarea::placeholder{color:#b7b7b7}
.formBox input:focus,.formBox textarea:focus{border-color:#c8c8c8; box-shadow:0 0 0 3px rgba(88,130,193,.15)}
.formActions{margin-top:10px}
.formActions .btnNaranja{padding:12px 28px}
@media (min-width:940px){ .formGrid{grid-template-columns:1fr 1.2fr} .formRow{grid-template-columns:1fr 1fr} }

/* ============================
   14) CONTACTO (INTRO + BLOQUE)
============================ */
.contacto-intro{ background:var(--contact-bg); padding:clamp(24px,5vw,48px) 0 0 }
.contacto-intro .ContenidoCentrado{ width:min(1100px,92vw) }
.contacto-intro h2{ margin:0 0 .4em }
.contacto-intro p{ margin:0; font-size:clamp(16px,1.8vw,18px); line-height:1.6; opacity:.9 }

.contacto{ background:var(--contact-bg); padding:clamp(20px,4vw,40px) 0 clamp(40px,6vw,80px) }
.contacto .ContenidoCentrado{ width:min(1200px,92vw) }
.contactoGrid{ display:grid; grid-template-columns:1fr; gap:clamp(16px,3vw,36px); align-items:stretch }

.contactoCard{ background:#fff; border-radius:12px; padding:clamp(18px,3vw,28px); box-shadow:0 8px 24px rgba(0,0,0,.08) }
.contactoCard h3{ margin:0 0 .6em; font-size:clamp(18px,2.2vw,22px); font-weight:800 }
.contactoCard address{ font-style:normal; color:#1d2246 }
.contactoCard .label{ color:#6b7280; display:inline-block; min-width:44px }
.contactoCard a{ color:#1d2246; text-decoration:none; border-bottom:1px solid rgba(29,34,70,.2) }
.contactoCard a:hover{ border-bottom-color:rgba(29,34,70,.5) }

.mapFrame{ position:relative; width:100%; border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.08); background:#f5f7fa; min-height:260px; aspect-ratio:1/1 }
.mapFrame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

@media (min-width:560px){ .mapFrame{ aspect-ratio:16/10; min-height:280px } }
@media (min-width:900px){ .contactoGrid{ grid-template-columns:1fr 1.2fr } .mapFrame{ aspect-ratio:4/3; min-height:320px } }

/* ============================
   15) CARRUSEL HORIZONTAL DE CARDS
============================ */
.cards-viewport{ position:relative; overflow:hidden; margin-top:24px; padding-inline:56px }
.cards-rail{ --gap:2rem; --cols:1; display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; -webkit-overflow-scrolling:touch; scroll-behavior:smooth }
.cards-rail::-webkit-scrollbar{display:none}
.cards-rail{ scrollbar-width:none }
.cards-rail .card{ flex:0 0 calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols)); scroll-snap-align:start }
@media (min-width:640px){ .cards-rail{ --cols:2 } }
@media (min-width:1024px){ .cards-rail{ --cols:3 } }

.rail-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border:0; border-radius:6px; background:rgba(0,0,0,.45); color:#fff; font-size:24px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.25) }
.rail-btn:hover{ background:rgba(0,0,0,.7) }
.rail-btn.prev{ left:8px } .rail-btn.next{ right:8px }

/* Estado centrado (sin scroll) */
.cards-viewport.is-centered .cards-rail{ justify-content:center; overflow:visible; scroll-snap-type:none }
.cards-viewport.is-centered .cards-rail .card{ flex:0 0 auto; width:clamp(280px, 32vw, 380px) }
.cards-viewport.is-centered .rail-btn{ display:none }

/* ============================
   16) FOOTER
============================ */
footer{background:#011f4b;color:#fff;margin-top:60px;font-size:.95rem}
.footerTop{padding:40px 20px}
.footerGrid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px}
.footerLeft img{height:40px; margin-bottom:20px}
.footerLeft ul{list-style:none; padding:0; margin:0}
.footerLeft li{margin-bottom:10px}
.footerLeft a{color:#fff; font-weight:500}
.footerLeft ul li > a{ font-weight:600; padding:4px 0; display:inline-block }
.footerLeft ul li ul{ margin-top:6px; margin-bottom:10px; padding-left:14px; border-left:2px solid rgba(255,255,255,.2) }
.footerLeft ul li ul li{ margin-bottom:6px }
.footerLeft ul li ul li a{ font-weight:400; font-size:.9rem; padding:2px 0; display:inline-block }
.footerRight{text-align:right}
.footerRight h3{font-size:1rem; font-weight:700; margin:20px 0 10px}
.footerRight p{margin-bottom:8px}
.footerRight a{color:#fff}
.btnFooter{display:inline-block; background:var(--color-naranja); color:#fff; padding:10px 20px; text-transform:uppercase; font-weight:600; margin-bottom:20px; border-radius:0}
.footerBottom{background:#f07f39;text-align:center;padding:20px 20px 10px;font-size:.85rem;color:#fff}
.footerBottom a{color:#fff; font-weight:500}
/* Forzar blanco en footer (seguridad) */
footer, footer *:not(.btnNaranja){color:#fff!important}
footer a:not(.btnNaranja){text-decoration:none}
footer a:not(.btnNaranja):hover{opacity:.85}

/* ============================
   17) AJUSTES / LEGADOS
============================ */
.resaltado{ display:none } /* no se usa en hero, mantenido por compatibilidad */


/* Oscurecer fondo en heroes (global) */
.hero-int,
.hero{ --hero-dim: .35; position: relative; }

/* Capa uniforme encima de la imagen */
.hero-int::after,
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--hero-dim));
  z-index: -1; /* por encima del bg, por debajo del contenido */
}

/* ====== Ajustes de cards ====== */
.oficinas-disponibles .cards-rail .card{
  /* ancho lo controla tu rail; aquí fijamos la altura y el layout vertical */
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:12px;
  overflow:hidden;              /* esconde sobrantes */
  height:500px;                 /* no superar 500px */
  max-height:500px;
}

/* Imagen: todas mismo alto (ratio 16:9) y recorte si son mayores */
.oficinas-disponibles .card > a{
  display:block;
  flex:0 0 auto;
  overflow:hidden;
  /* fallback para navegadores sin aspect-ratio */
  height:220px;
}
@supports (aspect-ratio: 16 / 9){
  .oficinas-disponibles .card > a{
    height:auto;
    aspect-ratio:16/9;          /* altura uniforme */
  }
}
.oficinas-disponibles .card > a img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;             /* recorta si es más grande */
}

/* Contenido en columna y botón abajo */
.oficinas-disponibles .card-content{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;                /* ocupa el resto de la tarjeta */
  min-height:0;                 /* permite que el párrafo se recorte */
  padding:1.25rem 1.25rem 1.5rem;
}

.oficinas-disponibles .card-content h3{
  margin:0 0 .5rem;
}

/* Texto recortado con elipsis */
.oficinas-disponibles .card-content p{
  margin:0 0 1rem;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:6;         /* ajusta líneas visibles si quieres */
}

/* Botón siempre pegado al fondo de la card */
.oficinas-disponibles .card-content .btnNaranja{
  margin-top:auto;              /* empuja el botón hacia abajo */
  align-self:flex-start;        /* opcional: evita estirarse a 100% */
}


/* ===== Sección Esencial + Especificaciones ===== */
.ventajas-especificaciones{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* dos columnas iguales */
  gap: 28px;
  align-items: stretch;             /* ambas a la misma altura */
}

/* Tarjetas de cada columna */
.ventajas-especificaciones > .esencial,
.ventajas-especificaciones > .especificaciones{
  background: #F6F7FA;              /* color de fondo para ambas */
  border-radius: 14px;
  /* box-shadow: 0 8px 20px rgba(0,0,0,.06); */
  padding: clamp(16px, 2vw, 32px);
  display: flex;
  flex-direction: column;           /* el contenido crece en columna */
  min-height: 100%;
}

/* La derecha ya tenía .box: lo neutralizamos y lo hacemos flexible */
.ventajas-especificaciones .especificaciones .box{
  background: transparent;          /* quita doble fondo si existía */
  box-shadow: none;
  padding: 0;
  margin: 0;
  flex: 1;                          /* ocupa toda la altura disponible */
}

/* Ajustes suaves de tipografía/espacios (opcional) */
.ventajas-especificaciones h2{ margin: 0 0 12px; }
.ventajas-especificaciones p{ margin: 0 0 16px; }

/* Responsive */
@media (max-width: 900px){
  .ventajas-especificaciones{
    grid-template-columns: 1fr;     /* apila en móvil */
  }
}

.hero .hero-content,
.hero .hero-content *{ color:#fff !important; opacity:1 !important; }


/* ======== MENÚ MÓVIL — BLOQUE ÚNICO ======== */

/* Botón hamburguesa (base) */
.navToggle{
  display:none; position:relative; width:42px; height:42px;
  border:0; background:transparent; cursor:pointer; margin-left:auto;
}
.navToggle__bar{
  position:absolute; left:9px; right:9px; height:2px; top:12px;
  background:currentColor; transition:transform .2s ease, opacity .2s ease;
}
.navToggle__bar:nth-child(2){ top:20px }
.navToggle__bar:nth-child(3){ top:28px }

/* Animación a “X” */
header.is-open .navToggle__bar:nth-child(1){ transform:translateY(8px) rotate(45deg) }
header.is-open .navToggle__bar:nth-child(2){ opacity:0 }
header.is-open .navToggle__bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

/* Evitar scroll del body con menú abierto */
body.site--noScroll{ overflow:hidden }

/* ===== Responsive ===== */
@media (max-width:900px){
  /* Z-index para que el panel quede por encima de todo */
  header{ z-index:4000; }
  .mainNav{ z-index:3999; }

  /* Mostrar hamburguesa; blanca sobre hero, oscura cuando abierto */
  .navToggle{ display:block; color:#111; }
  header.is-hero .navToggle{ color:#fff; }
  header.is-open .navToggle{ color:#111; }

  /* Barra superior blanca cuando el menú está abierto */
  header.is-open{
    background:#fff !important;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
  }
  header.is-open::before{ display:none; } /* quita degradado del is-hero */

  /* Panel del menú (desplegable) */
  .mainNav{
    position:fixed; left:0; right:0; top:72px; /* altura de tu header */
    background:#001940; /* azul panel */
    border-top:1px solid rgba(0,0,0,.06);
    max-height:0; overflow:hidden; visibility:hidden;
    display:block; padding:0; transition:max-height .25s ease, visibility .25s ease;
  }
  header.is-open .mainNav{
    max-height:calc(100vh - 72px);
    visibility:visible; overflow:auto;
  }

  /* Nivel 1 (títulos de sección) */
  .menu{ display:block; padding:8px 0; }
  .menu>li{ border-bottom:1px solid rgba(255,255,255,.12); }
  .menu>li>a{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 16px;
    color:#fff !important; font-weight:800; background:transparent;
    transition:color .2s ease, background .2s ease;
  }
  .menu>li>a:hover,
  .menu>li>a:active,
  .has-sub.is-open > a{
    color:var(--color-naranja) !important;
    background:rgba(255,255,255,.08);
  }

  /* Nivel 2 (submenús) — acordeón, 100% de ancho */
  .submenu{
    position:static !important; display:block !important; width:100%;
    max-height:0; overflow:hidden; padding:0; margin:0;
    background:transparent; transition:max-height .22s ease;
  }
  .has-sub.is-open > .submenu{ max-height:700px; }

  .submenu li{ border-top:1px solid rgba(255,255,255,.10); }
  .submenu a{
    display:block; width:100%;
    padding:14px 22px 14px 28px; /* sangría para diferenciar */
    color:#fff !important; background:rgba(255,255,255,.04);
    transition:color .2s ease, background .2s ease;
  }
  .submenu a:hover,
  .submenu a:active{
    color:var(--color-naranja) !important;
    background:rgba(255,255,255,.12);
  }

  /* Caret visible (y naranja en activo) */
  .menu .caret{ color:#fff; opacity:.8; margin-right:8px; }
  .has-sub.is-open > a .caret,
  .submenu a:hover .caret{ color:var(--color-naranja); opacity:1; }

  /* Bloque derecho dentro del panel */
  .navRight{ border-top:1px solid rgba(255,255,255,.15); padding:16px; }
  .btnContacto{ width:100%; text-align:center; }

  /* Accesibilidad foco teclado */
  .menu a:focus-visible{ outline:2px solid var(--color-naranja); outline-offset:2px; }
}



/* ===== Vídeo centre ===== */
.video-centre{ margin: 28px 0; }
.video-centre__frame{
  width:100%;
  aspect-ratio:16/9;           /* manté 16:9 responsive */
  overflow:hidden;
  border-radius:12px;          /* opcional */
}
.video-centre__media{
  width:100%; height:100%;
  object-fit:cover;            /* omple sense bandes negres */
  display:block;
}