@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Neona";
  src: url("../fonts/neona-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* Marca MP27. Blanco sobre --marca solo da 3,1:1: vale para letra grande. Por eso la letra blanca
   pequeña (pie, menú) va sobre --marca-oscuro, y las tarjetas, sobre --marca, llevan letra --tinta
   (5,8:1). test/marca.test.mjs comprueba los contrastes.
   Derivados escritos a mano (no hay color-mix() en iOS 15): rgba(243, 101, 65, …) y #f6826a de la
   portada, rgba(169, 52, 26, …) de las actividades, #4a1608 del botón abierto y rgba(43, 15, 6, …)
   (--tinta) del borde de las opciones. Si cambia la marca, búscalos también. */
:root {
  --marca: #f36541;
  --marca-oscuro: #c9431f;
  --marca-hondo: #a9341a;
  --marca-fondo: #fdede8;
  --acento: #fcc8bc;
  --tinta: #2b0f06;
  --texto: #3a3a3a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--marca-oscuro); }

h1, h2, h3 {
  font-family: "Neona", "Poppins", sans-serif;
  font-weight: 700;
  color: var(--marca);
  line-height: 1.2;
  margin: 0 0 .5em;
}

.contenedor { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.estrecho { max-width: 760px; }
.centro { text-align: center; }

/* Cabecera sobre la foto de portada */
.cabecera {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  padding: 18px 0;
}
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cabecera .logo img { height: 52px; width: auto; }
.menu { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--acento); }
/* [aria-current] también: si no, la regla de "página actual" le pone el texto melocotón sobre blanco */
.menu .boton-menu, .menu .boton-menu[aria-current="page"] {
  background: #fff;
  color: var(--marca-oscuro);
  padding: 6px 16px;
  border-radius: 20px;
}
/* --marca-hondo y no --marca-oscuro: en el menú del móvil ese es el fondo y la píldora desaparecería */
.menu .boton-menu:hover { background: var(--marca-hondo); color: #fff; }

.abrir-menu {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 820px) {
  .abrir-menu { display: block; }
  .menu {
    display: none;
    position: absolute;
    top: 80px; right: 16px; left: 16px;
    flex-direction: column;
    gap: 4px;
    background: var(--marca-oscuro);
    padding: 16px;
    border-radius: 8px;
  }
  .menu.abierto { display: flex; }
  .menu li { width: 100%; text-align: center; }
  .menu a { display: block; padding: 8px; }
  /* Aquí el fondo es --marca-oscuro y el melocotón no se lee: la página actual va subrayada */
  .menu a:not(.boton-menu):hover, .menu a:not(.boton-menu)[aria-current="page"] {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 5px;
  }
}

/* Banda de foto en blanco y negro bajo la cabecera */
.portada {
  position: relative;
  height: 300px;
  background-size: cover;
  background-position: center 35%;
  filter: grayscale(1);
}
.portada::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }

/* Home: foto a pantalla completa con el logo y dos botones */
.portada-home {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 40px 16px;
  background: #1a1410 url("../img/hero-home.jpg") center / cover no-repeat;
}
.portada-home::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.portada-home > * { position: relative; }
.portada-home .logo-grande {
  width: min(360px, 80vw);
  filter: drop-shadow(0 0 18px rgba(243, 101, 65, .55));
}

.botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.boton {
  display: inline-block;
  min-width: 170px;
  padding: 12px 26px;
  border-radius: 6px;
  border: 2px solid var(--marca);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
/* Texto oscuro y no blanco: sobre --marca el blanco no llega al contraste mínimo a 15px */
.boton-lleno { background: var(--marca); color: #0a0a0a; box-shadow: 0 0 22px rgba(243, 101, 65, .55); }
.boton-lleno:hover { background: #f6826a; }
.boton-borde { background: transparent; color: var(--acento); }
.boton-borde:hover { background: rgba(243, 101, 65, .15); }
.boton-marca { background: var(--marca-oscuro); border-color: var(--marca-oscuro); color: #fff; }
.boton-marca:hover { background: var(--marca-hondo); border-color: var(--marca-hondo); }

.seccion { padding: 70px 0; }
.seccion-marca { background: var(--marca-oscuro); color: #fff; }
.seccion-marca h2 { color: #fff; }
.seccion h2 { font-size: clamp(28px, 4vw, 40px); }
.seccion p { margin: 0 0 1em; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 820px) { .dos-columnas { grid-template-columns: 1fr; gap: 30px; } }

.video { position: relative; padding-top: 56.25%; }
.video iframe, .video-portada { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-portada {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  background: var(--marca-oscuro) center / cover no-repeat;
  background-blend-mode: multiply;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.video-portada small { font-weight: 400; font-size: 12px; }
.video-play {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--marca);
  font-size: 24px;
  padding-left: 4px;
}

.foto-sombra { border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }

.cita { font-style: italic; }

/* Rejilla de actividades: la foto y, al pasar el ratón, su texto */
.actividades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .actividades { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .actividades { grid-template-columns: 1fr; } }
.actividad {
  position: relative;
  aspect-ratio: 9 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: var(--marca-oscuro) center / cover no-repeat;
}
.actividad .reverso {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  background: var(--marca-oscuro);
  color: #fff;
  opacity: 0;
  transition: opacity .3s;
}
.actividad:hover .reverso, .actividad:focus-within .reverso, .actividad:focus .reverso { opacity: 1; }
.actividad h3 { color: #fff; font-family: "Poppins", sans-serif; font-size: 17px; letter-spacing: .04em; }
.actividad p { font-size: 14px; margin: 0; }
@media (hover: none) {
  .actividad .reverso { opacity: 1; top: auto; background: linear-gradient(transparent, rgba(169, 52, 26, .95) 30%); padding-top: 50px; }
}

/* Pueblos agrupados por fechas: un título con el rango y debajo su rejilla de tarjetas */
.grupo-fechas + .grupo-fechas { margin-top: 44px; }
.titulo-grupo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--marca-oscuro);
}
.titulo-grupo::before, .titulo-grupo::after { content: ""; flex: 1; height: 1px; background: var(--acento); }

/* Tarjetas de pueblos */
/* auto-fit + ancho máximo: con pocos resultados del buscador las tarjetas quedan centradas */
.pueblos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 250px)); justify-content: center; gap: 18px; }
/* Fondo del naranja exacto de la marca: la letra va en --tinta, porque la blanca pequeña no se lee */
.pueblo {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 22px 16px 16px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--marca);
  color: var(--tinta);
  text-align: center;
}
.pueblo::before {
  content: "";
  position: absolute;
  top: 40px; left: 8px;
  width: 110px; height: 260px;
  background: url("../img/media-cruz.png") center / contain no-repeat;
  opacity: .14;
  pointer-events: none;
}
.pueblo > * { position: relative; }
.pueblo .fechas { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.pueblo h4 {
  color: var(--tinta);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 6px 0 auto;
}
.pueblo .etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-top: 28px; }
.pueblo .jefes { font-size: 14px; line-height: 1.4; margin: 4px 0 14px; }
/* Sin opacidad: la letra atenuada sobre el naranja baja del contraste mínimo (AA) */
.pueblo .por-confirmar { font-style: italic; }
.pueblo .escribir {
  align-self: center;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  background: #fff;
  color: var(--marca-oscuro);
  border-radius: 20px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.pueblo .escribir:hover, .pueblo .escribir:focus-visible, .pueblo .escribir[aria-expanded="true"] { background: var(--acento); color: #4a1608; }
/* El texto alternativo vacío ("") evita que los lectores de pantalla lean el triángulo */
.pueblo .escribir::after { content: " ▾" / ""; }
.pueblo .escribir[aria-expanded="true"]::after { content: " ▴" / ""; }
/* Opciones de "Escribir": Gmail, Outlook y la app de correo del dispositivo */
.pueblo .opciones { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.pueblo .opciones[hidden] { display: none; }
.pueblo .opciones a {
  display: block;
  padding: 5px 8px;
  border: 1px solid rgba(43, 15, 6, .45);
  border-radius: 8px;
  color: var(--tinta);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.pueblo .opciones a:hover, .pueblo .opciones a:focus-visible { background: #fff; color: var(--marca-oscuro); }
/* En pantallas táctiles (móvil) sí suele haber app de correo: va la primera */
@media (pointer: coarse) { .pueblo .opciones .app { order: -1; } }
.pueblo .aviso-app { margin: 8px 0 0; font-size: 12px; line-height: 1.4; }
.pueblo .aviso-app[hidden] { display: none; }
/* Dirección visible para quien no tenga un programa de correo configurado */
.pueblo .correo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 8px;
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.4;
}
.pueblo .correo span { overflow-wrap: break-word; user-select: all; }
.pueblo .correo button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.pueblo .correo button:hover { text-decoration-thickness: 2px; }
@media (max-width: 520px) {
  /* Dos columnas, y un grupo de un solo pueblo queda centrado en vez de pegado a la izquierda */
  .pueblos { grid-template-columns: repeat(auto-fit, minmax(0, calc(50% - 5px))); gap: 10px; }
  .pueblo { min-height: 0; padding: 18px 10px 14px; }
  .pueblo h4 { font-size: 15px; }
  .titulo-grupo { font-size: 13px; gap: 10px; }
  .pueblo .escribir { align-self: stretch; padding: 7px 8px; border-radius: 10px; font-size: 12.5px; line-height: 1.35; }
}
/* Entrada escalonada al cargar la página, no al buscar */
@media (prefers-reduced-motion: no-preference) {
  .grupos.entrada .pueblo { animation: aparecer .45s ease-out both; animation-delay: calc(min(var(--i), 12) * 35ms); }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } }

.filtros { display: flex; justify-content: center; margin-bottom: 30px; }
.buscador {
  flex: 0 1 340px;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit;
  font-size: 16px; /* con menos, Safari en iPhone hace zoom al tocarlo */
}
.buscador:focus { outline: 2px solid var(--marca); outline-offset: -1px; border-color: transparent; }
[data-rejilla] { scroll-margin-top: 20px; }
[data-rejilla] .aviso-pueblo { max-width: 560px; margin: 0 auto 18px; padding: 10px 14px; border-radius: 6px; background: var(--marca-fondo); color: var(--marca-hondo); font-size: 14px; }
[data-rejilla] .aviso-pruebas { background: #fff4d6; color: #5c4300; }
.sin-resultados { text-align: center; }
.aclaracion { font-size: 13px; color: #666; }

/* Pie */
.pie { background: var(--marca-oscuro); color: #fff; padding: 36px 0; text-align: center; font-size: 14px; }
.pie img { height: 70px; width: auto; margin: 0 auto 14px; }
.pie a { color: #fff; }
.pie .pequeno { font-size: 12px; margin-top: 6px; }