:root{
  --font: "Helvetica light","Helvetica Neue",Arial,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --black:#000; --gold:#eee4b4; --gold-2:#b59450; --white:#FFF; --muted:#BEBEBE;
  --gold-soft: rgba(238,228,180,.35);
  --container:1200px;
}

/* Fuente */
@font-face {
  font-family: 'Helvetica light';
  src: url('/static/fonts/Helvetica-Light.woff') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Utilidad accesible global */
[hidden] { display: none !important; }

/* Centrar el contenido del body en home */
body.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.home main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Header con margen sólo en home */
body.home .site-header {
  margin-top: 8.5%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
body.home .site-header2 {
  margin-top: 1%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

body.home .site-header3 {
  margin-top: 2.25%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
body.home .site-header4 {
  margin-top: 2.25%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

body.home .site-header5 {
  margin-top: 2.25%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Reset básico */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--black);color:var(--white);font-family:var(--font);line-height:1.5}
img{max-width:100%;height:auto;display:block}

/* Accesibilidad */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;background:var(--gold);color:#000;padding:8px 12px;border-radius:8px;z-index:9999}

/* Layout */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* =========================
   HEADER + MENÚ PRINCIPAL
   ========================= */
.site-header{
  position:sticky; background:var(--black); top:0; z-index:50;
  margin-bottom: 3vh; display: block; isolation:isolate;
}
.nav{display:flex;align-items:center;justify-content:space-between; padding:12px 24px}
.brand img{height:120px}
.menu{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.menu a{color:var(--white);text-decoration:none}
.menu a.active{color:var(--gold);border-bottom: 2px solid var(--gold);padding-bottom: 4px;}
.menu a:hover{color:var(--gold)}
@media (max-width:720px){ .menu{gap:14px;font-size:14px} }
.logo-wrapper { text-align: center; margin: 0px 0 10px; }
.logo-wrapper2 { text-align: center; margin: 2.25% 0 10px; }
.logo-header { max-width: 280px; height: auto; display: inline-block; }

/* Menú principal centrado */
.primary-nav .menu {
  display: flex; justify-content: center; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}

/* El nav principal será el ancla del submenú */
.primary-nav { position: relative; z-index: 60; overflow: visible; }

/* Puente invisible para no perder hover al bajar al submenú */
.has-sub{ position: relative; }
.has-sub::after{
  content:"";
  position:absolute; left:-8px; right:-8px; height:14px; bottom:-14px;
}

/* =========================
   SUBMENÚ (ESCRITORIO)
   ========================= */
.subnav-bar {
  position: absolute; left:0; right:0; top: 250px;     /* pegado debajo del principal */
  z-index:70; max-width:100vw;
  background:#000;
  border-top:0px solid rgba(212,175,55,.2);
  /* border-bottom:1px solid rgba(212,175,55,.2); */
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .12s ease;
}

.subnav-bar-home {
  position: absolute; left:0; right:0; top: 100px;     /* pegado debajo del principal */
  z-index:70; max-width:100vw;
  background:#000;
  border-top:0px solid rgba(212,175,55,.2);
  /* border-bottom:1px solid rgba(212,175,55,.2); */
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .12s ease;
}

.subnav-bar-home2 {
  position: absolute; left:0; right:0; top: 65px;     /* pegado debajo del principal */
  z-index:70; max-width:100vw;
  background:#000;
  border-top:0px solid rgba(212,175,55,.2);
  /* border-bottom:1px solid rgba(212,175,55,.2); */
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .12s ease;
}

/* Contenido del submenú */
.subnav-list {
  max-width: var(--container, 1200px);
  margin: 0 auto; padding: 2px 6px;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; list-style: none;
  text-align: center; flex-wrap: nowrap; white-space: nowrap;
}

.subnav-mobile li:first-child {
  margin-top: 10px;  
}
.subnav-mobile2 li:first-child {
  margin-top: 8px;  
}
/* Divisores */
.subnav-list > li { position: relative; padding: 3px 0; }
.subnav-list > li:not(:last-child)::after {
  content: ""; position: absolute; right: -12px; top: 50%;
  width: 0px; height: 14px; transform: translateY(-50%);
  background: rgba(212,175,55,.35);
}

/* Links del submenú */
.subnav-list a {
  font-size: 16px; line-height: 1.2;
  color: #FFFFFF; text-decoration: none;
  padding: 4px 4px; border-bottom: 2px solid transparent;
}
.subnav-list a:hover,
.subnav-list a:focus-visible {
  color: var(--gold);
  border-bottom-color: rgba(212,175,55,.6);
  outline: none;
}
.subnav-list a[aria-current="page"],
.subnav-list a.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Mostrar al pasar por “Servicios” (hover/focus) */
.primary-nav:has(.has-sub:hover) + .subnav-bar,
.primary-nav:has(.has-sub:focus-within) + .subnav-bar {
  opacity:1; visibility:visible; pointer-events:auto;
}

/* Páginas de servicios: siempre visible (usa body.in-services en esas páginas) */
body.in-services header .subnav-bar {
  opacity:1; visibility:visible; pointer-events:auto;
}

/* Si la lista viene con hidden, anúlalo al abrir/estado activo */
.primary-nav:has(.has-sub:hover) + .subnav-bar [hidden],
.primary-nav:has(.has-sub:focus-within) + .subnav-bar [hidden],
body.in-services header .subnav-bar [hidden] {
  display: flex !important;
}

/* Responsivo suave del submenú (escritorio) */
@media (max-width: 900px) {
  .subnav-list { gap: 16px; padding: 8px 12px; }
}
@media (max-width: 640px) {
  .subnav-list {
    justify-content: flex-start;
    overflow-x: auto; white-space: nowrap;
    scrollbar-width: thin;
  }
  .subnav-list::-webkit-scrollbar { height: 6px; }
  .subnav-list::-webkit-scrollbar-thumb { background: rgba(212,175,55,.35); border-radius: 10px; }
}

/* =========================
   MENÚ MÓVIL (estructura base)
   ========================= */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(212,175,55,.4);
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: inherit;
}

/* En móvil NO usamos la barra desktop (se usa submenú dentro del panel) */
@media (max-width: 720px){
  .subnav-bar { display: none; }
}

/* Submenú móvil dentro del panel hamburguesa (acordeón) */
.subnav-mobile {
  margin: 8px 0 0 0;
  padding-left: 14px;
  display: none;              /* por defecto oculto; lo abrimos con :has */
  flex-direction: column;
  gap: 10px;
  list-style: none;
}
.subnav-mobile a {
  color: #fff;
  text-decoration: none;
  padding: 6px 0;
}
.subnav-mobile a:hover,
.subnav-mobile a:focus-visible { color: var(--gold); outline: none; }

/* Indicador visual y regla para abrir acordeón (tu JS debe poner aria-expanded="true") */
@media (max-width: 720px){
  .has-sub > a[aria-expanded="true"] {
    color: var(--gold);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 2px;
  }
  .has-sub:has(> a[aria-expanded="true"]) > .subnav-mobile {
    display: flex !important;
  }
}

/* Icono hamburguesa */
.nav-toggle .burger,
.nav-toggle .burger::before,
.nav-toggle .burger::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle .burger { position: relative; }
.nav-toggle .burger::before { position: absolute; top: -6px; left: 0; }
.nav-toggle .burger::after  { position: absolute; top:  6px; left: 0; }
.nav-toggle[aria-expanded="true"] .burger { background: transparent; }
.nav-toggle[aria-expanded="true"] .burger::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger::after  { transform: translateY(-6px) rotate(-45deg); }

/* Panel del menú móvil */
@media (max-width: 720px) {
  .nav { position: relative; }
  .nav-toggle { display: inline-flex; }
  .menu {
position: absolute;
    top: 100%;
    left: 50%;                         /* punto de referencia: el centro de la hamburguesa */
    transform: translateX(-50%);       
    width: 50vw;                      
    max-width: 400px;                  /* límite opcional para no pasarte de ancho */
    background: rgba(11,11,11,.97);
    border-bottom: 1px solid rgba(212,175,55,.2);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    z-index: 80;
    border-radius: 8px;  
  }
  [hidden] { display: none !important; }
}

/* Desktop: menú en línea y botón oculto */
@media (min-width: 721px) {
  .menu { position: static; display: flex; gap: 20px; background: transparent; border: 0; padding: 0; flex-direction: row; }
  .nav-toggle { display: none; }
}

/* =========================
   BODY - Hero & Cards
   ========================= */
.hero{display:grid;justify-items:center;text-align:center;}
.logo-hero{margin-top:20px;}
.eyebrow{letter-spacing:.12em;color:var(--muted);font-size:16px;margin:10px 0 8px}
.eyebrowcat{letter-spacing:.12em;color:var(--muted);font-size:16px;margin:5px 0 2px}
h1{font-size:48px;color:var(--gold);margin:0 0 0}
.sub{color:var(--muted);margin:0}
@media (max-width:720px){ h1{font-size:36px} }
.services-intro { max-width:880px; margin:0 auto 32px; color:#BEBEBE; }

.cards { display:grid; gap:24px; grid-template-columns: repeat(5, 1fr); }
@media (max-width:1100px){ .cards{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width:720px){  .cards{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width:480px){  .cards{ grid-template-columns: 1fr;} }

.card {
  border:1px solid rgba(212,175,55,.35);
  border-radius:0;
  padding:22px 18px;
  text-align:center;
  background: #000;
}
.card img { width:56px; height:56px; margin:0 auto 14px; object-fit:contain }
.card h2 { font-size:18px; margin:6px 0 15px; color: var(--gold) }
.card .btn {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:0; padding:10px 16px; text-decoration:none; font-weight:600;
  border:1px solid var(--gold); color:#fff; background:transparent;
}
.card .btn:hover { border-color:#A8862A; color:var(--gold); }
.breadcrumb { margin:18px 0 0; color:#8c8c8c; font-size:14px; }
.breadcrumb a { color:#BEBEBE; text-decoration:none; }
.breadcrumb a:hover { color:var(--gold); }

.contact-service {
  padding:8px 8px;
  text-align:center;
  background: var(--gold);
}
.contact-service .btn {
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--gold); color:#000; background:transparent;
  text-decoration: none;
}

/* =========================
   FOOTER
   ========================= */
.site-footer{border-top:1px solid rgba(212,175,55,.2);padding:24px;margin-top:56px}
.legal{display:flex;gap:16px;list-style:none;margin:0 0 8px;padding:0;justify-content:center;flex-wrap:wrap}
.legal a{color:var(--white);text-decoration:none}
.legal a:hover{color:var(--gold)}
.copy{display:block;text-align:center;color:var(--white);font-size:14px}

/* =========================
   TIMELINE (Escritorio)
   ========================= */
.exp-section{ color:var(--white); background:transparent; }
.exp-header{ text-align:center; margin: 0 0 24px; }
.exp-header h2{ font-weight:700; letter-spacing:.02em; margin:0; }
.exp-sub{ color:#d8d8d8; margin:.25rem 0 0; }

.timeline{
  width:min(90vw,1200px);
  margin:32px auto;
  position:relative;
  padding:80px 0;
  isolation:isolate;
}
.timeline-track{
  position:absolute; top:50%; left:0; right:0;
  height:4px; transform:translateY(-50%);
  background:var(--gold-soft); border-radius:2px; z-index:1;
}
/* Contenedor de puntos: centrado exacto en escritorio */
#timeline-points{
  position:absolute; top:52%; left:0; right:0;
  transform:translateY(-52%); z-index:2;
}

/* Punto + año visible */
.milestone{ position:absolute; left:0; top:0; transform:translate(-50%,-50%); text-align:center; color:#fff; }
.milestone .dot{ width:18px; height:18px; border-radius:50%; background:var(--gold); transition:transform .15s ease, box-shadow .2s ease; display:inline-block; }
.milestone.primary .dot{ width:26px; height:26px; }
.milestone .dot:hover, .milestone .dot:focus-visible{ transform:scale(1.1); box-shadow:0 0 18px 4px var(--gold-soft); outline:none; }
.milestone .year-pin{ position:absolute; color:var(--gold); font-weight:700; font-size:.95rem; white-space:nowrap; }
.milestone.above .year-pin{ bottom:30px; left:50%; transform:translateX(-50%); }
.milestone.below .year-pin{ top:30px; left:50%; transform:translateX(-50%); }

/* Popovers */
.milestone .popover {
  position: absolute;
  min-width: 380px;
  max-width: 620px;
  max-height: 150px;
  overflow-y: auto;
  overflow-x: visible;
  white-space: normal;
  padding: 10px 14px;
  background: #0B0B0B;
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  text-align: left;
}
.milestone[aria-expanded="true"] .popover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
@media (min-width: 800px) { .milestone .popover { max-width: min(420px, 35vw); } }

.milestone.primary .popover .title{ margin:0 0 4px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.milestone.primary .popover .desc{ margin:0; color:#BEBEBE; line-height:1.25; font-size:16px; }
.milestone.secondary .popover .year,
.milestone.primary  .popover .year{ color:var(--gold); font-weight:700; margin:0 0 2px; }

/* Colocación del popover según lado (desktop) */
.milestone.above .popover{ bottom:34px; left:50%; transform:translateX(-50%) translateY(8px); }
.milestone.below .popover{ top:34px;    left:50%; transform:translateX(-50%) translateY(-8px); }
.milestone[aria-expanded="true"] .popover{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }

/* Botón accesible */
.milestone .dot-btn{ appearance:none; border:0; padding:0; background:none; cursor:pointer; }
.milestone .dot-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:50%; }

/* Bordes en extremos: ajusta alineación de year-pin */
.milestone[data-edge="start"].above .year-pin{ left:0; transform:none; text-align:left; }
.milestone[data-edge="end"].above .year-pin{ left:100%; transform:translateX(-100%); text-align:right; }

/* =========================
   TIMELINE (Móvil) — estable
   ========================= */
@media (max-width: 720px){
  .exp-section, .timeline{ max-width:100vw; overflow-x:hidden; }

  .timeline{
    width:100%; margin:16px auto; padding:0;
    display:grid; grid-template-columns:14px 1fr; column-gap:12px;
    position:relative;
  }

  .timeline-track{
    grid-column:1; grid-row:1 / -1;
    position:relative; width:2px; height:100%; margin:0 auto;
    background:var(--gold-soft); border-radius:2px;
    left:auto; top:auto; transform:none !important;
  }

  #timeline-points{
    grid-column:2; position:static !important; transform:none !important;
    height:auto !important; overflow:visible !important; max-width:100%;
  }

  /* Tres columnas: punto | año (ancho fijo) | texto (fluye) */
  .milestone{
    position:static !important; left:auto !important; top:auto !important; transform:none !important;
    display:grid !important; grid-template-columns: 12px 72px minmax(0,1fr);
    align-items:start; column-gap:10px; row-gap:6px;
    margin:14px 0; text-align:left; width:100%;
    z-index:2;
  }
  .milestone[aria-expanded="true"]{ z-index:5; }

  .milestone .dot-btn{
    display:inline-grid !important; padding:0; border:0; background:none;
    pointer-events:none; align-self:center;
  }
  .milestone .dot{
    width:10px; height:10px; border-radius:50%; background:var(--gold);
    box-shadow:0 0 0 2px rgba(0,0,0,.4);
  }
  .milestone.primary   .dot{ width:14px; height:14px; }

  .milestone .year-pin{
    position:static !important; margin:0; color:var(--gold); font-weight:700; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; align-self:center; min-width:0;
  }

  .milestone .popover{
    position:static !important; opacity:1 !important; visibility:visible !important;
    pointer-events:auto !important; transform:none !important; margin:0; padding:0;
    background:transparent; border:0; box-shadow:none; max-width:100%;
    white-space:normal; word-break:break-word; overflow-wrap:anywhere; display:block;
  }
  .milestone.primary .popover .year{ display:none; }
}