/* ============================================================
   ACTORES S.C.G — DESIGN SYSTEM (compartido por todas las páginas)
   Tokens + chrome (nav, menú móvil, footer, botones, utilidades).
   Estilos de página van en home.css / news.css / etc.
   ============================================================ */
:root{
  --font-display:'Bitter', Georgia, serif;
  --font-ui:'Manrope', system-ui, sans-serif;
  --orange:#6E6E6E; --accent:#6E6E6E;
  --orange-700:#4A4A4A; --orange-100:#E4E4E4; --orange-50:#F0F0F0;
  --ink:#1A1A1A; --white:#FFFFFF; --paper:#F2F2F2;
  --g1:#ADADAD; --g2:#5C5C5C;
  --line:rgba(26,26,26,.12); --line-light:rgba(255,255,255,.14);
  --maxw:1220px; --ease:cubic-bezier(.16,1,.3,1);
  --spin:0deg;
}
*{box-sizing:border-box}
site-header, site-footer, site-fabs{display:block}
html{scroll-behavior:smooth}
body{margin:0; background:var(--white); color:var(--ink); font-family:var(--font-ui); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body.no-scroll{overflow:hidden}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 30px}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
section{position:relative; padding:96px 0}
@media(max-width:640px){section{padding:64px 0}}

/* ====== ESPIRAL ====== */
.spiral{position:absolute; pointer-events:none; overflow:visible; transform:rotate(var(--spin)); transition:transform .2s linear}
.spiral path{fill:none; stroke-width:9; stroke-linecap:round}
@media(prefers-reduced-motion:reduce){.spiral{transform:none !important; transition:none}}

/* ====== NAV ====== */
nav{position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:14px 30px; color:var(--ink); transition:background .5s var(--ease), color .4s, border-color .4s, box-shadow .4s; border-bottom:1px solid transparent}
nav .brand{font-family:var(--font-display); font-weight:700; letter-spacing:.34em; font-size:16px; padding-left:.34em}
nav .brand .o{color:var(--white); transition:color .3s}
nav.solid .brand .o{color:var(--accent)}
.navmenu{display:flex; align-items:center; gap:2px}
.navitem{position:static}
.navlink{position:relative; font-family:var(--font-ui); font-size:13.5px; font-weight:500; color:inherit; background:none; border:0; cursor:pointer; padding:10px 13px; border-radius:10px; display:inline-flex; align-items:center; gap:6px; opacity:.85; transition:opacity .2s, color .2s}
.navlink:hover{opacity:1}
.navlink .car{font-size:8px; opacity:.7; transition:transform .3s var(--ease)}
.navitem.open .navlink .car{transform:rotate(180deg)}
/* Ítem actual: sobre el hero naranja (nav transparente) va en tinta + subrayado
   para que se vea; solo se pinta de naranja cuando el nav es blanco (sólido/mega). */
.navitem.current > .navlink{opacity:1; font-weight:600}
.navitem.current > .navlink::after{content:""; position:absolute; left:13px; right:13px; bottom:6px; height:2px; border-radius:2px; background:currentColor}
nav.solid .navitem.current > .navlink,
nav:has(.navitem.open) .navitem.current > .navlink{color:var(--accent)}

/* Hero OSCURO (theme="dark"): el nav transparente va en claro para verse desde
   la primera carga. Se revierte solo al hacerse sólido (scroll) o al abrir el
   mega-menú, donde el fondo ya es blanco. Mantiene la transición fluida. */
nav.on-dark:not(.solid):not(:has(.navitem.open)){color:#fff}
nav.on-dark:not(.solid):not(:has(.navitem.open)) .brand .o{color:var(--accent)}
nav.on-dark:not(.solid):not(:has(.navitem.open)) .socios{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.5); color:#fff}
nav.on-dark:not(.solid):not(:has(.navitem.open)) .socios:hover{background:rgba(255,255,255,.26)}
.socios{margin-left:10px; background:var(--ink); color:#fff; border-radius:40px; padding:9px 18px; font-weight:600; font-size:12.5px; transition:transform .25s var(--ease), background .25s}
.socios:hover{transform:translateY(-2px)}
nav.solid{background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom-color:var(--line); box-shadow:0 8px 30px -22px rgba(0,0,0,.5)}
nav.solid .socios{background:var(--accent)}
nav:has(.navitem.open){background:rgba(255,255,255,.97); backdrop-filter:blur(12px); color:var(--ink); border-bottom-color:var(--line); box-shadow:0 8px 30px -22px rgba(0,0,0,.5)}
nav:has(.navitem.open) .brand .o{color:var(--accent)}
nav:has(.navitem.open) .socios{background:var(--accent)}

/* ====== MEGA-MENÚ ====== */
.mega{position:fixed; top:56px; left:0; z-index:70; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:18px; box-shadow:0 40px 80px -30px rgba(0,0,0,.4); padding:24px; display:flex; gap:26px; width:max-content; max-width:calc(100vw - 32px); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s}
.mega::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
.navitem.open > .mega{opacity:1; visibility:visible; transform:none}
.mega-cols{display:flex; gap:34px}
.mcol{min-width:172px}
.mcol h6{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--g2); font-weight:600; margin:0 0 10px}
.mcol a{display:block; font-size:14px; color:#2b2b28; padding:7px 0; font-weight:500; border-radius:6px; transition:color .2s, padding-left .25s var(--ease)}
.mcol a:hover{color:var(--accent); padding-left:6px}
.mcol a .tag{font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--orange-700); background:var(--orange-100); padding:1px 6px; border-radius:20px; margin-left:6px; vertical-align:1px}
.mega-feat{flex:0 0 220px; border-radius:14px; overflow:hidden; position:relative; min-height:218px; display:flex; align-items:flex-end; padding:18px; color:#fff}
.mega-feat .mf-lab{font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; opacity:.9}
.mega-feat b{display:block; font-family:var(--font-display); font-weight:500; font-size:20px; line-height:1.12; margin-top:6px}
.mega-feat .mf-go{margin-top:12px; font-size:13px; font-weight:600; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:2px; display:inline-block}
.mega-feat > div{position:relative; z-index:2}
.burger{display:none; width:42px; height:42px; align-items:center; justify-content:center; font-size:22px; background:none; border:0; color:inherit; cursor:pointer; border-radius:12px}
@media(max-width:1040px){.navmenu{display:none} .burger{display:flex}}

/* ====== MENÚ MÓVIL (pantalla completa) ====== */
.drawer-back{position:fixed; inset:0; z-index:70; background:rgba(18,17,15,.5); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s}
.drawer-back.open{opacity:1; visibility:visible}
.drawer{position:fixed; inset:0; z-index:80; width:100%; background:var(--ink); color:#fff; transform:translateX(100%); transition:transform .45s var(--ease); display:flex; flex-direction:column; padding:14px 24px calc(18px + env(safe-area-inset-bottom)); overflow:hidden; overscroll-behavior:contain}
.drawer.open{transform:none}
.drawer .dspiral{position:absolute; right:-120px; top:12%; width:360px; height:360px; opacity:.08; pointer-events:none; z-index:0}
.drawer .dspiral path{fill:none; stroke:var(--accent); stroke-width:9; stroke-linecap:round}
.drawer .dtop{display:flex; align-items:center; justify-content:space-between; padding:8px 0 16px; position:relative; z-index:2}
.drawer .dbrand{font-family:var(--font-display); font-weight:700; letter-spacing:.3em; font-size:15px}
.drawer .dbrand .o{color:var(--accent)}
.drawer .dclose{width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:24px; background:rgba(255,255,255,.08); border:0; color:#fff; cursor:pointer; border-radius:50%}
.dbody{flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; position:relative; z-index:2}
.dbody > *{opacity:0; transform:translateY(16px); transition:opacity .45s var(--ease), transform .45s var(--ease)}
.drawer.open .dbody > *{opacity:1; transform:none}
.drawer.open .dbody > *:nth-child(1){transition-delay:.05s}
.drawer.open .dbody > *:nth-child(2){transition-delay:.10s}
.drawer.open .dbody > *:nth-child(3){transition-delay:.14s}
.drawer.open .dbody > *:nth-child(4){transition-delay:.18s}
.drawer.open .dbody > *:nth-child(5){transition-delay:.22s}
.drawer.open .dbody > *:nth-child(6){transition-delay:.26s}
.drawer.open .dbody > *:nth-child(7){transition-delay:.30s}
.dquick{display:flex; gap:10px; margin:2px 0 12px}
.dquick a{flex:1; text-align:center; padding:15px 10px; border-radius:16px; font-weight:600; font-size:14px}
.dquick .q-fill{background:var(--accent); color:#fff}
.dquick .q-line{background:rgba(255,255,255,.06); border:1px solid var(--line-light); color:#fff}
.acc-item{border-top:1px solid var(--line-light)}
.acc-head{width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:0; color:#fff; cursor:pointer; font-family:var(--font-display); font-weight:500; font-size:24px; padding:18px 0; text-align:left}
.acc-head .pm{width:34px; height:34px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:23px; color:var(--accent); background:rgba(90,90,90,.14); border-radius:50%; transition:transform .3s var(--ease); line-height:1}
.acc-item.open .acc-head .pm{transform:rotate(45deg)}
.acc-panel{max-height:0; overflow:hidden; transition:max-height .4s var(--ease)}
.acc-panel .inner{padding:0 0 14px}
.acc-panel a{display:block; color:#cfccc4; font-size:16px; padding:11px 0; transition:color .2s, padding-left .25s var(--ease)}
.acc-panel a:active{color:var(--accent); padding-left:6px}
.acc-link{display:flex; justify-content:space-between; align-items:center; font-family:var(--font-display); font-weight:500; font-size:24px; padding:18px 0; border-top:1px solid var(--line-light)}
.dmore{padding-top:24px}
.dmore .social{margin-top:0; margin-bottom:16px}
.dfoot{font-size:14px; color:#9b9a94; font-family:var(--font-display)}

/* ====== BOTONES ====== */
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; padding:15px 26px; border-radius:44px; font-size:15px; transition:transform .3s var(--ease), background .25s, color .25s; border:1px solid transparent; cursor:pointer}
.btn:hover{transform:translateY(-3px)}
.btn-ink{background:var(--ink); color:#fff} .btn-ink:hover{background:#000}
.btn-o{background:var(--accent); color:#fff} .btn-o:hover{background:var(--orange-700)}
.btn-line{background:transparent; color:var(--ink); border-color:rgba(18,17,15,.35)} .btn-line:hover{border-color:var(--ink)}
.btn-white{background:#fff; color:var(--ink)}
.btn-line-w{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)} .btn-line-w:hover{border-color:#fff}

/* ====== DUOTONO ====== */
.duo{position:relative; background-size:cover; background-position:center; background-color:#171715; overflow:hidden}
.duo::before{content:""; position:absolute; inset:0; background:var(--accent); mix-blend-mode:multiply; opacity:.5; transition:opacity .5s}
.duo:hover::before{opacity:.28}
.duo-soft::before{opacity:.32}
.duo > *{position:relative}

/* ====== ENCABEZADOS DE SECCIÓN ====== */
.sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:44px}
.lab{font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--g2); display:flex; align-items:center; gap:14px; margin-bottom:18px}
.lab::before{content:""; width:30px; height:1px; background:var(--accent)}
h2.sec{font-family:var(--font-display); font-weight:500; letter-spacing:-.01em; font-size:clamp(30px,4.2vw,52px); line-height:1.02; margin:0}
h2.sec em{font-style:italic; color:var(--accent)}
.seelink{font-size:14px; font-weight:600; border-bottom:1px solid var(--accent); padding-bottom:3px; white-space:nowrap; transition:opacity .2s}
.seelink:hover{opacity:.7}

/* ====== PAGE HERO (páginas interiores) ====== */
.phero{background:var(--orange); color:var(--ink); padding:158px 0 66px; position:relative; overflow:hidden}
.phero .spiral{left:-150px; bottom:-200px; width:520px; height:520px; opacity:.15}
.phero .spiral path{stroke:#fff}
.phero .wrap{position:relative; z-index:2}
.crumb{font-size:13px; font-weight:600; color:rgba(18,17,15,.72); margin-bottom:20px; display:flex; gap:8px; align-items:center}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.5}
.phero h1{font-family:var(--font-display); font-weight:600; font-size:clamp(44px,6.4vw,92px); line-height:.96; letter-spacing:-.02em; margin:0; color:var(--ink)}
.phero h1 em{font-style:italic; color:#fff; font-weight:500}
.phero .psub{margin-top:20px; max-width:52ch; font-size:18px; font-weight:500; color:rgba(18,17,15,.82)}
/* Sobre el naranja del hero, el eyebrow (.lab) va en tinta: el gris/línea naranja
   por defecto no contrasta. Aplica a TODOS los heros .phero del sitio. */
.phero .lab{color:var(--ink)}
.phero .lab::before{background:var(--ink)}

/* ====== FOOTER ====== */
footer{background:var(--ink); color:#9b9a94; padding:78px 0 44px; font-size:14px}
.fcols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12)}
.fcols h5{font-family:var(--font-display); color:var(--white); font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 16px; font-weight:600}
.fcols a{display:block; color:#9b9a94; padding:6px 0; transition:color .2s}
.fcols a:hover{color:var(--accent)}
.fbrand{font-family:var(--font-display); color:var(--white); font-size:26px; letter-spacing:.28em; font-weight:700}
.fbrand .o{color:var(--accent)}
.fnote{max-width:32ch; line-height:1.7; margin-top:14px}
.social{display:flex; gap:10px; margin-top:22px}
.social a{width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:#cfccc4; padding:0; transition:background .25s, color .25s, border-color .25s, transform .25s var(--ease)}
.social a:hover{background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-3px)}
.social svg{width:18px; height:18px; fill:currentColor; display:block}
.fbot{display:flex; justify-content:space-between; padding-top:24px; gap:20px; flex-wrap:wrap; font-size:12.5px}
@media(max-width:820px){.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fcols{grid-template-columns:1fr}}

/* ====== FLOATING ACTIONS ====== */
.fabs{position:fixed; right:22px; bottom:22px; z-index:55; display:flex; flex-direction:column; align-items:flex-end; gap:12px}
.fab-top{width:50px; height:50px; border-radius:50%; background:var(--ink); color:#fff; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 16px 34px -14px rgba(0,0,0,.6); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .25s}
.fab-top.show{opacity:1; visibility:visible; transform:none}
.fab-top:hover{background:var(--accent)}
.fab-top svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.fab-chat{display:flex; align-items:center; height:54px; padding:0 17px; border-radius:40px; background:var(--accent); color:#fff; font-weight:600; font-size:14px; box-shadow:0 16px 34px -12px rgba(90,90,90,.7); overflow:hidden; white-space:nowrap; transition:background .25s, transform .3s var(--ease)}
.fab-chat:hover{background:var(--orange-700); transform:translateY(-2px)}
.fab-chat svg{width:22px; height:22px; fill:currentColor; flex:0 0 auto}
.fab-chat .lbl{max-width:0; opacity:0; overflow:hidden; transition:max-width .4s var(--ease), opacity .3s, margin-left .4s var(--ease)}
.fab-chat:hover .lbl, .fab-chat:focus-visible .lbl{max-width:220px; opacity:1; margin-left:10px}
@media(max-width:640px){.fabs{right:16px; bottom:16px} .fab-chat .lbl{display:none}}

/* ====== FILTROS (chips) — compartido ====== */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px}
.chip{padding:9px 18px; border:1px solid var(--line); border-radius:40px; font-size:13.5px; font-weight:600; color:var(--g2); cursor:pointer; background:#fff; transition:background .25s, color .25s, border-color .25s}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.active{background:var(--accent); color:#fff; border-color:var(--accent)}

/* ====== BANNER DE COOKIES / DATOS (maqueta) ====== */
.cookie{position:fixed; left:20px; bottom:20px; z-index:75; width:min(384px, calc(100vw - 40px));
  background:var(--ink); color:#fff; border-radius:18px; padding:20px 22px 18px;
  box-shadow:0 34px 66px -26px rgba(0,0,0,.65); transform:translateY(170%); opacity:0;
  transition:transform .6s var(--ease), opacity .5s}
.cookie.in{transform:none; opacity:1}
.cookie h4{font-family:var(--font-display); font-weight:600; font-size:17px; margin:0 0 9px; display:flex; align-items:center; gap:9px; color:#fff}
.cookie h4 .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); flex:0 0 auto}
.cookie p{margin:0 0 16px; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.82)}
.cookie p a{color:#fff; text-decoration:underline; text-underline-offset:2px}
.cookie p a:hover{color:var(--accent)}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap}
.cookie-actions button{font-family:var(--font-ui); font-weight:600; font-size:13.5px; padding:11px 18px; border-radius:40px; cursor:pointer; border:1px solid transparent; transition:transform .25s var(--ease), background .25s, border-color .25s}
.cookie-actions button:hover{transform:translateY(-2px)}
.ck-accept{background:var(--accent); color:#fff}
.ck-accept:hover{background:var(--orange-700)}
.ck-min{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.ck-min:hover{border-color:#fff}
@media(prefers-reduced-motion:reduce){ .cookie{transition:opacity .4s} }
@media(max-width:520px){ .cookie{left:12px; right:12px; bottom:12px; width:auto} }
.nempty{padding:40px 0; color:var(--g2); font-size:16px}

/* ====== REVEALS ====== */
.rv{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv.in{opacity:1; transform:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media(prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none} html{scroll-behavior:auto}}