/* ===== BASE ===== */
:root{
  --brand-primary:#2E3192;
  --brand-secondary:#00B5E2;
  --brand-bg:#FFFFFF;
  --gray-900:#1f2328; --gray-700:#3b3f46; --gray-500:#6b7280; --gray-200:#e5e7eb;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --brand-grad: linear-gradient(90deg,var(--brand-secondary),var(--brand-primary));
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;color:var(--gray-900);background:var(--brand-bg);line-height:1.5}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section.alt{background:#f8fafc}
h1,h2,h3{margin:0 0 12px}
h1{font-size:clamp(32px,4vw,48px);font-weight:800}
h2{font-size:clamp(24px,3vw,32px);font-weight:700}
.lead{color:var(--gray-700);max-width:70ch}
.center{text-align:center}

/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--gray-200);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand img{height:40px}
.menu a{margin:0 12px;text-decoration:none;color:var(--gray-900);font-weight:600}
.menu .btn{margin-left:8px}
.burger{display:none;background:transparent;border:0}
.burger span{display:block;width:24px;height:2px;background:var(--gray-900);margin:5px 0}
@media (max-width:960px){
  .menu{position:fixed;inset:64px 0 0 0;background:#fff;display:none;padding:20px}
  .menu.open{display:block}
  .menu a{display:block;padding:14px 10px;border-bottom:1px solid var(--gray-200)}
  .burger{display:block}
}

/* Hero */
.hero{
  position:relative;
  padding:clamp(56px,8vw,120px) 0 clamp(36px,6vw,96px);
  overflow:hidden;
  background:
    radial-gradient(1200px 520px at 10% -10%, rgba(0,181,226,.14), transparent 60%),
    radial-gradient(1200px 520px at 110% 10%, rgba(46,49,146,.10), transparent 62%),
    linear-gradient(180deg,#ffffff 0%, #fbfdff 60%, #ffffff 100%);
}
/* halo limpio arriba-izq */
.hero::before{
  content:"";
  position:absolute; inset:-20% -20% auto -20%; height:70%;
  background:conic-gradient(from -20deg at 20% 20%,
              rgba(255,255,255,0) 0 25%,
              rgba(0,181,226,.06) 25% 45%,
              rgba(255,255,255,0) 45% 100%);
  filter:blur(28px);
  pointer-events:none;
}
/* separador suave al final del hero */
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:120px;
  background:radial-gradient(60% 100% at 50% 100%, rgba(0,0,0,.10), transparent 70%);
  opacity:.10;
  pointer-events:none;
}

@media (min-width:1160px){
  .hero-inner{ grid-template-columns:1fr .9fr; }
  .hero-copy{ padding-left:6px; }
}

/* HERO decorado: brillos + burbujas */
.hero { position: relative; overflow: hidden; }

.hero-art{  /* alto mínimo del canvas */
  pointer-events: none;                /* que no bloquee clics */
}

/* Brillos / blobs sutiles */
.hero-art::before{
  content:""; position:absolute; inset:-10% -20% -10% -10%;
  background:
    radial-gradient(600px 300px at 90% 10%, rgba(0,181,226,.18), transparent 60%),
    radial-gradient(600px 300px at 20% 90%, rgba(46,49,146,.14), transparent 60%),
    radial-gradient(240px 240px at 70% 40%, rgba(0,181,226,.28), transparent 70%),
    radial-gradient(220px 220px at 35% 65%, rgba(46,49,146,.22), transparent 70%);
  filter: blur(1.5px) saturate(1.05);
}

/* “Destello” que barre */
.hero-art::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%,
                                      rgba(255,255,255,.36) 40%,
                                      rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  transform: translateX(-30%);
  animation: hero-shine 6s ease-in-out infinite;
  opacity:.75;
}

@keyframes hero-shine{
  0%   { transform: translateX(-30%); }
  60%  { transform: translateX(40%); }
  100% { transform: translateX(40%); }
}

/* ===== Burbujas ===== */
.hb{
  position:absolute; bottom:-8px;      /* nacen un poquito abajo */
  width:24px; height:24px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.95) 0 8%,
                                         rgba(255,255,255,.35) 30%,
                                         rgba(255,255,255,0) 60%),
    radial-gradient(circle at 50% 50%, rgba(0,181,226,.32), rgba(46,49,146,.28));
  border:1px solid rgba(255,255,255,.6);
  box-shadow: 0 6px 18px rgba(0,0,0,.08), inset 0 0 12px rgba(255,255,255,.55);
  backdrop-filter: blur(1px);
  opacity:0;
  transform: translateY(0) scale(.9);
  animation: hb-rise var(--dur,10s) ease-out var(--delay,0s) infinite;
  pointer-events:none;
}

@keyframes hb-rise{
  6%   { opacity:.9; }
  100% { transform: translateY(-160%) translateX(var(--drift,10px)) scale(1.05); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .hero-art::after{ animation:none; }
  .hb{ animation:none; opacity:.15; }
}

/* el texto “pill” del h1 un poco más fuerte */
.hero .pill{
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 10px rgba(0,181,226,.10);
}

.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;min-height:60vh}
.hero-copy p{color:var(--gray-700);max-width:50ch}
.pill{background:linear-gradient(90deg,var(--brand-secondary),var(--brand-primary));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Botones */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid var(--gray-200);text-decoration:none;font-weight:700;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand-primary);color:#fff;border-color:transparent}
.btn-primary:hover{filter:brightness(.98)}
.btn-outline{background:#fff;color:var(--brand-primary);border-color:var(--brand-primary)}

/* Cards */
.cards-3,.cards-4{display:grid;gap:20px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr}
  .cards-4{grid-template-columns:1fr 1fr}
}
.card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card:hover{transform:translateY(-2px)}
.card .meta{color:var(--gray-500);font-size:14px}

/* Product strip */
.product-strip{display:grid;grid-auto-flow:column;gap:16px;overflow:auto;padding-bottom:6px}
.product{min-width:260px}

/* Timeline */
.timeline{list-style:none;padding:0;margin:20px 0;border-left:3px solid var(--brand-secondary)}
.timeline li{padding:12px 0 12px 16px;position:relative}
.timeline li::before{content:"";position:absolute;left:-10px;top:18px;width:14px;height:14px;border-radius:50%;background:var(--brand-secondary);border:2px solid #fff;box-shadow:0 0 0 3px rgba(0,181,226,.15)}

/* Footer */

/* Footer responsivo y sin desbordes */
.grid-3{
  display:grid; gap:20px;
  grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); /* ← clave: minmax(0, …) */
}
.grid-3 > *{ min-width:0; } /* permite que el contenido se encoja dentro de la columna */

@media (max-width:960px){
  .grid-3{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width:640px){
  .grid-3{ grid-template-columns:1fr; }
}

/* Forzar salto en correos/URLs largos dentro del footer */
.site-footer a[href^="mailto:"],
.site-footer .breakable{
  overflow-wrap:anywhere;       /* estándar moderno */
  word-break:break-word;        /* fallback Safari/WebKit */
  white-space:normal;           /* asegúrate de que pueda romper línea */
  display:inline-block;         /* respeta max-width del contenedor */
  max-width:100%;
}

.site-footer{background:var(--brand-primary);color:#fff;margin-top:40px;padding:40px 0}
.site-footer a{color:#fff}
.grid-3{display:grid;gap:20px;grid-template-columns:2fr 1fr 1fr}
.logo-foot{height:40px;margin-bottom:10px}
.muted{color:var(--gray-500)}

/* ===== PRELOADER ===== */
#pl{position:fixed;inset:0;z-index:9999;display:block;background:#fff;transition:opacity .5s ease;overflow:hidden}
#pl.hidden{opacity:0;pointer-events:none}

/* (Conservar SOLO esta versión de .pl__dirty) */
.pl__dirty{
  position:absolute;inset:0;
  background:
    url("../img/dirty.webp") center/cover no-repeat,
    linear-gradient(180deg,#e7ecef,#d5dde6);
  filter:saturate(.95) contrast(1.08) brightness(.96);
}
.pl__dirty::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1200px 500px at 85% 20%, rgba(0,0,0,.06), transparent 60%),
    radial-gradient(900px 450px at 10% 80%, rgba(0,0,0,.05), transparent 60%);
  mix-blend-mode:multiply;opacity:.6;
}
.pl__clean{position:absolute;left:0;top:0;height:100vh;width:0%;overflow:hidden;background:
  radial-gradient(1100px 450px at 75% 25%, rgba(0,181,226,.16), transparent 60%),
  linear-gradient(180deg,#fff 0%,#f7fbff 100%);box-shadow:0 0 40px rgba(0,0,0,.10);filter:brightness(1.02) saturate(1.03)}
.pl__shine{position:absolute;inset:0;background:
  linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.40) 45%, rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;transform:translateX(-30%);animation:shine-scan 2.2s ease-in-out infinite}
@keyframes shine-scan{0%{transform:translateX(-30%)}60%{transform:translateX(40%)}100%{transform:translateX(40%)}}
.pl__bubble{position:absolute;width:18px;height:18px;border-radius:50%;background:
  radial-gradient(circle at 30% 30%, rgba(0,181,226,.95) 0%, rgba(0,181,226,.40) 55%, rgba(0,181,226,0) 70%);
  border:1px solid rgba(0,181,226,.85);box-shadow:0 0 12px rgba(0,181,226,.40),0 2px 4px rgba(0,0,0,.15);
  opacity:0;transform:translateY(0) scale(.85);animation:bubble-up 1.2s ease-out forwards}
.pl__bubble::after{content:"";position:absolute;left:22%;top:22%;width:35%;height:35%;border-radius:50%;
  background:radial-gradient(circle,#fff,.0 70%);filter:blur(.2px)}
@keyframes bubble-up{10%{opacity:.95}100%{transform:translateY(-120px) scale(1.05);opacity:0}}
.pl__van{position:absolute;top:50%;transform:translateY(-50%);left:0;width:min(48vw,620px);height:auto;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.20));animation:pl-bounce .5s ease-in-out infinite alternate}
@keyframes pl-bounce{from{transform:translateY(calc(-50% + 0px))}to{transform:translateY(calc(-50% - 2px))}}
.pl__meta{position:absolute;left:24px;right:24px;bottom:24px;display:flex;justify-content:space-between;align-items:center;font-weight:700;color:#334155;font-variant-numeric:tabular-nums}
.pl__text{opacity:.85}
@media (prefers-reduced-motion: reduce){.pl__van,.pl__shine{animation:none}.pl__bubble{animation:none;opacity:0}}

/* ===== SUBNAV (única definición) ===== */
.subnav{position:sticky;top:64px;z-index:40;background:#fff;border-bottom:1px solid var(--gray-200);transition:box-shadow .2s ease}
.subnav--shadow{box-shadow:0 8px 18px rgba(0,0,0,.06)}
.subnav__inner{display:grid;grid-auto-flow:column;gap:10px;overflow:auto;padding:8px 0;scrollbar-width:thin}
.subnav__inner::-webkit-scrollbar{height:6px}
.subnav__inner::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.subnav .pill{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;font-weight:700;text-decoration:none;white-space:nowrap;border:1px solid var(--gray-200);background:#fff;color:var(--gray-900)}
.subnav .pill:hover{transform:translateY(-1px)}
.subnav .pill.is-active{background:linear-gradient(90deg,var(--brand-secondary),var(--brand-primary));color:#fff;border-color:transparent}
/* Variante para categorías */
.subnav--pills .pill{height:32px;padding:0 12px}

/* Anclas bajo subnav */
[id^="svc-"], [id^="sec-"]{scroll-margin-top:120px}

/* ===== Productos (filtros y tarjetas) ===== */
.prod-bar{position:sticky;top:64px;z-index:40;background:#fff;border-bottom:1px solid var(--gray-200)}
.prod-bar__inner{padding:12px 0}
.prod-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.input-wrap{position:relative;flex:1 1 380px}
.input-wrap input{width:100%;height:40px;border:1px solid var(--gray-200);border-radius:999px;padding:0 40px 0 14px;outline:none}
.input-wrap .icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:20px;opacity:.6}
.select-wrap{display:flex;gap:8px;align-items:center}
.select-wrap select{height:40px;border:1px solid var(--gray-200);border-radius:999px;padding:0 12px;background:#fff}
.prod-meta{margin-top:8px;color:var(--gray-500);font-weight:600}
.card .price{font-weight:800;font-size:18px}
.card .badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef6ff;color:#0b63c5;font-weight:700;font-size:12px;margin-bottom:8px}

/* ===== Skeleton (única definición) ===== */
.skel{background:linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%);background-size:400% 100%;animation:skel 1.2s ease-in-out infinite}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
.card.skeleton{height:170px}
.card.skeleton .skel-line{height:12px;border-radius:8px;margin:10px 0}
.card.skeleton .skel-chip{height:22px;width:120px;border-radius:999px}

/* ===== Precios ===== */
.page-hero.precios-hero,
.page-hero.servicios-hero,
.page-hero.productos-hero,
.page-hero.about-hero{
  padding:clamp(36px,6vw,72px) 0 24px;
  background:
    radial-gradient(1000px 400px at 80% -20%, rgba(0,181,226,.18), transparent 60%),
    radial-gradient(1000px 400px at -20% 80%, rgba(46,49,146,.12), transparent 60%),
    linear-gradient(180deg,#fff,#f8fafc);
}
.price-section{margin:36px 0 24px}
.price-note{color:var(--gray-500);margin-top:6px}
.price-table{width:100%;border-collapse:collapse;border:1px solid var(--gray-200);margin-top:14px;font-variant-numeric:tabular-nums}
.price-table th,.price-table td{padding:10px 12px;border-bottom:1px solid var(--gray-200);text-align:left}
.price-table th{background:#f4f6f8;white-space:nowrap}
.price-table td.u{color:var(--gray-500);white-space:nowrap}
.table-wrap{overflow:auto;border-radius:12px;border:1px solid var(--gray-200)}
.table-wrap .price-table{border:0;margin:0}
.row-more{margin-left:8px;font-weight:700;border:0;background:transparent;color:var(--brand-primary);cursor:pointer}
.row-more:hover{text-decoration:underline}
.detail-row td{background:#f8fafc;border-top:0}
.detail-box{padding:10px 12px;border-left:3px solid var(--brand-secondary);color:#334155;line-height:1.45}
.price-actions{display:flex;gap:12px;margin-top:20px}

/* ===== Checklist & Badges (unificados) ===== */
.checklist{padding-left:18px;margin:10px 0 16px}
.checklist li{margin:6px 0}
/* Variante con “check” de marca */
.checklist--brand li{position:relative;padding-left:28px}
.checklist--brand li::before{
  content:"";position:absolute;left:0;top:.4em;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--brand-secondary), var(--brand-primary));
  box-shadow:0 0 0 2px #fff,0 2px 8px rgba(0,0,0,.12);
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M9.0 16.2 4.8 12l1.4-1.4 2.8 2.8 8-8L18.6 7l-9.6 9.2z'/%3E%3C/svg%3E") center/14px 14px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M9.0 16.2 4.8 12l1.4-1.4 2.8 2.8 8-8L18.6 7l-9.6 9.2z'/%3E%3C/svg%3E") center/14px 14px no-repeat;
}
.badge-row,.badges{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:14px 0}
.badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border:1px solid var(--gray-200);border-radius:12px;background:#fff;box-shadow:var(--shadow)}
.badge img{max-height:42px;max-width:100%}
.badge figcaption{margin-top:6px;font-weight:700;font-size:12px;color:var(--gray-700)}
.tech-actions{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}

/* ===== Clientes (chips) ===== */
.chip-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0;padding:0;list-style:none}
.chip{padding:8px 14px;border:1px solid var(--gray-200);border-radius:999px;background:#fff;font-weight:700}

/* ===== Mapas ===== */
#map{height:420px;border:1px solid var(--gray-200);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.leaflet-container{background:#eef6ff}
.map-wrap{height:420px;border:1px solid var(--gray-200);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.map-legend{display:flex;gap:16px;align-items:center;margin-top:8px;color:var(--gray-700);font-weight:600}
.map-legend .leg-item i{margin-right:6px}
.leaflet-tile-pane{filter:saturate(1.05) brightness(1.02)}
.leaflet-popup-content h4{margin:0 0 4px;font-size:16px}
.leaflet-popup-content a{color:var(--brand-primary);text-decoration:none}
.leaflet-popup-content a.btn-mini{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;border:1px solid var(--gray-200);
  text-decoration:none;font-weight:700
}
.leaflet-popup-content a.btn-mini.primary{background:var(--brand-secondary);color:#fff;border-color:transparent}
.leaflet-popup-content a.btn-mini:hover{transform:translateY(-1px)}

.m-branch .pin{
  width:18px; height:18px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--brand-secondary), var(--brand-primary));
  box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(0,0,0,.18);
}

/* --- CTA del header: Cotizar --- */
.btn-quote{
  background:var(--brand-grad);
  color:#fff !important;
  border:0;
  border-radius:999px;
  padding:10px 18px;            /* un poco más compacto que .btn normal */
  font-weight:800;
  box-shadow:0 10px 24px rgba(46,49,146,.25), inset 0 -2px 0 rgba(0,0,0,.06);
}
.btn-quote:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.btn-quote:focus-visible{ outline:3px solid rgba(0,181,226,.5); outline-offset:2px; }

/* para que encaje en la navegación */
.menu .btn-quote{ margin-left:12px }

/* Encabezados de sección con subrayado de marca */
.section h2{
  position:relative;
  letter-spacing:-.2px;
}
.section h2::after{
  content:"";
  display:block;
  width:72px; height:4px; border-radius:6px;
  margin-top:10px;
  background:var(--brand-grad);
  box-shadow:0 6px 18px rgba(0,181,226,.35);
}

/* ===== “Tecnología & Cumplimiento” ===== */
.tech-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:center;
}

.tech-media img{display:block;max-width:100%;height:auto}

.tech-media picture,
.tech-media img{
  width:100%; height:auto; display:block;
  border-radius:16px;
  border:1px solid var(--gray-200);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}
@media (max-width:960px){
  .tech-grid{ grid-template-columns:1fr; }
}

/* ===== Stats de “¿Quiénes somos?” ===== */
.stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.stat{
  position:relative;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:16px;
  padding:16px 18px;
  box-shadow:var(--shadow);
}
.stat::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--brand-grad);
  border-top-left-radius:16px; border-top-right-radius:16px;
}
.stat__num{
  font-size:clamp(28px,4vw,40px);
  font-weight:900;
  line-height:1.1;
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.stat__txt{ color:var(--gray-700); font-weight:600; margin-top:6px }
@media (max-width:960px){
  .stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .stats{ grid-template-columns:1fr; }
}

/* ===== Testimonios (reviews) ===== */
.testimonials{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}
@media (max-width:960px){
  .testimonials{ grid-template-columns:1fr; }
}
.testimonials blockquote{
  position:relative;
  margin:0;
  padding:18px 18px 16px 22px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.testimonials blockquote::before{
  content:"“";
  position:absolute; left:12px; top:-12px;
  font-size:64px; line-height:1; opacity:.12;
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.testimonials blockquote cite{
  display:block; margin-top:8px;
  color:var(--gray-700); font-weight:700;
}
/* Estrellitas decorativas (5 fijas). Si quieres dinámico, luego agregamos data-rating */
.testimonials blockquote::after{
  content:"★★★★★";
  display:inline-block;
  letter-spacing:2px;
  font-size:14px;
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-top:6px;
}

/* ===== Chips (clientes) con mejor hover ===== */
.chip{
  background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
}
.chip:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* ===== Cards: mejor hover y borde degradado sutil ===== */
.card{
  position:relative;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  background:#fff;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(0,0,0,.10);
  border-color:rgba(0,181,226,.35);
}

/* ===== Product strip: scroll con “snap” ===== */
.product-strip{
  scroll-snap-type:x mandatory;
  padding-bottom:10px;
}
.product-strip > *{ scroll-snap-align:start }

/* ===== Botones accesibles ===== */
.btn:focus-visible{
  outline:3px solid rgba(0,181,226,.5);
  outline-offset:2px;
}

/* ===== Mapa: refuerzo de borde/halo ===== */
#map{
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 14px 34px rgba(0,0,0,.08);
}

/* ===== Popup del mapa: detalles finos ===== */
.leaflet-popup-content h4{
  font-weight:800; letter-spacing:-.2px;
}
.leaflet-popup-content a.btn-mini{
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.leaflet-popup-content a.btn-mini:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.10);
  filter:brightness(1.02);
}

/* ===== Reviews: carrusel horizontal ===== */
.reviews-wrap{
  position:relative;
  margin-top:14px;
  isolation:isolate;
}
.review-strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:min(100%, 520px);
  gap:18px;
  overflow:auto;
  padding:10px 4px 14px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  list-style:none; 
  margin:0;
}
.review-strip::-webkit-scrollbar{height:8px}
.review-strip::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}

@media (min-width:960px){
  .review-strip{ grid-auto-columns:min(50%, 520px); }
}

/* tarjetas */
.review blockquote{
  position:relative;
  margin:0;
  padding:18px 18px 16px 22px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:16px;
  box-shadow:var(--shadow);
  scroll-snap-align:center;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; 
  overflow:hidden; min-height:110px;
}
.review blockquote::before{
  content:"“";
  position:absolute; left:12px; top:-12px;
  font-size:64px; line-height:1; opacity:.12;
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.review footer{
  display:flex; align-items:center; gap:12px;
  margin-top:10px; font-weight:700; color:var(--gray-700);
}
.review .author{white-space:nowrap}

/* estrellas con valor dinámico --r (0–5) */
.stars{
  --r:5;
  position:relative; display:inline-block; line-height:1;
  font-size:14px; letter-spacing:2px;
}
.stars::before{ content:"★★★★★"; color:#d7dde6 }
.stars::after{
  content:"★★★★★";
  position:absolute; inset:0;
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  width:calc(var(--r)/5*100%); overflow:hidden; white-space:nowrap;
}

/* botones navegación */
.rev-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; border:0;
  display:grid; place-items:center; cursor:pointer;
  background:linear-gradient(#fff,#fff), var(--brand-grad);
  background-origin:border-box; background-clip:padding-box, border-box;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  color:var(--brand-primary);
  z-index:2;
}
.rev-btn[data-dir="prev"]{ left:-6px }
.rev-btn[data-dir="next"]{ right:-6px }
.rev-btn:hover{ transform:translateY(-50%) scale(1.03) }
.rev-btn:focus-visible{ outline:3px solid rgba(0,181,226,.45); outline-offset:2px }

/* desvanecidos laterales */
.reviews-wrap::before,
.reviews-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:60px; z-index:1; pointer-events:none;
  background:linear-gradient(to right, #f8fafc, rgba(248,250,252,0));
}
.reviews-wrap::before{ left:0 }
.reviews-wrap::after{
  right:0; transform:scaleX(-1);
}
.review .src{
  padding:2px 8px; border-radius:999px; background:#eef6ff; color:#0b63c5;
  font-size:12px; font-weight:800;
}

/* cursor tipo arrastre en desktop */
.review-strip{ cursor:grab }
.review-strip.dragging{ cursor:grabbing }

/* ===== Clientes (muro de logos mejorado) ===== */
.logo-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 12px}
.logo-bar .input-wrap{flex:1 1 280px}
.logo-bar .input-wrap input{
  width:100%;height:40px;border:1px solid var(--gray-200);border-radius:999px;
  padding:0 14px; outline:none; background:#fff;
}

.logo-filters{display:flex;gap:8px;flex-wrap:wrap}
/* Filtros de logos: anula el estilo "pill" del hero */
/* ===== Filtros de logos (corrige texto invisible) ===== */
.logo-filters .pill{
  background:#fff;
  color:var(--gray-900);
  -webkit-background-clip: initial;
  background-clip: initial;
  border:1px solid var(--gray-200);
  height:32px;
  padding:0 12px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}
.logo-filters .pill.is-active{
  background:var(--brand-primary);
  color:#fff;
  border-color:transparent;
}

/* Muro responsive con logos centrados */
.logo-wall{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  align-items:stretch
}
/* Tarjeta de logo */
.logo{
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--gray-200);border-radius:14px;
  height:84px; padding:10px; box-shadow:var(--shadow);
  filter:grayscale(100%) contrast(.95) opacity(.9);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-decoration:none; color:inherit;
}
.logo:hover{
  transform:translateY(-2px);
  filter:grayscale(0%) contrast(1) opacity(1);
  border-color:rgba(0,181,226,.35);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}
.logo img{max-height:46px; max-width:100%; width:auto; height:auto; display:block}
/* Fallback si falla la imagen (texto centrado con pill) */
.logo-fallback{
  display:inline-flex;align-items:center;justify-content:center;
  height:100%;width:100%;padding:0 8px;text-align:center;
  font-weight:800;color:var(--gray-700);letter-spacing:.2px;
  overflow-wrap:anywhere;
}

/* Botón “ver más” */
#btnMoreClients{margin-top:8px}

/* Sutileza en el título de la sección */
#clientes h2{position:relative}
#clientes h2::after{
  content:""; display:block; width:72px; height:4px; border-radius:6px; margin-top:10px;
  background:var(--brand-grad); box-shadow:0 6px 18px rgba(0,181,226,.35);
}
/* ===== Tech v2 ===== */
.techV2-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:center;
}
@media (max-width:960px){
  .techV2-grid{ grid-template-columns:1fr; gap:18px; }
  .techV2-media{ order:-1; } /* imagen arriba en móvil */
}

.techV2-copy > * + *{ margin-top:12px; } /* ritmo vertical constante */

/* Eyebrow/pildita sobre el h2 */
.eyebrow{
  display:inline-block;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px;
  background:linear-gradient(#fff,#fff), var(--brand-grad);
  background-clip:padding-box, border-box; background-origin:padding-box, border-box;
  border:1px solid transparent; color:var(--brand-primary);
}

/* Media en “card” */
.techV2-media{
  margin:0; padding:10px; border-radius:16px;
  background:#fff; border:1px solid var(--gray-200); box-shadow:var(--shadow);
}
.techV2-media img{display:block;width:100%;height:auto;border-radius:12px}
.techV2-media figcaption{margin-top:6px;text-align:center;font-size:12px;color:var(--gray-500)}

/* Credenciales en grilla consistente */
.cred{
  display:grid; gap:12px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:640px){ .cred{ grid-template-columns:1fr 1fr; } }
.cred__item{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; min-height:72px;
  border:1px solid var(--gray-200); border-radius:12px; background:#fff; box-shadow:var(--shadow);
}
.cred__item img{ height:36px; width:auto; }
.cred__item figcaption{ font-weight:800; font-size:12px; color:var(--gray-700); }

/* Acciones */
.techV2-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }

/* Bloque Tecnología: fija el orden y corrige la tarjeta de imagen */
.tech-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  grid-template-areas:"copy media";
  gap:28px; align-items:center;
}
.tech-copy{ grid-area:copy; }
.tech-media{ grid-area:media; }

/* En móvil: siempre va primero el texto y luego la imagen */
@media (max-width:960px){
  .tech-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "media";
  }
}

/* Tarjeta contenedora de la imagen + pie para que nada se desborde */
.media-card{
  margin:0; padding:12px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
/* La imagen dentro de la tarjeta */
.media-card picture{ display:block; }
.media-card img{ width:100%; height:auto; display:block; border-radius:12px; }

/* Pie centrado, sin desbordes en anchos grandes */
.media-note{
  margin-top:8px;
  text-align:center;
  font-size:12px; line-height:1.35;
  color:var(--gray-500);
  overflow-wrap:anywhere;
}

/* Limita el ancho de la tarjeta en desktop y alíneala a la derecha */
.tech-media{
  max-width:560px;   /* ajusta 520–600px a tu gusto */
  justify-self:end;
}
@media (max-width:960px){
  .tech-media{ max-width:none; justify-self:stretch; }
}

/* Asegura el ancho máximo de la página de contenido */
.container{
  width: min(1160px, 100%);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Grid sin desbordes */
.cards-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ===== Card de producto: imagen centrada y con ancho limitado */
:root{ --thumb-max: 220px; }           /* ajusta 180–240px a gusto */

.card.product{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Marco de imagen */
.card.product .thumb{
  aspect-ratio: 1 / 1;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:12px;
  display:grid;
  place-items:center;
  padding:10px;
  margin:0 auto 10px;                 /* ← centra el marco */
  max-width: var(--thumb-max);        /* ← NO ocupa todo el ancho */
  width:100%;
  overflow:hidden;
}

/* Imagen contenida dentro del marco */
.card.product .thumb img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

/* Badge con look de botón primario */
.card .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  padding:10px 14px;              /* mismo “feel” que el botón */
  border-radius:999px;/* azul del btn primario */
  color:#0b63c5;
  font-weight:800;
  font-size:13px;
  line-height:1;
  border:1px solid var(--brand-primary);
  box-shadow:0 10px 24px rgba(46,49,146,.20);
  margin:6px 0 10px;
}

/* Compacto opcional */
.card .badge.badge--sm{
  padding:6px 10px;
  font-size:12px;
}

/* (Opcional) si quisieras el badge sobre la foto */
.card.product .thumb{ position:relative; }
.card.product .badge.is-overlay{
  position:absolute; left:10px; top:10px; margin:0;
}

/* Responsive: en móviles puedes permitir un poco más de ancho */
@media (max-width:640px){
  :root{ --thumb-max: 260px; }
}

/* === GRID de productos responsivo + contención de imagen === */

/* grilla fluida: de 1 a N columnas según ancho */
.cards-3{
  display:grid;
  gap:20px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* la tarjeta ocupa toda su celda y apila contenido */
.card{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* marco cuadrado que LIMITA la foto y evita desbordes */
.card__thumb{
  aspect-ratio: 1 / 1;               /* cuadrado */
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:12px;
  display:grid;
  place-items:center;
  padding:10px;
  overflow:hidden;
  width:100%;
  max-width: 320px;                   /* evita fotos gigantes */
  margin-inline:auto;                 /* centra el marco */
}

/* la imagen siempre “cabe” dentro del marco */
.card__thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* cuerpo de la tarjeta con buen ritmo vertical */
.card__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

/* títulos largos no rompen la tarjeta */
.card__body h3{
  font-size:clamp(14px, 2.5vw, 16px);
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* precio destacado */
.card .price{ font-weight:800; font-size:18px }

/* pequeños ajustes por breakpoint (opcional) */
@media (max-width:1024px){
  .cards-3{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width:640px){
  .cards-3{ grid-template-columns: 1fr; }
}