/* ===== Rediseño home (borrador 2026): paleta mockup + tipografía serif =====
   Alcance: solo body.page-id-2712 (página de prueba).

   IMPORTANTE: las reglas de TIPOGRAFÍA de este archivo van SIN !important a
   propósito, para que los controles de Elementor (Tipografía del widget)
   siempre manden. Si vuelves a poner !important aquí, el panel de Elementor
   deja de funcionar aunque guarde los cambios. */
body.page-id-2712{
  --am-mint:#D9EDE3; --am-blush:#F6DCE3; --am-magenta:#C2185B;
  --am-wine:#7A2B3A; --am-dark:#2B2B2B; --am-skyblue:#C7DCE8;
  --am-script-font:'Style Script', cursive;
}
body.page-id-2712 h1, body.page-id-2712 h2, body.page-id-2712 h3,
body.page-id-2712 .sw-sec-heading__title,
body.page-id-2712 .sw-best-deal__banner-title{
  font-family:'Playfair Display', Georgia, serif;
}
body.page-id-2712 .sw-sec-heading__subtitle{
  font-family:'Public Sans', sans-serif; letter-spacing:.06em; text-transform:uppercase;
  color:var(--am-magenta);
}
/* Botón "Añadir al carrito" de la grid Lo más buscado: tono magenta de marca */
body.page-id-2712 .swiftcart-btn, body.page-id-2712 .add_to_cart_button{
  background:var(--am-magenta) !important; border-color:var(--am-magenta) !important;
}

/* Barra de anuncio del header (global, el header es compartido) */
html body .sw-header-two__top{ background:#D9EDE3 !important; }
html body .sw-header-two__top *{ color:#1f3d33 !important; }
html body .sw-header-two__top p{ font-weight:400; font-size:14px; }

/* Título hero: primera línea en cursiva/handwriting.
   Lleva !important a propósito: .am-script es un <span> propio que Elementor
   NO puede seleccionar desde el panel, así que esto no te bloquea nada.
   Para cambiar esta fuente: widget del título → Avanzado → CSS Personalizado:
      selector .am-script{ font-family:'LaQueQuieras', cursive !important; }  */
body.page-id-2712 .am-script{
  font-family:var(--am-script-font) !important;
  font-weight:400 !important;
  font-size:0.95em;
  line-height:1.25;
  display:inline-block;
}


/* ===== Correcciones de layout medidas contra el mockup =====
   SOLO escritorio (>=1200px): el tema saca el menu en el breakpoint xl,
   no en lg. A 992px el menu aun no existe y estas reglas desbordaban 22px. */
@media (min-width:1200px){
  /* 1. Menu pegado al logo */
  html body .sw-header-two__wrapper{
    display:flex; align-items:center; gap:48px;
  }
  html body .sw-header-two__right{
    flex:1 1 auto; display:flex; align-items:center; justify-content:space-between;
  }
  html body .sw-header-two__right .sw-main-menu{ margin-right:auto; }
  html body .sw-header-two__btns{ flex:0 0 auto; }

  /* 2. Logo */
  html body .sw-header-two__logo img{ width:230px; height:auto; max-width:none; }

  /* 3. Alto del header */
  html body .sw-header-two.sw-header-three .sw-header-two__wrapper{
    min-height:118px; padding-top:0; padding-bottom:0;
  }
  html body .sw-header-two.sw-header-three{ padding-top:0; padding-bottom:0; }

  /* 4. Tipografia del menu (editable desde el header builder de Elementor) */
  html body .sw-header-two__right .sw-main-menu ul.ul-0 > li > a{
    font-size:19px; font-weight:400; color:#1F2937;
  }
  html body .sw-header-two__right .sw-main-menu ul.ul-0 > li{
    margin-left:24px; margin-right:24px;
  }
  html body .sw-header-two__right .sw-main-menu ul.ul-0 > li:first-child{ margin-left:0; }
}

/* Tablet y laptop pequena (hasta que sale el menu): logo intermedio */
@media (min-width:768px) and (max-width:1199px){
  html body .sw-header-two__logo img{ width:170px; height:auto; }
}

/* Móvil: el logo apaisado no cabe a 230px; dejar que el tema maneje el resto */
@media (max-width:767px){
  html body .sw-header-two__logo img{ width:135px; height:auto; max-width:100%; }
  html body .sw-header-two.sw-header-three .sw-header-two__wrapper{ min-height:0; }
  html body .sw-header-two__top p{ font-size:12px; line-height:1.35; }
}

/* acento 'Tu tienda favorita' */
body.page-id-2712 .elementor-element-am_hero_script{ text-align:right; }


/* ---- pesos por defecto (sin bold). Elementor los sobreescribe ---- */
body.page-id-2712 h1, body.page-id-2712 h2, body.page-id-2712 h3,
body.page-id-2712 h4, body.page-id-2712 h5, body.page-id-2712 h6{ font-weight:500; }
body.page-id-2712 .elementor-button{ font-weight:500; }
body.page-id-2712 p, body.page-id-2712 li{ font-weight:400; }

/* ---- "Lo más buscado": fuente por defecto del tema ---- */
body.page-id-2712 .elementor-element-am_mb_sh,
body.page-id-2712 .elementor-element-am_mas_buscado,
body.page-id-2712 .elementor-element-am_mb_sh *:not(i):not([class*="icon"]):not([class*="fa-"]):not([class*="woosw"]):not([class*="star"]),
body.page-id-2712 .elementor-element-am_mas_buscado *:not(i):not([class*="icon"]):not([class*="fa-"]):not([class*="woosw"]):not([class*="star"]){
  font-family: var(--swiftcart-font) !important;
}
body.page-id-2712 .elementor-element-am_mb_sh h1,
body.page-id-2712 .elementor-element-am_mb_sh h2,
body.page-id-2712 .elementor-element-am_mb_sh h3,
body.page-id-2712 .elementor-element-am_mb_sh h4,
body.page-id-2712 .elementor-element-am_mas_buscado h1,
body.page-id-2712 .elementor-element-am_mas_buscado h2,
body.page-id-2712 .elementor-element-am_mas_buscado h3,
body.page-id-2712 .elementor-element-am_mas_buscado h4{
  font-family: var(--swiftcart-heading-font) !important;
}

/* ---- badges con banderas circulares ---- */
body.page-id-2712 .am-badges{ display:flex; gap:48px; flex-wrap:wrap; align-items:flex-start; }
body.page-id-2712 .am-badge{ display:flex; align-items:center; gap:14px; }
body.page-id-2712 .am-badge img{
  width:46px; height:46px; border-radius:50%; object-fit:cover; flex:0 0 46px;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
body.page-id-2712 .am-badge span{
  font-size:16px; line-height:1.4; color:#1F2937; font-weight:400;
}
@media (max-width:767px){
  body.page-id-2712 .am-badges{ gap:20px; }
  body.page-id-2712 .am-badge span{ font-size:14px; }
}


/* Excepcion: mi regla de 'fuente por defecto' con * tambien pisaba los iconos.
   El tema los define con font-family:'icomoon'!important (especificidad 0,1,0)
   y WooCommerce las estrellas con 'star'. Hay que devolverselos. */
body.page-id-2712 .elementor-element-am_mas_buscado [class^="icon-"],
body.page-id-2712 .elementor-element-am_mas_buscado [class*=" icon-"],
body.page-id-2712 .elementor-element-am_mb_sh [class^="icon-"],
body.page-id-2712 .elementor-element-am_mb_sh [class*=" icon-"]{
  font-family:'icomoon' !important;
}
body.page-id-2712 .elementor-element-am_mas_buscado .star-rating,
body.page-id-2712 .elementor-element-am_mas_buscado .star-rating *,
body.page-id-2712 .elementor-element-am_mas_buscado .star-rating::before,
body.page-id-2712 .elementor-element-am_mas_buscado .star-rating span::before{
  font-family:'star' !important;
}
body.page-id-2712 .elementor-element-am_mas_buscado .fa,
body.page-id-2712 .elementor-element-am_mas_buscado [class^="fa-"],
body.page-id-2712 .elementor-element-am_mas_buscado [class*=" fa-"]{
  font-family:'Font Awesome 6 Free' !important;
}

/* El boletin del footer: fuente por defecto (mi regla de titulos le metia Playfair) */
body.page-id-2712 footer h1, body.page-id-2712 footer h2,
body.page-id-2712 footer h3, body.page-id-2712 footer h4,
body.page-id-2712 .sw-footer h1, body.page-id-2712 .sw-footer h2,
body.page-id-2712 .sw-footer h3, body.page-id-2712 .sw-footer h4,
body.page-id-2712 .sw-newsletter h1, body.page-id-2712 .sw-newsletter h2,
body.page-id-2712 .sw-newsletter h3, body.page-id-2712 .sw-newsletter h4,
body.page-id-2712 .sw-newsletter-form__title,
body.page-id-2712 .sw-newsletter-form__subtitle{
  font-family: var(--swiftcart-heading-font) !important;
}

/* Tarjetas de categoria: ahora son enlaces, que se note */
body.page-id-2712 .elementor-element-am_catgrid_native > .e-con-inner > a,
body.page-id-2712 [class*="elementor-element-catcard_"]{
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease;
}
body.page-id-2712 [class*="elementor-element-catcard_"]:hover{
  transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.09);
}