/* =====================================================================
   NONNO AUTOPARTES - capa visual propia (tema Brasilia / Tiendanube)
   Se carga desde layout.tpl despues de micx-nonno.css, con ?v=N.
   No reemplaza estilos del tema: los ajusta con selectores propios.
   Indice:
     0. Fuente y variables
     1. Utilidades (texto oculto, aparicion, botones, bandas)
     2. Header (escritorio >= 992 px) y buscador
     3. Barra "Mi vehiculo" de micx bajo el header
     4. Menu: item Productos y megapanel
     5. Home: slider, buscador micx, banners, tarjetas, newsletter, pie
     6. Producto: bloque de compra y ficha
     7. Paginas: Somos Nonno y Preguntas frecuentes
     8. Movimiento reducido
   ===================================================================== */

/* Poppins 800 para los titulos grandes (el tema carga solo 400 y 700) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap');

/* =====================================================================
   0. Variables
   ===================================================================== */
:root{
  --nonno-navy:#00246d;
  --nonno-navy-rgb:0,36,109;
  --nonno-red:#E40044;
  --nonno-badge:#e74c3c;
  --nonno-blue:#096AB5;
  --nonno-black:#000;
  --nonno-footer:#1B1717;
  --nonno-btn:#2c3e50;
  --nonno-soft:#f3f5f9;
  --nonno-line:#e2e6ee;
  --nonno-text:#1B1717;
  --nonno-radius:var(--border-radius, 8px);
  --nonno-ease:cubic-bezier(.2,.7,.2,1);
  --nonno-t-head:220ms;
  --nonno-head-h:0px;
}

/* =====================================================================
   1. Utilidades
   ===================================================================== */
.nonno-sr{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
[hidden]{ display:none !important; }

/* Aparicion al scroll: la clase la pone nonno-ui.js; sin JS no se esconde nada */
.nonno-reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity 600ms var(--nonno-ease), transform 600ms var(--nonno-ease);
  transition-delay:calc(var(--nonno-i, 0) * 70ms);
}
.nonno-reveal.is-in{ opacity:1; transform:none; }

.nonno-kicker{
  margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--nonno-blue);
}
.nonno-h2{
  margin:0 0 16px; font-weight:800; font-size:clamp(24px, 3vw, 34px); line-height:1.15;
  letter-spacing:-.02em; color:var(--nonno-navy);
}

.nonno-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 26px; border:0; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:700; line-height:1.2; text-decoration:none;
  background-color:var(--nonno-navy); color:#fff !important; fill:#fff;
  background-image:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%);
  background-size:250% 100%; background-position:150% 0; background-repeat:no-repeat;
  transition:background-position 700ms ease, background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.nonno-btn:hover{ background-color:#000; background-position:-60% 0; transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.nonno-btn:focus-visible{ outline:3px solid rgba(var(--nonno-navy-rgb),.35); outline-offset:3px; }
.nonno-btn svg{ width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.nonno-btn--wa{ background-color:#25D366; color:#fff !important; }
.nonno-btn--wa:hover{ background-color:#128c7e; }
.nonno-btn--wa svg{ fill:currentColor; stroke:none; }
.nonno-btn--light{ background-color:#fff; color:var(--nonno-navy) !important; }
.nonno-btn--light:hover{ background-color:#fff; color:#000 !important; }

.nonno-btn-ghost{
  display:inline-flex; align-items:center; min-height:40px; padding:8px 18px; cursor:pointer;
  border:2px solid var(--nonno-navy); border-radius:999px; background:#fff; color:var(--nonno-navy);
  font-family:inherit; font-size:14px; font-weight:700;
  transition:background-color 200ms ease, color 200ms ease;
}
.nonno-btn-ghost:hover,
.nonno-btn-ghost[aria-pressed="true"]{ background:var(--nonno-navy); color:#fff; }

.nonno-chip{
  display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px;
  background:var(--nonno-soft); color:var(--nonno-navy) !important; font-size:13px; font-weight:700;
  text-decoration:none; transition:background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.nonno-chip:hover{ background:var(--nonno-navy); color:#fff !important; transform:translateY(-1px); }

.nonno-link-arrow{
  display:inline-flex; gap:6px; margin-top:6px; font-weight:700; font-size:14px;
  color:var(--nonno-navy) !important; text-decoration:none;
}
.nonno-link-arrow span{ transition:transform 200ms ease; }
.nonno-link-arrow:hover span{ transform:translateX(4px); }

/* Bandas de seccion */
.nonno-band{ padding:clamp(48px, 7vw, 88px) 0; }
.nonno-band--navy{
  position:relative; overflow:hidden; color:#fff;
  background-color:var(--nonno-navy);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 18px, transparent 18px 46px);
}
.nonno-band--navy .nonno-kicker{ color:rgba(255,255,255,.72); }
.nonno-band--soft{ background:var(--nonno-soft); }

/* =====================================================================
   2. Header
   ===================================================================== */
.head-main,
.head-main .head-row,
.head-main .logo-img,
.head-main .search-input,
.head-main .search-submit-btn,
.head-main .nav-desktop-list > .nav-item{
  transition-property:height, max-height, padding, min-height, width, transform, box-shadow;
  transition-duration:var(--nonno-t-head);
  transition-timing-function:ease;
}

/* Buscador: blanco, redondeado, boton negro redondo (todas las medidas) */
.head-main .search-container .search-input{
  border:0 !important; border-radius:26px; background:#fff; color:var(--nonno-text);
  padding-left:20px; padding-right:58px;
  box-shadow:0 2px 12px rgba(0,0,0,.14);
}
.head-main .search-container .search-input:focus{ box-shadow:0 0 0 3px rgba(255,255,255,.35), 0 6px 20px rgba(0,0,0,.2); outline:0; }
.head-main .search-container .search-submit-btn{
  display:flex; align-items:center; justify-content:center;
  top:4px; right:4px; bottom:auto; width:auto; aspect-ratio:1; height:calc(100% - 8px);
  padding:0; border-radius:50%; background-color:#000;
}
.head-main .search-container .search-submit-btn:hover{ background-color:#222; }
.head-main .search-container .search-empty-btn{ right:52px; }

@media (min-width:992px){
  /* Fila del logo a todo el ancho: logo a la izquierda, buscador al medio */
  .head-main .js-head-row.head-row{
    max-width:none; width:100%;
    padding:14px 32px;
    grid-template-columns:auto minmax(0, 1fr) auto;
    column-gap:32px;
  }
  .head-main .js-logo-container.logo-container{ width:auto !important; }
  .head-main .logo-container .logo-img,
  .head-main .logo-container .logo-img.logo-big{
    height:88px; max-height:88px; width:auto; max-width:none;
  }
  .head-main .search-container{
    width:100%; min-width:560px; max-width:900px; margin:0 auto; justify-self:center;
  }
  .head-main .search-container .search-input{ height:52px; font-size:15px; }

  /* Fila del menu, alineada con el logo */
  .head-main .js-nav-desktop-container.container{ max-width:none; width:100%; padding-left:32px; padding-right:32px; }
  .head-main .nav-desktop-list > .nav-item{ padding-top:15px; padding-bottom:15px; }

  /* Comprimido al scrollear (clase .compress del tema) */
  .head-main.compress .js-head-row.head-row{ padding-top:8px; padding-bottom:8px; }
  .head-main.compress .logo-container .logo-img,
  .head-main.compress .logo-container .logo-img.logo-big{ height:40px; max-height:40px; }
  .head-main.compress .search-container .search-input{ height:40px; font-size:14px; }
  .head-main.compress .nav-desktop-list > .nav-item{ padding-top:11px; padding-bottom:11px; }
}

/* Links del menu: subrayado que crece */
@media (min-width:768px){
  .nav-desktop-list > .nav-main-item > .nav-list-link,
  .nav-desktop-list > .nav-main-item > .nav-item-container > .nav-list-link{ position:relative; }
  .nav-desktop-list > .nav-main-item > .nav-list-link::after,
  .nav-desktop-list > .nav-main-item > .nav-item-container > .nav-list-link::after{
    content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
    background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform 220ms ease;
  }
  .nav-desktop-list > .nav-main-item:hover > .nav-list-link::after,
  .nav-desktop-list > .nav-main-item:hover > .nav-item-container > .nav-list-link::after,
  .nav-desktop-list > .nav-main-item.is-open > .nav-item-container > .nav-list-link::after{ transform:scaleX(1); }
}

/* =====================================================================
   3. Barra "Mi vehiculo" (micx) pegada bajo el header
   ===================================================================== */
@media (min-width:768px){
  .micx-barra-veh[data-micx="barra-vehiculo"]{
    position:sticky; top:var(--nonno-head-h, 0px); z-index:999;
    border-top:1px solid rgba(255,255,255,.14);
    box-shadow:0 6px 16px rgba(0,0,0,.12);
  }
}

/* =====================================================================
   4. Menu: item Productos y megapanel
   ===================================================================== */
.nonno-nav-products__link{ display:inline-flex; align-items:center; gap:6px; }
.nonno-nav-products__caret{
  width:10px; height:8px; fill:none !important; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; transition:transform 180ms ease;
}
.nonno-nav-products.is-open .nonno-nav-products__caret{ transform:rotate(180deg); }

.nonno-mega{
  position:fixed; top:100%; left:0; width:100%; z-index:10;
  max-height:calc(100vh - var(--nonno-head-h, 160px) - 16px); overflow-y:auto;
  background:#fff; color:var(--nonno-text);
  border-top:3px solid var(--nonno-navy);
  box-shadow:0 22px 44px rgba(0,20,60,.2);
  opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  white-space:normal; text-transform:none;
}
.nonno-nav-products.is-open > .nonno-mega,
html:not(.nonno-js) .nonno-nav-products:hover > .nonno-mega,
html:not(.nonno-js) .nonno-nav-products:focus-within > .nonno-mega{
  opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s;
}
.nonno-mega__inner{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr);
  gap:28px; padding:28px 32px 32px; text-align:left;
}
.nonno-mega__col--wide{ grid-column:span 2; }
.nonno-mega__col--wide .nonno-mega__list{ column-count:2; column-gap:24px; }
.nonno-nav-products.is-open .nonno-mega__col{
  animation:nonno-fade-up 320ms var(--nonno-ease) both;
  animation-delay:calc(var(--nonno-i, 0) * 35ms);
}

.head-main .nonno-mega a{ color:var(--nonno-text) !important; fill:none; text-transform:none; }
.head-main .nonno-mega .nonno-mega__fam{
  display:flex; align-items:center; gap:10px; min-height:62px; margin-bottom:14px; padding-bottom:12px;
  border-bottom:1px solid var(--nonno-line);
  color:var(--nonno-navy) !important; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none;
}
.nonno-mega__ico{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:36px; height:36px; border-radius:50%; background:rgba(var(--nonno-navy-rgb),.08);
  transition:background-color 200ms ease;
}
.head-main .nonno-mega__ico svg{
  width:20px; height:20px; fill:none !important; stroke:var(--nonno-navy); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.nonno-mega__fam:hover .nonno-mega__ico{ background:rgba(var(--nonno-navy-rgb),.16); }
.nonno-mega__list{ margin:0 0 12px; padding:0; list-style:none; }
.nonno-mega__list li{ break-inside:avoid; }
.head-main .nonno-mega .nonno-mega__link{
  display:inline-block; padding:5px 0; font-size:14px; line-height:1.35; text-decoration:none;
  transition:color 150ms ease, transform 150ms ease;
}
.head-main .nonno-mega .nonno-mega__link:hover{ color:var(--nonno-navy) !important; transform:translateX(3px); }
.head-main .nonno-mega .nonno-mega__all{
  display:inline-flex; gap:6px; font-size:13px; font-weight:700; color:var(--nonno-navy) !important; text-decoration:none;
}
.head-main .nonno-mega .nonno-mega__all:hover{ text-decoration:underline; }
.nonno-mega a:focus-visible{ outline:2px solid var(--nonno-navy); outline-offset:2px; border-radius:4px; }

/* Menu del celular: Productos en mayusculas como el resto */
.nonno-nav-products-mobile > .nav-list-link{ text-transform:uppercase; }

/* =====================================================================
   5. Home
   ===================================================================== */
/* Slider: zoom lento sobre la foto activa y puntos finos con avance */
.section-home .gallery-item-container,
[data-store="home-slider"] .gallery-item-container{ overflow:hidden; }
[data-store="home-slider"] .swiper-slide-active .slider-image{
  animation:nonno-kenburns 7s ease-out both;
}
[data-store="home-slider"] .swiper-pagination-bullet{
  position:relative; overflow:hidden; width:22px; height:4px; margin:0 4px !important;
  border:0 !important; border-radius:2px; background:rgba(var(--nonno-navy-rgb),.22); opacity:1;
  transition:width 300ms ease;
}
[data-store="home-slider"] .swiper-pagination-bullet-active{ width:46px; background:rgba(var(--nonno-navy-rgb),.22); }
[data-store="home-slider"] .swiper-pagination-bullet-active::after{
  content:''; position:absolute; inset:0; background:var(--nonno-navy);
  transform-origin:left; animation:nonno-dot 6s linear both;
}

/* Buscador por vehiculo (micx): entrada suave */
.micx-buscador{ animation:nonno-fade-up 700ms var(--nonno-ease) both; animation-delay:150ms; }
.micx-panel{ box-shadow:0 12px 30px rgba(var(--nonno-navy-rgb),.08); }

/* Banners de categoria: elevacion y zoom de la foto */
.section-banners-home .js-textbanner{
  border-radius:var(--nonno-radius); overflow:hidden;
  transition:transform 300ms var(--nonno-ease), box-shadow 300ms ease;
}
.section-banners-home .textbanner-image{ transition:transform 700ms var(--nonno-ease); }
@media (hover:hover){
  .section-banners-home .js-textbanner:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(var(--nonno-navy-rgb),.22); }
  .section-banners-home .js-textbanner:hover .textbanner-image{ transform:scale(1.06); }
}

/* Tarjetas de producto */
.js-item-product.product-item{
  border-radius:var(--nonno-radius);
  transition:transform 300ms var(--nonno-ease), box-shadow 300ms ease;
}
.js-item-product .product-item-image-container{ overflow:hidden; border-radius:var(--nonno-radius); }
/* Zoom con `scale` y no con `transform`: el tema centra la foto con
   translate(-50%) (img-absolute-centered) y un transform la pisaba, corriendo
   la imagen hacia la derecha. `scale` se compone con ese translate. */
.js-item-product .product-item-image{ transition:scale 600ms var(--nonno-ease), opacity 300ms ease; }
/* `scale` se aplica antes del translate(-50%) del tema: con el origen en el
   centro de la caja sin mover, la foto se corria ~6 px a la izquierda. El
   borde izquierdo de esa caja es justo el centro visible de la foto. */
.js-item-product .product-item-image.img-absolute-centered{ transform-origin:0 50%; }
@media (hover:hover){
  .js-item-product.product-item:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(var(--nonno-navy-rgb),.14); }
  .js-item-product.product-item:hover .product-item-image{ scale:1.06; }
}
.js-item-product .product-item-price-container{ align-items:center; }
.js-item-product .product-item-discount{
  display:inline-flex; align-items:center; justify-self:start; min-width:0; padding:2px 8px; border-radius:999px;
  background:var(--nonno-red); color:#fff !important; font-size:11px; font-weight:700; line-height:1.5;
}
.js-item-product .js-max-installments-container.custom-installments{
  display:inline-flex; align-self:flex-start; margin-top:6px !important; padding:3px 10px; border-radius:999px;
  background:rgba(9,106,181,.09); color:var(--nonno-blue);
  font-size:11px; font-weight:600;
}
.js-item-product .js-max-installments-container .product-installments{ color:inherit; }

/* Brillo al pasar sobre los botones principales (sirve tambien en <input>) */
.btn-primary,
.micx-buscar{
  background-image:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  background-size:250% 100%; background-position:150% 0; background-repeat:no-repeat;
  transition:background-position 700ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.btn-primary:hover,
.micx-buscar:hover{ background-position:-60% 0; }

/* Newsletter: banda azul a todo el ancho con rayas diagonales */
.section-newsletter-home{
  position:relative; overflow:hidden;
  padding:clamp(56px, 8vw, 96px) 0 !important;
  background-color:var(--nonno-navy); color:#fff;
  background-image:
    radial-gradient(ellipse at 85% 10%, rgba(255,255,255,.12), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 18px, transparent 18px 46px);
}
.section-newsletter-home .js-home-newsletter-container,
.section-newsletter-home .section-newsletter-home-colors{ background:transparent; }
.section-newsletter-home .newsletter{
  position:relative; width:min(760px, 100%) !important; margin:0 auto !important; padding:0 !important;
  text-align:center;
}
.section-newsletter-home .js-home-newsletter-title{
  margin:0 0 10px !important; color:#fff;
  font-family:'Poppins', var(--heading-font, sans-serif); font-weight:800;
  font-size:clamp(30px, 5vw, 52px); line-height:1.05; letter-spacing:-.02em;
}
.section-newsletter-home .js-home-newsletter-text{
  max-width:560px; margin:0 auto 26px !important; font-size:clamp(15px, 1.6vw, 18px); color:rgba(255,255,255,.86);
}
.section-newsletter-home form{ margin:0 auto !important; max-width:560px; }
.section-newsletter-home .input-append{
  display:flex; align-items:center; gap:6px; padding:6px; border-radius:999px; background:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.25); transition:box-shadow 250ms ease, transform 250ms ease;
}
.section-newsletter-home .input-append:focus-within{ box-shadow:0 0 0 4px rgba(255,255,255,.35), 0 18px 40px rgba(0,0,0,.25); transform:translateY(-2px); }
.section-newsletter-home .input-append .form-group{ flex:1 1 auto; min-width:0; }
.section-newsletter-home .input-append .form-control{
  height:50px; border:0 !important; border-radius:999px; background:transparent;
  color:var(--nonno-text) !important; padding:0 20px; font-size:15px; box-shadow:none;
}
.section-newsletter-home .input-append .form-control::placeholder{ color:#7a8190 !important; }
.section-newsletter-home .input-append .btn-inline{
  flex:0 0 auto; height:50px; padding:0 30px; border:0 !important; border-radius:999px;
  background-color:var(--nonno-navy); color:#fff !important; font-weight:700; font-size:15px; cursor:pointer;
  background-image:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  background-size:250% 100%; background-position:150% 0; background-repeat:no-repeat;
  transition:background-color 200ms ease, background-position 700ms ease;
}
.section-newsletter-home .input-append .btn-inline:hover{ background-color:#000; background-position:-60% 0; }
.section-newsletter-home.is-valid .input-append .btn-inline{ background-color:#000; }
.section-newsletter-home .alert-success,
.section-newsletter-home .alert-danger{
  display:inline-flex; margin-top:18px !important; padding:12px 20px; border:0 !important; border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff !important; font-weight:600;
}
.section-newsletter-home .alert-success{ background:#fff; color:var(--nonno-navy) !important; animation:nonno-pop 500ms var(--nonno-ease) both; }
.nonno-news-env{
  display:inline-flex; align-items:center; justify-content:center; width:76px; height:76px; margin-bottom:18px;
  border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  animation:nonno-float 4s ease-in-out infinite;
}
.nonno-news-env svg{ width:38px; height:38px; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.section-newsletter-home.is-success .nonno-news-env{ background:#fff; }
.section-newsletter-home.is-success .nonno-news-env svg{ stroke:var(--nonno-navy); }
@media (max-width:575px){
  .section-newsletter-home .input-append{ flex-direction:column; align-items:stretch; border-radius:24px; }
  .section-newsletter-home .input-append .btn-inline{ width:100%; }
}

/* Pie: subrayado al pasar */
.js-footer .footer-nav-container a,
.js-footer .footer-contact-info-container a{
  background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat;
  background-size:0 1px; background-position:0 100%; padding-bottom:2px;
  transition:background-size 250ms ease, opacity 200ms ease;
}
.js-footer .footer-nav-container a:hover,
.js-footer .footer-contact-info-container a:hover{ background-size:100% 1px; }

/* =====================================================================
   6. Producto
   ===================================================================== */
/* Bloque de compra */
.template-product .js-price-container .js-price-display{ font-size:clamp(30px, 3vw, 38px); font-weight:700; color:var(--nonno-navy); letter-spacing:-.01em; }
.template-product .js-price-container .price-compare{ color:#7a8190; text-decoration:line-through; }
.template-product .js-price-container .d-flex > span.font-big.text-accent{
  display:inline-flex; align-items:center; margin-left:12px !important; padding:3px 10px; border-radius:999px;
  background:var(--nonno-red); color:#fff !important; font-size:13px; font-weight:700;
}
.template-product .js-product-payments-container{
  padding:12px 16px !important; border-radius:var(--nonno-radius); background:var(--nonno-soft);
  border:1px solid var(--nonno-line);
}
.template-product .js-product-payments-container .js-max-installments-container{ margin-bottom:4px !important; color:var(--nonno-text); }
.template-product .js-product-payments-container .product-installment-amount,
.template-product .js-product-payments-container .product-installment-value{ font-weight:700; color:var(--nonno-navy); }
.template-product .cart-button-container .btn-primary{ border-radius:999px; }
.template-product .micx-wa-btn{ grid-column:1 / -1; border-radius:999px; }
.nonno-retiro{
  display:flex; align-items:flex-start; gap:10px; margin:0 0 20px; padding:12px 16px;
  border-radius:var(--nonno-radius); border:1px dashed rgba(var(--nonno-navy-rgb),.35);
  color:var(--nonno-text); font-size:14px; line-height:1.4;
}
.nonno-retiro svg{ width:20px; height:20px; flex:0 0 auto; margin-top:1px; fill:none; stroke:var(--nonno-navy); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nonno-retiro strong{ color:var(--nonno-navy); }

/* Texto de la descripcion estructurada */
.user-content .nonno-lead{ font-size:17px; line-height:1.55; color:var(--nonno-text); }
[data-store^="product-description"] .user-content h3{
  margin:18px 0 6px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5b6272;
}

/* Ficha */
.nonno-ficha{ display:grid; gap:18px; margin:8px 0 24px; }
.nonno-ficha__slot{ display:grid; gap:18px; }
.nonno-ficha__slot:empty{ display:none; }
.nonno-ficha__block{
  padding:22px 22px 20px; border-radius:12px; background:#fff; border:1px solid var(--nonno-line);
  box-shadow:0 8px 24px rgba(var(--nonno-navy-rgb),.06);
}
.nonno-ficha__title{
  display:flex; align-items:center; gap:10px; margin:0 0 16px;
  font-size:19px; font-weight:700; color:var(--nonno-navy);
}
.nonno-ficha__ico{ width:24px; height:24px; flex:0 0 auto; fill:none; stroke:var(--nonno-navy); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nonno-ficha__sub{ margin:18px 0 10px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5b6272; }
.nonno-specs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px; margin:0; }
.nonno-spec{
  padding:12px 14px; border-radius:10px; background:var(--nonno-soft);
  border-left:3px solid var(--nonno-navy);
  transition:transform 200ms ease, box-shadow 200ms ease;
}
.nonno-spec:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(var(--nonno-navy-rgb),.1); }
.nonno-spec dt{ margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#5b6272; }
.nonno-spec dd{ margin:0; font-size:15px; font-weight:700; color:var(--nonno-text); overflow-wrap:break-word; }
.nonno-specs--medidas .nonno-spec{ border-left-color:var(--nonno-blue); }
.nonno-ficha__list{ margin:0; padding-left:20px; }
.nonno-ficha__list li{ margin:4px 0; }

.nonno-compat{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.nonno-compat th{
  padding:10px 12px; text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--nonno-navy); color:#fff;
}
.nonno-compat th:first-child{ border-radius:8px 0 0 8px; }
.nonno-compat th:last-child{ border-radius:0 8px 8px 0; }
.nonno-compat td{ padding:11px 12px; border-bottom:1px solid var(--nonno-line); vertical-align:top; }
.nonno-compat tbody tr:nth-child(even) td{ background:var(--nonno-soft); }
.nonno-compat td:first-child{ font-weight:700; color:var(--nonno-navy); }
.nonno-ficha__note{
  display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; padding:12px 14px; border-radius:10px;
  background:rgba(9,106,181,.08); color:var(--nonno-text); font-size:14px; line-height:1.45;
}
.nonno-ficha__note svg{ width:20px; height:20px; flex:0 0 auto; fill:none; stroke:var(--nonno-blue); stroke-width:1.8; stroke-linecap:round; }
.nonno-ficha__note a{ font-weight:700; color:var(--nonno-navy) !important; }
@media (max-width:575px){
  .nonno-compat thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .nonno-compat tr{ display:block; margin-bottom:10px; border:1px solid var(--nonno-line); border-radius:10px; overflow:hidden; }
  .nonno-compat td{ display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--nonno-line); background:#fff !important; }
  .nonno-compat td:last-child{ border-bottom:0; }
  .nonno-compat td::before{ content:attr(data-label); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#5b6272; }
}

/* Acordeones (ficha y preguntas frecuentes) */
.nonno-ficha__accs{ display:grid; gap:10px; }
.nonno-acc{
  border:1px solid var(--nonno-line); border-radius:12px; background:#fff; overflow:hidden;
  transition:box-shadow 200ms ease, border-color 200ms ease;
}
.nonno-acc[open]{ border-color:rgba(var(--nonno-navy-rgb),.35); box-shadow:0 10px 26px rgba(var(--nonno-navy-rgb),.08); }
.nonno-acc__sum{
  position:relative; display:flex; align-items:center; gap:12px; padding:16px 52px 16px 18px;
  list-style:none; cursor:pointer; font-weight:700; font-size:15px; color:var(--nonno-navy);
}
.nonno-acc__sum::-webkit-details-marker{ display:none; }
.nonno-acc__sum::after{
  content:''; position:absolute; right:20px; top:50%; width:10px; height:10px; margin-top:-7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg);
  transition:transform 220ms ease, margin-top 220ms ease;
}
.nonno-acc[open] > .nonno-acc__sum::after{ transform:rotate(-135deg); margin-top:-2px; }
.nonno-acc__sum:hover{ background:var(--nonno-soft); }
.nonno-acc__sum:focus-visible{ outline:2px solid var(--nonno-navy); outline-offset:-2px; }
.nonno-acc__ico{ width:22px; height:22px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nonno-acc__body{ padding:0 18px 18px; font-size:15px; line-height:1.6; color:var(--nonno-text); }
.nonno-acc[open] > .nonno-acc__body{ animation:nonno-acc-in 260ms var(--nonno-ease) both; }
.nonno-acc__body p{ margin:0; }
.nonno-acc__body a{ font-weight:700; color:var(--nonno-navy) !important; text-decoration:underline; }
.nonno-mini-faq{ margin:0; }
.nonno-mini-faq dt{ margin:14px 0 4px; font-weight:700; color:var(--nonno-text); }
.nonno-mini-faq dt:first-child{ margin-top:0; }
.nonno-mini-faq dd{ margin:0; color:#434a57; }

/* =====================================================================
   7. Paginas
   ===================================================================== */
.template-page .nonno-page{ overflow:hidden; }
.nonno-page .breadcrumbs,
.nonno-page .breadcrumbs a,
.nonno-page .breadcrumbs .crumb{ color:rgba(255,255,255,.78) !important; }

/* Hero con foto */
.nonno-hero{
  position:relative; display:flex; align-items:flex-end; min-height:clamp(420px, 70vh, 640px);
  color:#fff; background:var(--nonno-navy); isolation:isolate;
}
.nonno-hero__img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  animation:nonno-kenburns 12s ease-out both;
}
.nonno-hero__shade{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,20,62,.35) 0%, rgba(0,26,80,.72) 55%, rgba(0,26,80,.94) 100%);
}
.nonno-hero__body{ padding-top:48px; padding-bottom:clamp(40px, 7vw, 72px); }
.nonno-hero__title{
  margin:0 0 14px; font-weight:800; font-size:clamp(40px, 7vw, 76px); line-height:1; letter-spacing:-.03em;
  color:#fff; animation:nonno-fade-up 800ms var(--nonno-ease) both 120ms;
}
.nonno-hero__lead{
  max-width:640px; margin:0; font-size:clamp(16px, 2vw, 20px); line-height:1.5; color:rgba(255,255,255,.9);
  animation:nonno-fade-up 800ms var(--nonno-ease) both 260ms;
}
.nonno-hero .nonno-kicker{ color:rgba(255,255,255,.75); animation:nonno-fade-up 800ms var(--nonno-ease) both; }

.nonno-somos__intro{ padding-top:40px; }

/* Dos columnas: foto + texto */
.nonno-split{ display:grid; gap:clamp(28px, 5vw, 64px); align-items:center; }
@media (min-width:992px){ .nonno-split{ grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); } }
.nonno-split__media{ margin:0; position:relative; }
.nonno-split__media img{
  display:block; width:100%; height:clamp(360px, 44vw, 620px); object-fit:cover; object-position:50% 60%; border-radius:16px;
  box-shadow:0 30px 60px rgba(var(--nonno-navy-rgb),.22);
}
.nonno-split__media::before{
  content:''; position:absolute; left:-14px; top:-14px; width:48%; height:48%; z-index:-1;
  border-radius:16px; background:var(--nonno-navy);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 10px, transparent 10px 24px);
}
.nonno-split__body p{ font-size:16px; line-height:1.65; color:#343a46; }
.nonno-checks{ display:grid; gap:10px; margin:20px 0 0; padding:0; list-style:none; }
.nonno-checks li{ position:relative; padding-left:32px; font-weight:600; color:var(--nonno-text); }
.nonno-checks li::before{
  content:''; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%;
  background:var(--nonno-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Cifras */
.nonno-numbers__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:28px; text-align:center; }
.nonno-num{ display:flex; flex-direction:column; gap:6px; }
.nonno-num__value{ font-weight:800; font-size:clamp(40px, 6vw, 64px); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.nonno-num__value--text{ font-size:clamp(30px, 4vw, 44px); }
.nonno-num__label{ font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.75); }

/* Marcas: chips de texto */
.nonno-brands__wall{ display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 0; padding:0; list-style:none; }
.nonno-brand{
  display:inline-flex; align-items:center; min-height:48px; padding:10px 22px; border-radius:12px;
  background:#fff; border:1px solid var(--nonno-line); color:var(--nonno-navy) !important;
  font-weight:800; font-size:16px; letter-spacing:.01em; text-decoration:none;
  box-shadow:0 4px 12px rgba(var(--nonno-navy-rgb),.05);
  transition:transform 200ms var(--nonno-ease), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.nonno-brand:hover{ transform:translateY(-3px); background:var(--nonno-navy); color:#fff !important; box-shadow:0 12px 24px rgba(var(--nonno-navy-rgb),.25); }

/* Ubicacion */
.nonno-location__card{
  display:grid; gap:0; overflow:hidden; padding:0 !important; border-radius:18px; background:#fff;
  box-shadow:0 24px 50px rgba(var(--nonno-navy-rgb),.12);
}
@media (min-width:768px){ .nonno-location__card{ grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); } }
.nonno-location__media{ margin:0; min-height:280px; }
.nonno-location__media img{ display:block; width:100%; height:100%; min-height:280px; max-height:520px; object-fit:cover; }
.nonno-location__body{ padding:clamp(24px, 4vw, 48px); }
.nonno-location__line{ margin:-6px 0 18px; color:#5b6272; }
.nonno-location__facts{ display:grid; gap:12px; margin:0 0 24px; padding:0; list-style:none; }
.nonno-location__facts li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; }
.nonno-location__facts svg{ width:22px; height:22px; flex:0 0 auto; fill:none; stroke:var(--nonno-navy); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nonno-location__facts a{ font-weight:700; color:var(--nonno-navy) !important; }

/* Cierre */
.nonno-cta__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.nonno-cta__title{ margin:0 0 8px; font-weight:800; font-size:clamp(26px, 4vw, 40px); color:#fff; letter-spacing:-.02em; }
.nonno-cta__text{ margin:0; color:rgba(255,255,255,.85); font-size:16px; }
.nonno-cta__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.nonno-cta.has-wa .nonno-cta__products{ background-color:transparent; color:#fff !important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }

/* Preguntas frecuentes */
.nonno-page-head{ padding:clamp(36px, 6vw, 72px) 0 clamp(40px, 6vw, 64px); }
.nonno-page-head__title{ margin:0 0 10px; font-weight:800; font-size:clamp(34px, 5.5vw, 60px); line-height:1.05; letter-spacing:-.03em; color:#fff; }
.nonno-page-head__lead{ margin:0 0 26px; font-size:17px; color:rgba(255,255,255,.86); }
.nonno-faq__search{
  position:relative; display:block; max-width:620px; margin:0;
}
.nonno-faq__search svg{ position:absolute; left:20px; top:50%; width:20px; height:20px; margin-top:-10px; fill:none; stroke:#5b6272; stroke-width:2; stroke-linecap:round; pointer-events:none; }
.nonno-faq__search input{
  width:100%; height:56px; padding:0 22px 0 52px; border:0; border-radius:999px; background:#fff;
  color:var(--nonno-text); font-family:inherit; font-size:16px; box-shadow:0 16px 36px rgba(0,0,0,.22);
}
.nonno-faq__search input:focus{ outline:0; box-shadow:0 0 0 4px rgba(255,255,255,.35), 0 16px 36px rgba(0,0,0,.22); }
.nonno-faq__wrap{ padding-top:36px; padding-bottom:56px; }
.nonno-faq__layout{ display:grid; gap:32px; align-items:start; }
@media (min-width:992px){ .nonno-faq__layout{ grid-template-columns:minmax(0, 1fr) 320px; } .nonno-faq__side{ position:sticky; top:calc(var(--nonno-head-h, 0px) + 20px); } }
.nonno-faq__tools{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.nonno-faq__index{ display:flex; flex-wrap:wrap; gap:8px; }
.nonno-faq__intro{ margin-bottom:24px; }
.nonno-faq__empty{ padding:18px; border-radius:12px; background:var(--nonno-soft); font-weight:600; }
.nonno-faq__group{ margin:0 0 30px; scroll-margin-top:calc(var(--nonno-head-h, 0px) + 20px); }
.nonno-faq__group .nonno-acc{ margin-bottom:10px; }
.nonno-faq__group-title{ margin:0 0 14px; font-weight:800; font-size:22px; color:var(--nonno-navy); }
.nonno-help{
  padding:24px; border-radius:16px; color:#fff; background-color:var(--nonno-navy);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, transparent 14px 34px);
  box-shadow:0 20px 40px rgba(var(--nonno-navy-rgb),.25);
}
.nonno-help__title{ margin:0 0 8px; font-size:20px; font-weight:800; }
.nonno-help__text{ margin:0 0 18px; color:rgba(255,255,255,.85); font-size:14px; }
.nonno-help .nonno-btn{ width:100%; margin-bottom:14px; }
.nonno-help__line{ display:flex; align-items:center; gap:10px; padding:6px 0; color:#fff !important; font-weight:700; text-decoration:none; }
.nonno-help__line svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nonno-help__hours{ margin:10px 0 0; font-size:13px; color:rgba(255,255,255,.75); }

.nonno-photo-band{ position:relative; display:flex; align-items:center; min-height:380px; color:#fff; isolation:isolate; }
.nonno-photo-band__img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.nonno-photo-band::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(0,26,80,.92) 0%, rgba(0,26,80,.6) 55%, rgba(0,26,80,.25) 100%); }
.nonno-photo-band__body{ padding-top:56px; padding-bottom:56px; }
.nonno-photo-band__title{ margin:0 0 8px; font-weight:800; font-size:clamp(26px, 4vw, 42px); letter-spacing:-.02em; }
.nonno-photo-band__text{ margin:0 0 20px; font-size:17px; color:rgba(255,255,255,.88); }

/* =====================================================================
   Animaciones
   ===================================================================== */
@keyframes nonno-fade-up{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes nonno-kenburns{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
@keyframes nonno-dot{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes nonno-float{ 0%, 100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-8px) rotate(3deg); } }
@keyframes nonno-pop{ 0%{ transform:scale(.9); opacity:0; } 60%{ transform:scale(1.04); opacity:1; } 100%{ transform:none; } }
@keyframes nonno-acc-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* =====================================================================
   8. Movimiento reducido: sin animaciones ni desplazamientos
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .nonno-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .head-main, .head-main *,
  .nonno-mega, .nonno-mega *,
  .nonno-btn, .nonno-brand, .nonno-spec, .nonno-acc, .nonno-acc *,
  .js-item-product, .js-item-product *,
  .section-banners-home *, .section-newsletter-home *,
  .btn-primary, .micx-buscar{ transition-duration:1ms !important; animation:none !important; }
  [data-store="home-slider"] .slider-image,
  [data-store="home-slider"] .swiper-pagination-bullet-active::after,
  .micx-buscador, .nonno-news-env, .nonno-hero__img, .nonno-hero__title, .nonno-hero__lead,
  .nonno-hero .nonno-kicker, .nonno-mega__col{ animation:none !important; }
  .js-item-product.product-item:hover,
  .section-banners-home .js-textbanner:hover,
  .nonno-brand:hover, .nonno-spec:hover, .nonno-btn:hover{ transform:none !important; }
  .js-item-product.product-item:hover .product-item-image{ scale:none !important; }
  .section-banners-home .js-textbanner:hover .textbanner-image{ transform:none !important; }
}

/* Buscador por vehiculo en celular: "Repuestos" y "Herramientas" lado a lado.
   El flex-wrap de micx-nonno.css mandaba el segundo boton a otra linea porque
   la etiqueta y los dos botones no entran en una sola fila de 390px. */
@media (max-width: 767px){
  .micx-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .micx-tabs-label{ grid-column:1 / -1; margin:0; }
  .micx-tabs .micx-tab{ width:100%; min-width:0; padding-left:8px; padding-right:8px; text-align:center; }
}

/* Somos Nonno, tarjeta "Donde estamos": foto del frente completa (cielo,
   cartel, toldo y vereda), como la pidio el cliente. La caja toma el formato
   vertical real de la foto (3:4), asi no se recorta nada; la columna de la
   foto es mas angosta (4/11) para que la tarjeta no quede demasiado alta. */
@media (min-width:768px){
  .nonno-location__card{ grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); align-items:center; }
}
.nonno-location__media{ min-height:0; }
.nonno-location__media img{ aspect-ratio:3 / 4; height:auto; min-height:0; max-height:none; object-fit:cover; }