/* =====================================================================
   Rodrigo Martínez — Business Transformation
   Reconstrucción limpia desde cero (raíz del desarrollo)
   Sistema: mobile-first · tokens · contenedores que se ajustan al contenido
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* color (tema claro) */
  --bg:#F5F4F0;
  --bg-2:#ECEBE5;
  --panel:#FFFFFF;
  --panel-2:#F3F2EC;
  --text:#16212C;          /* tinta oscura */
  --muted:#586472;
  --faint:#727B86;
  --gold:#9A7A33;
  --gold-soft:rgba(194,163,107,.12);
  --line:rgba(16,24,34,.12);
  --line-2:rgba(16,24,34,.20);

  /* tipografía */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* escala tipográfica (compacta) */
  --fs-h1:clamp(1.75rem,1.15rem + 2.3vw,3rem);     /* 28 → 48 */
  --fs-h2:clamp(1.4rem,1.15rem + 1.3vw,2.1rem);    /* 22 → 34 */
  --fs-h3:1.125rem;                                 /* 18 */
  --fs-lead:clamp(1rem,0.96rem + 0.28vw,1.15rem);  /* 16 → 18 */
  --fs-sm:0.875rem;                                 /* 14 */
  --fs-xs:0.75rem;                                  /* 12 */

  /* espaciado (base 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* otros */
  --r:14px; --r-sm:10px; --r-pill:999px;
  --maxw:1080px;
  --gutter:clamp(18px,5vw,40px);
  --pad-section:32px;       /* se sube en desktop */
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:1rem;line-height:1.55;color:var(--text);
  background:
    radial-gradient(1100px 560px at 100% -8%,rgba(194,163,107,.06),transparent 62%),
    linear-gradient(180deg,#FFFFFF,var(--bg) 60%);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none;padding:0}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.02em;overflow-wrap:break-word}

/* textura sutil (rompe el plano "render"); fuera en móvil por performance */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width:600px){body::after{display:none}}

/* ---------- Utilidades ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--pad-section)}
.eyebrow{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:8px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.muted{color:var(--muted)}

.shead{margin-bottom:var(--s5)}
.shead h2{font-size:var(--fs-h2)}
.shead p{color:var(--muted);max-width:54ch;margin-top:var(--s3);font-size:var(--fs-lead)}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 var(--s5);
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-weight:600;font-size:var(--fs-sm);color:var(--text);
  background:transparent;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-1px);border-color:var(--gold)}
.btn--gold{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:700}
.btn--gold:hover{filter:brightness(1.06)}
.btn--ghost{background:rgba(16,24,34,.04)}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
@supports not (backdrop-filter:blur(1px)){.nav{background:rgba(255,255,255,.96)}}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:11px}
.brand__mk{width:38px;height:38px;border-radius:var(--r-sm);background:var(--panel-2);border:1px solid rgba(194,163,107,.4);display:grid;place-items:center;font-family:var(--serif);font-weight:600;color:var(--gold)}
.brand__tx b{display:block;font-size:0.95rem;font-weight:700;line-height:1.1}
.brand__tx span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.nav__links{display:none;gap:var(--s2);align-items:center}
.nav__links a{padding:0 var(--s3);min-height:40px;display:inline-flex;align-items:center;font-size:var(--fs-sm);color:var(--muted)}
.nav__links a:hover{color:var(--text)}
.nav__links .btn{margin-left:var(--s2)}

.menu{position:relative}
.menu>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 var(--s4);border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"";width:15px;height:9px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;box-sizing:border-box}
.menu[open]>summary::after{height:2px;border-bottom:0}
.menu__panel{position:absolute;right:0;top:54px;min-width:210px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);padding:var(--s2);display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.menu__panel a{padding:12px var(--s3);min-height:44px;display:flex;align-items:center;border-radius:var(--r-sm);color:var(--muted)}
.menu__panel a:hover{background:var(--panel-2);color:var(--text)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{padding-block:var(--s7) var(--s6)}
.hero__grid{display:grid;gap:var(--s6)}
.hero h1{font-size:var(--fs-h1);margin:var(--s4) 0}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero__lead{color:var(--muted);font-size:var(--fs-lead);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.hero__media{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);min-height:240px;aspect-ratio:4/3;
  background:var(--panel) var(--photo,none) center 28%/cover no-repeat}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,11,18,.6))}
.hero__media figcaption{position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--mono);font-size:11.5px;color:#e3edfb;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* franja de stats — inline, sin cajas vacías */
.stats{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.stat b{display:block;font-family:var(--serif);font-weight:600;font-size:1.6rem;letter-spacing:-.02em;line-height:1}
.stat span{color:var(--muted);font-size:var(--fs-sm);margin-top:2px;display:block}

/* =====================================================================
   MARCAS
   ===================================================================== */
.brands{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3) var(--s4);align-items:center;
  border-block:1px solid var(--line);padding-block:var(--s4)}
.brands span{font-family:var(--serif);font-size:clamp(.95rem,3.4vw,1.3rem);color:var(--muted);text-align:center;opacity:.78}
.note{color:var(--faint);font-size:var(--fs-xs);font-style:italic;margin-top:var(--s4);max-width:64ch}

/* marcas agrupadas por sector */
.sectors{border-top:1px solid var(--line)}
.sector{display:grid;gap:6px;padding-block:var(--s4);border-bottom:1px solid var(--line)}
.sector__h{display:flex;flex-direction:column;gap:3px}
.sector__k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.sector__disc{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sector__brands{font-family:var(--serif);color:var(--muted);font-size:clamp(1.05rem,2.6vw,1.3rem);line-height:1.3;margin:0}
@media (min-width:760px){
  .sector{grid-template-columns:190px 1fr;gap:var(--s5);align-items:baseline}
}

/* =====================================================================
   CAPACIDADES — tarjetas compactas (sin hueco muerto)
   ===================================================================== */
.cap{display:grid;grid-template-columns:1fr;gap:var(--s3)}
.cap__item{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);
  transition:transform .2s ease,border-color .2s ease,background .2s ease}
.cap__item::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--gold);transition:width .3s ease}
.cap__item:hover{transform:translateY(-2px);border-color:rgba(194,163,107,.35);background:var(--panel-2)}
.cap__item:hover::before{width:36px}
.cap__n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold)}
.cap__item h3{font-size:var(--fs-h3);margin:var(--s2) 0 var(--s1)}
.cap__item p{color:var(--muted);font-size:var(--fs-sm);max-width:42ch}

/* =====================================================================
   CASOS
   ===================================================================== */
.cases{display:grid;gap:var(--s4)}
.case{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.case__head{padding:var(--s5);border-bottom:1px solid var(--line);background:linear-gradient(135deg,var(--gold-soft),transparent 70%)}
.case__head .cap__n{color:var(--gold)}
.case__head h3{font-size:1.5rem;margin:var(--s2) 0}
.case__head p{color:var(--muted);font-size:var(--fs-sm)}
.case__body{padding:var(--s5);display:grid;gap:var(--s4)}
.case__row{display:grid;grid-template-columns:84px 1fr;gap:var(--s4);align-items:start}
.case__row dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding-top:2px}
.case__row dd{font-size:var(--fs-sm)}

/* =====================================================================
   MÉTRICAS — strip compacto
   ===================================================================== */
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.metric{background:var(--panel);padding:var(--s5) var(--s4)}
.metric b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);letter-spacing:-.02em;line-height:1}
.metric span{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:6px}

/* =====================================================================
   ECOSISTEMA
   ===================================================================== */
.eco{display:grid;gap:var(--s4)}
.eco__item{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:var(--s5)}
.eco__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.eco__item h3{font-size:1.4rem;margin:var(--s2) 0 var(--s2)}
.eco__item p{color:var(--muted);font-size:var(--fs-sm);max-width:48ch}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.chip{font-size:var(--fs-xs);color:var(--muted);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 10px}

/* =====================================================================
   SERVICIOS
   ===================================================================== */
.svc{display:grid;gap:var(--s4)}
.svc__item{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.svc__item--feat{border-color:rgba(194,163,107,.4);background:linear-gradient(180deg,var(--gold-soft),transparent 60%)}
.svc__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.svc__item h3{font-size:1.25rem}
.svc__price{font-family:var(--serif);font-weight:600;font-size:1.15rem}
.svc__item ul{display:grid;gap:var(--s2)}
.svc__item li{font-size:var(--fs-sm);color:var(--muted);padding-left:18px;position:relative}
.svc__item li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border:1.5px solid var(--gold);border-radius:50%}
.svc__item .btn{margin-top:auto}

/* =====================================================================
   ACORDEÓN (control nativo, accesible, mobile-first)
   ===================================================================== */
.acc-list{display:grid;gap:var(--s3)}
.acc{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;transition:border-color .2s ease}
.acc[open]{border-color:rgba(194,163,107,.32)}
.acc>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);min-height:56px}
.acc>summary::-webkit-details-marker{display:none}
.acc__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.acc__t .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.acc__t strong{font-family:var(--serif);font-weight:600;font-size:1.1rem;letter-spacing:-.01em}
.acc__t .sub{color:var(--muted);font-size:var(--fs-sm)}
.acc__sign{width:28px;height:28px;flex:none;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-family:var(--serif);font-size:1.2rem;line-height:1;transition:transform .25s ease}
.acc[open] .acc__sign{transform:rotate(45deg)}
.acc__body{padding:0 var(--s5) var(--s5);color:var(--muted);font-size:var(--fs-sm);line-height:1.55}
.acc__body>:first-child{margin-top:0}
.acc__body dl{display:grid;gap:var(--s3);margin:0}
.acc__body ul{display:grid;gap:var(--s2);margin:0 0 var(--s4)}
.acc__body ul li{position:relative;padding-left:18px;color:var(--muted)}
.acc__body ul li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border:1.5px solid var(--gold);border-radius:50%}
.acc__body .chips{margin-top:var(--s3)}
@media (min-width:880px){.acc-list{max-width:780px}}

/* =====================================================================
   CITA
   ===================================================================== */
.quote{border-block:1px solid var(--line);padding-block:var(--s7);text-align:center}
.quote .rule{width:36px;height:2px;background:var(--gold);margin:0 auto var(--s5)}
.quote p{font-family:var(--serif);font-weight:600;font-size:clamp(1.4rem,1.1rem + 1.6vw,2.2rem);line-height:1.2;letter-spacing:-.02em;max-width:24ch;margin:0 auto}
.quote em{font-style:italic;color:var(--gold)}

/* =====================================================================
   SOBRE / CREDENCIALES
   ===================================================================== */
.about{display:grid;gap:var(--s6)}
.about__media{border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);aspect-ratio:4/5;position:relative;
  background:var(--panel) var(--photo,none) center 35%/cover no-repeat}
.about__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(7,11,18,.55))}
.about__media figcaption{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:11.5px;color:#e3edfb;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.about h2{font-size:var(--fs-h2);margin:var(--s3) 0}
.about p{color:var(--muted);margin-bottom:var(--s3)}
.about b{color:var(--text)}

/* =====================================================================
   CTA FINAL
   ===================================================================== */
.cta{border:1px solid rgba(194,163,107,.3);border-radius:var(--r);padding:var(--s7) var(--s5);text-align:center;
  background:radial-gradient(700px 300px at 80% 0,var(--gold-soft),transparent 60%),var(--panel)}
.cta h2{font-size:var(--fs-h2);max-width:18ch;margin:0 auto var(--s3)}
.cta p{color:var(--muted);max-width:50ch;margin:0 auto var(--s5);font-size:var(--fs-lead)}
.cta__btns{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center}

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{border-top:1px solid var(--line);padding-block:var(--s6);color:var(--muted);font-size:var(--fs-sm)}
.foot__in{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;align-items:center}
.foot .mono{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}

/* =====================================================================
   REVEAL
   ===================================================================== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* =====================================================================
   REFINAMIENTO PROFESIONAL (UX review + benchmark ejecutivo)
   ===================================================================== */
:root{
  --bg:#0B1622;--bg-2:#0E1C2B;--panel:#12202F;--panel-2:#16273A;
  --text:#ECEAE2;--muted:#A9B2BB;--faint:#9AA3AD;
  --gold:#C2A36B;--gold-soft:rgba(194,163,107,.14);--gold-btn:#C2A36B;
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.16);--hair:rgba(255,255,255,.07);
}
body{background:radial-gradient(1100px 560px at 100% -8%,rgba(194,163,107,.06),transparent 62%),linear-gradient(180deg,#0B1622,#091320 88%)}
.nav{background:rgba(8,15,24,.82)}
@supports not (backdrop-filter:blur(1px)){.nav{background:rgba(8,15,24,.96)}}
html{scroll-padding-top:72px}
section[id]{scroll-margin-top:72px}
h1,h2,h3{font-optical-sizing:auto}
h1{text-wrap:balance}
h2{text-wrap:balance}
.hero__lead,.shead p,.cta p{text-wrap:pretty}
/* oro: tono que pasa AA en texto pequeño */
.eyebrow,.sector__k,.cap__n,.eco__k,.svc__k,.acc__t .k{color:var(--gold)}
/* botón oro con contraste AA (texto oscuro sobre oro) */
.btn--gold,.nav__links .btn--gold{background:var(--gold);border-color:var(--gold);color:#0B1622}
.btn--ghost{background:transparent;border-color:var(--line-2)}
.btn--ghost:hover{background:rgba(255,255,255,.05);border-color:var(--gold)}
/* sombra para el menú en tema oscuro */
.menu__panel{box-shadow:0 18px 44px rgba(0,0,0,.5)}
/* fotos: caption legible */
.hero__media::after,.about__media::after{background:linear-gradient(180deg,transparent 45%,rgba(7,11,18,.72))}
.hero__media figcaption,.about__media figcaption{color:#fff;font-weight:500}
/* ritmo de lectura */
.acc__body,.case__row dd{line-height:1.6}
/* acordeón: signo óptico + foco + sticky en móvil */
.acc__sign{font-size:1.1rem;line-height:0;padding-bottom:1px}
.acc>summary:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
@media (max-width:600px){.acc[open]>summary{position:sticky;top:64px;z-index:2;background:var(--panel);border-bottom:1px solid var(--hair)}}
/* textura sutil sobre fondo oscuro */
body::after{opacity:.05}
/* stats: números como ancla visual (prueba dura, se leen primero) */
.stat b{font-size:2.15rem;color:var(--gold);letter-spacing:-.02em}
/* eyebrow del hero: soporte, no compite con el H1 */
.hero .eyebrow{opacity:.9;font-size:11px;letter-spacing:.14em;line-height:1.7}
/* fotos como <img> real (SEO + alt), llenando el contenedor bajo el overlay */
.hero__media img,.about__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;border:0}
.about__media img{object-position:center 35%}
/* selector de idioma */
.lang{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.lang a{padding:4px 6px;border-radius:6px}
.lang a[aria-current="true"]{color:var(--gold);font-weight:600}
.lang a:hover{color:var(--text)}

/* =====================================================================
   RESPONSIVE (mobile-first → escala)
   ===================================================================== */
@media (min-width:560px){
  .cap{grid-template-columns:1fr 1fr}
  .metrics{grid-template-columns:repeat(3,1fr)}
  .eco,.svc,.cases{grid-template-columns:1fr 1fr}
}
@media (min-width:880px){
  :root{--pad-section:40px}
  .nav__links{display:flex}
  .menu{display:none}
  .hero{padding-block:var(--s7) var(--s6)}
  .hero__grid{grid-template-columns:1.25fr 1fr;align-items:stretch;gap:var(--s6)}
  .hero h1{margin-top:0}
  .hero__media{aspect-ratio:auto;height:100%;min-height:340px}
  .hero>.wrap{align-items:stretch}
  .brands{grid-template-columns:repeat(6,1fr)}
  .cap{grid-template-columns:repeat(4,1fr)}
  .svc{grid-template-columns:repeat(4,1fr)}
  .about{grid-template-columns:0.8fr 1.2fr;align-items:center;gap:var(--s7)}
  .case{display:grid;grid-template-columns:0.85fr 1.15fr}
  .case__head{border-bottom:0;border-right:1px solid var(--line)}
}