/* Teide Travel Escolar · itinerario y fotos
   Se apoya en las variables de marca.css. Cárgalo DESPUÉS de marca.css. */

/* ── Portada del programa ─────────────────────────────────────────────── */
.portada {
  display: block;
  width: 100%;
  height: clamp(180px, 34vw, 380px);
  object-fit: cover;
  border-radius: var(--radio-s);
  margin-bottom: var(--hueco);
  background: var(--cielo-tenue);
}

/* ── Itinerario ───────────────────────────────────────────────────────── */
.itin { list-style: none; margin: 0; padding: 0; }

.itin-dia {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--borde);
}
.itin-dia:first-child { border-top: 0; padding-top: .25rem; }

.itin-num {
  font-family: var(--tipo-titulo);
  font-size: var(--t--1);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--basalto-alto);
  padding-top: .2rem;
}

.itin-cuerpo h3 {
  font-size: var(--t-1);
  margin: 0 0 .35rem;
}
.itin-cuerpo p { margin: 0 0 .6rem; }

.itin-datos { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }

/* ── Tiras de fotos ───────────────────────────────────────────────────── */
.itin-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .55rem;
  margin-top: .75rem;
}
.itin-fotos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio-s);
  background: var(--cielo-tenue);
  transition: transform .18s ease;
}
.itin-fotos a:hover img,
.itin-fotos a:focus-visible img { transform: scale(1.02); }

.itin-fotos--galeria { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

@media (max-width: 640px) {
  .itin-dia { grid-template-columns: 1fr; gap: .35rem; }
  .itin-num { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .itin-fotos img { transition: none; }
  .itin-fotos a:hover img { transform: none; }
}

/* ── Panel: edición del itinerario ────────────────────────────────────── */
.dia-editor {
  border-top: 1px solid var(--borde);
  padding-top: 1.1rem;
  margin-top: 1.1rem;
}
.dia-editor:first-of-type { border-top: 0; }
.dia-nuevo {
  background: var(--papel);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-s);
  padding: 1.1rem;
}

.rejilla-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .6rem;
  margin: .8rem 0;
}
.foto-mini { margin: 0; }
.foto-mini img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio-s);
  border: 2px solid transparent;
}
.foto-mini.es-portada img { border-color: var(--sol); }
.foto-mini figcaption {
  display: flex;
  gap: .75rem;
  justify-content: center;
  font-size: var(--t--2);
  padding-top: .3rem;
}

.formulario-foto {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: .6rem;
}
.formulario-foto input[type="text"] { flex: 1 1 14rem; }