/* ==========================================================
   CSS específico por página (extraído de los <style> inline
   originales para mantener fidelidad visual exacta).
   ========================================================== */


/* ---------- blog.html ---------- */
    .hero-blog {
      background: var(--negro-card);
      padding: 9rem 2.5rem 5rem;
      border-bottom: 1px solid rgba(201,168,76,0.12);
    }
    .hero-blog-inner { max-width: 760px; }
    .calculator-box {
      background: linear-gradient(135deg, #0d0b00, #1a1400);
      border: 1px solid var(--dorado);
      border-radius: 12px;
      padding: 3rem;
      margin: 3rem 0;
    }
    .calculator-box h3 { font-family: var(--font-display); font-size: 1.8rem; color: var(--dorado); margin-bottom: 0.5rem; }
    .calc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
    @media (max-width: 640px) { .calc-grid { grid-template-columns: 1fr; } }
    .calc-field { display: flex; flex-direction: column; gap: 0.4rem; }
    .calc-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris-texto); }
    .calc-input { background: var(--negro-mid); border: 1px solid rgba(201,168,76,0.3); border-radius: 6px; padding: 0.8rem 1rem; color: var(--blanco); font-size: 1rem; font-family: var(--font-principal); width: 100%; }
    .calc-input:focus { outline: none; border-color: var(--dorado); }
    .calc-result { background: var(--negro); border-radius: 8px; padding: 1.5rem 2rem; margin-top: 1rem; }
    .calc-result-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gris-texto); margin-bottom: 0.5rem; }
    .calc-result-value { font-size: 2rem; font-weight: 900; color: var(--dorado); font-family: var(--font-display); }
    .calc-result-value span { font-size: 0.9rem; font-weight: 400; color: var(--gris-texto); }
    .calc-results-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
    @media (max-width: 640px) { .calc-results-row { grid-template-columns: 1fr 1fr; } }
    .article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2rem; }
    .article-card { background: var(--negro-mid); border-radius: var(--radio); overflow: hidden; border: 1px solid rgba(201,168,76,0.1); transition: var(--transicion); display: flex; flex-direction: column; position: relative; }
    .article-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-card); border-color: rgba(201,168,76,0.28); }
    /* Card 100% clickable: el ::after del <a class="article-read"> cubre toda la card */
    .article-card .article-read::after { content: ''; position: absolute; inset: 0; z-index: 1; }
    .article-img { height: 200px; background: var(--negro-card); background-size: cover; background-position: center; }
    .article-body { padding: 1.8rem; flex: 1; display: flex; flex-direction: column; }
    .article-meta { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.8rem; flex-wrap: wrap; }
    .article-cat { font-size: 0.6rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(201,168,76,0.12); color: var(--dorado); border: 1px solid rgba(201,168,76,0.25); padding: 0.2rem 0.6rem; border-radius: 3px; }
    .article-date { font-size: 0.72rem; color: var(--gris); }
    .article-author { font-size: 0.72rem; color: var(--gris); font-style: italic; }
    .article-title { font-size: 1.05rem; color: var(--blanco); margin-bottom: 0.8rem; line-height: 1.4; }
    .article-excerpt { font-size: 0.88rem; color: var(--gris-claro); flex: 1; margin-bottom: 1.2rem; }
    .article-read { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dorado); transition: var(--transicion); margin-top: auto; }
    .article-read:hover { gap: 0.8rem; }
    .newsletter-cta { background: var(--negro-mid); border: 1px solid rgba(201,168,76,0.18); border-radius: 12px; padding: 3rem; text-align: center; margin: 4rem 0; }
    .newsletter-cta h3 { font-family: var(--font-display); font-size: 1.8rem; color: var(--blanco); margin-bottom: 0.8rem; }
    .newsletter-cta p { max-width: 480px; margin: 0 auto 1.8rem; color: var(--gris-claro); }
    .newsletter-form { display: flex; gap: 1rem; max-width: 480px; margin: 0 auto; }
    @media (max-width: 640px) { .newsletter-form { flex-direction: column; } }

/* ---------- chuletones.html ---------- */
    /* Page-specific styles */
    .chuleta-hero {
      min-height: 85vh;
      background: linear-gradient(135deg, rgba(10,6,0,0.75) 0%, rgba(18,10,0,0.7) 50%, rgba(10,6,0,0.75) 100%), url('../images/nuestra-seleccion/chuletones.jpg') center/cover no-repeat;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding-top: var(--nav-h);
    }

    .chuleta-hero::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -5%;
      width: 65%;
      height: 180%;
      background: radial-gradient(ellipse, rgba(201, 168, 76, 0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .chuleta-hero .hero-breadcrumb {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.72rem;
      color: var(--gris);
      margin-bottom: 1.5rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .chuleta-hero .hero-breadcrumb a {
      color: var(--dorado);
    }

    .chuleta-hero .hero-breadcrumb a:hover {
      color: var(--dorado-claro);
    }

    .chuleta-hero .hero-breadcrumb span {
      color: var(--gris);
    }

    .chuleta-hero .hero-display-title {
      font-family: var(--font-display);
      font-size: clamp(3.2rem, 8vw, 6rem);
      font-weight: 600;
      color: var(--dorado);
      line-height: 1;
      margin-bottom: 1.5rem;
      font-style: italic;
    }

    .chuleta-hero .hero-lead {
      font-size: clamp(1rem, 2vw, 1.3rem);
      color: rgba(255, 255, 255, 0.85);
      font-weight: 300;
      max-width: 560px;
      margin-bottom: 2.5rem;
    }

    .chuleta-hero .hero-stats {
      display: flex;
      gap: 2.5rem;
      flex-wrap: wrap;
      margin-bottom: 2.5rem;
    }

    .chuleta-hero .stat-num {
      font-size: 2.2rem;
      font-weight: 900;
      color: var(--dorado);
      font-family: var(--font-display);
      display: block;
      line-height: 1;
    }

    .chuleta-hero .stat-label {
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(255, 255, 255, 0.5);
      font-weight: 600;
    }

    /* Tabla de cortes */
    .cuts-table-wrap {
      overflow-x: auto;
      margin-top: 2.5rem;
    }
    /* Affordance scroll: fade lateral derecho cuando la tabla supera el
       wrapper. La cuts-table mide ~850px, no cabe en <900. Desktop intocado. */
    @media (max-width: 900px) {
      .cuts-table-wrap {
        -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 28px), transparent 100%);
      }
    }

    .cuts-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
    }

    .cuts-table th {
      text-align: left;
      padding: 0.85rem 1.1rem;
      background: rgba(201, 168, 76, 0.08);
      border-bottom: 2px solid rgba(201, 168, 76, 0.3);
      color: var(--dorado);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 800;
      white-space: nowrap;
    }

    .cuts-table td {
      padding: 0.85rem 1.1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      color: var(--gris-claro);
      vertical-align: top;
    }

    .cuts-table tr:hover td {
      background: rgba(201, 168, 76, 0.04);
    }

    .cuts-table .cut-name {
      color: var(--blanco);
      font-weight: 700;
    }

    .cut-badge {
      display: inline-block;
      font-size: 0.62rem;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.18rem 0.55rem;
      border-radius: 4px;
      white-space: nowrap;
    }

    .badge-black {
      background: rgba(3, 1, 2, 0.92);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.22);
    }

    .badge-gold {
      background: rgba(201, 168, 76, 0.97);
      color: var(--negro);
      border: 1px solid rgba(201, 168, 76, 0.95);
    }

    .badge-dry {
      background: rgba(140, 40, 10, 0.95);
      color: #fff;
      border: 1px solid rgba(224, 112, 64, 0.5);
    }

    /* Dry Aged section */
    .dryaged-section {
      background: var(--negro-card);
      border: 1px solid rgba(201, 168, 76, 0.2);
      border-radius: 12px;
      padding: 3rem;
    }

    /* Namespace .dryaged-* — chuletones Dry Aged process (renombrado
       15-05-2026 para evitar colisión con `.step-num` global de Elementor). */
    .dryaged-process-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 2rem;
    }

    .dryaged-process-step {
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
      padding: 1.4rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .dryaged-process-step:last-child {
      border-bottom: none;
    }

    .dryaged-step-num {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(201, 168, 76, 0.1);
      border: 1.5px solid rgba(201, 168, 76, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 900;
      color: var(--dorado);
      flex-shrink: 0;
    }

    .dryaged-step-content h4 {
      color: var(--dorado-claro);
      font-size: 0.95rem;
      margin-bottom: 0.3rem;
    }

    .dryaged-step-content p {
      font-size: 0.88rem;
      color: var(--gris-claro);
    }

    /* Escandallo box */
    .escandallo-box {
      background: var(--negro-mid);
      border-left: 3px solid var(--dorado);
      border-radius: 0 8px 8px 0;
      padding: 1.8rem 2rem;
      margin-top: 2rem;
    }

    .escandallo-box h3 {
      color: var(--dorado);
      font-size: 1.1rem;
      margin-bottom: 1rem;
    }

    .escandallo-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.6rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 0.88rem;
    }

    .escandallo-row:last-child {
      border-bottom: none;
    }

    .escandallo-label {
      color: var(--gris-claro);
    }

    .escandallo-value {
      color: var(--dorado);
      font-weight: 700;
      font-family: var(--font-display);
      font-size: 1.1rem;
    }

    /* CTA section */
    .cta-section {
      background: linear-gradient(135deg, #0d0900 0%, #1a1000 100%);
      border: 1px solid rgba(201, 168, 76, 0.2);
      border-radius: 12px;
      padding: 4rem 3rem;
      text-align: center;
    }

    .cta-section h2 {
      margin-bottom: 1rem;
    }

    .cta-section p {
      max-width: 520px;
      margin: 0 auto 2rem;
    }

    .btn-group {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    @media (max-width: 768px) {
      .dryaged-section {
        padding: 2rem 1.5rem;
      }

      .cta-section {
        padding: 3rem 1.5rem;
      }
    }

/* ---------- contacto.html ---------- */
    /* ===== BIFURCATED FORM EXTRAS ===== */
    .bif-section { padding: 5rem 0 6rem; }
    .bif-tabs { display: flex; gap: 0; border: 1px solid var(--dorado); border-radius: 8px; overflow: hidden; max-width: 480px; margin: 2.5rem auto 3rem; }
    .bif-tab { flex: 1; padding: 0.9rem 1.5rem; text-align: center; font-family: var(--font-principal); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; background: transparent; border: none; color: var(--gris-texto); transition: all 0.25s ease; }
    .bif-tab.active { background: var(--dorado); color: var(--negro); }
    .bif-tab:hover:not(.active) { color: var(--dorado); }

    .bif-panel { display: none; }
    .bif-panel.active { display: block; }

    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
    .form-grid .span-2 { grid-column: span 2; }
    @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: span 1; } }

    .form-group { display: flex; flex-direction: column; gap: 0.5rem; }
    .form-label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris-texto); }
    .form-label span.req { color: var(--dorado); margin-left: 2px; }
    .form-input, .form-select, .form-textarea {
      background: var(--negro-mid); border: 1px solid rgba(201,168,76,0.25); border-radius: 6px;
      padding: 0.85rem 1rem; font-family: var(--font-principal); font-size: 0.95rem; color: var(--blanco);
      outline: none; transition: border-color 0.2s ease; width: 100%;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--dorado); }
    .form-select option { background: var(--negro-card); color: var(--blanco); }
    .form-textarea { resize: vertical; min-height: 110px; }
    .form-submit { margin-top: 1.5rem; width: 100%; display: flex; justify-content: center; }

    .form-privacy { font-size: 0.8rem; color: var(--gris-texto); margin-top: 0.8rem; text-align: center; }
    .form-privacy a { color: var(--dorado); }

    .contact-layout { display: grid; grid-template-columns: 1fr 380px; gap: 5rem; align-items: start; }
    @media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: 3rem; } }

    .contact-info-card { background: var(--negro-card); border: 1px solid rgba(201,168,76,0.15); border-radius: 12px; padding: 2.5rem; }
    .contact-info-card h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--dorado); margin-bottom: 1.5rem; }
    .contact-row { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
    .contact-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(201,168,76,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--dorado); }
    .contact-row-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris-texto); font-weight: 600; }
    .contact-row-value { font-size: 0.95rem; color: var(--blanco); margin-top: 0.2rem; }
    .contact-row-value a { color: var(--dorado); text-decoration: none; }
    .contact-row-value a:hover { text-decoration: underline; }
    .wab-big { display: flex; align-items: center; gap: 0.8rem; background: #25D366; color: #fff; border-radius: 8px; padding: 0.9rem 1.4rem; font-weight: 700; font-size: 0.95rem; text-decoration: none; margin-top: 1.5rem; }
    .wab-big:hover { background: #1ebe5b; }
    .wab-big svg { flex-shrink: 0; }
    .resp-note { background: rgba(201,168,76,0.06); border-left: 3px solid var(--dorado); padding: 1rem 1.2rem; border-radius: 0 6px 6px 0; margin-top: 2rem; font-size: 0.88rem; color: var(--gris-texto); }
    .resp-note strong { color: var(--dorado); }

/* ---------- cordero.html ---------- */
    .cordero-hero {
      min-height: 85vh;
      background: linear-gradient(135deg, rgba(7,6,10,0.75) 0%, rgba(16,14,24,0.7) 50%, rgba(7,6,10,0.75) 100%), url('../images/nuestra-seleccion/cordero.jpg') center/cover no-repeat;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding-top: var(--nav-h);
    }

    .cordero-hero::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -5%;
      width: 60%;
      height: 180%;
      background: radial-gradient(ellipse, rgba(201, 168, 76, 0.06) 0%, transparent 70%);
      pointer-events: none;
    }

    .cordero-hero .hero-breadcrumb {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.72rem;
      color: var(--gris);
      margin-bottom: 1.5rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .cordero-hero .hero-breadcrumb a {
      color: var(--dorado);
    }

    .cordero-hero .hero-breadcrumb a:hover {
      color: var(--dorado-claro);
    }

    .cordero-hero .hero-display-title {
      font-family: var(--font-display);
      font-size: clamp(3rem, 7.5vw, 5.5rem);
      font-weight: 600;
      color: var(--dorado);
      line-height: 1.05;
      margin-bottom: 1.5rem;
      font-style: italic;
    }

    .cordero-hero .hero-lead {
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: rgba(255, 255, 255, 0.85);
      font-weight: 300;
      max-width: 560px;
      margin-bottom: 2.5rem;
    }

    /* Cortes grid */
    .cortes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.4rem;
      margin-top: 3rem;
    }

    .corte-card {
      background: var(--negro-card);
      border: 1px solid rgba(201, 168, 76, 0.12);
      border-radius: 10px;
      padding: 1.8rem;
      transition: var(--transicion);
      position: relative;
    }

    .corte-card:hover {
      border-color: rgba(201, 168, 76, 0.35);
      transform: translateY(-3px);
    }

    .corte-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 0.6rem;
    }

    .corte-name {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--blanco);
    }

    .corte-premium-badge {
      font-size: 0.6rem;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.2rem 0.6rem;
      border-radius: 4px;
      flex-shrink: 0;
    }

    .badge-premium {
      background: rgba(201, 168, 76, 0.15);
      color: var(--dorado);
      border: 1px solid rgba(201, 168, 76, 0.35);
    }

    .badge-temp {
      background: rgba(100, 80, 200, 0.15);
      color: #a090e0;
      border: 1px solid rgba(100, 80, 200, 0.3);
    }

    .badge-stock {
      background: rgba(40, 160, 80, 0.15);
      color: #5eda8a;
      border: 1px solid rgba(40, 160, 80, 0.3);
    }

    .corte-tag {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--dorado);
      display: block;
      margin-bottom: 0.8rem;
    }

    .corte-desc {
      font-size: 0.88rem;
      color: var(--gris-claro);
      margin-bottom: 1rem;
      line-height: 1.7;
    }

    .corte-meta {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      padding-top: 0.8rem;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .corte-meta-row {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 0.5rem;
      font-size: 0.78rem;
      align-items: baseline;
    }

    .corte-meta-label {
      color: var(--gris);
    }

    .corte-meta-value {
      color: var(--gris-claro);
      font-weight: 600;
    }

    /* Temporalidad */
    .temporalidad-section {
      background: var(--negro-card);
      border: 1px solid rgba(201, 168, 76, 0.2);
      border-radius: 12px;
      padding: 3rem;
    }

    .meses-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 0.4rem;
      margin-top: 2rem;
    }

    @media (max-width: 600px) {
      .meses-grid {
        grid-template-columns: repeat(6, 1fr);
      }
    }

    .mes {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
    }

    .mes-nombre {
      font-size: 0.6rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--gris);
    }

    .mes-bar {
      height: 40px;
      width: 100%;
      border-radius: 4px;
    }

    .mes-alta {
      background: rgba(201, 168, 76, 0.8);
    }

    .mes-media {
      background: rgba(201, 168, 76, 0.35);
    }

    .mes-baja {
      background: rgba(255, 255, 255, 0.08);
    }

    .temporalidad-legend {
      display: flex;
      gap: 2rem;
      margin-top: 1.2rem;
      flex-wrap: wrap;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.78rem;
      color: var(--gris-claro);
    }

    .legend-dot {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      flex-shrink: 0;
    }

    /* Picos de demanda */
    .picos-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin-top: 2rem;
    }

    .pico-card {
      background: var(--negro-mid);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 8px;
      padding: 1.4rem;
    }

    .pico-label {
      font-size: 0.65rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--dorado);
      margin-bottom: 0.5rem;
      display: block;
    }

    .pico-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--blanco);
      margin-bottom: 0.4rem;
    }

    .pico-desc {
      font-size: 0.82rem;
      color: var(--gris-claro);
    }

    /* CTA */
    .cta-section {
      background: linear-gradient(135deg, #0d0900 0%, #1a1000 100%);
      border: 1px solid rgba(201, 168, 76, 0.2);
      border-radius: 12px;
      padding: 4rem 3rem;
      text-align: center;
    }

    .cta-section h2 {
      margin-bottom: 1rem;
    }

    .cta-section p {
      max-width: 520px;
      margin: 0 auto 2rem;
    }

    .btn-group {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    @media (max-width: 768px) {
      .temporalidad-section {
        padding: 2rem 1.5rem;
      }

      .cta-section {
        padding: 3rem 1.5rem;
      }
    }

/* ---------- distribuidores.html ---------- */
    /* HERO — dark, no image */
    .dist-hero {
      min-height: 90vh;
      background: linear-gradient(160deg, #060606 0%, #0f0c00 60%, #060606 100%);
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding-top: var(--nav-h);
    }
    .dist-hero::before {
      content: '';
      position: absolute;
      top: -20%;
      left: 50%;
      width: 80%;
      height: 140%;
      background: radial-gradient(ellipse, rgba(201,168,76,0.07) 0%, transparent 65%);
      pointer-events: none;
    }
    .dist-hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(201,168,76,0.3), transparent);
    }
    .dist-hero-inner {
      max-width: 720px;
    }
    .dist-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      background: rgba(201,168,76,0.08);
      border: 1px solid rgba(201,168,76,0.3);
      border-radius: 6px;
      padding: 0.4rem 1.2rem;
      font-size: 0.68rem;
      font-weight: 900;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--dorado);
      margin-bottom: 1.8rem;
    }
    .dist-hero-h1 {
      font-family: var(--font-display);
      font-size: clamp(3rem, 7.5vw, 5.5rem);
      font-weight: 600;
      color: var(--blanco);
      line-height: 1.05;
      margin-bottom: 0.6rem;
      font-style: italic;
    }
    .dist-hero-subtitle {
      font-size: clamp(1.1rem, 2.5vw, 1.6rem);
      font-family: var(--font-display);
      color: var(--dorado);
      font-weight: 500;
      margin-bottom: 1.5rem;
      line-height: 1.3;
    }
    .dist-hero-lead {
      font-size: 1.05rem;
      color: rgba(255,255,255,0.8);
      font-weight: 300;
      max-width: 580px;
      margin-bottom: 2.5rem;
      line-height: 1.8;
    }
    .dist-hero-gama {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 2.5rem;
    }
    .gama-chip {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 4px;
      padding: 0.3rem 0.85rem;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
    }
    .gama-chip.highlight { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.3); color: var(--dorado); }

    /* Propuesta */
    .propuesta-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.2rem;
      margin-top: 2.5rem;
    }
    .prop-card {
      background: var(--negro-card);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 10px;
      padding: 1.8rem;
      transition: var(--transicion);
    }
    .prop-card:hover { border-color: rgba(201,168,76,0.3); transform: translateY(-2px); }
    .prop-num {
      font-family: var(--font-display);
      font-size: 2.5rem;
      font-weight: 700;
      color: rgba(201,168,76,0.25);
      line-height: 1;
      margin-bottom: 0.5rem;
    }
    .prop-title { font-size: 1rem; font-weight: 800; color: var(--blanco); margin-bottom: 0.5rem; }
    .prop-desc { font-size: 0.86rem; color: var(--gris-claro); line-height: 1.7; }

    /* Zonas */
    .zonas-section {
      background: var(--negro-card);
      border: 1px solid rgba(201,168,76,0.15);
      border-radius: 12px;
      padding: 3rem;
    }
    .zonas-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 0.8rem;
      margin-top: 2rem;
    }
    .zona-item {
      background: var(--negro-mid);
      border: 1px solid rgba(201,168,76,0.12);
      border-radius: 8px;
      padding: 1rem 1.2rem;
      display: flex;
      align-items: center;
      gap: 0.8rem;
      transition: var(--transicion);
    }
    .zona-item:hover { border-color: rgba(201,168,76,0.35); }
    .zona-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dorado); flex-shrink: 0; }
    .zona-name { font-size: 0.88rem; font-weight: 700; color: var(--blanco); }
    .zona-note { font-size: 0.7rem; color: var(--gris); display: block; }

    /* Proceso 4 pasos — DISTRIBUIDORES (scopeado con prefijo dist- para no
       colisionar con .steps-grid global de Nosotros, que usa 6 columnas inline). */
    .dist-steps-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1rem;
      margin-top: 2.5rem;
    }
    .dist-step-card {
      background: var(--negro-card);
      border: 1px solid rgba(201,168,76,0.1);
      border-radius: 10px;
      padding: 2rem;
      position: relative;
    }
    .dist-step-number {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(201,168,76,0.1);
      border: 2px solid rgba(201,168,76,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
      font-weight: 900;
      color: var(--dorado);
      margin-bottom: 1.2rem;
    }
    .dist-step-title { font-size: 1rem; font-weight: 800; color: var(--blanco); margin-bottom: 0.5rem; }
    .dist-step-desc { font-size: 0.86rem; color: var(--gris-claro); line-height: 1.7; }
    .dist-step-connector {
      display: none;
    }
    @media (min-width: 900px) {
      .dist-step-card::after {
        content: '→';
        position: absolute;
        right: -0.8rem;
        top: 2rem;
        color: rgba(201,168,76,0.4);
        font-size: 1.2rem;
        font-weight: 900;
      }
      .dist-step-card:last-child::after { display: none; }
    }

    /* Form panel */
    .form-section {
      background: var(--negro-card);
      padding-top: 5rem;
      padding-bottom: 5rem;
    }
    .form-panel {
      background: var(--negro-mid);
      border: 1px solid rgba(201,168,76,0.2);
      border-radius: 14px;
      overflow: hidden;
      max-width: 760px;
      margin: 0 auto;
    }
    .form-panel-header {
      background: linear-gradient(135deg, #120d00, #1a1200);
      padding: 2.5rem 3rem;
      border-bottom: 1px solid rgba(201,168,76,0.15);
    }
    .form-panel-header h2 { color: var(--dorado); font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 0.5rem; }
    .form-panel-header p { font-size: 0.92rem; color: rgba(255,255,255,0.7); }
    .form-body { padding: 2.5rem 3rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
    .form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
    .form-group label {
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--dorado);
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px;
      padding: 0.75rem 1rem;
      font-size: 0.92rem;
      font-family: var(--font-principal);
      color: var(--blanco);
      outline: none;
      transition: border-color 0.3s ease;
      width: 100%;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: var(--gris); }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus { border-color: rgba(201,168,76,0.5); background: rgba(201,168,76,0.03); }
    .form-group select option { background: #1c1c1c; color: var(--blanco); }
    .form-group textarea { resize: vertical; min-height: 110px; }
    .form-submit-row { margin-top: 0.5rem; }
    .form-submit-row .btn { width: 100%; justify-content: center; font-size: 1rem; padding: 1rem; }
    .form-note { font-size: 0.75rem; color: var(--gris); text-align: center; margin-top: 0.8rem; }
    @media (max-width: 600px) {
      .form-row { grid-template-columns: 1fr; }
      .form-body { padding: 1.8rem 1.5rem; }
      .form-panel-header { padding: 1.8rem 1.5rem; }
    }

    /* Botón display:flex helper */
    .btn { display: inline-flex; align-items: center; justify-content: center; }

    @media (max-width: 768px) {
      .zonas-section { padding: 2rem 1.5rem; }
    }

/* ---------- especialidades.html ---------- */
    .espec-hero {
      min-height: 85vh;
      background: linear-gradient(135deg, rgba(3,1,2,0.75) 0%, rgba(20,16,16,0.7) 50%, rgba(3,1,2,0.75) 100%), url('../images/nuestra-seleccion/especialidades.jpg') center/cover no-repeat;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding-top: var(--nav-h);
      padding-bottom: 5rem;
    }

    .espec-hero::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -5%;
      width: 60%;
      height: 180%;
      background: radial-gradient(ellipse, rgba(201, 168, 76, 0.07) 0%, transparent 70%);
      pointer-events: none;
    }

    .espec-hero .hero-breadcrumb {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.72rem;
      color: var(--gris);
      margin-bottom: 1.5rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .espec-hero .hero-breadcrumb a {
      color: var(--dorado);
    }

    .espec-hero .hero-breadcrumb a:hover {
      color: var(--dorado-claro);
    }

    .espec-hero .hero-display-title {
      font-family: var(--font-display);
      font-size: clamp(3rem, 7.5vw, 5.5rem);
      font-weight: 600;
      color: var(--dorado);
      line-height: 1.05;
      margin-bottom: 1.5rem;
      font-style: italic;
    }

    .espec-hero .hero-lead {
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: rgba(255, 255, 255, 0.85);
      font-weight: 300;
      max-width: 680px;
      margin-bottom: 2.5rem;
    }

    .espec-hero .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 2.5rem;
    }
    .espec-hero .hero-tag {
      background: rgba(201,168,76,0.1);
      border: 1px solid rgba(201,168,76,0.3);
      border-radius: 4px;
      padding: 0.3rem 0.85rem;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--dorado);
    }

    /* Category blocks */
    .cat-section {
      padding: 4rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .cat-section:last-child {
      border-bottom: none;
    }

    .cat-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 2.5rem;
    }

    .cat-title {}

    .cat-products {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.2rem;
    }

    .prod-card {
      background: var(--negro-card);
      border: 1px solid rgba(201, 168, 76, 0.1);
      border-radius: 10px;
      padding: 1.6rem;
      transition: var(--transicion);
      position: relative;
    }

    .prod-card:hover {
      border-color: rgba(201, 168, 76, 0.35);
      transform: translateY(-2px);
    }

    .prod-name {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--blanco);
      margin-bottom: 0.25rem;
    }

    .prod-sub {
      font-size: 0.65rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--dorado);
      display: block;
      margin-bottom: 0.7rem;
    }

    .prod-desc {
      font-size: 0.86rem;
      color: var(--gris-claro);
      line-height: 1.7;
      margin-bottom: 0.9rem;
    }

    .prod-footer {
      padding-top: 0.8rem;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .prod-meta-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.76rem;
      padding: 0.22rem 0;
    }

    .prod-meta-label {
      color: var(--gris);
    }

    .prod-meta-value {
      color: var(--gris-claro);
      font-weight: 600;
    }

    .avail-badge {
      display: inline-block;
      font-size: 0.6rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.15rem 0.5rem;
      border-radius: 4px;
      margin-bottom: 0.8rem;
    }

    .avail-stock {
      background: rgba(40, 160, 80, 0.12);
      color: #5eda8a;
      border: 1px solid rgba(40, 160, 80, 0.28);
    }

    .avail-pedido {
      background: rgba(201, 168, 76, 0.12);
      color: var(--dorado);
      border: 1px solid rgba(201, 168, 76, 0.3);
    }

    .avail-temp {
      background: rgba(100, 80, 200, 0.12);
      color: #a090e0;
      border: 1px solid rgba(100, 80, 200, 0.28);
    }

    /* Dry Aged special */
    .dryaged-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.2rem;
    }

    .dryaged-card {
      background: linear-gradient(135deg, #150d00, #1a1000);
      border: 1px solid rgba(201, 168, 76, 0.2);
      border-radius: 10px;
      padding: 1.8rem;
      transition: var(--transicion);
    }

    .dryaged-card:hover {
      border-color: rgba(201, 168, 76, 0.5);
    }

    .dryaged-age {
      font-family: var(--font-display);
      font-size: 3rem;
      font-weight: 700;
      color: var(--dorado);
      line-height: 1;
      margin-bottom: 0.3rem;
    }

    .dryaged-age-label {
      font-size: 0.65rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(201, 168, 76, 0.6);
      display: block;
      margin-bottom: 0.8rem;
    }

    .dryaged-name {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--blanco);
      margin-bottom: 0.6rem;
    }

    .dryaged-desc {
      font-size: 0.86rem;
      color: var(--gris-claro);
      line-height: 1.7;
    }

    /* Aviso disponibilidad */
    .aviso-box {
      background: rgba(201, 168, 76, 0.05);
      border: 1px solid rgba(201, 168, 76, 0.2);
      border-radius: 8px;
      padding: 1.4rem 1.8rem;
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      margin-top: 2.5rem;
    }

    .aviso-icon {
      color: var(--dorado);
      font-size: 1.2rem;
      flex-shrink: 0;
      font-weight: 900;
    }

    .aviso-box p {
      font-size: 0.88rem;
      color: var(--gris-claro);
    }

    .aviso-box strong {
      color: var(--blanco);
    }

    /* CTA */
    .cta-section {
      background: linear-gradient(135deg, #0d0900 0%, #1a1000 100%);
      border: 1px solid rgba(201, 168, 76, 0.2);
      border-radius: 12px;
      padding: 4rem 3rem;
      text-align: center;
    }

    .cta-section h2 {
      margin-bottom: 1rem;
    }

    .cta-section p {
      max-width: 520px;
      margin: 0 auto 2rem;
    }

    .btn-group {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    @media (max-width: 768px) {
      .cta-section {
        padding: 3rem 1.5rem;
      }
    }

/* ---------- iberico.html ---------- */
    .iberico-hero {
      min-height: 85vh;
      background: linear-gradient(135deg, rgba(10,5,0,0.75) 0%, rgba(21,8,0,0.7) 50%, rgba(10,5,0,0.75) 100%), url('../images/nuestra-seleccion/iberico.jpg') center/cover no-repeat;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding-top: var(--nav-h);
    }
    .iberico-hero::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -5%;
      width: 60%;
      height: 180%;
      background: radial-gradient(ellipse, rgba(201,168,76,0.07) 0%, transparent 70%);
      pointer-events: none;
    }
    .iberico-hero .hero-breadcrumb {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.72rem;
      color: var(--gris);
      margin-bottom: 1.5rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .iberico-hero .hero-breadcrumb a { color: var(--dorado); }
    .iberico-hero .hero-breadcrumb a:hover { color: var(--dorado-claro); }
    .iberico-hero .hero-breadcrumb span { color: var(--gris); }

    .iberico-hero .hero-display-title {
      font-family: var(--font-display);
      font-size: clamp(3rem, 7.5vw, 5.5rem);
      font-weight: 600;
      color: var(--dorado);
      line-height: 1.05;
      margin-bottom: 1.5rem;
      font-style: italic;
    }
    .iberico-hero .hero-lead {
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: rgba(255,255,255,0.85);
      font-weight: 300;
      max-width: 560px;
      margin-bottom: 2.5rem;
    }
    .iberico-hero .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 2.5rem;
    }
    .iberico-hero .hero-tag {
      background: rgba(201,168,76,0.1);
      border: 1px solid rgba(201,168,76,0.3);
      border-radius: 4px;
      padding: 0.3rem 0.85rem;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--dorado);
    }

    /* Cortes cards */
    .cortes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.4rem;
      margin-top: 3rem;
    }
    .corte-card {
      background: var(--negro-card);
      border: 1px solid rgba(201,168,76,0.12);
      border-radius: 10px;
      padding: 1.8rem;
      transition: var(--transicion);
      position: relative;
      overflow: hidden;
    }
    .corte-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(to bottom, var(--dorado), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .corte-card:hover { border-color: rgba(201,168,76,0.35); transform: translateY(-3px); }
    .corte-card:hover::before { opacity: 1; }
    .corte-icon { font-size: 2rem; margin-bottom: 0.8rem; }
    .corte-name { font-size: 1.15rem; font-weight: 800; color: var(--blanco); margin-bottom: 0.25rem; }
    .corte-tag { font-size: 0.65rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dorado); display: block; margin-bottom: 0.8rem; }
    .corte-desc { font-size: 0.88rem; color: var(--gris-claro); margin-bottom: 1rem; line-height: 1.7; }
    .corte-meta { display: flex; flex-direction: column; gap: 0.4rem; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 0.8rem; margin-top: 0.2rem; }
    .corte-meta-row { display: grid; grid-template-columns: 110px 1fr; gap: 0.5rem; font-size: 0.78rem; align-items: baseline; }
    .corte-meta-label { color: var(--gris); }
    .corte-meta-value { color: var(--gris-claro); font-weight: 600; }

    /* Ventaja section */
    .ventaja-section {
      background: linear-gradient(135deg, var(--negro-card) 0%, var(--negro-mid) 100%);
      border: 1px solid rgba(201,168,76,0.2);
      border-radius: 12px;
      padding: 3.5rem;
    }
    .ventaja-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      margin-top: 2rem;
    }
    @media (max-width: 768px) {
      .ventaja-grid { grid-template-columns: 1fr; gap: 2rem; }
      .ventaja-section { padding: 2rem 1.5rem; }
    }
    .ventaja-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
    .ventaja-item:last-child { margin-bottom: 0; }
    .ventaja-num {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(201,168,76,0.1);
      border: 1.5px solid rgba(201,168,76,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: 900;
      color: var(--dorado);
      flex-shrink: 0;
    }
    .ventaja-text h4 { color: var(--dorado-claro); font-size: 0.92rem; margin-bottom: 0.3rem; }
    .ventaja-text p { font-size: 0.85rem; color: var(--gris-claro); }

    /* CTA */
    .cta-section {
      background: linear-gradient(135deg, #0d0900 0%, #1a1000 100%);
      border: 1px solid rgba(201,168,76,0.2);
      border-radius: 12px;
      padding: 4rem 3rem;
      text-align: center;
    }
    .cta-section h2 { margin-bottom: 1rem; }
    .cta-section p { max-width: 520px; margin: 0 auto 2rem; }
    .btn-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- importaciones.html ---------- */
    .origen-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
      margin-top: 3rem;
    }
    @media (max-width: 768px) {
      .origen-grid { grid-template-columns: 1fr; }
    }

    .origen-card {
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(201, 168, 76, 0.12);
      transition: var(--transicion);
    }

    .origen-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--sombra-card);
      border-color: rgba(201, 168, 76, 0.3);
    }

    .origen-header {
      padding: 2rem 2rem 1.5rem;
    }

    .origen-flag {
      font-size: 1.8rem;
      margin-bottom: 0.8rem;
    }

    .origen-country {
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--blanco);
      margin-bottom: 0.3rem;
    }

    .origen-tagline {
      font-size: 0.82rem;
      color: var(--dorado);
      font-style: italic;
    }

    .origen-body {
      padding: 0 2rem 2rem;
    }

    .origen-body p {
      font-size: 0.88rem;
      color: var(--gris-claro);
      margin-bottom: 1rem;
    }

    .origen-specs {
      margin: 1rem 0;
    }

    .spec-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 0.82rem;
    }

    .spec-row:last-child {
      border-bottom: none;
    }

    .spec-key {
      color: var(--gris);
    }

    .spec-val {
      color: var(--blanco);
      font-weight: 600;
    }

    .origen-uy {
      background: linear-gradient(to bottom, #0d0b02, var(--negro-mid));
    }

    .origen-ar {
      background: linear-gradient(to bottom, #0a0d02, var(--negro-mid));
    }

    .origen-br {
      background: linear-gradient(to bottom, #0d0200, var(--negro-mid));
    }

    .origen-eu {
      background: linear-gradient(to bottom, #020d0a, var(--negro-mid));
    }

    .clasif-for-importacion {
      display: flex;
      gap: 0.6rem;
      flex-wrap: wrap;
      margin-top: 1rem;
    }

    .clasif-tag {
      font-size: 0.62rem;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.2rem 0.6rem;
      border-radius: 3px;
    }

    .tag-black {
      background: #222;
      color: #999;
      border: 1px solid #555;
    }

    .tag-silver {
      background: rgba(192, 192, 192, 0.12);
      color: #C0C0C0;
      border: 1px solid #7a7a8a;
    }

    .tag-gold {
      background: rgba(201, 168, 76, 0.1);
      color: var(--dorado);
      border: 1px solid rgba(201, 168, 76, 0.3);
    }

    /* ── HERO ── */
    .importaciones-hero {
      min-height: 85vh;
      background: linear-gradient(135deg, rgba(8,4,0,0.75) 0%, rgba(18,8,0,0.7) 50%, rgba(8,4,0,0.75) 100%), url('../images/nuestra-seleccion/vacuno-importacion.jpg') center/cover no-repeat;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding-top: var(--nav-h);
      padding-bottom: 5rem;
    }
    .importaciones-hero::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -5%;
      width: 60%;
      height: 180%;
      background: radial-gradient(ellipse, rgba(201,168,76,0.07) 0%, transparent 70%);
      pointer-events: none;
    }
    .importaciones-hero .hero-breadcrumb {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.72rem;
      color: var(--gris);
      margin-bottom: 1.5rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .importaciones-hero .hero-breadcrumb a { color: var(--dorado); }
    .importaciones-hero .hero-breadcrumb a:hover { color: var(--dorado-claro); }
    .importaciones-hero .hero-breadcrumb span { color: var(--gris); }
    .importaciones-hero .hero-display-title {
      font-family: var(--font-display);
      font-size: clamp(3rem, 7.5vw, 5.5rem);
      font-weight: 600;
      color: var(--dorado);
      line-height: 1.05;
      margin-bottom: 1.5rem;
      font-style: italic;
    }
    .importaciones-hero .hero-lead {
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: rgba(255,255,255,0.85);
      font-weight: 300;
      max-width: 680px;
      margin-bottom: 2.5rem;
    }
    .importaciones-hero .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 2.5rem;
    }
    .importaciones-hero .hero-tag {
      background: rgba(201,168,76,0.1);
      border: 1px solid rgba(201,168,76,0.3);
      border-radius: 4px;
      padding: 0.3rem 0.85rem;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--dorado);
    }

/* ---------- pastor-gallego.html ---------- */
    .pastor-hero {
      min-height: 85vh;
      background: linear-gradient(135deg, rgba(8,4,0,0.75) 0%, rgba(18,8,0,0.7) 50%, rgba(8,4,0,0.75) 100%), url('../images/nuestra-seleccion/vacuno1.jpg') center/cover no-repeat;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding-top: var(--nav-h);
      padding-bottom: 5rem;
    }
    .pastor-hero::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -5%;
      width: 60%;
      height: 180%;
      background: radial-gradient(ellipse, rgba(201,168,76,0.07) 0%, transparent 70%);
      pointer-events: none;
    }
    .pastor-badge-large {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      background: rgba(201,168,76,0.1);
      border: 1px solid rgba(201,168,76,0.35);
      border-radius: 6px;
      padding: 0.5rem 1.2rem;
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--dorado);
      margin-bottom: 1.5rem;
    }
    .pastor-title { font-family: var(--font-display); font-size: clamp(3rem, 7.5vw, 5.5rem); font-weight: 600; color: var(--dorado); line-height: 1.05; margin-bottom: 1.5rem; font-style: italic; max-width: 800px; }
    .pastor-subtitle { font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(255,255,255,0.85); font-weight: 300; max-width: 680px; margin-bottom: 2.5rem; }
    .pastor-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
    .pastor-stat { }
    .pastor-stat-num { font-size: 2rem; font-weight: 900; color: var(--dorado); font-family: var(--font-display); display: block; line-height: 1; }
    .pastor-stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); font-weight: 600; }
    @media (max-width: 900px) { .pastor-hero { min-height: auto; padding: 8rem 1.5rem 5rem; } }

    /* Grid exclusivo de pastor-gallego con cards .corte-formato (4 cols fijas). */
    .cortes-grid-formatos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 3rem; }
    @media (max-width: 900px) { .cortes-grid-formatos { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 540px) { .cortes-grid-formatos { grid-template-columns: 1fr; } }
    .corte-formato { background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(201,168,76,0.03)); border: 1px solid rgba(201,168,76,0.35); border-radius: 8px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
    .corte-formato-icon { font-size: 1.2rem; color: var(--dorado); opacity: 0.7; }
    .corte-formato-title { font-weight: 700; color: var(--dorado); font-size: 0.95rem; }
    .corte-formato-desc { font-size: 0.82rem; color: var(--gris-claro); margin: 0; }
    .corte-card { background: var(--negro-mid); border: 1px solid rgba(201,168,76,0.15); border-radius: 8px; padding: 1.5rem; transition: var(--transicion); }
    .corte-card:hover { border-color: rgba(201,168,76,0.4); transform: translateY(-3px); }
    .corte-name { font-weight: 700; color: var(--dorado); font-size: 0.95rem; margin-bottom: 0.4rem; }
    .corte-desc { font-size: 0.82rem; color: var(--gris-claro); }
    /* (Bloque .process-step / .process-step-num eliminado 15-05-2026.
       Era para vacuno-europeo.html que ahora es solo redirect — sin
       contenido renderizable, las reglas eran huérfanas y colisionaban
       con la `.step-num` 38x38 global de Elementor.) */

/* ---------- vacuno-europeo.html ---------- */
    .europeo-hero {
      min-height: 85vh;
      background: linear-gradient(135deg, rgba(5,10,10,0.75) 0%, rgba(9,20,20,0.7) 50%, rgba(5,10,10,0.75) 100%), url('../images/nuestra-seleccion/vacuno-europeo.jpg') center/cover no-repeat;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding-top: var(--nav-h);
      padding-bottom: 5rem;
    }

    .europeo-hero::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -5%;
      width: 60%;
      height: 180%;
      background: radial-gradient(ellipse, rgba(201, 168, 76, 0.06) 0%, transparent 70%);
      pointer-events: none;
    }

    .europeo-hero .hero-breadcrumb {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.72rem;
      color: var(--gris);
      margin-bottom: 1.5rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .europeo-hero .hero-breadcrumb a {
      color: var(--dorado);
    }

    .europeo-hero .hero-breadcrumb a:hover {
      color: var(--dorado-claro);
    }

    .europeo-hero .hero-display-title {
      font-family: var(--font-display);
      font-size: clamp(3rem, 7.5vw, 5.5rem);
      font-weight: 600;
      color: var(--dorado);
      line-height: 1.05;
      margin-bottom: 1.5rem;
      font-style: italic;
    }

    .europeo-hero .hero-lead {
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: rgba(255, 255, 255, 0.85);
      font-weight: 300;
      max-width: 720px;
      margin-bottom: 2.5rem;
    }

    .europeo-hero .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;
      margin-bottom: 2.5rem;
    }

    .origin-badge {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(201, 168, 76, 0.08);
      border: 1px solid rgba(201, 168, 76, 0.25);
      border-radius: 6px;
      padding: 0.4rem 1rem;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--dorado-claro);
    }

    /* Irlanda feature */
    .irlanda-section {
      background: var(--negro-card);
      border: 1px solid rgba(201, 168, 76, 0.2);
      border-radius: 12px;
      padding: 3.5rem;
      position: relative;
      overflow: hidden;
    }

    .irlanda-section::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 40%;
      height: 100%;
      background: radial-gradient(ellipse at top right, rgba(201, 168, 76, 0.05) 0%, transparent 70%);
      pointer-events: none;
    }

    .irlanda-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .irlanda-stat {
      text-align: center;
    }

    .irlanda-stat-num {
      font-size: 2rem;
      font-weight: 900;
      color: var(--dorado);
      font-family: var(--font-display);
      display: block;
    }

    .irlanda-stat-label {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--gris);
      margin-top: 0.3rem;
      display: block;
    }

    /* Otros orígenes */
    .origenes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.2rem;
      margin-top: 2.5rem;
    }

    .origen-card {
      background: var(--negro-card);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 10px;
      padding: 1.8rem;
      transition: var(--transicion);
    }

    .origen-card:hover {
      border-color: rgba(201, 168, 76, 0.3);
    }

    .origen-flag {
      font-size: 2rem;
      margin-bottom: 0.8rem;
      display: block;
    }

    .origen-name {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--blanco);
      margin-bottom: 0.3rem;
    }

    .origen-badge {
      display: inline-block;
      font-size: 0.6rem;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.18rem 0.55rem;
      border-radius: 4px;
      margin-bottom: 0.8rem;
    }

    .badge-silver {
      background: rgba(70, 75, 90, 0.95);
      color: #fff;
      border: 1px solid rgba(200, 200, 220, 0.35);
    }

    .badge-gold {
      background: rgba(201, 168, 76, 0.97);
      color: var(--negro);
      border: 1px solid rgba(201, 168, 76, 0.95);
    }

    .origen-desc {
      font-size: 0.87rem;
      color: var(--gris-claro);
      line-height: 1.7;
    }

    .origen-detail {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }

    .origen-detail-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.78rem;
    }

    .origen-detail-label {
      color: var(--gris);
    }

    .origen-detail-value {
      color: var(--gris-claro);
      font-weight: 600;
    }

    /* Tabla comparativa */
    .compare-table-wrap {
      overflow-x: auto;
      margin-top: 2.5rem;
    }

    .compare-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.88rem;
    }

    .compare-table th {
      text-align: left;
      padding: 0.85rem 1.2rem;
      background: rgba(201, 168, 76, 0.07);
      border-bottom: 2px solid rgba(201, 168, 76, 0.25);
      color: var(--dorado);
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 800;
      white-space: nowrap;
    }

    .compare-table td {
      padding: 0.85rem 1.2rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      color: var(--gris-claro);
      vertical-align: top;
    }

    .compare-table tr:hover td {
      background: rgba(201, 168, 76, 0.03);
    }

    .compare-table .cat-label {
      color: var(--blanco);
      font-weight: 700;
    }

    .rating-bar-wrap {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .rating-bar {
      height: 6px;
      border-radius: 3px;
      background: rgba(201, 168, 76, 0.8);
    }

    .rating-bar-bg {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.07);
      overflow: hidden;
    }

    .rating-fill {
      height: 100%;
      border-radius: 3px;
      background: var(--dorado);
    }

    /* CTA */
    .cta-section {
      background: linear-gradient(135deg, #0d0900 0%, #1a1000 100%);
      border: 1px solid rgba(201, 168, 76, 0.2);
      border-radius: 12px;
      padding: 4rem 3rem;
      text-align: center;
    }

    .cta-section h2 {
      margin-bottom: 1rem;
    }

    .cta-section p {
      max-width: 520px;
      margin: 0 auto 2rem;
    }

    .btn-group {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    @media (max-width: 768px) {
      .irlanda-section {
        padding: 2rem 1.5rem;
      }

      .cta-section {
        padding: 3rem 1.5rem;
      }
    }

/* ── Fundido inferior de heros con imagen de fondo hacia la siguiente sección ── */
.chuleta-hero::after,
.cordero-hero::after,
.espec-hero::after,
.iberico-hero::after,
.importaciones-hero::after,
.pastor-hero::after,
.europeo-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent 0%, var(--negro) 100%);
  z-index: 1;
  pointer-events: none;
}

.chuleta-hero .container,
.cordero-hero .container,
.espec-hero .container,
.iberico-hero .container,
.importaciones-hero .container,
.pastor-hero .container,
.europeo-hero .container {
  position: relative;
  z-index: 2;
}

/* ===============================================================
   RESPONSIVE MOBILE — heros de producto y contenido interior
   Sin cambios en desktop.
   =============================================================== */

/* Tablet y móvil grande: padding horizontal en los 6 heros sin regla mobile propia.
   .pastor-hero ya tiene su regla mobile propia (línea ~1665), no lo repetimos. */
@media (max-width: 900px) {
  /* Padding horizontal universal para TODOS los heros en mobile */
  .hero,
  .dist-hero,
  .page-hero,
  .chuleta-hero,
  .cordero-hero,
  .espec-hero,
  .iberico-hero,
  .importaciones-hero,
  .europeo-hero {
    min-height: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  /* Los heros con imagen de fondo también necesitan padding vertical amplio */
  .chuleta-hero,
  .cordero-hero,
  .espec-hero,
  .iberico-hero,
  .importaciones-hero,
  .europeo-hero {
    padding-top: 8rem !important;
    padding-bottom: 5rem !important;
  }
}

/* Móvil pequeño: paddings más ajustados + ajustes de tipografía y chips */
@media (max-width: 640px) {
  .hero,
  .dist-hero,
  .page-hero,
  .chuleta-hero,
  .cordero-hero,
  .espec-hero,
  .iberico-hero,
  .importaciones-hero,
  .pastor-hero,
  .europeo-hero {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
  .chuleta-hero,
  .cordero-hero,
  .espec-hero,
  .iberico-hero,
  .importaciones-hero,
  .pastor-hero,
  .europeo-hero {
    padding-top: 6.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  /* Título hero más compacto (decisión 1-B) */
  .hero-display-title {
    font-size: clamp(2rem, 8vw, 2.9rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 1rem !important;
  }

  /* Chips del hero en 2 columnas (decisión 2-B) */
  .hero-tags {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .hero-tag {
    text-align: center;
    padding: 0.4rem 0.55rem !important;
    font-size: 0.66rem !important;
  }

  /* Botones del hero en columna completa para evitar cortes */
  .chuleta-hero .btn-group,
  .cordero-hero .btn-group,
  .espec-hero .btn-group,
  .iberico-hero .btn-group,
  .importaciones-hero .btn-group,
  .pastor-hero .btn-group,
  .europeo-hero .btn-group {
    flex-direction: column !important;
    width: 100%;
    gap: 0.6rem !important;
  }
  .chuleta-hero .btn-group .btn,
  .cordero-hero .btn-group .btn,
  .espec-hero .btn-group .btn,
  .iberico-hero .btn-group .btn,
  .importaciones-hero .btn-group .btn,
  .pastor-hero .btn-group .btn,
  .europeo-hero .btn-group .btn {
    width: 100%;
    text-align: center;
  }

  /* Breadcrumbs del hero más compactos y con wrap */
  .hero-breadcrumb {
    font-size: 0.62rem !important;
    flex-wrap: wrap;
    gap: 0.35rem !important;
    margin-bottom: 1rem !important;
  }

  /* Stats y certs del hero con más aire al borde */
  .hero-stats { gap: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .stat-num { font-size: 1.8rem !important; }
}



/* ---------- blog-*.html (artículos individuales del Laboratorio del Escandallo) ---------- */
    .article-hero {
      min-height: 45vh;
      background: linear-gradient(135deg, rgba(5,3,0,0.85), rgba(12,8,0,0.8));
      display: flex;
      align-items: flex-end;
      padding: var(--nav-h) 0 3rem;
    }
    .article-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 600;
      color: var(--blanco);
      line-height: 1.15;
      max-width: 820px;
    }
    .article-hero h1 em { color: var(--dorado); font-style: italic; }
    .article-meta-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;
      align-items: center;
      margin-bottom: 1.5rem;
      font-size: 0.72rem;
      color: var(--gris);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .article-meta-bar .cat-pill {
      font-size: 0.6rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      background: rgba(201,168,76,0.12);
      color: var(--dorado);
      border: 1px solid rgba(201,168,76,0.3);
      padding: 0.2rem 0.6rem;
      border-radius: 3px;
    }
    /* OJO: usamos `article.article-body` para distinguirlo del `.article-body`
       (un <div>) que vive dentro de las cards de blog.html (.article-card > .article-body).
       Sin esta restricción, los estilos del cuerpo del post sobrescribirían a las cards. */
    article.article-body {
      max-width: 760px;
      margin: 0 auto;
      padding: 4rem 0 5rem;
      color: var(--gris-claro);
      line-height: 1.85;
    }
    article.article-body p { font-size: 1.02rem; margin-bottom: 1.3rem; }
    article.article-body h2 {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 600;
      color: var(--dorado);
      font-style: italic;
      margin: 3rem 0 1.2rem;
      line-height: 1.2;
    }
    article.article-body h3 {
      font-size: 1.15rem;
      color: var(--blanco);
      margin: 2rem 0 0.8rem;
    }
    article.article-body ul, article.article-body ol { margin: 0 0 1.3rem 1.5rem; }
    article.article-body ul { list-style: disc; }
    article.article-body ol { list-style: decimal; }
    article.article-body li { margin-bottom: 0.6rem; }
    article.article-body strong { color: var(--blanco); font-weight: 700; }
    /* Enlaces inline dentro del cuerpo del artículo: usamos selectores explícitos por
       contenedor textual (p/li/td/dd) en lugar de un genérico .article-body a, para que
       NUNCA aplique al botón CTA — que vive dentro de .article-cta como hijo directo. */
    article.article-body p a,
    article.article-body li a,
    article.article-body td a,
    article.article-body dd a {
      color: var(--dorado);
      border-bottom: 1px solid rgba(201,168,76,0.4);
    }
    article.article-body p a:hover,
    article.article-body li a:hover,
    article.article-body td a:hover,
    article.article-body dd a:hover {
      border-bottom-color: var(--dorado);
    }
    /* Override explícito del botón CTA dentro del artículo: garantiza el contraste
       texto-negro / fondo-dorado aunque alguna regla heredada (o un CSS cacheado
       previo a este fix) intente teñir el texto de dorado y meterle border-bottom. */
    article.article-body .article-cta .btn-primary {
      color: var(--negro);
      border-bottom: none;
    }
    .tldr-box {
      background: rgba(201,168,76,0.05);
      border: 1px solid rgba(201,168,76,0.2);
      border-left: 3px solid var(--dorado);
      border-radius: 0 10px 10px 0;
      padding: 1.8rem 2rem;
      margin-bottom: 2.5rem;
    }
    .tldr-box-label {
      font-size: 0.62rem;
      font-weight: 900;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--dorado);
      margin-bottom: 0.8rem;
    }
    .tldr-box p { margin-bottom: 0.6rem; font-size: 0.95rem; }
    .tldr-box p:last-child { margin-bottom: 0; }
    /* .article-table — mismo lenguaje visual que .tabla (clasificacion):
       th con fondo sólido y dorado, primera col en blanco/bold, hover dorado leve. */
    .article-table-wrap { overflow-x: auto; margin: 1.5rem 0 2rem; }
    .article-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
    }
    .article-table th {
      background: var(--negro-mid);
      color: var(--dorado);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 1rem 1.2rem;
      text-align: left;
      border-bottom: 1px solid rgba(201,168,76,0.2);
    }
    .article-table td {
      padding: 0.9rem 1.2rem;
      color: var(--gris-claro);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      vertical-align: top;
    }
    .article-table tr:hover td { background: rgba(201,168,76,0.04); }
    .article-table td:first-child { font-weight: 700; color: var(--blanco); }
    .article-cta {
      margin-top: 3rem;
      background: linear-gradient(135deg, #0d0900, #1a1000);
      border: 1px solid rgba(201,168,76,0.2);
      border-radius: 10px;
      padding: 2.5rem;
      text-align: center;
    }
    .article-cta h3 {
      font-family: var(--font-display);
      font-style: italic;
      color: var(--dorado);
      font-size: 1.4rem;
      margin-bottom: 0.8rem;
    }
    .article-cta p {
      color: var(--gris-claro);
      max-width: 520px;
      margin: 0 auto 1.5rem;
      font-size: 0.92rem;
    }
    .article-author-box {
      margin-top: 3rem;
      padding: 1.8rem;
      background: var(--negro-mid);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      display: flex;
      gap: 1.2rem;
      align-items: flex-start;
    }
    .article-author-box .author-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--negro-card);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      color: var(--gris);
      font-style: italic;
      flex-shrink: 0;
    }
    .article-author-box .author-info h4 {
      color: var(--blanco);
      margin-bottom: 0.3rem;
      font-size: 1rem;
    }
    .article-author-box .author-info p {
      color: var(--gris-claro);
      font-size: 0.85rem;
      line-height: 1.7;
    }