:root {
      --rojo: #d1091b;
      --rojo-700: #ac0816;
      --rojo-900: #6b0d13;
      --rojo-50: #fdecec;
      --ink: #17171a;
      --muted: #6a6a72;
      --line: #e8e8ea;
      --paper: #ffffff;
      --wash: #f6f6f7;
      --shadow: 0 1px 2px rgba(20, 20, 25, .04), 0 8px 24px rgba(20, 20, 25, .06);
      --shadow-lg: 0 2px 4px rgba(20, 20, 25, .05), 0 18px 44px rgba(107, 13, 19, .14);
      --radius: 16px;
      --display: 'Bricolage Grotesque', system-ui, sans-serif;
      --body: 'Inter', system-ui, sans-serif;
      --container: 1180px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--body);
      color: var(--ink);
      background: var(--paper);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }

    img { max-width: 100%; display: block; }

    .container { width: min(var(--container), 92%); margin-inline: auto; }

    h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }

    /* ---------- Eyebrow / section titles ---------- */
    .eyebrow {
      display: inline-flex; align-items: center; gap: .55rem;
      font-family: var(--display); font-weight: 700;
      font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
      color: var(--rojo); margin-bottom: 1.25rem;
    }
    .eyebrow::before {
      content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--rojo);
    }

    .section { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }

    /* ================= TOP BAR ================= */
    .topbar { background: #121214; color: #fff; font-size: .82rem; }
    .topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 46px; flex-wrap: nowrap; }
    .topbar-links { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; gap: .4rem .5rem; }
    .topbar-links a {
      padding: .32rem .85rem; border-radius: 999px; font-weight: 600; letter-spacing: .01em;
      color: #fff; background: linear-gradient(180deg, var(--rojo), var(--rojo-700));
      box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
      transition: transform .18s ease, box-shadow .2s ease, filter .18s ease;
    }
    .topbar-links a:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 6px 16px rgba(209, 9, 27, .5); }
    .topbar-social { display: flex; gap: .5rem; flex: 0 0 auto; padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .12); }
    .topbar-social a {
      width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
      background: rgba(255, 255, 255, .1); transition: background .18s ease, transform .18s ease, color .18s ease;
    }
    .topbar-social a:hover { background: var(--rojo); color: #fff; transform: translateY(-2px); }
    .topbar-social svg { width: 15px; height: 15px; }

    /* ================= HEADER ================= */
    .masthead { border-bottom: 1px solid var(--line); }
    .masthead .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1.15rem 0; }
    .autogestion {
      display: inline-flex; flex-direction: column; align-items: center; gap: .35rem;
      justify-self: start; padding: .5rem .8rem; border-radius: 14px; transition: background .18s ease;
    }
    .autogestion:hover { background: var(--rojo-50); }
    .autogestion .ring {
      width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
      border: 1.5px solid var(--rojo); color: var(--rojo);
    }
    .autogestion span { font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .06em; color: var(--ink); }
    .brand { justify-self: center; display: flex; align-items: center; gap: .8rem; }
    .brand-mark {
      width: 52px; height: 52px; border-radius: 14px; background: var(--rojo);
      color: #fff; display: grid; place-items: center; font-family: var(--display);
      font-weight: 800; font-size: 1.25rem; letter-spacing: -.03em; box-shadow: var(--shadow);
    }
    .brand-text b { font-family: var(--display); font-size: 1.55rem; color: var(--rojo); letter-spacing: -.02em; display: block; line-height: 1; }
    .brand-text small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

    /* ================= NAV ================= */
    .nav { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
    .nav .container { display: flex; align-items: center; justify-content: space-between; }
    .nav-list { list-style: none; display: flex; align-items: stretch; }
    .nav-list > li { position: relative; }
    .nav-list > li > a {
      display: flex; align-items: center; gap: .3rem; height: 54px; padding: 0 1rem;
      font-family: var(--display); font-weight: 600; font-size: .86rem; letter-spacing: .01em;
      color: var(--ink); position: relative; transition: color .16s ease;
    }
    .nav-list > li > a::after {
      content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 3px;
      background: var(--rojo); border-radius: 3px 3px 0 0; transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
    }
    .nav-list > li:hover > a { color: var(--rojo); }
    .nav-list > li:hover > a::after { transform: scaleX(1); }
    .caret { width: 9px; height: 9px; opacity: .55; }

    .submenu {
      position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff;
      border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
      padding: .5rem; list-style: none; opacity: 0; visibility: hidden; transform: translateY(8px);
      transition: opacity .18s ease, transform .18s ease; z-index: 70;
    }
    .nav-list > li:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
    .submenu li { position: relative; }
    .submenu a {
      display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: 8px;
      font-size: .86rem; font-weight: 500; color: #33333a; transition: background .14s ease, color .14s ease;
    }
    .submenu a:hover { background: var(--rojo-50); color: var(--rojo-700); }
    .submenu a .dot { color: var(--rojo); font-size: .7rem; }
    .submenu .submenu { top: -.5rem; left: 100%; }
    .submenu li:hover > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
    .has-child > a { justify-content: space-between; }

    .nav-toggle { display: none; background: var(--rojo); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; }
    .nav-toggle svg { width: 22px; height: 22px; margin: auto; }

    /* ================= HERO ================= */
    .hero { padding-top: 2rem; }
    .hero .container { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; }

    .slider { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--ink); }
    .slides { position: relative; aspect-ratio: 16/9; }
    .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; z-index: 1; }
    .slide.prev { visibility: visible; z-index: 1; animation: sfOut 1s ease both; }
    .slide.active { opacity: 1; visibility: visible; z-index: 2; }

    /* disolvencia + efectos de entrada (rotan). Todos arrancan transparentes para que el cambio sea suave */
    .slide.active.fx-fade { animation: sfFade 1s ease both; }
    .slide.active.fx-zoom { animation: sfZoom 1.1s cubic-bezier(.2, .7, .2, 1) both; }
    .slide.active.fx-left { animation: sfLeft 1s cubic-bezier(.2, .7, .2, 1) both; }
    .slide.active.fx-right { animation: sfRight 1s cubic-bezier(.2, .7, .2, 1) both; }
    .slide.active.fx-up { animation: sfUp 1s cubic-bezier(.2, .7, .2, 1) both; }
    .slide.active.fx-blur { animation: sfBlur 1s ease both; }
    @keyframes sfOut { from { opacity: 1; } to { opacity: 0; } }
    @keyframes sfFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes sfZoom { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: scale(1); } }
    @keyframes sfLeft { from { opacity: 0; transform: translateX(6%); } to { opacity: 1; transform: translateX(0); } }
    @keyframes sfRight { from { opacity: 0; transform: translateX(-6%); } to { opacity: 1; transform: translateX(0); } }
    @keyframes sfUp { from { opacity: 0; transform: translateY(6%); } to { opacity: 1; transform: translateY(0); } }
    @keyframes sfBlur { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }
    /* leve movimiento continuo de la imagen activa */
    .slide.active .slide-media img { animation: kenburns 7s ease-out both; }
    .slide .ph { position: absolute; inset: 0; display: grid; place-items: center; }
    .slide-1 .ph { background: radial-gradient(120% 120% at 80% 0%, #e0662e, #b8431f); }
    .slide-2 .ph { background: radial-gradient(120% 120% at 20% 10%, #d1091b, var(--rojo-900)); }
    .slide-3 .ph { background: radial-gradient(120% 120% at 60% 20%, #3a6ea5, #1e3a5f); }
    .slide .ph em { color: rgba(255, 255, 255, .5); font-style: normal; font-family: var(--display); font-weight: 700; font-size: 1rem; }
    .slide-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #fff; }
    .slide-cap .tag { display: inline-block; background: var(--rojo); color: #fff; font-family: var(--display); font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: .28rem .7rem; border-radius: 999px; margin-bottom: .6rem; }
    .slide-cap h2 { font-size: clamp(1.1rem, 2.3vw, 1.6rem); }
    .slide-cap p { font-size: .9rem; opacity: .85; margin-top: .3rem; }
    .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .16s ease; z-index: 3; }
    .slider-btn:hover { background: var(--rojo); }
    .slider-btn.prev { left: 14px; } .slider-btn.next { right: 14px; }
    .dots { position: absolute; bottom: 14px; right: 18px; display: flex; gap: .4rem; z-index: 3; }
    .dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .5); cursor: pointer; padding: 0; }
    .dots button.active { background: #fff; width: 22px; border-radius: 5px; }

    .hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 1.2rem; }
    .side-card { position: relative; border-radius: var(--radius); overflow: hidden; color: #fff; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
    .side-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
    .side-card.denuncias { background: linear-gradient(150deg, #8a0f18, var(--rojo-900)); }
    .side-card.novedades { background: linear-gradient(150deg, var(--rojo), var(--rojo-700)); }
    .side-card .ico { position: absolute; top: 1.2rem; right: 1.2rem; opacity: .28; }
    .side-card .ico svg { width: 52px; height: 52px; }
    .side-card h3 { font-size: 1.15rem; }
    .side-card span { font-size: .85rem; opacity: .85; display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem; }

    /* ================= CARD GRIDS ================= */
    .grid { display: grid; gap: 1.1rem; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }

    .dept {
      position: relative; border-radius: var(--radius); padding: 1.6rem 1.4rem; color: #fff; overflow: hidden;
      min-height: 128px; display: flex; flex-direction: column; justify-content: space-between;
      box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
    }
    .dept::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
    .dept:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
    .dept h3 { font-size: 1.15rem; position: relative; z-index: 1; }
    .dept .meta { font-size: .9rem; opacity: .9; position: relative; z-index: 1; }
    .dept .meta b { font-weight: 700; }
    .dept .go { position: relative; z-index: 1; font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; }
    .c-red { background: linear-gradient(150deg, var(--rojo), var(--rojo-700)); }
    .c-deep { background: linear-gradient(150deg, #8a0f18, var(--rojo-900)); }
    .c-ink { background: linear-gradient(150deg, #303036, #1a1a1e); }

    /* banners row */
    .banner { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-align: center; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
    .banner:hover { transform: translateY(-4px); border-color: var(--rojo); box-shadow: var(--shadow-lg); }
    .banner .ph { aspect-ratio: 16/10; background: #fbfbfc; display: grid; place-items: center; overflow: hidden; padding: 10px; }
    .banner .ph img { width: 100%; height: 100%; transition: transform .35s ease; }
    .banner:hover .ph img { transform: scale(1.05); }
    .banner b { display: block; font-family: var(--display); font-size: .95rem; padding: .85rem 1rem; border-top: 1px solid var(--line); }

    /* ================= NEWS + LINKS ================= */
    .news-wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 1.6rem; }
    .news-item { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); align-items: center; }
    .news-item:hover .news-thumb { transform: scale(1.03); }
    .news-thumb { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: var(--wash); transition: transform .25s ease; }
    .news-thumb .ph { width: 100%; height: 100%; background: linear-gradient(150deg, #d9d9df, #bcbcc6); display: grid; place-items: center; color: #fff; font-size: .72rem; font-family: var(--display); font-weight: 700; }
    .news-item h4 { font-size: 1.02rem; font-weight: 600; transition: color .16s ease; }
    .news-item:hover h4 { color: var(--rojo); }
    .sub-eyebrow { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--rojo); margin: 1.4rem 0 .3rem; }

    .links-panel { background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; align-self: start; }
    .links-panel ul { list-style: none; }
    .links-panel li a { display: flex; align-items: center; gap: .75rem; padding: .6rem .4rem; border-radius: 10px; font-size: .88rem; font-weight: 500; transition: background .14s ease, color .14s ease; }
    .links-panel li a:hover { background: #fff; color: var(--rojo-700); }
    .links-panel .li-ico { flex: 0 0 34px; height: 34px; border-radius: 9px; background: var(--rojo-50); color: var(--rojo); display: grid; place-items: center; }
    .links-panel .li-ico svg { width: 17px; height: 17px; }

    /* ================= ACCESOS ================= */
    .access {
      background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; text-align: center;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; align-items: center; gap: .7rem;
    }
    .access:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
    .access .circle {
      width: 66px; height: 66px; border-radius: 50%; background: linear-gradient(150deg, var(--rojo), var(--rojo-700));
      color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(172, 8, 22, .28);
    }
    .access .circle svg { width: 28px; height: 28px; }
    .access b { font-family: var(--display); font-size: .95rem; }
    .access small { color: var(--muted); font-size: .8rem; line-height: 1.35; }

    /* ================= NEWSLETTER ================= */
    .newsletter { background: linear-gradient(150deg, var(--rojo-900), #4a0a0f); border-radius: calc(var(--radius) + 4px); padding: clamp(1.8rem, 4vw, 2.8rem); text-align: center; color: #fff; }
    .newsletter h3 { font-size: clamp(1.3rem, 3vw, 1.9rem); }
    .newsletter p { opacity: .8; margin-top: .4rem; font-size: .95rem; }
    .nl-form { display: flex; gap: .6rem; max-width: 520px; margin: 1.4rem auto 0; flex-wrap: wrap; }
    .nl-form input { flex: 1; min-width: 220px; padding: .85rem 1.1rem; border-radius: 12px; border: 0; font-size: .95rem; font-family: var(--body); }
    .nl-form button { padding: .85rem 1.6rem; border-radius: 12px; border: 0; background: #fff; color: var(--rojo-900); font-family: var(--display); font-weight: 700; cursor: pointer; transition: transform .16s ease, background .16s ease; }
    .nl-form button:hover { transform: translateY(-2px); }

    /* ================= FOOTER ================= */
    footer { background: #131316; color: #cfcfd6; padding: 3rem 0 1.5rem; margin-top: 3rem; }
    .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; }
    .foot-title { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; position: relative; padding-left: .8rem; }
    .foot-title::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--rojo); }
    .foot-grid p, .foot-grid li { font-size: .88rem; line-height: 1.7; }
    .foot-contact li { display: flex; gap: .6rem; align-items: center; margin-top: .5rem; color: #cfcfd6; }
    .foot-contact svg { width: 16px; height: 16px; color: var(--rojo); flex: 0 0 16px; }
    .foot-cats { list-style: none; }
    .foot-cats li a { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; transition: color .14s ease; }
    .foot-cats li a:hover { color: #fff; }
    .foot-cats svg { width: 14px; height: 14px; color: var(--rojo); }
    .foot-social { display: flex; gap: .6rem; margin-top: 1.1rem; }
    .foot-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: grid; place-items: center; transition: background .16s ease; }
    .foot-social a:hover { background: var(--rojo); color: #fff; }
    .foot-social svg { width: 16px; height: 16px; }
    .copyright { text-align: center; border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .82rem; color: #8a8a94; }

    /* back to top */
    .to-top { position: fixed; right: 22px; bottom: 22px; width: 48px; height: 48px; border-radius: 50%; background: var(--rojo); color: #fff; border: 0; cursor: pointer; box-shadow: var(--shadow-lg); display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .22s ease; z-index: 80; }
    .to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
    .to-top svg { width: 22px; height: 22px; }

    /* ================= RESPONSIVE ================= */
    @media (max-width: 980px) {
      .hero .container { grid-template-columns: 1fr; }
      .hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .news-wrap { grid-template-columns: 1fr; }
      .foot-grid { grid-template-columns: 1fr; gap: 1.6rem; }
    }
    @media (max-width: 760px) {
      .nav-toggle { display: block; }
      .nav .container { min-height: 60px; }
      .nav-list {
        position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
        background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
        max-height: 0; overflow: hidden; transition: max-height .3s ease;
      }
      .nav-list.open { max-height: 80vh; overflow-y: auto; }
      .nav-list > li > a { height: auto; padding: .9rem 5%; border-bottom: 1px solid var(--line); }
      .nav-list > li > a::after { display: none; }
      .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; background: var(--wash); padding: .3rem 5% .6rem; display: none; }
      .nav-list > li.mob-open .submenu { display: block; }
      .submenu .submenu { display: none; }
      .grid-3 { grid-template-columns: 1fr; }
      .masthead .container { grid-template-columns: auto 1fr; }
      .brand { justify-self: end; }
      .brand-text b { font-size: 1.2rem; }
    }
    @media (max-width: 480px) {
      .hero-side { grid-template-columns: 1fr; }
    }

    /* ===== FX: preloader ===== */
    .preloader { position: fixed; inset: 0; background: #fff; display: grid; place-items: center; z-index: 300; transition: opacity .5s ease, visibility .5s ease; }
    .preloader.hidden { opacity: 0; visibility: hidden; }
    .preloader .pl-mark { width: 66px; height: 66px; border-radius: 18px; background: var(--rojo); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.5rem; box-shadow: var(--shadow-lg); animation: plpulse 1.1s ease-in-out infinite; }
    @keyframes plpulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(209, 9, 27, .35); } 50% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(209, 9, 27, 0); } }

    /* ===== FX: reading progress ===== */
    .progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--rojo), #ff5a48); z-index: 200; transition: width .12s linear; }

    /* ===== FX: nav shrink ===== */
    .nav { transition: box-shadow .25s ease, background .25s ease; }
    .nav.shrink { box-shadow: 0 6px 24px rgba(20, 20, 25, .09); }
    .nav.shrink .nav-list > li > a { height: 46px; }

    /* ===== FX: scroll reveal ===== */
    .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
    .reveal.in-view { opacity: 1; transform: none; }

    /* ===== FX: Ken Burns + caption on active slide ===== */
    .slide .ph { transition: transform .6s ease; }
    @keyframes kenburns { from { transform: scale(1.09); } to { transform: scale(1); } }
    .slide .slide-cap { transform: translateY(14px); opacity: 0; transition: transform .6s ease .12s, opacity .6s ease .12s; }
    .slide.active .slide-cap { transform: none; opacity: 1; }

    /* ===== FX: sheen sweep on colored cards ===== */
    .dept::before, .side-card::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
      background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .22) 48%, transparent 62%);
      background-size: 220% 100%; background-position: 180% 0; transition: background-position .75s ease;
    }
    .dept:hover::before, .side-card:hover::before { background-position: -40% 0; }
    .dept .go { transition: transform .2s ease; }
    .dept:hover .go { transform: translateX(4px); }

    /* ===== FX: accesos circle ===== */
    .access .circle { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1); }
    .access:hover .circle { transform: scale(1.1) rotate(-5deg); }

    /* ===== FX: newsletter animated gradient ===== */
    .newsletter { background: linear-gradient(120deg, var(--rojo-900), #7a0f18, #4a0a0f, var(--rojo-900)); background-size: 300% 300%; animation: grad 14s ease infinite; }
    @keyframes grad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

    /* ===== FX: topbar (manejado en el bloque .topbar de arriba) ===== */

    @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; scroll-behavior: auto; }
      .slide .ph, .newsletter, .preloader .pl-mark, .nl-form button, .modal-slide, .modal-card { animation: none !important; }
      .slide.active, .slide.prev, .slide.active .slide-media img { animation: none !important; }
      .reveal { opacity: 1 !important; transform: none !important; }
      .slide .slide-cap { opacity: 1 !important; transform: none !important; }
    }
  
    /* ===== slider media real (tabla rotativo) ===== */
    .slide-media { position: absolute; inset: 0; }
    .slide-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* ===== FX: botón de suscripción que "late" ===== */
    .nl-form button { animation: nlpulse 1.8s ease-in-out infinite; }
    @keyframes nlpulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); transform: translateY(0); }
      70% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
    }
    .nl-form button:hover { animation-play-state: paused; transform: translateY(-2px) scale(1.02); }

    /* ===== MODAL / POPUP moderno ===== */
    .cfc-modal { position: fixed; inset: 0; z-index: 250; display: none; align-items: center; justify-content: center; padding: 1.2rem; }
    .cfc-modal.open { display: flex; }
    .cfc-modal .backdrop { position: absolute; inset: 0; background: rgba(20, 10, 12, .55); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s ease; }
    .cfc-modal.open .backdrop { opacity: 1; }
    .modal-card { position: relative; width: min(560px, 100%); background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); transform: scale(.86) translateY(30px); opacity: 0; transition: transform .5s cubic-bezier(.25, .46, .45, .94), opacity .4s ease; }
    .cfc-modal.open .modal-card { transform: none; opacity: 1; }
    .modal-head { background: linear-gradient(135deg, #ff3b3b, var(--rojo-700)); color: #fff; text-align: center; padding: 1rem 1.2rem; font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: .3px; }
    .modal-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; background: var(--rojo); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 3; transition: transform .3s ease, background .3s ease; box-shadow: var(--shadow); }
    .modal-close:hover { transform: rotate(90deg) scale(1.06); background: var(--rojo-900); }
    .modal-progress { height: 3px; background: rgba(209, 9, 27, .18); }
    .modal-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rojo), #ff5a48); }
    .modal-body { position: relative; }
    .modal-slide { display: none; padding: 16px; }
    .modal-slide.active { display: block; animation: mfade .5s ease; }
    @keyframes mfade { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
    .modal-slide img { width: 100%; height: auto; border-radius: 14px; display: block; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
    .modal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--rojo); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow); opacity: 0; transition: opacity .3s ease; z-index: 2; }
    .modal-body:hover .modal-nav { opacity: 1; }
    .modal-nav.prev { left: 20px; } .modal-nav.next { right: 20px; }
    .modal-nav svg { width: 20px; height: 20px; }
    .modal-foot { text-align: center; padding: 1rem; background: #faf7f7; }
    .modal-foot button { background: transparent; color: var(--rojo); border: 2px solid var(--rojo); border-radius: 25px; padding: .6rem 1.6rem; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: .82rem; letter-spacing: .5px; cursor: pointer; transition: all .25s ease; display: inline-flex; align-items: center; gap: .5rem; }
    .modal-foot button:hover { background: var(--rojo); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(209, 9, 27, .3); }

    /* ===== Mobile: interacción táctil y ajustes ===== */
    .dept:active, .access:active, .banner:active, .side-card:active, .news-item:active, .to-top:active,
    .nl-form button:active, .modal-foot button:active { transform: scale(.98); }
    .nav-brand { display: none; }
    .nav-brand img { height: 30px; width: auto; display: block; }

    /* En dispositivos sin hover (touch) mostramos siempre las flechas del modal */
    @media (hover: none) {
      .modal-nav { opacity: 1; }
      .slider-btn { background: rgba(0, 0, 0, .35); }
    }

    @media (max-width: 760px) {
      /* Barra de accesos: una sola fila deslizable en vez de amontonarse */
      .topbar .container { flex-wrap: nowrap; gap: .6rem; min-height: 46px; }
      .topbar-links { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
      .topbar-links::-webkit-scrollbar { display: none; }
      .topbar-links a { white-space: nowrap; }
      .topbar-social { flex: 0 0 auto; }

      /* Logo compacto en la barra fija al scrollear */
      .nav-brand { display: block; margin-left: auto; }
      .nav-list > li > a .caret { transition: transform .2s ease; }
      .nav-list > li.mob-open > a .caret { transform: rotate(180deg); }

      .modal-nav { opacity: 1; }
      .slide-cap { padding: 1.1rem; }
      .slide-cap h2 { font-size: 1.05rem; }
    }

    @media (max-width: 380px) {
      .topbar-social { display: none; }
      .brand-mark { width: 44px; height: 44px; font-size: 1.05rem; }
    }

    /* ===== Mobile: accesos de arriba rotan solos (marquee) ===== */
    .marquee-track { display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
    @media (max-width: 760px) {
      .topbar-links.is-marquee { overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
      .topbar-links.is-marquee .marquee-track { flex-wrap: nowrap; width: max-content; animation: marquee 22s linear infinite; }
      .topbar-links.is-marquee .marquee-track:active { animation-play-state: paused; }
      @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    }