/* ==========================================================================
   Manos Vivas — Tokens + Reset
   Las custom properties de marca (color) viven únicamente aquí.
   ========================================================================== */

:root {
  /* ---- Paleta "Piel y noche caribe" (fija, no negociable) ----
     Regla 60-30-10. Todo color del sitio sale de estos tokens. */
  --piel: #F2E3D5;
  --tarjeta-piel: #FBF4EC;
  --madera: #D8BC94;
  --verde-bosque: #2F3F26;
  --laguna: #1F5A60;
  --cobre: #8E4E2C;
  --tinta: #1F1A14;
  --azul-noche: #14232E;
  --arena: #F4EADB;
  --luz-dorada: #E2B46C;
  --azulito: #A8CCDB;

  /* ---- Derivados (mezclas de la paleta, contraste AA verificado) ---- */
  --banda-madera: #EAD7C2; /* madera al 30% sobre piel */
  --banda-noche: #1E2F3A; /* azulito al 7% sobre azul noche */
  --tarjeta-noche: #263743; /* azulito al 12% sobre azul noche */
  --tarjeta-noche-alta: #2F414D; /* azulito al 18% sobre azul noche */
  --verde-profundo: #293220; /* verde bosque con 35% de tinta */
  --cobre-claro: #B8814C; /* cobre con 50% de luz dorada */
  --cobre-hondo: #7A4326; /* cobre con 15% de tinta */

  /* ---- Semánticos (modo noche = default) ---- */
  --bg: var(--azul-noche);
  --bg-banda: var(--banda-noche);
  --bg-deep: var(--banda-noche);
  --surface: var(--tarjeta-noche);
  --surface-raised: var(--tarjeta-noche-alta);
  --text: var(--arena);
  --text-muted: rgb(244 234 219 / 0.82);
  --text-faint: rgb(244 234 219 / 0.72);
  --titulo: var(--arena); /* títulos y nombres de los masajes */
  --frase: var(--azulito); /* frase bajo el título y subtítulos creativos */
  --precio: var(--madera);
  --logo-color: var(--luz-dorada);
  --border: rgb(226 180 108 / 0.4); /* líneas finas: luz dorada al 40% */
  --border-strong: rgb(226 180 108 / 0.6);
  --borde-campo: var(--azulito); /* bordes de campos: 3:1 como mínimo */
  --accent: var(--luz-dorada);
  --accent-relleno: var(--luz-dorada);
  --accent-strong: var(--luz-dorada);
  --accent-punto: var(--luz-dorada);
  --on-accent: var(--azul-noche);
  --boton-bg: var(--luz-dorada);
  --boton-texto: var(--azul-noche);
  --boton-hover: #E9CA98; /* luz dorada con 30% de arena */
  --menu-btn-bg: var(--azulito);
  --menu-btn-texto: var(--tinta);
  --sombra-acento: rgb(226 180 108 / 0.3);
  /* Opción recomendada ("Más elegido"): terracota. El relleno es cobre en
     ambos modos (texto arena 5,4:1); de noche el borde va en cobre claro
     para que se lea sobre el azul. */
  --terracota: var(--cobre);
  --terracota-hover: var(--cobre-hondo);
  --terracota-texto: var(--arena);
  --terracota-borde: rgb(184 129 76 / 0.7);
  --terracota-linea: var(--cobre-claro);
  --terracota-sombra: rgb(142 78 44 / 0.35);
  /* Bloques de color (lanzamiento, testimonios, newsletter) */
  --bloque-lanzamiento: var(--laguna);
  --panel-lanzamiento: var(--azul-noche);
  --bloque-testimonios: var(--verde-bosque);
  --texto-testimonios: var(--arena);
  --cita-testimonios: var(--luz-dorada);
  --bloque-newsletter: var(--laguna);
  --texto-bloque: var(--arena);
  --texto-bloque-rgb: 244 234 219;
  --boton-bloque-bg: var(--luz-dorada);
  --boton-bloque-texto: var(--azul-noche);
  --boton-bloque-hover: #E9CA98;
  --frase-bloque: var(--azulito);
  --accent-bloque: var(--luz-dorada);
  --borde-campo-bloque: var(--azulito);
  /* Liquid glass */
  --vidrio-menu-bg: rgb(168 204 219 / 0.1);
  --vidrio-menu-borde: rgb(255 255 255 / 0.18);
  --vidrio-bg: rgb(20 35 46 / 0.75);
  --vidrio-borde: rgb(168 204 219 / 0.28);
  --vidrio-brillo: rgb(255 255 255 / 0.12);
  --vidrio-sombra: 0 18px 40px -18px rgb(0 0 0 / 0.6);
  --vidrio-solido: var(--tarjeta-noche); /* fallback sin transparencia */
  /* El hero también cambia con el tema: si no, el toggle parece no hacer
     nada, porque los controles están justo encima del hero. */
  --hero-velo: 20 35 46; /* azul noche en rgb */
  --hero-velo-fuerza: 0.92;
  --hero-texto: var(--arena);
  --hero-texto-suave: rgb(244 234 219 / 0.86);
  --sombra: rgb(0 0 0 / 0.55);

  /* ---- Tipografía ---- */
  /* Dos familias, cuatro variantes: EB Garamond 600 y cursiva 500 para
     títulos y frases destacadas; Atkinson Hyperlegible Next 400 y 600 para
     todo lo demás. */
  --font-display: 'EB Garamond', Georgia, serif;
  --font-body: 'Atkinson Hyperlegible Next', -apple-system, 'Segoe UI', sans-serif;

  /* Tamaños base (en rem, así el botón A+ los escala todos). La base es
     15px (ver html más abajo): 1rem = 15px con el texto al 100%. */
  --fs-texto: 1rem; /* párrafos: 15px móvil, ~17px desktop */
  --fs-chico: 0.9333rem; /* letra chica: 14px, nunca menos */
  --fs-precio: 1.375rem; /* 22px */
  --fs-h1: clamp(2.25rem, 3.4vw + 1.5rem, 4.25rem); /* 36–44 móvil, 56–68 desktop */
  --fs-h2: clamp(1.75rem, 1.9vw + 1.25rem, 3rem); /* 28–32 móvil, 40–48 desktop */
  --medida: 68ch; /* largo de línea máximo */

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.22s;
  --dur-med: 0.48s;
  --dur-slow: 0.9s;

  /* ---- Layout ---- */
  --container: 1180px;
  --container-wide: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-s: 6px;
  --radius-m: 16px;
  --radius-l: 30px;

  /* ---- Accesibilidad (controlado por JS) ---- */
  --escala-fuente: 1;
}

@media (min-width: 1024px) {
  :root {
    --fs-texto: 1.125rem;
  }
}

[data-tema='dia'] {
  --bg: var(--piel);
  --bg-banda: var(--banda-madera);
  --bg-deep: var(--banda-madera);
  --surface: var(--tarjeta-piel);
  --surface-raised: var(--tarjeta-piel);
  --text: var(--tinta);
  --text-muted: rgb(31 26 20 / 0.78);
  --text-faint: rgb(31 26 20 / 0.72);
  --titulo: var(--verde-bosque);
  --frase: var(--cobre);
  --precio: var(--verde-bosque);
  --logo-color: var(--verde-bosque);
  --border: var(--madera);
  --border-strong: rgb(47 63 38 / 0.45);
  --borde-campo: rgb(47 63 38 / 0.7); /* verde bosque al 70% */
  --accent: var(--verde-bosque);
  --accent-relleno: var(--verde-bosque);
  --accent-strong: var(--cobre);
  --accent-punto: var(--cobre);
  --on-accent: var(--piel);
  --boton-bg: var(--verde-bosque);
  --boton-texto: var(--piel);
  --boton-hover: #2B3522; /* verde bosque con 25% de tinta */
  --sombra-acento: rgb(47 63 38 / 0.3);
  --terracota-texto: var(--piel);
  --terracota-borde: rgb(142 78 44 / 0.55);
  --terracota-linea: var(--cobre);
  --terracota-sombra: rgb(142 78 44 / 0.25);
  --bloque-lanzamiento: var(--verde-bosque);
  --panel-lanzamiento: var(--verde-profundo);
  --bloque-testimonios: var(--laguna);
  --texto-testimonios: var(--piel);
  --cita-testimonios: var(--piel);
  --bloque-newsletter: var(--verde-bosque);
  --texto-bloque: var(--piel);
  --texto-bloque-rgb: 242 227 213;
  /* En los bloques verde o laguna el botón va invertido */
  --boton-bloque-bg: var(--piel);
  --boton-bloque-texto: var(--verde-bosque);
  --boton-bloque-hover: var(--tarjeta-piel);
  --frase-bloque: var(--piel);
  --accent-bloque: var(--piel);
  --borde-campo-bloque: rgb(242 227 213 / 0.7); /* piel al 70% */
  --vidrio-menu-bg: rgb(255 255 255 / 0.45);
  --vidrio-menu-borde: rgb(255 255 255 / 0.7);
  --vidrio-bg: rgb(251 244 236 / 0.62);
  --vidrio-borde: rgb(255 255 255 / 0.75);
  --vidrio-brillo: rgb(255 255 255 / 0.8);
  --vidrio-sombra: 0 18px 40px -18px rgb(47 63 38 / 0.35);
  --vidrio-solido: var(--tarjeta-piel);
  --hero-velo: 242 227 213; /* piel en rgb */
  --hero-velo-fuerza: 0.88;
  --hero-texto: var(--tinta);
  --hero-texto-suave: rgb(31 26 20 / 0.82);
  --sombra: rgb(47 63 38 / 0.3);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Un paso bajo el tamaño del navegador (93,75% = 15px). A+ sube desde acá. */
html {
  font-size: calc(93.75% * var(--escala-fuente));
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-texto);
  line-height: 1.55;
  min-height: 100svh;
  overflow-x: hidden;
  transition: background-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}

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

svg {
  display: block;
  fill: currentColor;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--titulo);
  line-height: 1.15;
  text-wrap: balance;
}

/* Garamond queda para los títulos cortos (h1, h2); los h3 y h4 son
   nombres de tarjetas y pasos, en Atkinson negrita. */
h3,
h4 {
  font-family: var(--font-body);
  line-height: 1.2;
}

p {
  text-wrap: pretty;
}

/* Solo hay negrita 600: evita que el navegador pida 700 y la invente. */
strong,
b {
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

[hidden] {
  display: none !important;
}

.sr-solo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}