/* === Gotham fonts provided by user === */
@font-face{
  font-family: 'Gotham';
  src: local('Gotham Bold'), url('../fonts/Gotham-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham';
  src: local('Gotham Book'), url('../fonts/Gotham-Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham';
  src: local('Gotham Light'), url('../fonts/Gotham-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}


:root{
  --bg:#080b3c;
  --bg-2:#20268d;
  --ink:#e9f0f6;
  --ink-d:#c9d7e6;
  --muted:#a6b7cc;
  --brand:#58b7ff;
  --brand-2:#3ea2ff;
  --stroke:#233b5c;
  --card:#11253f;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, ui-sans-serif, system-ui;
    background: var(--bg);
    color: #FFFFFF;
    line-height: 1.55;
}
img{max-width:100%;height:auto;display:block}

.container{max-width:1200px;margin:0 auto;padding: clamp(16px, 3vw, 28px)}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(9,18,34,.75);backdrop-filter: blur(6px);border-bottom:1px solid var(--stroke)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;letter-spacing:.5px}
.logo{width:36px;height:36px}
.nav-links{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--ink);text-decoration:none;opacity:.9;padding:10px 4px;border-bottom:2px solid transparent}
.nav-links a.active, .nav-links a:hover{opacity:1;border-color:var(--brand)}
.nav-toggle{display:none;background:transparent;border:1px solid var(--stroke);color:var(--ink);padding:6px 10px;border-radius:8px}
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;right:16px;top:64px;background:var(--bg);border:1px solid var(--stroke);border-radius:12px;padding:12px;display:none;flex-direction:column;min-width:220px}
  .nav-links.show{display:flex}
}

/* HERO & SUBHERO */
.hero--cover{
  position:relative;
  min-height: clamp(420px, 66vh, 640px);
  background-image: linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)), url('../img/hero-mar.png');
  background-size: cover; background-position: center 40%;
  display:flex;align-items:flex-end;
}
.hero__grid{padding-top:40px;padding-bottom:48px}
.hero__text{max-width:720px}
.h1{font-size: clamp(34px, 6vw, 56px);line-height:1.1;margin:0 0 10px;font-weight:700;}
.h2{font-size: clamp(24px, 4vw, 34px);margin:0 0 8px;font-weight:700;}
.h3{font-size: clamp(20px, 3.5vw, 28px);margin:0 0 8px;font-weight:700;color:#427bb7}
.lead{color:#FFFFFF;max-width:760px;font-weight:300;}
.accent{color:#080b3c}
.leadnosotros{color:#427bb7;max-width:760px;font-weight:300;}

.subhero{position:relative;min-height:320px;background:linear-gradient(180deg,var(--bg-2),var(--bg));display:flex;align-items:flex-end}
.subhero__content{padding-top:36px;padding-bottom:48px}
.bg-nosotros{background-image:linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.9)), url('../img/Nosotros\ Banner.png');background-size:cover;background-position:center}
.bg-productos{background-image:linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.9)), url('../img/Productos\ Banner.png');background-size:cover;background-position:center}
.bg-contacto{background-image:linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.9)), url('../img/Contacto.png');background-size:cover;background-position:center}

.divider.bottom{position:absolute;left:0;right:0;bottom:-1px;height:70px;background:
  radial-gradient(60px 20px at 10% 40%, rgba(255,255,255,.07), transparent 70%),
  radial-gradient(80px 30px at 40% 50%, rgba(255,255,255,.07), transparent 70%),
  radial-gradient(100px 40px at 70% 60%, rgba(255,255,255,.07), transparent 70%);
  border-top:1px solid var(--stroke);
}
.divider.small{height:50px}

/* BANDS & SECTIONS */
.band{padding:28px 0;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);background:#0b1a2a}
.band--icons{background:#0d1f35}
.section{padding: clamp(40px, 6vw, 72px) 0}

/* removed empty .split__media .frame16x9 img rules to avoid empty rulesets */

.section.alt{background:#0b1a2a}

.cta{display:flex;gap:12px;margin-top:18px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:800;border:1px solid transparent}
.btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#071523}
.btn-outline{background:transparent;border-color:var(--stroke);color:var(--ink)}
.btn-sm{padding:10px 14px;border-color:var(--stroke);background:#0b1a2b;color:var(--ink)}
.link-arrow{display:inline-block;margin-top:12px}
.link-arrow::after{content:" ↗";opacity:.85}

/* ICON GRID */
.icons__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media (max-width:1100px){.icons__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.icons__grid{grid-template-columns:repeat(1,1fr)}}
.iconcard{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:16px;text-align:center;box-shadow:var(--shadow)}
.fi{width:72px;height:72px;margin:6px auto 10px;filter: drop-shadow(0 2px 8px rgba(0,0,0,.25))}

/* SPLIT */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
@media (max-width:980px){.split{grid-template-columns:1fr}}
.split__text .ticks{padding-left:20px}
.ticks li{margin:.35rem 0}
.frame16x9{aspect-ratio:16/9;overflow:hidden;border-radius:14px;border:1px solid var(--stroke);background:#091526;box-shadow:var(--shadow)}
.frame16x9 img{width:100%;height:100%;object-fit:cover}

/* CATALOG */
.catalog{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
@media (max-width:980px){.catalog{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.catalog{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.product .thumb{aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--stroke);margin-bottom:10px}
.product .thumb img{width:100%;height:100%;object-fit:cover}

/* GALLERY */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){.photo-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.photo-grid{grid-template-columns:1fr}}
.photo-card{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:16px;border:1px solid var(--stroke);background:#0b1a2a}
.photo-card img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02) saturate(1.05)}
.photo-card figcaption{position:absolute;left:10px;bottom:10px;background:rgba(8,16,30,.6);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15);padding:6px 10px;border-radius:10px;font-weight:700}

/* TRI */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.tri{grid-template-columns:1fr}}

/* CONTACTO SPLIT */
.contact-split{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media (max-width:900px){.contact-split{grid-template-columns:1fr}}
.form label{display:block;margin-bottom:12px}
.form input,.form textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--stroke);background:#0b1a2b;color:var(--ink)}

/* CTA BANNER */
.cta-banner{background:linear-gradient(180deg,#10253f,#0e2138);border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.cta-banner__inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.center{text-align:center}

/* FOOTER */
.footer{border-top:1px solid var(--stroke);background:#091526;margin-top:40px}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
@media (max-width:980px){.footer-top{grid-template-columns:1fr}}
.footer h4{margin-top:0}
.footer ul{margin:0;padding-left:16px}
.footer .cols{columns:2}
.copy{border-top:1px solid var(--stroke);padding:12px 24px;color:var(--muted);text-align:center;font-size:.9rem}
.brand-inline{display:flex;align-items:center;gap:10px}

/* UTIL */
.btn:hover{filter:brightness(1.05)}


/* === FAQ per PDF === */
.faq-list{
  counter-reset: item;
  list-style:none;
  padding:0;
  margin: 16px 0 28px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 24px;
}
@media (max-width:800px){ .faq-list{ grid-template-columns:1fr } }
.faq-list li{
  position:relative;
  padding-left: 42px;
  min-height: 32px;
  display:flex; align-items:center;
  border-bottom: 1px dashed var(--stroke);
  padding-bottom: 8px;
}
.faq-list li::before{
  counter-increment: item;
  content: counter(item) ".";
  position:absolute; left:0; top:0;
  width: 32px; height: 32px;
  display:grid; place-items:center;
  border-radius: 10px;
  border:1px solid var(--stroke);
  background:#0b1a2b;
  font-weight: 800;
  color: var(--ink);
}
.faq-highlight{
  margin-top: 12px;
  background: linear-gradient(180deg, #10253f, #0e2138);
  border: 1px solid var(--stroke);
}
.faq-cta{
  margin-top: 18px;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}


/* Overlay background image via custom property */
.carousel .slide{ 
  background-image:
    linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)),
    var(--bg), var(--bg);
  background-image:
    linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)),
    var(--bg), var(--bg),
    var(--bg);
  background-image:
    linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)),
    var(--bg);
  background:
    linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)),
    var(--bg);
  background-size: auto, cover;
  background-position:center 40%;
}
.carousel .slide{ background-image: linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)), var(--bg); background-size:auto, cover; background-position:center 40%; }
.carousel .slide{ background-image: linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)), var(--bg); background-size:auto, cover; background-position:center 40%; }
.carousel .slide{ background-image: linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)), var(--bg); background-size:auto, cover; background-position:center 40%; }
.carousel .slide{ background-image:
  linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)),
  var(--bg); background-size:auto, cover; background-position:center 40%; }
.carousel .slide{ background-image:
  linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)),
  var(--bg); background-size:auto, cover; background-position:center 40%; }

.carousel .slide{ background-image:
  linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)),
  var(--bg), var(--bg);
}
.carousel .slide{ background-size:auto, cover; background-position:center 40%; }
.carousel .slide{ background-image:
  linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)), var(--bg); }
.carousel .slide{ background-size:auto, cover; background-position:center 40%; }
/* Use CSS variable to inject the real photo */
.carousel .slide{ 
  background-image:
    linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg);
  background-image:
    linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg), var(--bg);
  background-image:
    linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg),
    var(--bg), 
    var(--bg), 
    var(--bg), 
    var(--bg), 
    var(--bg), 
    var(--bg);
  background-size:auto, cover; background-position:center 40%;
}
/* Real background layer set separately to avoid serialization issues */
.carousel .slide{ background-image: linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)), var(--bg); }
.carousel .slide{ background-size:auto, cover; background-position:center 40%; }
.carousel .slide{ background-image: linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)), var(--bg); }
.carousel .slide{ background-size:auto, cover; background-position:center 40%; }
.carousel .slide{ background-image: linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)), var(--bg); }
.carousel .slide{ background-size:auto, cover; background-position:center 40%; }
.carousel .slide{ background-image:
  linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)),
  var(--bg); }
.carousel .slide{ background-size:auto, cover; background-position:center 40%; }

.carousel .slide{ background-image:
  linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)),
  var(--bg), var(--bg);}
.carousel .slide{ background-size:auto, cover; background-position:center 40%;}
.carousel .slide{ background-image:
  linear-gradient(180deg, rgba(9,18,34,.55), rgba(9,18,34,.85)), var(--bg);}
.carousel .slide{ background-size:auto, cover; background-position:center 40%;}

.hero__content{max-width:900px;margin:0 auto;padding:0 24px 40px}
.hero__content .h1{margin-bottom:10px}
.hero__content .search input{width:100%;max-width:380px;background:#0b1a2b;border:1px solid var(--stroke);border-radius:12px;padding:12px;color:var(--ink)}

.car-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(8,16,30,.5);border:1px solid var(--stroke);color:var(--ink);
  display:grid;place-items:center;font-size:28px;cursor:pointer;
}
.car-arrow:hover{background:rgba(8,16,30,.7)}
.car-arrow.prev{left:14px}
.car-arrow.next{right:14px}

.car-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:6px}
.car-dots button{
  width:10px;height:10px;border-radius:50%;
  background:#2a4060;border:1px solid var(--stroke);cursor:pointer;
}
.car-dots button.active{background:var(--brand)}




/* === Carousel (imgs indexables) === */
.hero-carousel{position:relative;min-height: clamp(520px, 70vh, 720px);background:var(--bg)}
.carousel{position:relative;height:100%;overflow:hidden}
.carousel .slides{height:100%;display:flex;transition:transform .6s ease}
.carousel .slide{
  position:relative;
  min-width:100%;
  height: clamp(520px, 70vh, 720px);
  display:flex;align-items:flex-end;
}
.carousel .slide::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(9,18,34,.45), rgba(9,18,34,.78));
  z-index:1;
}
.slide-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  object-position: var(--pos, center 50%);
}
.hero__content{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:0 24px 40px}
.car-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(8,16,30,.5);border:1px solid var(--stroke);color:var(--ink);display:grid;place-items:center;font-size:28px;cursor:pointer}
.car-arrow:hover{background:rgba(8,16,30,.7)}.car-arrow.prev{left:14px}.car-arrow.next{right:14px}
.car-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:6px}
.car-dots button{width:10px;height:10px;border-radius:50%;background:#2a4060;border:1px solid var(--stroke);cursor:pointer}
.car-dots button.active{background:var(--brand)}



/* === Image Sizing Pass === */
/* Base: all images responsive and crisp */
img{max-width:100%;height:auto;display:block}

/* Logo sizes (navbar + footer) */
.nav img, .footer img.logo, .brand img{
    height: 90px;
    width: 100px;
}
@media (max-width: 780px){
  .nav img, .footer img.logo, .brand img{height:38px}
}

/* Icon cards */
.iconcard .fi{width:92px;height:92px;margin:0 auto 8px;object-fit:contain}
@media (max-width: 780px){ .iconcard .fi{width:72px;height:72px} }

/* Product cards */
.catalog .product .thumb{height:240px;border-radius:12px;overflow:hidden;background:#0e1b2d;border:1px solid var(--stroke)}
.catalog .product .thumb img{width:100%;height:100%;object-fit:cover;object-position:center}
@media (max-width: 920px){ .catalog .product .thumb{height:220px} }
@media (max-width: 680px){ .catalog .product .thumb{height:200px} }

/* Photo grid / gallery */
.photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width: 1000px){ .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 560px){ .photo-grid{grid-template-columns:1fr} }
.photo-grid .photo-card{border:1px solid var(--stroke);border-radius:14px;overflow:hidden;background:#0e1b2d}
.photo-grid .photo-card img{width:100%;height:260px;object-fit:cover;object-position:center}
@media (max-width: 680px){ .photo-grid .photo-card img{height:220px} }

/* Frame helpers */
.frame16x9{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;border:1px solid var(--stroke);background:#0e1b2d}
.frame16x9 > img, .frame16x9 > picture, .frame16x9 > iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}


/* === WhatsApp Floating Button === */
.wa-fab{
  position:fixed; right:16px; bottom:16px;
  width:56px; height:56px; border-radius:999px;
  background:#25D366; display:grid; place-items:center;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.2);
  z-index: 120;
}
.wa-fab img, .wa-fab svg{ width:28px; height:28px; display:block; }
.wa-fab:hover{ filter:brightness(1.05); transform:translateY(-1px) }
.wa-fab:focus-visible{ outline:3px solid var(--brand); outline-offset:3px }
@media (min-width:1100px){
  .wa-fab{ right:22px; bottom:22px }
}
/* Offset for cookie bars or fixed footers if any */
body.has-bottom-bar .wa-fab{ bottom:76px }
/* Aplicar color #427bb7 a los títulos de la sección Visión/Misión */
.section.alt .tri .card h3 {
  color: #427bb7;
}
.contact-info h3 {
  color: #427bb7;
}
.center {
  text-align: center;
}
/* Centrar el contenido de las tarjetas de producto */
.catalog .card.product {
  text-align: center;
} 
/* --- Cambios solicitados para el Footer --- */

/* 2. Color celeste para títulos "Contacto" y "Navegación" */
.footer .f-col h4 {
  color: #427bb7;
}

/* 3. Estilo para los nuevos enlaces de Políticas */
.copy a {
  color: var(--ink-d, #c9d7e6); /* Color 'ink-d' de tu CSS */
  text-decoration: none;
  padding: 0 5px; /* Un poco de espacio */
}

.copy a:hover {
  color: var(--brand, #58b7ff); /* Color 'brand' de tu CSS */
  text-decoration: underline;
}
.catalog .card.product h3 {
  color: #427bb7;
}