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

    :root {
      --gold-dark: #69531b;
      --gold:      #c2a66e;
      --brown:     #6c5336;
      --black:     #1d1b1e;
      --cream:     #efebe0;
    }

    html, body {
      background: #fff;
      color: var(--black);
      font-family: 'Montserrat', sans-serif;
      overflow-x: hidden;
    }
    /* ══ SCROLLBAR ══ */
    @supports (scrollbar-width: auto) {
      html { scrollbar-color: #c2a66e #fff; scrollbar-width: thin; }
    }
    @supports selector(::-webkit-scrollbar) {
      html::-webkit-scrollbar       { width: 4px; }
      html::-webkit-scrollbar-track { background: #fff; }
      html::-webkit-scrollbar-thumb { background: #c2a66e; }
    }

    /* ══ NAV ══ */
    .art-nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,0.94);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(194,166,110,0.15);
      padding: 18px clamp(24px, 6vw, 80px);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .art-nav-back {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      font-size: 0.65rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(29,27,30,0.75);
      transition: color .3s;
    }
    .art-nav-back:hover { color: var(--gold-dark); }
    .art-nav-back svg {
      width: 14px; height: 14px;
      stroke: currentColor; fill: none; stroke-width: 1.5;
      transition: transform .3s;
    }
    .art-nav-back:hover svg { transform: translateX(-3px); }

    .art-nav-logo {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: 1.1rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--black);
      text-decoration: none;
    }

    .art-nav-share {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .share-label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      font-size: 0.58rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: rgba(29,27,30,0.65);
    }

    .share-btn {
      width: 32px; height: 32px;
      border: 1px solid rgba(194,166,110,0.3);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      text-decoration: none;
      transition: background .3s, border-color .3s;
    }
    .share-btn:hover { background: var(--gold); border-color: var(--gold); }
    .share-btn svg { width: 13px; height: 13px; fill: rgba(29,27,30,0.6); transition: fill .3s; }
    .share-btn:hover svg { fill: #fff; }

    /* ══ HEADER ARTÍCULO — centrado ══ */
    .art-header {
      max-width: 780px;
      margin: 0 auto;
      padding: clamp(72px, 12vh, 120px) clamp(24px, 6vw, 48px) clamp(56px, 8vh, 80px);
      text-align: center;
    }

    .art-category {
      font-family: 'Montserrat', sans-serif;
      font-weight: 400;
      font-size: 0.62rem;
      letter-spacing: 0.45em;
      text-transform: uppercase;
      color: var(--gold-dark);
      margin-bottom: 28px;
    }

    .art-rule {
      width: 36px; height: 1px;
      background: var(--gold);
      margin: 0 auto 32px;
    }

    .art-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      line-height: 1.18;
      color: var(--black);
      letter-spacing: 0.02em;
      margin-bottom: 36px;
    }

    .art-title em { font-style: italic; color: var(--brown); }

    .art-meta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-bottom: 40px;
    }

    .art-meta-author {
      font-family: 'Montserrat', sans-serif;
      font-weight: 400;
      font-size: 0.72rem;
      color: var(--black);
    }

    .art-meta-dot {
      width: 4px; height: 4px;
      background: var(--gold);
      border-radius: 50%;
    }

    .art-meta-date,
    .art-meta-read {
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      font-size: 0.72rem;
      color: rgba(29,27,30,0.65);
    }

    .art-excerpt {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(1.1rem, 1.8vw, 1.3rem);
      line-height: 1.75;
      color: rgba(29,27,30,0.6);
      max-width: 600px;
      margin: 0 auto;
    }

    /* ══ IMAGEN HERO — ancho completo ══ */
    .art-hero-img {
      width: 100%;
      height: clamp(320px, 55vh, 620px);
      overflow: hidden;
      position: relative;
    }

    .art-hero-img img {
      width: 100%; height: 100%;
      object-fit: cover;
      filter: saturate(0.82);
      transform: scale(1.04);
    }

    /* ══ CONTENIDO ══ */
    .art-content {
      max-width: 680px;
      margin: 0 auto;
      padding: clamp(56px, 9vh, 90px) clamp(24px, 6vw, 48px);
    }

    .art-content p, ul, ol {
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      font-size: clamp(0.88rem, 1.2vw, 0.97rem);
      line-height: 2.05;
      color: rgba(29,27,30,0.78);
      margin-bottom: 28px;
    }

    .art-content h2 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: clamp(1.5rem, 2.5vw, 2rem);
      color: var(--black);
      margin: 52px 0 22px;
      letter-spacing: 0.02em;
      line-height: 1.25;
    }

    .art-content h2 em { font-style: italic; color: var(--brown); }

    .art-content blockquote {
      border-left: 2px solid var(--gold);
      padding: 6px 0 6px 28px;
      margin: 44px 0;
    }

    .art-content blockquote p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      color: var(--brown);
      line-height: 1.65;
      margin: 0;
    }

    /* ══ FILA DE 3 IMÁGENES ══ */
    .art-gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin: 0 0 clamp(56px, 8vh, 90px);
    }

    .art-gallery-item {
      overflow: hidden;
      height: clamp(220px, 30vw, 400px);
    }

    .art-gallery-item img {
      width: 100%; height: 100%;
      object-fit: cover;
      filter: saturate(0.8);
      transform: scale(1);
      transition: transform 1s cubic-bezier(.25,.46,.45,.94), filter 1s ease;
      display: block;
    }

    .art-gallery-item:hover img {
      transform: scale(1.06);
      filter: saturate(1);
    }

    @media (max-width: 600px) {
      .art-gallery { grid-template-columns: 1fr; }
      .art-gallery-item { height: 72vw; }
    }

    /* ══ CTA ══ */
    .art-cta {
      background: var(--black);
      padding: clamp(64px, 10vh, 100px) clamp(32px, 8vw, 100px);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .art-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg,
        rgba(194,166,110,0.05) 0%,
        transparent 50%,
        rgba(194,166,110,0.04) 100%
      );
    }

    .art-cta-label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 200;
      font-size: 0.58rem;
      letter-spacing: 0.45em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 20px;
      position: relative;
    }

    .art-cta-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      color: var(--cream);
      line-height: 1.25;
      margin-bottom: 36px;
      position: relative;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }

    .art-cta-title em { font-style: italic; color: var(--gold); }

    .art-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 16px 48px;
      border: 1px solid var(--gold);
      color: var(--cream);
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      font-size: 0.68rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      transition: color .45s ease;
    }

    .art-cta-btn::before {
      content: '';
      position: absolute; inset: 0;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .45s cubic-bezier(.76,0,.24,1);
    }

    .art-cta-btn:hover::before { transform: scaleX(1); }
    .art-cta-btn:hover { color: var(--black); }
    .art-cta-btn span, .art-cta-btn svg { position: relative; z-index: 1; }
    .art-cta-btn svg { width: 18px; height: 18px; fill: currentColor; }

    /* ══ ARTÍCULOS RELACIONADOS ══ */
    .art-related {
      padding: clamp(72px, 10vh, 110px) 0;
      background: var(--cream);
      overflow: hidden;
    }

    .art-related-header {
      padding: 0 clamp(24px, 6vw, 80px);
      margin-bottom: 44px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }

    .art-related-label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 200;
      font-size: 0.58rem;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: var(--gold-dark);
      margin-bottom: 10px;
    }

    .art-related-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      color: var(--black);
      line-height: 1;
    }

    .slider-controls {
      display: flex;
      gap: 10px;
      flex-shrink: 0;
    }

    .slider-btn {
      width: 40px; height: 40px;
      border: 1px solid rgba(194,166,110,0.35);
      border-radius: 50%;
      background: none;
      display: flex; align-items: center; justify-content: center;
      transition: background .3s, border-color .3s;
    }

    .slider-btn:hover { background: var(--gold); border-color: var(--gold); }
    .slider-btn svg { width: 14px; height: 14px; stroke: var(--gold-dark); fill: none; stroke-width: 1.5; transition: stroke .3s; }
    .slider-btn:hover svg { stroke: #fff; }

    .slider-track-wrap { overflow: hidden; padding: 0 clamp(24px, 6vw, 80px); }

    .slider-track {
      display: flex;
      gap: 14px;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }

    .related-card {
      flex: 0 0 calc(33.333% - 10px);
      min-width: 260px;
      background: #fff;
      overflow: hidden;
      text-decoration: none;
      display: block;
      transition: box-shadow .3s;
    }

    .related-card:hover { box-shadow: 0 8px 32px rgba(29,27,30,0.08); }

    .related-card-img { height: 200px; overflow: hidden; }

    .related-card-img img {
      width: 100%; height: 100%;
      object-fit: cover;
      filter: saturate(0.8);
      transform: scale(1);
      transition: transform .9s cubic-bezier(.25,.46,.45,.94), filter .9s;
    }

    .related-card:hover .related-card-img img { transform: scale(1.06); filter: saturate(1); }

    .related-card-body {
      padding: 22px 24px 26px;
      border-top: 1px solid rgba(194,166,110,0.12);
    }

    .related-card-tag {
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      font-size: 0.55rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--gold-dark);
      margin-bottom: 10px;
    }

    .related-card-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: clamp(1rem, 1.4vw, 1.15rem);
      color: var(--black);
      line-height: 1.35;
      margin-bottom: 16px;
      transition: color .3s;
    }

    .related-card:hover .related-card-title { color: var(--brown); }

    .related-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 14px;
      border-top: 1px solid rgba(194,166,110,0.1);
    }

    .related-card-date {
      font-family: 'Montserrat', sans-serif;
      font-weight: 200;
      font-size: 0.58rem;
      letter-spacing: 0.15em;
      color: rgba(29,27,30,0.45);
    }

    .related-card-arrow {
      width: 26px; height: 26px;
      border: 1px solid rgba(194,166,110,0.3);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: background .3s, border-color .3s;
    }

    .related-card:hover .related-card-arrow { background: var(--gold); border-color: var(--gold); }
    .related-card-arrow svg { width: 9px; height: 9px; stroke: var(--gold-dark); fill: none; stroke-width: 1.5; transition: stroke .3s, transform .3s; }
    .related-card:hover .related-card-arrow svg { stroke: #fff; transform: translate(2px,-2px); }

    .slider-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 32px;
      padding: 0 clamp(24px, 6vw, 80px);
    }

    .slider-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(194,166,110,0.3);
      transition: background .3s, transform .3s;
    }

    .slider-dot.active { background: var(--gold); transform: scale(1.3); }

    @media (max-width: 767px) {
  .slider-track-wrap {
    padding: 0 24px;
  }
}
@media (max-width: 767px) {
  .slider-track-wrap {
    padding: 0 24px;
  }

  .related-card {
    flex: 0 0 calc(100vw - 48px);
    min-width: unset;
  }
}
@media (max-width: 768px) {
  .footer-main { flex-direction: column; align-items: center; text-align: center; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .footer-contact { flex-direction: column; align-items: center; gap: 16px; }
  .art-related-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .art-nav-share .share-label { display: none; }
}

    /* ══ FOOTER ══ */
    footer {
      background: #1d1b1e;
      padding: clamp(60px, 10vh, 100px) clamp(32px, 6vw, 80px) clamp(32px, 5vh, 48px);
      position: relative;
      overflow: hidden;
    }

    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: clamp(32px, 6vw, 80px);
      right: clamp(32px, 6vw, 80px);
      height: 1px;
      background: linear-gradient(to right, transparent, #c2a66e, transparent);
    }

    .footer-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: clamp(40px, 6vh, 64px);
    }

    .footer-logo {
      width: clamp(80px, 10vw, 120px);
      flex-shrink: 0;
    }

    .footer-logo img {
      width: 100%;
      display: block;
      mix-blend-mode: lighten;
      opacity: 0.9;
    }

    .footer-tagline {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(0.95rem, 1.8vw, 1.3rem);
      color: #fff;
      letter-spacing: 0.04em;
      text-align: center;
      flex: 1;
    }

    .footer-social {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    .footer-social a {
      width: 36px; height: 36px;
      border: 1px solid rgba(194,166,110,0.3);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      text-decoration: none;
      transition: background .35s, border-color .35s;
    }

    .footer-social a:hover { background: #c2a66e; border-color: #c2a66e; }
    .footer-social a svg { width: 14px; height: 14px; fill: rgba(239,235,224,0.6); transition: fill .35s; }
    .footer-social a:hover svg { fill: #1d1b1e; }

    .footer-divider {
      width: 100%;
      height: 1px;
      background: rgba(194,166,110,0.12);
      margin-bottom: clamp(28px, 4vh, 40px);
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }

    .footer-contact {
      display: flex;
      align-items: center;
      gap: 32px;
      flex-wrap: wrap;
    }

    .footer-contact-item {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }

    .footer-contact-item svg { width: 14px; height: 14px; stroke: #c2a66e; fill: none; stroke-width: 1.5; flex-shrink: 0; }
    .footer-contact-item span { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 0.72rem; letter-spacing: 0.08em; color: #fff; transition: color .3s; }
    .footer-contact-item:hover span { color: #fff }

    .footer-copy {
      font-family: 'Montserrat', sans-serif;
      font-weight: 200;
      font-size: 0.58rem;
      letter-spacing: 0.2em;
      color: #fff;
      text-transform: uppercase;
    }

    @media (max-width: 768px) {
      .footer-main { flex-direction: column; align-items: center; text-align: center; gap: 28px; }
      .footer-bottom { flex-direction: column; align-items: center; gap: 20px; text-align: center; }
      .footer-contact { flex-direction: column; align-items: center; gap: 16px; }
      .art-related-header { flex-direction: column; align-items: flex-start; gap: 20px; }
      .art-nav-share .share-label { display: none; }
    }