/* ============================================================
   TILCA — Global Styles (shared across all pages)
   Brand Manual: Midnight Blue #1b2336, Navy #212e4e,
   Royal Blue #364775, Light Blue #96b3df, Silver #f2f2f2
   Fonts: Gemsbuck 01 (display) · Archivo (body) — self-hosted
   ============================================================ */

/* ---- Self-hosted fonts ---- */
@font-face { font-family:'Gemsbuck01'; src:url('assets/fonts/Gemsbuck01-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:'Gemsbuck01'; src:url('assets/fonts/Gemsbuck01-Bold.woff2')    format('woff2'); font-weight:700; font-style:normal; font-display:swap }
@font-face { font-family:'Gemsbuck01'; src:url('assets/fonts/Gemsbuck01-Black.woff2')   format('woff2'); font-weight:900; font-style:normal; font-display:swap }

@font-face { font-family:'Archivo'; src:url('assets/fonts/Archivo-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap }
@font-face { font-family:'Archivo'; src:url('assets/fonts/Archivo-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:'Archivo'; src:url('assets/fonts/Archivo-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap }
@font-face { font-family:'Archivo'; src:url('assets/fonts/Archivo-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap }
@font-face { font-family:'Archivo'; src:url('assets/fonts/Archivo-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap }
@font-face { font-family:'Archivo'; src:url('assets/fonts/Archivo-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap }
@font-face { font-family:'Archivo'; src:url('assets/fonts/Archivo-900.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap }
:root {
  --midnight:   #1b2336;
  --navy:       #212e4e;
  --royal:      #364775;
  --light-blue: #96b3df;
  --silver:     #f2f2f2;
  --white:      #ffffff;
  --muted:      #5a6f87;
  --border:     rgba(150,179,223,.15);
  --dark-2:     #111825;

  --grad-hero:   linear-gradient(150deg,#0d1320 0%,#1b2336 45%,#212e4e 100%);
  --grad-blue:   linear-gradient(135deg,#212e4e 0%,#364775 100%);
  --grad-accent: linear-gradient(135deg,#364775 0%,#96b3df 100%);

  --font:         'Archivo', system-ui, sans-serif;
  --font-display: 'Gemsbuck01', 'Archivo', system-ui, sans-serif;
  --radius-sm: 8px;
  --radius:    16px;
  --radius-lg: 24px;
  --shadow:    0 8px 32px rgba(0,0,0,.15);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.25);
}

/* RESET */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px }
body { font-family:var(--font); background:#fff; color:var(--midnight); overflow-x:hidden; -webkit-font-smoothing:antialiased }
img  { max-width:100%; display:block }
a    { text-decoration:none; color:inherit }
ul   { list-style:none }
button { font-family:var(--font); cursor:pointer; border:none; background:none }

/* PROGRESS BAR */
#prog { position:fixed; top:0; left:0; right:0; z-index:1001; height:3px;
  background:linear-gradient(90deg,var(--royal),var(--light-blue)); width:0%; transition:width .08s linear }

/* REVEAL */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .65s cubic-bezier(.25,.46,.45,.94),transform .65s cubic-bezier(.25,.46,.45,.94) }
.reveal.left  { transform:translateX(-40px) }
.reveal.right { transform:translateX(40px) }
.reveal.scale { transform:scale(.95) }
.reveal.in    { opacity:1; transform:none }
.d1{transition-delay:.08s!important}.d2{transition-delay:.16s!important}
.d3{transition-delay:.24s!important}.d4{transition-delay:.32s!important}
.d5{transition-delay:.40s!important}.d6{transition-delay:.48s!important}

/* LAYOUT */
.wrap { max-width:1220px; margin:0 auto; padding:0 40px }

/* SECTION HELPERS */
.section-label {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--light-blue);
  margin-bottom:14px;
}
.section-label::before { content:''; width:22px; height:2px; background:var(--light-blue); flex-shrink:0 }
.section-label.center { justify-content:center }
.section-title {
  font-family:var(--font); font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:900; line-height:1.15;
  color:var(--midnight); margin-bottom:16px;
}
.section-title.light { color:#fff }
.section-sub { font-size:1rem; color:var(--muted); line-height:1.75; max-width:560px }
.section-sub.light { color:rgba(255,255,255,.6) }

/* BUTTONS */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--royal); color:#fff; padding:14px 28px;
  border-radius:10px; font-weight:700; font-size:.9rem;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.btn-primary:hover { background:var(--light-blue); color:var(--midnight); transform:translateY(-2px); box-shadow:0 8px 28px rgba(150,179,223,.4) }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid rgba(255,255,255,.2); color:rgba(255,255,255,.8);
  padding:14px 28px; border-radius:10px; font-weight:600; font-size:.9rem; transition:all .2s;
}
.btn-ghost:hover { border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.06) }

/* PAGE HERO (interior pages) */
.page-hero {
  min-height:420px; background:var(--grad-hero);
  display:flex; align-items:flex-end; position:relative; overflow:hidden;
  padding:120px 40px 64px;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 70% at 70% 40%,rgba(54,71,117,.35) 0%,transparent 60%);
}
.page-hero-dots {
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
.page-hero-watermark {
  position:absolute; inset:0; pointer-events:none;
  background-image:url('assets/img/marca-agua.png');
  background-size:38%; background-position:105% 50%; background-repeat:no-repeat;
  opacity:0.8; filter:brightness(8);
}
.page-hero-inner { position:relative; z-index:2; max-width:1220px; margin:0 auto; width:100% }
.page-hero-eyebrow {
  display:flex; align-items:center; gap:10px;
  color:rgba(150,179,223,.7);
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:20px;
}
.page-hero-eyebrow::before {
  content:''; display:block; width:28px; height:2px; background:var(--light-blue); opacity:.6; flex-shrink:0;
}
.page-hero h1 { font-family:var(--font); font-size:clamp(2rem,4.5vw,3.6rem); font-weight:900; color:#fff; line-height:1.1; margin-bottom:16px }
.page-hero h1 em { color:var(--light-blue); font-style:normal }
.page-hero p { font-size:1rem; color:rgba(255,255,255,.6); max-width:600px; line-height:1.75 }

/* BREADCRUMB */
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:.75rem; color:rgba(255,255,255,.4); margin-bottom:20px;
}
.breadcrumb a { color:rgba(255,255,255,.5); transition:color .2s }
.breadcrumb a:hover { color:var(--light-blue) }
.breadcrumb span { color:rgba(255,255,255,.2) }

/* NAV */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:999;
  height:72px; display:flex; align-items:center; padding:0 40px;
  transition:background .3s,backdrop-filter .3s,box-shadow .3s;
}
#nav.scrolled {
  background:rgba(27,35,54,.96); backdrop-filter:blur(14px);
  box-shadow:0 2px 24px rgba(0,0,0,.3);
}
#nav.scrolled .nav-logo-img { height:26px }
.nav-logo { display:flex; align-items:center; gap:12px; flex-shrink:0 }
.nav-logo-icon {
  width:42px; height:42px; background:rgba(150,179,223,.15); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(150,179,223,.3); flex-shrink:0;
}
.nav-logo-text { display:flex; flex-direction:column; line-height:1.1 }
.nav-logo-text strong { font-size:.85rem; font-weight:800; color:#fff; letter-spacing:.04em }
.nav-logo-text span { font-size:.65rem; color:var(--light-blue); font-weight:500; letter-spacing:.08em; text-transform:uppercase }
.nav-menu { display:flex; align-items:center; gap:4px; margin-left:40px }
.nav-item { position:relative }
.nav-link {
  display:flex; align-items:center; gap:5px;
  padding:8px 14px; border-radius:8px;
  font-size:.82rem; font-weight:600; color:rgba(255,255,255,.78);
  letter-spacing:.02em; transition:color .2s,background .2s; white-space:nowrap;
}
.nav-link svg { width:11px; height:11px; flex-shrink:0; transition:transform .25s }
.nav-item:hover > .nav-link,
.nav-item.mega-open > .nav-link { color:#fff; background:rgba(255,255,255,.07) }
.nav-item.mega-open > .nav-link svg { transform:rotate(180deg) }
.lang-switcher { display:flex; align-items:center; gap:2px; margin-left:auto; margin-right:16px }
.lang-btn {
  padding:5px 9px; border-radius:6px; font-size:.72rem; font-weight:700;
  color:rgba(255,255,255,.5); cursor:pointer; transition:all .2s; letter-spacing:.04em;
}
.lang-btn.active,.lang-btn:hover { color:#fff; background:rgba(150,179,223,.2) }
.nav-cta {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--royal); color:#fff; padding:9px 20px;
  border-radius:8px; font-size:.8rem; font-weight:700; letter-spacing:.03em;
  transition:background .2s,transform .2s,box-shadow .2s; white-space:nowrap;
}
.nav-cta:hover { background:var(--light-blue); color:var(--midnight); transform:translateY(-1px); box-shadow:0 6px 20px rgba(150,179,223,.4) }
.mega {
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:transparent; border:none; border-radius:0;
  box-shadow:none; opacity:0; pointer-events:none;
  transition:opacity .2s,transform .2s; transform:translateX(-50%) translateY(8px);
  min-width:260px; padding-top:12px;
}
.mega-inner {
  background:var(--navy); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:8px;
}
.nav-item.mega-open .mega { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0) }
.mega-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 20px; min-width:680px }
.mega-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; min-width:460px }
.mega-simple { min-width:220px }
.mega-col-title {
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--light-blue); padding:8px 12px 4px; border-bottom:1px solid var(--border); margin-bottom:4px;
}
.mega-link {
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  color:rgba(255,255,255,.75); font-size:.82rem; font-weight:500; transition:background .15s,color .15s;
}
.mega-link:hover { background:rgba(150,179,223,.1); color:#fff }
.mega-link strong { display:block; font-size:.82rem; font-weight:600; line-height:1.2; color:rgba(255,255,255,.9) }
.mega-link span { font-size:.7rem; color:var(--muted); margin-top:1px }
.mega-icon {
  width:32px; height:32px; background:rgba(150,179,223,.12); border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mega-icon svg { width:16px; height:16px; stroke:var(--light-blue); flex-shrink:0 }
.nav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; margin-left:auto }
.nav-burger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:.3s }

/* FOOTER */
#footer { background:var(--dark-2); padding:72px 40px 32px }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; max-width:1220px; margin:0 auto 56px }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:16px }
.footer-logo .nav-logo-icon { width:36px; height:36px }
.footer-brand p { font-size:.82rem; color:rgba(255,255,255,.6); line-height:1.7; max-width:280px }
.footer-col h5 { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.35); margin-bottom:16px }
.footer-col ul li { margin-bottom:8px }
.footer-col ul li a { font-size:.82rem; color:rgba(255,255,255,.65); transition:color .2s }
.footer-col ul li a:hover { color:var(--light-blue) }
.footer-contact-item { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px }
.footer-contact-item svg { width:15px; height:15px; color:var(--light-blue); flex-shrink:0; margin-top:2px }
.footer-contact-item span { font-size:.78rem; color:rgba(255,255,255,.45); line-height:1.5 }
.footer-contact-link { font-size:.78rem; color:rgba(255,255,255,.45); line-height:1.5; text-decoration:none; transition:color .2s }
.footer-contact-link:hover { color:var(--light-blue) }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.06); padding-top:24px;
  max-width:1220px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.footer-bottom p { font-size:.75rem; color:rgba(255,255,255,.55) }
.footer-langs { display:flex; gap:6px }
.footer-langs a,
.footer-langs button { font-size:.72rem; color:rgba(255,255,255,.3); padding:3px 8px; border-radius:4px; transition:color .2s; background:none; border:none; cursor:pointer }
.footer-langs a:hover,
.footer-langs button:hover { color:var(--light-blue) }
.footer-social { display:flex; gap:10px; margin-top:16px }
.footer-social a {
  width:34px; height:34px; background:rgba(255,255,255,.06); border-radius:8px;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.footer-social a:hover { background:rgba(150,179,223,.2) }
.footer-social svg { width:15px; height:15px; color:rgba(255,255,255,.5) }

/* CTA SECTION */
.section-cta {
  padding:100px 40px; background:var(--grad-hero);
  position:relative; overflow:hidden; text-align:center;
}
.section-cta::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(54,71,117,.3) 0%,transparent 70%);
}
.section-cta::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url('assets/img/marca-agua.png');
  background-size:35%; background-position:5% 50%; background-repeat:no-repeat;
  opacity:0.8; z-index:1; filter:brightness(8);
}
.section-cta-inner { position:relative; z-index:2; max-width:700px; margin:0 auto }
.cta-dots { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; opacity:.5 }
.cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:32px }

/* RESPONSIVE */
@media(max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px }
}
@media(max-width:768px) {
  #nav { padding:0 20px }
  /* Desktop menu oculto en móvil — reemplazado por curved drawer */
  .nav-menu { display:none !important }
  .nav-burger { display:flex }
  .lang-switcher { margin-right:8px }
  .wrap { padding:0 20px }
  .page-hero   { padding:96px 20px 40px; min-height:300px }
  .footer-grid { grid-template-columns:1fr }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:8px }
  #footer { padding:48px 20px 24px }
  .section-cta { padding:60px 20px }
  .cta-btns { flex-direction:column; align-items:center }
  .cta-btns .btn-primary,
  .cta-btns .btn-ghost { width:100%; justify-content:center }

  /* Grids → 1 columna */
  .services-full-grid { grid-template-columns:1fr !important }
  .nosotros-inner     { grid-template-columns:1fr !important; gap:48px }
  .ingenios-inner     { grid-template-columns:1fr !important; gap:40px }

  /* Grids de 4 → 2 */
  .productos-grid    { grid-template-columns:repeat(2,1fr) }
  .materiales-grid   { grid-template-columns:repeat(2,1fr) }
  .sectors-grid      { grid-template-columns:repeat(2,1fr) }
  .stats-grid        { grid-template-columns:repeat(2,1fr) }
  .capabilities-grid { grid-template-columns:repeat(2,1fr) }
  .services-grid     { grid-template-columns:1fr }

  /* Breadcrumb */
  .breadcrumb { font-size:.7rem }

  /* Nosotros badge */
  .nosotros-img-badge { right:0; bottom:-12px }

  /* Logos grid de clientes */
  .logos-grid { grid-template-columns:repeat(3,1fr) }
  .logo-item  { width:33.33%; padding:16px 20px }
}

/* ============================================================
   RESPONSIVE ADICIONAL — 900px, 768px, 480px
   Fixes para grids fijos, tipografía y paddings en móvil
   ============================================================ */

/* NAV active state */
.nav-menu a.active,
#navMenu a.active {
  color: #fff !important;
  border-bottom: 2px solid var(--light-blue);
}

/* Touch-open dropdown (tablet sin hover) */
.nav-item.mega-open > .mega {
  opacity: 1 !important;
  pointer-events: all !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* 900px — breakpoints intermedios */
@media(max-width:900px) {
  /* Section titles */
  .section-title { font-size:clamp(1.5rem,3vw,2.2rem) }
  .page-hero h1  { font-size:clamp(1.6rem,3.8vw,2.8rem) }

  /* Grids de 2 columnas → 1 */
  .services-intro { grid-template-columns:1fr !important; gap:32px }

  /* Productos grid 4 → 2 */
  .productos-grid { grid-template-columns:repeat(2,1fr) }

  /* Materiales grid 4 → 2 */
  .materiales-grid { grid-template-columns:repeat(2,1fr) }

}


/* 480px — pantallas muy pequeñas */
@media(max-width:480px) {
  /* Tipografía */
  .section-title { font-size:1.45rem }
  .page-hero h1  { font-size:1.55rem }

  /* Grids → 1 columna */
  .productos-grid    { grid-template-columns:1fr }
  .materiales-grid   { grid-template-columns:1fr }
  .sectors-grid      { grid-template-columns:1fr 1fr }
  .stats-grid        { grid-template-columns:1fr }
  .capabilities-grid { grid-template-columns:1fr 1fr }
  .ingenios-list     { grid-template-columns:1fr }

  /* Logos clientes */
  .logos-grid { grid-template-columns:repeat(2,1fr) }
  .logo-item  { width:50%; padding:12px 16px }

  /* Reducir padding general */
  .wrap { padding:0 16px }
  #footer { padding:40px 16px 20px }

  /* Form row → 1 col */
  .form-row { grid-template-columns:1fr !important }

  /* Nav cta — ocultar en <480px para no desbordarse */
  .nav-cta { display:none }
  /* Hide lang switcher at narrowest to prevent nav overflow */
  .lang-switcher { display:none }
  .nav-burger { padding:8px }

  /* Botón featured post del blog */
  .featured-post-body { padding:24px }
  .featured-post-body h2 { font-size:1.1rem }
}

/* ---- Blog article navigation (shared across all 7 articles) ---- */
.article-nav { display:flex; justify-content:space-between; gap:16px; padding:40px 0; border-top:1px solid #e8eef6; border-bottom:1px solid #e8eef6 }
.article-nav a { display:flex; flex-direction:column; gap:4px; padding:16px 20px; border:1px solid #e8eef6; border-radius:8px; background:#fff; text-decoration:none; flex:1; transition:box-shadow .2s,transform .2s; max-width:48% }
.article-nav a:hover { box-shadow:0 6px 20px rgba(54,71,117,.1); transform:translateY(-2px) }
.nav-dir { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#8a98b0 }
.nav-title { font-size:.85rem; font-weight:700; color:#0d1320; line-height:1.4 }
.nav-prev { align-items:flex-start }
.nav-next { align-items:flex-end; text-align:right }
.nav-arrow { font-size:1rem; color:#6090c0 }
@media(max-width:600px){
  .article-nav { flex-direction:column }
  .article-nav a { max-width:100% }
  .nav-next { align-items:flex-start; text-align:left }
  .article-body figure img { height:180px }
}

/* ---- Footer utility classes (used in nav.js injected footer HTML) ---- */
.footer-meta-note { font-size:.68rem; opacity:.6 }
.footer-meta-whatsapp { font-size:.68rem; color:#25d366 }

/* ---- Touch target improvements (mobile) ---- */
@media(max-width:768px){
  .footer-social a { width:44px; height:44px }
  .nav-cta { padding:11px 20px }
  .mega-link { padding:12px 12px; min-height:44px }

  /* H-photo video: contain on mobile, remove bleed */
  .h-photo { contain:strict }
  .h-photo video { inset:0; width:100%; height:100% }

  /* Mat-family-grid collapse earlier */
  .mat-family-grid { grid-template-columns:1fr }

  /* Plastic card fallback bg */
  .pl-card { background:var(--navy) }
}

/* ---- Products header — replaces inline grid style on index.html ---- */
.products-header { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-bottom:56px }
@media(max-width:768px){
  .products-header { grid-template-columns:1fr; gap:24px }
}

/* ---- Accessibility: skip link ---- */
.skip-link {
  position:absolute; top:-40px; left:0;
  background:var(--royal); color:#fff;
  padding:8px 16px; text-decoration:none; z-index:10000;
  font-size:.85rem; font-weight:700; border-radius:0 0 4px 0;
  transition:top .2s;
}
.skip-link:focus { top:0 }

/* ---- Accessibility: focus-visible styles ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:3px solid var(--light-blue);
  outline-offset:3px;
  border-radius:4px;
}

/* ══════════════════════════════════════════
   COOKIE CONSENT — paleta TILCA
   ══════════════════════════════════════════ */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--midnight);border-top:3px solid var(--royal);box-shadow:0 -8px 32px rgba(0,0,0,.35);transform:translateY(115%);transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.cc-banner.show{transform:none}
.cc-inner{max-width:1220px;margin:0 auto;padding:20px 40px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cc-text{flex:1 1 360px;font-size:.88rem;color:rgba(255,255,255,.7);line-height:1.55;font-family:var(--font)}
.cc-text strong{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--light-blue);display:block;margin-bottom:5px}
.cc-text a{color:var(--light-blue);text-decoration:underline}
.cc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cc-btn{font-family:var(--font);font-size:.78rem;font-weight:700;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;transition:all .2s;letter-spacing:.02em}
.cc-btn-primary{background:var(--royal);color:#fff}
.cc-btn-primary:hover{background:var(--light-blue);color:var(--midnight)}
.cc-btn-ghost{background:transparent;color:rgba(255,255,255,.6);border:1.5px solid rgba(255,255,255,.2)}
.cc-btn-ghost:hover{border-color:var(--light-blue);color:var(--light-blue)}
@media(max-width:680px){.cc-inner{padding:18px 20px}.cc-actions{width:100%}.cc-btn{flex:1 1 30%;text-align:center}}

.cc-modal{position:fixed;inset:0;z-index:910;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(11,17,30,.75);backdrop-filter:blur(4px)}
.cc-modal.show{display:flex}
.cc-card{background:var(--navy);max-width:540px;width:100%;border:1px solid var(--royal);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.5);max-height:88vh;overflow:auto}
.cc-card-head{padding:24px 28px 18px;border-bottom:1px solid rgba(150,179,223,.15)}
.cc-kicker{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--light-blue);margin-bottom:6px}
.cc-card-head h3{font-family:var(--font);font-size:1.25rem;font-weight:800;color:#fff}
.cc-card-body{padding:6px 28px 4px}
.cc-row{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:18px 0;border-bottom:1px solid rgba(150,179,223,.1)}
.cc-row:last-child{border-bottom:0}
.cc-row h4{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin:0 0 4px;color:#fff}
.cc-row p{font-size:.83rem;color:rgba(255,255,255,.55);margin:0;max-width:40ch;line-height:1.45}
.cc-card-foot{padding:18px 28px 24px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;border-top:1px solid rgba(150,179,223,.1)}
.cc-switch{position:relative;width:46px;height:26px;flex:0 0 auto;margin-top:2px}
.cc-switch input{opacity:0;width:0;height:0;position:absolute}
.cc-slider{position:absolute;inset:0;background:rgba(150,179,223,.25);border-radius:20px;transition:.25s;cursor:pointer}
.cc-slider::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.cc-switch input:checked + .cc-slider{background:var(--royal)}
.cc-switch input:checked + .cc-slider::before{transform:translateX(20px)}
.cc-switch input:disabled + .cc-slider{opacity:.45;cursor:not-allowed}
.open-cookie-prefs{cursor:pointer;color:rgba(255,255,255,.35);text-decoration:none}
.open-cookie-prefs:hover{color:var(--light-blue)}

/* ══════════════════════════════════════════
   CURVED MOBILE MENU DRAWER
   ══════════════════════════════════════════ */
#curved-drawer {
  position:fixed; top:0; right:0; bottom:0;
  width:100vw;
  background:var(--midnight); z-index:1000;
  transform:translateX(calc(100% + 120px));
  transition:transform .8s cubic-bezier(.76,0,.24,1);
  display:flex; flex-direction:column;
  overflow:hidden;
}
#curved-drawer.open { transform:translateX(0) }

/* curved SVG on left edge */
#curved-drawer .drawer-curve {
  position:absolute; top:0; left:-99px; width:100px; height:100%;
  fill:var(--midnight); stroke:none; pointer-events:none;
}

/* backdrop */
#drawer-backdrop {
  display:none; position:fixed; inset:0; z-index:499;
  background:rgba(11,17,30,.6); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .4s ease;
}
#drawer-backdrop.open { display:block; opacity:1 }

/* header con logo */
.drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; height:72px; flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.drawer-logo { height:28px; width:auto }
.drawer-close {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.07); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
  color:#fff;
}
.drawer-close:hover { background:rgba(255,255,255,.15) }

/* inner layout */
.drawer-inner {
  display:flex; flex-direction:column; height:100%;
}
/* nav items */
.drawer-links { flex:1; overflow-y:auto; padding:16px 32px 0 }
.drawer-item {
  display:flex; align-items:center; gap:14px;
  padding:16px 0; border-bottom:1px solid rgba(255,255,255,.07);
  cursor:pointer; text-decoration:none;
  position:relative;
}
.drawer-item:last-child { border-bottom:0 }
.drawer-num {
  font-size:1.1rem; font-weight:300; color:rgba(255,255,255,.25);
  min-width:36px; line-height:1; font-family:var(--font);
}
.drawer-text {
  font-size:clamp(1rem, 8vw, 2rem); font-weight:300; color:#fff;
  letter-spacing:-.02em; line-height:1; text-transform:uppercase;
  font-family:var(--font-display);
  transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  display:flex; align-items:center; gap:1px; flex-wrap:nowrap;
}
.drawer-item:active .drawer-text,
.drawer-item:hover .drawer-text { transform:translateX(10px) }
.drawer-item:hover .drawer-num { color:var(--light-blue) }

/* letter animation */
.drawer-letter {
  display:inline-block;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--i) * .025s);
}
.drawer-item:hover .drawer-letter,
.drawer-item:active .drawer-letter { transform:translateY(-5px) }

/* sub-items accordion */
.drawer-sub {
  max-height:0; overflow:hidden;
  transition:max-height .4s cubic-bezier(.25,.46,.45,.94);
  padding-left:50px;
}
.drawer-sub.open { max-height:400px }
.drawer-sub a {
  display:block; padding:10px 0; font-size:.82rem; font-weight:500;
  color:rgba(255,255,255,.4); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:color .2s; letter-spacing:.04em; text-transform:uppercase;
  font-family:var(--font);
}
.drawer-sub a:last-child { border-bottom:0 }
.drawer-sub a:hover { color:var(--light-blue) }
.drawer-chevron {
  margin-left:auto; opacity:.3; color:#fff;
  transition:transform .35s cubic-bezier(.25,.46,.45,.94);
}
.drawer-item.sub-open .drawer-chevron { transform:rotate(180deg); opacity:.6 }

/* footer strip */
.drawer-footer {
  padding:20px 32px 36px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:16px; flex-shrink:0;
}
.drawer-footer-row {
  display:flex; align-items:center; justify-content:space-between;
}
/* redes sociales */
.drawer-socials { display:flex; gap:16px; align-items:center }
.drawer-social-link {
  color:rgba(255,255,255,.35); transition:color .2s; line-height:0;
}
.drawer-social-link:hover { color:var(--light-blue) }
.drawer-social-link svg { width:18px; height:18px; fill:currentColor }
/* selector de idioma */
.drawer-footer-langs { display:flex; gap:6px }
.drawer-lang-btn {
  padding:5px 12px; border-radius:6px;
  border:1.5px solid rgba(255,255,255,.15);
  background:transparent; font-size:.7rem; font-weight:700;
  color:rgba(255,255,255,.35); cursor:pointer; transition:all .2s;
  font-family:var(--font); letter-spacing:.08em;
}
.drawer-lang-btn:hover { border-color:rgba(255,255,255,.4); color:rgba(255,255,255,.7) }
.drawer-lang-btn.active {
  border-color:var(--light-blue); color:var(--light-blue);
  background:rgba(150,179,223,.12);
}
.drawer-cta {
  display:block; background:var(--royal); color:#fff;
  padding:14px 20px; border-radius:10px; text-align:center;
  font-size:.85rem; font-weight:700; text-decoration:none;
  transition:background .2s,transform .2s; letter-spacing:.05em; text-transform:uppercase;
  font-family:var(--font);
}
.drawer-cta:hover { background:var(--light-blue); color:var(--midnight); transform:translateY(-1px) }

/* stagger entrance para items */
#curved-drawer.open .drawer-item {
  animation:drawerItemIn .5s cubic-bezier(.25,.46,.45,.94) both;
}
#curved-drawer.open .drawer-item:nth-child(1) { animation-delay:.08s }
#curved-drawer.open .drawer-item:nth-child(2) { animation-delay:.13s }
#curved-drawer.open .drawer-item:nth-child(3) { animation-delay:.18s }
#curved-drawer.open .drawer-item:nth-child(4) { animation-delay:.23s }
#curved-drawer.open .drawer-item:nth-child(5) { animation-delay:.28s }
#curved-drawer.open .drawer-item:nth-child(6) { animation-delay:.33s }
@keyframes drawerItemIn {
  from { opacity:0; transform:translateX(32px) }
  to   { opacity:1; transform:translateX(0) }
}