/* ==========================================================================
   Wazo Theme — ajustes propios
   Se carga después de bootstrap.min.css y app.min.css (el CSS del tema
   original de Jumpseller), así que aquí solo van correcciones y lo que
   WooCommerce necesita para integrarse.
   ========================================================================== */

:root {
  --wazo-navy: #2E376A;
  --wazo-green: #00B047;
  --wazo-green-dark: #00793E;
  --wazo-amber: #FFB41E;
  --wazo-text: #1B2A4A;
  --wazo-border: #E1E5E8;
  --wazo-bg-alt: #F2F3F5;
  --wazo-radius: 6px;
}

/* ---------------------------------------------------------------
   Tipografías de marca
   --------------------------------------------------------------- */
body,
.wazo-body,
p, li, span, a, input, textarea, select, button {
  font-family: 'Karla', ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3,
.wazo-title,
.theme-section__title,
.woocommerce-loop-product__title {
  font-family: 'Archivo Black', 'Karla', sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

body { color: var(--wazo-text); font-size: 16px; line-height: 1.55; }
a { color: var(--wazo-green-dark); }
a:hover { color: var(--wazo-amber); }

/* ---------------------------------------------------------------
   Contenedor
   --------------------------------------------------------------- */
.wazo-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
.wazo-header {
  background: var(--wazo-navy);
  color: #fff;
}
.wazo-header a { color: #fff; text-decoration: none; }
.wazo-header a:hover { color: var(--wazo-amber); }

.wazo-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
}
.wazo-header__logo img { max-height: 46px; width: auto; }

.wazo-search {
  flex: 1;
  max-width: 520px;
  position: relative;
}
.wazo-search input[type="search"],
.wazo-search input[type="text"] {
  width: 100%;
  height: 44px;
  border-radius: var(--wazo-radius);
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 0 44px 0 16px;
  font-size: 14px;
}
.wazo-search input::placeholder { color: rgba(255,255,255,.65); }
.wazo-search button {
  position: absolute;
  right: 6px; top: 6px;
  width: 32px; height: 32px;
  border: 0; background: transparent;
  color: #fff; cursor: pointer;
}

.wazo-header__cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wazo-green);
  color: #fff;
  border-radius: var(--wazo-radius);
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
}
.wazo-header__cart:hover { background: var(--wazo-green-dark); color: #fff; }
.wazo-header__cart .count {
  background: #fff; color: var(--wazo-green-dark);
  border-radius: 999px; padding: 1px 8px; font-size: 12px;
}

.wazo-nav { border-top: 1px solid rgba(255,255,255,.12); }
.wazo-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  list-style: none;
  margin: 0; padding: 10px 0;
}
.wazo-nav-list a {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.wazo-nav-list .current-menu-item > a,
.wazo-nav-list li.current-menu-item a { color: var(--wazo-green); }

/* ---------------------------------------------------------------
   Botones
   --------------------------------------------------------------- */
.wazo-btn,
/* El skin verde NO debe aplicarse a los enlaces del header/footer: en el markup
   de Jumpseller .button sobre <a> actúa sólo como reset (nav, carro, menú móvil). */
.wazo-container .wc-block-components-button,
.wazo-container .woocommerce a.button,
.wazo-container .woocommerce button.button,
.wazo-container .single_add_to_cart_button {
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  border-radius: var(--wazo-radius);
  background: var(--wazo-green);
  color: #fff !important;
  border: 0;
  padding: 12px 22px;
  transition: background .15s ease;
}
.wazo-btn:hover,
.wazo-container .woocommerce a.button:hover,
.wazo-container .woocommerce button.button:hover,
.wazo-container .single_add_to_cart_button:hover { background: var(--wazo-green-dark); color: #fff; }

.wazo-btn--outline {
  background: transparent;
  border: 1.5px solid #fff;
  color: #fff !important;
}
.wazo-btn--outline:hover { background: rgba(255,255,255,.12); }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.wazo-footer {
  background: var(--wazo-navy);
  color: rgba(255,255,255,.85);
  padding: 48px 0 24px;
  margin-top: 64px;
}
.wazo-footer h4 {
  color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.wazo-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.wazo-footer a:hover { color: var(--wazo-amber); }
.wazo-footer ul { list-style: none; margin: 0; padding: 0; }
.wazo-footer li { margin-bottom: 8px; font-size: 14px; }
.wazo-footer__legal {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 32px; padding-top: 18px;
  font-size: 13px; color: rgba(255,255,255,.6);
}
.wazo-pay-logos img { height: 22px; width: auto; margin-right: 8px; opacity: .9; }

/* ---------------------------------------------------------------
   Avisos de WooCommerce
   --------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--wazo-radius);
  border-top-width: 0;
  border-left: 4px solid var(--wazo-green);
  background: var(--wazo-bg-alt);
  color: var(--wazo-text);
}

/* ---------------------------------------------------------------
   Integración con el loop de WooCommerce
   woocommerce-layout.css fuerza width:22% + float en li.product y rompe
   la grilla del tema. Se anula aquí, con alcance al listado.
   --------------------------------------------------------------- */
ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}
ul.products { list-style: none; }

/* El menú no lleva fondo de botón: el original lo deja transparente. */
/* Solo el nav va sin fondo; el carro conserva el botón verde. */
.header-nav__anchor { background: transparent !important; box-shadow: none !important; }
.header-nav__anchor:hover { background: transparent !important; }

/* Carro: botón verde como en la tienda original */
.header__cart,
.header__link[href*="carrito"],
.header__link[href*="/cart"],
.header__link[href*="checkout"] {
  background: var(--wazo-green) !important;
  color: #fff !important;
  border-radius: var(--wazo-radius) !important;
  padding: 8px 14px !important;
  font-weight: 700;
}
.header__cart:hover,
.header__link[href*="carrito"]:hover { background: var(--wazo-green-dark) !important; color: #fff !important; }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 991px) {
  .wazo-header__top { flex-wrap: wrap; }
  .wazo-search { order: 3; max-width: 100%; flex-basis: 100%; }
}
@media (max-width: 575px) {
  .wazo-nav-list { gap: 4px 16px; }
}

/* ---- Páginas de contenido (TOS, formularios, landings) ---- */
.wazo-page-content { max-width: 860px; color: #1B2A4A; line-height: 1.7; font-size: 16px; }
.wazo-page-content h2,
.wazo-page-content h3 { font-family: "Archivo Black", sans-serif; color: #2E376A; margin: 2rem 0 .75rem; font-size: 1.3rem; line-height: 1.3; }
.wazo-page-content p { margin: 0 0 1rem; }
.wazo-page-content ul,
.wazo-page-content ol { margin: 0 0 1rem 1.3rem; }
.wazo-page-content li { margin-bottom: .4rem; }
.wazo-page-content img { max-width: 100%; height: auto; display: block; margin: 1.5rem auto; border-radius: 10px; }
.wazo-page-content a { color: #00793E; text-decoration: underline; }
.wazo-page-content .btn-verde { display: inline-block; background: #00B047; color: #fff; padding: 12px 26px; border-radius: 8px; font-weight: 700; text-decoration: none; margin: .5rem 0 1rem; }
.wazo-page-content .btn-verde:hover { background: #00793E; color: #fff; }

/* ---- Formularios reconstruidos ---- */
.wazo-form { max-width: 660px; margin: 1.75rem 0; display: grid; gap: 14px; }
.wazo-form .form-campo,
.wazo-form .form-envio { margin: 0; }
.wazo-form input[type="text"],
.wazo-form input[type="email"],
.wazo-form input[type="tel"],
.wazo-form textarea,
.wazo-form select { width: 100%; padding: 13px 16px; border: 1px solid #C9CFDB; border-radius: 8px; font-size: 15px; font-family: inherit; background: #fff; color: #1B2A4A; }
.wazo-form textarea { resize: vertical; }
.wazo-form input:focus,
.wazo-form textarea:focus,
.wazo-form select:focus { outline: 2px solid #00B047; outline-offset: 1px; border-color: #00B047; }
.wazo-form button { background: #00B047; color: #fff; border: 0; padding: 14px 34px; border-radius: 8px; font-weight: 700; font-size: 16px; font-family: inherit; cursor: pointer; }
.wazo-form button:hover { background: #00793E; }
.wazo-form label { display: block; font-size: 15px; }
@media (min-width: 720px) {
  .wazo-form { grid-template-columns: 1fr 1fr; }
  .wazo-form .ancho-completo,
  .wazo-form .form-envio { grid-column: 1 / -1; }
}

/* ---- Logo a tamaño fijo (la ficha de producto lo cargaba a tamaño natural) ---- */
.header .header__brand img,
.header .header__picture img,
.header .theme-store-name img { max-width: 130px; width: auto; height: auto; }
@media (max-width: 767px) {
  .header .header__brand img,
  .header .header__picture img,
  .header .theme-store-name img { max-width: 104px; }
}

/* ---- Menú principal: mismo tamaño en todas las plantillas ---- */
.header-nav ul { flex-wrap: wrap; justify-content: center; }
.header-nav .header__link,
.header-nav ul li > a {
  font-size: 12px !important;
  letter-spacing: .04em;
  padding: 6px 2px !important;
  white-space: nowrap;
}
@media (max-width: 991px) {
  .header-nav .header__link,
  .header-nav ul li > a { font-size: 12.5px !important; }
}

/* Landings importadas: ocupan todo el ancho, no la columna de lectura de 860px */
.wazo-page-content:has(#wo-page),
.wazo-page-content:has(> div[id^="wo-"]) { max-width: none; padding-left: 0; padding-right: 0; }
.wazo-page-content:has(#wo-page) > #wo-page { margin: 0; }

/* Landings a ancho completo: el contenedor del tema no debe enmarcarlas */
#contenido:has(#wo-page) { max-width: 100%; padding: 0 !important; }
#contenido:has(#wo-page) article { margin: 0; }