/* ============================================================
   vuola.tech — sistema visual v2
   Manual de Identidad Visual Vuola v1.0
   Azul #2672B7 · Teal #51BBB8 · Navy #163A5C · Teal oscuro #2E8A87
   ============================================================ */

:root{
  --blue:#2672B7; --teal:#51BBB8; --navy:#163A5C; --teal-dark:#2E8A87;
  --ink:#0B2338;                 /* navy profundo para bandas oscuras */
  --fog:#F4F7FA; --slate:#4A5568; --line:#E3EAF2; --white:#fff;
  --maxw:1280px;
  --pad-sec: clamp(72px, 7.4vw, 116px);
  --ease: cubic-bezier(.16,.84,.30,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Mulish',-apple-system,'Segoe UI',sans-serif;
  color:var(--navy);background:var(--white);
  font-size:17px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:var(--teal-dark);text-decoration:none;transition:color .2s}
a:hover{color:var(--blue)}
::selection{background:var(--teal);color:var(--ink)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,4vw,56px)}
.narrow{max-width:none}
section{padding:var(--pad-sec) 0}
.sec-tight{padding:clamp(56px,6vw,90px) 0}

/* ---------- Tipografía de autoridad ---------- */
.display{
  font-size:clamp(2.9rem,7.4vw,5.6rem);
  font-weight:800;line-height:.98;letter-spacing:-.035em;color:var(--navy);
}
/* Texto fluido: el ancho lo marca el contenedor, no un tope en caracteres. */
h1,h2,h3,.statement,.display,blockquote,.lead,p,li{text-wrap:wrap}
.display em{font-style:normal;color:var(--teal-dark)}
h1{font-size:clamp(2.3rem,5vw,3.6rem);font-weight:800;line-height:1.05;letter-spacing:-.03em}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:800;line-height:1.12;letter-spacing:-.025em;color:var(--navy)}
h3{font-size:1.18rem;font-weight:700;line-height:1.3;color:var(--navy);letter-spacing:-.01em}
.statement{
  font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:700;line-height:1.22;
  letter-spacing:-.022em;color:var(--navy);
}
.eyebrow{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--teal-dark);margin-bottom:22px;
}
.lead{font-size:clamp(1.08rem,1.5vw,1.3rem);color:var(--slate);line-height:1.6}
.lead + .lead,p.body + p.body,.lead + p.body,p.body + .lead{margin-top:16px}
p.body{color:var(--slate)}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  border-bottom:1px solid transparent;
}
.site-header .bar{display:flex;align-items:center;gap:30px;height:78px;transition:height .35s var(--ease)}
.site-header.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(150%);border-bottom-color:var(--line)}
.site-header.solid .bar{height:75px}
.brand{display:flex;align-items:center;gap:14px}
.brand .brand-mark{height:52px;width:auto;flex:0 0 auto;transition:height .35s var(--ease)}
.brand .brand-txt{display:flex;flex-direction:column;justify-content:center;height:52px;transition:height .35s var(--ease)}
.brand .wm{font-weight:900;font-size:1.7rem;letter-spacing:1.6px;color:#fff;line-height:1;transition:color .35s}
.brand .wm i{font-style:normal;font-weight:900;color:var(--teal)}
.brand .tg{display:block;font-size:.72rem;font-weight:800;letter-spacing:2.8px;text-transform:uppercase;
  color:var(--teal);opacity:1;margin-top:6px;line-height:1}
.site-header.solid .brand .wm{color:var(--navy)}
.site-header.solid .brand .tg{color:var(--teal-dark)}
body.light-top .brand .tg{color:var(--teal-dark)}

.menu{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.menu a{font-size:.93rem;font-weight:700;color:rgba(255,255,255,.82);letter-spacing:-.01em;padding:6px 0;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--teal);transition:right .3s var(--ease)}
.menu a:hover,.menu a.active{color:#fff}
.menu a.active::after{right:0}
.site-header.solid .menu a{color:var(--slate)}
.site-header.solid .menu a:hover,.site-header.solid .menu a.active{color:var(--navy)}
.menu .lang{border:1.4px solid rgba(255,255,255,.35);border-radius:100px;padding:5px 13px;font-size:.76rem;letter-spacing:.08em}
.menu .lang::after{display:none}
.site-header.solid .menu .lang{border-color:var(--line)}
.menu .cta-link{background:var(--teal);color:var(--ink) !important;border-radius:100px;padding:10px 20px}
.menu .cta-link::after{display:none}
.menu .cta-link:hover{background:#fff}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:26px;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:background .35s}
.site-header.solid .burger span{background:var(--navy)}

/* páginas claras: header siempre sólido */
body.light-top .site-header{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
body.light-top .brand .wm{color:var(--navy)} body.light-top .brand .tg{color:var(--teal-dark)}
body.light-top .menu a{color:var(--slate)} body.light-top .menu a.active{color:var(--navy)}
body.light-top .menu .lang{border-color:var(--line)}
body.light-top .burger span{background:var(--navy)}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:clamp(140px,15vw,200px) 0 clamp(60px,6.5vw,92px);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1100px 620px at 78% 12%, rgba(81,187,184,.20), transparent 62%),
    radial-gradient(900px 560px at 8% 92%, rgba(38,114,183,.34), transparent 60%);
}
.hero .circuit{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:58%;max-width:840px;opacity:.5;pointer-events:none;
}
.hero .container{position:relative;z-index:2}
.hero .eyebrow{color:var(--teal)}
.hero .display{color:#fff}
.hero .display em{color:var(--teal)}
.hero .lead{color:#C6D7E6;margin-top:24px;font-size:clamp(1.06rem,1.45vw,1.3rem)}
.hero-cta{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap}
.hero-facts{
  margin-top:clamp(48px,6vw,84px);padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:10px 40px;font-size:.82rem;font-weight:700;
  letter-spacing:.04em;color:rgba(255,255,255,.72);
}
.hero-facts b{color:var(--teal);font-weight:800}

.page-hero{background:var(--ink);color:#fff;padding:clamp(140px,14vw,190px) 0 clamp(56px,6vw,86px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 480px at 85% 10%, rgba(81,187,184,.18), transparent 60%)}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:#fff}
.page-hero .lead{color:#C6D7E6;margin-top:20px}
.page-hero .eyebrow{color:var(--teal)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:100px;
  font-weight:800;font-size:.95rem;letter-spacing:-.01em;transition:all .25s var(--ease);border:1.6px solid transparent;
}
.btn-primary{background:var(--teal);color:var(--ink) !important}
.btn-primary:hover{background:#fff;transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff !important}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal) !important;transform:translateY(-2px)}
.btn-dark{background:var(--navy);color:#fff !important}
.btn-dark:hover{background:var(--blue);transform:translateY(-2px)}
.btn-outline{border-color:var(--navy);color:var(--navy) !important}
.btn-outline:hover{background:var(--navy);color:#fff !important}
.arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.link-more{font-weight:800;font-size:.95rem;color:var(--navy);display:inline-flex;gap:8px;align-items:center}
.link-more:hover{color:var(--blue)}
.link-more span{transition:transform .25s var(--ease)}
.link-more:hover span{transform:translateX(4px)}

/* ---------- Banda de programas (prueba tipográfica) ---------- */
.programmes{background:var(--white);border-bottom:1px solid var(--line);padding:34px 0}
.programmes .lbl{font-size:.68rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--slate);opacity:.75;margin-bottom:18px;text-align:center}
.programmes .row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(20px,4vw,54px)}
.programmes .row span{
  font-size:clamp(.86rem,1.35vw,1.08rem);font-weight:800;letter-spacing:.03em;
  color:var(--navy);opacity:.62;text-transform:uppercase;white-space:nowrap;
}

/* ---------- Bloques numerados ---------- */
/* 3 columnas: numero | titular | cuerpo. Ocupa todo el ancho y baja la altura de la fila. */
.numbered{display:grid;gap:0;margin-top:clamp(40px,5vw,70px)}
.num-item{display:grid;grid-template-columns:72px minmax(190px,.82fr) 1.9fr;
  column-gap:clamp(18px,3vw,44px);row-gap:0;align-items:start;
  padding:clamp(28px,3.1vw,44px) 0;border-top:1px solid var(--line)}
.num-item:last-child{border-bottom:1px solid var(--line)}
.num-item .n{font-size:1rem;font-weight:800;color:var(--teal-dark);letter-spacing:.1em;padding-top:6px}
.num-item > div:last-child{display:contents}
.num-item h3{grid-column:2;font-size:clamp(1.18rem,1.7vw,1.42rem);margin-bottom:0;letter-spacing:-.02em}
.num-item p{grid-column:3;color:var(--slate)}
.num-item ul{grid-column:3;margin:14px 0 0 18px;color:var(--slate);font-size:.96rem}
.num-item .ni-body{grid-column:3}
.num-item .ni-body ul{grid-column:auto;margin-left:18px}
.num-item ul li{margin-bottom:7px}

/* ---------- Tarjetas ---------- */
.grid{display:grid;gap:clamp(18px,2vw,26px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(26px,2.6vw,36px);transition:all .3s var(--ease)}
.card:hover{box-shadow:0 18px 50px rgba(11,35,56,.10);transform:translateY(-3px);border-color:#D2E0EC}
.card p{color:var(--slate);font-size:.97rem;margin-top:10px}
.card ul{margin:14px 0 0 18px;color:var(--slate);font-size:.95rem}
.card ul li{margin-bottom:7px}
.card .tag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-dark);background:#E7F3F3;padding:5px 12px;border-radius:100px;margin-bottom:16px}
.card.dark{background:var(--navy);border-color:transparent;color:#fff}
.card.dark h3{color:#fff} .card.dark p{color:#C6D7E6}

/* ---------- Tarjetas de público ---------- */
.aud-card img{width:100%;height:190px;object-fit:cover;border-bottom:1px solid var(--line)}
.aud-card .aud-body{padding:clamp(24px,2.4vw,32px)}
.aud-card .aud-body p{margin-top:10px}

/* ---------- Icono de tarjeta ---------- */
.card-ic{display:block;font-size:1.7rem;line-height:1;margin-bottom:16px}

/* ---------- Cifras ---------- */
.metrics{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.metrics::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 420px at 15% 0%, rgba(38,114,183,.35), transparent 60%)}
.metrics .container{position:relative;z-index:2}
.metrics .eyebrow{color:var(--teal)}
.metrics h2{color:#fff}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(40px,5vw,64px)}
.metric{padding:clamp(26px,3vw,38px) clamp(16px,2vw,30px);border-top:1px solid var(--line);border-right:1px solid var(--line)}
.metric:nth-child(3n){border-right:0}
.metric:nth-child(n+4){border-bottom:0}
.metric .n{font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--teal-dark)}
.metric .l{margin-top:12px;font-size:.9rem;color:var(--slate);line-height:1.45}
.metrics .metric{border-top-color:rgba(255,255,255,.16);border-right-color:rgba(255,255,255,.16)}
.metrics .metric .n{color:var(--teal)}
.metrics .metric .l{color:#C6D7E6}

/* ---------- Casos (editorial) ---------- */
.case-row{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;
  padding:clamp(50px,6vw,96px) 0;border-top:1px solid var(--line)}
.case-row:first-of-type{border-top:0}
.case-row.flip .case-media{order:2}
.case-media{position:relative;background:var(--fog);border-radius:18px;overflow:hidden;padding:clamp(20px,2.4vw,34px);
  display:flex;align-items:center;justify-content:center}
.case-media img{width:100%;height:auto;border-radius:10px;box-shadow:0 20px 50px rgba(11,35,56,.18)}
.case-body .tag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-dark);background:#E7F3F3;padding:5px 12px;border-radius:100px;margin-bottom:16px}
.case-body h3{font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.025em;line-height:1.2;margin-bottom:8px}
.case-body .org{font-size:.9rem;color:var(--slate);font-weight:700;margin-bottom:16px}
.case-body p{color:var(--slate);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chips span{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--fog);
  color:var(--slate);padding:6px 12px;border-radius:100px;border:1px solid var(--line)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0;padding:20px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts .n{font-size:1.55rem;font-weight:800;color:var(--blue);line-height:1;letter-spacing:-.03em}
.facts .l{font-size:.76rem;color:var(--slate);margin-top:6px;line-height:1.35}
.links{display:flex;flex-wrap:wrap;gap:18px;font-size:.9rem;font-weight:700}
blockquote{border-left:3px solid var(--teal);padding:6px 0 6px 20px;margin:18px 0;color:var(--navy);
  font-size:1.05rem;font-style:italic}

/* ---------- Bloque partido texto + imagen ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(34px,5vw,74px);align-items:start}
.figure{margin:0}
.figure img{width:100%;height:auto;border-radius:18px;box-shadow:0 22px 60px rgba(11,35,56,.16)}
.figure figcaption{margin-top:14px;font-size:.85rem;color:var(--slate);line-height:1.45}

/* ---------- Galería de producto ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px);margin-top:clamp(38px,4.5vw,58px)}
.gallery figure{margin:0}
.gallery img{width:100%;height:300px;object-fit:cover;object-position:top;border-radius:14px;
  border:1px solid var(--line);background:#fff;box-shadow:0 12px 34px rgba(11,35,56,.10)}
.gallery figcaption{margin-top:12px;font-size:.82rem;color:var(--slate);line-height:1.4}

/* ---------- Franja de equipo ---------- */
.team-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,44px);margin-top:clamp(38px,4.5vw,56px)}
.team-strip .tp{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start}
.team-strip .tp img{width:120px;height:120px;border-radius:50%;object-fit:cover;
  filter:grayscale(1);transition:filter .4s var(--ease),transform .4s var(--ease)}
.team-strip .tp:hover img{filter:grayscale(0);transform:scale(1.04)}
.team-strip .role{font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:7px}
.team-strip h3{font-size:1.3rem;letter-spacing:-.02em;margin-bottom:9px}
.team-strip p{color:var(--slate);font-size:.95rem}

/* ---------- Comparativa ellos / nosotros ---------- */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(38px,4.5vw,60px);
  border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.versus .col{padding:clamp(28px,3.2vw,44px)}
.versus .col.them{background:var(--fog)}
.versus .col.us{background:var(--navy);color:#fff}
.versus .col-t{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:8px}
.versus .col.us .col-t{color:var(--teal);border-bottom-color:rgba(255,255,255,.2)}
.versus ul{list-style:none;margin:0}
.versus li{padding:15px 0 15px 30px;position:relative;font-size:1rem;border-bottom:1px solid var(--line);
  color:var(--slate);line-height:1.5}
.versus li strong{color:var(--navy);font-weight:800}
.versus .col.us li strong{color:#fff}
.versus .col.us li{border-bottom-color:rgba(255,255,255,.14);color:#C6D7E6;font-weight:400}
.versus li:last-child{border-bottom:0}
.versus .col.them li::before{content:"→";position:absolute;left:0;top:15px;color:var(--teal-dark);font-weight:800}
.versus .col.us li::before{content:"→";position:absolute;left:0;top:15px;color:var(--teal);font-weight:800}

/* ---------- Bloque de nota ---------- */
.note{background:var(--fog);border-radius:18px;padding:clamp(28px,3.4vw,46px);border:1px solid var(--line)}
.note h3{font-size:1.3rem;margin-bottom:12px}
.note p{color:var(--slate);max-width:none}
.note:has(h3){display:grid;grid-template-columns:minmax(210px,.8fr) 2fr;gap:clamp(16px,2.8vw,44px);align-items:start}
.note:has(h3) h3{margin-bottom:0}
@media(max-width:820px){.note:has(h3){display:block}.note:has(h3) h3{margin-bottom:12px}}

/* ---------- Equipo ---------- */
.person{display:grid;grid-template-columns:210px 1fr;gap:clamp(24px,3.4vw,48px);align-items:start;
  padding:clamp(36px,4vw,60px) 0;border-top:1px solid var(--line)}
.person img{width:210px;height:210px;border-radius:50%;object-fit:cover;
  filter:grayscale(1);transition:filter .4s var(--ease),transform .4s var(--ease)}
.person:hover img{filter:grayscale(0);transform:scale(1.03)}
.person .role{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:8px}
.person h3{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.025em;margin-bottom:14px}
.person p{color:var(--slate);margin-bottom:13px}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.creds span{font-size:.72rem;font-weight:800;letter-spacing:.06em;background:var(--fog);border:1px solid var(--line);
  color:var(--slate);padding:6px 13px;border-radius:100px}

/* ---------- Datos de partner ---------- */
.datacard{background:var(--navy);color:#fff;border-radius:20px;padding:clamp(30px,3.4vw,48px)}
.datacard h3{color:#fff;font-size:1.3rem;margin-bottom:6px}
.datacard .sub{color:#A9C2D6;font-size:.92rem;margin-bottom:22px}
.datacard dl{display:grid;gap:16px}
.datacard dt{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.datacard dd{font-size:1.02rem;font-weight:700;margin-top:3px}
.datacard dd a{color:#fff}
.datacard dd a:hover{color:var(--teal)}
.datacard .pic{font-size:1.7rem;letter-spacing:.02em}

/* ---------- Contacto ---------- */
.contact-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,3vw,40px);align-items:start}
.contact-side{display:grid;gap:clamp(20px,2.4vw,28px)}
.contact-form h3{font-size:1.45rem;letter-spacing:-.02em}
.contact-form .form-sub{color:var(--slate);font-size:.95rem;margin:8px 0 26px}
.contact-form .field{margin-bottom:20px}
.contact-form label{display:block;font-weight:800;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font:400 1rem 'Mulish',sans-serif;color:var(--navy);transition:border-color .2s,box-shadow .2s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(81,187,184,.18)}
.contact-form textarea{resize:vertical;min-height:150px}
.contact-form .help{margin-top:12px;background:var(--fog);border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;font-size:.88rem;color:var(--slate)}
.contact-form .help strong{color:var(--navy)}
.contact-form .help ul{margin:8px 0 0 18px}
.contact-form .help li{margin-bottom:5px}
.contact-form .help li strong{color:var(--teal-dark)}
.contact-form .form-note{margin-top:16px;font-size:.82rem;color:var(--slate)}
.dl-clean{display:grid;gap:16px;margin-top:18px}
.dl-clean dt{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-dark)}
.dl-clean dd{font-size:1.02rem;font-weight:700;margin-top:3px;color:var(--navy)}

/* ---------- CTA final ---------- */
.cta-band{background:var(--ink);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 400px at 50% 120%, rgba(81,187,184,.28), transparent 62%)}
.cta-band .container{position:relative;z-index:2}
.cta-band h2{color:#fff;max-width:22ch;margin:0 auto}
.cta-band p{color:#C6D7E6;max-width:70ch;margin:20px auto 0}
.cta-band .btn{margin-top:36px}

/* ---------- Puntos de partida (CTA) ---------- */
.starts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  margin:clamp(38px,4.5vw,56px) auto 8px;max-width:1080px;text-align:left}
.starts .start{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;
  padding:24px 24px 26px;transition:background .3s var(--ease),border-color .3s}
.starts .start:hover{background:rgba(255,255,255,.10);border-color:rgba(81,187,184,.5)}
.starts .ic{font-size:1.5rem;line-height:1.1}
.starts h3{color:#fff;font-size:1.02rem;margin-bottom:7px}
.starts p{color:#C6D7E6;font-size:.92rem;margin:0;max-width:none;line-height:1.5}

/* ---------- Footer ---------- */
footer{background:#fff;color:var(--slate);padding:clamp(56px,6vw,84px) 0 34px;font-size:.93rem}
footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,48px)}
footer h4{color:var(--navy);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px;font-weight:800}
footer a{color:var(--slate);display:block;margin-bottom:11px}
footer a:hover{color:var(--teal-dark)}
footer a.f-link{display:flex;align-items:center;gap:10px}
footer a.f-link svg{width:17px;height:17px;flex:0 0 17px;fill:currentColor;opacity:.75;transition:opacity .2s}
footer a.f-link:hover svg{opacity:1}
footer .brand-line{line-height:1.6}
footer .slogan{color:#297A78;font-weight:800;margin-top:12px;letter-spacing:.02em}
footer .legal{border-top:1px solid var(--line);margin-top:clamp(38px,4vw,56px);padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem;color:#647386}
footer .legal a{display:inline;color:#297A78;font-weight:800;margin:0}
footer .legal a:hover{color:var(--navy);text-decoration:underline}
footer .partners{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
footer .p-logo{display:block;margin:0;opacity:.92;transition:opacity .2s var(--ease),transform .2s var(--ease)}
footer .p-logo:hover{opacity:1;transform:translateY(-2px)}
footer .p-logo img{display:block}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease), transform .8s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .metric:nth-child(3n){border-right:1px solid rgba(255,255,255,.16)}
  .metric:nth-child(2n){border-right:0}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .site-header .bar,.site-header.solid .bar{height:60px}
  .brand .brand-mark,.brand .brand-txt{height:38px}
  .brand .wm{font-size:1.28rem;letter-spacing:1.1px}
  .brand .tg{font-size:.62rem;letter-spacing:2px;margin-top:4px}
  .menu{top:0;padding-top:86px}
}
@media (max-width:900px){
  .menu{
    position:fixed;inset:0 0 auto 0;top:0;padding:100px 28px 34px;background:#fff;
    flex-direction:column;align-items:flex-start;gap:6px;display:none;
    box-shadow:0 24px 60px rgba(11,35,56,.16);border-bottom:1px solid var(--line);
  }
  .menu.open{display:flex}
  .menu a{color:var(--navy) !important;font-size:1.18rem;padding:12px 0;width:100%;border-bottom:1px solid var(--line)}
  .menu a::after{display:none}
  .menu .lang,.menu .cta-link{border-radius:100px;margin-top:14px;border-bottom:0;width:auto;font-size:.95rem}
  .menu .cta-link{color:var(--ink) !important}
  .burger{display:block}
  .case-row,.case-row.flip .case-media{grid-template-columns:1fr;order:0}
  .split{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .team-strip{grid-template-columns:1fr}
  .versus{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .starts{grid-template-columns:1fr}
  .g2,.g3{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .num-item{grid-template-columns:1fr;gap:10px}
  .num-item .n{padding-top:0;grid-row:auto}
  .num-item h3{grid-column:1;grid-row:auto;margin-bottom:6px}
  .num-item p,.num-item ul,.num-item .ni-body{grid-column:1;max-width:none}
  .person{grid-template-columns:1fr}
  .person img{width:150px;height:150px}
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  body{font-size:16px}
  .g4{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .gallery img{height:auto}
  .team-strip .tp{grid-template-columns:1fr}
  .metric{border-right:0 !important}
  footer .cols{grid-template-columns:1fr}
  .hero-facts{gap:8px 22px;font-size:.76rem}
}