/* ══════════════════════════════════════════════════════════════════════════
   base.css
   Reset, variables de marca, tipografía global y accesibilidad
   Procede de styles.css (secciones 1, 2, 3) del proyecto original.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 1. VARIABLES DE MARCA ═══════════════ */
:root {
  /* ── Fondos, en orden de profundidad ── */
  --color-fondo:         #FAF7F0;  /* blanco hueso: fondo principal */
  --color-fondo-alterno: #F1EADC;  /* beige: secciones alternas */
  --color-superficie:    #FFFFFF;  /* tarjetas sobre hueso */
  --color-superficie-2:  #F8F3E9;  /* bloques sobre beige */

  /* ── Tinta ── */
  --color-tinta:        #2A2622;   /* titulares y énfasis */
  --color-texto:        #3B342C;   /* cuerpo de texto */
  --color-texto-suave:  #5C534A;   /* texto secundario */

  /* ── Dorado, separado por uso (ver reglas arriba) ── */
  --color-acento:        #C9922F;  /* decorativo */
  --color-acento-medio:  #A87420;  /* texto grande */
  --color-acento-oscuro: #8A5E14;  /* texto normal */
  --color-acento-tenue:  #F4E8CE;  /* tintes y fondos suaves */

  /* ── Bordes y sombras cálidas ── */
  --color-borde:        #E4DACA;
  --color-borde-fuerte: #D3C4AC;
  --color-borde-acento: rgba(201, 146, 47, 0.55);
  --sombra-suave:  0 1px 2px rgba(58, 46, 28, 0.05);
  --sombra-media:  0 10px 30px -18px rgba(58, 46, 28, 0.35);
  --sombra-alta:   0 18px 40px -24px rgba(58, 46, 28, 0.45);

  /* ── Canal de WhatsApp ── */
  /* El verde de marca (#25D366) da 1,7:1 con blanco. Este tono llega a 5,3:1
     y el ícono mantiene la lectura del canal. */
  --color-whatsapp:       #0F7C3C;
  --color-whatsapp-hover: #0B6531;

  /* ── Estado de error ── */
  --color-error: #B3261E;          /* 6,6:1 sobre blanco ✔ */

  /* ── Medidas ── */
  --ancho-maximo: 1180px;
  --alto-cabecera: 68px;
  --radio: 14px;
  --area-tactil: 44px;
  --transicion: 200ms ease;
}

/* ═══════════════ 2. BASE Y UTILIDADES PROPIAS ═══════════════ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

body.menu-abierto { overflow: hidden; }

h1, h2, h3, .font-titular {
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  color: var(--color-tinta);
}

img, svg { max-width: 100%; }

::selection {
  background: var(--color-acento-tenue);
  color: var(--color-tinta);
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: max(1rem, env(safe-area-inset-left));
}
@media (min-width: 640px)  { .contenedor { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .contenedor { padding-inline: 2rem; } }

/* ═══════════════ 3. ACCESIBILIDAD ═══════════════ */
.salto-contenido {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--color-tinta);
  color: var(--color-fondo);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radio) var(--radio);
  transition: transform var(--transicion);
}
.salto-contenido:focus { transform: translate(-50%, 0); }

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

/* Foco visible: sobre fondo claro el anillo debe ser oscuro, no dorado claro. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--color-acento-oscuro);
  outline-offset: 3px;
  border-radius: 4px;
}

@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;
  }
}