/* =========================
     HOME (hn-*)
     ========================= */
     .home.-new {
        display: block;
        background: linear-gradient(#067022, #001d05);
        
      }
      
      /* --- HERO --- */
      .hn-hero {
        position: relative;
        width: 100%;
        height: 60vh;
        min-height: 360px;
        color: #fff;
        overflow: hidden;
        border: none;
        outline: none;
        box-shadow: none;
        
      }
      
      .hn-hero * {
        border: none;
        outline: none;
        box-shadow: none;
      }
      
      .hn-hero__video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      
      .hn-hero__overlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background:
          linear-gradient(180deg, rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, .35) 35%, rgba(0, 0, 0, .22) 70%, rgba(0, 0, 0, .16) 100%),
          radial-gradient(120% 100% at 50% 0%, rgba(21, 94, 64, .45), rgba(0, 0, 0, 0));
      }
      
      /* Logo (escritorio) */
      .hn-hero__logo {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 2;
        background: beige;
        border-radius: 12px;
      }
      
      .hn-hero__logo img {
        height: 92px;
        width: auto;
        display: block;
        border-radius: 8px;
        padding: 6px;
      }
      
      
      /* Texto (h1 arriba y span debajo) */
      .hn-hero__text {
        position: absolute;
        z-index: 2;
        top: 14px;
        right: 20px;
        left: auto;
        display: flex;
        flex-direction: column;
        gap: .45rem;
        width: 75%;
        margin: 0;
        text-align: center;
        background: rgba(255, 255, 255, .18);
        border-radius: 12px;
        padding: .35rem .5rem;
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
      }
      
      .hn-title {
        font-family: "Pinyon Script", cursive;
        font-weight: 400;
        font-style: normal;
        margin: 0;
        padding: .35rem .75rem;
        border-radius: 999px;
        font-size: clamp(30px, 4vw, 76px);
        line-height: 1.2;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
        color: #fff;
      }
      
      .hn-eyebrow {
        margin: 0;
        padding: .30rem .65rem;
        border-radius: 999px;
        font-weight: 600;
        font-size: clamp(14px, 1.8vw, 16px);
        text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
        color: #fff;
      }
      
      /* Botón flotante “Novedades” */
      .hn-news-fab {
        position: absolute;
        right: 16px;
        bottom: 16px;
        z-index: 3;
        display: inline-block;
        padding: .6rem .9rem;
        border-radius: 999px;
        background: #064c19;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        line-height: 1;
        filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .25));
        transition: transform .15s ease, filter .15s ease;
      }
      
      .hn-news-fab:focus-visible {
        outline: 3px solid rgba(21, 94, 64, .45);
        outline-offset: 2px;
      }
      
      .hn-news-fab:hover {
        transform: translateY(-1px);
      }
      
      /* --- Secciones base --- */
      .hn-section {
        margin: clamp(18px, 3vw, 32px) auto;
      }
      
      .container {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 var(--gap);
      }
      
      /* Dos columnas suaves */
      .hn-two {
        display: grid;
        gap: clamp(14px, 3vw, 24px);
        align-items: start;
        
      }
      
      @media (min-width: 900px) {
        .hn-two {
          grid-template-columns: 1.1fr .9fr;
        }
      }
      
      .hn-two__text__subtitle {
        text-align: center;
        font-size: clamp(2.5rem, 3.5vw, 3rem);
        margin-bottom: .5rem;
        color: var(--crema);
        font-family: "Pinyon Script";
        font-weight: 100;
        text-decoration: underline 1px;
      }
      
      .hn-two__text p {
        margin: .5rem 0;
        text-align: center;
        font-family: "Charm", cursive;
        font-weight: 200;
        font-style: normal;
        font-size: 20px;
        color: var(--crema);
        
      }
      
      .hn-two__media img,
      .hn-figure-video {
        width: 100%;
        border-radius: 12px;
        display: block;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
        text-align: center;
      }
      
      .hn-two__media figcaption {
        text-align: center;
        border-radius: 12px;
        color: var(--crema);
      }
      
      .muted {
        color: #666;
      }
      .relleno{
        color: var(--crema);
      }
      
      /* =========================
           Novedades
           ========================= */
      #lista-novedades {
        list-style: none;
        padding: 0;
        margin: 1.5rem auto 0;
        text-align: center;
        max-width: 80%;
      }
      
      #lista-novedades>li+li {
        margin-top: 2rem;
      }
      
      .nov-article {
        display: block;
      }
      
      .nov-title {
        margin: .25rem 0;
        font-size: clamp(1.15rem, 1.2rem + .2vw, 1.35rem);
        line-height: 1.25;
      }
      
      .nov-meta {
        margin: 0 0 .75rem;
        color: #667085;
        font-size: .95rem;
      }
      
      .nov-figure {
        margin: 0 0 .75rem;
      }
      
      .nov-figure img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
      }
      
      .nov-content {
        font-size: 1rem;
        line-height: 1.6;
      }
      
      .nov-content a {
        color: var(--verde);
        text-decoration: underline;
      }
      
      .nov-empty,
      .nov-error {
        color: #667085;
        padding: .5rem 0;
      }
      
      .nov-skel-line {
        height: 1rem;
        background: #eaeaea;
        border-radius: 6px;
        margin: .4rem 0;
        position: relative;
        overflow: hidden;
      }
      
      .nov-skel-line::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
        animation: nov-shimmer 1.1s infinite;
      }
      
      @keyframes nov-shimmer {
        0% {
          transform: translateX(-100%)
        }
      
        100% {
          transform: translateX(100%)
        }
      }
      
      /* =========================
           Botones genéricos
           ========================= */
      .btn {
        display: inline-block;
        padding: .75rem 1rem;
        border-radius: 10px;
        text-decoration: none;
        line-height: 1;
        border: 1px solid transparent;
        cursor: pointer;
        transition: filter .2s ease, background-color .2s ease, border-color .2s ease;
      }
      
      .btn--primary {
        background: var(--verde);
        color: #fff;
      }
      
      .btn--primary:hover {
        filter: brightness(.95);
      }
      
      .btn--ghost {
        background: transparent;
        color: var(--verde);
        border-color: var(--verde);
      }
      
      .btn--ghost:hover {
        background: rgba(21, 94, 64, .08);
      }
      
      .btn:focus-visible {
        outline: 3px solid rgba(21, 94, 64, .45);
        outline-offset: 2px;
        border-radius: 12px;
      }
      
      /* =========================
           Responsive específico home/hero
           ========================= */
      @media (max-width: 820px) {
        .hn-hero {
          height: 54vh;
        }
      
        .hn-hero__text {
          box-sizing: border-box;
          width: 80%;
          padding: .4rem .6rem;
          margin: 0 auto;
        }
      
        .hn-hero__logo img {
          height: 52px;
        }
      }
      
      @media (max-width: 640px) {
        .hn-hero {
          height: 48vh;
          min-height: 320px;
        }
      
        .hn-hero__logo {
          top: auto;
          bottom: 12px;
          left: 12px;
        }
      
        .hn-hero__logo img {
          height: 66px;
          padding: 4px;
        }
      
        .hn-hero__text {
          top: 10px;
          right: 12px;
          left: 12px;
          text-align: center;
          max-width: unset;
          padding: .4rem .6rem;
        }
      
        .hn-news-fab {
          right: 12px;
          bottom: calc(12px + env(safe-area-inset-bottom));
          padding: .55rem .85rem;
        }
      }
      
      /* =========================
           Movimiento reducido
           ========================= */
      @media (prefers-reduced-motion: reduce) {
        .hn-hero__video {
          animation: none !important;
        }
      }
      
      /* =========================
           Fix hero: neutralizar marcos heredados
           ========================= */
      .home.-new .hn-hero,
      .home.-new .hn-hero::before,
      .home.-new .hn-hero::after {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
      }
      
      .home.-new .hn-hero picture,
      .home.-new .hn-hero figure,
      .home.-new .hn-hero video,
      .home.-new .hn-hero img {
        display: block;
        border: 0 !important;
        outline: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        background-clip: padding-box !important;
      }
      
      .home.-new .hn-hero a,
      .home.-new .hn-hero a:focus,
      .home.-new .hn-hero a:focus-visible {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
      }