/* ==========================================================================
   Servicios Arcom — Estilos globales
   Paleta: azul índigo, gris topo, blanco
   Tipografía: Lato
   ========================================================================== */

/* ---------- Fuentes ---------- */
@font-face { font-family: "Lato"; src: url("../assets/fonts/Lato-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../assets/fonts/Lato-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../assets/fonts/Lato-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../assets/fonts/Lato-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../assets/fonts/Lato-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

/* ---------- Variables ---------- */
:root {
  --indigo:        #2b2a5e;
  --indigo-dark:   #1c1b40;
  --indigo-deep:   #131230;
  --taupe:         #a89f94;
  --taupe-light:   #c9c2b8;
  --gris-bg:       #f4f4f6;
  --gris-borde:    #e3e3e8;
  --texto:         #3a3a44;
  --texto-suave:   #6b6b78;
  --blanco:        #ffffff;

  --grad-indigo:   linear-gradient(135deg, #2b2a5e 0%, #1c1b40 60%, #131230 100%);
  --grad-card:     linear-gradient(160deg, #34336b 0%, #232255 100%);

  --max:           1180px;
  --radio:         14px;
  --sombra:        0 14px 38px rgba(27, 27, 64, 0.12);
  --sombra-sm:     0 6px 18px rgba(27, 27, 64, 0.10);
  --trans:         .3s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Lato", system-ui, sans-serif;
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.68;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  /* clip (no hidden) evita el scroll horizontal sin forzar overflow-y: auto, así
     los elementos que sobresalen hacia arriba (p. ej. el sello) no se recortan. */
  overflow-x: clip;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Utilidades ---------- */
.container { width: min(100% - 40px, var(--max)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.section { padding: 76px 0; }
.section--gris { background: var(--gris-bg); }
/* Secciones de Sostenibilidad: menos separación vertical entre bloques. */
.section--sost { padding-block: 30px; }
/* Contenedor más ancho para que el recuadro (y la imagen) quede pegado al borde. */
.section--sost > .container { width: min(100% - 48px, 1500px); }
.eyebrow {
  display: block; text-align: center; letter-spacing: .28em;
  text-transform: uppercase; font-size: .78rem; font-weight: 700;
  color: var(--taupe); margin-bottom: 12px;
}
.section-title {
  text-align: center; color: var(--indigo); font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; margin-bottom: 14px;
  text-wrap: balance;
}
/* El salto fijo de los títulos solo aplica en escritorio; en móvil partía las
   líneas en sitios raros ("servicios", "valor") y el texto debe fluir. */
.salto-desktop { display: none; }
@media (min-width: 768px) { .salto-desktop { display: inline; } }
.section-title--light { color: var(--blanco); }
.lead { text-align: center; max-width: 780px; margin: 0 auto 44px; color: var(--texto-suave); font-size: 1.25rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px; border-radius: 999px; font-weight: 700;
  font-size: .92rem; transition: var(--trans); cursor: pointer; border: 2px solid transparent;
}
.btn--primary { background: var(--taupe); color: var(--indigo-dark); }
.btn--primary:hover { background: var(--indigo); color: #fff; transform: translateY(-2px); }
.btn--outline { border-color: var(--taupe); color: var(--taupe); background: transparent; }
.btn--outline:hover { background: var(--taupe); color: var(--indigo-dark); }
.btn--ghost { color: var(--indigo); font-weight: 700; padding: 6px 0; border-radius: 0; }
.btn--ghost::after { content: "→"; transition: var(--trans); }
.btn--ghost:hover::after { transform: translateX(6px); }

/* ==========================================================================
   TOP BAR + HEADER
   ========================================================================== */
.topbar {
  background: var(--indigo-deep); color: #d7d7e2; font-size: .82rem;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: 6px; color: #d7d7e2; transition: var(--trans); }
.topbar a:hover { color: #fff; }
.topbar__left { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar__social { display: flex; align-items: center; gap: 12px; }
.topbar__social span { opacity: .8; }
.topbar__social a { font-size: 1rem; }
/* En móvil la franja muestra solo los íconos, en una sola línea centrada. */
@media (max-width: 768px) {
  .topbar__txt { display: none; }
  .topbar .container { flex-wrap: nowrap; justify-content: center; gap: 30px; padding: 9px 0; }
  .topbar__left, .topbar__social { gap: 30px; }
  .topbar a svg { width: 19px; height: 19px; }
}

.header {
  position: sticky; top: 0; z-index: 100; background: #fff;
  box-shadow: 0 2px 16px rgba(27,27,64,.08);
}
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 4px 0; }
.header__logo img { height: 110px; width: auto; transition: var(--trans); }
.header__logo:hover img { transform: scale(1.04); }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-weight: 700; font-size: .9rem; letter-spacing: .03em; color: var(--indigo-dark);
  text-transform: uppercase; position: relative; padding: 6px 0; transition: var(--trans);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--taupe); transition: var(--trans);
}
.nav a:hover::after, .nav a.is-active::after { width: 100%; }
.nav a.is-active { color: var(--taupe); }
.nav .btn { text-transform: uppercase; }
.nav a.nav__contact { background: var(--taupe); color: var(--indigo-dark) !important; padding: 12px 30px; border-radius: 999px; margin-left: 10px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex-shrink: 0; }
.nav a.nav__contact::after { display: none; }
.nav a.nav__contact:hover { background: var(--indigo); color: #fff !important; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 26px; height: 3px; background: var(--indigo); border-radius: 2px; transition: var(--trans); }
/* Con el panel abierto la hamburguesa se convierte en ✕ (feedback de colapso) */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Menú desplegable (Servicios) ---------- */
.nav__item { display: flex; align-items: center; }
.nav__item--has-sub { position: relative; }
.nav__parent { display: inline-flex; align-items: center; gap: 5px; }
.nav__parent .caret { font-size: .7rem; transition: var(--trans); }
.nav__sub-toggle { display: none; color: var(--indigo); font-size: 1rem; padding: 6px 10px; }
.nav__sub {
  position: absolute; top: 100%; left: 0; min-width: 210px;
  background: #fff; border-radius: 0 0 12px 12px; box-shadow: var(--sombra);
  padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: var(--trans); z-index: 120; border-top: 3px solid var(--taupe);
}
.nav__item--has-sub:hover .nav__sub, .nav__item--has-sub.is-expanded .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__item--has-sub:hover .caret, .nav__item--has-sub.is-expanded .caret { transform: rotate(180deg); }
.nav__sub a {
  display: block; padding: 11px 22px; font-size: .86rem; text-transform: none;
  letter-spacing: 0; color: var(--texto); font-weight: 700;
}
.nav__sub a::after { display: none; }
.nav__sub a:hover, .nav__sub a.is-active { background: var(--gris-bg); color: var(--taupe); padding-left: 26px; }

/* ==========================================================================
   HERO / BANNERS
   ========================================================================== */
.hero {
  position: relative; min-height: 88vh; display: flex; align-items: center;
  color: #fff; overflow: hidden;
  /* Fondo azul mientras carga el video/póster: evita el destello blanco.
     isolation crea el contexto de apilamiento para que el video (z:-2)
     y el velo (z:-1) pinten por encima de este fondo */
  background: var(--indigo-deep); isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(19,18,48,.30) 0%, rgba(19,18,48,.20) 50%, rgba(19,18,48,.38) 100%);
}
/* Como el texto que iba quemado en el video: centrado y en mayúsculas */
.hero__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.hero__tags { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.hero__tags span {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  padding: 6px 16px; border-radius: 999px; font-size: .85rem; font-weight: 700; backdrop-filter: blur(4px);
}
.hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 3.3rem); font-weight: 900; line-height: 1.18; letter-spacing: .02em;
  text-transform: uppercase;
  /* El título vive en HTML (no quemado en el video): nunca se recorta.
     balance reparte las líneas parejas; la sombra asegura contraste sobre tomas claras */
  text-wrap: balance; text-shadow: 0 2px 22px rgba(19, 18, 48, .55);
}
.hero h1 span { color: var(--taupe-light); }

/* Banner secundario (páginas internas) */
.page-banner {
  position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden; padding: 60px 0;
}
.page-banner__media { position: absolute; inset: 0; z-index: -2; }
.page-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.page-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(19,18,48,.78), rgba(27,27,64,.85)); }
.page-banner h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; }
.page-banner p { max-width: 780px; margin: 0 auto; font-size: 1.16rem; font-weight: 300; }

/* ==========================================================================
   INICIO — Intro destacada
   ========================================================================== */
/* La sección se superpone al banner */
.intro-overlap { padding-top: 0; margin-top: -88px; position: relative; z-index: 5; }

.intro-split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0; align-items: stretch; box-shadow: var(--sombra); border-radius: var(--radio); }
.intro-split__highlight {
  position: relative;
  background: var(--grad-indigo); color: #fff; padding: 48px 44px 44px; border-radius: var(--radio) 0 0 var(--radio);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px;
}
.intro-split__title { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 900; font-style: italic; line-height: 1.25; }
.intro-split__title span { color: var(--taupe-light); }
.intro-split__icon, .intro-split__bodyicon {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
}
.intro-split__icon {
  background: var(--grad-card); color: var(--taupe-light);
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  border: 4px solid #fff; box-shadow: var(--sombra-sm); z-index: 3;
}
.intro-split__icon svg { width: 30px; height: 30px; }
.intro-split__bodyicon {
  background: var(--gris-bg); color: var(--indigo);
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  border: 4px solid #fff; box-shadow: var(--sombra-sm); z-index: 3;
}
.intro-split__bodyicon svg { width: 30px; height: 30px; }
.intro-split__body { position: relative; background: #fff; padding: 48px 44px 44px; border-radius: 0 var(--radio) var(--radio) 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; }
.intro-split__body p { color: var(--texto-suave); font-size: 1.2rem; }

/* ---------- Servicios (3 cards) ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.service-card {
  background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-sm);
  transition: var(--trans); display: flex; flex-direction: column;
  position: relative;
}
/* Tarjeta completa clicable: "Conoce más" se estira sobre toda la tarjeta con un
   ::before (el ::after ya dibuja la flecha). z-index 3 para cubrir también el
   círculo del ícono (z-index 2) y no dejar zonas muertas. */
.service-card__body .btn--ghost::before { content: ""; position: absolute; inset: 0; z-index: 3; }
.service-card:hover { transform: translateY(-8px); box-shadow: var(--sombra); }
.service-card__img { aspect-ratio: 4/5; overflow: hidden; }
.service-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transition: var(--trans); }
.service-card:hover .service-card__img img { transform: scale(1.07); }
.service-card__body { padding: 24px; text-align: center; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.service-card__icon {
  width: 64px; height: 64px; border-radius: 50%; align-self: center;
  margin-top: -56px; background: var(--grad-card); color: #fff;
  display: grid; place-items: center; border: 4px solid #fff;
  box-shadow: var(--sombra-sm); position: relative; z-index: 2; transition: var(--trans);
}
.service-card__icon svg { width: 30px; height: 30px; }
.service-card:hover .service-card__icon { background: var(--taupe); color: var(--indigo-dark); transform: translateY(-4px); }

/* Iconos de servicio (PNG de marca). El filtro los recolorea según el fondo del contenedor. */
.svc-ico { display: inline-block; width: 34px; height: 34px; object-fit: contain; }
/* El <picture> inline generaba una caja 8px más alta que el ícono (espacio de
   baseline) y subía los íconos ~4px del centro en TODOS los círculos. Como flex,
   la caja del picture mide exactamente lo que mide el ícono. */
.service-card__icon picture, .proc-card__icon picture, .tl-item__dot picture, .line-btn__icon picture { display: flex; }
/* Centrado óptico dentro de los círculos: los lienzos PNG están centrados, pero
   la masa visual no (casco de construcción pesa arriba; llave de ferrocarril,
   abajo-derecha). El translate en % escala con cualquier tamaño de círculo. */
.svc-ico[src*="logistica"] { transform: translate(3%, 1%); }
.svc-ico[src*="construccion"] { transform: translateY(4%); }
.svc-ico[src*="ferrocarril"] { transform: translate(-1%, 1%); }
/* Tarjetas (index): círculo azul -> icono blanco; al hacer hover el círculo es taupe -> icono oscuro */
.service-card__icon .svc-ico { filter: brightness(0) invert(1); }
.service-card:hover .service-card__icon .svc-ico { filter: brightness(0); }
/* Botones de línea (trayectoria): fondo claro -> icono oscuro; activo/hover azul -> icono blanco */
.line-btn__icon .svc-ico { filter: brightness(0); }
.line-btn:hover .svc-ico, .line-btn.is-active .svc-ico { filter: brightness(0) invert(1); }
.service-card__body h3 { color: var(--indigo); font-size: 1.18rem; font-weight: 900; }
.service-card__body p { color: var(--texto-suave); font-size: 1.08rem; flex: 1; }
.service-card__body .btn--ghost { align-self: center; }

/* ---------- Franja de stats ---------- */
.stats { background: var(--grad-indigo); color: #fff; }
.stats .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 50px 0; }
.stat { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stat__icon { width: 60px; height: 60px; display: grid; place-items: center; border: 2px solid var(--taupe); border-radius: 50%; color: var(--taupe-light); }
.stat__icon svg { width: 28px; height: 28px; }
.stat__num { font-size: 1.7rem; font-weight: 900; color: var(--taupe-light); }
.stat p { font-size: 1.1rem; max-width: 240px; }

/* ---------- Slider de clientes ---------- */
.clients { overflow: hidden; }
.clients__track { display: flex; align-items: center; gap: 72px; width: max-content; animation: marquee 28s linear infinite; }
.clients:hover .clients__track { animation-play-state: paused; }
.clients__track img { height: 95px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: var(--trans); }
.clients__track img:hover { filter: grayscale(0); opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   SLIDER genérico (proyectos / procesos)
   ========================================================================== */
.slider { position: relative; }
.slider__viewport { overflow: hidden; border-radius: var(--radio); }
.slider__track { display: flex; transition: transform .5s ease; }
.slide { min-width: 100%; }
.slide--multi { min-width: calc(100% / 3); padding: 0 12px; }
.proc-card { position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 3/2; box-shadow: var(--sombra-sm); }
.proc-card img { width: 100%; height: 100%; object-fit: cover; transition: var(--trans); }
/* Foto vertical: subir el encuadre para que se vea el rostro */
.proc-card img[src*="proceso-actividades"] { object-position: center 25%; }
.proc-card:hover img { transform: scale(1.06); }
.proc-card__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; text-align: center;
  padding: 22px; color: #fff; background: rgba(27,27,64,.82);
  opacity: 0; transition: opacity .35s ease;
}
.proc-card:hover .proc-card__overlay, .proc-card:focus-within .proc-card__overlay { opacity: 1; }
.proc-card__icon {
  width: 78px; height: 78px; border-radius: 50%; background: var(--taupe); color: #fff;
  display: grid; place-items: center; transform: scale(.6); transition: transform .4s ease;
}
.proc-card:hover .proc-card__icon { transform: scale(1); }
.proc-card__icon svg { width: 40px; height: 40px; }
.proc-card__icon .svc-ico { width: 42px; height: 42px; filter: brightness(0) invert(1); }
.proc-card__text strong { display: block; font-size: 1.2rem; font-weight: 900; line-height: 1.2; }
.proc-card__text span { font-size: .98rem; font-weight: 400; color: #e7e7ef; }
/* Tarjeta completa clicable: enlace estirado sobre la foto y el overlay */
.proc-card__link { position: absolute; inset: 0; z-index: 3; }
.proc-card__link:focus-visible { outline: 3px solid var(--taupe); outline-offset: -3px; border-radius: var(--radio); }
/* En pantallas táctiles (sin hover) el overlay se muestra siempre */
@media (hover: none) {
  .proc-card__overlay { opacity: 1; background: linear-gradient(transparent, rgba(19,18,48,.55) 45%, rgba(19,18,48,.9)); justify-content: flex-end; gap: 12px; }
  .proc-card__icon { transform: scale(1); width: 60px; height: 60px; }
  .proc-card__icon svg { width: 30px; height: 30px; }
  .proc-card__icon .svc-ico { width: 32px; height: 32px; }
}
.slider__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--indigo);
  box-shadow: var(--sombra-sm); display: grid; place-items: center; font-size: 1.3rem; transition: var(--trans);
}
.slider__btn:hover { background: var(--indigo); color: #fff; }
.slider__btn--prev { left: -12px; }
.slider__btn--next { right: -12px; }
.slider__dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.slider__dots button { width: 11px; height: 11px; border-radius: 50%; background: var(--gris-borde); transition: var(--trans); }
.slider__dots button.is-active { background: var(--taupe); transform: scale(1.25); }

/* ==========================================================================
   NOSOTROS
   ========================================================================== */
.about-intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.about-intro h2 { color: var(--indigo); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 900; line-height: 1.2; margin-bottom: 20px; }
.about-intro h2 span { color: var(--taupe); }
.about-intro p { color: var(--texto-suave); }
.about-intro__img { position: relative; }
.about-intro__img img { border-radius: 20px; }
/* Insignia "Excelencia · cumplimiento" */
.excel-badge {
  /* Sello completamente SOBRE la foto (top/right positivos): así se ve entero
     contra la imagen y es imposible que se recorte o parezca cortado. */
  position: absolute; top: 16px; right: 16px; width: 116px; height: 116px; z-index: 3;
  filter: drop-shadow(0 10px 20px rgba(19,18,48,.32));
}
.excel-badge svg, .excel-badge img { width: 100%; height: 100%; display: block; object-fit: contain; }
/* Latido del corazón de la insignia */
.excel-heart { transform-box: fill-box; transform-origin: center; animation: heartbeat 1.4s ease-in-out infinite; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.22); }
  30% { transform: scale(1); }
  45% { transform: scale(1.22); }
  62% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .excel-heart { animation: none; } }

.values { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.value-pill {
  background: var(--grad-card); color: #fff; padding: 16px 30px; border-radius: 999px;
  font-weight: 700; font-size: 1.02rem; box-shadow: var(--sombra-sm); transition: var(--trans);
}
.value-pill:hover { transform: translateY(-4px); background: var(--taupe); color: var(--indigo-dark); }

/* Misión / Visión con flip-hover */
.guia { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; align-items: center; }
/* Imagen más estrecha y alargada, con las cuatro esquinas redondeadas.
   Usamos border-radius en la <img>: la sombra (drop-shadow) del contenedor
   sigue el contorno redondeado porque la imagen queda transparente en las esquinas. */
.guia__img { position: relative; filter: drop-shadow(0 16px 28px rgba(27, 27, 64, .20)); }
.guia__img img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; display: block;
  /* Redondeo suave en TL/BR y corte diagonal (chaflán) en TR/BL. Las puntas del
     chaflán llevan una micro-curva (~6px) para que no terminen en pico afilado. */
  clip-path: polygon(
    0 20px, 4px 10px, 10px 4px, 20px 0,
    calc(100% - 76px) 0, calc(100% - 71px) 2px, calc(100% - 66px) 6px,
    calc(100% - 6px) 66px, calc(100% - 2px) 71px, 100% 76px,
    100% calc(100% - 20px), calc(100% - 4px) calc(100% - 10px), calc(100% - 10px) calc(100% - 4px), calc(100% - 20px) 100%,
    76px 100%, 71px calc(100% - 2px), 66px calc(100% - 6px),
    6px calc(100% - 66px), 2px calc(100% - 71px), 0 calc(100% - 76px)
  );
}
.guia__cards { display: flex; flex-direction: column; gap: 22px; }
/* Misión / Visión con máquina de escribir y flecha para alternar */
.mv { position: relative; align-self: start; margin-top: 6px; }
.mv__title { color: var(--indigo); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 900; font-style: italic; margin-bottom: 16px; transition: color .3s ease; }
.mv__text { position: relative; color: var(--texto-suave); font-size: 1.1rem; line-height: 1.7; }
.mv__ghost { visibility: hidden; }
.mv__type { position: absolute; inset: 0; }
.mv__type.is-typing::after { content: "▋"; color: var(--taupe); margin-left: 1px; animation: mvBlink 1s steps(1) infinite; }
@keyframes mvBlink { 50% { opacity: 0; } }
.mv__arrow {
  margin-top: 26px; width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  background: var(--grad-card); color: #fff; display: grid; place-items: center;
  box-shadow: var(--sombra-sm); transition: var(--trans);
}
.mv__arrow svg { width: 24px; height: 24px; transition: transform .45s ease; }
.mv__arrow:hover { background: var(--taupe); color: var(--indigo-dark); transform: translateY(3px); }
.mv--open .mv__arrow svg { transform: rotate(180deg); }
/* La Visión arranca colapsada y se despliega con la flecha (sin ocultar la Misión) */
.mv__block--vision { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .55s ease, opacity .4s ease, margin-top .4s ease; }
.mv--open .mv__block--vision { max-height: 520px; opacity: 1; margin-top: 26px; }

/* Acordeón Misión / Visión (un toggle por cada uno) */
.accordion { display: flex; flex-direction: column; gap: 16px; }
.accordion__item {
  background: #fff; border: 1px solid var(--gris-borde); border-radius: var(--radio);
  box-shadow: var(--sombra-sm); overflow: hidden; transition: border-color var(--trans), box-shadow var(--trans);
}
.accordion__item.is-open { border-color: var(--taupe); box-shadow: var(--sombra); }
.accordion__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 26px; font-size: 1.4rem; font-weight: 900; font-style: italic;
  color: var(--indigo); cursor: pointer; text-align: left;
}
.accordion__head svg { width: 22px; height: 22px; color: var(--taupe); flex-shrink: 0; transition: transform .35s ease; }
.accordion__item.is-open .accordion__head svg { transform: rotate(180deg); }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.accordion__panel p { padding: 0 26px 24px; color: var(--texto-suave); font-size: 1.14rem; }
.accordion__item.is-open .accordion__panel { max-height: 520px; }

/* Presencia nacional */
.presence { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 50px; align-items: center; }
.presence p { color: var(--texto-suave); }
.presence h2 { color: var(--indigo); font-weight: 900; font-size: 1.9rem; margin-bottom: 18px; }
/* Mapa grande arriba, lista de departamentos debajo (como el PDF) */
.presence__map { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.presence__map img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 24px rgba(27,27,64,.14)); }
.map-wrap { position: relative; width: 100%; max-width: 470px; }
/* Ondas (radar) sobre cada punto del mapa */
.map-ping { position: absolute; width: 18px; height: 18px; transform: translate(-50%, -50%); pointer-events: none; }
.map-ping::before, .map-ping::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--indigo); background: rgba(43, 42, 94, .35);
  animation: mapPing 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}
.map-ping::after { animation-delay: 1.1s; }
@keyframes mapPing {
  0% { transform: scale(.3); opacity: 1; }
  80% { opacity: 0; }
  100% { transform: scale(3.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .map-ping { display: none; } }
.presence__deps { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; }
.presence__deps li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-style: italic; color: var(--indigo); font-size: 1.14rem; }
.presence__deps li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--indigo-dark); flex-shrink: 0; }

/* ==========================================================================
   PÁGINAS DE SERVICIOS
   ========================================================================== */
/* Ancho reducido y centrado para que las tarjetas no sean tan anchas. */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 900px; margin-inline: auto; }
/* Proporción vertical (más alta y estrecha) para que la imagen se vea más completa. */
.svc-item { position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 5; display: flex; align-items: flex-end; box-shadow: var(--sombra-sm); }
.svc-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--trans); }
.svc-item:hover img { transform: scale(1.07); }
/* Franja blanca al pie de la foto: el título va en azul y negrita (pedido del
   cliente); sobre la foto con velo oscuro el azul no era legible. */
.svc-item__label { position: relative; z-index: 2; width: 100%; padding: 18px 22px; background: rgba(255,255,255,.96); color: var(--indigo); }
.svc-item__label h3 { font-size: 1.2rem; font-weight: 900; line-height: 1.25; }

/* Construcción: lista de actividades */
.build-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 40px; align-items: stretch; }
.build-grid__img { position: relative; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.build-grid__img img { width: 100%; height: 100%; object-fit: cover; }
.build-grid__img figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 24px; background: rgba(255,255,255,.96); color: var(--indigo); font-weight: 900; font-size: 1.1rem; }
.activities li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gris-borde); color: var(--texto); }
.activities li::before { content: "✓"; color: var(--taupe); font-weight: 900; }
.activities li:last-child { border-bottom: none; }

/* ==========================================================================
   TRAYECTORIA
   ========================================================================== */
.trajectory-top { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
/* Foto con insignia circular "15 años de experiencia" */
.why-photo { position: relative; }
.why-photo img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 24px; box-shadow: var(--sombra); display: block; }
.years-badge2 { position: absolute; top: -24px; right: -22px; width: 132px; height: 132px; z-index: 3; filter: drop-shadow(0 10px 20px rgba(19,18,48,.32)); }
.years-badge2 svg, .years-badge2 img { width: 100%; height: 100%; display: block; object-fit: contain; }
.years-badge2__num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--taupe-light); font-size: 2.3rem; font-weight: 900; line-height: 1; }
.why-list h2 { color: var(--indigo); font-weight: 900; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.2; margin-bottom: 22px; }
.why-list h2 span { color: var(--taupe); font-style: italic; }
.why-list li { display: flex; align-items: flex-start; gap: 13px; padding: 8px 0; color: var(--texto); }
.why-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--indigo); flex-shrink: 0; margin-top: .55em; }

/* Timeline historia */
.timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 30px; }
.timeline::before { content: ""; position: absolute; top: 38px; left: 6%; right: 6%; height: 3px; background: var(--taupe-light); z-index: 0; transform: scaleX(0); transform-origin: left center; transition: transform 1.1s ease .15s; }
/* El contenedor no se desvanece: solo dispara el "dibujado" de la línea */
.timeline.reveal, .timeline.reveal.is-visible { opacity: 1; transform: none; }
.timeline.is-visible::before { transform: scaleX(1); }
.tl-item { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
/* Cascada escalonada de entrada (cada paso aparece tras el anterior) */
.timeline .tl-item:nth-child(2) { transition-delay: .12s; }
.timeline .tl-item:nth-child(3) { transition-delay: .24s; }
.timeline .tl-item:nth-child(4) { transition-delay: .36s; }
.timeline .tl-item:nth-child(5) { transition-delay: .48s; }
.tl-item__dot {
  width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--grad-card); color: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--taupe-light), inset 0 0 0 2px rgba(255,255,255,.22);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.tl-item__dot svg { width: 36px; height: 36px; }
.tl-item__dot .svc-ico { width: 38px; height: 38px; filter: brightness(0) invert(1); }
.tl-item:hover .tl-item__dot .svc-ico { filter: brightness(0); }
/* "Pop": el círculo nace desde 0 cuando el paso aparece, en cascada */
.tl-item.reveal .tl-item__dot { transform: scale(0); }
.tl-item.reveal.is-visible .tl-item__dot { animation: dotPop .55s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes dotPop { from { transform: scale(0); } to { transform: scale(1); } }
.timeline .tl-item:nth-child(1) .tl-item__dot { animation-delay: .15s; }
.timeline .tl-item:nth-child(2) .tl-item__dot { animation-delay: .27s; }
.timeline .tl-item:nth-child(3) .tl-item__dot { animation-delay: .39s; }
.timeline .tl-item:nth-child(4) .tl-item__dot { animation-delay: .51s; }
.timeline .tl-item:nth-child(5) .tl-item__dot { animation-delay: .63s; }
/* Transición al pasar el mouse por cada paso (sin transform, para no chocar con el pop) */
.tl-item:hover .tl-item__dot { background: var(--taupe); color: var(--indigo-dark); box-shadow: 0 0 0 5px #fff, 0 0 0 10px var(--taupe); }
@media (prefers-reduced-motion: reduce) {
  .tl-item.reveal .tl-item__dot, .tl-item.reveal.is-visible .tl-item__dot { animation: none; transform: scale(1); }
  .timeline::before { transition: none; transform: scaleX(1); }
}
.tl-item__year { display: inline-block; color: var(--taupe); font-weight: 900; font-size: .92rem; letter-spacing: .03em; margin-bottom: 8px; transition: color .3s ease; }
.tl-item p { font-size: .95rem; color: var(--texto-suave); margin-bottom: 18px; }
.tl-item__img { margin-top: auto; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: var(--sombra-sm); aspect-ratio: 4 / 3; }
.tl-item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; display: block; }
.tl-item:hover .tl-item__img img { transform: scale(1.07); }

/* Botones de líneas de negocio */
.lines-nav { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.line-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 34px;
  border-radius: var(--radio); background: #fff; box-shadow: var(--sombra-sm); transition: var(--trans);
  font-weight: 900; color: var(--indigo); min-width: 160px;
}
.line-btn:hover, .line-btn.is-active { background: var(--grad-card); color: #fff; transform: translateY(-4px); }
.line-btn__icon { line-height: 0; }
.line-btn__icon svg { width: 34px; height: 34px; }

/* Panel de línea (años + texto) */
/* Slider de líneas de negocio */
.lines-slider { position: relative; margin-top: 8px; padding-inline: 72px; }
.lines-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; cursor: pointer;
  width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--indigo);
  box-shadow: var(--sombra); border: 1px solid var(--gris-borde);
  display: grid; place-items: center; font-size: 1.7rem; line-height: 1; padding-bottom: 3px;
  transition: var(--trans);
}
.lines-arrow:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); transform: translateY(-50%) scale(1.08); }
.lines-arrow--prev { left: 4px; }
.lines-arrow--next { right: 4px; }

/* Botón de pantalla completa sobre el video */
.line-fs {
  position: absolute; bottom: 16px; right: 16px; z-index: 4; cursor: pointer;
  width: 42px; height: 42px; border-radius: 10px; background: rgba(43,42,94,.78);
  color: #fff; border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center;
  backdrop-filter: blur(2px); transition: var(--trans);
}
.line-fs:hover { background: var(--taupe); color: var(--indigo-dark); }
.line-fs svg { width: 20px; height: 20px; }

.line-panel { display: none; gap: 50px; grid-template-columns: minmax(0, 400px) 1fr; align-items: center; margin-top: 28px; }
.line-panel.is-active { display: grid; animation: lineFade .45s ease; }
@keyframes lineFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Media: forma achaflanada (esquinas opuestas) + botón play */
.line-panel__media { position: relative; width: 100%; max-width: 400px; margin-inline: auto; filter: drop-shadow(0 16px 28px rgba(27,27,64,.20)); }
.line-panel__media video, .line-panel__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  clip-path: polygon(
    0 20px, 4px 10px, 10px 4px, 20px 0,
    calc(100% - 66px) 0, 100% 66px,
    100% calc(100% - 20px), calc(100% - 4px) calc(100% - 10px), calc(100% - 10px) calc(100% - 4px), calc(100% - 20px) 100%,
    66px 100%, 0 calc(100% - 66px)
  );
}
/* En pantalla completa el video debe verse completo (contain), sin el recorte
   ni la proporción retrato que usa en la tarjeta — si no, se ve "ampliado". */
.line-panel__media video:fullscreen,
.line-panel__media video:-webkit-full-screen {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; clip-path: none;
  background: #000;
}
.line-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 78px; height: 78px; border-radius: 50%; background: rgba(43,42,94,.78);
  color: #fff; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.65);
  cursor: pointer; transition: var(--trans);
}
.line-play svg { width: 30px; height: 30px; margin-left: 4px; }
.line-play:hover { background: var(--taupe); color: var(--indigo-dark); transform: translate(-50%, -50%) scale(1.08); }
.line-panel__media.is-playing .line-play { display: none; }

/* Título "Línea [Nombre]" con caja */
.line-title { margin-bottom: 28px; line-height: 1.1; }
.line-title__pre { display: block; font-size: 1.55rem; font-weight: 700; color: var(--indigo); margin-bottom: 8px; }
.line-title__name { display: inline-block; background: var(--indigo); color: #fff; font-size: 1.5rem; font-weight: 900; padding: 6px 22px; border-radius: 8px; }

/* Timeline vertical con años en cajas */
.line-events { position: relative; }
.line-events::before { content: ""; position: absolute; left: 31px; top: 14px; bottom: 26px; width: 2px; background: var(--taupe-light); z-index: 0; }
.line-event { display: grid; grid-template-columns: 62px 1fr; gap: 22px; padding-bottom: 24px; position: relative; z-index: 1; align-items: start; }
.line-event:last-child { padding-bottom: 0; }
.line-event__year { background: #fff; border: 1.5px solid var(--taupe); color: var(--indigo); font-weight: 900; font-size: .92rem; border-radius: 8px; padding: 6px 2px; text-align: center; align-self: start; }
.line-event p { font-size: 1.02rem; color: var(--texto-suave); }

/* Animación en cascada de los textos al mostrar/cambiar de línea */
.line-panel.is-active .line-title,
.line-panel.is-active .line-event { animation: lineTextIn .6s cubic-bezier(.22, 1, .36, 1) both; }
.line-panel.is-active .line-title { animation-delay: .05s; }
.line-panel.is-active .line-events .line-event:nth-child(1) { animation-delay: .2s; }
.line-panel.is-active .line-events .line-event:nth-child(2) { animation-delay: .34s; }
.line-panel.is-active .line-events .line-event:nth-child(3) { animation-delay: .48s; }
@keyframes lineTextIn {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .line-panel.is-active .line-title, .line-panel.is-active .line-event { animation: none; }
}

/* ==========================================================================
   SOSTENIBILIDAD
   ========================================================================== */
.sust-block { display: grid; grid-template-columns: 0.66fr 1.34fr; gap: 44px; align-items: stretch; margin-bottom: 44px; background: var(--gris-bg); border-radius: 20px 64px 20px 64px; padding: 34px 48px; overflow: hidden; }
/* Imagen a sangre por la izquierda: cancela el padding (top/bottom/left) del bloque
   para que quede pegada al borde izquierdo; el lado derecho conserva un redondeo suave. */
.sust-block__media { align-self: stretch; margin: -34px 0 -34px -48px; overflow: hidden; border-radius: 0 16px 16px 0; min-height: 270px; }
.sust-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sust-block__text { align-self: center; }
.sust-headline { color: var(--indigo); font-weight: 900; font-style: italic; font-size: 1.45rem; line-height: 1.28; margin-bottom: 26px; }
.sust-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.sust-item:last-child { margin-bottom: 0; }
.sust-item__ico { flex-shrink: 0; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%; background: var(--indigo); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sust-item__ico svg { width: 15px; height: 15px; }
.sust-item p { color: var(--texto-suave); font-size: 1.05rem; line-height: 1.55; }

/* Entrada escalonada del texto (titular + tarjetas) al revelar el bloque */
.sust-block__text > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.sust-block.is-visible .sust-block__text > * { opacity: 1; transform: none; }
.sust-block.is-visible .sust-block__text > *:nth-child(1) { transition-delay: .12s; }
.sust-block.is-visible .sust-block__text > *:nth-child(2) { transition-delay: .26s; }
.sust-block.is-visible .sust-block__text > *:nth-child(3) { transition-delay: .40s; }
.sust-block.is-visible .sust-block__text > *:nth-child(4) { transition-delay: .54s; }
@media (prefers-reduced-motion: reduce) {
  .sust-block__text > * { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   CONTACTO (footer-CTA + modal)
   ========================================================================== */
.contact-cta {
  position: relative; color: #fff; overflow: hidden; background: var(--grad-indigo);
}
.contact-cta__bg { position: absolute; inset: 0; z-index: 0; opacity: .18; }
.contact-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.contact-cta .container { position: relative; z-index: 1; padding: 64px 0; }
.contact-cta__head { text-align: center; margin-bottom: 44px; }
.contact-cta__head h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; }
.contact-cta__head h2 span { color: var(--taupe-light); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; }
.contact-info { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.contact-info h4 { color: var(--taupe-light); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; margin-bottom: 8px; }
.contact-info p, .contact-info a { font-size: 1.08rem; color: #e7e7ef; }
.contact-info .social-row { display: flex; gap: 14px; margin-top: 6px; }
.contact-info .social-row a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; transition: var(--trans); }
.contact-info .social-row a:hover { background: var(--taupe); color: var(--indigo-dark); }
.contact-map { grid-column: 1 / -1; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-sm); border: 1px solid rgba(255,255,255,.18); }
.contact-map iframe { width: 100%; height: 220px; border: 0; display: block; }

/* Formulario */
.contact-form { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radio); padding: 30px; backdrop-filter: blur(6px); }
.contact-form h4 { font-size: 1.1rem; font-weight: 900; margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .82rem; color: var(--taupe-light); }
.field input, .field textarea {
  background: rgba(255,255,255,.95); border: 1px solid transparent; border-radius: 8px;
  padding: 12px 14px; font-family: inherit; font-size: 1.06rem; color: var(--texto); transition: var(--trans);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--taupe); box-shadow: 0 0 0 3px rgba(168,159,148,.4); }
.field textarea { resize: vertical; min-height: 90px; }
.contact-form .btn { width: 100%; justify-content: center; margin-top: 8px; }
.form-msg { margin-top: 14px; text-align: center; font-size: .9rem; color: var(--taupe-light); display: none; }
.form-msg.is-visible { display: block; }
.form-msg.is-error { color: #ff9a9a; }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 20px; }
.modal.is-open { display: grid; }
.modal__overlay { position: absolute; inset: 0; background: rgba(19,18,48,.7); backdrop-filter: blur(3px); }
.modal__dialog { position: relative; z-index: 1; width: min(100%, 720px); max-height: 92vh; overflow-y: auto; background: var(--grad-indigo); border-radius: var(--radio); padding: 30px 32px; color: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
/* Modal compacta: que el formulario quepa sin scroll */
.modal__dialog h3 { margin-bottom: 16px; }
.modal__dialog .contact-form { background: transparent; border: none; padding: 0; backdrop-filter: none; }
.modal__dialog .contact-form h4 { font-size: .98rem; margin-bottom: 12px; color: var(--taupe-light); }
.modal__dialog .form-grid { gap: 10px 14px; }
.modal__dialog .field label { font-size: .78rem; }
.modal__dialog .field input, .modal__dialog .field textarea { padding: 9px 12px; }
.modal__dialog .field textarea { min-height: 62px; }
.modal__dialog .contact-form .btn { margin-top: 4px; }
.modal__close { position: absolute; top: 16px; right: 18px; font-size: 1.8rem; color: #fff; line-height: 1; }
.modal__dialog h3 { font-size: 1.6rem; font-weight: 900; text-align: center; }
.modal__dialog h3 span { color: var(--taupe-light); }
.modal__dialog .lead { color: #d7d7e2; margin-bottom: 24px; }

/* ---------- Casilla de autorización en el formulario ---------- */
.form-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; font-size: .82rem; color: #d7d7e2; line-height: 1.45; }
.form-consent input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--taupe); cursor: pointer; }
.form-consent a { color: var(--taupe-light); text-decoration: underline; }

/* ---------- Banner de consentimiento ---------- */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 180;
  background: var(--grad-indigo); color: #fff; border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radio); box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; max-width: 1100px; margin-inline: auto;
}
.consent[hidden] { display: none; }
.consent p { font-size: .98rem; color: #e2e2ec; margin: 0; }
.consent a { color: var(--taupe-light); text-decoration: underline; }
.consent__actions { display: flex; gap: 12px; flex-shrink: 0; }
.consent__actions .btn { padding: 10px 22px; }
.consent__actions .btn--outline { color: var(--taupe-light); }
@media (max-width: 680px) {
  .consent { flex-direction: column; align-items: stretch; text-align: center; padding: 18px; gap: 14px; }
  .consent__actions { justify-content: center; }
}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 8px 22px rgba(37,211,102,.45);
  transition: transform .25s ease, box-shadow .25s ease, opacity .3s ease, visibility .3s ease;
}
.wa-fab:hover { transform: scale(1.08); color: #fff; box-shadow: 0 12px 30px rgba(37,211,102,.6); }
.wa-fab svg { width: 30px; height: 30px; position: relative; z-index: 1; }
.wa-fab__pulse {
  position: absolute; inset: 0; border-radius: 50%; background: #25d366;
  animation: waPulse 2.2s ease-out infinite;
}
@keyframes waPulse {
  0% { transform: scale(1); opacity: .55; }
  70% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
/* Oculta el botón mientras el banner de consentimiento está visible (evita solaparse) */
body:has(#consentBanner:not([hidden])) .wa-fab {
  opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none;
}
@media (max-width: 640px) {
  .wa-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .wa-fab svg { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) { .wa-fab__pulse { display: none; } }

/* ---------- Página legal ---------- */
.page-banner--legal { min-height: 240px; background: var(--grad-indigo); }
.page-banner--legal::after { background: rgba(19,18,48,.25); }
.legal { max-width: 860px; }
.legal h2 { color: var(--indigo); font-weight: 900; font-size: 1.3rem; margin: 32px 0 12px; }
.legal p { color: var(--texto-suave); margin-bottom: 14px; }
.legal ul { margin: 0 0 18px; padding-left: 4px; }
.legal li { position: relative; padding-left: 24px; margin-bottom: 9px; color: var(--texto-suave); }
.legal li::before { content: "✓"; position: absolute; left: 0; color: var(--taupe); font-weight: 900; }
.legal a { color: var(--indigo); font-weight: 700; text-decoration: underline; }
.legal__sign { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--gris-borde); color: var(--indigo); font-weight: 900; }
.legal__sign span { display: block; color: var(--texto-suave); font-weight: 400; font-size: .9rem; margin-top: 2px; }

/* ---------- Footer legal ---------- */
.footer-legal { background: var(--indigo-deep); color: #b9b9cc; text-align: center; padding: 22px 0; font-size: .85rem; }
.footer-legal a { color: var(--taupe-light); }

/* ==========================================================================
   ANIMACIÓN al hacer scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Revelado por líneas (párrafos clave) */
.lr-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.lr-line-in { display: block; transform: translateY(115%); transition: transform .8s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.lr-revealed .lr-line-in { transform: translateY(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .nav { position: fixed; inset: 0 0 0 auto; width: min(78%, 320px); background: #fff; flex-direction: column;
    align-items: flex-start; padding: 90px 30px; gap: 18px; transform: translateX(100%); transition: var(--trans);
    box-shadow: -10px 0 40px rgba(0,0,0,.15); }
  .nav.is-open { transform: translateX(0); }
  .nav-toggle { display: flex; }
  .nav a.nav__contact { margin-left: 0; }
  /* Submenú en móvil: acordeón en vez de hover */
  .nav__item--has-sub { flex-wrap: wrap; width: 100%; }
  .nav__parent .caret { display: none; }
  .nav__sub-toggle { display: inline-block; margin-left: auto; }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-top: none; width: 100%; min-width: 0;
    max-height: 0; overflow: hidden; padding: 0; transition: max-height .35s ease;
  }
  .nav__item--has-sub.is-expanded .nav__sub { max-height: 240px; padding: 4px 0; }
  .nav__item--has-sub.is-expanded .nav__sub-toggle { transform: rotate(180deg); }
  .nav__sub a { padding-left: 16px; }
  .cards-3 { grid-template-columns: 1fr; }
  .intro-split, .about-intro, .guia, .presence, .build-grid, .trajectory-top, .contact-grid, .line-panel.is-active, .sust-block { grid-template-columns: 1fr; }
  /* En móvil los paneles se separan en dos tarjetas, así cada badge sobresale en espacio limpio */
  .intro-split { gap: 46px; box-shadow: none; border-radius: 0; }
  .intro-split__highlight { border-radius: var(--radio); box-shadow: var(--sombra); }
  .intro-split__body { border-radius: var(--radio); box-shadow: var(--sombra); }
  .intro-overlap { margin-top: -48px; }
  .stats .container { grid-template-columns: 1fr; gap: 28px; }
  .svc-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 30px; }
  .timeline::before { display: none; }
  .tl-item p { margin-bottom: 16px; }
  .tl-item__img { max-width: 380px; }
  .trajectory-top { gap: 36px; }
  .line-panel { gap: 32px; }
  /* Nosotros: imagen primero en móvil. minmax(0,1fr)+min-width:0 evitan que la
     imagen se desborde del contenedor (overflow por min-width:auto del grid). */
  .about-intro { grid-template-columns: minmax(0, 1fr); }
  .about-intro__img { order: -1; min-width: 0; }
  .excel-badge { width: 104px; height: 104px; top: 16px; right: 16px; }
  /* Insignia de años dentro de la foto en tablet */
  .years-badge2 { width: 116px; height: 116px; top: -16px; right: 12px; }
  .years-badge2__num { font-size: 2rem; }
  .line-title__pre { font-size: 1.4rem; }
  .line-title__name { font-size: 1.35rem; }
  .slide--multi { min-width: 100%; }
  .lines-arrow { display: none; }
  .lines-slider { padding-inline: 0; }
  .sust-block:nth-child(even) .sust-block__text { order: 0; }
  .sust-block { gap: 26px; padding: 22px; border-radius: 16px 44px 16px 44px; }
  .sust-block__media { margin: 0; min-height: 240px; }
  .sust-headline { font-size: 1.25rem; }
}
/* Hero en celular: el video se ve COMPLETO (proporción 16:9, sin recorte
   lateral) y el título queda superpuesto. Pedido del cliente (28-jul-2026) */
@media (max-width: 768px) {
  .hero { min-height: auto; aspect-ratio: 16 / 9; }
  .hero h1 { font-size: clamp(1.05rem, 4vw, 1.7rem); text-shadow: 0 1px 12px rgba(19, 18, 48, .65); }
  /* Sin solape de la intro: taparía el borde inferior del video */
  .intro-overlap { margin-top: 0; }
}
@media (max-width: 560px) {
  .section { padding: 54px 0; }
  .form-grid, .contact-info, .presence__deps { grid-template-columns: 1fr; }
  .header__logo img { height: 66px; }
  .excel-badge { width: 88px; height: 88px; top: 14px; right: 16px; }
  .years-badge2 { width: 96px; height: 96px; top: -12px; right: 8px; }
  .years-badge2__num { font-size: 1.7rem; }
  .line-event { grid-template-columns: 52px 1fr; gap: 16px; }
  .line-events::before { left: 26px; }
  .guia__img img { clip-path: polygon(
    0 16px, 3px 8px, 8px 3px, 16px 0,
    calc(100% - 56px) 0, calc(100% - 52px) 2px, calc(100% - 48px) 5px,
    calc(100% - 5px) 48px, calc(100% - 2px) 52px, 100% 56px,
    100% calc(100% - 16px), calc(100% - 3px) calc(100% - 8px), calc(100% - 8px) calc(100% - 3px), calc(100% - 16px) 100%,
    56px 100%, 52px calc(100% - 2px), 48px calc(100% - 5px),
    5px calc(100% - 48px), 2px calc(100% - 52px), 0 calc(100% - 56px)
  ); }
}