/* =========================================================
   RÍO LONGAVÍ — Sistema de diseño
   Tema: ingeniería hídrica / topografía de cuenca fluvial
   Tipos: Space Grotesk (display) + Inter (texto) + IBM Plex Mono (datos)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --navy-900:#071b2e;
  --navy-800:#0c2a44;
  --navy-700:#123a5c;
  --navy-600:#1a4d78;
  --cyan-500:#12a2d6;
  --cyan-400:#3cc0ea;
  --cyan-300:#8ee0f5;
  --amber-500:#f0a53c;
  --paper:#f4f8fb;
  --paper-dim:#e8eff4;
  --white:#ffffff;
  --ink-900:#0a1c2b;
  --ink-600:#3d5164;
  --ink-400:#6d8194;
  --line:#dde6ec;
  --line-dark:#1c3d5a;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius-s:6px;
  --radius-m:12px;
  --radius-l:20px;
  --max:1180px;

  /* Curvas de nivel — motivo topográfico de la cuenca, reutilizado como textura de marca */
  --contour-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'%3E%3Cg fill='none' stroke='%2312a2d6' stroke-width='1.1'%3E%3Cpath d='M-20 60 C 140 10, 260 110, 420 40 S 700 90, 860 30'/%3E%3Cpath d='M-20 120 C 160 70, 300 170, 460 100 S 720 150, 860 90'/%3E%3Cpath d='M-20 180 C 180 130, 320 230, 480 160 S 740 210, 860 150'/%3E%3Cpath d='M-20 240 C 150 190, 340 290, 500 220 S 760 270, 860 210'/%3E%3Cpath d='M-20 300 C 170 260, 300 350, 470 280 S 730 330, 860 270'/%3E%3Cpath d='M-20 360 C 190 320, 330 410, 500 340 S 750 390, 860 330'/%3E%3Cpath d='M-20 420 C 160 380, 320 460, 490 400 S 740 440, 860 390'/%3E%3Cpath d='M-20 470 C 200 440, 330 500, 520 450 S 760 480, 860 440'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:#e6f2f5;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;color:var(--navy-900);letter-spacing:-0.01em;}
p{margin:0;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan-500);
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:18px;height:1px;
  background:var(--cyan-500);
}
.section-title{
  font-size:clamp(24px,3vw,34px);
  font-weight:700;
  text-align:center;
  margin-bottom:10px;
}
.section-head{max-width:620px;margin:0 auto 48px;text-align:center;}
.section-head .eyebrow{justify-content:center;}
.section-sub{color:var(--ink-400);font-size:15.5px;margin-top:12px;}

.section{padding:76px 0;}
.section--dark{background:var(--navy-900);color:var(--white);}
.section--dark .section-title{color:var(--white);}
.section--dim{background:var(--paper);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  padding:13px 26px;
  border-radius:999px;
  border:1.5px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--cyan-500);color:var(--white);}
.btn-primary:hover{background:var(--cyan-400);}
.btn-ghost{border-color:rgba(255,255,255,.45);color:var(--white);}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08);}
.btn-outline{border-color:var(--navy-700);color:var(--navy-900);}
.btn-outline:hover{background:var(--navy-900);color:var(--white);}
.btn-sm{padding:9px 18px;font-size:12.5px;}
.btn-login{background:var(--navy-800);color:var(--cyan-500);border-color:var(--navy-700);padding:8px 18px;font-size:12.5px;gap:6px;}
.btn-login:hover{background:var(--navy-700);color:var(--white);}
.btn-login svg{width:16px;height:16px;}
.btn svg{width:14px;height:14px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(7,27,46,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:90px;
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:16.5px;
  color:var(--white);
  letter-spacing:.01em;
}
.logo .mark{
  width:auto;height:auto;
  display:flex;align-items:center;justify-content:center;
}
.nav{display:flex;align-items:center;gap:30px;}
.nav a{
  font-size:13px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
  padding:6px 0;position:relative;
}
.nav a:hover, .nav a.active{color:var(--white);}
.nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--cyan-400);
}
.header-actions{display:flex;align-items:center;gap:16px;}
.theme-toggle{
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--white);
}
.nav-toggle{display:none;background:none;border:0;color:var(--white);}

@media (max-width: 960px){
  .nav{
    position:absolute;top:90px;left:0;right:0;height:calc(100vh - 90px);background:var(--navy-900);
    flex-direction:column;justify-content:flex-start;padding:36px 28px;gap:22px;
    transform:translateX(100%);transition:transform .3s ease;
  }
  .nav.open{transform:translateX(0);}
  .nav a{font-size:16px;}
  .nav-toggle{display:block;}
}

/* ---------- Breadcrumb / page hero ---------- */
.breadcrumb-bar{padding:22px 0 0;}
.breadcrumb{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.05em;
  color:var(--cyan-300);
  display:flex;gap:8px;align-items:center;
}
.breadcrumb .sep{color:rgba(255,255,255,.4);}
.breadcrumb .cur{color:rgba(255,255,255,.75);}

.page-hero{
  position:relative;
  background:linear-gradient(180deg, rgba(7,27,46,.55), rgba(7,27,46,.88)), var(--navy-800);
  color:var(--white);
  padding:140px 0;
  overflow:hidden;
}
.page-hero .contour{position:absolute;inset:0;opacity:.35;pointer-events:none;background-image:var(--contour-svg);background-size:cover;background-position:center;}
.page-hero h1{color:var(--white);
  font-size:clamp(30px,4.2vw,46px);
  margin-top:16px;
  position:relative;z-index:1;
}
.page-hero-inner{position:relative;z-index:1;}

.stat-strip{
  background:var(--cyan-500);
  color:var(--white);
}
.stat-strip .wrap{
  display:flex;flex-wrap:wrap;
  padding:14px 28px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.03em;
  gap:8px 30px;
  justify-content:center;
}
.stat-strip b{font-weight:600;}

/* ---------- Media placeholder (stand-in for real assets) ---------- */
.media{
  position:relative;
  border-radius:var(--radius-m);
  overflow:hidden;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 26px),
    linear-gradient(150deg, var(--navy-700), var(--navy-900));
  min-height:220px;
  display:flex;align-items:flex-end;
  isolation:isolate;
}
.media::before{
  content:"";position:absolute;inset:0;
  background-image: var(--contour-svg);
  background-size:cover;background-position:center;
  opacity:.55;
  mix-blend-mode:soft-light;
}
.media .tag{
  position:relative;z-index:1;
  margin:14px;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(7,27,46,.72);
  color:var(--cyan-300);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.03em;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
}
.media .tag svg{width:12px;height:12px;}
.media.ratio-16-9{aspect-ratio:16/9;}
.media.ratio-4-3{aspect-ratio:4/3;}
.media.ratio-1-1{aspect-ratio:1/1;}
.media.ratio-3-4{aspect-ratio:3/4;}
.media.light{
  background:
    repeating-linear-gradient(115deg, rgba(18,58,92,.05) 0px, rgba(18,58,92,.05) 1px, transparent 1px, transparent 26px),
    linear-gradient(150deg, #e4eef4, #cfe3ec);
}
.media.light .tag{background:rgba(255,255,255,.85);color:var(--navy-800);border-color:var(--line);}
.media .play{
  position:absolute;inset:0;margin:auto;width:96px;height:96px;
  border-radius:50%;background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  z-index:1;
}
.media .play svg{width:22px;height:22px;fill:#fff;}

/* ---------- Cards ---------- */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:26px;
}
.grid{display:grid;gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:920px){
  .grid-2, .grid-3, .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:rgba(255,255,255,.7);padding:60px 0 0;}
.footer-top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-top h4{color:var(--white);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;font-family:var(--font-body);font-weight:700;}
.footer-top ul li{margin-bottom:10px;font-size:14px;}
.footer-top ul li a:hover{color:var(--cyan-300);}
.footer-desc{font-size:14px;color:rgba(255,255,255,.6);margin-top:14px;max-width:280px;}
.footer-contact li{display:flex;gap:10px;font-size:13.5px;margin-bottom:14px;}
.footer-contact svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--cyan-400);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 0;font-size:12.5px;color:rgba(255,255,255,.45);
}
.socials{display:flex;gap:12px;}
.socials a{
  width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
}
.socials svg{width:14px;height:14px;}
@media (max-width:820px){
  .footer-top{grid-template-columns:1fr 1fr;}
}

/* ---------- CTA banner ---------- */
.cta-band{
  background:var(--navy-900);color:var(--white);
  padding:100px 0;text-align:center;
  position:relative;overflow:hidden;
}
.cta-band .contour{position:absolute;inset:0;opacity:.25;background-image:var(--contour-svg);background-size:cover;background-position:center;}
.cta-band h2{color:var(--white);position:relative;z-index:1;font-size:clamp(22px,3vw,32px);margin-top:6px;}
.cta-band .eyebrow{justify-content:center;position:relative;z-index:1;}
.cta-band .btn{position:relative;z-index:1;margin-top:24px;}

/* ---------- Contact icons row ---------- */
.icon-tile{
  width:42px;height:42px;border-radius:10px;
  background:var(--cyan-500);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.icon-tile svg{width:19px;height:19px;}

/* Utility */
.flex{display:flex;}
.center{align-items:center;}
.gap-12{gap:12px;}
.gap-16{gap:16px;}
.mt-8{margin-top:8px;}
.mt-16{margin-top:16px;}
.mt-24{margin-top:24px;}
.text-muted{color:var(--ink-400);}
.hide-mobile{}
@media (max-width:620px){.hide-mobile{display:none;}}

/* =========================================================
   Componentes específicos de página
   ========================================================= */

/* ---- HOME hero ---- */
.hero-home{
  position:relative;
  background:linear-gradient(180deg, rgba(7,20,34,.35), rgba(7,20,34,.85)), var(--navy-900);
  color:#fff;padding:120px 0 0;overflow:hidden;
}
.hero-home .contour{position:absolute;inset:0;opacity:.4;background-image:var(--contour-svg);background-size:cover;background-position:center;animation:driftContour 40s linear infinite;}
@keyframes driftContour{from{background-position:0 0;}to{background-position:-400px 0;}}
.hero-home-inner{position:relative;z-index:1;max-width:640px;padding-bottom:80px;}
.hero-home h1{font-size:clamp(34px,5vw,58px);line-height:1.08;color:var(--white);}
.hero-home h1 .accent{color:var(--cyan-400);}
.hero-home p{margin-top:18px;font-size:16.5px;color:rgba(255,255,255,.78);max-width:520px;}
.hero-home .actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}

/* ---- Live data / SARCOM ---- */
.live-dot{
  width:8px;height:8px;border-radius:50%;background:var(--cyan-400);
  box-shadow:0 0 0 0 rgba(60,192,234,.6);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(60,192,234,.55);}
  70%{box-shadow:0 0 0 9px rgba(60,192,234,0);}
  100%{box-shadow:0 0 0 0 rgba(60,192,234,0);}
}
.metric-tile{
  background:var(--navy-700);color:#fff;border-radius:var(--radius-m);
  padding:22px;position:relative;overflow:hidden;
}
.metric-tile.dark{background:var(--navy-900);}
.metric-tile .val{font-family:var(--font-mono);font-size:28px;font-weight:600;color:var(--cyan-300);}
.metric-tile .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.65);text-transform:uppercase;margin-top:6px;}
.metric-tile .more{display:block;margin-top:14px;font-size:12px;font-weight:600;color:var(--cyan-400);}
.metric-tile .flowline{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:repeating-linear-gradient(90deg, var(--cyan-500) 0 8px, transparent 8px 16px);
  background-size:32px 2px;animation:flow 1.4s linear infinite;
}
@keyframes flow{to{background-position:-32px 0;}}

.chart-wrap{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:26px;}
.chart-legend{display:flex;gap:20px;font-size:12.5px;color:var(--ink-600);margin-bottom:10px;justify-content:flex-end;}
.chart-legend span{display:inline-flex;align-items:center;gap:6px;}
.chart-legend i{width:14px;height:2px;display:inline-block;}

.sarcom-feature{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:18px;
}
.sarcom-feature .icon-tile{width:38px;height:38px;}
.sarcom-feature h4{font-size:14.5px;margin-bottom:4px;}
.sarcom-feature p{font-size:13.5px;color:var(--ink-400);}

/* ---- Service / step cards ---- */
.service-mini{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:24px;transition:box-shadow .2s ease, transform .2s ease;
}
.service-mini:hover{box-shadow:0 14px 30px -18px rgba(10,28,43,.35);transform:translateY(-3px);}
.service-mini .icon-tile{margin-bottom:16px;}
.service-mini h4{font-size:16px;margin-bottom:8px;}
.service-mini p{font-size:13.5px;color:var(--ink-400);}
.service-mini a{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:700;color:var(--cyan-500);}

.service-block{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:40px 0;}
.service-block:nth-child(even) .service-media{order:2;}
.service-block .step-no{font-family:var(--font-mono);color:var(--cyan-500);font-size:12px;letter-spacing:.08em;}
.service-block h3{font-size:24px;margin:8px 0 12px;}
.service-block p{color:var(--ink-400);font-size:14.5px;margin-bottom:16px;}
.check-list li{display:flex;gap:10px;font-size:14px;margin-bottom:9px;color:var(--ink-600);}
.check-list svg{width:16px;height:16px;color:var(--cyan-500);flex:none;margin-top:2px;}
@media (max-width:820px){
  .service-block, .service-block:nth-child(even) .service-media{grid-template-columns:1fr;order:0;}
  .service-block{grid-template-columns:1fr;}
}

/* ---- Objetivos numbered ---- */
.objetivo-card{background:var(--paper);border-radius:var(--radius-m);padding:26px;position:relative;}
.objetivo-card .num{font-family:var(--font-mono);font-size:34px;font-weight:600;color:var(--cyan-300);}
.objetivo-card h4{font-size:15px;margin:10px 0 8px;}
.objetivo-card p{font-size:13.5px;color:var(--ink-400);}

/* ---- Team ---- */
.team-card{display:flex;gap:20px;align-items:center;}
.avatar{
  width:96px;height:96px;border-radius:50%;flex:none;
  background:linear-gradient(150deg,var(--navy-600),var(--navy-800));
  display:flex;align-items:center;justify-content:center;
  color:var(--cyan-300);font-family:var(--font-display);font-weight:700;font-size:18px;
}
.team-card h4{font-size:17px;margin-bottom:3px;}
.team-card p{font-size:15px;color:var(--ink-400);}

/* ---- Project grid ---- */
.project-card{border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--line);background:#fff;}
.project-card .media{border-radius:0;min-height:180px;}
.project-card .body{padding:16px 18px;}
.project-card .cat{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--cyan-500);text-transform:uppercase;}
.project-card h4{font-size:14.5px;margin-top:6px;line-height:1.35;}
.filter-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:38px;}
.filter-pill{
  padding:9px 18px;border-radius:999px;border:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--ink-600);background:#fff;
}
.filter-pill.active{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}

/* ---- Testimonials ---- */
.testi-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:26px;}
.testi-card .quote-mark{font-family:var(--font-display);font-size:34px;color:var(--cyan-300);line-height:1;}
.testi-card p{font-size:14px;color:var(--ink-600);margin:14px 0 18px;}
.testi-card b{display:block;font-size:13.5px;color:var(--navy-900);}
.testi-card span{font-size:12.5px;color:var(--ink-400);}

/* ---- Logos row ---- */
.logo-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}
.logo-tile{
  width:150px;height:80px;border:1px solid var(--line);border-radius:var(--radius-m);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;color:var(--ink-400);text-align:center;padding:8px;
}

/* ---- Interview / audio player ---- */
.audio-card{
  background:var(--navy-900);color:#fff;border-radius:var(--radius-l);
  padding:36px;max-width:640px;margin:0 auto;text-align:center;
}
.waveform{display:flex;align-items:flex-end;gap:3px;height:56px;justify-content:center;margin-bottom:20px;}
.waveform span{width:3px;background:var(--cyan-400);border-radius:2px;opacity:.75;}
.audio-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:6px;}
.audio-controls button{background:none;border:0;color:#fff;}
.audio-controls .play-btn{
  width:48px;height:48px;border-radius:50%;background:var(--cyan-500);
  display:flex;align-items:center;justify-content:center;
}
.audio-controls svg{width:18px;height:18px;}

/* ---- Contact page ---- */
.contact-info-card{
  display:flex;gap:14px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-m);padding:18px;margin-bottom:14px;align-items:flex-start;
}
.contact-info-card h4{font-size:13.5px;margin-bottom:3px;}
.contact-info-card p{font-size:13.5px;color:var(--ink-400);}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-m);padding:30px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media (max-width:620px){.form-row{grid-template-columns:1fr;}}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-600);margin-bottom:7px;}
.field input, .field select, .field textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-s);
  padding:11px 13px;font-family:inherit;font-size:14px;color:var(--ink-900);background:var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--cyan-400);outline-offset:1px;border-color:var(--cyan-400);}
.field textarea{resize:vertical;min-height:110px;}
.required-note{font-size:11.5px;color:var(--ink-400);margin-top:10px;}

.whatsapp-fab{
  position:fixed;right:24px;bottom:24px;z-index:90;
  width:56px;height:56px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 24px -10px rgba(0,0,0,.4);
}
.whatsapp-fab svg{width:26px;height:26px;fill:#fff;}

.faq-item{border-bottom:1px solid var(--line);padding:18px 0;}
.faq-q{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:15px;cursor:pointer;}
.faq-q svg{width:16px;height:16px;color:var(--cyan-500);transition:transform .2s ease;flex:none;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:14px;color:var(--ink-400);}
.faq-item.open .faq-a{max-height:200px;padding-top:12px;}

.map-placeholder{
  border-radius:var(--radius-m);overflow:hidden;min-height:160px;
  background:
    repeating-linear-gradient(90deg, rgba(18,58,92,.06) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(18,58,92,.06) 0 1px, transparent 1px 22px),
    var(--paper-dim);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;color:var(--ink-400);gap:8px;
}
.map-placeholder svg{width:16px;height:16px;color:var(--cyan-500);}

/* ---- Gallery dots (ficha de proyecto) ---- */
.dots{display:flex;gap:8px;justify-content:center;margin-top:14px;}
.dots span{width:7px;height:7px;border-radius:50%;background:var(--line);}
.dots span.active{background:var(--cyan-500);width:20px;border-radius:4px;}

/* =========================================================
   Multimedia real — integración de recursos
   ========================================================= */

/* ---- Hero video de fondo ---- */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover; object-position:center 10%;z-index:0;
}
.hero-home{isolation:isolate;}
.hero-home .contour{z-index:1;}
.hero-home::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(7,20,34,.45) 0%, rgba(7,20,34,.82) 100%);
  pointer-events:none;
}
.hero-home-inner{z-index:2;}

/* ---- Imágenes reales dentro de .media ---- */
.media-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  border-radius:inherit;
}
.media{position:relative;}

/* ---- Page hero con imagen de fondo real ---- */
.page-hero[style*="background-image"]{
  background-size:cover;
  background-position:center 25% !important;
}
.page-hero .contour{z-index:0;}
.page-hero-inner{position:relative;z-index:1;}

/* ---- CTA band con imagen de fondo ---- */
.cta-band[style*="background-image"]{
  background-size:cover;
  background-position:center 25% !important;
}

/* ---- SARCOM section con imagen de fondo ---- */
.section--dark[style*="background-image"]{
  padding: 110px 0 !important;
  background-size:cover;
  background-position:center 25% !important;
  position:relative;
}
.section--dark[style*="background-image"]::before{
  content:"";position:absolute;inset:0;
  background:rgba(7,27,46,.85);
  z-index:0;
}
.section--dark[style*="background-image"] > .wrap{
  position:relative;z-index:1;
}

/* ---- Logo con imagen real ---- */
.logo-img{
  height:40px;width:auto;
  display:block;
}
.logo-img-sm{
  height:48px;width:auto;
  display:inline-block;
  vertical-align:middle;
}

/* ---- Avatar con foto real ---- */
.avatar img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
}

/* ---- Logo de cliente con imagen real ---- */
.logo-tile img{
  max-width:100%;max-height:60px;
  object-fit:contain;
}

/* ---- Reproductor de audio real ---- */
.audio-player-real{
  width:100%;margin-top:12px;
}
.audio-progress{
  width:100%;height:4px;
  background:rgba(255,255,255,.2);
  border-radius:2px;
  cursor:pointer;
  margin-bottom:8px;
  position:relative;
  overflow:hidden;
}
.audio-progress-fill{
  height:100%;background:var(--cyan-400);
  border-radius:2px;
  width:0%;
  transition:width .1s linear;
}
.audio-time{
  font-family:var(--font-mono);
  font-size:11px;
  color:rgba(255,255,255,.5);
  display:flex;justify-content:space-between;
  margin-bottom:6px;
}

/* ---- Carrusel de proyecto ---- */
.project-carousel{position:relative;overflow:hidden;border-radius:var(--radius-m);}
.carousel-track{display:flex;transition:transform .4s ease;}
.carousel-track .media-img{
  position:relative;width:100%;height:auto;
  aspect-ratio:4/3;flex:none;
}
.dots{cursor:pointer;}
.dots span{cursor:pointer;transition:background .2s ease, width .2s ease;}
.dots span:hover{background:var(--cyan-300);}

/* ---- Banner con imagen de fondo ---- */
.banner-bg{
  position:relative;
  background-size:cover;
  background-position:center;
}
.banner-bg::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(7,27,46,.75), rgba(7,27,46,.55));
  border-radius:inherit;
}
.banner-bg > *{position:relative;z-index:1;}






.banner-link:hover { transform: translateY(-4px); }




/* Global responsive fixes */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }

.avatar img { object-position: top; }


/* Floating Badge */
.floating-badge { position: fixed; top: 100px; right: 30px; background: var(--cyan-500); color: var(--white); padding: 12px 24px; border-radius: 999px; font-weight: 600; box-shadow: 0 6px 16px rgba(0,0,0,0.15); z-index: 9999; font-size: 14px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
@media(max-width: 768px) { .floating-badge { top: 80px; right: 20px; padding: 10px 20px; font-size: 13px; } }