/*
 * Alteria — base: reset, tipografía, utilidades compartidas y chrome del theme
 * (header sticky, footer, fondo suave). Todo lo específico de una sección vive
 * en elementor/css/<widget>.css.
 */

/* ── Reset mínimo ─────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; border-color: var(--alteria-border); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--alteria-background);
  color: var(--alteria-foreground);
  font-family: var(--alteria-font-body);
  font-size: var(--alteria-fs-body);
  line-height: var(--alteria-lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 1024px) { body { font-size: 18px; } }

img, video { max-width: 100%; height: auto; display: block; }

/* Los iconos se imprimen como SVG inline SIN width ni height propios. Sin un
   tamaño por defecto el navegador los trata como elemento reemplazado y les da
   300x150, que revienta el contenedor. Las reglas por componente son más
   específicas y mandan sobre esta. */
svg { display: block; width: 1em; height: 1em; flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--alteria-font-display);
  letter-spacing: var(--alteria-tracking-tight);
  line-height: var(--alteria-lh-snug);
  margin: 0;
  font-weight: 700;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--alteria-ring);
  outline-offset: 2px;
}

/* ── Contenedores ─────────────────────────────────────────── */
.alteria-container {
  width: 100%;
  max-width: var(--alteria-container);
  margin-inline: auto;
  padding-inline: var(--alteria-gutter);
}
.alteria-container--sm { max-width: var(--alteria-container-sm); }
.alteria-container--xs { max-width: var(--alteria-container-xs); }

@media (min-width: 640px) {
  .alteria-container { padding-inline: var(--alteria-gutter-lg); }
}

/* ── Utilidades compartidas ───────────────────────────────── */
.alteria-surface-card {
  background-color: var(--alteria-surface);
  border: 1px solid var(--alteria-border);
  border-radius: var(--alteria-radius-xl);
  box-shadow: var(--alteria-shadow-card);
}

.alteria-muted { color: var(--alteria-muted-foreground); }
.alteria-accent-text { color: var(--alteria-primary); }

.alteria-eyebrow {
  font-size: var(--alteria-fs-xs);
  font-weight: 500;
  letter-spacing: var(--alteria-tracking-wide);
  text-transform: uppercase;
  color: var(--alteria-muted-foreground);
}

/* Botones */
.alteria-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: var(--alteria-primary);
  color: var(--alteria-primary-foreground);
  font-weight: 600;
  padding: 1rem 2rem;
  font-size: 18px;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color .2s ease;
}
.alteria-btn:hover { background-color: var(--alteria-primary-hover); }
.alteria-btn:disabled { opacity: .5; cursor: not-allowed; }
/* La flecha mide lo mismo que en la maqueta (h-5 w-5). */
.alteria-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform .2s ease;
}
.alteria-btn:hover svg.alteria-icon-arrow { transform: translateX(4px); }

.alteria-btn--sm { padding: .625rem 1.25rem; font-size: var(--alteria-fs-sm); }
.alteria-btn--sm svg { width: 1rem; height: 1rem; }
.alteria-btn--md { padding: .875rem 1.75rem; font-size: 16px; }

.alteria-btn--ghost {
  background: transparent;
  border-color: var(--alteria-primary);
  color: var(--alteria-primary);
  font-size: var(--alteria-fs-sm);
  padding: .75rem 1.5rem;
}
.alteria-btn--ghost:hover { background-color: var(--alteria-primary-10); }
.alteria-btn--ghost svg { width: 1rem; height: 1rem; }   /* h-4 w-4 en la maqueta */

.alteria-glow { box-shadow: var(--alteria-shadow-glow); }

/* Chips verdes (SKU, stock, etiquetas de refuerzo) */
.alteria-chip {
  display: inline-block;
  border: 1px solid var(--alteria-emerald-30);
  background: var(--alteria-emerald-10);
  color: var(--alteria-emerald);
  border-radius: var(--alteria-radius-sm);
  padding: .125rem .5rem;
  font-size: 11px;
  font-weight: 500;
}

/* Iconos en caja */
.alteria-icon-box {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--alteria-radius-md);
  background: var(--alteria-primary-15);
  color: var(--alteria-primary);
}
.alteria-icon-box svg { width: 1.25rem; height: 1.25rem; }
.alteria-icon-box--sm { width: 2.25rem; height: 2.25rem; }
.alteria-icon-box--sm svg { width: 1.125rem; height: 1.125rem; }

.alteria-check { color: var(--alteria-emerald); flex-shrink: 0; }

/* ── Animación de entrada por scroll (reemplaza al Reveal de React) ── */
.alteria-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1);
}
.alteria-reveal.is-visible { opacity: 1; transform: none; }

@keyframes alteria-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.alteria-fade-up { animation: alteria-fade-up .7s cubic-bezier(.22, 1, .36, 1) both; }

@keyframes alteria-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(69, 205, 129, .45); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.alteria-pulse-ring { animation: alteria-pulse-ring 2s ease-out infinite; }

/* En el editor de Elementor no se anima: si no, las secciones aparecen vacías. */
.elementor-editor-active .alteria-reveal { opacity: 1; transform: none; }

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

/* ── Fondo suave (equivalente a SoftBackground) ───────────── */
.alteria-soft-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
}
.alteria-soft-bg__base { position: absolute; inset: 0; background: var(--alteria-background); }
.alteria-soft-bg__aurora {
  position: absolute;
  top: -25%;
  left: 50%;
  width: 1000px;
  height: 720px;
  transform: translateX(-50%);
  border-radius: 9999px;
  opacity: .07;
  filter: blur(190px);
  background: var(--alteria-gradient-aurora);
}
.alteria-soft-bg__accent {
  position: absolute;
  right: -10%;
  bottom: 0;
  width: 620px;
  height: 520px;
  border-radius: 9999px;
  background: var(--alteria-accent-08);
  filter: blur(170px);
}

/* ── Header sticky ────────────────────────────────────────── */
.alteria-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: rgba(7, 26, 34, .6);
  backdrop-filter: blur(4px);
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.alteria-header.is-scrolled {
  border-bottom-color: var(--alteria-border);
  background: rgba(7, 26, 34, .8);
  backdrop-filter: blur(20px);
}
.alteria-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-block: .75rem;
}
@media (min-width: 1024px) {
  /* Con menú: logo | navegación | acciones. */
  .alteria-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2rem; }
}
/* ── Navegación ───────────────────────────────────────────── */
.alteria-nav__lista {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.alteria-nav__lista a {
  display: block;
  padding: .5rem .75rem;
  border-radius: var(--alteria-radius-md);
  font-size: var(--alteria-fs-sm);
  font-weight: 500;
  color: var(--alteria-muted-foreground);
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.alteria-nav__lista a:hover { color: var(--alteria-foreground); background: var(--alteria-primary-08); }

/* La página en curso se marca con la clase que pone WordPress. */
.alteria-nav__lista .current-menu-item > a,
.alteria-nav__lista .current-menu-ancestor > a,
.alteria-nav__lista .current_page_item > a { color: var(--alteria-primary); }

/* Submenús: se despliegan al pasar el cursor o al enfocar con el teclado. */
.alteria-nav__lista li { position: relative; }
.alteria-nav__lista .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  gap: .125rem;
  min-width: 14rem;
  margin-top: .375rem;
  padding: .375rem;
  border: 1px solid var(--alteria-border);
  border-radius: var(--alteria-radius-lg);
  background: var(--alteria-surface);
  box-shadow: var(--alteria-shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.alteria-nav__lista li:hover > .sub-menu,
.alteria-nav__lista li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.alteria-nav__lista .sub-menu a { white-space: normal; }

/* Un chevrón para los ítems que tienen submenú. */
.alteria-nav__lista .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: .375rem;
  height: .375rem;
  margin-left: .4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* ── Botón hamburguesa (solo móvil) ───────────────────────── */
.alteria-nav__toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--alteria-border);
  border-radius: var(--alteria-radius-md);
  background: transparent;
  cursor: pointer;
}
.alteria-nav__burger,
.alteria-nav__burger::before,
.alteria-nav__burger::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  border-radius: 2px;
  background: var(--alteria-foreground);
  transition: transform .25s ease, opacity .2s ease;
}
.alteria-nav__burger::before,
.alteria-nav__burger::after { content: ""; position: absolute; }
.alteria-nav__burger::before { transform: translateY(-6px); }
.alteria-nav__burger::after  { transform: translateY(6px); }

.alteria-nav__toggle[aria-expanded="true"] .alteria-nav__burger { background: transparent; }
.alteria-nav__toggle[aria-expanded="true"] .alteria-nav__burger::before { transform: rotate(45deg); }
.alteria-nav__toggle[aria-expanded="true"] .alteria-nav__burger::after  { transform: rotate(-45deg); }

/* ── Móvil: el menú baja como panel ───────────────────────── */
@media (max-width: 1023px) {
  .alteria-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: none;
    padding: .75rem 1rem 1.25rem;
    border-bottom: 1px solid var(--alteria-border);
    background: var(--alteria-background);
    box-shadow: var(--alteria-shadow-card);
  }
  .alteria-nav.is-abierto { display: block; }

  .alteria-nav__lista { flex-direction: column; align-items: stretch; gap: .125rem; }
  .alteria-nav__lista a { padding: .75rem; font-size: 16px; }

  /* En móvil el submenú va en flujo, sin superponerse. */
  .alteria-nav__lista .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    margin: .125rem 0 .25rem .75rem;
    background: var(--alteria-surface-2);
  }
  .alteria-nav__lista .menu-item-has-children > a::after { display: none; }
}

/* "Ingresar" solo aparece una vez: en el panel si hay menú, en el header si no. */
.alteria-nav__login-movil {
  display: block;
  margin-top: .5rem;
  padding: .75rem;
  border-top: 1px solid var(--alteria-border);
  font-size: 16px;
  font-weight: 600;
  color: var(--alteria-primary);
}

@media (min-width: 1024px) {
  .alteria-nav__toggle,
  .alteria-nav__login-movil { display: none; }
}

/* Con menú en móvil, el enlace del header estorba: no caben los tres. */
@media (max-width: 1023px) {
  .alteria-header:has(.alteria-nav) .alteria-header__login { display: none; }
  .alteria-header__acciones { gap: .5rem; }
  .alteria-btn--sm { padding: .5rem .875rem; font-size: 13px; }
}

.alteria-header__acciones { display: flex; align-items: center; gap: .75rem; }

.alteria-header__login {
  font-size: var(--alteria-fs-sm);
  font-weight: 600;
  color: var(--alteria-muted-foreground);
  padding: .625rem .5rem;
  white-space: nowrap;
  transition: color .2s ease;
}
.alteria-header__login:hover { color: var(--alteria-foreground); }

@media (min-width: 640px) {
  .alteria-header__acciones { gap: 1rem; }
  .alteria-header__login { padding-inline: .75rem; }
}

.alteria-header__logo { display: flex; align-items: center; min-width: 0; }
.alteria-header__logo img { height: 1.75rem; width: auto; }
@media (min-width: 640px) { .alteria-header__logo img { height: 2rem; } }

/* La barra de admin de WP no debe tapar el header fijo. */
.admin-bar .alteria-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .alteria-header { top: 46px; } }

/* ── Footer ───────────────────────────────────────────────── */
.alteria-footer {
  border-top: 1px solid var(--alteria-border);
  padding-block: 2.5rem;
}
.alteria-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}
.alteria-footer__brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.alteria-footer__brand img { height: 1.5rem; width: auto; flex-shrink: 0; opacity: .9; }
.alteria-footer__tagline {
  font-size: var(--alteria-fs-sm);
  color: var(--alteria-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alteria-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .375rem;
  flex-shrink: 0;
}

.alteria-footer__legales { display: flex; gap: 1rem; }
.alteria-footer__legales a {
  font-size: var(--alteria-fs-xs);
  color: var(--alteria-muted-foreground);
  transition: color .2s ease;
}
.alteria-footer__legales a:hover { color: var(--alteria-primary); }

.alteria-footer__copy {
  font-size: var(--alteria-fs-xs);
  color: var(--alteria-muted-foreground);
  flex-shrink: 0;
}

/* ── Páginas simples (404, page.php sin Elementor) ────────── */
.alteria-plain {
  padding-block: 9rem 5rem;
  min-height: 60vh;
}
.alteria-plain h1 { font-size: var(--alteria-fs-hero); }
.alteria-plain p { margin-top: 1rem; color: var(--alteria-muted-foreground); }
.alteria-plain .alteria-btn { margin-top: 2rem; }

/* Fila de contacto y redes: solo existe si hay datos en el personalizador. */
.alteria-footer__extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--alteria-border);
}

.alteria-footer__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}
.alteria-footer__contacto li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--alteria-fs-sm);
  color: var(--alteria-muted-foreground);
}
.alteria-footer__contacto svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--alteria-primary);
}
.alteria-footer__contacto a { transition: color .2s ease; }
.alteria-footer__contacto a:hover { color: var(--alteria-foreground); }

.alteria-footer__redes { display: flex; gap: .5rem; }
.alteria-footer__redes a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--alteria-border);
  border-radius: var(--alteria-radius-md);
  color: var(--alteria-muted-foreground);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.alteria-footer__redes a:hover {
  border-color: var(--alteria-primary);
  background: var(--alteria-primary-10);
  color: var(--alteria-primary);
}
.alteria-footer__redes svg { width: 1.125rem; height: 1.125rem; }