/* ════════════════════════════════════════════════════════════════════════
   AURA VELAS — layout.css
   Header, navegación, megamenú, menú móvil, footer, botón WhatsApp.
   ════════════════════════════════════════════════════════════════════════ */

/* ─────────────── BLOQUE SUPERIOR FIJO (header) ─────────────── */
/* El wrapper .site-top es el único fixed: contiene el header y se
   oculta/aparece COMO UNA SOLA UNIDAD con el auto-hide. */
.site-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  transform: translateY(0);
  /* EXCEPCIÓN a la regla global "transition: none": el header es lo ÚNICO que
     debe aparecer/desaparecer con deslizamiento. El !important vence a la regla
     global de base.css que apaga las transiciones del resto de la página. */
  transition: transform var(--t-base) !important;
}
/* AUTO-HIDE: el bloque del header se sube por completo. */
.site-top.is-hidden { transform: translateY(-100%); }

/* Empuja el contenido de TODAS las páginas para que comience debajo del bloque
   fijo. main.js sustituye el respaldo por la altura real del header.
   El espacio permanece estable cuando el bloque se auto-oculta, evitando saltos
   de contenido al cambiar la dirección del scroll. */
main { padding-top: var(--site-top-h, 96px); }

/* ───────────────────────────── HEADER ───────────────────────────── */
.header {
  position: relative;          /* dentro de .site-top, ya no es fixed por sí solo */
  background: var(--c-plum);   /* mismo color que el footer (ciruela) */
  border-bottom: 0;
  transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.header.is-scrolled {
  border-bottom-color: transparent;
  box-shadow: none;
  background: var(--c-plum);
}


/* ── Una sola línea: logo (izq) · menús · buscador · idioma · carrito (der) ── */
.header__top {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  min-height: var(--header-h);
}
.header .brand { flex-shrink: 0; }      /* logo a la izquierda, no se encoge */
.header__right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 92px;
  justify-content: flex-end;
}
/* El buscador, más amplio. */
.header__right .search { width: clamp(280px, 26vw, 420px); }

/* Acceso terapeuta: solo el icono de persona (sin contenedor), a la izq. del idioma. */
.header__terapeuta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 1;
  transition: color var(--t-fast), transform var(--t-fast);
}
.header__terapeuta svg { width: 22px; height: 22px; }
.header__terapeuta:hover { color: rgba(255, 255, 255, 0.72); transform: translateY(-1px); }

/* ── Menú: ya en la misma fila; queda junto al logo, a la izquierda del bloque
   derecho. Sin auto-centrado (eso era para el layout de 2 filas). ── */
.header__bottom { display: none; }      /* la 2ª fila ya no se usa */

/* ── Brand / logo ── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.brand__mark { width: 38px; height: 38px; flex-shrink: 0; color: var(--c-terra); }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand__name small {
  display: block;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  margin-top: 3px;
}

/* ── Nav desktop (en línea, junto al logo) ── */
.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: 0;
}
.nav__item { position: relative; }
/* Navegación unificada (estilo Horeka): pastilla redondeada; el hover y el estado
   activo se indican con un fondo SÓLIDO (sin línea inferior ni translúcidos). */
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-nav);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-text);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__link:hover,
.nav__item.is-open .nav__link {
  background: var(--c-ice);
  color: var(--c-terra-dark);
  text-decoration: none;
}
.nav__link.is-active {
  background: var(--c-ice);
  color: var(--c-terra-dark);
  font-weight: 500;
}
.nav__link:focus-visible {
  color: #000;
  outline: 2px solid var(--c-terra-soft);
  outline-offset: 4px;
}

.nav__caret {
  width: 10px; height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.55;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav__item.is-open .nav__caret {
  transform: rotate(225deg) translate(-2px, -2px);
  opacity: 1;
}

/* ── Header actions ── */
.header__actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

/* ── Buscador (header) ── */
.search { position: relative; width: 100%; }
.search__form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 6px 6px var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: 999px;       /* píldora redondeada (como la referencia) */
  background: var(--c-white);
  transition: border-color var(--t-fast);
}
.search__form:focus-within { border-color: var(--c-terra); }
.search__input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: var(--fs-sm);
  color: var(--c-text);
  min-width: 0;
}
/* Botón de lupa a la DERECHA, redondo. */
.search__btn {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--c-text-soft);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.search__btn:hover { background: var(--c-ice); color: var(--c-terra-dark); }
.search__icon { width: 18px; height: 18px; flex-shrink: 0; }
.search__input::placeholder { color: var(--c-text-soft); }

/* Resultados desplegables en vivo */
.search__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  z-index: 95;
  padding: var(--sp-2);
}
.search-res {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--c-text);
  transition: background var(--t-fast);
}
.search-res:hover { background: var(--c-ice); }
.search-res__thumb { width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden; background: var(--c-ice); }
.search-res__thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-res__info { display: flex; flex-direction: column; min-width: 0; }
.search-res__name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.2; }
.search-res__sub { font-size: var(--fs-xs); color: var(--c-text-soft); }
.search-res__price { font-size: var(--fs-sm); font-weight: 700; color: #000; }
.search-res__empty { padding: var(--sp-4); text-align: center; color: var(--c-text-soft); font-size: var(--fs-sm); }

/* En el menú móvil el buscador va arriba, ancho completo. */
.search--mobile { margin-bottom: var(--sp-5); }

/* ── Botón del carrito (header) ── */
.cart-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 0;                  /* sin círculo: solo el icono */
  background: none;
  color: var(--c-text);
  font-family: var(--font-button);
  transition: color var(--t-fast), transform var(--t-fast);
}
.cart-btn:hover { color: #000; transform: translateY(-2px); }
.cart-btn svg { width: 23px; height: 23px; }
.cart-btn__count {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-round);
  background: var(--c-terra);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
}
/* Cuando el carrito está vacío, ocultamos el contador. */
.cart-btn[data-cart-empty] .cart-btn__count { display: none; }

/* ───────────────────────────── MEGAMENÚ ───────────────────────────── */
.megamenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(680px, 90vw);
  padding: var(--sp-6);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
  z-index: 90;
}
/* puente invisible para que no se cierre al cruzar el hueco */
.nav__item.is-open .megamenu::before {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
}
.nav__item.is-open .megamenu,
.nav__item:focus-within .megamenu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.megamenu__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.megamenu__col-title {
  font-family: var(--font-nav);
  font-size: var(--fs-xs);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 700;
  color: var(--c-text-soft);
  margin-bottom: var(--sp-3);
  padding-left: 12px;
}
.megamenu__link {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-family: var(--font-nav);
  color: var(--c-text);
  transition: background var(--t-fast), transform var(--t-fast);
}
.megamenu__link:hover { background: var(--c-ice); transform: translateX(2px); }
.megamenu__link-ico {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--c-ice);
  color: var(--c-terra-dark);
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.megamenu__link:hover .megamenu__link-ico { background: var(--c-terra); color: var(--c-white); }
.megamenu__link-ico svg { width: 20px; height: 20px; }
.megamenu__link-body { display: flex; flex-direction: column; line-height: 1.25; }
.megamenu__link-body span { font-size: var(--fs-sm); font-weight: 600; }
.megamenu__link-body small { font-size: var(--fs-xs); color: var(--c-text-soft); }
.megamenu__cta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.megamenu__cta span { font-size: var(--fs-sm); color: var(--c-text-soft); }

/* ── Iconos pequeños genéricos ── */
.nav-ico { width: 20px; height: 20px; }

/* ───────────────────────────── SELECTOR DE IDIOMA ───────────────────────────── */
.lang-switcher { position: relative; }
.lang-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;                  /* sin caja: solo globo + código + flecha */
  background: none;
  color: var(--c-text);
  font-family: var(--font-button);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--t-fast);
}
.lang-switcher__btn:hover { color: #000; }
/* En Safari el clic puede caer sobre un SVG hijo: que lo ignoren y llegue al botón. */
.lang-switcher__btn svg { pointer-events: none; }
.lang-switcher__globe { width: 18px; height: 18px; flex-shrink: 0; }
.lang-switcher__caret {
  width: 12px; height: 12px;
  transition: transform var(--t-fast);
}
.lang-switcher.is-open .lang-switcher__caret { transform: rotate(180deg); }

.lang-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  padding: var(--sp-2);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 95;
}
.lang-switcher.is-open .lang-switcher__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.lang-switcher__menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font-button);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-switcher__menu button span { font-size: var(--fs-xs); color: var(--c-text-soft); font-weight: 700; }
.lang-switcher__menu button:hover { background: var(--c-ice); color: #000; }

/* Selector de idioma dentro del menú móvil (botones lado a lado) */
.mobile-nav__lang { display: flex; gap: var(--sp-3); }
.mobile-nav__lang button {
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--r-btn);
  border: 1px solid var(--c-border);
  background: var(--c-white);
  font-family: var(--font-button);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.mobile-nav__lang button:hover { border-color: var(--c-terra); color: #000; }

/* ───────────────────────────── HAMBURGUESA ───────────────────────────── */
.burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-white);
}
.burger span {
  position: absolute;
  left: 12px;
  width: 20px; height: 1.6px;
  background: var(--c-text);
  border-radius: 0;
  transition: transform var(--t-base), opacity var(--t-base), top var(--t-base);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }
.nav-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ───────────────────────────── MENÚ MÓVIL ───────────────────────────── */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--c-cream);
  z-index: 90;                 /* por encima del header (.site-top z-80) */
  padding: var(--sp-8) var(--sp-5);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-base);
}
/* Botón X para cerrar el menú móvil (arriba a la derecha). */
.mobile-nav__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-white);
  color: var(--c-text);
  cursor: pointer;
}
.mobile-nav__close svg { width: 22px; height: 22px; }
.nav-open .mobile-nav { transform: translateX(0); }
.mobile-nav__group { margin-bottom: var(--sp-5); }
.mobile-nav__group h4 {
  font-family: var(--font-nav);
  font-size: var(--fs-xs);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--c-text-soft);
  margin-bottom: var(--sp-3);
}
.mobile-nav__group a {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 0;
  font-family: var(--font-nav);
  font-size: var(--fs-lg);
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
}
.mobile-nav__group a .nav-ico,
.mobile-nav__group a svg { width: 22px; height: 22px; color: var(--c-terra-dark); }
.mobile-nav__cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
/* Redes centradas en el menú móvil. Se usa flex (no inline-flex) con ancho
   completo para que justify-content:center surta efecto. !important vence al
   display:inline-flex que .social-icons aplica por defecto. */
.mobile-nav__social {
  display: flex !important;
  width: 100%;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  justify-content: center;
}
/* Más aire entre el botón X (arriba a la derecha) y la barra de búsqueda. */
.mobile-nav .search--mobile { margin-top: var(--sp-6); }

/* ───────────────────────────── REDES SOCIALES ───────────────────────────── */
.social-icons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.social-icons__link {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  color: var(--c-text-soft);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.social-icons__link:hover {
  background: var(--c-terra);
  color: var(--c-white);
  border-color: var(--c-terra);
  transform: translateY(-2px);
}
.social-icons__link svg { width: 18px; height: 18px; }

/* Footer claro: los iconos sociales usan el estilo base (borde crema) */

/* ───────────────────────────── FOOTER (banda de color, estilo Pakmail) ───────────────────────────── */
.footer {
  background: var(--c-plum);    /* banda CIRUELA, como el vino de Pakmail */
  color: #fff;
  padding: var(--sp-10) 0 var(--sp-6);
  border-top: 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1.3fr 1.7fr;
  gap: var(--sp-7);
  margin-bottom: var(--sp-8);
}
/* Orden de columnas: marca · Menú · Contacto · Boletín (contacto a la derecha del menú). */
.footer__brand { order: 1; padding-top: var(--sp-1); }
.footer__grid > .footer__col:not(#contacto-footer):not(.footer__news) { order: 2; }  /* Menú */
.footer__grid > .footer__col#contacto-footer { order: 3; transform: translateX(-32px); }  /* Contacto, desplazado un poco a la izquierda */
.footer__news { order: 4; }                                                            /* Boletín */
/* Nombre de marca del footer (reemplaza al logo). */
.footer__brand-name {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-heading);
  text-decoration: none;
  line-height: 1.1;
}
.footer__about {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  max-width: 34ch;
}

/* Bloque "Compra con confianza" + logos de pago. */
.footer__pay { margin-top: var(--sp-5); }
.footer__pay-title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text);
  margin-bottom: var(--sp-4);
}
.footer__pay-logos {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.footer__pay-logos img {
  height: 30px;
  width: auto;
  border-radius: 4px;        /* esquinitas suaves para que no se vean cortados */
}
.footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin-bottom: var(--sp-4);
}
.footer__col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__col a {
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  transition: color var(--t-fast);
}
.footer__col a:hover { color: #000; }
.footer__contact-line {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  margin-bottom: var(--sp-3);
}
.footer__contact-line svg { width: 16px; height: 16px; color: var(--c-terra); flex-shrink: 0; }
.footer__bottom {
  position: relative;            /* para centrar el "powered" de forma absoluta */
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
}
.footer__copy { /* copyright a la izquierda */ }
.footer__powered {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);  /* centrado real, sin importar el copyright */
  white-space: nowrap;
}
/* En móvil se apilan centrados (no hay espacio para el centrado absoluto). */
@media (max-width: 700px) {
  .footer__bottom { flex-direction: column; text-align: center; gap: var(--sp-2); }
  .footer__powered { position: static; transform: none; }
}

/* ───────────────────────────── WHATSAPP FLOTANTE ───────────────────────────── */
.wa-float {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 60;
  width: 48px; height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-terra-dark);
  color: #fff;
  box-shadow: none;
  transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-fast);
}
.wa-float:hover { background: var(--c-plum); transform: scale(1.06); box-shadow: none; }
.wa-float svg { width: 24px; height: 24px; }
.wa-float::after {
  display: none;   /* sin efecto de pulso */
}

/* ───────────────────────────── BOTÓN SUBIR ARRIBA ───────────────────────────── */
/* Fondo ROSA sólido + flecha (SVG) BLANCA. Va encima del botón de WhatsApp. */
.scroll-top {
  position: fixed;
  right: var(--sp-5);                       /* mismo eje que wa-float */
  bottom: calc(var(--sp-5) + 48px + var(--sp-3));
  z-index: 60;
  width: 48px; height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-terra-dark);
  color: #fff;                              /* el SVG hereda → flecha blanca */
  box-shadow: none;
  cursor: pointer;
  /* Oculto hasta hacer scroll. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base), background var(--t-fast);
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--c-plum); transform: translateY(-2px); }
.scroll-top svg { width: 22px; height: 22px; }

/* ───────────────────────────── RESPONSIVE ───────────────────────────── */
@media (max-width: 980px) {
  /* Móvil: logo a la izquierda, carrito + hamburguesa a la derecha.
     El menú, el buscador de escritorio y el idioma pasan al menú móvil. */
  .nav { display: none; }                          /* menús → menú móvil */
  .header__right .search--desktop { display: none; }
  .header__right .lang-switcher { display: none; }
  .burger { display: block; }
  .header__top { padding: var(--sp-3) var(--sp-5); }
  :root { --header-h: 88px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .footer__brand { grid-column: 1 / -1; }
  /* Al apilarse, la columna de Contacto ya no debe desplazarse (se salía del margen). */
  .footer__grid > .footer__col#contacto-footer { transform: none; }
}

@media (max-width: 720px) {
  .wa-float { right: var(--sp-4); bottom: var(--sp-4); width: 44px; height: 44px; }
  .scroll-top { right: var(--sp-4); bottom: calc(var(--sp-4) + 44px + var(--sp-3)); width: 44px; height: 44px; }
  .wa-float svg { width: 22px; height: 22px; }
  .scroll-top svg { width: 20px; height: 20px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
  .brand__name { font-size: var(--fs-md); }
}

/* ════════════════════════════════════════════════════════════════════════
   CHELSEA — logo de imagen en header/footer + acentos del logo
   ════════════════════════════════════════════════════════════════════════ */
/* El logo ya contiene el nombre, así que mostramos solo la imagen. */
.brand__logo {
  display: block;
  width: auto;
  object-fit: contain;
  transition: transform var(--t-base);
}
.brand__logo--header {
  height: 46px;
  width: auto;               /* lockup horizontal: alto fijo, ancho proporcional */
}
.brand:hover .brand__logo { transform: scale(1.04) rotate(-1deg); }

/* Logo del footer: arriba del nombre. El PNG es transparente (símbolo blanco),
   así que resalta directo sobre la banda ciruela, sin tarjeta. */
.footer__brand .brand { display: inline-block; }
.footer__brand-logo { display: block; margin-bottom: var(--sp-4); }
.brand__logo--footer { height: 58px; width: auto; margin-left: -4px; }  /* lockup horizontal en el footer */

.header.is-scrolled { background: var(--c-plum); box-shadow: none; }

/* Megamenú e iconos: acento rosa SÓLIDO del logo (sin degradados) */
.megamenu__link:hover .megamenu__link-ico {
  background: var(--c-terra);
  color: #fff;
}
.social-icons__link:hover {
  background: var(--c-terra);
  border-color: transparent;
  color: #fff;
}
/* En el footer los iconos viven dentro de .footer__col, cuya regla
   `.footer__col a:hover { color: terra }` tiene más especificidad y pisaba
   el blanco. Igualamos/superamos esa especificidad para el icono social. */
.footer__col a.social-icons__link { color: var(--c-text-soft); }
.footer__col a.social-icons__link:hover { color: #fff; }

@media (max-width: 980px) {
  .brand__logo--header { height: 40px; width: auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER TRANSPARENTE SOBRE HERO
   ════════════════════════════════════════════════════════════════════════ */

/* ── Menú del header (sobre banda ciruela: texto blanco; hover = pastilla sólida
   clara con texto oscuro, estilo Horeka) ── */
.header .nav__link { color: #fff; }
.header .nav__link:hover,
.header .nav__item.is-open .nav__link,
.header .nav__link:focus-visible {
  background: var(--c-ice);
  color: var(--c-terra-dark);
}
.header .nav__link.is-active {
  background: var(--c-ice);
  color: var(--c-terra-dark);
}

/* ── Selector de idioma ── */
.header .lang-switcher__btn { color: #fff; }
.header .lang-switcher__btn:hover { color: rgba(255, 255, 255, 0.72); }

/* ── Hamburguesa móvil ── */
.header .burger { background: transparent; border-color: rgba(255, 255, 255, 0.4); }
.header .burger span { background: #fff; }

/* ── Footer CIRUELA (banda de color, estilo Pakmail): textos en blanco ── */
.footer__brand-name,
.footer__col h4 { color: #fff; }
.footer__about,
.footer__col a,
.footer__contact-line,
.footer__news-text,
.footer__copy,
.footer__powered { color: #fff; }
.footer__col a:hover { color: #fff; text-decoration: underline; }
/* SVG de contacto (teléfono, correo, ubicación): blancos sobre el footer. */
.footer__contact-line svg { color: #fff; }
.footer__bottom { border-top-color: rgba(255, 255, 255, 0.22); }

/* Iconos de redes sociales sobre la banda: borde tenue blanco, icono claro. */
.footer .social-icons__link,
.footer__col a.social-icons__link {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.footer .social-icons__link:hover,
.footer__col a.social-icons__link:hover {
  background: #fff;                  /* hover: invierte a blanco con icono ciruela */
  color: var(--c-plum);
  border-color: #fff;
}

/* Newsletter del footer: botón blanco con texto ciruela (contraste sobre la banda). */
.footer .news-form__btn.btn--primary {
  background: #fff;
  color: var(--c-plum);
  border-color: #fff;
}
.footer .news-form__btn.btn--primary:hover { background: var(--c-terra-soft); color: var(--c-plum-dark); border-color: var(--c-terra-soft); }
.footer .news-form__msg.is-ok { color: #fff; }
/* Input del newsletter sobre banda oscura. */
.footer .news-form__input {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.footer .news-form__input::placeholder { color: #fff; }