/* ============================================================
   BTT 2026 — CSS BASE
   Variables, reset, tipografía, botones y utilidades.
   Editar solo aquí los cambios globales de marca.
   ============================================================ */

:root {
  /* Paleta institucional */
  --bordo: #641F31;
  --bordo-oscuro: #201719;
  --dorado: #C8A66A;
  --dorado-claro: #E4C78F;
  --marfil: #FFFAF5;
  --beige: #F6EEE8;
  --gris: #6D6262;

  /* Derivados */
  --bordo-700: #4A1624;
  --negro-bordo: #160F11;
  --linea: rgba(100, 31, 49, .14);
  --dorado-linea: rgba(200, 166, 106, .35);

  /* Tipografías */
  --fuente-titulos: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fuente-texto: 'Inter', 'Montserrat', Arial, sans-serif;

  /* Tipografía del logo oficial (Playfair Display, estilo Didone/Bodoni).
     Se usa en el header (marca) y en la portada. */
  --fuente-logo: 'Playfair Display', 'Bodoni MT', Georgia, serif;

  /* [REVERTIR TIPOGRAFÍA] Para volver a la tipografía anterior en TODO el
     sitio, descomentar la línea siguiente y comentar la de --fuente-titulos:
  --fuente-titulos: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
     Para volver atrás solo en el logo/header, buscar --fuente-logo en
     css/00-header.css y cambiar su valor por 'Cormorant Garamond'. */

  /* Layout */
  --ancho-max: 1180px;
  --radio: 10px;
  --sombra: 0 12px 34px rgba(32, 23, 25, .12);
  --transicion: .3s ease;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bordo-oscuro);
  background: var(--marfil);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bordo); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--bordo-700); }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Accesibilidad ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--dorado); color: var(--bordo-oscuro);
  padding: .7rem 1.2rem; z-index: 2000; font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  line-height: 1.15;
  color: var(--bordo-oscuro);
}

h2.titulo-seccion {
  font-size: clamp(2rem, 4.5vw, 3rem);
  text-align: center;
  margin-bottom: .6rem;
}
h2.titulo-seccion::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  background: var(--dorado);
  margin: 1rem auto 0;
}

.subtitulo-seccion {
  text-align: center;
  color: var(--gris);
  max-width: 640px;
  margin: 0 auto 3rem;
  font-size: 1.02rem;
}

/* Sobre fondos oscuros */
.fondo-oscuro h2.titulo-seccion,
.fondo-oscuro h3 { color: var(--marfil); }
.fondo-oscuro .subtitulo-seccion { color: var(--dorado-claro); }
.fondo-oscuro p { color: rgba(255, 250, 245, .82); }

/* ---------- Layout de sección ---------- */
.seccion { padding: clamp(4rem, 8vw, 7rem) 1.25rem; }
.contenedor { max-width: var(--ancho-max); margin: 0 auto; }
.fondo-oscuro { background: var(--bordo-oscuro); }
.fondo-beige { background: var(--beige); }
.fondo-bordo { background: linear-gradient(160deg, var(--bordo) 0%, var(--bordo-700) 100%); }

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem 2.2rem;
  border-radius: var(--radio);
  border: 2px solid transparent;
  transition: all var(--transicion);
  cursor: pointer;
}
.btn-dorado {
  background: var(--dorado);
  color: var(--bordo-oscuro);
  border-color: var(--dorado);
}
.btn-dorado:hover { background: var(--dorado-claro); border-color: var(--dorado-claro); color: var(--bordo-oscuro); }
.btn-bordo {
  background: var(--bordo);
  color: var(--marfil);
  border-color: var(--bordo);
}
.btn-bordo:hover { background: var(--bordo-700); color: var(--marfil); }
.btn-contorno {
  background: transparent;
  color: var(--marfil);
  border-color: var(--dorado);
}
.btn-contorno:hover { background: var(--dorado); color: var(--bordo-oscuro); }
.btn-contorno-oscuro {
  background: transparent;
  color: var(--bordo);
  border-color: var(--bordo);
}
.btn-contorno-oscuro:hover { background: var(--bordo); color: var(--marfil); }
.btn-bloque { display: block; width: 100%; }

/* ---------- Etiqueta / chip dorada ---------- */
.chip {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bordo);
  border: 1px solid var(--dorado);
  padding: .35rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
  background: rgba(200, 166, 106, .08);
}
.fondo-oscuro .chip { color: var(--dorado-claro); }

/* ---------- Placeholder de fotografías ---------- */
/* REEMPLAZAR estos bloques por <img src="assets/img/..."> con fotos reales autorizadas */
.foto-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radio);
  background:
    linear-gradient(160deg, rgba(32,23,25,.25), rgba(100,31,49,.45)),
    linear-gradient(45deg, #3a2b30, #201719);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dorado-claro);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  border: 1px solid var(--dorado-linea);
}

/* ---------- Animación de aparición ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}