/* ==========================================================================
   app.css - Variables de diseno, reset y tipografia base
   GlaciarCMS - publish/css/app.css
   ========================================================================== */

:root {
  /* Colores de marca */
  --c-navy:      #0F2747;
  --c-navy-deep: #132D4D;
  --c-primary:   #1B5280;
  --c-accent:    #FF8D33;
  --c-ice:       #48C3EB;
  --c-urgent:    #F8451C;
  --c-whatsapp:  #25D366;

  /* Fondos y texto */
  --c-bg:        #FAFAF7;
  --c-bg-alt:    #F1EFE9;
  --c-surface:   #FFFFFF;
  --c-cream:     #F5F1E8;
  --c-text:      #0F2747;
  --c-muted:     #4A5660;
  --c-border:    #E5E1D6;

  /* Tipografias */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-title:   'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Medidas */
  --nav-h:        100px;
  --marquee-h:    42px;
  --pad-x:        56px;
  --radius:       8px;
  --radius-sm:    6px;
  --max-w:        1240px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

html,
body { margin: 0; padding: 0; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

a { color: inherit; }

h1, h2, h3, h4, p, ul, figure { margin: 0; }

ul { list-style: none; padding: 0; }

/* Foco visible por accesibilidad (navegacion con teclado) */
:focus-visible {
  outline: 2px solid var(--c-ice);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Tipografia compartida entre secciones
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  margin-bottom: 24px;
}

.eyebrow--light { color: rgba(245, 241, 232, .7); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 400;
}

.section-title--light { color: var(--c-cream); }

/* --------------------------------------------------------------------------
   Mensaje de error de carga
   -------------------------------------------------------------------------- */

.load-error {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  max-width: 90vw;
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  background: var(--c-urgent);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
}

.load-error[hidden] { display: none; }