/* ============================================================
   Consistencia visual sitio-completo (tipografía, botón primario,
   enlaces, contenedor). Se carga sola vía
   AssetManager::defineFolder('style', '/assets/css/'), igual que
   el resto de assets/css/*.css.

   IMPORTANTE sobre el orden de carga: AssetManager encola los CSS
   de esta carpeta por orden alfabético, así que
   "consistencia-global.css" carga ANTES que "contacto.css",
   "destinos.css", etc. Por eso este archivo solo usa selectores de
   baja especificidad (para no competir por especificidad igual con
   reglas más concretas que cargan después y ganarían igualmente) o
   clases nuevas que no existen en ningún otro archivo (para no
   arriesgar un conflicto de cascada silencioso).
   ============================================================ */

:root {
    --espaciado-seccion: 30px;
    --ancho-contenido: 1200px;
    --radius-boton: 8px;
}

/* -- Tipografía: hoy solo algunos títulos usan explícitamente
      var(--font-serif) por página; el resto hereda el sans-serif
      del body por defecto. Esta regla de baja especificidad rellena
      ese hueco sin pisar los overrides ya existentes más concretos
      (ej. .heroTercero h2), que siguen ganando por especificidad. -- */
h1, h2, h3 {
    font-family: var(--font-serif);
}

/* -- Enlaces dentro de contenido de texto largo (FAQs, ficha de
      destino): color y hover consistentes, coherente con --primero
      ya definido en :root (init.css) pero sin usar hasta ahora. -- */
.informacionDestino a,
.faq-answer a {
    color: var(--primero, #1a7b8b);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.informacionDestino a:hover,
.faq-answer a:hover {
    opacity: 0.8;
}

/* -- Botón primario único: mismo padding/radius/color/hover.
      No sustituye los botones ya existentes (button.borde.principal,
      .botonHeader, .dataSubir) para no arriesgar su posicionamiento
      específico; es la referencia para nuevos CTAs y ya se aplica al
      envío del formulario de contacto. -- */
.btn-primario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: var(--radius-boton);
    background: var(--segundo, #2a4a3c);
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
    border: none;
}

.btn-primario:hover {
    opacity: 0.88;
}

/* -- Contenedor de ancho máximo compartido. Hoy cada página limita
      el ancho a su manera (o no lo limita); esta clase queda
      disponible para adoptarla de forma incremental sin tener que
      reescribir el layout específico de cada página de golpe. -- */
.contenedor {
    width: 100%;
    max-width: var(--ancho-contenido);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .contenedor {
        padding-left: 16px;
        padding-right: 16px;
    }
}