/* ============================================================
   MoraMedia · base.css — estilos compartidos entre páginas
   (tokens, tipografía, navbar, botones, secciones, footer).
   La home mantiene su CSS propio; esto sirve a las subpáginas.
   ============================================================ */

/* Tipografía self-hosted (Inter variable, SIL OFL 1.1) */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:#F7F5FC; --bg-soft:#FFFFFF; --soft:#D9CBF0; --card:#FFFFFF;
  --dark:#0f0a1e; --dark-2:#160e2b; --ink:#1a0a2e; --muted:#635c73; --body:#4B5563;
  --violet:#7C3AED; --violet-d:#5B21B6; --plum:#3d0d59; --lila:#A78BFA; --lila-2:#C4B5FD;
  --line:#E7E1F2; --card-border:#EDE9FE; --dim:#C9C4D6;
  --ease:cubic-bezier(.22,1,.36,1); --maxw:1240px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection { background:var(--violet); color:#fff; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- NAVBAR ---------- */
.nav { position:fixed; inset:0 0 auto 0; z-index:100; height:76px; display:flex; align-items:center; transition:height .5s var(--ease); }
.nav .wrap { position:relative; display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:var(--maxw); border:1px solid transparent; border-radius:99px; background-color:rgba(255,255,255,0);
  transition:max-width .55s var(--ease), padding .55s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .45s var(--ease); }
.nav.compact { height:68px; }
.nav.compact .wrap { max-width:min(1040px, calc(100vw - 40px)); padding:7px 7px 7px 20px;
  background-color:rgba(255,255,255,.86); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-color:var(--line); box-shadow:0 14px 34px -22px rgba(60,13,89,.55); }
.nav .mark, .nav .name, .nav-links, .nav-cta { transition:all .5s var(--ease); }
.nav.compact .brand { gap:9px; }
.nav.compact .brand .mark { width:32px; height:32px; }
.nav.compact .brand .name { font-size:17.5px; }
.nav.compact .nav-links { gap:24px; }
.nav.compact .nav-links a { font-size:13.5px; }
.nav.compact .nav-cta { font-size:13px; padding:9px 17px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand .mark { width:38px; height:38px; flex-shrink:0; display:block; }
.brand .name { font-size:20px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.brand .name b { font-weight:800; color:var(--plum); }
.nav-links { display:flex; gap:30px; }
.nav-links a { font-size:14.5px; color:var(--body); font-weight:500; transition:color .2s var(--ease); }
.nav-links a:hover { color:var(--violet); }
.nav-cta { background:var(--violet); color:#fff; font-size:14px; font-weight:600; padding:10px 20px; border-radius:99px;
  box-shadow:0 8px 22px -10px rgba(124,58,237,.7); transition:background .25s var(--ease), transform .25s var(--ease); }
.nav-cta:hover { background:var(--violet-d); transform:translateY(-1px); }
.nav-cta-m { display:none; }
.nav-burger { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-burger span { display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; border-radius:2px; transition:.25s var(--ease); }
@media (max-width:940px) {
  .nav-links, .nav-cta { display:none; }
  .nav-burger { display:block; }
  .nav.menu-open .nav-links { display:flex; flex-direction:column; gap:4px; position:absolute; top:calc(100% + 10px); left:0; right:0;
    background:#fff; padding:14px 22px 20px; border:1px solid var(--line); border-radius:20px; box-shadow:0 22px 40px -24px rgba(60,13,89,.45); }
  .nav.menu-open .nav-links a { padding:12px 0; border-bottom:1px solid var(--line); }
  .nav.menu-open .nav-links .nav-cta-m { display:block; margin-top:16px; padding:14px 20px; text-align:center; border-bottom:none; color:#fff; background:var(--violet); border-radius:99px; }
}

/* ---------- BOTONES ---------- */
.btn-cta { display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:600; color:#fff;
  background:linear-gradient(100deg, var(--violet), var(--violet-d)); padding:15px 32px; border-radius:99px; border:none; cursor:pointer;
  box-shadow:0 14px 34px -12px rgba(124,58,237,.75); transition:transform .25s var(--ease), box-shadow .25s var(--ease); font-family:inherit; }
.btn-cta:hover { transform:translateY(-2px); box-shadow:0 20px 42px -12px rgba(124,58,237,.85); }
.btn-ghost { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--violet);
  padding:15px 26px; border-radius:99px; border:1px solid var(--lila-2); background:rgba(255,255,255,.6); cursor:pointer; font-family:inherit;
  transition:border-color .25s var(--ease), background .25s var(--ease); }
.btn-ghost:hover { border-color:var(--violet); background:#fff; }

/* ---------- SECCIONES ---------- */
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--violet); }
.sec { padding:104px 0; position:relative; }
.sec.soft { background:var(--soft); }
.sec.soft .eyebrow { color:var(--violet-d); }
.sec.tone-dark { background:var(--dark); color:#EDE9FE; }
.sec.tone-dark .eyebrow { color:var(--lila); }
.sec.tone-dark p, .sec.tone-dark .sec-head p { color:var(--dim); }
.sec-head { max-width:680px; margin-bottom:52px; }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head h2 { margin-top:15px; font-size:clamp(30px, 4vw, 46px); font-weight:800; line-height:1.06; letter-spacing:-.03em; }
.sec-head p { margin-top:15px; font-size:1.05rem; color:var(--muted); }
.sec.soft .sec-head p { color:#524B61; }

/* ---------- REVEAL ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}

/* ---------- FOOTER ---------- */
footer { background:var(--dark-2); color:#B6AEC8; padding:52px 0 40px; }
footer .fgrid { display:flex; align-items:flex-start; justify-content:space-between; gap:26px; flex-wrap:wrap; }
footer .brand .mark { filter:brightness(0) invert(1); }           /* marca en blanco sobre fondo oscuro */
footer .brand .name { color:#cfc8e0; } footer .brand .name b { color:#fff; }
footer .fcol { font-size:14px; display:flex; flex-direction:column; gap:9px; }
footer .fcol a:hover { color:#fff; text-decoration:underline; }
footer .fbottom { margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:#8f87a3; }

@media (max-width:760px) {
  .sec { padding:64px 0; }
  .sec-head { margin-bottom:36px; }
  .sec-head h2 { font-size:clamp(26px, 7vw, 34px); }
  footer { padding:40px 0 32px; }
}
/* ---------- NAV · desplegable "Servicios" ---------- */
.nav-item.has-sub { position:relative; display:flex; align-items:center; }
.nav-sub-toggle { background:none; border:none; font:inherit; cursor:pointer; color:var(--body); font-weight:500; font-size:14.5px;
  display:inline-flex; align-items:center; gap:5px; padding:0; transition:color .2s var(--ease); }
.nav-sub-toggle .caret { width:14px; height:14px; flex-shrink:0; transition:transform .25s var(--ease); }
.nav-sub-toggle:hover, .has-sub:hover .nav-sub-toggle, .has-sub:focus-within .nav-sub-toggle { color:var(--violet); }
.nav.compact .nav-sub-toggle { font-size:13.5px; }
.nav-sub { position:absolute; top:100%; left:0; transform:translateY(10px); min-width:230px;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:8px; box-shadow:0 24px 46px -24px rgba(60,13,89,.5);
  display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transition:opacity .2s var(--ease), transform .2s var(--ease); z-index:120; }
.nav-sub::before { content:''; position:absolute; top:-12px; left:0; right:0; height:12px; }
.has-sub:hover .nav-sub, .has-sub:focus-within .nav-sub, .has-sub.open .nav-sub { opacity:1; visibility:visible; transform:translateY(2px); }
.has-sub:hover .nav-sub-toggle .caret, .has-sub.open .nav-sub-toggle .caret { transform:rotate(180deg); }
.nav-sub a { padding:11px 14px; border-radius:10px; font-size:14px; color:var(--body); font-weight:500; white-space:nowrap; }
.nav-sub a:hover { background:#F5F1FC; color:var(--violet); }
@media (max-width:940px) {
  .nav-item.has-sub { display:block; width:100%; }
  .nav-sub-toggle { width:100%; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); color:var(--ink); font-size:14.5px; }
  .nav-sub { position:static; transform:none; opacity:1; visibility:visible; display:none; min-width:0; background:transparent; border:none; box-shadow:none; padding:2px 0 4px 10px; }
  .nav-sub::before { display:none; }
  .has-sub.open .nav-sub { display:flex; }
  .has-sub.open .nav-sub-toggle .caret { transform:rotate(180deg); }
}

/* viñetas pulsables: cursor:pointer hace que iOS dispare el click al tocar */
.ccard, .way, .opanel { cursor: pointer; -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1 !important; transform:none !important; }
  .nav-sub-toggle .caret { transition:none; }
}