/* ==========================================================================
   AVVELIA — identidad de marca sobre Elessi (Brand Book v1.0, README.md)
   Quiet luxury: menos ruido, más elegancia.

   Paleta:  Marfil #F6F3EE · Arena #E8DDCF · Negro carbón #1E1E1E · Chocolate #5A4638 · Dorado cepillado #B89563
   Nunca:   #000000 ni #FFFFFF · degradados · sombras · efectos 3D · "Oferta"
   Fuentes: Manrope (sitio y títulos) y DM Sans (texto): solo dos familias, alojadas aquí.
   ========================================================================== */

/* ---- Fuentes locales (OFL 1.1). Subconjunto latino: cubre el español completo. ---------------- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-wght.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
/* La demo de Elessi pide "Jost" en cientos de reglas (tema, Elementor, widgets). Se sirve Manrope con ese nombre:
   ninguna regla ajena puede traer una tercera tipografía. */
@font-face {
  font-family: "Jost";
  src: url("../fonts/manrope-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Variables de marca ----------------------------------------------------------------------- */
:root {
  --av-marfil: #F6F3EE;
  --av-arena: #E8DDCF;
  --av-carbon: #1E1E1E;
  --av-chocolate: #5A4638;
  --av-dorado: #B89563;
  --av-titulo: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --av-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- Base ----------------------------------------------------------------------------------------- */
html,
body {
  background-color: var(--av-marfil);
  color: var(--av-carbon);
  font-family: var(--av-texto);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.heading-title,
.nasa-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--av-titulo) !important;
  color: var(--av-carbon);
  font-weight: 500;
  letter-spacing: 0.01em;
}

a {
  color: var(--av-carbon);
  text-decoration: none;
}
/* El Dorado cepillado da solo ~2,5:1 sobre Marfil: sirve de acento (botón, línea), nunca de texto. */
a:hover,
a:focus {
  color: var(--av-chocolate);
}

/* ---- Botones: rectangulares, Carbón con texto Marfil; el dorado solo al pasar el cursor --------- */
.button,
button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.single_add_to_cart_button {
  background-color: var(--av-carbon);
  border: 1px solid var(--av-carbon);
  border-radius: 0;
  color: var(--av-marfil);
  font-family: var(--av-titulo);
  letter-spacing: 0.04em;
  text-transform: none;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover {
  background-color: var(--av-dorado);
  border-color: var(--av-dorado);
  color: var(--av-carbon);
}

/* ---- Formularios ------------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
select,
textarea {
  background-color: var(--av-marfil);
  border: 1px solid var(--av-arena);
  border-radius: 0;
  color: var(--av-carbon);
  font-family: var(--av-texto);
}

/* ---- Ni sombras ni efectos 3D ------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-shadow: none !important;
  text-shadow: none !important;
}
/* El foco visible se resuelve con un contorno (accesibilidad), no con un halo */
:focus-visible {
  outline: 2px solid var(--av-carbon);   /* el Dorado no llega al contraste 3:1 que pide la accesibilidad */
  outline-offset: 2px;
}

/* ---- Sin etiquetas de oferta, "hot", destacado ni cuenta regresiva (Brand Book: nada de "Oferta") --- */
.nasa-badges-wrap,
.badge.hot-label,
.badge.sale-label,
.badge.deal-label,
.badge.featured-label,
.badge.bulk-label,
.nasa-sc-pdeal-countdown {
  display: none !important;
}

/* Precio anterior: discreto, en Chocolate */
del,
.price del {
  color: var(--av-chocolate);
}
ins {
  background: transparent;
  color: var(--av-carbon);
  text-decoration: none;
}

/* ---- "Comprar ahora": botón secundario con contorno Carbón; "Añadir al carrito" es el protagonista ------ */
/* El tema fija un verde con "body .nasa-buy-now" (#6ca300) y otras reglas más específicas lo rellenan de negro: aquí se
   usa !important de forma deliberada y acotada a este único botón. */
body .nasa-buy-now {
  background-color: transparent !important;
  border: 1px solid var(--av-carbon) !important;
  color: var(--av-carbon) !important;
  font-family: var(--av-titulo);
}
body .nasa-buy-now:hover {
  background-color: var(--av-carbon) !important;
  border-color: var(--av-carbon) !important;
  color: var(--av-marfil) !important;
}

/* ---- Esquinas rectas y sin mayúsculas forzadas: el tema las redondea con reglas más específicas ------------ */
.button,
button,
input[type="submit"],
input[type="button"],
.single_add_to_cart_button,
.nasa-buy-now,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
select,
textarea {
  border-radius: 0 !important;
}
.button,
button,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
  text-transform: none !important;
}

/* ---- Sin cursivas: Manrope y DM Sans solo se cargan en estilo normal y el navegador las inclinaría artificialmente.
        El énfasis se da con el color (Chocolate), no con la inclinación. ------------------------------------- */
em,
cite,
blockquote,
dfn {
  font-style: normal;
}

/* ---- Contenido de páginas sencillas (Nosotros, Contacto): columna de lectura con aire ----------------------- */
.av-contenido {
  margin: 72px auto 96px;
  max-width: 760px;
  padding: 0 24px;
  font-size: 18px;
  line-height: 1.8;
}
.av-contenido p {
  margin: 0 0 1.4em;
}
.av-contenido em {
  color: var(--av-chocolate);
}

/* ---- Sin precios tachados: el Brand Book no compite por precio ni ofrece "ofertas" (§4, §22) ----------- */
del,
.price del {
  display: none !important;
}

/* ---- Estrellas de valoración en Dorado cepillado (el tema usa un naranja) ------------------------------- */
.star-rating span::before,
.star-rating::before,
.nasa-rating .star-rating span::before {
  color: var(--av-dorado);
}

/* ---- Pie de AVVELIA (plantilla de Header Footer Elementor): la lista de enlaces va sin viñetas ----------- */
.elementor-element-avfl2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Imagen de producto: fondo Arena para fotos con transparencia ------------------------------------------
   (los cuadros blancos de la demo son imágenes de relleno: se sustituyen por las fotos reales) */
.product-img-wrap,
.main-img {
  background-color: var(--av-arena);
}

/* ---- Hero de la portada (estructura y textos: infra/scripts/brand-hero.sh) -------------------------------------
   Escritorio: texto a la izquierda y foto a la derecha (50/50), sobre Arena y alineados con la retícula del sitio
   (1180 px de contenido + 24 px a cada lado). Por debajo de 900 px: primero el texto y el botón, debajo la foto.
   En la portada el encabezado es transparente y va ENCIMA de esta franja: el margen superior lo despeja.
   Sin sombras ni degradados. */
.av-hero {
  background-color: var(--av-arena);
}
.elementor-section.av-hero > .elementor-container {
  padding: 132px 24px 56px;
  align-items: center;
}

/* Columna de texto */
.elementor-section.av-hero .av-hero__texto > .elementor-element-populated {
  align-content: center;
  padding: 24px 56px 24px 0;
}
.elementor-section.av-hero .av-hero__texto--solo > .elementor-element-populated {
  padding: 24px 0 32px;
  text-align: center;
  justify-content: center;
}
.av-hero h1.elementor-heading-title {
  font-size: clamp(40px, 4.4vw, 62px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.av-hero .av-hero__sub {
  max-width: 28em;
  margin: 22px 0 34px;
  font-size: 19px;
  line-height: 1.65;
}
.av-hero .av-hero__sub p,
.av-hero .av-hero__aviso p {
  margin: 0;
}
.av-hero .av-hero__aviso {
  margin-top: 22px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Botón principal: rectangular, Carbón con texto Marfil; el Dorado solo al pasar el cursor; flecha discreta */
.av-hero .elementor-button {
  display: inline-flex;
  align-items: center;
  font-family: var(--av-titulo);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  border: 1px solid var(--av-carbon);
}
.av-hero .elementor-button:hover {
  border-color: var(--av-dorado);
}
.av-hero .elementor-button .elementor-button-text::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 10px;
  margin-left: 14px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%231E1E1E' stroke-width='1.4'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%231E1E1E' stroke-width='1.4'/></svg>") center / contain no-repeat;
  transition: transform 0.25s ease;
}
.av-hero .elementor-button:hover .elementor-button-text::after {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .av-hero .elementor-button .elementor-button-text::after {
    transition: none;
  }
  .av-hero .elementor-button:hover .elementor-button-text::after {
    transform: none;
  }
}

/* Foto: recta, sin marco ni sombra; el recorte se sube un poco para no cortar las asas del bolso */
.elementor-section.av-hero .av-hero__visual > .elementor-element-populated {
  padding: 0;
}
.av-hero .av-hero__foto img {
  display: block;
  width: 100%;
  height: clamp(380px, 36vw, 500px);
  object-fit: cover;
  object-position: center 38%;
  border-radius: 0;
}

/* Tableta: el encabezado es más bajo */
@media (max-width: 1024px) {
  .elementor-section.av-hero > .elementor-container {
    padding-top: 104px;
  }
}
/* Apilado: texto arriba, foto debajo */
@media (max-width: 900px) {
  .elementor-section.av-hero > .elementor-container {
    flex-wrap: wrap;
  }
  .elementor-section.av-hero .elementor-column.av-hero__texto,
  .elementor-section.av-hero .elementor-column.av-hero__visual {
    width: 100%;
  }
  .elementor-section.av-hero .av-hero__texto > .elementor-element-populated {
    padding: 16px 0 36px;
  }
  .av-hero .av-hero__foto img {
    height: clamp(320px, 56vw, 460px);
    object-position: center 30%;
  }
}
/* Móvil */
@media (max-width: 767px) {
  .elementor-section.av-hero > .elementor-container {
    padding: 88px 20px 40px;
  }
  .elementor-section.av-hero .av-hero__texto > .elementor-element-populated {
    padding: 8px 0 32px;
  }
  .av-hero .av-hero__sub {
    margin: 16px 0 28px;
    font-size: 17px;
  }
  .av-hero .elementor-button {
    width: 100%;
    justify-content: center;
  }
  .av-hero .av-hero__aviso {
    margin-top: 18px;
  }
  .av-hero .av-hero__foto img {
    height: 400px;
  }
}

/* ---- Botones flotantes (subir, "dónde estás", vistos recientemente): el tema los pinta #fff con texto #333 ------- */
body #nasa-back-to-top,
body #nasa-where-you-are,
body #nasa-init-viewed,
body #nasa-init-viewed.style-2 {
  background-color: var(--av-marfil);
  border: 1px solid var(--av-arena);
  color: var(--av-carbon);
}
body #nasa-back-to-top:hover,
body #nasa-where-you-are:hover,
body #nasa-init-viewed:hover,
body #nasa-init-viewed.style-2:hover {
  background-color: var(--av-arena);
  color: var(--av-carbon);
}

/* ---- Logo ------------------------------------------------------------------------------------------ */
.header_logo,
.logo img {
  max-width: 100%;
  height: auto;
}