:root{
  --bg:#0b1220; --surface:#0f172a; --muted:#94a3b8; --text:#e2e8f0;
  --brand:#22d3ee; --brand-2:#38bdf8; --accent:#f59e0b;
  /* Section bicolor: top = color claro (arriba de la imagen), bottom = color oscuro (abajo de la imagen) */
  --section-light:#2bbbc5; /* color claro tomado de la parte superior de la imagen */
  --section-dark:var(--bg); /* color oscuro tomado de la parte inferior de la imagen (usa --bg por consistencia) */
  /* Custom dark for 'sectores clave' (aprox. del adjunto) */
  --section-dark-sectors:#062d33;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --container:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  
    margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:linear-gradient(180deg,#112c36 0%,#2bbbc5 100%);
  color:var(--text); line-height:1.6
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);width:100%;margin-left:auto;margin-right:auto;padding:0 20px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.2rem; border-radius:999px; font-weight:600;
  border:1px solid transparent;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#031026; box-shadow:var(--shadow)
}
.btn.secondary{background:transparent;border-color:#24314d;color:var(--text)}
.btn:hover{transform:translateY(-1px);filter:saturate(1.05)}
.btn-top{margin-top:10px}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(10,15,28,.7);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
/* When JS toggles .site-header-fixed this rule ensures the header is fixed to the viewport
  and sits above other content. The script will also add body padding equal to header height. */
header.site-header-fixed{ position:fixed !important; top:0; left:0; right:0; width:100%; z-index:9999 }
/* Top-level header container */
.site-header{display:block;padding:14px 0}

/* Ensure the inner container becomes a horizontal flex row so the brand and nav
  sit on the same baseline and the menu can be aligned to the right. */
.site-header > .container{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:.8rem}
.logo{width:36px;height:36px;border-radius:10px;background:conic-gradient(from 210deg,var(--brand),var(--brand-2));box-shadow:0 0 0 2px rgba(255,255,255,.08) inset}
.brand h1{font-size:1.05rem;margin:0;font-weight:800;letter-spacing:.4px}

/* NAV */
/* NAV */
/*
  NAV section
  - This block contains styles related to the page header and primary navigation.
  - Expected HTML structure (index.html):
      <header class="site-header">
        <div class="container">
          <a class="brand"> ... </a>
          <button class="nav__toggle">...</button>
          <nav class="nav" id="primary-nav">
            <ul class="nav__list">
              <li class="nav__item"><a class="nav__link">...</a></li>
            </ul>
            <div class="lang"> ... </div>
          </nav>
        </div>
      </header>

  Notes:
  - `.site-header` is the outer wrapper; `.nav` is the nav block that can become a stacked panel
    on small screens (controlled with the `.nav-open` class on the header).
  - `.nav__toggle` controls visibility and updates `aria-expanded`.
  - `.brand` is expected to include an inline logo image and a single-line site title.
*/
.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav__list{display:flex;gap:10px;align-items:center;margin:0;padding:0;list-style:none;flex-wrap:nowrap}

/* If the nav content overflows on very small viewports the panel will allow
  horizontal scrolling inside the list to avoid breaking the layout. */
.nav__list{overflow-x:auto}
.nav__list::-webkit-scrollbar{height:6px}
.nav__list::-webkit-scrollbar-thumb{background:#24314d;border-radius:6px}
.nav__item{margin:0}
.nav__link{display:inline-block;padding:.5rem .6rem;border-radius:10px;color:var(--muted)}
.nav__link.active,.nav__link:hover{color:var(--text);background:#0e182f}

/* language switch */
.lang{display:flex;gap:8px;align-items:center}
.lang button{display:inline-flex;gap:.5rem;align-items:center;background:#0e182f;border:1px solid #223254;color:var(--muted);padding:.25rem .6rem;border-radius:10px;cursor:pointer}
.lang button[aria-pressed="true"]{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#031026;border-color:transparent}

/* Brand image and layout helpers */
.brand img{width:36px;height:36px;border-radius:8px;display:inline-block;vertical-align:middle}
.brand h1{display:inline-block;vertical-align:middle;margin-left:10px;font-size:1rem;white-space:nowrap}

/* Flag icons inside language buttons */
.lang button img{width:20px;height:14px;display:inline-block;border-radius:2px}


/* Nav toggle (hamburger) for small screens */
.nav__toggle{display:none;align-items:center;justify-content:center;padding:.5rem;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer}
.nav__toggle:focus{outline:2px solid rgba(56,189,248,.18);outline-offset:2px}

/* Responsive: collapse nav into a panel on small viewports */
@media (max-width: 900px){
  .nav__toggle{display:inline-flex}
  /* hide the horizontal list, show as a stacked panel when opened */
  .site-header .nav{position:absolute;left:0;right:0;top:100%;background:rgba(2,6,12,0.96);backdrop-filter:blur(6px);flex-direction:column;padding:12px 20px;display:none;border-bottom:1px solid rgba(255,255,255,0.04)}
  .site-header.nav-open .nav{display:flex}
  .nav__list{flex-direction:column;gap:6px}
  .nav__link{padding:.75rem 1rem}
  /* place language buttons at the end of the nav panel */
  .lang{margin-top:8px;justify-self:flex-end}
}

/* Hero & layout */
.hero{position:relative;overflow:hidden;padding:80px 0 40px}
.grid-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.kpi .card{background:#0d162c;border:1px solid #24314d;border-radius:14px;padding:14px;text-align:center}
.kpi .n{font-size:1.25rem;font-weight:800}
.shape{position:absolute;inset:auto -10% -30% -10%;height:60vh;background:radial-gradient(60% 60% at 50% 50%,rgba(56,189,248,.25),transparent),radial-gradient(40% 40% at 60% 30%,rgba(34,211,238,.18),transparent)}

h2.section-title{font-size:1.8rem;margin:0 0 16px;font-weight:800;letter-spacing:.3px}
p.lead{color:var(--muted);font-size:1.08rem;margin:0}
/* Page hero (nosotros) - centered overlay with high contrast */
.page-hero{
  position:relative;
  display:flex;
  align-items:center;      /* vertical center */
  justify-content:center;  /* horizontal center */
  min-height:360px;
  background-size:cover;
  background-position:center;
}
.page-hero-contact{
  position:relative;
  display:flex;
  align-items:center;      /* vertical center */
  justify-content:center;  /* horizontal center */
  min-height:250px;
  background-size:cover;
  background-position:center;
}
.page-hero .overlay{
  width:min(980px,calc(100% - 60px));
  margin:auto;
  padding:32px 36px;
  border-radius:12px;
  background:rgba(2,6,12,0.72); /* darker overlay for readability */
  text-align:center;
  box-shadow:0 10px 30px rgba(2,6,12,.6);
}
.page-hero-contact .overlay{
  width:min(980px,calc(100% - 60px));
  margin:auto;
  padding:32px 36px;
  border-radius:12px;
  background:rgba(2,6,12,0.72); /* darker overlay for readability */
  text-align:center;
  box-shadow:0 10px 30px rgba(2,6,12,.6);
}
.page-hero-contact .section-title{color:#ffffff;font-size:2.25rem;margin:0 0 12px;font-weight:800}
.page-hero .overlay .lead{color:#ffffff;font-size:1.25rem;font-weight:600;line-height:1.4;text-shadow:0 3px 10px rgba(0,0,0,.6)}
@media (max-width: 1000px){
  .page-hero{min-height:320px}
  .page-hero .overlay{padding:26px}
  .page-hero .section-title{font-size:1.8rem}
  .page-hero .overlay .lead{font-size:1.1rem}
}
@media (max-width: 640px){
  .page-hero{min-height:220px}
  .page-hero .overlay{width:calc(100% - 32px);padding:18px}
  .page-hero .section-title{font-size:1.25rem}
  .page-hero .overlay .lead{font-size:1rem}
}
/* Make the first content block after the hero fill ~80% of the viewport and be centered
   - Targets common patterns: following section or container, plus common layout containers like .twocol, .cards and .gallery
   - For grid layouts we don't force flex; instead we align items vertically to center to avoid breaking grids. */
.page-hero + section,
.page-hero + .container,
.page-hero + .twocol,
.page-hero + .cards,
.page-hero + .gallery,
.page-hero + .values{
  min-height:40vh;
}

/* Default: stack and center content vertically for normal single-column containers */
.page-hero + section,
.page-hero + .container{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Preserve grid layouts but vertically center their content */
.page-hero + .twocol,
.page-hero + .cards,
.page-hero + .gallery{
  display:grid; /* keep their intended grid behaviour */
  align-items:center;
}

@media (max-width: 900px){
  .page-hero + section,
  .page-hero + .container,
  .page-hero + .twocol,
  .page-hero + .cards,
  .page-hero + .gallery{
    min-height:60vh;
  }
}

/* Homepage specific: make index content match the centered constrained layout used in 'nosotros' */
.index-main{display:block}
.index-main > .twocol,
.index-main > .gallery,
.index-main > .cards,
.index-main > .container,
.index-main > .carousel{
  max-width:var(--container);
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
}

@media (max-width:1000px){
  .index-main > .twocol{grid-template-columns:1fr}
}
section{padding:30px 0;border-top:1px solid rgba(255,255,255,.06)}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.card{background:#0d162c;border:1px solid #24314d;border-radius:16px;padding:20px}
.card h3,.card h4{margin:.2rem 0 .3rem;font-size:1.1rem}

.chip{display:inline-flex;gap:.4rem;align-items:center;border:1px solid #24314d;background:#0c152b;padding:.25rem .55rem;border-radius:999px;color:#cbd5e1;font-size:.86rem}
.list{display:grid;gap:.45rem;margin:10px 0 0;padding:0}
.list li{list-style:disc;margin-left:1.2rem;color:#c7d2fe}
.twocol{display:grid;grid-template-columns:50% 50%;gap:24px}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.media{background:#0d162c;border:1px solid #24314d;border-radius:16px;padding:16px}

.media img{border-radius:12px;margin-bottom:10px;border:1px solid #24314d}

/* Fullwidth media for Nosotros: images that span the content width */
.media.fullwidth{background:transparent;border:0;padding:0;border-radius:0}
.media.fullwidth img{width:100%;height:360px;object-fit:cover;border-radius:8px;border:0}
.card.fullwidth{max-width:1200px;margin:18px auto;padding:28px;border-radius:12px}
.card.fullwidth h4{margin-top:0}

@media (max-width: 1000px){
  .media.fullwidth img{height:260px}
  .card.fullwidth{padding:20px;margin:14px}
}
@media (max-width: 640px){
  .media.fullwidth img{height:180px}
  .card.fullwidth{padding:14px;margin:10px}
}

/* Justify card paragraph text for better readability on Vision/Mission */
.card p, .card.fullwidth p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

/* Gallery (Sectores clave) - uniform thumbnails */
.gallery .media img{
  width:100%;
  height:180px; /* base thumbnail height for desktop */
  object-fit:cover; /* crop to fill without distortion */
  display:block;
  border-radius:12px;
  margin-bottom:10px;
  border:1px solid #24314d;
}

@media (max-width: 1200px){
  .gallery .media img{ height:160px }
}
@media (max-width: 1000px){
  .gallery .media img{ height:150px }
}
@media (max-width: 640px){
  .gallery .media img{ height:140px }
}

/* Make Visión & Misión images uniform in size while keeping other .media images unchanged */
.twocol .media img{
  width:100%;
  height:220px; /* base height for desktop */
  object-fit:cover; /* crop to fill without distortion */
  border-radius:12px;
  margin-bottom:10px;
  border:1px solid #24314d;
}

@media (max-width: 1000px){
  .twocol .media img{ height:200px }
}
@media (max-width: 640px){
  .twocol .media img{ height:180px }
}

/* Helpers moved from inline */
.actions{display:flex;gap:12px;margin-top:22px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.section-spacer{margin-top:34px}
.cta-card{margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Contact form: make inputs full-width, readable and spaced */
#contacto form{ max-width:980px; margin-top:10px }
#contacto form > div:not(.row){ margin-bottom:14px; display:flex; flex-direction:row }
#contacto label{ display:block; margin-bottom:6px; color:var(--muted); font-weight:600 }
#contacto input, #contacto textarea{ width:100%; max-width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.18); color:var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) }
#contacto textarea{ min-height:110px; resize:vertical }
#contacto .btn{ margin-top:8px }

/* clearer placeholders for better contrast */
#contacto input::placeholder, #contacto textarea::placeholder{ color:rgba(255,255,255,0.65) }

/* Contact card layout - avoid internal scroll and allow the card to grow naturally */
.contact-card{ padding:20px; display:flex; flex-direction:column; gap:12px; overflow:visible; height:100%; position:relative; z-index:1; align-self:stretch }
.contact-card .row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.contact-card .row > div{ display:flex; flex-direction:column }
.contact-card .row .full{ grid-column:1/-1 }
.contact-card input, .contact-card textarea{ max-width:100% }
.contact-card textarea{ min-height:140px; resize:vertical }
@media (max-width:1000px){ .contact-card .row{ grid-template-columns:1fr } }

/* remove top/bottom spacing for the contact section title to tighten layout */
#contacto .section-title{ margin-top:0; margin-bottom:0 }

/* Ensure address is visible: use site's text color for contrast */
.contact-address{ color:var(--text) !important }

/* reCAPTCHA alignment */
.g-recaptcha{ transform:scale(0.98); transform-origin:0 0 }

/* captcha + button alignment inside the form */
.captcha-row{ display:flex; align-items:center; gap:12px }
.captcha-row .g-recaptcha{ margin:0 }
.captcha-row .btn{ margin:0 }


/* Fila: checkbox + texto + captcha + botón */
.form-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;         /* evita desbordes; en móvil se apila */
  margin-top:10px;
}

/* Consent en línea */
.form-actions .consent{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
}
.form-actions .consent input{
  width:auto; height:auto; margin:0;
}

/* Asegura alineación visual del captcha y botón */
.form-actions .g-recaptcha{ margin:0; transform:scale(0.98); transform-origin:left center; }
.form-actions .btn{ margin:0; }

/* Opcional: en móviles, apílalo y que el botón ocupe todo el ancho */
@media (max-width:640px){
  .form-actions{ flex-direction:column; align-items:stretch; }
  .form-actions .btn{ width:100%; }
}

/* IMPORTANTE: si ya tenías estilos .consent previos que forzaban grid/anchos,
   neutralízalos cuando estén dentro de .form-actions */
.consent{ width:auto; }
.consent label{ white-space:initial; }
/* Consent (checkbox + label) alignment inside contact form */
/* Consent as a 2-column grid: 10% (checkbox) / 90% (label) */
.consent{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  margin-bottom:8px;
}
.consent input[type="checkbox"]{
  width:18px; height:18px;
  margin:0;
  width:10%;
  justify-self:left; /* center checkbox horizontally in the 10% column */
  align-self:left;
}
.consent label{
  margin:0; color:var(--muted); font-weight:500; cursor:pointer; line-height:1.25;
  white-space:initial; /* allow wrapping in the 90% column */
  overflow:visible; max-width:100%;
}
/* Note: do NOT override to flex here — keep the grid (10%/90%) so checkbox and label
   are in fixed columns. If you need a different behavior on very small screens,
   add a media query below. */

@media (max-width: 640px){
  .twocol{ grid-template-columns:1fr }
  .captcha-row{ flex-direction:column; align-items:stretch }
  .captcha-row .g-recaptcha{ transform:scale(0.95); margin-bottom:8px }
  .captcha-row .btn{ width:100% }
}

/* Improve chips/tags visibility and spacing */
.tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; margin-bottom:18px }
.chip{ padding:.45rem .75rem; font-size:.95rem; border-radius:999px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); box-shadow:0 6px 18px rgba(2,6,23,.35); transition:transform .12s ease, box-shadow .12s ease }
.chip:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(2,6,23,.45); color:var(--text) }

/* Footer spacing and responsive stacking */
footer{ padding:48px 0 64px; border-top:1px solid rgba(255,255,255,.04); color:#93a4bb }
.foot{ display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center }
.socials{ display:flex; gap:12px; align-items:center }
@media (max-width:1000px){
  .foot{ flex-direction:column; align-items:flex-start; gap:12px }
  .socials{ align-self:flex-end }
}

/* Centered subtle panel behind each section's container to visually center content bands
   Exclude the hero section (it has its own overlay) */
/* band panels replaced by explicit section.bands to give each session its own color */
.band{ position:relative }
.band > .container{ position:relative; z-index:1 }
.band{ padding-block:28px }
/* ensure bands don't visually touch each other -> avoids color bleed/overlap */
.band + .band{ margin-top:18px }
.band::before{ content:""; position:absolute; left:50%; transform:translateX(-50%); width:100%; max-width:calc(var(--container) + 48px); border-radius:12px; z-index:0; pointer-events:none; top:1px; bottom:1px }
.band-dark::before{ background: rgba(2,6,23,0.14) }
.band-light::before{ background: rgba(34,75,160,0.08) }

/* New: Bicolor bands that use a top (light) and bottom (dark) color matching the provided image
   Usage: add class `bicolor` to a section or `.band` wrapper to render a soft gradient from
   --section-light (top) to --section-dark (bottom). This excludes `.page-hero` which has its
   own imagery and overlay. */
.bicolor::before{
  background: linear-gradient(180deg, var(--section-light) 0%, var(--section-dark) 60%);
  opacity:0.08; /* subtle tint so text and panels remain readable */
}

/* Helper variants if you want stronger contrast */
.bicolor-strong::before{
  background: linear-gradient(180deg, var(--section-light) 0%, var(--section-dark) 60%);
  opacity:0.16;
}

/* bicolor-light: a variant that favors the light color as a (nearly) solid background
   Use this for sections where you want a visibly light band derived from the image top color. */
.bicolor-light::before{
  background: linear-gradient(180deg, var(--section-light) 0%, rgba(255,255,255,0) 60%);
  opacity:0.14;
}

/* bicolor-dark: variant that uses a deeper teal/blue for the bottom color
   Intended for the "Sectores clave" section to match the provided dark sample.
   Render 40px solid color bars at the top and bottom of the section using
   ::before and ::after so the main section area remains unaffected. */
.bicolor-dark{
  position:relative;
  /* Reserve extra space so the 40px stripes do not overlap content.
     Default .band padding-block is 28px, so add 40px on top and bottom. */
  padding-top:68px; /* 28 + 40 */
  padding-bottom:68px;
}
.bicolor-dark::before,
.bicolor-dark::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:calc(var(--container) + 48px);
  height:40px;
  z-index:0;
  pointer-events:none;
  background:var(--section-dark-sectors);
  opacity:0.14; /* tweak if you want a stronger stripe (set to 1) */
  /* subtle borders so the stripe reads as a band against the page background */
  border-left:1px solid rgba(255,255,255,0.02);
  border-right:1px solid rgba(255,255,255,0.02);
}
.bicolor-dark::before{ top:1px; border-top-left-radius:12px; border-top-right-radius:12px }
.bicolor-dark::after{ bottom:1px; border-bottom-left-radius:12px; border-bottom-right-radius:12px }

/* Responsive adjustments: .band padding-block changes in media queries, keep stripes aligned */
@media (max-width: 1000px){
  .bicolor-dark{ padding-top:60px; padding-bottom:60px } /* 20 + 40 */
}
@media (max-width: 640px){
  .bicolor-dark{ padding-top:54px; padding-bottom:54px } /* 14 + 40 */
}

/* Light section helper: solid background, fixed visual width and content shadow
   Usage: add class `section-light` on a section to get a solid #22d3ee band with
   30px top/bottom spacing. The inner container remains centered and constrained
   to the site's --container width (1200px). Children inside the container get
   a subtle lighter shadow and 20px margin. */
.section-light{
  background:#178d9f;
  padding-top:30px;
  padding-bottom:30px;
}
.section-light > .container{
  max-width:var(--container); /* 1200px */
  width:100%;
  margin-left:auto; margin-right:auto;
  position:relative; z-index:1;
}
/* apply a subtle lighter shadow to immediate children and spacing */
.section-light > .container > *{
  margin:20px;
  /* box-shadow: 10% lighter than the background — approximate by using rgba white */
  box-shadow: 0 8px 20px rgba(255,255,255,0.06);
}

@media (max-width: 640px){
  .section-light > .container > *{ margin:12px; box-shadow:0 6px 14px rgba(255,255,255,0.05) }
}

/* Dark section helper: same behavior as .section-light but with a deep background */
.section-dark{
  background:#112c36;
  padding-top:30px;
  padding-bottom:30px;
}
.section-dark > .container{
  max-width:var(--container); /* 1200px */
  width:100%;
  margin-left:auto; margin-right:auto;
  position:relative; z-index:1;
}
.section-dark > .container > *{
  margin:20px;
  /* use a subtle dark shadow to lift content slightly over the dark background */
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}

@media (max-width: 640px){
  .section-dark > .container > *{ margin:12px; box-shadow:0 6px 14px rgba(0,0,0,0.22) }
}

/* Aquamarine band for contact to make map+form sit on colored background */
.band-aqua::before{ background: rgba(43,187,197,0.08) }
/* make the aqua band taller and lift the contact card slightly so it doesn't touch the dark band below */
.band-aqua{ padding-top:5px; padding-bottom:15px }
.band-aqua .contact-card{ max-width:980px; margin:0 auto; transform:translateY(-18px); box-shadow:0 18px 40px rgba(2,6,23,0.35) }
@media (max-width:1000px){ .band-aqua .contact-card{ transform:none; margin-top:6px } }

/* Dark band for full-width map: allow full-bleed content */
.band-dark{ padding:0 }
.band-dark > .container{ padding:28px 20px; max-width:100%; width:100%; }
.band-dark::before{ display:none }
.band-dark .kb-frame{ border-radius:0; border-left:0; border-right:0; max-width:1200px; margin:0 auto; }
.band-dark .kb-frame iframe{ border-radius:0; width:100%; height:100%; }

@media (max-width: 1220px){
  .band-dark .kb-frame{ max-width:calc(100% - 40px); margin:0 20px }
}

@media (max-width: 1000px){
  .band{ padding-block:20px }
  .band + .band{ margin-top:12px }
}
@media (max-width: 640px){
  .band{ padding-block:14px }
  .band + .band{ margin-top:8px }
}

/* smaller top/bottom inset for very small screens to avoid overlap */
@media (max-width:640px){
  section > .container:not(.hero)::before, section.container:not(.hero)::before{ top:6px; bottom:6px; border-radius:8px }
}

/* Centered panels for main-level blocks that are not section elements */
main > .gallery, main > .carousel, main > .tags, main > .cards, main > .values-grid{
  position:relative;
  /* add internal spacing so the centered panel wraps content cleanly */
  padding:18px 18px 22px;
}
main > .gallery::before,
main > .carousel::before,
main > .tags::before,
main > .cards::before,
main > .values-grid::before{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  top:1px; bottom:1px; /* inset by 1px so separators remain visible */
  width: min(100%, calc(var(--container) + 48px));
  max-width: calc(var(--container) + 48px);
  background: rgba(2,6,23,0.16);
  border-radius:12px; z-index:0; pointer-events:none;
}
/* ensure children appear above panel */
main > .gallery > *, main > .carousel > *, main > .tags > *, main > .cards > *, main > .values-grid > *{ position:relative; z-index:1 }

@media (max-width:640px){
  main > .gallery::before, main > .carousel::before, main > .tags::before{ top:1px; bottom:1px; border-radius:8px }
  main > .gallery, main > .carousel, main > .tags{ padding:12px }
}

/* Footer */
footer{padding:40px 0;border-top:1px solid rgba(255,255,255,.06);color:#93a4bb}
.foot{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.socials{display:flex;gap:12px;align-items:center}

/* Responsive */
@media (max-width: 1200px){ .gallery{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 1000px){
  .grid-hero{grid-template-columns:1fr}
  .kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .twocol{grid-template-columns:1fr}
}

/* Make the contact two-column take more width inside the band panel */
#contacto.container, section#contacto > .container{ max-width:1200px }
#contacto .kb-frame{ min-height:420px }
@media (max-width: 640px){
  .kpi,.cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
}
/* --- Ken Burns: imagen que se mueve en bucle --- */
.kb-frame{
  position:relative;
  overflow:hidden;
  border:1px solid #24314d;
  border-radius:12px;
  background:#0d162c;
  /* Mantén proporción agradable en la columna derecha  */
  aspect-ratio: 16 / 10;
  min-height: 320px;
}
/* Ensure iframe content is clipped to rounded container and doesn't overflow */
.kb-frame iframe{ display:block; width:100%; height:100%; border:0; border-radius:inherit }
.kb-frame{ z-index:0 }
/* Utility: visually hidden but accessible (screen-reader only) */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.kb-frame img{
  position:absolute; inset:-5%;
  width:110%; height:110%; object-fit:cover;
  transform-origin:center;
  animation: kb-pan 24s ease-in-out infinite alternate;
  filter: contrast(1.02) saturate(1.05);
}
@keyframes kb-pan{
  0%   { transform:scale(1) translate3d(0, 0, 0); }
  50%  { transform:scale(1.08) translate3d(-2%, -2%, 0); }
  100% { transform:scale(1.12) translate3d(2%, 2%, 0); }
}
/* Respeta accesibilidad si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  .kb-frame img{ animation:none; transform:none; }
}
/* ==== Carousel base ==== */
.carousel{ position:relative; }
.carousel-viewport{
  overflow:hidden; border-radius:16px;
}
.carousel-track{
  display:grid; gap:18px;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px; /* espacio para evitar ocultar sombra */
}
.carousel-track::-webkit-scrollbar{ height:8px }
.carousel-track::-webkit-scrollbar-thumb{ background:#24314d; border-radius:8px }

/* Slides */
.slide{ scroll-snap-align:start; }
.slide.card{
  display:flex; flex-direction:column; gap:12px;
  background:#0d162c; border:1px solid #24314d; border-radius:16px; padding:16px;
}
.svc-figure{ margin:0; border-radius:12px; overflow:hidden; border:1px solid #24314d; }
.svc-figure img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; display:block }

/* Controles */
.carousel-btn{
  position:absolute; top:50%; translate:0 -50%;
  width:42px; height:42px; border-radius:50%;
  border:1px solid #24314d; background:#0c152b; color:#e2e8f0;
  font-size:22px; line-height:1; display:grid; place-items:center;
  cursor:pointer; box-shadow:var(--shadow);
}
.carousel-btn:hover{ background:#0e182f }
.carousel-btn.prev{ left:6px }
.carousel-btn.next{ right:6px }

/* Dots */
.carousel-dots{
  display:flex; gap:8px; justify-content:center; margin-top:14px;
}
.carousel-dots button{
  width:10px; height:10px; border-radius:999px; border:0;
  background:#223254; opacity:.6; cursor:pointer;
}
.carousel-dots button[aria-selected="true"]{
  opacity:1; background:linear-gradient(90deg,var(--brand),var(--brand-2));
}

/* Responsive: 2 y 3 por vista */
@media (min-width: 900px){
  .carousel-track{ grid-auto-columns:50% }
}
@media (min-width: 1280px){
  .carousel-track{ grid-auto-columns:33.3333% }
}

/* Accesibilidad: reducir movimientos */
@media (prefers-reduced-motion: reduce){
  .carousel-track{ scroll-behavior:auto }
}
.carousel-track{
  scrollbar-width: thin; /* Firefox */
}
.carousel-track::-webkit-scrollbar{
  height: 0; /* Chrome/Edge */
}

/* ==== FIX FLIP 3D PARA VALORES ==== */
.value-card{
  perspective:1200px;
  -webkit-perspective:1200px; /* Safari */
}

.value-toggle{ all:unset; display:block; width:100%; cursor:pointer; }

.value-inner{
  position:relative;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d; /* Safari */
  transition:transform .65s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
  border:1px solid #24314d; border-radius:16px; overflow:hidden;
  background:#0d162c;
  min-height:320px;
}

.value-card[data-open="true"] .value-inner{ transform:rotateY(180deg); }

/* Caras */
.value-face{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden; /* Safari */
  transform:translateZ(0);            /* evita artefactos */
}

.value-front{
  transform:rotateY(0);
  z-index:2;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(34,211,238,.18), transparent),
    radial-gradient(90% 90% at 100% 100%, rgba(56,189,248,.15), transparent),
    #0c152b;
}
.value-front::before{
  content:""; position:absolute; inset:0;
  background-image:var(--bg);
  background-size:cover; background-position:center;
  opacity:.9;
}
.value-front img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* Título sobre la imagen */
.value-title{
  position:relative; z-index:1; margin:14px; align-self:flex-start;
  padding:.4rem .7rem; border-radius:10px; font-weight:700; letter-spacing:.2px;
  background:linear-gradient(90deg,rgba(2,6,23,.75),rgba(2,6,23,.4));
  border:1px solid rgba(148,163,184,.35);
}

/* Dorso visible tras el giro */
.value-back{
  transform:rotateY(180deg); /* corrige orientación cuando el contenedor gira */
  z-index:1;
  padding:18px; gap:8px; color:#cbd5e1;
  display:flex; flex-direction:column; justify-content:center; text-align:left;
  background:linear-gradient(180deg,rgba(2,6,23,.85),rgba(2,6,23,.75));
  border-left:1px solid #24314d;
}
.value-back h3{ margin:.2rem 0 .4rem; font-size:1.06rem; color:#e2e8f0 }
.value-back p{ margin:0; }

/* Accesibilidad: reduce animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .value-inner{ transition:none }
}

/* ===== Valores: grid y flip ===== */
.values-intro { margin-bottom: 18px; }
.values-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(1,minmax(0,1fr));
}
@media (min-width: 900px){ .values-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width: 1280px){ .values-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.value-card{ perspective: 1200px; }
.value-toggle{
  all:unset; display:block; width:100%; cursor:pointer;
}
.value-inner{
  position:relative; transform-style:preserve-3d;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
  border:1px solid #24314d; border-radius:16px; overflow:hidden;
  background:#0d162c;
  min-height: 320px;
}
.value-card[data-open="true"] .value-inner{ transform: rotateY(180deg); }

/* Caras */
.value-face{
  position:absolute; inset:0; backface-visibility:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.value-front{
  background: radial-gradient(120% 120% at 0% 0%, rgba(34,211,238,.18), transparent),
              radial-gradient(90% 90% at 100% 100%, rgba(56,189,248,.15), transparent),
              #0c152b;
}
.value-front::before{
  /* imagen de fondo con CSS para tener algo aunque <img> falle */
  content:""; position:absolute; inset:0;
  background-image: var(--bg);
  background-size: cover; background-position: center;
  opacity:.9;
}
.value-front img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* si onerror oculta el <img>, queda el background CSS */
}
.value-title{
  position:relative; z-index:1;
  display:inline-block; margin:14px;
  align-self:flex-start;
  padding:.4rem .7rem; border-radius:10px;
  font-weight:700; letter-spacing:.2px;
  background:linear-gradient(90deg,rgba(2,6,23,.75),rgba(2,6,23,.4));
  border:1px solid rgba(148,163,184,.35);
}

/* Dorso */
.value-back{
  transform: rotateY(180deg);
  padding:18px; gap:8px; color:#cbd5e1;
  display:flex; flex-direction:column; justify-content:center;
  text-align:left;
}
.value-back h3{ margin:.2rem 0 .4rem; font-size:1.06rem; color:#e2e8f0 }
.value-back p{ margin:0; }

/* CTA */
.values-cta{
  margin-top:22px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
/* --- FIX: no rotar el contenedor en abierto --- */
.value-card[data-open="true"] .value-inner{ transform:none !important; }

/* Perspectiva base */
.value-card{ perspective:1200px; -webkit-perspective:1200px; }

/* Caras: 3D y antiflicker */
.value-face{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}

/* Frente: visible por defecto */
.value-front{ transform:rotateY(0deg) translateZ(0.01px); z-index:2; }
.value-front::before{
  content:""; position:absolute; inset:0;
  background-image:var(--bg); background-size:cover; background-position:center; opacity:.9;
}
.value-front img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Título sobre la imagen */
.value-title{
  position:relative; z-index:1; margin:14px; align-self:flex-start;
  padding:.4rem .7rem; border-radius:10px; font-weight:700;
  background:linear-gradient(90deg,rgba(2,6,23,.75),rgba(2,6,23,.4));
  border:1px solid rgba(148,163,184,.35);
}

/* Dorso: inicialmente girado y oculto (para fallback de opacidad) */
.value-back{
  transform:rotateY(180deg) translateZ(0.01px);
  opacity:0; z-index:1;
  padding:18px; gap:8px; color:#cbd5e1;
  display:flex; flex-direction:column; justify-content:center; text-align:left;
  background:linear-gradient(180deg,rgba(2,6,23,.85),rgba(2,6,23,.75));
  border-left:1px solid #24314d;
}
.value-back h3{ margin:.2rem 0 .4rem; font-size:1.06rem; color:#e2e8f0 }
.value-back p{ margin:0; }

/* ESTADO ABIERTO: intercambiar caras (NO el contenedor) */
.value-card[data-open="true"] .value-front{
  transform:rotateY(180deg) translateZ(0.01px);
  opacity:0; pointer-events:none;
}
.value-card[data-open="true"] .value-back{
  transform:rotateY(0deg) translateZ(0.01px);
  opacity:1; pointer-events:auto;
}

/* STRONG FIX: ensure front is fully hidden and back visible when open to avoid duplicated appearance */
.value-card[data-open="true"] .value-front{
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
}
.value-card[data-open="true"] .value-back{
  visibility:visible !important;
}

/* Menos movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .value-face{ transition:opacity .2s ease; }
  .value-front{ transform:none; }
  .value-back{ transform:none; display:none; }
  .value-card[data-open="true"] .value-front{ display:none; }
  .value-card[data-open="true"] .value-back{ display:flex; }
}

/* ===== Galería (grid) ===== */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 1200px){ .gallery-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 900px){  .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){  .gallery-grid{ grid-template-columns: 1fr; } }

.thumb{
  position:relative; border:1px solid #24314d; border-radius:16px; overflow:hidden;
  background:#0d162c; aspect-ratio: 4 / 3; cursor:pointer;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb .cap{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px;
  background:linear-gradient(180deg,rgba(3,10,25,0) 0%, rgba(3,10,25,.7) 85%);
  color:#dbe7ff; font-weight:600; font-size:.95rem;
}
.thumb .play-badge{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  font-size:42px; line-height:1; color:#eaf2ff; text-shadow:0 2px 16px rgba(0,0,0,.6);
}

/* ===== Lightbox simple ===== */
.lightbox{
  position:fixed; inset:0; background:rgba(3,10,25,.84); display:none; z-index:2000;
}
.lightbox[data-open="true"]{ display:grid; place-items:center; padding:24px; }
.lightbox figure{ position:relative; max-width:min(1200px,92vw); max-height:90vh; margin:0; }
#lb-media{ display:grid; place-items:center; }
#lb-media img, #lb-media video{ max-width:100%; max-height:86vh; border-radius:14px; }

.lb-close, .lb-prev, .lb-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#0e182f; border:1px solid #223254; color:#e4edff;
  border-radius:999px; width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
}
.lb-close{ top:-16px; right:-16px; transform:none; }
.lb-prev{ left:-16px; }
.lb-next{ right:-16px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover{ background:#132241; }


/* Si tienes .ao-caption: ocúltala por defecto y muéstrala en hover */
.ao-slide .ao-caption{
  position:absolute; left:12px; bottom:12px;
  padding:.35rem .6rem; border-radius:10px;
  background:rgba(2,6,23,.6); color:#eaf2ff; font-weight:700;
  border:1px solid rgba(148,163,184,.35);
  opacity:0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.ao-slide:hover .ao-caption,
.ao-slide:focus-within .ao-caption{
  opacity:1; transform: translateY(0);
}

/* Si usas el overlay que hicimos, asegúrate de que NO sea fijo */
.ao-slide .ao-overlay{ opacity:0; transform: translateY(6px); }
.ao-slide:hover .ao-overlay{ opacity:1; transform: translateY(0); }