/*
Theme Name: Que Lindo Todo (Astra child)
Description: Restyling de Que Lindo Todo — minimalista, oscuro, con movimiento. Tema hijo de Astra.
Author: Hermes
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* ============ 1. Paleta y tipografías ============ */
:root {
  --qlt-fondo: #0a0a0c;
  --qlt-fondo-2: #101014;
  --qlt-superficie: #16161b;
  --qlt-borde: rgba(255, 255, 255, 0.09);
  --qlt-texto: #f4efec;
  --qlt-texto-suave: #a9a2a0;
  --qlt-acento: #e0508a;
  --qlt-acento-2: #d9b26a;
  --qlt-sombra: 0 24px 60px rgba(0, 0, 0, 0.55);
  --qlt-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --qlt-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --qlt-radio: 14px;
}

/* ============ 2. Base ============ */
html { scroll-behavior: smooth; }
body, .ast-separate-container, .ast-plain-container { background: var(--qlt-fondo) !important; }
body {
  color: var(--qlt-texto) !important;
  font-family: var(--qlt-sans) !important;
  font-weight: 300;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .entry-title, .woocommerce-loop-product__title {
  font-family: var(--qlt-serif) !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
  color: var(--qlt-texto) !important;
}
h1 { font-size: clamp(2.2rem, 6vw, 4.2rem) !important; line-height: 1.02 !important; }
h2 { font-size: clamp(1.7rem, 4vw, 2.8rem) !important; }
a { color: var(--qlt-acento); transition: color .25s ease, opacity .25s ease; }
a:hover { color: var(--qlt-acento-2); }
::selection { background: var(--qlt-acento); color: #fff; }
hr, .ast-separate-container .ast-article-post { border-color: var(--qlt-borde) !important; }

/* ============ 3. Header y menú ============ */
.site-header, .ast-primary-header-bar, .ast-above-header-bar, .ast-below-header-bar,
.main-header-menu, .ast-mobile-header-wrap { background: rgba(10, 10, 12, .92) !important; }
.site-header { border-bottom: 1px solid var(--qlt-borde); backdrop-filter: blur(14px); }
.main-header-menu > .menu-item > .menu-link, .ast-builder-menu .menu-link {
  font-family: var(--qlt-sans) !important; font-weight: 400 !important;
  text-transform: uppercase; letter-spacing: .16em; font-size: .74rem !important;
  color: var(--qlt-texto) !important;
}
.main-header-menu > .menu-item > .menu-link::after {
  content: ''; display: block; height: 1px; width: 0; background: var(--qlt-acento);
  transition: width .35s ease; margin-top: 4px;
}
.main-header-menu > .menu-item > .menu-link:hover::after { width: 100%; }
.ast-header-break-point .main-header-menu { background: var(--qlt-fondo-2) !important; }
.site-title a, .site-title { font-family: var(--qlt-serif) !important; font-size: 1.5rem !important; letter-spacing: .04em; }

/* ============ 4. Botones ============ */
.button, button, input[type="submit"], .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .ast-button, .ast-custom-button, .elementor-button {
  background: var(--qlt-acento) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--qlt-sans) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem !important;
  padding: 15px 34px !important;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, background .3s ease;
  box-shadow: 0 10px 30px rgba(224, 80, 138, .22);
}
.button:hover, button:hover, input[type="submit"]:hover, .woocommerce a.button:hover,
.elementor-button:hover {
  background: #f0609a !important; transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(224, 80, 138, .34);
}
/* el brillo, ahora sin pseudo-elemento (evita que se escape del botón) */
.button, .elementor-button { background-image: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 70%) !important; background-size: 250% 100% !important; background-position: 120% 0 !important; background-repeat: no-repeat !important; transition: background-position .8s ease, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease !important; }
.button:hover, .elementor-button:hover { background-position: -40% 0 !important; }
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--qlt-acento) !important; }

/* ============ 5. Productos ============ */
ul.products li.product, .woocommerce ul.products li.product {
  background: var(--qlt-superficie) !important;
  border: 1px solid var(--qlt-borde) !important;
  border-radius: var(--qlt-radio) !important;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease, border-color .45s ease;
  padding-bottom: 18px !important;
}
ul.products li.product:hover {
  transform: translateY(-10px);
  box-shadow: var(--qlt-sombra);
  border-color: rgba(224, 80, 138, .45) !important;
}
ul.products li.product img {
  transition: transform .8s cubic-bezier(.2,.7,.3,1), filter .5s ease;
  filter: saturate(1.02) contrast(1.02);
}
ul.products li.product:hover img { transform: scale(1.07); }
.woocommerce-loop-product__title { font-size: 1.12rem !important; padding: 14px 16px 4px !important; }
ul.products li.product .price, .woocommerce-Price-amount {
  color: var(--qlt-acento-2) !important; font-family: var(--qlt-sans) !important;
  font-weight: 400 !important; letter-spacing: .04em;
}
ul.products li.product .button { margin: 10px 16px 0 !important; }
.woocommerce span.onsale, .ast-on-card-button {
  background: var(--qlt-acento) !important; color: #fff !important; border-radius: 999px;
  letter-spacing: .12em; text-transform: uppercase; font-size: .66rem; padding: 6px 12px;
}
.woocommerce-product-gallery img, .woocommerce div.product div.images img { border-radius: var(--qlt-radio); }

/* ============ 6. Formularios y checkout ============ */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], select, textarea,
.select2-container--default .select2-selection--single {
  background: var(--qlt-fondo-2) !important; color: var(--qlt-texto) !important;
  border: 1px solid var(--qlt-borde) !important; border-radius: 10px !important;
  padding: 12px 14px !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--qlt-acento) !important; outline: none; }
label, .woocommerce form .form-row label { color: var(--qlt-texto-suave) !important; letter-spacing: .06em; }
.woocommerce-checkout-review-order, .cart_totals, .woocommerce-checkout #order_review,
.woocommerce table.shop_table { background: var(--qlt-superficie) !important; border: 1px solid var(--qlt-borde) !important; border-radius: var(--qlt-radio); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--qlt-borde) !important; }
.woocommerce-info, .woocommerce-message, .woocommerce-error {
  background: var(--qlt-superficie) !important; color: var(--qlt-texto) !important;
  border-top-color: var(--qlt-acento) !important;
}

/* ============ 7. Home nueva (clases propias) ============ */
.qlt-hero {
  position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; margin: 0;
}
.qlt-hero__fondo {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .42; animation: qlt-zoom 26s ease-in-out infinite alternate;
}
.qlt-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(10,10,12,.15), rgba(10,10,12,.92) 72%);
}
.qlt-hero__caja { position: relative; z-index: 2; padding: 90px 22px; max-width: 900px; }
.qlt-hero__marca { font-family: var(--qlt-serif); font-size: clamp(2.6rem, 9vw, 6rem); line-height: .95; margin: 0 0 18px; }
.qlt-hero__bajada { color: var(--qlt-texto-suave); font-size: clamp(1rem, 2.4vw, 1.22rem); max-width: 620px; margin: 0 auto 34px; line-height: 1.7; }
.qlt-eyebrow { font-size: .7rem; letter-spacing: .34em; text-transform: uppercase; color: var(--qlt-acento); margin-bottom: 18px; }
.qlt-seccion { padding: 84px 22px; max-width: 1180px; margin: 0 auto; }
.qlt-seccion--angosta { max-width: 860px; text-align: center; }
.qlt-titulo-seccion { margin: 0 0 10px; }
.qlt-bajada-seccion { color: var(--qlt-texto-suave); margin-bottom: 44px; }
.qlt-pasarela { position: relative; overflow: hidden; border-top: 1px solid var(--qlt-borde); border-bottom: 1px solid var(--qlt-borde); background: var(--qlt-fondo-2); padding: 16px 0; }
.qlt-pasarela__tira { display: flex; gap: 54px; white-space: nowrap; animation: qlt-marquesina 32s linear infinite; }
.qlt-pasarela__item { font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--qlt-texto-suave); }
.qlt-pasarela__item b { color: var(--qlt-acento-2); font-weight: 400; }
.qlt-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.qlt-tarjeta {
  background: var(--qlt-superficie); border: 1px solid var(--qlt-borde); border-radius: var(--qlt-radio);
  padding: 34px 28px; transition: transform .45s cubic-bezier(.2,.7,.3,1), border-color .45s ease;
}
.qlt-tarjeta:hover { transform: translateY(-8px); border-color: rgba(224,80,138,.4); }
.qlt-tarjeta h3 { margin: 0 0 10px; font-size: 1.3rem; }
.qlt-tarjeta p { color: var(--qlt-texto-suave); margin: 0; line-height: 1.7; }
.qlt-tarjeta__num { font-family: var(--qlt-serif); font-size: 2.4rem; color: var(--qlt-acento); line-height: 1; }
.qlt-botonera { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.qlt-wsp { display: inline-flex; align-items: center; gap: 10px; }
.qlt-fiscal { border: 1px dashed var(--qlt-borde); border-radius: var(--qlt-radio); padding: 26px 28px; color: var(--qlt-texto-suave); font-size: .92rem; line-height: 1.8; }
.qlt-fiscal b { color: var(--qlt-texto); font-weight: 400; }

/* Reveal on scroll */
.qlt-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
.qlt-reveal.visible { opacity: 1; transform: none; }
.qlt-reveal--d1 { transition-delay: .12s; }
.qlt-reveal--d2 { transition-delay: .24s; }
.qlt-reveal--d3 { transition-delay: .36s; }

/* ============ 8. Botón de WhatsApp flotante ============ */
.qlt-wsp-flotante {
  position: fixed; right: 20px; bottom: 22px; z-index: 9999; width: 58px; height: 58px;
  border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(37, 211, 102, .35); transition: transform .3s ease;
}
.qlt-wsp-flotante:hover { transform: scale(1.08); }
.qlt-wsp-flotante svg { width: 30px; height: 30px; fill: #fff; }
.qlt-wsp-flotante::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37,211,102,.6);
  animation: qlt-latido 2.4s ease-out infinite;
}
@media (max-width: 600px) { .qlt-wsp-flotante { width: 52px; height: 52px; right: 14px; bottom: 16px; } }

/* ============ 9. Animaciones ============ */
@keyframes qlt-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes qlt-marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes qlt-latido { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes qlt-aparecer { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.qlt-hero__caja > * { animation: qlt-aparecer 1.1s cubic-bezier(.2,.7,.3,1) both; }
.qlt-hero__caja > *:nth-child(2) { animation-delay: .15s; }
.qlt-hero__caja > *:nth-child(3) { animation-delay: .3s; }
.qlt-hero__caja > *:nth-child(4) { animation-delay: .45s; }

/* ============ 10. Detalles y pie ============ */
.site-below-footer-wrap, .ast-small-footer, .site-footer { background: var(--qlt-fondo-2) !important; border-top: 1px solid var(--qlt-borde); color: var(--qlt-texto-suave) !important; }
.site-footer a { color: var(--qlt-texto-suave) !important; }
.site-footer a:hover { color: var(--qlt-acento) !important; }
.ast-breadcrumbs, .ast-single-post .entry-meta { color: var(--qlt-texto-suave) !important; }
.woocommerce-tabs ul.tabs li a { color: var(--qlt-texto-suave) !important; letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; }
.woocommerce-tabs ul.tabs li.active a { color: var(--qlt-acento) !important; }
img { border-radius: 4px; }
.qlt-separador { height: 1px; background: var(--qlt-borde); margin: 0 auto; max-width: 1180px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .qlt-reveal { opacity: 1; transform: none; }
}

/* ============ 11. Contenedores de Astra (a sangre) ============ */
.ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single,
.ast-separate-container .ast-separate-posts, #content.site-content, #primary, .site-main,
.entry-content, .ast-container, .ast-separate-container .ast-woocommerce-container {
  background: transparent !important;
}
.ast-separate-container #primary, .ast-separate-container .ast-article-single { padding: 0 !important; }
.ast-separate-container .ast-container { padding-left: 0 !important; padding-right: 0 !important; }
body { overflow-x: hidden; }
body.page-id-8020 .entry-header, body.page-id-8020 .ast-breadcrumbs,
body.page-id-8020 .entry-meta, body.page-id-8020 .entry-footer { display: none !important; }
.qlt-hero, .qlt-pasarela { width: 100%; }

/* ============ 12. Barra de aviso de la tienda ============ */
.woocommerce-store-notice, p.demo_store {
  background: var(--qlt-acento) !important; color: #fff !important;
  font-family: var(--qlt-sans) !important; letter-spacing: .08em; font-size: .82rem;
  padding: 12px 18px !important; text-align: center;
}
.woocommerce-store-notice a, p.demo_store a { color: #fff !important; text-decoration: underline; }

/* ============ 13. Encabezado y varias ============ */
.ast-header-break-point .ast-mobile-header-wrap, .main-header-bar { background: rgba(10,10,12,.96) !important; }
.ast-mobile-header-wrap .ast-button-wrap, .menu-toggle { color: var(--qlt-texto) !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; }
.ast-single-post .entry-title, .page .entry-title { letter-spacing: .02em; }
.qlt-hero { min-height: 82vh; }
.qlt-pasarela__tira { animation-duration: 38s; }

/* La barra de aviso no flota sobre el contenido */
.woocommerce-store-notice, p.demo_store { position: relative !important; top: auto !important; }
body.woocommerce-demo-store { padding-top: 0 !important; }

/* El botón de menú del celular no es un botón de compra */
.menu-toggle, .ast-button-wrap .menu-toggle, .ast-mobile-menu-trigger-minimal {
  background: transparent !important; box-shadow: none !important; padding: 8px 6px !important;
  color: var(--qlt-texto) !important; border-radius: 0 !important;
}
.menu-toggle:hover, .ast-button-wrap .menu-toggle:hover { background: rgba(224,80,138,.15) !important; transform: none !important; }
.ast-mobile-header-wrap .ast-button-wrap { box-shadow: none !important; }
.ast-mobile-header-wrap .ast-builder-grid-row-container { background: rgba(10,10,12,.96) !important; }
.ast-mobile-popup-drawer .ast-mobile-popup-inner { background: var(--qlt-fondo-2) !important; }

/* El logo original es oscuro: sobre el fondo negro lo paso a blanco */
.site-logo-img img, .custom-logo, .ast-mobile-header-logo, .ast-site-identity img {
  filter: brightness(0) invert(1) !important;
  opacity: .94;
  transition: opacity .3s ease, filter .3s ease;
}
.site-logo-img img:hover, .custom-logo:hover, .ast-mobile-header-logo:hover { opacity: 1; }
.site-logo-img img { max-height: 62px; width: auto; }
.ast-mobile-header-wrap .custom-logo-link img, .ast-mobile-header-logo { max-height: 44px; width: auto; }