/* ================================================================
   SINTRAHARINA.CSS — Design System v2.0
   TIC-001: Cero Esquinas — obligatorio en TODO elemento
   Branding: Navy #0d1a3a · Gold #c9a227 · Green #1B5E32
   Tipografía: Playfair Display (display) + Nunito (body)
   OLAIX · COT-OLAIX-2026-003
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,700&family=Nunito:wght@300;400;500;600;700;800;900&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Brand */
  --navy:        #0d1a3a;
  --navy-light:  #162952;
  --navy-mid:    #1e3a6e;
  --navy-dark:   #080f21;
  --gold:        #c9a227;
  --gold-light:  #e6bc3a;
  --gold-pale:   #f5dea3;
  --gold-dark:   #9e7e1b;
  --green:       #1B5E32;
  --green-light: #2e7d4f;
  --green-pale:  #a5d6b5;
  --white:       #ffffff;
  --off-white:   #f8f5ee;

  /* Neutrals */
  --gray-50:  #f9f8f5;
  --gray-100: #efede6;
  --gray-200: #dedad0;
  --gray-400: #9e9a8e;
  --gray-600: #5e5a50;
  --gray-800: #2c2a24;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Nunito', system-ui, sans-serif;

  /* Scale */
  --t-2xs: 0.65rem;   --t-xs: 0.75rem;   --t-sm: 0.875rem;
  --t-md:  1rem;      --t-lg: 1.125rem;   --t-xl: 1.25rem;
  --t-2xl: 1.5rem;    --t-3xl: 1.875rem;  --t-4xl: 2.25rem;
  --t-5xl: 3rem;      --t-6xl: 3.75rem;   --t-7xl: 4.5rem;
  --t-8xl: 6rem;

  /* TIC-001 — Radios obligatorios */
  --r-pill:  50px;
  --r-card:  16px;
  --r-img:   12px;
  --r-input: 12px;
  --r-nav:   20px;
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    20px;
  --r-xl:    28px;

  /* Spacing */
  --sp-1:2px; --sp-2:4px; --sp-3:8px; --sp-4:12px; --sp-5:16px;
  --sp-6:20px; --sp-8:24px; --sp-10:32px; --sp-12:40px;
  --sp-16:56px; --sp-20:72px; --sp-24:96px; --sp-32:128px;

  /* Shadows */
  --sh-sm:   0 2px 10px rgba(8,15,33,.14);
  --sh-md:   0 4px 24px rgba(8,15,33,.18);
  --sh-lg:   0 8px 48px rgba(8,15,33,.24);
  --sh-xl:   0 16px 72px rgba(8,15,33,.30);
  --sh-gold: 0 0 24px rgba(201,162,39,.28);
  --sh-g2:   0 8px 40px rgba(201,162,39,.45);

  /* Glass */
  --glass:   rgba(255,255,255,.05);
  --glass-b: rgba(255,255,255,.09);
  --gold-g:  rgba(201,162,39,.08);
  --gold-b:  rgba(201,162,39,.22);

  /* Transitions */
  --tr-f: 120ms cubic-bezier(.4,0,.2,1);
  --tr:   240ms cubic-bezier(.4,0,.2,1);
  --tr-s: 400ms cubic-bezier(.4,0,.2,1);
  --tr-spring: 350ms cubic-bezier(.34,1.56,.64,1);
}

/* ─── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 60%, #0f2240 100%);
  background-attachment: fixed;
  color: var(--white);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; border-radius: var(--r-img); }
a { color: inherit; }

/* ─── LAYOUT ──────────────────────────────────────────────── */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-6); }
.container-sm { max-width: 820px; }
.section { padding: var(--sp-24) 0; }
.section-sm { padding: var(--sp-16) 0; }

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
.disp-1 { font-family:var(--font-display); font-size:clamp(2.8rem,7vw,var(--t-8xl)); font-weight:900; line-height:1.04; letter-spacing:-.03em; }
.disp-2 { font-family:var(--font-display); font-size:clamp(2.2rem,5vw,var(--t-7xl)); font-weight:700; line-height:1.07; letter-spacing:-.025em; }
.h1     { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,var(--t-5xl)); font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.h2     { font-family:var(--font-display); font-size:clamp(1.4rem,3vw,var(--t-3xl)); font-weight:600; line-height:1.25; }
.h3     { font-family:var(--font-display); font-size:clamp(1.1rem,2vw,var(--t-xl)); font-weight:600; }
.sub    { font-size:var(--t-lg); font-weight:300; line-height:1.7; color:rgba(255,255,255,.72); }
.label  { font-size:var(--t-xs); font-weight:800; letter-spacing:2px; text-transform:uppercase; }

.text-gold  { color:var(--gold); }
.text-green { color:var(--green-pale); }
.text-muted { color:rgba(255,255,255,.55); }

/* ─── BUTTONS — TIC-001 pill ─────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:14px 36px; border-radius:var(--r-pill);
  font-family:var(--font-body); font-size:var(--t-md); font-weight:700;
  cursor:pointer; border:2px solid transparent; text-decoration:none;
  transition:background var(--tr), border-color var(--tr), box-shadow var(--tr), transform var(--tr-spring);
  white-space:nowrap; user-select:none;
}
.btn:disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn-primary  { background:var(--gold); color:var(--navy-dark); border-color:var(--gold); }
.btn-primary:hover { background:var(--gold-light); border-color:var(--gold-light); box-shadow:var(--sh-g2); transform:translateY(-3px); }
.btn-secondary { background:transparent; color:var(--white); border-color:rgba(255,255,255,.5); }
.btn-secondary:hover { background:rgba(255,255,255,.08); border-color:var(--white); transform:translateY(-3px); }
.btn-navy  { background:var(--navy); color:var(--gold); border-color:var(--gold); }
.btn-navy:hover { background:var(--navy-light); box-shadow:var(--sh-g2); transform:translateY(-3px); }
.btn-green { background:var(--green); color:var(--white); border-color:var(--green); }
.btn-green:hover { background:var(--green-light); transform:translateY(-3px); }
.btn-ghost { background:var(--gold-g); color:var(--gold); border-color:var(--gold-b); }
.btn-ghost:hover { background:rgba(201,162,39,.15); border-color:var(--gold); box-shadow:var(--sh-gold); transform:translateY(-3px); }
.btn-danger { background:rgba(192,57,43,.15); color:#f87171; border-color:rgba(192,57,43,.4); }
.btn-danger:hover { background:rgba(192,57,43,.25); transform:translateY(-2px); }
.btn-sm  { padding:10px 24px; font-size:var(--t-sm); }
.btn-lg  { padding:18px 48px; font-size:var(--t-lg); }
.btn-xl  { padding:20px 56px; font-size:var(--t-xl); }
.btn-full { width:100%; }

/* ─── CARDS ───────────────────────────────────────────────── */
.card {
  background:var(--glass); border:1px solid var(--gold-b);
  border-radius:var(--r-card); padding:var(--sp-8);
  transition:background var(--tr), border-color var(--tr), transform var(--tr-spring), box-shadow var(--tr);
}
.card:hover { background:rgba(255,255,255,.08); border-color:rgba(201,162,39,.4); transform:translateY(-6px); box-shadow:var(--sh-lg),var(--sh-gold); }
.card-navy  { background:var(--navy-light); }
.card-flat  { transition:none; }
.card-flat:hover { transform:none; }

/* ─── FORMS — TIC-001 r-input ─────────────────────────────── */
.form-group  { display:flex; flex-direction:column; gap:6px; }
.form-label  { font-size:var(--t-sm); font-weight:700; color:rgba(255,255,255,.7); }
.form-input, .form-select, .form-textarea {
  width:100%; padding:14px 20px; outline:none; appearance:none;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(201,162,39,.2);
  border-radius:var(--r-input); color:var(--white);
  font-family:var(--font-body); font-size:16px; /* >= 16px previene zoom auto iOS */
  transition:border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.form-input::placeholder, .form-textarea::placeholder { color:rgba(255,255,255,.35); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--gold); background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(201,162,39,.14);
}
.form-textarea { resize:vertical; min-height:120px; padding-top:12px; }
.form-select {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 6 5-6' stroke='%23c9a227' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px;
  padding-right:44px;
}
.form-error { font-size:var(--t-sm); color:#f87171; font-weight:600; }
.input-icon-wrap { position:relative; }
.input-icon-wrap .form-input { padding-left:48px; }
.input-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); opacity:.5; pointer-events:none; font-size:1rem; }
.pass-toggle { position:absolute; right:16px; top:50%; transform:translateY(-50%); background:none; border:none; color:rgba(255,255,255,.4); cursor:pointer; font-size:1rem; transition:color var(--tr-f); }
.pass-toggle:hover { color:var(--gold); }

/* ─── BADGES ──────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:4px 14px; border-radius:var(--r-pill); font-size:var(--t-xs); font-weight:800; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; }
.badge-gold  { background:rgba(201,162,39,.12); color:var(--gold-light); border:1px solid rgba(201,162,39,.3); }
.badge-green { background:rgba(27,94,50,.18); color:#6fcf97; border:1px solid rgba(46,125,79,.4); }
.badge-navy  { background:rgba(22,41,82,.6); color:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.15); }
.badge-red   { background:rgba(192,57,43,.15); color:#f87171; border:1px solid rgba(192,57,43,.4); }
.badge-blue  { background:rgba(21,101,192,.15); color:#90caf9; border:1px solid rgba(21,101,192,.35); }

/* ─── ALERTS ──────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:var(--r-md); font-size:var(--t-sm); font-weight:600; border:1px solid; display:flex; align-items:flex-start; gap:8px; }
.alert-error   { background:rgba(192,57,43,.15); border-color:rgba(192,57,43,.35); color:#f87171; }
.alert-success { background:rgba(27,94,50,.2); border-color:rgba(46,125,79,.4); color:#6fcf97; }
.alert-info    { background:rgba(21,101,192,.15); border-color:rgba(21,101,192,.35); color:#90caf9; }
.alert-warn    { background:rgba(201,162,39,.12); border-color:rgba(201,162,39,.3); color:var(--gold-light); }

/* ─── DIVIDERS ────────────────────────────────────────────── */
.div-gold { width:56px; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-dark)); border-radius:2px; }
.div-gold.center { margin-left:auto; margin-right:auto; }
.div-line { height:1px; background:var(--gold-b); }

/* ─── NAVBAR — TIC-001 nav-radius ────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:999;
  padding:16px 24px; transition:all var(--tr);
}
.navbar.scrolled {
  background:rgba(8,15,33,.94); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--gold-b);
  border-radius:0 0 var(--r-nav) var(--r-nav);
  padding:12px 24px; box-shadow:var(--sh-md);
}
.navbar-inner {
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.navbar-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.navbar-logo img { height:44px; width:auto; border-radius:var(--r-sm); }
.navbar-logo-text { font-family:var(--font-display); font-size:var(--t-sm); font-weight:700; color:var(--white); line-height:1.2; }
.navbar-logo-text span { display:block; font-size:var(--t-2xs); letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-family:var(--font-body); font-weight:800; }
.navbar-links { display:flex; align-items:center; gap:28px; list-style:none; }
.navbar-links a {
  color:rgba(255,255,255,.72); text-decoration:none; font-size:var(--t-sm); font-weight:600;
  letter-spacing:.3px; transition:color var(--tr-f); position:relative; padding-bottom:2px;
}
.navbar-links a::after {
  content:''; position:absolute; bottom:-3px; left:0; right:0;
  height:2px; background:var(--gold); border-radius:2px;
  transform:scaleX(0); transition:transform var(--tr);
}
.navbar-links a:hover, .navbar-links a.active { color:var(--white); }
.navbar-links a.active::after, .navbar-links a:hover::after { transform:scaleX(1); }
.navbar-links a.active { color:var(--gold); }
.navbar-actions { display:flex; gap:10px; flex-shrink:0; }
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.hamburger span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:all var(--tr); }

/* ─── GLASS ───────────────────────────────────────────────── */
.glass { background:var(--glass); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-b); border-radius:var(--r-card); }

/* ─── STAT ────────────────────────────────────────────────── */
.stat-num  { font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,3rem); font-weight:900; color:var(--gold); line-height:1; }
.stat-lbl  { font-size:var(--t-sm); font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.55); margin-top:6px; }

/* ─── PAGE HERO ───────────────────────────────────────────── */
.page-hero {
  padding: 140px 0 80px;
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy-light) 100%);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c9a227' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.page-hero-content { position:relative; z-index:1; }

/* ─── SPINNER ─────────────────────────────────────────────── */
.spinner { width:24px; height:24px; border:3px solid rgba(201,162,39,.2); border-top-color:var(--gold); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── SCROLL ANIMATIONS ───────────────────────────────────── */
.fade-up { opacity:0; transform:translateY(32px); transition:opacity .65s ease,transform .65s ease; }
.fade-up.in { opacity:1; transform:translateY(0); }
.slide-l { opacity:0; transform:translateX(-40px); transition:opacity .65s ease,transform .65s ease; }
.slide-l.in { opacity:1; transform:translateX(0); }
.slide-r { opacity:0; transform:translateX(40px); transition:opacity .65s ease,transform .65s ease; }
.slide-r.in { opacity:1; transform:translateX(0); }

/* ─── FOOTER ──────────────────────────────────────────────── */
.footer { background:var(--navy-dark); border-top:1px solid var(--gold-b); padding:64px 0 32px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-logo img { height:44px; margin-bottom:16px; }
.footer-desc { font-size:var(--t-sm); color:rgba(255,255,255,.45); line-height:1.7; margin-bottom:20px; }
.footer-heading { font-size:var(--t-xs); font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links a { color:rgba(255,255,255,.45); text-decoration:none; font-size:var(--t-sm); font-weight:500; transition:color var(--tr-f); }
.footer-links a:hover { color:var(--white); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.07); padding-top:20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-copy { font-size:var(--t-xs); color:rgba(255,255,255,.25); }
.social-link { width:42px; height:42px; background:var(--glass); border:1px solid var(--glass-b); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:1.15rem; transition:all var(--tr); }
.social-link:hover { background:var(--gold-g); border-color:var(--gold); transform:translateY(-2px); box-shadow:0 4px 14px rgba(201,162,39,.25); }

/* ─── GRAIN OVERLAY ───────────────────────────────────────── */
.grain::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.025; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:300px 300px; }

/* ─── PORTAL SIDEBAR ──────────────────────────────────────── */
.portal-layout { display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.sidebar {
  background:var(--navy-dark); border-right:1px solid var(--gold-b);
  padding:32px 20px; display:flex; flex-direction:column; gap:8px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-logo { padding:0 8px 24px; border-bottom:1px solid var(--gold-b); margin-bottom:8px; }
.sidebar-logo img { height:38px; }
.sidebar-logo-txt { font-family:var(--font-display); font-size:var(--t-sm); font-weight:700; margin-top:8px; }
.sidebar-logo-txt span { display:block; font-size:var(--t-2xs); letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-family:var(--font-body); }
.sidebar-link {
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-radius:var(--r-md); color:rgba(255,255,255,.6); text-decoration:none;
  font-size:var(--t-sm); font-weight:600; transition:all var(--tr);
}
.sidebar-link:hover { background:var(--glass); color:var(--white); }
.sidebar-link.active { background:var(--gold-g); color:var(--gold); border:1px solid var(--gold-b); }
.sidebar-section { font-size:var(--t-2xs); font-weight:800; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.25); padding:16px 14px 6px; }
.portal-main { padding:40px 48px; background:rgba(13,26,58,.4); }
.portal-main-header { margin-bottom:32px; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi-card { background:var(--navy-light); border:1px solid var(--gold-b); border-radius:var(--r-card); padding:20px; }
.kpi-val  { font-family:var(--font-display); font-size:var(--t-3xl); font-weight:900; color:var(--gold); }
.kpi-lbl  { font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.5); margin-top:4px; }
.kpi-sub  { font-size:var(--t-xs); color:rgba(255,255,255,.35); margin-top:2px; }

/* ─── TABLE ───────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:var(--r-card); border:1px solid var(--gold-b); }
.table { width:100%; border-collapse:collapse; }
.table th { background:var(--navy-light); padding:12px 16px; text-align:left; font-size:var(--t-xs); font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--gold); border-bottom:1px solid var(--gold-b); white-space:nowrap; }
.table td { padding:14px 16px; font-size:var(--t-sm); border-bottom:1px solid rgba(255,255,255,.05); color:rgba(255,255,255,.85); }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:rgba(255,255,255,.03); }

/* ─── TIMELINE ────────────────────────────────────────────── */
.timeline { position:relative; padding-left:40px; }
.timeline::before { content:''; position:absolute; left:16px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--gold),var(--gold-dark)); }
.tl-item { position:relative; margin-bottom:48px; }
.tl-item::before { content:''; position:absolute; left:-31px; top:6px; width:14px; height:14px; background:var(--gold); border-radius:50%; border:3px solid var(--navy); box-shadow:0 0 0 3px var(--gold-dark); }
.tl-year { font-size:var(--t-xs); font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.tl-title { font-family:var(--font-display); font-size:var(--t-xl); font-weight:700; margin-bottom:8px; }
.tl-desc { font-size:var(--t-sm); color:rgba(255,255,255,.65); line-height:1.75; }

/* ─── ACCORDION (FAQ) ─────────────────────────────────────── */
.accordion-item { border-bottom:1px solid var(--gold-b); }
.accordion-q {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:20px 0; background:none; border:none;
  color:var(--white); font-family:var(--font-body); font-size:var(--t-md); font-weight:700;
  cursor:pointer; text-align:left; transition:color var(--tr-f);
}
.accordion-q:hover { color:var(--gold); }
.accordion-q .icon { font-size:1.2rem; transition:transform var(--tr); flex-shrink:0; }
.accordion-q.open .icon { transform:rotate(45deg); color:var(--gold); }
.accordion-a { overflow:hidden; max-height:0; transition:max-height .4s ease, padding .3s ease; }
.accordion-a.open { max-height:500px; }
.accordion-a-inner { padding:0 0 20px; color:rgba(255,255,255,.68); line-height:1.8; font-size:var(--t-sm); }

/* ─── GALLERY ─────────────────────────────────────────────── */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery-item { position:relative; border-radius:var(--r-card); overflow:hidden; cursor:pointer; aspect-ratio:4/3; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform var(--tr-s); }
.gallery-item:hover img { transform:scale(1.06); }
.gallery-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(8,15,33,.8),transparent); opacity:0; transition:opacity var(--tr); display:flex; align-items:flex-end; padding:16px; }
.gallery-item:hover .gallery-overlay { opacity:1; }

/* ─── LIGHTBOX ────────────────────────────────────────────── */
.lightbox { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; animation:fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.lightbox-img { max-width:90vw; max-height:90vh; border-radius:var(--r-card); box-shadow:var(--sh-xl); }
.lightbox-close { position:fixed; top:24px; right:24px; background:none; border:none; color:var(--white); font-size:2rem; cursor:pointer; z-index:1; }

/* ─── DANIELA WIDGET ──────────────────────────────────────── */
.daniela-trigger { position:fixed; bottom:24px; left:24px; z-index:9000; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.daniela-fab { width:64px; height:64px; background:var(--gold); border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:var(--sh-g2); transition:all var(--tr-spring); position:relative; }
.daniela-fab:hover { transform:scale(1.1); background:var(--gold-light); }
.daniela-pulse { position:absolute; inset:0; border-radius:50%; background:var(--gold); opacity:.35; animation:pulse 2s ease-out infinite; }
@keyframes pulse { 0% { transform:scale(1); opacity:.35; } 100% { transform:scale(1.9); opacity:0; } }
.daniela-tip { background:var(--navy-light); border:1px solid var(--gold-b); border-radius:var(--r-pill); padding:8px 18px; font-size:var(--t-sm); font-weight:700; white-space:nowrap; box-shadow:var(--sh-md); animation:tipIn .3s ease; }
@keyframes tipIn { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } }
.daniela-window { position:fixed; bottom:100px; left:24px; width:370px; max-height:500px; background:var(--navy-light); border:1px solid var(--gold-b); border-radius:var(--r-xl); box-shadow:var(--sh-xl),var(--sh-gold); display:flex; flex-direction:column; z-index:9000; overflow:hidden; animation:wUp .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes wUp { from { opacity:0; transform:translateY(20px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }
.daniela-hdr { padding:14px 16px; background:linear-gradient(135deg,var(--navy-dark),var(--navy)); border-bottom:1px solid var(--gold-b); display:flex; align-items:center; gap:12px; }
.daniela-av { width:38px; height:38px; background:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.daniela-name { font-weight:800; font-size:var(--t-sm); }
.daniela-status { font-size:var(--t-xs); color:var(--green-pale); font-weight:600; }
.daniela-x { margin-left:auto; background:none; border:none; color:rgba(255,255,255,.4); cursor:pointer; font-size:1.2rem; border-radius:var(--r-sm); padding:2px; transition:color var(--tr-f); }
.daniela-x:hover { color:var(--white); }
.daniela-msgs { flex:1; padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; scrollbar-width:thin; scrollbar-color:var(--gold-b) transparent; }
.msg { max-width:88%; padding:10px 14px; border-radius:var(--r-card); font-size:var(--t-sm); line-height:1.55; }
.msg-bot { background:rgba(255,255,255,.07); border:1px solid var(--glass-b); align-self:flex-start; border-bottom-left-radius:var(--r-sm); }
.msg-user { background:var(--gold); color:var(--navy-dark); align-self:flex-end; font-weight:600; border-bottom-right-radius:var(--r-sm); }
.msg-typing { display:flex; gap:4px; padding:10px 14px; align-self:flex-start; }
.msg-typing span { width:7px; height:7px; background:var(--gold); border-radius:50%; animation:typing 1.2s ease-in-out infinite; }
.msg-typing span:nth-child(2) { animation-delay:.2s; }
.msg-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes typing { 0%,80%,100% { transform:scale(.8); opacity:.5; } 40% { transform:scale(1.1); opacity:1; } }
.daniela-input-row { padding:10px 12px; border-top:1px solid var(--glass-b); display:flex; gap:8px; }
.daniela-input { flex:1; background:rgba(255,255,255,.07); border:1px solid var(--glass-b); border-radius:var(--r-pill); padding:9px 16px; color:var(--white); font-size:var(--t-sm); font-family:var(--font-body); outline:none; transition:border-color var(--tr); }
.daniela-input:focus { border-color:var(--gold); }
.daniela-send { width:38px; height:38px; background:var(--gold); border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--navy-dark); font-size:.95rem; flex-shrink:0; transition:all var(--tr-spring); }
.daniela-send:hover { transform:scale(1.12); background:var(--gold-light); }

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:1100px) {
  .portal-layout { grid-template-columns:220px 1fr; }
  .portal-main { padding:32px 28px; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:768px) {
  .navbar-links, .navbar-actions { display:none; }
  .hamburger { display:flex; }
  .navbar-links.open { display:flex; flex-direction:column; position:fixed; inset:0; top:72px; background:rgba(8,15,33,.97); padding:24px; gap:8px; z-index:998; }
  .navbar-links.open a { font-size:var(--t-lg); padding:12px 0; }
  .navbar-links.open + .navbar-actions { display:flex; position:fixed; bottom:32px; left:24px; right:24px; flex-direction:column; z-index:999; }
  .portal-layout { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .portal-main { padding:24px 16px; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr; }
  .daniela-window { width:calc(100vw - 32px); left:16px; }
  .section { padding:var(--sp-16) 0; }
}
@media (max-width:480px) {
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
}
/* ═════ BEGIN · Daniela markdown styles · 24abr2026 ═════ */
.msg-bot { line-height:1.55; }
.msg-bot p { margin:0 0 8px; }
.msg-bot p:last-child { margin-bottom:0; }
.msg-bot strong { color:var(--gold); font-weight:700; }
.msg-bot em { color:rgba(255,255,255,.92); font-style:italic; }
.msg-bot a { color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.msg-bot a:hover { color:var(--gold-light); }
.msg-bot br { line-height:1.2; }
/* ═════ END · Daniela markdown styles ═════ */

/* ═════ BEGIN · Logos redes sociales · dorado metálico con shimmer · v2 · 26may2026 ═════ */
.social-gold {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 30% 30%, rgba(245,217,122,.18) 0%, rgba(201,168,76,.08) 45%, transparent 70%);
  border: 1px solid rgba(245, 217, 122, .35);
  box-shadow: 0 0 18px rgba(201, 168, 76, .35), inset 0 0 12px rgba(245, 217, 122, .15);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s;
  overflow: hidden;
}

/* SVG con relleno metálico animado */
.social-gold svg {
  position: relative; z-index: 2;
  width: 26px; height: 26px;
  fill: url(#goldMetalGradient);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)) drop-shadow(0 0 4px rgba(245,217,122,.4));
  animation: socialGoldShine 4s ease-in-out infinite;
}

/* Fallback: si el SVG no usa el gradiente (browsers viejos), color base dorado */
.social-gold svg path { fill: inherit; }

@keyframes socialGoldShine {
  0%, 100% { filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)) drop-shadow(0 0 4px rgba(245,217,122,.4)) brightness(1); }
  50%      { filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(255,235,170,.85)) brightness(1.3); }
}

/* Shimmer band: cruza el icono diagonalmente cada 3s */
.social-gold::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 60%;
  height: 200%;
  background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%, transparent 100%);
  transform: rotate(20deg);
  pointer-events: none;
  z-index: 3;
  animation: socialShimmer 3.5s ease-in-out infinite;
}
@keyframes socialShimmer {
  0%       { left: -150%; }
  60%, 100%{ left: 150%; }
}

/* Stagger: cada icono arranca el shimmer en un momento distinto para que parezcan "vivos" */
.social-row .social-gold:nth-child(1)::after { animation-delay: 0s; }
.social-row .social-gold:nth-child(2)::after { animation-delay: .5s; }
.social-row .social-gold:nth-child(3)::after { animation-delay: 1s; }
.social-row .social-gold:nth-child(4)::after { animation-delay: 1.5s; }
.social-row .social-gold:nth-child(5)::after { animation-delay: 2s; }

/* Hover: pausa el shimmer en posición central, magnifica brillo */
.social-gold:hover {
  transform: translateY(-4px) scale(1.12);
  border-color: rgba(245, 217, 122, .8);
  box-shadow:
    0 8px 24px rgba(201, 168, 76, .55),
    0 0 28px rgba(245, 217, 122, .7),
    inset 0 0 14px rgba(255, 235, 170, .3);
}
.social-gold:hover svg {
  animation-duration: 1.5s;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)) drop-shadow(0 0 14px rgba(255,235,170,1)) brightness(1.4);
}
.social-gold:active { transform: translateY(-1px) scale(1.04); }

.social-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* Definición del gradiente metálico (inyectado vía <svg defs> en footer) */
.social-gold-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (max-width: 480px) {
  .social-gold { width: 44px; height: 44px; }
  .social-gold svg { width: 23px; height: 23px; }
}
/* ═════ END · Logos redes sociales · dorado metálico con shimmer ═════ */

/* ═════ BEGIN · GLOBAL LAYOUT v3 · zoom 75% + centrado + Daniela right · 26may2026 ═════ */
body { zoom: 0.75; }
@supports not (zoom: 1) {
  body { transform: scale(0.75); transform-origin: top left; width: 133.33%; }
}
/* Daniela widget → esquina inferior DERECHA global */
.daniela-trigger { left: auto !important; right: 24px !important; bottom: 24px !important; top: auto !important; }
.daniela-tip     { left: auto !important; right: 80px !important; }
.daniela-window  { left: auto !important; right: 24px !important; }
/* Centrado de contenedores globales */
.navbar-inner   { max-width: 1500px !important; margin: 0 auto !important; padding-left: 24px !important; padding-right: 24px !important; }
.container      { max-width: 1320px !important; margin: 0 auto !important; }
html, body { overflow-x: hidden; }
/* ═════ END · GLOBAL LAYOUT v3 ═════ */