/* Bosques ARD — Hoja compartida de la web (Manual de Marca v1.0, docs/Manual_Marca_BosquesARD/v1.0).
   La usan la portada (landing/ard/) y, para el acceso, ard-acceso.css. Los colores salen de ../tokens-v1.css
   (GENERADO por el build del manual): aquí no se inventa color. Se sirve desde /landing/ard/marca/web/. */

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fuentes/playfair-var.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('../fuentes/playfair-italic-var.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fuentes/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fuentes/lato-700.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fuentes/lato-900.woff2') format('woff2'); }

:root {
  --ard-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ard-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ard-r-pill: 999px;
  --ard-r-card: 16px;
  --ard-ease: cubic-bezier(.2, .7, .2, 1);
  --ard-borde-oscuro: rgba(250, 250, 246, .1);
  --ard-borde-oscuro-fuerte: rgba(250, 250, 246, .22);
}

.ard-saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ard-retono); color: var(--ard-noche); padding: .6rem 1rem; border-radius: .5rem; font-weight: 700; text-decoration: none; }
.ard-saltar:focus { top: 1rem; }

.ard-marca { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.ard-marca img { display: block; height: 36px; width: auto; }

.ard-eyebrow { font-family: var(--ard-sans); font-size: .76rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--ard-retono); margin: 0 0 .8rem; }

.ard-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px;
  padding: .7rem 1.4rem; border-radius: var(--ard-r-pill); font-family: var(--ard-sans); font-weight: 700; font-size: .98rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ard-ease), box-shadow .2s var(--ard-ease), background-color .2s;
}
/* Botón principal: Pino con texto blanco, 6,32 : 1 (manual, cap. 04). */
.ard-btn-marca { background: var(--ard-pino); color: #fff; }
.ard-btn-marca:hover { background: var(--ard-pino-hondo); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(185, 215, 126, .18); color: #fff; }
.ard-btn-borde { background: transparent; color: var(--ard-humo); border-color: var(--ard-borde-oscuro-fuerte); }
.ard-btn-borde:hover { border-color: var(--ard-retono); color: #fff; }
.ard-btn:focus-visible { outline: 2px solid var(--ard-retono); outline-offset: 3px; }

/* Servicios: color + palabra en blanco (cap. 04). */
.ard-servicio { display: inline-flex; align-items: center; padding: .2rem .8rem; border-radius: var(--ard-r-pill); font-size: .8rem; font-weight: 700; color: #fff; }
.ard-servicio-cafeteria { background: var(--ard-cafeteria); } .ard-servicio-libreria { background: var(--ard-libreria); } .ard-servicio-uniformes { background: var(--ard-uniformes); }

.ard-pie { border-top: 1px solid var(--ard-borde-oscuro); padding: 3rem 1rem 2.5rem; color: var(--ard-liquen); font-size: .92rem; background: var(--ard-noche); }
.ard-pie-in { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: flex-start; }
.ard-pie nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.ard-pie a { color: var(--ard-humo); text-decoration: none; }
.ard-pie a:hover { color: var(--ard-savia); }
.ard-pie p { margin: .6rem 0 0; max-width: 34rem; line-height: 1.55; }
.ard-pie p a { text-decoration: underline; text-underline-offset: 3px; }
.ard-pie .lema { font-family: var(--ard-serif); font-style: italic; color: var(--ard-savia); font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
  .ard-btn, .ard-btn:hover { transition: none; transform: none; }
}