/* =========================
   FUENTES Y VARIABLES GLOBALES
========================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  /* Colores */
  --color-primary: #B83227;
  --color-secondary: #F2A900;
  --color-dark: #1A1A1A;
  --color-light: #F5E6D3;
  --color-accent: #5C7A3A;

  /* Tipografía */
  --font-title: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Tamaños y efectos */
  --nav-height: 70px;
  --navbar-height: 80px;
  --container-width: 1200px;
  --transition: all 0.3s ease;
}

/* =========================
   RESET BÁSICO
========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  background-color: #ffffff;
  color: var(--color-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
  padding-top: var(--navbar-height);
}

@media (max-width: 768px) {
  :root {
    --navbar-height: 70px;
  }
}

/* Evita que seccions principals desbordin l’amplada del viewport */
main {
  max-width: 100%;
  overflow-x: hidden;
}

video,
iframe {
  max-width: 100%;
}

ion-icon {
  display: block;
  flex-shrink: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  border: none;
  background: none;
}

/* Estado por defecto para bloques de idioma si JS tarda en cargar */
.lang {
  display: none;
}

.lang.active {
  display: block;
}

.form-feedback {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  display: none;
}

.form-feedback.success {
  background-color: rgba(29, 158, 117, 0.12);
  color: #0F6E56;
  border: 1px solid rgba(29, 158, 117, 0.3);
  display: block;
}

.form-feedback.error {
  background-color: rgba(226, 75, 74, 0.1);
  color: #A32D2D;
  border: 1px solid rgba(226, 75, 74, 0.25);
  display: block;
}