/* ============================================================
   HOTEL ASTURIAS — PORTAL PARA AGENCIAS
   assets/css/base.css — Fundamentos de Marca y Tipografía
   ============================================================ */

:root {
  /* Paleta Asturias Warm Cream & Sand Beige */
  --crema-bg: #F8F5EE;          /* Fondo general crema marfil cálido */
  --crema-alt: #F2ECE0;         /* Fondo alternado sutil para secciones */
  --beige-card: #ECE3D2;        /* Fondo beige arena cálido para tarjetas */
  --beige-elevado: #E1D6C1;     /* Fondo de tarjetas en hover o elevadas */
  --beige-input: #FAF7F2;       /* Fondo de inputs y campos */
  
  /* Compatibilidad con clases previas */
  --negro: #181513;             /* Carbón oscuro principal */
  --negro-suave: #24201C;
  --negro-card: #ECE3D2;        /* Mapeado directo a beige card */
  --negro-elevado: #E1D6C1;
  
  /* Tipografía y Textos - Máximo Contraste */
  --negro-carbon: #12100E;      /* Negro carbón profundo para títulos */
  --texto-principal: #12100E;
  --texto-muted: #2E2923;       /* Párrafos oscuros de alta legibilidad */
  --texto-faint: #5E564C;       /* Metadatos y notas secundarias */
  --crema: #12100E;             /* Compatibilidad: textos oscuros */
  --crema-muted: #2E2923;
  --crema-faint: #5E564C;
  
  /* Acentos Dorados Bronce Asturias (Gran Contraste sobre Beige y Crema) */
  --dorado: #7E571D;            /* Bronce dorado oscuro con contraste AAA */
  --dorado-hover: #634313;
  --dorado-claro: #7E571D;
  --dorado-oscuro: #543710;
  --dorado-luz: #E8D3AB;
  --dorado-badge: rgba(126, 87, 29, 0.14);
  --borde-dorado: rgba(126, 87, 29, 0.28);
  --borde-dorado-fuerte: rgba(126, 87, 29, 0.48);
  --borde-suave: #C9BBA7;       /* Borde nítido para delimitar tarjetas beige */
  
  /* Tonos Identitarios Valles y Finca */
  --terracotta: #993F1C;
  --rust: #7D2E12;
  --verde-finca: #2E3E22;
  --verde-finca-borde: rgba(46, 62, 34, 0.35);
  --tierra: #7A5B3D;
  --gris-calido: #E4DCCD;
  
  /* Estados */
  --verde-online: #1E7E34;
  --rojo-error: #C92A2A;
  
  /* Tipografías */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Elevación y Efectos */
  --sombra-card: 0 8px 24px rgba(60, 48, 30, 0.07);
  --sombra-flotante: 0 16px 36px rgba(60, 48, 30, 0.12);
  --blur-vidrio: blur(14px);
  --radio-sm: 4px;
  --radio-md: 8px;
  --radio-lg: 14px;
  --radio-pill: 999px;
  
  /* Transiciones */
  --tr-rapida: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --tr-suave: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --tr-lenta: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: var(--crema-bg);
  color: var(--negro-carbon);
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.65;
  background-color: var(--crema-bg);
  color: var(--texto-muted);
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scroll margin top para que el header sticky nunca tape títulos al scrollear */
section[id], .section-pad[id] {
  scroll-margin-top: 135px;
}

@media (max-width: 768px) {
  section[id], .section-pad[id] {
    scroll-margin-top: 155px;
  }
}

/* Selección de texto */
::selection {
  background: var(--dorado-luz);
  color: var(--negro-carbon);
}

/* Scrollbar personalizado Asturias */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--crema-bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(146, 105, 39, 0.28);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dorado);
}

/* Tipografía de Encabezados */
h1, h2, h3, h4, h5, h6, .serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--negro-carbon);
}

p {
  color: var(--texto-muted);
  font-size: 0.95rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tr-rapida);
}

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

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  background: none;
  outline: none;
}

button {
  cursor: pointer;
}

/* Layout Containers */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-pad {
  padding: 100px 0;
}

@media (max-width: 768px) {
  .section-pad {
    padding: 70px 0;
  }
  .container, .container-narrow {
    padding: 0 18px;
  }
}

/* Utilitarios visuales */
.text-center { text-align: center; }
.text-dorado { color: var(--dorado); }
.text-muted { color: var(--crema-muted); }
.text-faint { color: var(--crema-faint); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--dorado);
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1.15;
  margin-bottom: 16px;
  font-weight: 300;
}

.section-title em {
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--dorado-claro);
}

.section-subtitle {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: var(--crema-muted);
  max-width: 680px;
  margin: 0 auto;
  font-weight: 300;
}

.gold-divider {
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dorado), transparent);
  margin: 22px auto;
}

.gold-divider.left {
  margin: 20px 0;
  background: linear-gradient(90deg, var(--dorado), transparent);
}