/* =========================================================
   Candy Town — hoja de estilos
   Paleta y medidas tomadas del diseño original (lienzo 1024 px)
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
    /* color */
    --magenta: #ED28B0;
    --magenta-fuerte: #F3159D;
    --magenta-hondo: #E44882;
    --rosa: #F272C2;
    --rosa-claro: #F7BCD5;
    --rosa-suave: #FA81C6;
    --rosa-palo: #FCDEF2;
    --amarillo: #F2E90F;
    --tinta: #2E0B24;
    --gris: #5B5B5B;
    --blanco: #FFFFFF;
    --gris-claro: #CCC;
    /* gradientes del diseño */
    --grad-nav: linear-gradient(90deg, var(--magenta) 0%, var(--rosa-claro) 100%);
    --grad-seleccion: linear-gradient(90deg, var(--magenta-fuerte) 0%, var(--magenta-hondo) 50%, var(--rosa-suave) 100%);
    /* tipografía */
    --display: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", Verdana, sans-serif;
    --texto: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* medidas */
    --ancho: 1024px;
    --gutter: 20px;
    --radio: 18px;
    --nav-alto: 44px;
    --onda-alto: 50px;
    --hero-sube: 94px; /* onda + menú: cuánto asciende el banner */
    --transicion: .25s ease;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--texto);
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--magenta); color:#fff;
  padding:10px 18px; border-radius:0 0 12px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--amarillo);
  outline-offset:2px;
}

/* ---------- 3. Títulos ---------- */
.titulo{
  font-family:var(--display);
  font-variation-settings:"wdth" 82, "wght" 700;
  font-weight:700;
  font-size:clamp(1.9rem, 6.2vw, 3.1rem);
  line-height:1.05;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:center;
  color:var(--magenta-fuerte)!important;
  margin:0 0 .35em;
}

/* magenta con contorno blanco, como en el diseño */
.titulo--contorno{
  color:var(--magenta-fuerte);
  text-shadow:
    -3px -3px 0 #fff,  3px -3px 0 #fff,
    -3px  3px 0 #fff,  3px  3px 0 #fff,
     0   -3px 0 #fff,  0    3px 0 #fff,
    -3px  0   0 #fff,  3px  0   0 #fff,
     0    6px 10px rgba(237,40,176,.20);
}

.titulo--blanco{
  color:var(--blanco);
  text-shadow:0 3px 8px rgba(120,10,80,.28);
}

.subtitulo{
  font-weight:700;
  font-size:clamp(.8rem, 2.4vw, .98rem);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  color:var(--magenta);
  margin:0 0 2.2rem;
}

/* ---------- 4. Barra de contacto superior ---------- */
.contact-bar{
  background:var(--rosa-palo);
  border-bottom:1px solid var(--rosa-claro);
}

.contact-bar__inner{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding:10px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
}

.contact-bar__item, .phone-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .68rem;
    font-weight: 500;
    color: var(--tinta);
    letter-spacing: .02em;
    transition: color var(--transicion);
}

.contact-bar__item:hover{
  color:var(--magenta-fuerte);
}

.contact-bar__icon{
  width:14px;
  height:14px;
  fill:var(--magenta);
  flex-shrink:0;
}

/* ---------- 5. Header ---------- */
.topbar{
  position:relative;
  z-index:5;                 /* por encima del banner que sube */
  background:transparent;
  padding:8px 0 4px;
}

/* capa blanca del encabezado: cubre todo menos la franja de la onda */
.topbar::before{
  content:"";
  position:absolute;
  inset:0 0 var(--onda-alto) 0;
  background:var(--blanco);
  z-index:0;
}

.topbar__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding:0 var(--gutter);
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top: 22px;
  margin-bottom: 0px;
}

.topbar__logo{
  display:block;
  transition:transform var(--transicion);
}

.topbar__logo:hover{
  transform:scale(1.05);
}

.topbar__logo img{
  width:120px;
  height:auto;
}

/* onda invertida: recorta en blanco la parte alta del banner */
.onda{
  position:relative;
  z-index:1;
  height:var(--onda-alto);
  background:var(--blanco);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path fill='black' d='M0,64L60,85.3C120,107,240,149,360,181.3C480,213,600,235,720,224C840,213,960,171,1080,149.3C1200,128,1320,128,1380,128L1440,128L1440,0L0,0Z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path fill='black' d='M0,64L60,85.3C120,107,240,149,360,181.3C480,213,600,235,720,224C840,213,960,171,1080,149.3C1200,128,1320,128,1380,128L1440,128L1440,0L0,0Z'/></svg>");
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}



/* ---------- 6. Navegación ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--grad-nav);
}

.nav__inner{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  min-height:var(--nav-alto);
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  gap:14px;
}

.nav__toggle{
  display:none;
  width:34px; height:34px;
  align-items:center; justify-content:center;
}
.nav__burger,
.nav__burger::before,
.nav__burger::after{
  content:"";
  display:block;
  width:22px; height:2.5px;
  border-radius:2px;
  background:var(--blanco);
  transition:transform var(--transicion), opacity var(--transicion);
}
.nav__burger::before{ transform:translateY(-7px); }
.nav__burger::after{  transform:translateY(4.5px); }
.nav__toggle[aria-expanded="true"] .nav__burger{ background:transparent; }
.nav__toggle[aria-expanded="true"] .nav__burger::before{ transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger::after{  transform:rotate(-45deg) translateY(0); }

.nav__menu{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1;
}

.nav__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:12px 13px;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--blanco);
  white-space:nowrap;
  transition:opacity var(--transicion);
}
.nav__link:hover,
.nav__link.is-activo{ opacity:.72; }

.flecha{
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform var(--transicion);
}
[aria-expanded="true"] > .flecha{ transform:rotate(180deg); }

/* submenús */
.tiene-submenu,
.menu-item-has-children{ position:relative; }

.submenu{
  position:absolute;
  top:100%; left:6px;
  min-width:200px;
  background:var(--blanco);
  border-radius:0 0 14px 14px;
  box-shadow:0 14px 30px rgba(120,10,80,.20);
  padding:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  max-height:0;
  overflow:hidden;
  transform:translateY(-8px);
  transition:opacity var(--transicion), transform var(--transicion),
             visibility var(--transicion), max-height var(--transicion);
}
.tiene-submenu.abierto .submenu,
.menu-item-has-children.abierto .submenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  padding:8px 0;
  max-height:min(70vh, 520px);
  overflow-y:auto;
}
.submenu a{
  display:block;
  padding:9px 18px;
  font-size:.78rem;
  font-weight:500;
  color:var(--tinta);
  transition:background var(--transicion), color var(--transicion);
}
.submenu a:hover{ background:var(--rosa-palo); color:var(--magenta-fuerte); }

/* megamenú */
.megamenu{
  position:absolute;
  top:100%; left:6px;
  min-width:500px;
  background:var(--blanco);
  border-radius:0 0 14px 14px;
  box-shadow:0 14px 30px rgba(120,10,80,.20);
  padding:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  max-height:0;
  overflow:hidden;
  transform:translateY(-8px);
  transition:opacity var(--transicion), transform var(--transicion),
             visibility var(--transicion), max-height var(--transicion);
}
.menu-item-is-megamenu.abierto .megamenu,
.menu-item-has-children.abierto .megamenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  padding:18px 20px;
  max-height:min(70vh, 600px);
  overflow-y:auto;
}
.megamenu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:20px 24px;
}
.megamenu-col{
  min-width:0;
}
.megamenu-title{
  font-family:var(--display);
  font-variation-settings:"wdth" 88, "wght" 600;
  font-size:.82rem;
  color:var(--magenta);
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.megamenu-list{
  list-style:none;
  margin:0;
  padding:0;
}
.megamenu-list-item{
  margin:0;
}
.megamenu-link{
  display:block;
  padding:6px 10px;
  font-size:.75rem;
  font-weight:500;
  color:var(--tinta);
  transition:background var(--transicion), color var(--transicion);
  border-radius:6px;
}
.megamenu-link:hover{
  background:var(--rosa-palo);
  color:var(--magenta-fuerte);
}

/* buscador */
form#buscador.buscador,
form.buscador,
.nav__inner > form.buscador,
.buscador{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  background:var(--blanco) !important;
  border-radius:999px !important;
  padding:4px 8px 4px 14px !important;
  width:min(300px, 40vw) !important;
  box-shadow:0 2px 6px rgba(120,10,80,.12) !important;
  border:none !important;
  margin:0 !important;
}
/* Forzar que todos los hijos directos estén en línea */
form#buscador.buscador > *,
form.buscador > *,
.buscador > *{
  flex-shrink:0;
  margin:0 !important;
}
form.buscador input,
.buscador input,
.buscador input[type="search"],
#txt_search{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  border:0 !important;
  outline:0 !important;
  background:none !important;
  font-size:.7rem !important;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tinta) !important;
  padding:0 !important;
  margin:0 !important;
  height:auto !important;
  line-height:normal !important;
}
/* Asegurar que label oculto no ocupe espacio */
form.buscador .visually-hidden,
.buscador .visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
form.buscador input::placeholder,
.buscador input::placeholder,
#txt_search::placeholder{ color:#B9A3B2 !important; }
form.buscador .buscador__btn svg,
form.buscador .buscador__icono-nav svg,
.buscador__btn svg,
.buscador__icono-nav svg{
  width:15px !important;
  height:15px !important;
  fill:var(--magenta);
  display:block;
}
form.buscador .buscador__btn,
form.buscador .buscador__icono-nav,
.buscador__btn,
.buscador__icono-nav{
  padding:4px;
  border:none !important;
  background:transparent !important;
  border-radius:50%;
  transition:background var(--transicion);
  cursor:pointer;
}
form.buscador .buscador__btn:hover,
form.buscador .buscador__icono-nav:hover,
.buscador__btn:hover,
.buscador__icono-nav:hover{ background:var(--rosa-palo) !important; }

/* badge del carrito */
.buscador__icono-nav{
  position:relative;
}
.badge{
  position:absolute;
  top:-4px;
  right:-4px;
  background:var(--magenta);
  color:var(--blanco);
  font-size:.6rem;
  font-weight:700;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* dropdown de resultados de búsqueda */
.search-results-dropdown,
#resultados{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--blanco);
  box-shadow:0 4px 12px rgba(120,10,80,.15);
  max-height:400px;
  overflow-y:auto;
  z-index:100;
  border-radius:0 0 12px 12px;
}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  z-index:1;                        /* queda detrás del encabezado */
  margin-top:calc(-1 * var(--hero-sube));
  overflow:hidden;
  /* color de respaldo: sigue al banner activo para que no asome
     rosa durante el deslizamiento */
  background:var(--rosa-palo);
  transition:background-color .45s ease;
}
body[data-tema="amarillo"] .hero{ background:var(--amarillo); }

.hero__pista{
  display:flex;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}

.hero__slide{
  position:relative;
  flex:0 0 100%;
  margin:0;
}

/* banner de una sola pieza (slide con una sola imagen) */
.hero__slide > img:only-child{
  width:100%;
  aspect-ratio:1024 / 472;
  object-fit:cover;
}

/* banner en dos capas: el logo escala aparte del fondo */
.hero__fondo{
  width:100%;
  aspect-ratio:1024 / 472;
  object-fit:cover;
}
.hero__logo{
  position:absolute;
  inset:var(--hero-sube) 0 0 0;   /* centrado en lo que se ve */
  margin:auto;
  width:min(36%, 400px);
  height:auto;
  /* nunca se sale de la parte visible del banner */
  max-height:calc(100% - var(--hero-sube) - 20px);
  aspect-ratio:auto;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(120,10,80,.22));
}

.hero__flecha{
  position:absolute;
  top:calc(50% + var(--hero-sube) / 2);
  transform:translateY(-50%);
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  box-shadow:0 3px 10px rgba(120,10,80,.18);
  opacity:0;
  transition:opacity var(--transicion), background var(--transicion);
}
.hero:hover .hero__flecha,
.hero__flecha:focus-visible{ opacity:1; }
.hero__flecha:hover{ background:#fff; }
.hero__flecha svg{ width:20px; height:20px; fill:var(--magenta-fuerte); }
.hero__flecha--prev{ left:14px; }
.hero__flecha--next{ right:14px; }

.hero__puntos{
  position:absolute;
  bottom:12px; left:0; right:0;
  display:flex; justify-content:center; gap:8px;
}
.hero__punto{
  width:9px; height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.6);
  box-shadow:0 1px 4px rgba(120,10,80,.25);
  transition:background var(--transicion), transform var(--transicion);
}
.hero__punto.is-activo{
  background:var(--magenta-fuerte);
  transform:scale(1.25);
}

/* ---------- 7. El mundo de Candy Town ---------- */
.mundo{ padding:46px 0 34px; }

.mundo .titulo{
  font-size:clamp(1.9rem, 6.4vw, 3.2rem);
}

.mundo__mapa{
  width:min(88%, 860px);
  margin:14px auto 0;
}

/* ---------- 8. Marcas ---------- */
.marcas{ padding:10px 0 54px; }

.marcas__grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:26px 18px;
  align-items:center;
  justify-items:center;
  max-width:900px;
  margin-inline:auto;
}

.marcas__grid li{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:16 / 9;
}

.marcas__grid img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:saturate(1);
  transition:transform var(--transicion);
}
.marcas__grid li:hover img{ transform:scale(1.07); }

/* las últimas 4 se centran, como en el diseño */
.marcas__grid li:nth-child(11){ grid-column:2; }

/* ---------- 9. Una selección del mundo para ti ---------- */
.seleccion{
  background:var(--grad-seleccion);
  padding:34px 0 40px;
}

.seleccion .titulo{
  font-size:clamp(1.55rem, 4.6vw, 2.7rem);
  margin-bottom:1.1rem;
}

.paises{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
}

.pais a{
  display:block;
  text-align:center;
  transition:transform var(--transicion);
}
.pais a:hover{ transform:translateY(-6px); }

.pais img{
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:22px;
}

.pais__etiqueta{
  display:block;
  width:min(88%, 150px);
  margin:-6px auto 0;
  position:relative;
  background:var(--blanco);
  border:2px solid var(--rosa-suave);
  border-radius:999px;
  padding:5px 6px;
  font-family:var(--display);
  font-variation-settings:"wdth" 85, "wght" 600;
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--magenta-fuerte);
  box-shadow:0 3px 8px rgba(120,10,80,.15);
}

/* ---------- 10. Banda de producto ---------- */
.banda img{
  width:100%;
  aspect-ratio:1024 / 556;
  object-fit:cover;
  object-position:center;
}

/* ---------- 11. Pedidos / pie ---------- */
.pedidos{
  background:var(--grad-nav);
  color:var(--blanco);
  text-align:center;
  padding:36px 0 30px;
}

.pedidos__titulo{
  font-family:var(--display);
  font-variation-settings:"wdth" 88, "wght" 700;
  font-size:clamp(1.35rem, 4.4vw, 2.05rem);
  line-height:1.15;
  margin:0 0 .18em;
  text-shadow:0 3px 8px rgba(120,10,80,.25);
}

.pedidos__sub{
  font-family:var(--display);
  font-variation-settings:"wdth" 88, "wght" 600;
  font-size:clamp(1.1rem, 3.4vw, 1.6rem);
  margin:0 0 .35em;
}

.pedidos__correo{
  display:inline-block;
  font-weight:700;
  font-size:clamp(1rem, 3.6vw, 1.55rem);
  letter-spacing:.01em;
  padding-bottom:3px;
  border-bottom:2px solid transparent;
  transition:border-color var(--transicion);
}
.pedidos__correo:hover{ border-bottom-color:var(--blanco); }

.pedidos__legal{
  margin:24px 0 0;
  font-size:.66rem;
  line-height:1.7;
  opacity:.82;
}

.pedidos__extras{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:18px;
  font-size:.75rem;
}

/* ---------- 12. Aparición al hacer scroll ---------- */
.revelar{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s ease, transform .6s ease;
}
.revelar.visible{
  opacity:1;
  transform:none;
}

/* =========================================================
   13. Responsive
   ========================================================= */

/* --- Tablet --- */
@media (max-width:1023px){
  .topbar__datos{ gap:18px; }
  .dato{ max-width:290px; }
  .nav__link{ padding:12px 9px; font-size:.64rem; }
  .buscador{ width:min(220px, 32vw); }
  .marcas__grid{ gap:22px 14px; }
}

/* --- Móvil --- */
@media (max-width:767px){
  :root{
    --gutter:16px;
    --onda-alto:36px;
    --hero-sube:80px;
  }

  /* barra de contacto más compacta */
  .contact-bar__inner{
    gap:14px;
    padding:8px var(--gutter);
    font-size:.62rem;
  }
  .contact-bar__item{ gap:5px; }
  .contact-bar__item span{ display:none; }
  .contact-bar__icon{ width:16px; height:16px; }

  /* mostrar solo íconos en móvil, texto en hover/focus */
  .contact-bar__item:hover span,
  .contact-bar__item:focus span{
    display:inline;
  }

  /* header más compacto */
  .topbar{ padding:6px 0 3px; }
  .topbar__logo img{ width:95px; }

  /* menú fuera de pantalla */
  .nav__inner{ gap:10px; }
  .nav__toggle{ display:flex; }

  .nav__menu{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--magenta);
    padding:6px 0 12px;
    box-shadow:0 16px 30px rgba(120,10,80,.25);
    max-height:0;
    overflow:hidden;
    visibility:hidden;
    transition:max-height .35s ease, visibility .35s ease;
  }
  .nav__menu.abierto{
    max-height:80vh;
    overflow-y:auto;
    visibility:visible;
  }

  .nav__link{
    width:100%;
    justify-content:space-between;
    padding:13px var(--gutter);
    font-size:.78rem;
    border-bottom:1px solid rgba(255,255,255,.16);
  }

  .submenu{
    position:static;
    box-shadow:none;
    border-radius:0;
    background:rgba(255,255,255,.1);
    padding:0;
    max-height:0;
    overflow:hidden;
    opacity:1;
    visibility:visible;
    transform:none;
    transition:max-height .3s ease;
  }
  .tiene-submenu.abierto .submenu,
  .menu-item-has-children.abierto .submenu{ max-height:60vh; overflow-y:auto; }
  .submenu a{
    color:var(--blanco);
    padding:10px calc(var(--gutter) + 14px);
    font-size:.74rem;
  }
  .submenu a:hover{ background:rgba(255,255,255,.14); color:var(--blanco); }

  /* megamenú en móvil */
  .megamenu{
    position:static;
    box-shadow:none;
    border-radius:0;
    background:rgba(255,255,255,.08);
    min-width:0;
    padding:0;
    max-height:0;
    overflow:hidden;
    opacity:1;
    visibility:visible;
    transform:none;
    transition:max-height .3s ease;
  }
  .menu-item-is-megamenu.abierto .megamenu,
  .menu-item-has-children.abierto .megamenu{
    max-height:70vh;
    overflow-y:auto;
    padding:12px calc(var(--gutter) + 6px);
  }
  .megamenu-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .megamenu-title{
    color:var(--rosa-suave);
    font-size:.75rem;
    margin-bottom:6px;
  }
  .megamenu-link{
    color:var(--blanco);
    padding:8px 10px;
    font-size:.72rem;
  }
  .megamenu-link:hover{
    background:rgba(255,255,255,.14);
    color:var(--blanco);
  }

  .buscador{
    width:auto;
    flex:1;
    padding:3px 6px 3px 12px;
  }
  .buscador input{ font-size:.68rem; }

  /* hero un poco más alto para que el logo no quede minúsculo */
  .hero__slide > img:only-child,
  .hero__fondo{ aspect-ratio:4 / 3; }
  .hero__logo{ width:min(58%, 280px); }
  .hero__flecha{ opacity:1; width:32px; height:32px; }

  /* mundo */
  .mundo{ padding:32px 0 22px; }
  .mundo__mapa{ width:100%; }

  /* marcas: 3 por fila */
  .marcas{ padding:6px 0 40px; }
  .marcas__grid{
    grid-template-columns:repeat(3, 1fr);
    gap:20px 12px;
  }
  .marcas__grid li:nth-child(11){ grid-column:auto; }

  /* países: carrusel horizontal con imán */
  .paises{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.6) transparent;
  }
  .pais{
    flex:0 0 46%;
    scroll-snap-align:center;
  }
  .paises::-webkit-scrollbar{ height:5px; }
  .paises::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.6);
    border-radius:99px;
  }

  .banda img{ aspect-ratio:4 / 3; }

  .pedidos{ padding:30px 0 26px; }
}

/* --- Móvil chico --- */
@media (max-width:359px){
  .marcas__grid{ grid-template-columns:repeat(2, 1fr); }
  .pais{ flex:0 0 62%; }
  .pedidos__correo{ font-size:.95rem; word-break:break-all; }
}

/* ---------- 14. Preferencias del sistema ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .revelar{ opacity:1; transform:none; }
}

@media print{
  .nav, .hero__flecha, .hero__puntos, .buscador{ display:none; }
  .revelar{ opacity:1; transform:none; }
}


#heroNext {
	right: 20px;
}
#heroPrev {
  left: 20px;
}
.espacio_inicial
{
display:none!important;
}
.filter-section select {
    width: 100%;
}

.producto-breadcrumb li
{
    display:block; margin-right:10px;
}
.producto-breadcrumb li::after {
    content: ' | ';
}
.producto-breadcrumb li :last-child ::after {
    content: '';
}
.producto-breadcrumb {
    display: flex;
}