/* BASE360 · hoja base compartida — paleta SKANFIT (cálida/elegante) + acentos navy/rojo del logo.
   SIN contenido forense/SHA/SeguroReady: BASE360 = ventanilla única legal CL + RD. */
/* 31-10-2026 · letras alojadas en el propio sitio (Ley 21.719: no mandar la IP del visitante a Google) */
@import url('fonts.css');

:root{
  /* ---------------------------------------------------------------------
     BASE360 · paleta tomada del logo. Azul, rojo y dorado. Sin verde.
     Azules y rojos muestreados del PNG del sello: #003084 y #C00C0C.
     --------------------------------------------------------------------- */
  /* Papel · más limpio que antes, para que el azul y el dorado destaquen */
  --bg:#F7F4ED; --bg2:#EFEAE0; --card:#FFFFFF; --card-2:#F7F4ED; --line:#E3DCCC;
  --tx:#1C1810; --tx-dim:#5B5245; --tx-mute:#857A69;
  /* Azul del logo */
  --navy:#1A4AA8; --navy-d:#003084; --navy-dd:#002461;
  /* Rojo del logo */
  --red:#C00C0C; --red-d:#94070A;
  /* Dorado · letras doradas sobre azul, dorado profundo sobre papel */
  --gold:#A8801F; --gold-d:#7E5F13; --gold-lt:#E0C589; --gold-pale:#F6EEDA;
  /* Antes eran verdes (--leaf venía de SKANFIT). Ahora son dorados:
     así todas las páginas que usan var(--leaf) cambian solas. */
  --leaf:#A8801F; --leaf-d:#7E5F13; --terra:#B8703A;
  /* WhatsApp en azul de marca, no en verde */
  --wa:#1A4AA8;
  --r:14px; --r-lg:22px; --r-pill:999px;
  --shadow:0 18px 46px rgba(0,48,132,.13); --shadow-sm:0 2px 10px rgba(0,48,132,.07);
  --ring:0 0 0 3px rgba(26,74,168,.32);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--tx);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--navy-d)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.serif{font-family:var(--serif)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---- TOP BAR idiomas + logo ---- */
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.topbar-in{max-width:1160px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px;color:var(--tx);font-weight:700}
.brand img{height:52px;width:auto}
.brand .bt{font-family:var(--serif);font-size:22px;font-weight:700;line-height:1}
.brand .bt b{color:var(--red)} .brand .bt span{color:var(--navy)}
.brand small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-mute);font-weight:600}
.langs{display:flex;gap:6px}
.langs button{font-family:inherit;font-weight:700;font-size:13px;color:var(--tx-dim);background:#fff;border:1.5px solid var(--line);
  border-radius:10px;padding:7px 12px;cursor:pointer;transition:.15s}
.langs button:hover{border-color:var(--navy)}
.langs button.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---- NAV ---- */
nav.main{position:sticky;top:0;z-index:60;background:rgba(11,27,52,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{max-width:1160px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nav-links a{color:#DCE7F5;font-size:14.5px;font-weight:500}
.nav-links a:hover{color:#fff}
.nav-cta{background:linear-gradient(135deg,var(--red),var(--red-d));color:#fff !important;font-weight:700;padding:9px 18px;border-radius:var(--r-pill);font-size:14px}
.nav-toggle{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:4px}
.nav-toggle svg{width:26px;height:26px}

/* ---- BOTONES ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:700;font-size:16px;
  padding:15px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;text-decoration:none;transition:.16s}
.btn-primary{background:linear-gradient(135deg,var(--navy),var(--navy-d));color:#fff;box-shadow:0 8px 22px rgba(31,78,154,.28)}
.btn-primary:hover{filter:brightness(1.08);color:#fff}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff}
.btn-gold:hover{filter:brightness(1.07);color:#fff}
.btn-wa{background:var(--wa);color:#fff}.btn-wa:hover{filter:brightness(1.06);color:#fff}
.btn-ghost{background:#fff;color:var(--navy);border:1.6px solid var(--line)}.btn-ghost:hover{border-color:var(--navy)}

/* ---- HERO ---- */
.hero{position:relative;background:radial-gradient(1100px 460px at 75% -10%,rgba(31,78,154,.35),transparent 60%),linear-gradient(160deg,var(--navy-dd),var(--navy-d));color:#fff;overflow:hidden}
.hero-in{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:64px 22px 84px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#F4D9A8;background:rgba(244,183,64,.12);border:1px solid rgba(244,183,64,.4);padding:7px 15px;border-radius:var(--r-pill);margin-bottom:20px}
.hero h1{font-family:var(--serif);font-size:clamp(30px,5.2vw,52px);line-height:1.06;margin:0 0 16px;font-weight:600;letter-spacing:-.01em}
.hero h1 .g{color:var(--gold-lt)}
.hero p.sub{font-size:clamp(15px,2.1vw,19px);color:#C9D6E8;max-width:600px;margin:0 auto 30px}
.hero .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.flags{margin-top:22px;color:#9FB2CC;font-size:13.5px}

/* ---- SEARCH (buscador gancho) ---- */
.search{display:flex;gap:9px;background:#fff;border-radius:var(--r-pill);padding:7px;box-shadow:var(--shadow);max-width:600px;margin:0 auto}
.search input{flex:1;border:0;outline:0;font-size:17px;font-family:inherit;padding:14px 20px;border-radius:var(--r-pill);color:var(--tx);background:transparent;min-width:0}
.search .btn{padding:14px 26px}
.search-note{margin-top:12px;font-size:12.5px;color:#9FB2CC}

/* ---- SECCIONES ---- */
section.blk{padding:64px 0}
section.blk.alt{background:var(--bg2)}
.h2{font-family:var(--serif);text-align:center;font-size:clamp(24px,3.6vw,36px);font-weight:600;margin:0 0 10px;letter-spacing:-.01em}
.lead{text-align:center;color:var(--tx-dim);max-width:620px;margin:0 auto 42px;font-size:16px}

/* grid tarjetas de servicio */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-sm);transition:.18s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#C3D2EA}
.card .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:25px;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(31,78,154,.10),rgba(192,40,40,.08));color:var(--navy)}
.card h3{font-family:var(--serif);margin:0 0 7px;font-size:20px;font-weight:600}
.card p{margin:0;color:var(--tx-dim);font-size:14.5px}
.card .tagpais{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;color:var(--gold-d);background:rgba(143,100,32,.10);border:1px solid rgba(143,100,32,.25);padding:3px 10px;border-radius:var(--r-pill)}

/* franja países */
.paises{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.pais{flex:1;min-width:260px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;text-align:center}
.pais .fl{font-size:40px}
.pais h3{font-family:var(--serif);margin:8px 0 6px;font-size:22px}

/* CTA final */
.ctabox{background:linear-gradient(160deg,var(--navy-dd),var(--navy-d));color:#fff;border-radius:26px;padding:48px 28px;text-align:center;box-shadow:var(--shadow)}
.ctabox h2{font-family:var(--serif);font-size:clamp(24px,3.6vw,34px);margin:0 0 10px;font-weight:600}
.ctabox p{color:#C9D6E8;max-width:560px;margin:0 auto 24px}

/* ---- FOOTER ---- */
footer.site{background:#1a130d;color:#C9BBA8;padding:40px 22px;font-size:14px}
.foot-in{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
footer.site h4{font-family:var(--serif);color:#fff;font-size:16px;margin:0 0 12px}
footer.site a{color:#C9BBA8;display:block;padding:3px 0}
footer.site a:hover{color:#fff}
.foot-bottom{max-width:1160px;margin:22px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);color:#9C8C78;font-size:12px;line-height:1.6}

/* WhatsApp flotante */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;background:var(--wa);color:#fff;width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.wa-float:hover{filter:brightness(1.06);color:#fff}
.wa-float svg{width:30px;height:30px}

/* ---- ÍCONOS SVG (reemplazan emojis) ---- */
.card .ic svg{width:26px;height:26px}
.catic svg{width:24px;height:24px}
.pais .fl{font-size:0}
.pais .fl svg{width:58px;height:auto;border-radius:4px;box-shadow:0 2px 8px rgba(42,29,20,.12)}
.flag-inline{width:22px;height:auto;vertical-align:-4px;border-radius:2px;display:inline-block;margin:0 2px}
.eyebrow .flag-inline{width:20px}
.btn svg{width:19px;height:19px}
.btn .flag-inline{width:18px}

@media(max-width:900px){ .grid-3,.grid-4{grid-template-columns:1fr 1fr} .foot-in{grid-template-columns:1fr 1fr} }
/* 24-sep-2026 · EL HAMBURGUESA SUBE DE 680 A 1100 px.
   La barra horizontal no cabe en una sola línea bajo ~1100 px: se partía en
   dos y por eso había media docena de reglas que achicaban la letra hasta
   los 11 px en franjas angostas. Mejor el menú plegado, que ya funciona en
   el teléfono, que una barra con letra ilegíble en un notebook chico. */
@media(max-width:1199px){
  .nav-links{display:none;position:absolute;top:58px;left:0;right:0;background:var(--navy-dd);flex-direction:column;padding:16px 22px;gap:14px}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
}
@media(max-width:680px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .search{flex-direction:column;border-radius:20px}
  .search input{text-align:center} .search .btn{width:100%}
}


/* =======================================================================
   BASE360 · refinamiento de marca · septiembre 2026
   Solo agrega. No reemplaza ninguna regla anterior, así que no puede
   romper el sitio: si algo no gusta, se borra este bloque y queda igual.
   ======================================================================= */

/* Hilo dorado bajo la barra de navegación */
.topbar{border-bottom:1px solid rgba(224,197,137,.28)}

/* El claim bajo el logo, en dorado */
.brand small{color:var(--gold)}

/* Etiqueta superior de sección · dorada sobre azul, dorado profundo sobre papel */
.eyebrow{color:var(--gold-lt);border-color:rgba(224,197,137,.42)}
.wrap .eyebrow, main .eyebrow{color:var(--gold)}

/* Hilo dorado bajo cada título de sección */
.h2::after{content:"";display:block;width:62px;height:3px;margin:14px auto 0;
  border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-lt))}

/* Hero · azul del logo con un halo dorado tenue arriba a la derecha */
.hero{background:
  radial-gradient(760px 320px at 82% -8%,rgba(224,197,137,.16),transparent 62%),
  radial-gradient(1100px 460px at 20% -12%,rgba(26,74,168,.55),transparent 62%),
  linear-gradient(160deg,var(--navy-dd),var(--navy-d))}

/* Filo dorado en el borde inferior del hero */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--gold-lt) 22%,var(--red) 50%,var(--gold-lt) 78%,transparent)}

/* Botones · más presencia */
.btn-primary{background:linear-gradient(135deg,var(--navy),var(--navy-d));
  box-shadow:0 8px 22px rgba(0,48,132,.30)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-d));
  box-shadow:0 8px 20px rgba(168,128,31,.26)}
.btn-ghost{border-color:#C9D2E4;color:var(--navy-d)}
.btn-ghost:hover{border-color:var(--navy);background:#F4F7FC}
.nav-cta{box-shadow:0 6px 16px rgba(192,12,12,.26)}

/* Tarjetas · filo dorado que aparece al pasar el mouse */
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--navy),var(--gold-lt),var(--red));
  opacity:0;transition:opacity .18s}
.card:hover::before{opacity:1}

/* Enlaces del menú · subrayado dorado al pasar */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--gold-lt);transform:scaleX(0);transition:transform .18s;transform-origin:left}
.nav-links a:hover::after{transform:scaleX(1)}

/* Botón flotante de WhatsApp · azul de marca */
.wa-float{background:var(--wa);color:#fff}

/* Pie · hilo dorado de separación */
.foot-bottom{border-top-color:rgba(224,197,137,.22)}