/* ══════════════════════════════════════════════════════════════
   ESCALA TIPOGRAFICA
   Todos los tamanos del sitio estan en rem, asi que suben o bajan
   desde aqui. 106.25% = 17px de base en vez de los 16px por
   defecto: la letra crece un 6% y las proporciones no cambian.
   Si algun dia se quiere mas o menos letra, se toca SOLO esto.
   ══════════════════════════════════════════════════════════════ */
html { font-size: 106.25%; }

/* ══════════════════════════════════════════════════════════════
   EL MENU · estilos compartidos
   Se carga en el indice y en TODOS los articulos.
   Cambiar algo aqui lo cambia en todas las paginas del blog.
   ══════════════════════════════════════════════════════════ */

    :root {
      --bg: #ffffff;
      --bg-mid: #f4f3ef;
      --bg-card: #ffffff;
      --orange: #e11b22;
      --orange-hot: #f5333a;
      --orange-glow: rgba(237,28,36,0.2);
      --white: #f0f4ff;
      --muted: #6e6e68;
      --border: rgba(255,255,255,0.07);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { background: #ffffff; color: #231f20; font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; overflow-x: hidden; }

    /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.2rem 5%;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(35,31,32,0.1);
  }
    .logo { font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-weight: 200; letter-spacing: -0.015em; font-size: 2rem; letter-spacing: 0.08em; color: #231f20; text-decoration: none; }
    .logo span { color: var(--orange); }
    nav ul {
    list-style: none;
    display: flex; gap: 2.5rem;
    align-items: center;
  }
    nav ul li { display: flex; align-items: center; }

    .nav-cta {
    background: var(--orange);
    color: #fff !important;
    padding: 0.55rem 1.4rem;
    border-radius: 3px;
    transition: background 0.25s, box-shadow 0.25s !important;
  }
    .lang-switcher {
    display: flex; align-items: center; gap: 0.4rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(35,31,32,0.12);
    border-radius: 30px;
    padding: 0.3rem 0.4rem;
    margin-left: 1.5rem;
  }
    .lang-btn {
    background: none; border: none; 
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif;
    font-size: 0.78rem; font-weight: 400;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #6e6e68;
    transition: background 0.2s, color 0.2s;
  }
    .lang-btn.active {
    background: var(--orange);
    color: #fff;
  }
    .lang-divider {
    width: 1px; height: 16px;
    background: var(--border);
    flex-shrink: 0;
  }
    .hamburger {
      display: none; flex-direction: column; justify-content: center; gap: 5px;
      background: none; border: none; width: 36px; height: 36px; padding: 4px; cursor: pointer; z-index: 200;
    }
    .hamburger span { display: block; width: 100%; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── HERO ── */
    .blog-hero {
      min-height: 50vh; display: flex; align-items: flex-end;
      padding: 5rem 5% 3rem; position: relative; overflow: hidden;
    }
    .hero-grid {
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(35,31,32,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(35,31,32,0.05) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
    }
    .orb { position: absolute; border-radius: 50%; filter: blur(80px); }
    .orb-1 { width: 500px; height: 500px; background: rgba(237,28,36,0.05); top: -100px; right: -100px; }
    .orb-2 { width: 300px; height: 300px; background: rgba(58,53,50,0.07); bottom: 0; left: 30%; }
    .hero-content { position: relative; z-index: 2; }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 0.6rem;
      font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-size: 0.75rem; font-weight: 400;
      letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 1.5rem;
    }
    .hero-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--orange); }
    h1 { font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-weight: 200; letter-spacing: -0.015em; font-size: clamp(3.5rem, 8vw, 7rem); line-height: 0.9; letter-spacing: 0.02em; margin-bottom: 1.5rem; }
    h1 .accent { color: var(--orange); }
    h1 .stroke { -webkit-text-stroke: 1px rgba(35,31,32,0.2); color: transparent; }
    .hero-sub { color: #6e6e68; font-size: 1rem; max-width: 550px; line-height: 1.6; }

    /* ── FILTER TABS ── */
    .filter-bar {
      padding: 2.5rem 5% 0;
      display: flex; gap: 0.8rem; flex-wrap: wrap;
      border-bottom: 1px solid rgba(35,31,32,0.1);
    }
    .filter-btn {
      font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-size: 0.75rem; font-weight: 400;
      letter-spacing: 0.12em; text-transform: uppercase;
      padding: 0.6rem 1.2rem; border-radius: 30px;
      border: 1px solid rgba(35,31,32,0.12); background: none;
      color: #6e6e68; cursor: pointer; transition: all 0.2s;
      margin-bottom: -1px;
    }
    .filter-btn:hover { color: #231f20; border-color: rgba(255,255,255,0.2); }
    .filter-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }

    /* ── FEATURED ARTICLE ── */
    .featured-wrap { padding: 4rem 5% 0; max-width: 1200px; margin: 0 auto; }
    .featured-label {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-size: 0.7rem; font-weight: 400;
      letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange);
      margin-bottom: 1.5rem;
    }
    .featured-card {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #ffffff; border: 1px solid rgba(35,31,32,0.1);
      border: 1px solid rgba(35,31,32,0.12); border-radius: 16px; overflow: hidden;
      background: #ffffff; cursor: pointer;
      transition: border-color 0.3s, transform 0.3s;
    }
    .featured-card:hover { border-color: rgba(225,27,34,0.4); transform: translateY(-4px); }
    .featured-img {
      min-height: 380px;
      background: linear-gradient(135deg, #1a1a18 0%, #061020 100%);
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .featured-img-icon { font-size: 6rem; opacity: 0.4; }
    .featured-img-bg {
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(225,27,34,0.15), rgba(255,255,255,0.8));
    }
    .featured-body { padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
    .article-category {
      display: inline-block; font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-size: 0.65rem;
      font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--orange); background: rgba(225,27,34,0.1);
      border: 1px solid rgba(225,27,34,0.2); padding: 0.3rem 0.8rem;
      border-radius: 20px; margin-bottom: 1.2rem;
    }
    .featured-body h2 { font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-weight: 200; letter-spacing: -0.015em; font-size: 2.2rem; line-height: 1.05; margin-bottom: 1rem; letter-spacing: 0.03em; }
    .featured-body p { color: #6e6e68; line-height: 1.7; font-size: 0.95rem; margin-bottom: 1.5rem; }
    .article-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
    .meta-item { font-size: 0.78rem; color: #6e6e68; display: flex; align-items: center; gap: 0.4rem; }
    .read-more {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-weight: 400; font-size: 0.8rem;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange);
      text-decoration: none; transition: gap 0.2s;
    }
    .read-more:hover { gap: 0.8rem; }

    /* ── ARTICLES GRID ── */
    .articles-section { padding: 4rem 5% 7rem; max-width: 1200px; margin: 0 auto; }
    .section-title {
      font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-weight: 200; letter-spacing: -0.015em; font-size: 1.5rem;
      letter-spacing: 0.1em; color: #6e6e68; margin-bottom: 2rem;
      display: flex; align-items: center; gap: 1rem;
    }
    .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .article-card {
      background: #ffffff; border: 1px solid rgba(35,31,32,0.12);
      border-radius: 12px; overflow: hidden; cursor: pointer;
      transition: border-color 0.3s, transform 0.3s;
      display: flex; flex-direction: column;
    }
    .article-card:hover { border-color: rgba(225,27,34,0.3); transform: translateY(-4px); }
    .card-img {
      height: 160px;
      display: flex; align-items: center; justify-content: center;
      font-size: 3rem; position: relative; overflow: hidden;
    }
    .card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
    .card-body h3 { font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.4; margin-bottom: 0.7rem; }
    .card-body p { color: #6e6e68; font-size: 0.85rem; line-height: 1.6; flex: 1; margin-bottom: 1rem; }
    .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
    .card-read { font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); text-decoration: none; }

    /* ── RESTAURANT SPECIAL SECTION ── */
    .resto-blog-section {
      background: #f4f3ef;
      padding: 6rem 5%;
    }
    .resto-blog-inner { max-width: 1200px; margin: 0 auto; }
    .resto-blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 3rem; }
    .resto-tip-card {
      background: #ffffff; border: 1px solid rgba(35,31,32,0.12);
      border-radius: 12px; padding: 2rem;
      display: flex; gap: 1.2rem; align-items: flex-start;
      transition: border-color 0.3s, transform 0.3s; cursor: pointer;
    }
    .resto-tip-card:hover { border-color: rgba(225,27,34,0.3); transform: translateY(-3px); }
    .tip-num {
      font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-weight: 200; letter-spacing: -0.015em; font-size: 2.5rem;
      color: rgba(225,27,34,0.2); line-height: 1; flex-shrink: 0; width: 2.5rem;
    }
    .tip-content h4 { font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-weight: 500; font-size: 0.95rem; margin-bottom: 0.5rem; }
    .tip-content p { color: #6e6e68; font-size: 0.85rem; line-height: 1.6; }

    /* ── ARTICLE MODAL ── */
    .modal-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
      z-index: 500; overflow-y: auto; padding: 2rem 5%;
    }
    .modal-overlay.active { display: flex; align-items: flex-start; justify-content: center; }
    .modal-box {
      background: #ffffff; border: 1px solid rgba(35,31,32,0.12);
      border-radius: 16px; max-width: 780px; width: 100%;
      margin: 4rem auto; padding: 3rem; position: relative;
      animation: modalIn 0.3s ease;
    }
    @keyframes modalIn { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
    .modal-close {
      position: absolute; top: 1.5rem; right: 1.5rem;
      background: rgba(255,255,255,0.07); border: none; color: #231f20;
      width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1rem;
      transition: background 0.2s;
    }
    .modal-close:hover { background: rgba(255,255,255,0.15); }
    .modal-category { margin-bottom: 1rem; }
    .modal-box h2 { font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-weight: 200; letter-spacing: -0.015em; font-size: 2.5rem; line-height: 1.05; margin-bottom: 1rem; letter-spacing: 0.03em; }
    .modal-meta { display: flex; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(35,31,32,0.1); }
    .modal-body h3 { font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-weight: 500; font-size: 1.1rem; margin: 2rem 0 0.8rem; color: var(--orange); }
    .modal-body p { color: #6e6e68; line-height: 1.8; font-size: 0.95rem; margin-bottom: 1rem; }
    .modal-body ul { color: #6e6e68; line-height: 1.8; font-size: 0.95rem; padding-left: 1.5rem; margin-bottom: 1rem; }
    .modal-body ul li { margin-bottom: 0.4rem; }
    .modal-body strong { color: #231f20; }
    .modal-cta {
      margin-top: 2.5rem; padding: 2rem; text-align: center;
      background: rgba(237,28,36,0.05); border: 1px solid rgba(225,27,34,0.2);
      border-radius: 12px;
    }
    .modal-cta p { color: #231f20; font-weight: 600; margin-bottom: 1rem; }
    .btn-orange {
      display: inline-block; background: var(--orange); color: #fff;
      font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-weight: 500; font-size: 0.85rem;
      letter-spacing: 0.1em; text-transform: uppercase; padding: 0.9rem 2rem;
      text-decoration: none; border-radius: 6px;
      clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
      transition: background 0.2s, transform 0.2s;
    }
    .btn-orange:hover { background: var(--orange-hot); transform: translateY(-2px); }

    /* ── FOOTER ── */
    footer {
      border-top: 1px solid rgba(35,31,32,0.1); padding: 2rem 5%;
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    }
    .footer-links { display: flex; gap: 2rem; list-style: none; }
    .footer-links a { color: #6e6e68; font-size: 0.8rem; text-decoration: none; transition: color 0.2s; }
    .footer-links a:hover { color: var(--orange); }
    .footer-copy { color: #6e6e68; font-size: 0.8rem; }
    .footer-copy span { color: var(--orange); }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .hamburger { display: flex; }
      nav ul {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: rgba(255,255,255,0.98); backdrop-filter: blur(20px);
        flex-direction: column; padding: 1.5rem 5%; gap: 0;
        border-bottom: 1px solid rgba(35,31,32,0.1); z-index: 150;
      }
      nav ul.open { display: flex; }
      nav ul li a { display: block; padding: 0.9rem 0; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
      nav ul li:last-child a { border-bottom: none; }
      .featured-card { grid-template-columns: 1fr; }
      .featured-img { min-height: 220px; }
      .articles-grid { grid-template-columns: 1fr; }
      .resto-blog-grid { grid-template-columns: 1fr; }
      footer { flex-direction: column; text-align: center; }
    }

  /* ── DROPDOWN MENU ── */
  .has-dropdown { position: relative; }
  .has-dropdown > a { display: flex; align-items: center; gap: 0.3rem; }
  .nav-arrow { font-size: 0.65rem; transition: transform 0.2s; display: inline-block; }
  .has-dropdown:hover .nav-arrow { transform: rotate(180deg); }
  .has-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 16px; }
  .dropdown {
    display: none; position: absolute; top: calc(100% + 16px); left: 50%;
    transform: translateX(-50%); background: #ffffff;
    border: 1px solid rgba(35,31,32,0.12); border-radius: 8px;
    min-width: 170px; box-shadow: 0 12px 40px rgba(35,31,32,0.12);
    z-index: 200; overflow: hidden; flex-direction: column; padding: 0.4rem 0;
  }
  .has-dropdown:hover .dropdown { display: flex; }
  .dropdown:hover { display: flex; }
  .dropdown li { list-style: none; }
  .dropdown li a {
    display: block; padding: 0.7rem 1.4rem;
    font-family: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #6e6e68 !important; text-decoration: none;
    transition: background 0.2s, color 0.2s; white-space: nowrap;
  }
  .dropdown li a:hover { background: #f4f3ef; color: #231f20 !important; }
  @media (max-width: 900px) {
    .has-dropdown::after { display: none; }
    .dropdown { position: static; transform: none; box-shadow: none; border: none;
      border-left: 2px solid var(--orange); border-radius: 0; margin-left: 1rem; background: #f4f3ef; }
    .has-dropdown:hover .dropdown, .has-dropdown.open .dropdown { display: flex; }
    .dropdown li a { padding: 0.5rem 1rem; font-size: 0.78rem; }
  }
  
  /* ══════ SISTEMA DE ICONOS: los cuatro puntos de tinta del logo ══════
     Los emojis anteriores eran dibujos multicolor que cambian de forma en
     cada sistema operativo y pelean con la tipografia ligera. En su lugar,
     el marcador es la propia marca: los puntos CMYK que estan dentro de
     la R de RUDAJO, en su orden K - Y - M - C.
     ═══════════════════════════════════════════════════════════════ */
  .ink-dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; flex-shrink: 0; vertical-align: baseline;
  }
  .ink-dot.dot-k { background: #231f20; }
  .ink-dot.dot-y { background: #ffe000; }
  .ink-dot.dot-m { background: #ec008c; }
  .ink-dot.dot-c { background: #00aeef; }

  .inc-icon, .paquete-icon, .cpop-icon,
  .value-icon, .featured-img-icon {
    display: flex; align-items: center;
    font-size: 0; line-height: 1;
  }
  .paquete-icon { margin-bottom: 1rem; }
  .paquete-icon .ink-dot { width: 14px; height: 14px; }
  .inc-icon { margin-top: 0.45rem; }
  .value-icon { margin-bottom: 0.9rem; }
  .value-icon .ink-dot { width: 13px; height: 13px; }


  /* ══════ SIN INTERNET: que nunca aparezca el icono de imagen rota ══════
     Si una imagen no carga, el navegador dibuja el cuadrito gris con la hoja
     partida. Se ve peor que no mostrar nada. Estas reglas hacen que una
     imagen fallida desaparezca sin dejar hueco, y que el video se oculte
     si no puede reproducirse.
     ══════════════════════════════════════════════════════════════ */
  img.img-failed { display: none !important; }
  video.media-failed { display: none !important; }
  .hero-video-wrap:has(video.media-failed) { display: none; }


  /* ═════════════ SUSCRIPCION AL BLOG ═════════════ */
  .sub-band { background: #231f20; padding: 4.5rem 5%; }
  .sub-inner { max-width: 620px; margin: 0 auto; text-align: center; }
  .sub-eyebrow {
    font-size: 0.7rem; font-weight: 400; letter-spacing: 0.3em;
    text-transform: uppercase; color: #ed1c24; margin-bottom: 1.1rem;
  }
  .sub-title {
    font-weight: 200; font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    line-height: 1.16; letter-spacing: -0.018em; color: #fafaf8; margin-bottom: 1rem;
  }
  .sub-copy { font-size: 1rem; line-height: 1.7; color: #b8b8b2; margin-bottom: 2rem; }
  .sub-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .sub-form input[type=email], .sub-form input[type=text] {
    flex: 1 1 230px; min-width: 0;
    background: rgba(250,250,248,0.06);
    border: 1px solid rgba(250,250,248,0.22);
    border-radius: 3px; padding: 0.85rem 1rem;
    color: #fafaf8; font-family: inherit; font-size: 0.95rem; font-weight: 300;
  }
  .sub-form input::placeholder { color: #8a8a84; }
  .sub-form input:focus {
    outline: none; border-color: #ed1c24;
    box-shadow: 0 0 0 3px rgba(237,28,36,0.18);
  }
  .sub-form button {
    background: #e11b22; color: #fff; border: 1px solid #e11b22;
    border-radius: 3px; padding: 0.85rem 1.7rem;
    font-family: inherit; font-size: 0.95rem; font-weight: 400;
    cursor: pointer; transition: background 0.2s;
  }
  .sub-form button:hover { background: #ed1c24; }
  .sub-form button:disabled { opacity: 0.55; cursor: default; }
  .sub-note { font-size: 0.8rem; color: #8a8a84; margin-top: 1.1rem; line-height: 1.6; }
  .sub-msg {
    display: none; margin-top: 1.2rem; padding: 0.9rem 1.1rem;
    border-radius: 3px; font-size: 0.92rem; line-height: 1.6;
  }
  .sub-msg.ok  { background: rgba(250,250,248,0.08); color: #fafaf8; border: 1px solid rgba(250,250,248,0.2); }
  .sub-msg.err { background: rgba(237,28,36,0.14); color: #ffb9bc; border: 1px solid rgba(237,28,36,0.4); }
  .sub-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  @media (max-width: 560px) { .sub-form input, .sub-form button { flex: 1 1 100%; } }


/* ══════════════════════════════════════════════════════════════════════
   EL BLOG COMO PERIODICO
   ══════════════════════════════════════════════════════════════════════
   Un periodico no se arma con tarjetas flotantes ni sombras: se arma con
   FILETES (lineas), COLUMNAS y JERARQUIA tipografica. Eso es lo que hace
   que se lea como prensa y no como blog de agencia.
   Reglas que se siguen aqui:
     · Cero esquinas redondeadas y cero sombras. Los periodicos no tienen.
     · Los filetes separan; no hay cajas.
     · La cabecera lleva su linea de fecha, como todo diario.
     · Cada nota va numerada, como en el indice de un impreso.
   ══════════════════════════════════════════════════════════════════ */

  .paper { max-width: 1080px; margin: 0 auto; padding: 0 5%; }

  /* ── Cabecera ── */
  .nameplate { padding: 3.5rem 0 0; text-align: center; }
  .nameplate-rule-top { border-top: 3px solid #231f20; }
  .nameplate-kicker {
    font-size: 0.62rem; letter-spacing: 0.42em; text-transform: uppercase;
    color: #6e6e68; padding: 0.9rem 0 0.4rem;
  }
  .nameplate-name {
    font-weight: 200; font-size: clamp(2.6rem, 8vw, 5.4rem);
    line-height: 0.98; letter-spacing: -0.03em; color: #231f20; margin: 0;
  }
  .nameplate-name .np-dot { color: #ed1c24; }
  .nameplate-motto {
    font-size: 0.88rem; font-style: italic; color: #6e6e68;
    margin: 0.7rem 0 1.1rem;
  }
  .folio {
    border-top: 1px solid #231f20; border-bottom: 1px solid #231f20;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem;
    padding: 0.5rem 0; font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: #4a4a46;
  }
  .folio span { white-space: nowrap; }

  /* ── Indice de secciones ── */
  /* La barra de secciones usa la etiqueta <nav>, igual que el menu de
     arriba. Por eso heredaba "position: fixed" y se pegaba al tope de
     la pantalla montandose sobre el logo. Aqui se anula todo lo que
     viene de la regla generica de <nav>. */
  .sections-bar {
    position: static;
    top: auto; left: auto; right: auto;
    z-index: auto;
    background: none;
    backdrop-filter: none;
    border-top: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.4rem;
    border-bottom: 1px solid rgba(35,31,32,0.2);
    padding: 0.75rem 0; margin-bottom: 2.5rem;
  }
  .sections-bar .filter-btn {
    background: none; border: 0; border-radius: 0; padding: 0.2rem 0;
    font-family: inherit; font-size: 0.72rem; font-weight: 400;
    letter-spacing: 0.18em; text-transform: uppercase; color: #6e6e68;
    cursor: pointer; border-bottom: 2px solid transparent; transition: color .18s;
  }
  .sections-bar .filter-btn:hover { color: #231f20; }
  .sections-bar .filter-btn.active {
    color: #231f20; border-bottom-color: #ed1c24; background: none;
  }

  /* ── Nota principal ── */
  .lead-story { border-bottom: 3px double rgba(35,31,32,0.4); padding-bottom: 2.5rem; margin-bottom: 2.5rem; cursor: pointer; }
  .lead-kicker {
    font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: #ed1c24; margin-bottom: 0.9rem;
  }
  .lead-headline {
    font-weight: 200; font-size: clamp(1.85rem, 4.6vw, 3.15rem);
    line-height: 1.1; letter-spacing: -0.022em; color: #231f20; margin: 0 0 1rem;
    max-width: 20ch;
  }
  .lead-story:hover .lead-headline { color: #7a1418; }
  .lead-deck {
    font-size: 1.06rem; line-height: 1.75; color: #4a4a46;
    max-width: 62ch; margin-bottom: 1.1rem;
  }
  .byline {
    font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: #6e6e68; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  }
  .byline .b-sep { color: rgba(35,31,32,0.3); }

  /* ── Columnas de notas ── */
  .section-heading {
    display: flex; align-items: center; gap: 1rem;
    font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: #6e6e68; margin-bottom: 1.6rem;
  }
  .section-heading::after { content: ''; flex: 1; height: 1px; background: rgba(35,31,32,0.2); }

  .articles-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 0; border-top: 1px solid rgba(35,31,32,0.18);
  }
  .story {
    display: flex; gap: 1rem; padding: 1.5rem 1.6rem 1.5rem 0;
    border-bottom: 1px solid rgba(35,31,32,0.14);
    border-right: 1px solid rgba(35,31,32,0.14);
    cursor: pointer; background: none;
    transition: background .18s;
  }
  .story:hover { background: rgba(35,31,32,0.028); }
  .story:focus-visible { outline: 2px solid #ed1c24; outline-offset: -2px; }
  .story-num {
    font-size: 0.72rem; color: #a8a8a2; flex-shrink: 0;
    padding-top: 0.2rem; min-width: 1.6rem; font-variant-numeric: tabular-nums;
  }
  .story-sec {
    font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: #ed1c24; display: block; margin-bottom: 0.45rem;
  }
  .story h3 {
    font-weight: 300; font-size: 1.06rem; line-height: 1.3;
    letter-spacing: -0.008em; color: #231f20; margin: 0 0 0.5rem;
  }
  .story p { font-size: 0.88rem; line-height: 1.65; color: #6e6e68; margin: 0 0 0.7rem; }
  .story-meta {
    font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #a8a8a2;
  }
  @media (max-width: 620px) {
    .story { padding-right: 0; border-right: 0; }
  }

  /* ── Suscripcion, en clave de prensa ── */
  .sub-band { background: #231f20; padding: 3.5rem 5%; }
  .sub-inner { max-width: 560px; margin: 0 auto; text-align: center; }
  .sub-rule { border-top: 1px solid rgba(250,250,248,0.3); margin-bottom: 1.6rem; }
  .sub-eyebrow { font-size: 0.62rem; letter-spacing: 0.36em; text-transform: uppercase; color: #ed1c24; margin-bottom: 1rem; }
  .sub-title { font-weight: 200; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.14; letter-spacing: -0.02em; color: #fafaf8; margin: 0 0 0.9rem; }
  .sub-copy { font-size: 0.97rem; line-height: 1.75; color: #b8b8b2; margin-bottom: 1.8rem; }


  /* ══════════════ SIN DESPLAZAMIENTO LATERAL EN EL CELULAR ══════════════
     La pagina se movia de lado porque algo medía mas ancho que la pantalla.
     Tres arreglos:
     1. overflow-x tambien en <html>, no solo en <body>. Con solo body no
        alcanza: el desbordamiento se escapa igual.
     2. Ninguna imagen, video o tabla puede pasarse del ancho disponible.
     3. Las palabras largas se parten en vez de empujar la caja.
     ══════════════════════════════════════════════════════════════ */
  html { overflow-x: hidden; max-width: 100%; }
  body { overflow-x: hidden; max-width: 100%; position: relative; }
  img, video, iframe, table, pre { max-width: 100%; }
  h1, h2, h3, p, li, a { overflow-wrap: break-word; }


  /* ══════════════ LA COLUMNA DE LA EDITORA ══════════════
     En un periodico esto es el editorial: la pagina donde el que dirige
     habla en primera persona. Por eso va centrado, con filete doble
     arriba y abajo, y con la firma al final. Es el unico texto del sitio
     que dice lo que el cliente TIENE que poner de su parte.
     ══════════════════════════════════════════════════════ */
  .editorial { background: var(--bg-deep); padding: 4.5rem 5% 5rem; }
  .editorial-inner {
    max-width: 620px; margin: 0 auto; text-align: center;
    border-top: 3px double rgba(35,31,32,0.35);
    border-bottom: 3px double rgba(35,31,32,0.35);
    padding: 2.6rem 0 2.4rem;
  }
  .editorial-kicker {
    font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase;
    color: #ed1c24; margin-bottom: 1.1rem;
  }
  .editorial-title {
    font-weight: 200; font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    line-height: 1.16; letter-spacing: -0.02em;
    color: #231f20; margin: 0 0 1.5rem;
  }
  .editorial p {
    font-size: 1.04rem; line-height: 1.85; color: #4a4a46;
    margin: 0 0 1.1rem; text-align: left;
  }
  .editorial p:last-of-type { margin-bottom: 0; }
  .editorial .cierre {
    text-align: center; font-style: italic; color: #231f20;
    padding-top: 1.3rem; margin-top: 1.4rem;
    border-top: 1px solid rgba(35,31,32,0.14);
  }
  .editorial-firma {
    font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: #6e6e68; margin-top: 1.6rem;
  }
  @media (max-width: 620px) { .editorial p { font-size: 0.98rem; } }


  /* ══════════════ ESPACIO PARA LA BARRA FIJA ══════════════
     La barra de arriba es position:fixed, o sea que flota y no ocupa
     lugar. Sin este espacio el contenido se le monta encima — que es
     justo lo que pasaba en el blog.
     Se pone en <body> y no en cada seccion, para que valga igual en
     todas las paginas y en las que se agreguen despues.
     ═══════════════════════════════════════════════════════ */
  body { padding-top: 74px; }
  @media (max-width: 900px) { body { padding-top: 66px; } }


  /* ══ ESTILOS DEL MENU, IGUALES A index.html ══
     El blog tenia una regla "nav ul li a" a nivel raiz que en realidad
     era la version de celular (sin color ni tipografia). Por eso los
     enlaces salian azules y subrayados. Estas son las reglas correctas.
     ══════════════════════════════════════════════════════ */
  nav ul a { font-family: "Jost", "Century Gothic", "Futura", "Avenir Next", "Trebuchet MS", system-ui, sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #6e6e68; text-decoration: none; transition: color 0.25s; }
  nav ul a:hover { color: #231f20; }
  .nav-cta:hover { background: var(--orange-hot) !important; box-shadow: 0 0 20px var(--orange-glow) !important; color: #fff !important; }

  .modal-body h3 {
    font-weight: 300; font-size: 1.2rem; color: #231f20;
    margin: 2rem 0 0.8rem; letter-spacing: -0.012em;
  }
  .modal-body h4 {
    font-weight: 400; font-size: 1rem; color: #231f20; margin: 1.4rem 0 0.5rem;
  }
  .modal-body p { font-size: 1rem; line-height: 1.85; color: #4a4a46; margin: 0 0 1rem; }
  .modal-body ul { margin: 0 0 1.2rem 1.2rem; }
  .modal-body li { font-size: 1rem; line-height: 1.7; color: #4a4a46; margin-bottom: 0.4rem; }
  .modal-body strong { color: #231f20; font-weight: 500; }
  #modalContent h2 {
    font-weight: 200; font-size: clamp(1.5rem, 3.2vw, 2.2rem);
    line-height: 1.18; letter-spacing: -0.02em; color: #231f20; margin: 0.6rem 0 0.8rem;
  }

  /* ══════════════════════════════════════════════════════════════
     PIE EN TRES COLUMNAS
     ══════════════════════════════════════════════════════════════
     OJO: las columnas de enlaces son <div>, NO <nav>.
     Este archivo tiene una regla "nav { position: fixed; top: 0 }"
     para la barra de arriba, y cualquier <nav> que se agregue en
     otra parte la hereda y se va al tope de la pantalla.
     Si alguna vez agregas un <nav> nuevo y sale flotando arriba,
     el problema es esa regla.
     ══════════════════════════════════════════════════════════════ */
  /* Blindaje: la barra fija solo aplica al <nav> hijo directo del body. */
  footer nav, .pie-cols nav {
    position: static; top: auto; left: auto; right: auto;
    z-index: auto; background: none; backdrop-filter: none;
    border: 0; padding: 0; display: block;
  }

  footer {
    display: block;              /* anula el flex de la version anterior */
    padding: 3.5rem 5% 0;        /* sin padding abajo: la franja negra cierra */
    overflow: hidden;            /* contiene los margenes negativos */
  }
  .pie-cols {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem; align-items: start;
    text-align: center;          /* todo centrado dentro de cada columna */
  }

  /* ── columna de marca ── */
  .pie-marca { display: flex; flex-direction: column; gap: 1.1rem; align-items: center; }
  .pie-logo img { height: 38px; width: auto; display: block; }
  .pie-tel {
    font-size: 0.9rem; color: #231f20; text-decoration: none;
    letter-spacing: 0.02em;
  }
  .pie-tel:hover { color: var(--orange); }

  /* Redes en blanco y negro. Toman color solo al pasar el cursor. */
  .pie-redes { display: flex; gap: 0.7rem; }
  .pie-redes a {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(35,31,32,0.16);
    color: #6e6e68; text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
  }
  .pie-redes a:hover { color: #fff; background: #231f20; border-color: #231f20; }

  /* ── columnas de enlaces ── */
  .pie-nav { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
  .pie-nav a {
    font-size: 0.88rem; color: #4a4a46; text-decoration: none;
    letter-spacing: 0.01em;
  }
  .pie-nav a:hover { color: var(--orange); }

  /* ── línea legal ── */
  /* Franja legal en negro, el mismo #231f20 de la banda de estadisticas.
     Va a todo el ancho de la pantalla, por eso los margenes negativos
     que compensan el padding lateral del <footer>. */
  .pie-legal {
    background: #231f20;
    margin: 2.8rem -5% 0; width: auto;
    padding: 1.5rem 5%;
    font-size: 0.78rem; color: #ffffff; line-height: 1.9;
    text-align: center;
  }
  .pie-legal strong { color: #ffffff; font-weight: 500; }
  .pie-legal a { color: #ffffff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.45); }
  .pie-legal a:hover { color: var(--orange); border-bottom-color: var(--orange); }
  .pie-sep { margin: 0 0.6rem; color: rgba(255,255,255,0.45); }

  /* ── celular: todo centrado y apilado ── */
  @media (max-width: 780px) {
    footer { padding: 3rem 6% 0; }
    .pie-cols { grid-template-columns: 1fr; gap: 2.2rem; justify-items: center; }
    .pie-nav { gap: 0.85rem; }
    .pie-legal { margin: 2.2rem -6% 0; padding: 1.4rem 6%; }
    .pie-sep { display: block; height: 0; overflow: hidden; margin: 0; }
  }