/* ════════════════════════════════════════════════════════════════════════
   ELIXUSSE — base compartida (tienda, panel y páginas legales)
   Paleta mínima: tinta + marfil, con un bronce apenas para acentos.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --tinta: #121110;
  --tinta-2: #1d1b19;
  --tinta-3: #2b2825;
  --marfil: #f4f1eb;
  --marfil-2: #ebe6dd;
  --papel: #fbfaf7;
  --blanco: #ffffff;
  --linea: #e2ddd3;
  --linea-oscura: #3a3632;
  --gris: #66615a;          /* texto secundario: 5.6:1 sobre marfil */
  --gris-claro: #9d978d;    /* solo decorativo */
  --marfil-texto: #ece7de;  /* texto sobre tinta */
  --marfil-suave: #b9b2a6;  /* texto secundario sobre tinta: 8:1 */
  --bronce: #84643f;        /* 5:1 sobre marfil */
  --bronce-claro: #c9a77c;  /* acento sobre tinta */
  --ok: #2c6a4c;
  --ok-fondo: #e6efe9;
  --error: #a3362a;
  --error-fondo: #f6e7e4;
  --aviso: #7a5b12;
  --aviso-fondo: #f5edd9;

  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans: 'Jost', 'Futura', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radio: 2px;
  --radio-grande: 6px;
  --sombra: 0 18px 50px rgba(18, 17, 16, .12);
  --sombra-suave: 0 4px 18px rgba(18, 17, 16, .06);
  --ancho: 1240px;
  --margen: clamp(16px, 4vw, 40px);
  --header: 68px;
  --rapido: 160ms;
  --medio: 320ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: .2em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.1; }
p { margin: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.oscuro :focus-visible, .sobre-oscuro:focus-visible { outline-color: var(--marfil-texto); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--tinta); color: var(--marfil-texto); padding: 10px 16px; text-decoration: none;
}
.saltar:focus { top: 12px; }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

/* ─── Tipografía ─── */
.ceja {
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: var(--bronce);
}
.titulo-seccion { font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -.01em; }
.titulo-seccion em { font-style: italic; }
.texto-suave { color: var(--gris); }
.serif { font-family: var(--serif); }

/* ─── Marca: el dragón se pinta con una máscara, así toma el color del texto ─── */
.marca-logo {
  display: inline-block; flex: none;
  width: var(--tam, 40px); height: var(--tam, 40px);
  background-color: currentColor;
  -webkit-mask: url('../img/logo.svg') center / contain no-repeat;
  mask: url('../img/logo.svg') center / contain no-repeat;
}
.marca-nombre {
  font-family: var(--sans); font-weight: 400; letter-spacing: .42em;
  text-transform: uppercase; font-size: .95rem; margin-right: -.42em;
}

/* ─── Botones ─── */
.boton {
  --b-fondo: var(--tinta); --b-texto: var(--marfil-texto); --b-borde: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 0 1.5rem;
  background: var(--b-fondo); color: var(--b-texto);
  border: 1px solid var(--b-borde); border-radius: var(--radio);
  font-family: var(--sans); font-size: .78rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido), transform var(--rapido);
}
.boton svg { width: 20px; height: 20px; flex: none; }
.boton:hover { --b-fondo: var(--tinta-3); --b-borde: var(--tinta-3); }
.boton:active { transform: translateY(1px); }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.boton.claro { --b-fondo: var(--marfil-texto); --b-texto: var(--tinta); --b-borde: var(--marfil-texto); }
.boton.claro:hover { --b-fondo: #fff; --b-borde: #fff; }
.boton.borde { --b-fondo: transparent; --b-texto: var(--tinta); --b-borde: var(--tinta); }
.boton.borde:hover { --b-fondo: var(--tinta); --b-texto: var(--marfil-texto); }
.boton.borde-claro { --b-fondo: transparent; --b-texto: var(--marfil-texto); --b-borde: rgba(236, 231, 222, .45); }
.boton.borde-claro:hover { --b-borde: var(--marfil-texto); --b-fondo: rgba(236, 231, 222, .08); }
.boton.peligro { --b-fondo: var(--error); --b-borde: var(--error); --b-texto: #fff; }
.boton.peligro:hover { --b-fondo: #8a2b21; --b-borde: #8a2b21; }
.boton.whatsapp { --b-fondo: #1f7a4d; --b-borde: #1f7a4d; --b-texto: #fff; }
.boton.whatsapp:hover { --b-fondo: #18633e; --b-borde: #18633e; }
.boton.ancho { width: 100%; }
.boton.chico { min-height: 40px; padding: 0 1rem; font-size: .72rem; letter-spacing: .14em; }

.boton-icono {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: transparent; border: 0; border-radius: 50%; color: inherit;
  transition: background var(--rapido);
}
.boton-icono:hover { background: rgba(18, 17, 16, .06); }
.oscuro .boton-icono:hover { background: rgba(236, 231, 222, .1); }
.boton-icono svg { width: 22px; height: 22px; }

.enlace { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; color: inherit; cursor: pointer; }

/* ─── Formularios ─── */
.campo { display: grid; gap: 6px; }
.campo > span, .etiqueta { font-size: .78rem; font-weight: 500; letter-spacing: .06em; color: var(--gris); }
.campo small { color: var(--gris); font-size: .78rem; line-height: 1.4; }
.entrada, .campo :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: 1rem; line-height: 1.4; transition: border-color var(--rapido), box-shadow var(--rapido);
}
.campo :where(textarea) { min-height: 96px; resize: vertical; }
.entrada:focus, .campo :where(input, select, textarea):focus {
  outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(18, 17, 16, .08);
}
.campo [aria-invalid="true"] { border-color: var(--error); }
.campo :where(select) {
  appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121110' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tinta); flex: none; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ─── Mensajes ─── */
.nota {
  padding: 12px 14px; border-radius: var(--radio); font-size: .9rem; line-height: 1.45;
  background: var(--marfil); border-left: 3px solid var(--tinta);
}
.nota.error { background: var(--error-fondo); border-color: var(--error); color: #6e231b; }
.nota.ok { background: var(--ok-fondo); border-color: var(--ok); color: #1d4a34; }
.nota.aviso { background: var(--aviso-fondo); border-color: var(--aviso); color: #5a430c; }

.aviso-flotante {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 90;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 440px); padding: 12px 18px;
  background: var(--tinta); color: var(--marfil-texto); border-radius: var(--radio);
  box-shadow: var(--sombra); font-size: .9rem; transition: opacity var(--medio), transform var(--medio) var(--curva);
}
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }

/* ─── Diálogos (modal nativo: Esc cierra, el foco queda adentro) ─── */
dialog {
  padding: 0; border: 0; color: var(--tinta); background: var(--papel);
  max-width: 100vw; max-height: 100dvh;
}
dialog::backdrop { background: rgba(18, 17, 16, .55); backdrop-filter: blur(3px); }
dialog[open] { animation: entrar var(--medio) var(--curva); }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } }
body.sin-scroll { overflow: hidden; }
.dialogo-cerrar { position: absolute; top: 10px; right: 10px; z-index: 3; }

.confirmar { width: min(92vw, 420px); border-radius: var(--radio-grande); padding: 28px; }
.confirmar h2 { font-family: var(--serif); font-size: 1.6rem; margin-bottom: 10px; }
.confirmar p { color: var(--gris); }
.confirmar .acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }

/* ─── Varios ─── */
.precio { font-variant-numeric: tabular-nums; white-space: nowrap; }
.precio-antes { color: var(--gris); text-decoration: line-through; font-size: .85em; margin-left: .4em; }
.etiqueta-chica {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); border-radius: 999px;
}
.etiqueta-chica.oscura { background: var(--tinta); color: var(--marfil-texto); border-color: var(--tinta); }
.etiqueta-chica.bronce { background: var(--bronce); color: #fff; border-color: var(--bronce); }

.cargando {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}