/* ============================================================
   JUDITH ARMAS NAILS — MODERN.CSS
   Sistema de diseño global. Cabecera, navegación, hero,
   secciones de inicio, footer, animaciones y responsive.
   Estética: beauty premium, nude/blush + ciruela + oro.
   ============================================================ */

/* ---------- BASE / TIPOGRAFÍA ---------- */
html { scroll-behavior: smooth; }

body.botiga,
body {
  font-family: var(--cn-font-body);
  color: var(--cn-ink);
  background: var(--cn-cream);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5,
.entry-title, .page-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--cn-font-display);
  color: var(--cn-plum-dark);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.01em;
}

h1, .page-title { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }

a { color: var(--cn-plum); text-decoration: none; transition: color .25s var(--cn-ease); }
a:hover { color: var(--cn-rose-deep); }

::selection { background: var(--cn-rose); color: #fff; }

.cn-eyebrow {
  font-family: var(--cn-font-body);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--cn-gold);
  display: inline-block;
  margin-bottom: .9rem;
}

/* contenedor coherente */
.cn-wrap { max-width: var(--cn-maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* ---------- BARRA SUPERIOR / ANUNCIO ---------- */
.cn-topbar {
  background: linear-gradient(90deg, var(--cn-plum-dark), var(--cn-plum) 55%, var(--cn-rose-deep));
  color: #fff;
  text-align: center;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 14px;
  font-weight: 500;
}
.cn-topbar strong { color: var(--cn-gold-soft); font-weight: 600; }
.cn-topbar span { margin: 0 14px; opacity: .92; }
@media (max-width: 700px){ .cn-topbar span:nth-child(n+2){ display:none; } }

/* ---------- CABECERA ---------- */
.site-header,
.botiga-header {
  background: rgba(255,253,251,.86) !important;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--cn-line-soft);
  box-shadow: 0 6px 24px -20px rgba(69,37,58,.5);
}
.site-header.botiga-sticky-active,
.botiga-sticky-active .site-header { box-shadow: 0 10px 30px -22px rgba(69,37,58,.55); }

.site-branding .site-title,
.site-title a,
.site-branding a {
  font-family: var(--cn-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--cn-plum-dark) !important;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem) !important;
}

/* Navegación principal */
.main-navigation a,
.botiga-main-nav a,
.primary-navigation a,
nav.main-navigation ul li a {
  font-family: var(--cn-font-body) !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem !important;
  font-weight: 500;
  color: var(--cn-ink) !important;
  padding: 14px 16px !important;
  position: relative;
}
.main-navigation a::after,
.botiga-main-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 8px;
  height: 1.5px;
  background: var(--cn-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--cn-ease);
}
.main-navigation li:hover > a::after,
.main-navigation .current-menu-item > a::after,
.botiga-main-nav > ul > li:hover > a::after { transform: scaleX(1); }
.main-navigation li:hover > a,
.main-navigation .current-menu-item > a { color: var(--cn-plum) !important; }

/* Submenús desplegables (Tienda → Accesorios → Decoraciones / Tips y Moldes) */
.main-navigation ul ul,
.botiga-main-nav ul ul,
.sub-menu {
  background: var(--cn-ivory) !important;
  border: 1px solid var(--cn-line) !important;
  border-radius: var(--cn-radius-sm) !important;
  box-shadow: var(--cn-shadow) !important;
  padding: 8px !important;
  min-width: 230px !important;
  overflow: hidden;
}
.sub-menu li a,
.main-navigation ul ul a {
  text-transform: none !important;
  letter-spacing: .02em !important;
  font-size: .9rem !important;
  border-radius: 10px;
  padding: 10px 14px !important;
  transition: background .2s var(--cn-ease), color .2s var(--cn-ease);
}
.sub-menu li a:hover,
.main-navigation ul ul a:hover {
  background: var(--cn-blush-2) !important;
  color: var(--cn-plum-dark) !important;
}
.sub-menu li a::after { display: none !important; }

/* Iconos cuenta / búsqueda / carrito */
.header-account a, .botiga-header-cart a, .botiga-search-icon,
.site-header .botiga-cart-link, .header-cart-link {
  color: var(--cn-plum-dark) !important;
}
.botiga-cart-count, .cart-count, .count {
  background: var(--cn-rose-deep) !important;
  color: #fff !important;
}

/* ---------- BOTONES GLOBALES ---------- */
.cn-btn,
.botiga-btn,
button.button,
.button,
input[type="submit"],
.wp-block-button__link {
  font-family: var(--cn-font-body) !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: var(--cn-radius-pill) !important;
  padding: 14px 30px !important;
  cursor: pointer;
  transition: transform .25s var(--cn-ease), box-shadow .25s var(--cn-ease), background .25s var(--cn-ease) !important;
}
.cn-btn-primary,
.button.alt,
.single_add_to_cart_button,
.checkout-button,
input[type="submit"] {
  background: linear-gradient(120deg, var(--cn-plum), var(--cn-plum-dark)) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -16px rgba(69,37,58,.7) !important;
}
.cn-btn-primary:hover,
.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -16px rgba(69,37,58,.75) !important;
}
.cn-btn-ghost {
  background: transparent !important;
  color: var(--cn-plum-dark) !important;
  border: 1.5px solid var(--cn-plum) !important;
}
.cn-btn-ghost:hover { background: var(--cn-plum) !important; color: #fff !important; }

/* ---------- HERO (inicio) ---------- */
.cn-hero {
  position: relative;
  margin: 0 0 10px;
  background:
    radial-gradient(120% 130% at 85% -10%, var(--cn-blush) 0%, transparent 55%),
    radial-gradient(90% 120% at 0% 120%, var(--cn-cream-2) 0%, transparent 60%),
    var(--cn-cream);
  overflow: hidden;
}
.cn-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23CF7E92' fill-opacity='0.10'/%3E%3C/svg%3E");
  pointer-events: none;
}
.cn-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 40px);
  max-width: var(--cn-maxw);
  margin: 0 auto;
  position: relative;
}
.cn-hero__title {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.04;
  margin: 0 0 1.1rem;
  color: var(--cn-plum-dark);
}
.cn-hero__title em { font-style: italic; color: var(--cn-rose-deep); }
.cn-hero__text {
  font-size: 1.08rem;
  color: var(--cn-muted);
  max-width: 46ch;
  margin: 0 0 1.8rem;
}
.cn-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.cn-hero__media {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--cn-shadow);
  aspect-ratio: 4 / 4.4;
  background: var(--cn-blush);
}
.cn-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-hero__badge {
  position: absolute; bottom: 18px; left: 18px;
  background: rgba(255,253,251,.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-pill);
  padding: 10px 20px;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cn-plum-dark);
  box-shadow: var(--cn-shadow-soft);
}
.cn-hero__badge b { color: var(--cn-gold); }
@media (max-width: 880px){
  .cn-hero__inner { grid-template-columns: 1fr; text-align: center; }
  .cn-hero__text { margin-left: auto; margin-right: auto; }
  .cn-hero__cta { justify-content: center; }
  .cn-hero__media { max-width: 460px; margin: 0 auto; }
}

/* ---------- BARRA DE CONFIANZA ---------- */
.cn-trust {
  background: var(--cn-plum-dark);
  color: var(--cn-cream);
}
.cn-trust__inner {
  max-width: var(--cn-maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; padding: 22px clamp(16px, 4vw, 40px);
}
.cn-trust__item { display: flex; align-items: center; gap: 12px; justify-content: center; }
.cn-trust__item svg { width: 26px; height: 26px; flex: none; color: var(--cn-gold-soft); }
.cn-trust__item b { display: block; font-size: .92rem; color: #fff; font-weight: 600; }
.cn-trust__item span { font-size: .76rem; color: rgba(255,255,255,.65); letter-spacing: .04em; }
@media (max-width: 820px){ .cn-trust__inner { grid-template-columns: repeat(2,1fr); gap: 18px; } }

/* ---------- TÍTULO DE SECCIÓN ---------- */
.cn-sectionhead { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 4vw, 48px); }
.cn-sectionhead h2 { margin: 0 0 .6rem; }
.cn-sectionhead p { color: var(--cn-muted); margin: 0; }
.cn-section { padding: clamp(48px, 7vw, 92px) 0; }
.cn-section--cream { background: var(--cn-ivory); }

/* ---------- HOME: CATEGORÍAS ---------- */
.cn-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: var(--cn-maxw); margin: 0 auto; padding: 0 clamp(16px,4vw,40px); }
.cn-cat {
  position: relative; border-radius: var(--cn-radius);
  overflow: hidden; min-height: 230px;
  display: flex; align-items: flex-end;
  background: linear-gradient(160deg, var(--cn-blush), var(--cn-cream-2));
  border: 1px solid var(--cn-line);
  transition: transform .35s var(--cn-ease), box-shadow .35s var(--cn-ease);
}
.cn-cat:hover { transform: translateY(-6px); box-shadow: var(--cn-shadow); }
.cn-cat::before { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(69,37,58,.55), transparent 60%); }
.cn-cat__body { position: relative; padding: 22px; color: #fff; }
.cn-cat__body h3 { color: #fff; margin: 0 0 4px; }
.cn-cat__body span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
@media (max-width: 900px){ .cn-cats { grid-template-columns: repeat(2,1fr); } }

/* ---------- HOME: ACERCA TEASER ---------- */
.cn-about { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; max-width: var(--cn-maxw); margin: 0 auto; padding: 0 clamp(16px,4vw,40px); }
.cn-about__media { border-radius: var(--cn-radius); overflow: hidden; box-shadow: var(--cn-shadow); aspect-ratio: 1/1.05; }
.cn-about__media img { width: 100%; height: 100%; object-fit: cover; }
.cn-about__body h2 { margin: 0 0 1rem; }
.cn-about__body p { color: var(--cn-muted); margin: 0 0 1.1rem; }
.cn-about__body .cn-sign { font-family: var(--cn-font-display); font-style: italic; font-size: 1.5rem; color: var(--cn-rose-deep); }
@media (max-width: 820px){ .cn-about { grid-template-columns: 1fr; } .cn-about__media{ max-width:480px; margin:0 auto;} }

/* ---------- HOME: CTA FINAL ---------- */
.cn-cta {
  text-align: center;
  background:
    radial-gradient(80% 140% at 50% -20%, var(--cn-rose) 0%, transparent 55%),
    linear-gradient(120deg, var(--cn-plum), var(--cn-plum-dark));
  color: #fff;
}
.cn-cta__inner { max-width: 760px; margin: 0 auto; padding: clamp(54px,8vw,96px) clamp(16px,4vw,40px); }
.cn-cta h2 { color: #fff; margin: 0 0 1rem; }
.cn-cta p { color: rgba(255,255,255,.82); margin: 0 0 1.8rem; font-size: 1.05rem; }

/* ---------- PRE-FOOTER / FOOTER ---------- */
.cn-prefooter { background: var(--cn-cream-2); border-top: 1px solid var(--cn-line); }
.cn-prefooter__inner {
  max-width: var(--cn-maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
  padding: clamp(40px,6vw,72px) clamp(16px,4vw,40px) 36px;
}
.cn-fcol h4 { font-family: var(--cn-font-body); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--cn-plum); margin: 0 0 1rem; }
.cn-fcol ul { list-style: none; margin: 0; padding: 0; }
.cn-fcol li { margin: 0 0 .55rem; }
.cn-fcol a { color: var(--cn-muted); font-size: .92rem; }
.cn-fcol a:hover { color: var(--cn-plum-dark); }
.cn-fbrand .cn-logo { font-family: var(--cn-font-display); font-size: 1.5rem; font-weight: 600; color: var(--cn-plum-dark); display: block; margin-bottom: .6rem; }
.cn-fbrand p { color: var(--cn-muted); font-size: .92rem; max-width: 34ch; }
.cn-pay { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.cn-pay span { background: #fff; border: 1px solid var(--cn-line); border-radius: 8px; padding: 6px 12px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; color: var(--cn-plum-dark); }
.cn-social { display: flex; gap: 10px; margin-top: 6px; }
.cn-social a { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--cn-line); display: grid; place-items: center; color: var(--cn-plum); transition: all .25s var(--cn-ease); }
.cn-social a:hover { background: var(--cn-plum); color: #fff; transform: translateY(-3px); }
.cn-social svg { width: 18px; height: 18px; }
@media (max-width: 860px){ .cn-prefooter__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .cn-prefooter__inner { grid-template-columns: 1fr; } }

.site-footer, .botiga-footer {
  background: var(--cn-plum-dark) !important;
  color: rgba(255,255,255,.8) !important;
  text-align: center;
  padding: 22px 16px !important;
  font-size: .85rem;
}
.site-footer a, .botiga-footer a { color: var(--cn-gold-soft) !important; }

/* ---------- ANIMACIONES ---------- */
@keyframes cnFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.cn-reveal { opacity: 0; }
.cn-reveal.is-in { animation: cnFadeUp .8s var(--cn-ease) forwards; }
.cn-hero__title { animation: cnFadeUp .9s var(--cn-ease) both; }
.cn-hero__text  { animation: cnFadeUp .9s var(--cn-ease) .12s both; }
.cn-hero__cta   { animation: cnFadeUp .9s var(--cn-ease) .24s both; }
.cn-hero__media { animation: cnFadeUp 1s var(--cn-ease) .15s both; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- UTILIDADES ---------- */
.cn-skip-link:focus { background: var(--cn-plum); color:#fff; }
img { max-width: 100%; height: auto; }

/* ===== AJUSTES POST-LANZAMIENTO (ancho completo + cabecera) ===== */
/* 1) Contenido a ancho completo de pantalla */
.botiga-container,.container,.site-content .container,main .container,
.woocommerce-page .container{max-width:100%!important;
  padding-left:clamp(20px,3.5vw,60px)!important;padding-right:clamp(20px,3.5vw,60px)!important;}
:root{--cn-maxw:1640px;}
@media(min-width:1700px){.woocommerce ul.products{grid-template-columns:repeat(5,1fr)!important;}}

/* 2) Quitar el nombre del centro de la cabecera */
.site-header .site-branding,.site-header .site-title,
.header-main .site-branding,.botiga-logo-text{display:none!important;}

/* 3) Menú principal en una sola línea */
.main-navigation ul,.primary-navigation ul,.botiga-main-nav ul{
  flex-wrap:nowrap!important;white-space:nowrap!important;}
.main-navigation > div > ul > li > a,.main-navigation a{padding:16px 13px!important;font-size:.76rem!important;}
.main-navigation ul ul a{white-space:normal!important;}

/* ===== CORRECCIÓN: secciones de inicio siempre a fila completa ===== */
.cn-hero,.cn-trust,.cn-section,.cn-cta,.cn-prefooter{
  width:100%!important;max-width:100%!important;flex:0 0 100%!important;
  float:none!important;clear:both!important;}

/* ===== Ocultar el título "Tienda" (solo en la página de tienda) ===== */
body.woocommerce-shop .woocommerce-products-header__title,
body.home .woocommerce-products-header__title,
body.post-type-archive-product .woocommerce-products-header__title{display:none!important;}

/* ===== Ocultar el contador "Showing X of Y results" ===== */
.woocommerce-result-count,
.botiga-sorting-left{display:none!important;}

/* ===== Ocultar TODA la barra de ordenación (desplegable + contador) ===== */
.woocommerce-sorting-wrapper,
.woocommerce-ordering,
select.orderby{display:none!important;}

/* ===== Banner hero (imagen completa) tras la cabecera ===== */
.cn-banner{width:100%;line-height:0;background:var(--cn-cream);margin-bottom:6px;}
.cn-banner img{display:block;width:100%;height:auto;}

/* ===== Ajuste: banner con altura tipo franja (no a pantalla completa) ===== */
.cn-banner img{
  width:100%;
  height:clamp(160px, 30vw, 440px);
  object-fit:cover;
  object-position:center;
}

/* ===== Quitar el título de marca del header (ya está en el banner) ===== */
.site-title,
.site-branding .site-title,
.bhfb-header .site-title,
.bhfb-header .site-branding,
.bhfb-module-logo .site-title,
.bhfb-logo,
.bhfb-html-logo{display:none!important;}

/* ===== Quitar el espacio en blanco sobre el banner (portada) ===== */
.home .content-wrapper,.woocommerce-shop .content-wrapper,
.home .site-content,.woocommerce-shop .site-content,
.home #primary,.woocommerce-shop #primary,
.home .site-main,.woocommerce-shop .site-main,
.home .main-row,.woocommerce-shop .main-row{padding-top:0!important;margin-top:0!important;}
.cn-banner{margin-top:0!important;}

/* ===== Banner: mostrar imagen COMPLETA sin recortar la cara ===== */
.cn-banner img{
  width:100%;
  height:clamp(220px, 34vw, 480px);
  object-fit:contain !important;
  object-position:center;
  background:var(--cn-cream);
}

/* ===== Banner apaisado: a todo el ancho, proporción natural ===== */
.cn-banner img{width:100% !important;height:auto !important;object-fit:fill !important;background:transparent !important;}

/* ===== MEGA MENÚ: desplegable en varias columnas (ítem con clase "mega") ===== */
li.mega > .sub-menu{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(180px, 1fr)) !important;
  gap:2px 16px !important;
  width:max-content !important;
  max-width:92vw !important;
  padding:16px !important;
}
li.mega > .sub-menu > li{ width:auto !important; float:none !important; }
li.mega > .sub-menu > li > a{ white-space:nowrap; }