/* Extracted from inline <style> blocks in productos-rodamientos-nsk.html. Keep overrides specific to this page here. */

/* ===== Scoped brand styles ===== */
      .brand-page { background:#fde8ee; padding: 16px 0 24px; }
      .brand-page .info-panel { background:#fde8ee; }
      /* hero: logo a la izquierda, texto a la derecha */
      .brand-hero{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-bottom:8px}
      .brand-hero img{height:72px;width:auto}
      @media(max-width:900px){.brand-hero{grid-template-columns:1fr;gap:10px} .brand-hero img{height:56px}}
      /* CTAs */
      .brand-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px}
      @media (max-width:900px){.brand-cta-grid{grid-template-columns:1fr}}
      .brand-cta{background:#fff;border:1px solid var(--borde);border-radius:18px;padding:14px;box-shadow:var(--sombra)}
      /* Grid de productos */
      .brand-page .product-links{grid-template-columns:repeat(3,1fr);}
      @media (max-width:900px){.brand-page .product-links{grid-template-columns:1fr;}}
      /* Forzar cartas verticales (imagen arriba, texto abajo) sin tocar global */
      .brand-page .product-link{display:block}
      .brand-page .product-link .imgbox{width:100%;max-height:220px;display:flex;justify-content:center;align-items:center;margin:0 0 8px 0}
      .brand-page .product-link .imgbox img{max-width:85%;height:auto}
      .brand-page .product-link .text{margin:0}
    
      /* CTA typography nicer per design */
      .brand-cta h3{font-weight:800; margin:0 0 8px}
      .brand-cta h3 strong{text-decoration:underline}
      .brand-cta p{margin:0 0 10px; font-size:1rem; line-height:1.35}
      .brand-cta .btn{font-weight:700}
    
      /* Adjust hero: title above, logo below */
      .brand-hero{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:8px}
      .brand-hero .brand-logo img{height:72px;width:auto}
      @media(max-width:900px){.brand-hero .brand-logo img{height:56px}}
    
      /* === Hero layout: title on top (full width), logo below-left, intro text below-right === */
      .brand-hero{
        display:grid;
        grid-template-columns:auto 1fr;
        grid-template-areas:
          "title title"
          "logo  intro";
        gap:18px; align-items:center; margin-bottom:8px;
      }
      .brand-hero img{ grid-area:logo; height:72px; width:auto }
      .brand-hero .brand-intro{ display: contents; }
      .brand-hero .brand-intro h1{ grid-area:title; margin:0 0 6px 0 }
      .brand-hero .brand-intro p{ grid-area:intro; margin:0 }
      @media(max-width:900px){
        .brand-hero{ grid-template-columns:1fr; grid-template-areas:"title" "logo" "intro"; gap:10px }
        .brand-hero img{ height:56px }
      }
    
      /* Adjust logo size smaller */
      .brand-hero img{height:56px !important; max-width:140px !important}
      @media(max-width:900px){.brand-hero img{height:48px !important; max-width:120px !important}}
      /* Ensure product links stay inside panel */
      .info-panel{overflow:hidden}
      .info-panel .product-links{padding:12px 0}
      /* Constrain product cards grid to container width */
      .brand-page .product-links{max-width:100%; box-sizing:border-box; overflow:hidden}
    
      /* Fix logo size without distortion */
      .brand-hero img{max-height:56px !important; height:auto !important; width:auto !important}
      @media(max-width:900px){.brand-hero img{max-height:48px !important}}
      /* Keep product grid inside panel */
      .info-panel{padding-bottom:16px}
      .info-panel .product-links{margin-top:16px}
    
      /* Models panel visuals to match header panel */
      .models-panel{background:inherit;border-radius:18px;border:1px solid rgba(0,0,0,.12);padding:14px 14px 18px;box-shadow:var(--sombra)}
      .models-panel h2{margin:0 0 12px}
      /* Fix logo aspect ratio */
      .brand-hero img{height:auto !important; width:auto !important; max-height:56px !important; max-width:140px !important}
      @media(max-width:900px){.brand-hero img{max-height:48px !important; max-width:120px !important}}
    
      /* Ensure brand-hero logos keep original proportions */
      .brand-hero img{width:auto !important; height:auto !important; max-height:56px !important; max-width:140px !important; object-fit:contain !important}
      @media(max-width:900px){.brand-hero img{max-height:48px !important; max-width:120px !important}}
    
      /* Final logo sizing consistent with reference */
      .brand-hero img{ width:auto !important; height:auto !important; max-height:72px !important; object-fit:contain !important; }
      @media(max-width:900px){.brand-hero img{ max-height:56px !important }}

/* --- Separator between original <style> blocks --- */

/* Adjust logo size smaller */
      .brand-hero img{height:56px !important; max-width:140px !important}
      @media(max-width:900px){.brand-hero img{height:48px !important; max-width:120px !important}}
      /* Ensure product links stay inside panel */
      .info-panel{overflow:hidden}
      .info-panel .product-links{padding:12px 0}

/* --- Separator between original <style> blocks --- */

/* FINAL override: keep brand logo proportions exactly */
      .brand-hero img{ width:auto !important; height:auto !important; max-height:56px !important; max-width:140px !important; object-fit:contain !important; }
      @media (max-width:900px){
        .brand-hero img{ max-height:48px !important; max-width:120px !important; }
      }

/* --- Separator between original <style> blocks --- */

/* FINAL size for brand logo to match reference */
      .brand-hero img{ width:auto !important; height:auto !important; max-height:48px !important; max-width:120px !important; object-fit:contain !important; }
      @media (max-width:900px){
        .brand-hero img{ max-height:44px !important; max-width:110px !important; }
      }
      /* make strong truly bold in brand panel */
      .brand-panel strong, .info-panel strong{ font-weight:800 !important; }

/* --- Separator between original <style> blocks --- */

/* Enlarge brand intro paragraph text for readability */
      .brand-hero .brand-intro p {
        font-size: 1.12rem !important;
        line-height: 1.55 !important;
      }

/* --- Separator between original <style> blocks --- */

/* Texto intro más grande (como referencia Foto 2) */
      .brand-hero > p, .brand-hero p {
        font-size: 1.14rem !important;
        line-height: 1.55 !important;
      }

/* --- Separator between original <style> blocks --- */

/* Tamaño de logo corregido para que quede como Foto 1 */
      .brand-hero img {
        width:auto !important;
        height:auto !important;
        max-height:72px !important;
        max-width:160px !important;
        object-fit:contain !important;
      }
      @media (max-width:900px){
        .brand-hero img {
          max-height:56px !important;
          max-width:140px !important;
        }
      }

/* --- Separator between original <style> blocks --- */

/* FINAL override: enlarge brand intro paragraph */
      .brand-hero .brand-intro p {
        font-size: 1.18rem !important;
        line-height: 1.6 !important;
      }