/* =============================================================
   Panama Watersport — sistema de diseno del sitio
   PORTADO TAL CUAL desde mockup/assets/estilos.css.
   Unico cambio: la fuente display, por licencia (ver NOTAS-BUILD-WP.md).
   No editar aqui: editar el mockup y volver a portar.
   ============================================================= */
/* =============================================================
   Panama Watersport — hoja de estilos del sitio
   La fuente display se carga aparte, en assets/fuente.css
   ============================================================= */

/* -------------------------------------------------------------
   Tokens.
   Cada seccion decide si es clara u oscura cambiando estas
   variables. Los componentes nunca traen color propio: leen
   --fondo, --superficie, --texto, --acento, etc. Cambiar una
   seccion de oscura a clara es cambiar una clase en el <section>.
   ------------------------------------------------------------- */
:root{
  /* marca — una sola familia azul. El #002169 es el azul medido en vento.com;
     los otros dos son ese mismo tono aclarado: el claro para texto sobre fondo
     oscuro, el medio para rellenos y bordes. */
  --azul:#5588F6;
  --azul-medio:#08379B;
  --azul-hondo:#002169;

  /* superficie oscura (valor por defecto): negro con tinte azul */
  --fondo:#060A12;
  --superficie:#101726;
  --borde:#1E2940;
  --texto:#FFFFFF;
  --texto-2:#A2AEC4;
  --acento:#5588F6;
  --placa:linear-gradient(170deg,#16203A,#0A1020);
  --sombra-moto:0 22px 26px rgba(0,0,0,.55);
  --brillo:rgba(27,79,160,.28);
  --chip-fondo:rgba(85,136,246,.14);
  --chip-borde:rgba(85,136,246,.42);

  --display:'Saira',system-ui,sans-serif;
  --cuerpo:'Saira',system-ui,-apple-system,sans-serif;
  --max:1240px;
  --r:14px;
  --alto-cab:74px;
}

/* Oscuro elevado: separa dos secciones oscuras seguidas */
.oscuro-2{--fondo:#101726;--superficie:#060A12}

/* Claro */
.claro{
  --fondo:#FFFFFF;
  --superficie:#F2F4F8;
  --borde:#DCE1EA;
  --texto:#0B1220;
  --texto-2:#59626F;
  --acento:#08379B;            /* el azul claro no tiene contraste sobre blanco */
  --placa:linear-gradient(170deg,#FFFFFF,#E9EDF4);
  --sombra-moto:0 20px 26px rgba(8,18,40,.16);
  --brillo:rgba(0,33,105,.10);
  --chip-fondo:rgba(0,33,105,.08);
  --chip-borde:rgba(0,33,105,.26);
}
/* Claro hueso: fondo apagado, tarjetas blancas */
.claro.hueso{--fondo:#F2F4F8;--superficie:#FFFFFF;--borde:#E2E7EE}

/* -------------------------------------------------------------
   Base
   ------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--fondo);color:var(--texto);
  font-family:var(--cuerpo);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:4px}

h1,h2,h3,.display{
  font-family:var(--display);font-weight:900;letter-spacing:.01em;
  line-height:1.02;text-transform:uppercase;text-wrap:balance;
}

.eyebrow{
  font-family:var(--cuerpo);font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--acento);
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--acento);flex:none}
.eyebrow.centrada{justify-content:center}

/* -------------------------------------------------------------
   Botones
   ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--cuerpo);font-weight:700;font-size:.86rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:15px 30px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:.25s ease;white-space:nowrap;
}
.btn-primario{
  background:linear-gradient(100deg,#1B5FD6,#08379B);
  color:#fff;box-shadow:0 8px 30px -10px rgba(8,55,155,.65);
}
.btn-primario:hover{transform:translateY(-2px);box-shadow:0 14px 40px -10px rgba(8,55,155,.8)}
.btn-fantasma{border-color:rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(6px)}
.btn-fantasma:hover{border-color:var(--azul);color:var(--azul)}
.btn-linea{border-color:var(--borde);color:var(--texto)}
.btn-linea:hover{border-color:var(--azul-medio);color:var(--acento)}
.btn-oscuro{background:#06120A;color:#fff}
.btn-oscuro:hover{transform:translateY(-2px);background:#000}

/* -------------------------------------------------------------
   Marca WhatsApp
   El glifo oficial es una forma rellena, mientras que el resto
   del set son iconos de trazo. Estas reglas lo adaptan a cada
   contexto sin tocar los demas iconos.
   ------------------------------------------------------------- */
.wa svg.marca{fill:#fff;stroke:none}
.pill svg.marca{fill:currentColor;stroke:none}
.canal-ico svg.marca,
.dato svg.marca{fill:var(--acento);stroke:none}

/* -------------------------------------------------------------
   Header — siempre oscuro
   ------------------------------------------------------------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:.3s ease;padding:18px 0;
  background:linear-gradient(to bottom,rgba(10,12,10,.85),transparent);
}
header.pegado,
body:not(.con-hero) header{
  background:rgba(10,12,10,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid #242926;padding:11px 0;
}
.barra{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{height:38px;width:auto;transition:.3s}
header.pegado .logo img,
body:not(.con-hero) .logo img{height:32px}
nav{display:flex;align-items:center;gap:34px}
nav a{
  font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:#A6ADA8;transition:.2s;position:relative;padding:4px 0;
}
nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--azul);transition:.25s;
}
nav a:hover{color:#fff}
nav a:hover::after{width:100%}
nav a.on{color:#fff}
nav a.on::after{width:100%}
.menu-btn{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:8px}
.menu-btn svg{width:26px;height:26px;fill:none;stroke:currentColor}

/* -------------------------------------------------------------
   Hero — solo en Inicio
   ------------------------------------------------------------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#000;color:#fff}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.slide.activa{opacity:1}
.slide-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06)}
.slide.activa .slide-img{animation:kenburns 7.5s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.16)}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to right,rgba(6,10,18,.80) 0%,rgba(6,10,18,.46) 38%,rgba(6,10,18,0) 68%,rgba(6,10,18,.20) 100%),
    linear-gradient(to top,rgba(6,10,18,.92) 0%,rgba(6,10,18,.30) 24%,transparent 48%);
}
.hero-txt{position:relative;z-index:3;height:100%;display:flex;align-items:center}
.hero-txt .wrap{width:100%}
.hero-cont{max-width:760px}
.hero .eyebrow{color:var(--azul)}
.hero .eyebrow::before{background:var(--azul)}
.hero h1{font-size:clamp(2.5rem,6.4vw,5.2rem);margin:20px 0 0;text-shadow:0 2px 16px rgba(0,0,0,.6),0 10px 50px rgba(0,0,0,.5)}
.hero h1 .resalte{color:var(--azul)}
.hero p.lead{font-size:clamp(1rem,1.6vw,1.2rem);color:#E9EDF1;max-width:520px;margin:22px 0 34px;text-shadow:0 2px 14px rgba(0,0,0,.65)}
.hero-acciones{display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{position:absolute;bottom:38px;right:0;z-index:4;width:100%}
.hero-meta .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.puntos{display:flex;gap:10px}
.punto{
  width:38px;height:3px;background:rgba(255,255,255,.25);border:0;padding:0;
  cursor:pointer;border-radius:2px;overflow:hidden;position:relative;
}
.punto.activo::after{
  content:"";position:absolute;inset:0;background:var(--azul);
  transform-origin:left;animation:llenar 5.5s linear forwards;
}
@keyframes llenar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.modelo-actual{
  font-family:var(--display);font-size:.78rem;letter-spacing:.2em;
  color:#A6ADA8;text-transform:uppercase;
}
.modelo-actual b{color:#fff}

/* -------------------------------------------------------------
   Cabecera de pagina interior — reemplaza al hero
   ------------------------------------------------------------- */
.cabecera{
  position:relative;padding:calc(var(--alto-cab) + 78px) 0 78px;
  background:#060A12;color:#fff;overflow:hidden;
}
/* La foto iba al 42% y casi no se veia. Ahora manda ella y el velo se
   concentra a la izquierda, que es donde cae el texto. */
.cabecera-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.9;
}
.cabecera::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(6,10,18,.84) 0%,rgba(6,10,18,.46) 48%,rgba(6,10,18,.22) 76%,rgba(6,10,18,.48) 100%);
}
.cabecera .wrap{position:relative;z-index:2}
.cabecera .eyebrow{color:var(--azul)}
.cabecera .eyebrow::before{background:var(--azul)}
.cabecera h1{font-size:clamp(2.2rem,5.2vw,4rem);margin:18px 0 14px;text-shadow:0 2px 16px rgba(0,0,0,.6),0 10px 50px rgba(0,0,0,.5)}
.cabecera p{color:#E9EDF1;max-width:62ch;font-size:1.03rem;text-shadow:0 2px 14px rgba(0,0,0,.65)}
.miga{
  display:flex;gap:10px;align-items:center;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.74);margin-bottom:6px;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.miga a:hover{color:var(--azul)}
.miga span{opacity:.5}

/* -------------------------------------------------------------
   Secciones
   ------------------------------------------------------------- */
section{padding:110px 0;position:relative;background:var(--fondo);color:var(--texto)}
section.compacta{padding:76px 0}
.sec-cabeza{margin-bottom:56px;max-width:720px}
.sec-cabeza.centrada{margin-left:auto;margin-right:auto;text-align:center}
.sec-cabeza h2{font-size:clamp(2rem,4.4vw,3.3rem);margin:16px 0 18px}
.sec-cabeza p{color:var(--texto-2);font-size:1.03rem}

/* Nosotros / bloques de texto e imagen */
.intro-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center}
.intro-grid h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin:16px 0 20px}
.intro-grid p{color:var(--texto-2);max-width:60ch}
.intro-grid p + p{margin-top:16px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.duo.invertido .duo-txt{order:2}
.duo h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:16px 0 20px}
.duo p{color:var(--texto-2)}
.duo p + p{margin-top:16px}
.duo-img{border-radius:var(--r);overflow:hidden;border:1px solid var(--borde)}
.duo-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.cifra{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r);padding:26px 22px}
.cifra b{display:block;font-family:var(--display);font-size:2.2rem;color:var(--acento);line-height:1}
.cifra span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2)}

/* -------------------------------------------------------------
   Catalogo
   ------------------------------------------------------------- */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px;align-items:center}
.chip{
  background:transparent;border:1px solid var(--borde);color:var(--texto-2);
  padding:9px 20px;border-radius:999px;font-family:var(--cuerpo);
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:.22s;
}
.chip:hover{color:var(--texto);border-color:var(--texto-2)}
.chip.on{background:var(--azul-hondo);border-color:var(--azul-hondo);color:#fff}
.conteo{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-2);margin-left:auto}

.grid-modelos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-modelos.dos{grid-template-columns:repeat(2,1fr)}
.tarjeta{
  position:relative;background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--r);overflow:hidden;cursor:pointer;
  transition:.32s cubic-bezier(.2,.7,.3,1);display:flex;flex-direction:column;
}
.tarjeta::before{
  content:"";position:absolute;inset:0;opacity:0;transition:.32s;
  background:radial-gradient(520px 260px at 50% 22%,var(--brillo),transparent 68%);
}
.tarjeta:hover{
  transform:translateY(-6px);border-color:var(--azul-medio);
  box-shadow:0 18px 40px -20px rgba(12,32,4,.35);
}
.tarjeta:hover::before{opacity:1}
.foto{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--placa)}
.foto img{
  position:absolute;inset:0;margin:auto;z-index:2;
  max-width:calc(100% - 44px);max-height:calc(100% - 44px);
  width:auto;height:auto;object-fit:contain;
  transition:.4s cubic-bezier(.2,.7,.3,1);filter:drop-shadow(var(--sombra-moto));
}
/* Alpina y Dakar salieron recortadas de sus fichas y arrastran
   restos de sombra: se difuminan por abajo. */
.foto img.recorte-suave{
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 84%,transparent 99%);
}
.tarjeta:hover .foto img{transform:scale(1.06) translateY(-4px)}
.cc{
  position:absolute;top:16px;left:16px;z-index:3;
  font-family:var(--display);font-size:.72rem;letter-spacing:.12em;
  background:var(--chip-fondo);border:1px solid var(--chip-borde);
  color:var(--acento);padding:5px 12px;border-radius:999px;
}
.datos{
  padding:22px;border-top:1px solid var(--borde);
  flex:1;display:flex;flex-direction:column;position:relative;z-index:2;
}
.datos h3{font-size:1.32rem;margin-bottom:4px}
.color-txt{font-size:.78rem;color:var(--texto-2);margin-bottom:16px}
.mini{display:flex;gap:22px;margin-bottom:20px}
.mini div b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--texto)}
.mini div span{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2)}
.ver{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acento);
}
.ver svg{width:17px;height:17px;fill:none;stroke:currentColor;transition:.28s}
.tarjeta:hover .ver svg{transform:translateX(5px)}
/* Panel de datos en azul (2026-09-23): el relleno era verde claro con letras
   oscuras; sobre azul todo el texto va en blanco y el enlace en azul claro. */
.tarjeta .datos{
  background:linear-gradient(160deg,var(--azul-medio) 0%,var(--azul-hondo) 100%);
  border-top:0;color:#fff;
}
.tarjeta .datos h3{color:#fff}
.tarjeta .color-txt{color:rgba(255,255,255,.82);font-weight:600}
.tarjeta .mini div b{color:#fff}
.tarjeta .mini div span{color:rgba(255,255,255,.66)}
.tarjeta .ver{color:#BBD0FF}
.tarjeta:hover{border-color:var(--azul)}
.vacio{
  grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--texto-2);
  border:1px dashed var(--borde);border-radius:var(--r);
}

/* Tabla comparativa */
.tabla-scroll{overflow-x:auto;border:1px solid var(--borde);border-radius:var(--r);background:var(--superficie)}
table.comparativa{border-collapse:collapse;width:100%;min-width:820px;font-size:.88rem}
table.comparativa th,
table.comparativa td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--borde);white-space:nowrap}
table.comparativa thead th{
  font-family:var(--cuerpo);font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-2);background:var(--fondo);
  position:sticky;top:0;
}
table.comparativa tbody th{font-family:var(--display);font-size:.95rem;text-transform:uppercase;font-weight:900}
table.comparativa td{font-variant-numeric:tabular-nums;color:var(--texto-2)}
table.comparativa tbody tr:last-child th,
table.comparativa tbody tr:last-child td{border-bottom:0}
table.comparativa tbody tr{cursor:pointer;transition:.2s}
table.comparativa tbody tr:hover{background:var(--brillo)}
table.comparativa tbody tr:hover td{color:var(--texto)}

/* -------------------------------------------------------------
   Bloques de contenido reutilizables
   ------------------------------------------------------------- */
.grid-ben{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-ben.tres{grid-template-columns:repeat(3,1fr)}
.ben{
  padding:32px 26px;background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--r);transition:.28s;
}
.ben:hover{border-color:var(--azul-medio);transform:translateY(-4px)}
.ben-ico{
  width:46px;height:46px;border-radius:11px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--chip-fondo);border:1px solid var(--chip-borde);
}
.ben-ico svg{width:23px;height:23px;stroke:var(--acento);fill:none}
.ben h3{font-size:1rem;margin-bottom:10px;line-height:1.2}
.ben p{font-size:.9rem;color:var(--texto-2)}

/* Pasos numerados — el orden aqui si es informacion */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:paso}
.paso{padding-top:26px;border-top:2px solid var(--borde);position:relative}
.paso::before{
  counter-increment:paso;content:counter(paso,decimal-leading-zero);
  font-family:var(--display);font-size:.8rem;color:var(--acento);
  letter-spacing:.1em;display:block;margin-bottom:12px;
}
.paso h3{font-size:1.02rem;margin-bottom:9px;line-height:1.2}
.paso p{font-size:.9rem;color:var(--texto-2)}

/* Galeria */
.tira{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
.tira figure{overflow:hidden;border-radius:var(--r);border:1px solid var(--borde)}
.tira img{width:100%;height:100%;object-fit:cover;transition:.55s cubic-bezier(.2,.7,.3,1)}
.tira figure:hover img{transform:scale(1.07)}
.tira .ancha{grid-column:span 2}
.tira .alta{grid-row:span 2}

/* -------------------------------------------------------------
   Sucursales
   ------------------------------------------------------------- */
.grid-suc{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.suc{
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r);
  padding:36px;position:relative;overflow:hidden;
}
.suc::after{
  content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,var(--brillo),transparent 70%);
}
.suc > *{position:relative;z-index:2}
.suc .tag{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acento);
  font-weight:700;margin-bottom:12px;display:block;
}
.suc h3{font-size:1.35rem;margin-bottom:10px}
.suc p{color:var(--texto-2);margin-bottom:24px}
.suc-links{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:600;
  padding:10px 18px;border:1px solid var(--borde);border-radius:999px;
  color:var(--texto-2);transition:.22s;background:var(--fondo);
}
.pill:hover{border-color:var(--azul-medio);color:var(--acento)}
.pill svg{width:16px;height:16px;fill:none;stroke:currentColor}

/* Ficha de sucursal ampliada */
.suc-larga{
  display:grid;grid-template-columns:1fr 1.1fr;gap:0;
  border:1px solid var(--borde);border-radius:var(--r);overflow:hidden;background:var(--superficie);
}
.suc-larga + .suc-larga{margin-top:26px}
.suc-larga.invertida .suc-datos{order:2}
.suc-datos{padding:44px 40px}
.suc-datos h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:14px 0 8px}
.suc-mapa{min-height:340px;position:relative;background:var(--placa);border-left:1px solid var(--borde)}
.suc-larga.invertida .suc-mapa{border-left:0;border-right:1px solid var(--borde)}
.suc-mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.25)}
.dato-lista{display:grid;gap:0;margin:26px 0 30px}
.dato{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--borde);align-items:flex-start}
.dato:last-child{border-bottom:0}
.dato svg{width:19px;height:19px;stroke:var(--acento);fill:none;flex:none;margin-top:3px}
.dato .k{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2);display:block}
.dato .v{font-weight:600}
.dato .v a:hover{color:var(--acento)}
.pendiente{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:#B7791F;background:rgba(183,121,31,.12);border:1px solid rgba(183,121,31,.35);
  padding:3px 10px;border-radius:999px;display:inline-block;
}

/* -------------------------------------------------------------
   Formulario
   ------------------------------------------------------------- */
.contacto-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.forma{
  background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--r);padding:38px 36px;
}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo.ancho{grid-column:1/-1}
.campo label{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--texto-2);
}
.campo input,.campo select,.campo textarea{
  font-family:var(--cuerpo);font-size:.95rem;color:var(--texto);
  background:var(--fondo);border:1px solid var(--borde);border-radius:10px;
  padding:13px 15px;transition:.2s;width:100%;
}
.campo textarea{resize:vertical;min-height:120px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-color:var(--azul-medio);box-shadow:0 0 0 3px var(--brillo);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-2);opacity:.7}
.forma .btn{margin-top:26px}
.aviso-forma{
  margin-top:18px;font-size:.8rem;color:var(--texto-2);
  display:flex;gap:9px;align-items:flex-start;
}
.aviso-forma svg{width:16px;height:16px;stroke:var(--acento);fill:none;flex:none;margin-top:2px}
.resultado{
  margin-top:22px;padding:18px 20px;border-radius:10px;font-size:.9rem;
  background:var(--chip-fondo);border:1px solid var(--chip-borde);color:var(--texto);
}
.resultado b{color:var(--acento)}
.resultado[hidden]{display:none}

.canales{display:grid;gap:14px}
.canal{
  display:flex;gap:16px;align-items:center;padding:20px 22px;
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r);transition:.24s;
}
.canal:hover{border-color:var(--azul-medio);transform:translateX(4px)}
.canal-ico{
  width:44px;height:44px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--chip-fondo);border:1px solid var(--chip-borde);
}
.canal-ico svg{width:21px;height:21px;stroke:var(--acento);fill:none}
.canal .k{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2);display:block}
.canal .v{font-weight:600;font-size:.98rem}

/* -------------------------------------------------------------
   CTA
   ------------------------------------------------------------- */
.cta{
  background:linear-gradient(115deg,var(--azul-hondo),var(--azul-medio) 55%,var(--azul));
  border-radius:var(--r);padding:66px 52px;text-align:center;position:relative;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.22),transparent 55%);
}
.cta > *{position:relative;z-index:2}
.cta h2{font-size:clamp(1.9rem,4.2vw,3rem);color:#06120A;margin-bottom:16px}
.cta p{color:rgba(6,18,10,.78);max-width:52ch;margin:0 auto 32px;font-weight:500}
.cta-acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* -------------------------------------------------------------
   Footer — siempre oscuro
   ------------------------------------------------------------- */
footer{
  --fondo:#131614;--superficie:#0A0C0A;--borde:#242926;
  --texto:#fff;--texto-2:#A6ADA8;--acento:#8BE83A;
  background:var(--fondo);color:var(--texto);padding:64px 0 32px;
}
.pie{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;margin-bottom:46px}
.pie img.marca{height:40px;margin-bottom:20px}
.pie p{font-size:.88rem;color:var(--texto-2)}
.pie h4{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:18px;color:var(--texto);font-family:var(--cuerpo);font-weight:700;
}
.pie ul{list-style:none;display:grid;gap:11px}
.pie li a{font-size:.88rem;color:var(--texto-2);transition:.2s}
.pie li a:hover{color:var(--acento)}
.pie-abajo{
  border-top:1px solid var(--borde);padding-top:26px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:.78rem;color:var(--texto-2);
}
.vento-pie{display:flex;align-items:center;gap:12px}
.vento-pie img{height:20px;opacity:.7}

/* -------------------------------------------------------------
   WhatsApp flotante
   ------------------------------------------------------------- */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;box-shadow:0 10px 30px -6px rgba(37,211,102,.6);transition:.28s;
}
.wa:hover{transform:scale(1.08)}
.wa svg{width:32px;height:32px;fill:#fff}
.wa::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:pulso 2.4s ease-out infinite;
}
@keyframes pulso{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}

/* -------------------------------------------------------------
   Modal ficha tecnica
   Repite la lamina oficial de Vento: moto sobre fondo claro,
   panel oscuro con las especificaciones.
   ------------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(4,6,5,.86);backdrop-filter:blur(8px);
  padding:24px;overflow-y:auto;
}
.modal.abierto{display:block}
.modal-caja{
  max-width:1080px;margin:40px auto;background:#fff;color:#0A0C0A;
  border-radius:18px;overflow:hidden;animation:subir .4s cubic-bezier(.2,.7,.3,1);
}
@keyframes subir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.modal-top{display:grid;grid-template-columns:1.05fr 1fr}
.modal-foto{
  background:linear-gradient(165deg,#FFFFFF,#E8ECE4);
  display:grid;place-items:center;padding:40px;min-height:340px;position:relative;
}
.modal-foto img{max-height:340px;width:auto;filter:drop-shadow(0 24px 28px rgba(12,32,4,.22))}
.modal-info{background:#0A0C0A;color:#fff;padding:44px 40px}
.modal-info .eyebrow{color:var(--azul)}
.modal-info .eyebrow::before{background:var(--azul)}
.modal-info h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:14px 0 8px}
.modal-info .color-txt{color:#A6ADA8;margin-bottom:26px}
.destacados{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.destacados div{background:#131614;border:1px solid #242926;border-radius:10px;padding:14px}
.destacados b{display:block;font-family:var(--display);font-size:1.15rem;color:var(--azul)}
.destacados span{font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:#A6ADA8}
.cerrar{
  position:absolute;top:18px;right:18px;z-index:5;width:40px;height:40px;border-radius:50%;
  background:rgba(10,12,10,.06);border:1px solid #DFE4DC;color:#0A0C0A;
  cursor:pointer;display:grid;place-items:center;transition:.22s;
}
.cerrar:hover{background:var(--azul-hondo);color:#fff;border-color:var(--azul-hondo)}
.cerrar svg{width:18px;height:18px;fill:none;stroke:currentColor}
.specs{padding:0 40px 44px;background:#fff}
.specs h4{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--azul-hondo);
  font-family:var(--cuerpo);font-weight:700;margin:34px 0 18px;
}
.tabla-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px}
.fila{
  display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid #E4E9E1;font-size:.88rem;
}
.fila span{color:#5A645C}
.fila b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.nota-extra{
  margin-top:26px;padding:20px 22px;background:rgba(0,33,105,.06);
  border:1px solid rgba(0,33,105,.20);border-radius:12px;font-size:.9rem;color:#333C4A;
}
.nota-extra b{color:var(--azul-hondo)}
.nota-extra[hidden]{display:none}
.modal-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
@media(max-width:1024px){
  .grid-modelos,.grid-modelos.dos{grid-template-columns:repeat(2,1fr)}
  .grid-ben,.grid-ben.tres{grid-template-columns:repeat(2,1fr)}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .intro-grid,.duo,.contacto-grid{grid-template-columns:1fr;gap:38px}
  .duo.invertido .duo-txt{order:0}
  .suc-larga,.suc-larga.invertida{grid-template-columns:1fr}
  .suc-larga.invertida .suc-datos{order:0}
  .suc-mapa{min-height:280px;border-left:0;border-top:1px solid var(--borde)}
  .suc-larga.invertida .suc-mapa{border-right:0}
  .pie{grid-template-columns:1fr 1fr;gap:34px}
  .modal-top{grid-template-columns:1fr}
  .modal-foto{min-height:280px;padding:30px}
  .modal-info{padding:32px 28px}
  .specs{padding:0 28px 36px}
}
@media(max-width:760px){
  section{padding:76px 0}
  .cabecera{padding:calc(var(--alto-cab) + 54px) 0 54px}
  nav{
    position:fixed;inset:0 0 auto 0;background:rgba(10,12,10,.98);backdrop-filter:blur(16px);
    flex-direction:column;gap:0;padding:88px 24px 32px;
    transform:translateY(-100%);transition:.35s cubic-bezier(.2,.7,.3,1);
    border-bottom:1px solid #242926;
  }
  nav.abierto{transform:none}
  nav a{width:100%;padding:16px 0;border-bottom:1px solid #242926;font-size:.9rem}
  nav a::after{display:none}
  .menu-btn{display:block;position:relative;z-index:2}
  .grid-modelos,.grid-modelos.dos,.grid-ben,.grid-ben.tres,
  .grid-suc,.pasos,.campos{grid-template-columns:1fr}
  .tira{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .tira .ancha{grid-column:span 2}
  .tira .alta{grid-row:span 1}
  .pie{grid-template-columns:1fr}
  .cifras{grid-template-columns:1fr 1fr}
  .cta{padding:46px 26px}
  .forma{padding:28px 22px}
  .suc-datos{padding:32px 26px}
  .tabla-specs{grid-template-columns:1fr}
  .destacados{grid-template-columns:1fr 1fr}
  .hero-meta .wrap{flex-direction:column;align-items:flex-start;gap:14px}
  .hero::after{
    background:linear-gradient(to bottom,
      rgba(6,10,18,.55) 0%,rgba(6,10,18,.26) 30%,
      rgba(6,10,18,.74) 74%,rgba(6,10,18,.96) 100%);
  }
  .modal{padding:0}
  .modal-caja{margin:0;border-radius:0;min-height:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html{scroll-behavior:auto}
}


/* =============================================================
   Capa de compatibilidad con Divi.
   Divi mete contenedores, anchos y colores propios por encima.
   Aqui se neutralizan para que el marcado portado se comporte
   exactamente como en el mockup.
   ============================================================= */

/* --- ancho completo: Divi encajona el contenido en su container --- */
#page-container,
#et-main-area,
#main-content,
#main-content .container,
#main-content #left-area,
#main-content .entry-content,
.et_pb_post{
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
  float:none !important;
  border:0 !important;
}
#main-content .container:before{display:none !important}
#page-container{padding-top:0 !important}

/* --- fuera lo que pone el tema: su cabecera, su pie, su titulo --- */
#main-header,#top-header,#et-top-navigation,#main-footer,#footer-bottom{display:none !important}
.entry-title,.main_title,.et_post_meta_wrapper,#sidebar,#breadcrumbs{display:none !important}

/* --- color de los titulos: el mockup lo hereda, Divi lo fija en #333 --- */
#page-container h1,#page-container h2,#page-container h3,
#page-container h4,#page-container h5,#page-container h6{color:inherit}
.hero,.hero h1,.hero h2,.hero p{color:#fff}
section,.cabecera{color:var(--texto)}
section h1,section h2,section h3,section h4,
.cabecera h1,.cabecera h2{color:var(--texto)}
#page-container p{color:inherit}

/* --- Divi resetea la tipografia del body --- */
body,#page-container,.entry-content{
  font-family:var(--cuerpo);
  font-size:16px;
  line-height:1.65;
  background:var(--fondo);
  color:var(--texto);
}
#main-content{background:var(--fondo)}

/* --- el formulario de Divi, si se usa, con los tokens del mockup --- */
.et_pb_contact_form .input,.et_pb_contact_form select,.et_pb_contact_form textarea{
  background:var(--superficie) !important;border:1px solid var(--borde) !important;
  border-radius:var(--r-sm,6px) !important;color:var(--texto) !important;
  font-family:var(--cuerpo) !important;padding:14px 16px !important;
}
.et_pb_contact_form .et_pb_button{
  background:var(--azul-medio) !important;color:#fff !important;border:0 !important;
  border-radius:999px !important;font-family:var(--cuerpo) !important;font-weight:700 !important;
}
.et_pb_contact_form .et_pb_button:after{display:none !important}

/* --- filtros del catalogo: el atributo hidden perdia contra display:flex de .tarjeta --- */
.tarjeta[hidden]{display:none !important}

/* --- responsive: dos desbordes detectados en 375 px --- */
html,body{overflow-x:hidden;max-width:100%}
.hero{overflow:hidden}
.btn{max-width:100%}
@media (max-width:600px){
  .btn{white-space:normal;text-align:center;justify-content:center;line-height:1.3}
  .hero-acciones{width:100%}
  .hero-acciones .btn{flex:1 1 100%}
}