/* ===========================================================
   USTH by ComCargo S.R.L. — Estructura (HEADER / HERO)
=========================================================== */

/* ---------- HEADER ---------- */

header{
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(253,253,251,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11,39,51,0.06);
  transition: box-shadow .3s ease, height .3s ease;
}

header.scrolled{
  box-shadow: 0 6px 24px rgba(11,39,51,0.08);
  height: 88px;
}

.nav-wrap{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 56px;
}

/* Logo */

.logo{
  display: flex;
  align-items: center;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.logo img{
  height: 84px;
  width: auto;
  display: block;
  transition: height .3s ease;
}

header.scrolled .logo img{
  height: 62px;
}

/* Nav links */

nav.links{
  display: flex;
  align-items: center;
  gap: 34px;
  margin-right: auto;
}

nav.links a{
  position: relative;
  text-decoration: none;
  color: var(--dark);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: 0.3px;
  padding: 8px 2px;
}

/* CTA button */

.cta{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--green);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  padding: 15px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.cta svg{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Mobile toggle */

.burger{
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.burger span{
  width: 24px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
}

.mobile-panel{
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid rgba(11,39,51,0.08);
  box-shadow: 0 12px 24px rgba(11,39,51,0.08);
  padding: 8px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 99;
}

.mobile-panel a{
  text-decoration: none;
  color: var(--dark);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(11,39,51,0.06);
}

.mobile-panel a.active{
  color: var(--green);
}

.mobile-panel .cta{
  margin-top: 14px;
  justify-content: center;
}

/* ---------- HERO ---------- */

.hero{
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0D3B47 0%, #071F27 70%);
  min-height: 620px;
}

.hero-photo{
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: circle(clamp(660px, calc(0.4vw - 140px), 820px) at 80% 87%);
}

.hero-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.hero-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, #071F27 100%);
  pointer-events: none;
}

.hero-rim{
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: circle(clamp(667px, calc(0.4vw - 133px), 827px) at 80% 87%);
  background: #6FD08A;
}

.hero-inner{
  position: relative;
  z-index: 3;
  max-width: 1400px;
  margin: 0 auto;
  padding: 76px 40px 130px;
  display: flex;
  align-items: center;
}

.hero-content{
  width: 100%;
  max-width: 680px;
  color: #fff;
}

.hero-content h1{
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(27px, calc(2.9vw - 10px), 46px);
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.hero-content h1 span{
  display: block;
  color: #8FD2A7;
  position: relative;
}

.hero-sub{
  margin-top: 24px;
  font-size: 23px;
  font-weight: 700;
  color: #ffffff;
  max-width: 480px;
  line-height: 1.4;
  padding-bottom: 24px;
  border-bottom: 2px solid rgba(143,210,167,0.5);
}

.hero-features{
  list-style: none;
  display: flex;
  gap: 40px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.hero-features li{
  display: flex;
}

.hero-features li a{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  width: 150px;
  text-decoration: none;
  padding: 8px;
  border-radius: 12px;
  transition: background .2s ease, transform .2s ease;
}

.hero-features li a:hover{
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}

.hero-features li a:hover svg{
  color: #fff;
}

.hero-features svg{
  width: 38px;
  height: 38px;
  color: #8FD2A7;
  fill: none;
  stroke: currentColor;
}

.hero-features strong{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #fff;
}

.hero-features span{
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #8FD2A7;
  margin-top: -8px;
}

/* Value strip */

.value-strip-wrap{
  position: relative;
  z-index: 4;
  max-width: 1300px;
  margin: -55px auto 0;
  padding: 0 24px;
}

.value-strip{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(11,39,51,0.14);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 30px 20px;
}

.value-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 22px;
  border-right: 1px solid rgba(11,39,51,0.08);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.value-item:last-child{
  border-right: none;
}

.value-item svg{
  width: 30px;
  height: 30px;
  color: var(--green);
  flex-shrink: 0;
}

.value-item strong{
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dark);
}

.value-item span{
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}



/* ---------- NOSOTROS ---------- */

.nosotros{
  position: relative;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;

  background-image: url("../images/nosotros-bg.jpg");
  background-size: cover;
  background-position: center 16%;
  background-attachment: fixed;
}

/* Oscurecimiento parejo (no direccional) — mismo tono oscuro de marca del HERO */

.nosotros-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(7,32,40,0.82) 0%,
    rgba(7,32,40,0.68) 30%,
    rgba(7,32,40,0.35) 55%,
    rgba(7,32,40,0.10) 80%,
    rgba(7,32,40,0.02) 100%);
}

/* Franja de costura: arranca en el mismo color donde termina el HERO
   y se desvanece a transparente — la sección "continúa" el paisaje
   en vez de cortar contra una foto distinta. */

.nosotros-seam{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(27,71,80,0.65) 0%, rgba(27,71,80,0) 100%);
  pointer-events: none;
}

.nosotros-inner{
  position: relative;
  z-index: 3;
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 40px 100px;
  width: 100%;
}

.section-eyebrow{
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--sage);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.nosotros-title{
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(27px, calc(2.9vw - 10px), 46px);
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  max-width: 640px;
}

.nosotros-title span{
  color: #8FD2A7;
}

.nosotros-body{
  margin-top: 24px;
  font-size: 19px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  max-width: 560px;
  line-height: 1.6;
}

.nosotros-scope-label{
  margin-top: 30px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--sage);
  max-width: 500px;
  line-height: 1.5;
}

.scope-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 32px;
}

.scope-list{
  list-style: none;
  display: flex;
  gap: 88px;
  flex-wrap: wrap;
}

.scope-list li{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.scope-list svg{
  width: 40px;
  height: 40px;
  color: #8FD2A7;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}

.scope-list span{
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

/* ---------- CINTA DE MÉTRICAS (entre HERO y NOSOTROS) ----------
   Color de transición: ni el oscuro casi negro del HERO ni el
   overlay con foto de NOSOTROS — un teal intermedio propio,
   que además sirve de divisor visual entre ambas secciones. */

.metrics-ribbon{
  background: #1B4750;
  padding: 26px 0;
  position: relative;
}

.metrics-ribbon-inner{
  list-style: none;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}

.metrics-ribbon-inner li{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.metrics-ribbon-inner strong{
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: #8FD2A7;
  line-height: 1;
  transform-origin: left center;
  transition: color .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}

.metrics-ribbon-inner li:hover strong{
  color: #ffffff;
  transform: scale(1.15);
}

.metrics-ribbon-inner span{
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.94);
  max-width: 170px;
  line-height: 1.4;
}

/* Link de cierre — discreto, borde tenue que se ilumina al hover */

.nosotros-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding: 13px 24px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease;
}

.nosotros-link svg{
  width: 17px;
  height: 17px;
  transition: transform .25s ease;
}

.nosotros-link:hover{
  border-color: var(--sage);
  background: rgba(111,163,130,0.12);
}

.nosotros-link:hover svg{
  transform: translateX(3px);
}


/* ---------- SERVICIOS ---------- */

.servicios{
  background: var(--bg);
  padding: 70px 0;
}

.servicios-inner{
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}

.servicios-title{
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(27px, calc(2.9vw - 10px), 42px);
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: var(--dark);
  max-width: 720px;
  margin-top: 14px;
}

.servicios-title span{
  color: var(--green);
}

.servicio-tag{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}

.servicios-scope-label{
  margin-top: 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  max-width: 600px;
  line-height: 1.5;
}

.servicios-tags{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--green);
}

.servicios-tags span{
  color: var(--text-muted);
  font-weight: 400;
  margin: 0 4px;
}

/* Bloque destacado: servicio madre de ComCargo — franja horizontal compacta */

.servicio-madre{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 28px;
  padding: 22px 28px;
  background: var(--green-light);
  border-radius: 14px;
}

.servicio-madre svg{
  width: 34px;
  height: 34px;
  color: var(--green-dark);
  flex-shrink: 0;
}

.servicio-madre-logo{
  width: 68px;
  height: auto;
  flex-shrink: 0;
}

.servicio-madre-heading{
  flex: 0 0 auto;
  min-width: 220px;
}

.servicio-madre-heading h3{
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
}

.servicio-madre p{
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 560px;
  flex: 1 1 300px;
  margin: 0;
}

/* Grilla de 3 tarjetas USTH, con borde */

.servicios-extension{
  margin-top: 18px;
  font-size: 14px;
  font-style: italic;
  color: var(--text-muted);
  max-width: 620px;
}

.servicios-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 20px;
}

.servicio-card{
  position: relative;
  height: 320px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(11,39,51,0.12);
  box-shadow: 0 4px 14px rgba(11,39,51,0.06);
  transition: box-shadow .25s ease, transform .25s ease;
  outline: none;
}

.servicio-card:hover,
.servicio-card.is-expanded,
.servicio-card:focus-visible{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(11,39,51,0.14);
}

.servicio-card-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform .5s ease;
}

.servicio-card:hover .servicio-card-bg{
  transform: scale(1.05);
}

.servicio-card-scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,39,51,.88) 0%, rgba(11,39,51,.2) 42%, transparent 62%);
  pointer-events: none;
}

.servicio-card-heading{
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 1;
  transition: opacity .25s ease;
}

.servicio-card:hover .servicio-card-heading,
.servicio-card.is-expanded .servicio-card-heading,
.servicio-card:focus-visible .servicio-card-heading{
  opacity: 0;
}

.servicio-card-heading svg{
  width: 26px;
  height: 26px;
  color: #8FD2A7;
  flex-shrink: 0;
}

.servicio-card-heading h3{
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.servicio-card-detail{
  position: absolute;
  inset: 0;
  background: rgba(11,39,51,.94);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.servicio-card:hover .servicio-card-detail,
.servicio-card.is-expanded .servicio-card-detail,
.servicio-card:focus-visible .servicio-card-detail{
  opacity: 1;
  pointer-events: auto;
}

.servicio-card-detail h3{
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.servicio-card-detail p{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.85);
  margin-bottom: 16px;
}

/* Botón "Cotizar transporte" — bloque ComCargo */

.servicio-madre-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--green-dark);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s ease, transform .2s ease;
}

.servicio-madre-cta svg{
  width: 15px;
  height: 15px;
  color: #fff;
  margin: 0;
  transition: transform .25s ease;
}

.servicio-madre-cta:hover{
  background: #2f5f3f;
  transform: translateY(-2px);
}

.servicio-madre-cta:hover svg{
  transform: translateX(3px);
}

/* Enlace "Cotizar" — cada tarjeta USTH */

.servicio-card-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8FD2A7;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.servicio-card-cta svg{
  width: 13px;
  height: 13px;
  transition: transform .25s ease;
}

.servicio-card-cta:hover{
  border-bottom-color: #8FD2A7;
}

.servicio-card-cta:hover svg{
  transform: translateX(3px);
}

/* Nota discreta — Línea Documental, sin ser protagonista */

.servicios-footnote{
  margin-top: 32px;
  font-size: 13px;
  color: var(--text-muted);
  opacity: 0.85;
}

.servicios-footnote-tag{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--green);
}


/* ---------- CALIDAD ---------- */

.calidad{
  position: relative;
  overflow: hidden;
  min-height: 720px;
  display: flex;
  align-items: center;

  background-image: url("../images/calidad-bg.jpg");
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
}

.calidad-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(7,32,40,0.85) 0%,
    rgba(7,32,40,0.7) 32%,
    rgba(7,32,40,0.32) 58%,
    rgba(7,32,40,0.1) 82%,
    rgba(7,32,40,0.02) 100%);
}

.calidad-seam{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(11,39,51,0.5) 0%, rgba(11,39,51,0) 100%);
  pointer-events: none;
}

.calidad-inner{
  position: relative;
  z-index: 3;
  max-width: 1400px;
  margin: 0 auto;
  padding: 90px 40px;
  width: 100%;
}

.calidad-title{
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(27px, calc(2.9vw - 10px), 42px);
  line-height: 1.25;
  letter-spacing: 0.3px;
  color: #fff;
  max-width: 640px;
  margin-top: 18px;
}

.calidad-title span{
  color: #8FD2A7;
}

.calidad-method{
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  max-width: 620px;
}

/* Tarjeta clara de normas técnicas — mismo recurso que value-strip del HERO, invertido */

.calidad-norms{
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 44px;
  padding: 30px 36px;
  background: var(--bg);
  border-radius: 16px;
  max-width: 1000px;
}

.calidad-norm-item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 260px;
}

.calidad-norm-item svg{
  width: 30px;
  height: 30px;
  color: var(--green);
  flex-shrink: 0;
  margin-top: 2px;
}

.calidad-norm-item strong{
  display: block;
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}

.calidad-norm-item span{
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
}

.calidad-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding: 13px 24px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease;
}

.calidad-link svg{
  width: 17px;
  height: 17px;
  transition: transform .25s ease;
}

.calidad-link:hover{
  border-color: #8FD2A7;
  background: rgba(111,163,130,0.12);
}

.calidad-link:hover svg{
  transform: translateX(3px);
}


/* ---------- SEGURIDAD ---------- */

.seguridad{
  background: var(--bg);
  padding: 100px 0;
}

#seguridad{
  scroll-margin-top: calc(var(--header-h-scrolled) + 60px);
}

.seguridad-inner{
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}

.seguridad-header{
  margin-top: 10px;
}

.seguridad-title{
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(27px, calc(2.9vw - 10px), 42px);
  line-height: 1.25;
  letter-spacing: 0.3px;
  color: var(--dark);
}

.seguridad-title span{
  display: block;
  color: var(--green);
}

.seguridad-method{
  max-width: 660px;
  margin-top: 24px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Cadena horizontal de 3 pasos — contenido principal de la sección.
   Texto siempre visible (no se oculta hasta el hover); el hover/tap
   solo agranda la tarjeta y cambia a color sólido, como énfasis puro.
   La línea punteada horizontal refuerza que es una secuencia. */

.seguridad-chain{
  position: relative;
  display: flex;
  gap: 20px;
  margin-top: 48px;
}

.seguridad-chain-line{
  position: absolute;
  top: 53px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: repeating-linear-gradient(to right, rgba(76,148,102,0.45) 0 6px, transparent 6px 12px);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s ease;
  transition-delay: .6s;
  z-index: 0;
}

.seguridad.in-view .seguridad-chain-line{
  transform: scaleX(1);
}


.seguridad-step{
  position: relative;
  z-index: 1;
  flex: 1;
  background: #fff;
  border: 1px solid #E4ECE9;
  border-radius: 14px;
  padding: 26px 22px 22px;
  text-align: center;
  cursor: pointer;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.seguridad-step-badge{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  transition: background .3s ease;
}

.seguridad-step h3{
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 10px;
  transition: color .3s ease;
}

.seguridad-step-detail{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  transition: color .3s ease;
}

.seguridad-step-icon{
  width: 26px;
  height: 26px;
  color: #fff;
  display: block;
}

.seguridad-step:hover,
.seguridad-step.is-expanded{
  transform: scale(1.06);
  background: var(--green);
  box-shadow: 0 14px 28px rgba(61,122,84,0.4);
  z-index: 2;
}

.seguridad-step:hover .seguridad-step-badge,
.seguridad-step.is-expanded .seguridad-step-badge{
  background: var(--green-dark);
}

.seguridad-step:hover h3,
.seguridad-step.is-expanded h3{
  color: #fff;
}

.seguridad-step:hover .seguridad-step-detail,
.seguridad-step.is-expanded .seguridad-step-detail{
  color: var(--green-light);
}

/* Banda PAHL — mismo patrón que .servicio-madre en Servicios:
   ícono + etiqueta/título + párrafo + CTA, franja horizontal
   a todo el ancho. El párrafo tiene max-width fijo para que
   quede en 2 renglones a los anchos de pantalla habituales. */

.seguridad-scope{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 24px;
  padding: 22px 28px;
  background: var(--green-light);
  border-radius: 14px;
}

.seguridad-scope > svg{
  width: 34px;
  height: 34px;
  color: var(--green-dark);
  flex-shrink: 0;
}

.seguridad-scope-heading{
  flex: 0 0 auto;
  min-width: 200px;
}

.seguridad-scope-heading h3{
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
}

.seguridad-scope p{
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 680px;
  flex: 1 1 300px;
  margin: 0;
}

.seguridad-scope-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--green-dark);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  border-radius: 999px;
  flex-shrink: 0;
  margin-left: auto;
  transition: background .2s ease, transform .2s ease;
}

.seguridad-scope-cta svg{
  width: 15px;
  height: 15px;
  color: #fff;
  margin: 0;
  transition: transform .25s ease;
}

.seguridad-scope-cta:hover{
  background: #2f5f3f;
  transform: translateY(-2px);
}

.seguridad-scope-cta:hover svg{
  transform: translateX(3px);
}

/* Compactación específica para laptops (viewport de poca altura,
   1366x768 / 1440x900 / 1536x864 son las más comunes) — el objetivo
   es que la sección completa entre en una sola pantalla al aterrizar
   desde el enlace del menú. No afecta monitores externos wide, que
   ya entran bien con el espaciado normal (altura ≥ 901px). */

@media (max-height: 900px){

  .seguridad{
    padding: 56px 0 100px;
  }

  #seguridad{
    scroll-margin-top: calc(var(--header-h-scrolled) + 16px);
  }

  .seguridad-header{
    margin-top: 0;
  }

  .seguridad-method{
    margin-top: 14px;
  }

  .seguridad-chain{
    margin-top: 26px;
  }

  .seguridad-step{
    padding: 18px 20px 16px;
  }

  .seguridad-step-badge{
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
  }

  .seguridad-step-icon{
    width: 22px;
    height: 22px;
  }

  .seguridad-step h3{
    margin: 0 0 6px;
  }

  .seguridad-chain-line{
    top: 40px;
  }

  .seguridad-scope{
    margin-top: 14px;
    padding: 14px 24px;
  }

}


/* ---------- CONTACTO / FOOTER ---------- */

.contacto{
  position: relative;
  background: linear-gradient(160deg, #0D3B47 0%, #071F27 70%);
  padding: 100px 0 0;
}

#contacto{
  scroll-margin-top: calc(var(--header-h-scrolled) + 40px);
}

.contacto-inner{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.contacto-eyebrow{
  color: var(--sage);
}

.contacto-title{
  margin-top: 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(27px, calc(2.9vw - 10px), 40px);
  line-height: 1.25;
  letter-spacing: 0.3px;
  color: #fff;
}

.contacto-title span{
  display: block;
  color: var(--sage);
}

.contacto-method{
  max-width: 520px;
  margin: 22px auto 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
}

.contacto-form{
  max-width: 560px;
  margin: 40px auto 0;
  text-align: left;
}

.contacto-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contacto-field{
  margin-bottom: 18px;
}

.contacto-field label{
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 8px;
}

.contacto-field input,
.contacto-field textarea{
  width: 100%;
  padding: 13px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color .2s ease, background .2s ease;
}

.contacto-field textarea{
  resize: vertical;
  min-height: 100px;
}

.contacto-field input::placeholder,
.contacto-field textarea::placeholder{
  color: rgba(255,255,255,0.35);
}

.contacto-field input:focus,
.contacto-field textarea:focus{
  outline: none;
  border-color: var(--green);
  background: rgba(255,255,255,0.09);
}

.contacto-submit{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--green);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.contacto-submit svg{
  width: 17px;
  height: 17px;
  transition: transform .25s ease;
}

.contacto-submit:hover{
  background: var(--green-dark);
  transform: translateY(-2px);
}

.contacto-submit:hover svg{
  transform: translateX(3px);
}

.contacto-form-note{
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.45);
}

/* Franja de pie de página — logo, WhatsApp, correo, copyright */

.contacto-footer{
  margin-top: 90px;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 32px 0;
}

.contacto-footer-inner{
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.contacto-footer-logo{
  height: 46px;
  width: auto;
  flex-shrink: 0;
}

.contacto-footer-links{
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.contacto-footer-links a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  text-decoration: none;
  transition: color .2s ease;
}

.contacto-footer-links a svg{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.contacto-footer-links a:hover{
  color: var(--sage);
}

.contacto-footer-copy{
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  flex-shrink: 0;
}



/* ---------- BOTÓN FLOTANTE DE WHATSAPP ---------- */
/* Fijo en toda la página, no solo en Contacto — por eso vive
   fuera de cualquier <section> en el HTML. */

.whatsapp-float{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float svg{
  width: 28px;
  height: 28px;
}

.whatsapp-float:hover{
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
}

@media (max-width: 960px){

  .whatsapp-float{
    right: 18px;
    bottom: 18px;
    width: 50px;
    height: 50px;
  }

  .whatsapp-float svg{
    width: 25px;
    height: 25px;
  }

}

/* Compactación de Contacto en laptops — mismo criterio que Seguridad
   (altura ≤900px). Va después del bloque base de Contacto a propósito:
   con igual especificidad, en CSS gana la regla que aparece más abajo
   en el archivo, sin importar si está en un media query o no. */

@media (max-height: 900px){

  .contacto{
    padding: 50px 0 0;
  }

  #contacto{
    scroll-margin-top: calc(var(--header-h-scrolled) + 10px);
  }

  .contacto-title{
    margin-top: 6px;
  }

  .contacto-method{
    margin: 14px auto 0;
  }

  .contacto-form{
    margin-top: 24px;
  }

  .contacto-field{
    margin-bottom: 14px;
  }

  .contacto-field textarea{
    min-height: 84px;
  }

  .contacto-submit{
    padding: 12px 26px;
  }

  .contacto-form-note{
    margin-top: 8px;
  }

  .contacto-footer{
    margin-top: 44px;
    padding: 20px 0;
  }

}

/* Segundo escalón, más suave — cubre monitores altos (ej. 1920x1080)
   donde el espaciado "de escritorio" completo queda justo al límite
   una vez descontado el espacio real de la barra del navegador.
   No es tan agresivo como el de laptop (≤900px). */

@media (min-height: 901px) and (max-height: 1100px){

  .contacto{
    padding: 60px 0 0;
  }

  #contacto{
    scroll-margin-top: calc(var(--header-h-scrolled) + 30px);
  }

  .contacto-title{
    margin-top: 8px;
  }

  .contacto-method{
    margin: 14px auto 0;
  }

  .contacto-form{
    margin-top: 26px;
  }

  .contacto-field{
    margin-bottom: 14px;
  }

  .contacto-field textarea{
    min-height: 84px;
  }

  .contacto-form-note{
    margin-top: 8px;
  }

  .contacto-footer{
    margin-top: 48px;
    padding: 20px 0;
  }

}