@font-face{
  font-family: "euclid";
  src:
    url("../fonts/euclid-circular-a-regular.woff") format("woff");
  font-weight: 400;              /* Regular */
  font-style: normal;
  font-display: swap;            /* evita FOIT */
}

@font-face{
  font-family: "euclid";
  src:
    url("../fonts/euclid-circular-a-semibold.woff") format("woff");
  font-weight: 600;              /* Semibold */
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "euclid";
  src:
    url("../fonts/euclid-circular-a-bold.woff") format("woff");
  font-weight: 700;              /* Bold */
  font-style: normal;
  font-display: swap;
}

html, body { font-family: "euclid", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
h1, h2, h3 { font-weight: 700; }
strong     { font-weight: 600; } /* o donde quieras semibold */

img.custom-logo {
    width: 30%;
    height: auto;
    object-fit: cover;
}

/*============== MENU ====================*/

/* ===== Reset y base ===== */
.nav-main .menu,
.nav-main .sub-menu { list-style: none; margin: 0; padding: 0; }
.nav-main li { position: relative; }

/* Mata cualquier viñeta/puntito heredado por el tema */
.nav-main li::marker,
.nav-main li::before { content: none !important; }

/* Enlaces */
.nav-main a { display: inline-block; padding: 10px 8px; font-size: 18px;}

/* ===== Submenús (desktop) ===== */
.nav-main .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  color: #111;
  border-radius: 10px;
  padding: 8px 0;
  box-shadow: 0 16px 40px rgba(0,0,0,.15);
  z-index: 50;
}

@media (min-width: 768px){
  .nav-main .menu > li:hover > .sub-menu,
  .nav-main .menu > li:focus-within > .sub-menu { display: block; }
  .nav-main .sub-menu > li { position: relative; }
  .nav-main .sub-menu .sub-menu { top: 0; left: 100%; margin-left: 6px; }
  .nav-main .sub-menu li:hover > .sub-menu,
  .nav-main .sub-menu li:focus-within > .sub-menu { display: block; }
}

/* Items de submenú */
.nav-main .sub-menu a {
  display: block;
  padding: 10px 14px;
  white-space: nowrap;
  line-height: 1.15;
}
.nav-main .sub-menu a:hover { background: rgba(0,0,0,.06); }

/* ===== Flechas (si tiene hijos) ===== */
.nav-main .menu-item-has-children > a {
  padding-right: 24px;       /* espacio para la flecha */
  position: relative;
}
.nav-main .menu-item-has-children > a::after {
  content: '';
  position: absolute;
  right: 6px; top: 50%; transform: translateY(-50%) rotate(0deg);
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .8;
  transition: transform .2s ease;
  /* Flecha hacia abajo en nivel 0 */
  transform: translateY(-50%) rotate(45deg);
}
/* En submenús (nivel 1+), flecha a la derecha (▸) */
.nav-main .sub-menu .menu-item-has-children > a::after {
  transform: translateY(-50%) rotate(-45deg);
}

/* Cuando está abierto en móvil, giramos la flecha */
.nav-main li.is-open > a::after {
  transform: translateY(-50%) rotate(225deg); /* de ▸ a ▾ */
}

/* ===== Móvil (≤ md) ===== */
@media (max-width: 767.98px){

  nav#mainNav {
        position: absolute;
        width: 100%;
        padding: 10px;
        background: rgb(253, 253, 253);
        left: 0;
        animation: menuMovil;
        animation-fill-mode: forwards;
        transition: all ease-in-out 1s;
        animation-delay: 0.5s;
        z-index: 15;
    }

    @keyframes menuMovil {
        0% { 
            opacity: 0;
            top: -1000px;
        }
        100% {
            opacity: 1;
            top: 13vh;
        }
    }

  /* El <ul> del menú está oculto salvo que el nav tenga .is-open */
  .nav-main .menu { display: none; }
  .nav-main.is-open .menu { display: block; }

  /* Submenús apilados, ocultos por defecto (se abren con .is-open en el LI) */
  .nav-main .sub-menu {
    position: static;
    display: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin-left: 1rem;       /* sangría para indicar nivel */
  }
  .nav-main li.is-open > .sub-menu { display: block; }

  /* Botoncito toggle al lado del <a> */
  .nav-main .toggle-sub {
    margin-left: .35rem;
    border: 0; background: transparent;
    font-size: 1rem; line-height: 1; cursor: pointer;
    padding: 6px;
  }
}


/* Mejora accesibilidad del "tap-to-open" */
@media (max-width: 767.98px){
  .nav-main .menu-item-has-children > a { display:flex; align-items:center; justify-content:space-between; width:100%; }
  .nav-main .menu-item-has-children > a::after { margin-left: .5rem; }
}

/* Por si algún tema vuelve a forzar bullets */
.nav-main .menu li,
.nav-main .sub-menu li { list-style-type: none !important; }

/*--------------------------*/
/* ===== Header actions ===== */
.header-actions .search-input{
  width: 0; opacity: 0;
  transition: width .25s ease, opacity .25s ease, background-color .2s;
  border: 1px solid #ccd1d8; border-radius: 9999px;
  padding: 8px 36px 8px 12px; /* espacio para el icono */
  font-size: 14px; background:#fff;
}
.header-actions .search-btn{
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: transparent; border:0; cursor:pointer; color:#334155;
}
.header-actions .site-search{ position: relative; }
.header-actions .site-search:focus-within .search-input,
.header-actions .site-search .search-input:focus{
  width: 220px; opacity: 1;
}
@media (max-width: 767.98px){
  .header-actions .site-search .search-input{ width: 160px; }
}

/* carrito */
.header-cart-link{
  position: relative; display: inline-flex; align-items: center;
  font-size: 18px; color:#0f172a;
}
.header-cart-link .cart-count-badge{
  position:absolute; top:-6px; right:-10px;
  background:#0d438f; color:#fff; border-radius:9999px;
  font-size: 11px; min-width:18px; height:18px; line-height:18px;
  text-align:center; padding:0 4px; font-weight:700;
  box-shadow: 0 0 0 2px #fff;
}

/* whatsapp */
.header-wa {
    font-size: 20px;
    background: #22c55e;
    display: inline-flex;
    color: white;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.header-wa:hover{ background-color:#16b450; }

/* ===== Botón menú hamburguesa animado ===== */
#navToggle { position: relative; width: 40px; height: 36px; border-radius:8px; }
#navToggle .i-burger,
#navToggle .i-burger::before,
#navToggle .i-burger::after{
  content:''; display:block; position:absolute; left: 9px;
  width: 22px; height: 2px; background:#0f172a; transition: transform .25s ease, opacity .2s;
}
#navToggle .i-burger{ top: 50%; transform: translateY(-50%); }
#navToggle .i-burger::before{ top:-7px; }
#navToggle .i-burger::after{ top:7px; }
#navToggle.is-active .i-burger{ transform: translateY(-50%) rotate(45deg); }
#navToggle.is-active .i-burger::before{ transform: rotate(-90deg) translate(-7px,0); }
#navToggle.is-active .i-burger::after{ opacity:0; transform: translateY(7px); }

/* ===== Animación de apertura menú (móvil) ===== */
@media (max-width: 767.98px){
  .nav-main{ transform-origin: top center; }
  .nav-main.is-open{ animation: navDrop .35s ease forwards; }
  @keyframes navDrop{
    from{ opacity:0; transform: translateY(-12px) scaleY(.96); }
    to  { opacity:1; transform: translateY(0) scaleY(1); }
  }
}

/* === Search (no empuja el menú) === */
.search-wrapper{ width: 32px; }                     /* ancho fijo: mantiene el layout */
.site-search{ position: relative; height: 36px; }
.search-toggle{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  background:transparent; border:0; cursor:pointer; font-size:18px; color:#334155;
}

/* input expandible, absoluto y alineado a la derecha */
.search-input{
  position:absolute; right:36px; top:50%;
  transform:translateY(-50%) scaleX(.2);
  transform-origin:right center;
  opacity:0; pointer-events:none;
  width:260px; padding:8px 36px 8px 12px;
  border:1px solid #ccd1d8; border-radius:9999px; background:#fff; color:#0f172a;
  transition:transform .25s ease, opacity .25s ease, box-shadow .2s ease;
  z-index:60;
}
.site-search.is-open .search-input{
  transform:translateY(-50%) scaleX(1);
  opacity:1; pointer-events:auto;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

@media (max-width:767.98px){
  .search-input{ width:190px; }
}

/*---------------------WOCOMMERCE-------------------------------*/

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    float: left;
    margin: 0 3.8% 2.992em 0;
    padding: 0;
    position: relative;
    width: 100%;
    margin-left: 0;
}

h2.woocommerce-loop-product__title {
    font-size: 18px !important;
    font-weight: 500;
}

.woocommerce span.onsale {
    background: #f70c15;
    min-height: auto;
    min-width: auto;
    padding: 0px 10px;
    border-radius: 50px;
    line-height: 30px;
    box-shadow: 3px 3px 5px #00000069;
}

form.woocommerce-ordering {
    border: 1px solid #0d438f;
    display: block;
    position: relative;
    left: 1rem;
    border-radius: 50px;
    padding: 1px;
}

.woocommerce .products ul::after, .woocommerce .products ul::before, .woocommerce ul.products::after, .woocommerce ul.products::before {
    content: " ";
    display: none;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price {
    color: #0d438f;
    font-weight: 600;
}

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart,
a.button.product_type_variable.add_to_cart_button {
    background: #0d438f;
    color: white;
}

h1.product_title.entry-title {
    font-size: 30px;
    color: #4a5565;
}

.wp-singular.product-template-default.single.single-product {
    margin-top: 5rem;
}

button.single_add_to_cart_button.button.alt {
    background: #0D438F;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    color: #0d438f;
    font-size: 25px;
    font-weight: 600;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock {
  color: #9b9b9b;
}

.woocommerce .quantity .qty {
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    padding: 5px;
}