/* TYNDYN — hoja de estilos de las páginas públicas de contenido
   (portada, servicios, descargas, ayuda, legal).

   No modifica styles.css (esqueleto/agencias/admin) ni site.css: añade sus
   propias clases con prefijo "pub-" para no colisionar con nada existente.

   Paleta y tipografía: ver Inspiration/What Our Customers Say.jpg y
   web/TAREA-contenido-publico.md. Sin fotos reales todavía: los bloques
   .pub-imagen son marcadores de posición. */

:root{
  --papel:    #ffffff;
  --hueso:    #f7f3ec;
  --tinta:    #141414;
  --gris:     #43413d;
  --gris-cl:  #8a8577;
  --ambar:    #e0a233;
  --ambar-lk: #a9741a;
  --linea:    #e4dcce;
}

.pub{ font-family:"IBM Plex Sans",Arial,system-ui,sans-serif; color:var(--gris); }
.pub h1,.pub h2,.pub h3,.pub-cta,.pub-boton{ font-family:"Archivo",Arial,system-ui,sans-serif; }

/* Palabras largas (alemán sobre todo) no deben desbordar columnas estrechas
   ni solaparse con lo de al lado — visto en la banda "Cómo funciona"/"So
   funktioniert es" con ?lang=de. Se aplica a todos los títulos/etiquetas
   cortas de esta hoja de estilos, no solo a .pub-titulo. */
.pub h1,.pub h2,.pub h3,.pub-eyebrow,.pub-titulo,.pub-subtitulo{
  overflow-wrap:break-word; hyphens:auto;
}

.pub-contenedor{ max-width:1120px; margin:0 auto; padding:0 1.5rem; }

.pub-seccion{ padding:4rem 0; }
.pub-seccion--hueso{ background:var(--hueso); }
.pub-seccion--estrecha{ padding:2.5rem 0; }

/* Encabezado de página (breadcrumb ya viene de styles.css / .page;
   estas páginas usan su propio bloque de portada) */
.pub-portada{ padding:3.5rem 0 3rem; }

/* Textos */
.pub-eyebrow{
  font-weight:700; font-size:.8rem; color:var(--tinta); margin:0 0 .5rem;
}
.pub-titulo{
  font-weight:900; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(1.6rem,3.2vw,2.5rem); line-height:1.14; color:var(--tinta);
  margin:0 0 .6rem;
}
.pub-titulo--banda{ color:#fff; }
.pub-subtitulo{
  font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  font-size:.82rem; color:var(--ambar-lk); margin:0 0 1.1rem;
}
.pub-parrafo{ text-align:justify; line-height:1.7; margin:0 0 1.3rem; max-width:56ch; }
.pub-parrafo:last-child{ margin-bottom:0; }
.pub-parrafo--ancha{ max-width:none; }

/* Texto legal (Términos, Privacidad, Cookies): párrafos justificados, ancho
   de lectura cómodo, con apartados numerados (h2) y subapartados (h3). */
.pub-legal-texto{ max-width:68ch; }
.pub-legal-texto p,
.pub-legal-texto ul{ text-align:justify; line-height:1.7; margin:0 0 1.2rem; }
.pub-legal-texto p:last-child{ margin-bottom:0; }
.pub-legal-texto ul{ padding-left:1.3rem; }
.pub-legal-texto li{ margin:0 0 .4rem; }
.pub-legal-texto h2{
  font-size:1.05rem; font-weight:800; color:var(--tinta); text-transform:uppercase;
  letter-spacing:.02em; margin:2.2rem 0 .9rem;
}
.pub-legal-texto h2:first-child{ margin-top:0; }
.pub-legal-texto h3{
  font-size:.9rem; font-weight:700; color:var(--ambar-lk); margin:1.3rem 0 .6rem;
}
.pub-tabla-scroll{ overflow-x:auto; margin:0 0 1.2rem; }
.pub-legal-texto table{ width:100%; min-width:480px; border-collapse:collapse; font-size:.82rem; margin:0; }
.pub-legal-texto th,.pub-legal-texto td{
  border:1px solid var(--linea); padding:.5rem .6rem; text-align:left; vertical-align:top;
}
.pub-legal-texto th{ background:var(--hueso); }

.pub-cta{
  display:inline-block; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:.82rem; color:var(--ambar-lk);
  text-decoration:none; border-bottom:2px solid var(--ambar); padding-bottom:.15rem;
}
.pub-cta:hover{ color:var(--tinta); border-color:var(--tinta); }
.pub-cta--desactivada{
  color:var(--gris-cl,#8a8a8a); border-color:var(--linea,#d8d2c6);
  cursor:not-allowed; pointer-events:none;
}

/* Fila imagen/texto, alterna con --inversa */
.pub-fila{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; }
/* min-width:0 evita que una <img> con tamaño intrínseco grande fuerce el
   ensanchamiento de su columna de grid (y con ello, scroll horizontal). */
.pub-fila-imagen,.pub-fila-texto{ min-width:0; }
.pub-fila--inversa .pub-fila-imagen{ order:2; }
.pub-fila--inversa .pub-fila-texto{ order:1; }
@media (max-width:760px){
  .pub-fila{ grid-template-columns:1fr; }
  .pub-fila--inversa .pub-fila-imagen,.pub-fila--inversa .pub-fila-texto{ order:initial; }
}

/* Foto (o, si no hay imagen real todavía, marcador de posición) */
.pub-imagen{
  aspect-ratio:4/3; border-radius:4px; overflow:hidden;
  background:linear-gradient(135deg,var(--linea),var(--hueso));
  display:flex; align-items:center; justify-content:center; color:var(--gris-cl);
}
.pub-imagen span{
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase;
}
.pub-imagen img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Banda oscura ("Cómo funciona" y similares) */
.pub-banda{ background:var(--tinta); color:#e9e4d8; padding:4rem 0; }
.pub-banda-grid{ display:grid; grid-template-columns:minmax(0,260px) 1fr; gap:2.5rem 3rem; align-items:start; }
.pub-pasos{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem 3rem; }
.pub-paso h3{
  font-weight:800; text-transform:uppercase; font-size:.82rem; letter-spacing:.03em;
  color:var(--ambar); margin:0 0 .4rem;
}
.pub-paso p{ margin:0; font-size:.9rem; line-height:1.6; color:#cfc9ba; }
@media (max-width:680px){
  .pub-banda-grid{ grid-template-columns:1fr; }
  .pub-pasos{ grid-template-columns:1fr; }
}

/* Cuadrícula de 3 con foto + pie (destinos, ejemplos) */
.pub-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.pub-grid3 > *{ min-width:0; }
.pub-grid3 h3{
  font-weight:800; text-transform:uppercase; font-size:.82rem; letter-spacing:.03em;
  color:var(--ambar-lk); margin:.9rem 0 .3rem;
}
.pub-grid3 p{ margin:0; font-size:.88rem; line-height:1.6; }
@media (max-width:820px){ .pub-grid3{ grid-template-columns:1fr; } }

/* Beneficios sin foto (3 columnas) */
.pub-beneficios{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.pub-beneficios h3{
  font-weight:800; text-transform:uppercase; font-size:.8rem; letter-spacing:.03em;
  color:var(--ambar-lk); margin:0 0 .4rem;
}
.pub-beneficios p{ margin:0; font-size:.88rem; line-height:1.6; }
@media (max-width:820px){ .pub-beneficios{ grid-template-columns:1fr; } }

/* Tarjetas de acceso (portada, planes, enlaces) */
.pub-tarjetas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem; }
.pub-tarjeta{
  border:1px solid var(--linea); border-radius:6px; padding:1.6rem;
  display:flex; flex-direction:column; gap:.7rem;
}
.pub-tarjeta h3{
  font-weight:800; text-transform:uppercase; font-size:1rem; letter-spacing:.02em;
  color:var(--tinta); margin:0;
}
.pub-tarjeta p{ margin:0; font-size:.88rem; line-height:1.6; flex:1; }

/* Tarjeta de grupo (con foto) — servicios/grupos-en-marcha */
.pub-grupo{ border:1px solid var(--linea); border-radius:6px; overflow:hidden; }
.pub-grupo .pub-imagen{ aspect-ratio:16/10; border-radius:0; }
.pub-grupo-cuerpo{ padding:1.1rem 1.2rem 1.3rem; }
.pub-grupo-cuerpo h3{
  font-weight:800; text-transform:uppercase; font-size:.95rem; margin:0 0 .4rem; color:var(--tinta);
}
.pub-grupo-datos{
  display:flex; flex-wrap:wrap; gap:.35rem 1rem; font-size:.76rem; color:var(--gris);
  font-family:"IBM Plex Mono",monospace; margin:0 0 .6rem;
}

/* Aviso (placeholder, datos de ejemplo, texto legal pendiente) */
.pub-aviso{
  font-size:.84rem; color:var(--gris); background:var(--hueso);
  border:1px solid var(--linea); border-radius:6px; padding:1rem 1.2rem;
  text-align:justify;
}

/* Formularios (solo maquetación: sin fetch, sin envío) */
.pub-form{ max-width:560px; display:flex; flex-direction:column; gap:1.1rem; }
.pub-campo{ display:flex; flex-direction:column; gap:.35rem; }
.pub-campo label{
  font-weight:700; text-transform:uppercase; font-size:.72rem; letter-spacing:.07em; color:var(--tinta);
}
.pub-campo input,.pub-campo select,.pub-campo textarea{
  font-family:"IBM Plex Sans",sans-serif; font-size:.92rem; padding:.6rem .7rem;
  border:1px solid var(--linea); border-radius:4px; background:var(--papel); color:var(--tinta);
}
.pub-campo textarea{ resize:vertical; min-height:8rem; }
.pub-boton{
  align-self:flex-start; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  font-size:.82rem; background:var(--ambar); color:var(--tinta); border:none; border-radius:4px;
  padding:.75rem 1.6rem; cursor:pointer;
}
.pub-boton:hover{ background:var(--ambar-lk); color:#fff; }

/* FAQ: acordeón con icono +/- y transición al abrir */
.pub-faq{ border-top:1px solid var(--linea); }
.pub-faq details{ border-bottom:1px solid var(--linea); }
.pub-faq summary{
  list-style:none; cursor:pointer; font-weight:800; font-size:.95rem; color:var(--tinta);
  padding:1.15rem 2.2rem 1.15rem 0; position:relative; line-height:1.4;
}
.pub-faq summary::-webkit-details-marker{ display:none; }
.pub-faq summary::after{
  content:"+"; position:absolute; right:.1rem; top:50%; transform:translateY(-50%);
  font-family:"Archivo",sans-serif; font-size:1.4rem; font-weight:700; color:var(--ambar-lk);
  line-height:1; transition:transform .2s ease;
}
.pub-faq details[open] summary::after{ transform:translateY(-50%) rotate(135deg); }
.pub-faq details[open] summary{ color:var(--ambar-lk); }
.pub-faq p{ margin:0 0 1.25rem; padding-right:2.2rem; line-height:1.65; }

/* Variante destacada de .pub-aviso, con filete ámbar a la izquierda (se usa en
   /agencias/planes para los importes pendientes). Es un modificador: hay que
   ponerla junto a la clase base -> class="pub-aviso pub-aviso--destacado". */
.pub-aviso--destacado{
  border-left:3px solid var(--ambar); margin:1.5rem 0;
  font-size:.9rem; line-height:1.6; text-align:left;
}
.pub-precio{
  font-family:"Archivo",Arial,sans-serif; font-weight:900; font-size:1.6rem;
  color:var(--tinta); margin:.2rem 0 .1rem;
}
.pub-precio small{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ambar-lk); }

/* Pasos numerados fuera de la banda oscura (ayuda con la descarga) */
.pub-pasos-lista{ list-style:none; margin:0; padding:0; counter-reset:paso; display:flex; flex-direction:column; gap:1.2rem; }
.pub-pasos-lista li{ display:flex; gap:1rem; align-items:flex-start; counter-increment:paso; }
.pub-pasos-lista li::before{
  content:counter(paso); flex:none; width:1.8rem; height:1.8rem; border-radius:50%;
  background:var(--tinta); color:#fff; font-weight:800; font-size:.8rem;
  display:flex; align-items:center; justify-content:center; font-family:"Archivo",sans-serif;
}

/* ── Catálogo público de viajes (viajes/grupo, viajes/individual, fichas, reserva) ── */
.cat-filtros{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; margin-bottom:2rem;
}
.cat-filtros .campo{ display:flex; flex-direction:column; gap:.3rem; }
.cat-filtros label{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:var(--gris-cl); font-family:"IBM Plex Mono",monospace;
}
.cat-filtros input{
  font:inherit; padding:.5rem .6rem; border:1px solid var(--linea); border-radius:4px;
  background:#fff; color:var(--gris); min-width:140px;
}
.cat-filtros input:focus{ outline:2px solid var(--ambar); outline-offset:1px; }
.cat-btn{
  font-family:"Archivo",Arial,sans-serif; font-weight:800; font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  padding:.6rem 1.3rem; border:2px solid var(--tinta); background:var(--tinta);
  color:#fff; border-radius:4px;
}
.cat-btn:hover{ background:var(--ambar-lk); border-color:var(--ambar-lk); }
.cat-precio{
  font-family:"IBM Plex Mono",monospace; font-weight:500; color:var(--ambar-lk); font-size:.8rem;
}

/* paginación del catálogo (paginacion.js) */
.paginacion{
  display:flex; align-items:center; justify-content:center; gap:1rem; margin:2rem 0 0;
}
.paginacion-btn{
  font-family:"Archivo",Arial,sans-serif; font-weight:800; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  padding:.5rem 1rem; border:1px solid var(--linea); border-radius:4px;
  background:var(--papel); color:var(--tinta);
}
.paginacion-btn:hover:not(:disabled){ border-color:var(--ambar); color:var(--ambar-lk); }
.paginacion-btn:disabled{ opacity:.4; cursor:default; }
.paginacion-info{
  font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--gris-cl);
}

/* Rejilla del catálogo: tarjetas de tamaño fijo que NO se estiran aunque
   haya un solo resultado (auto-fill, no auto-fit) y alineadas a la izquierda. */
.pub-tarjetas{
  grid-template-columns:repeat(auto-fill,minmax(240px,280px));
  justify-content:start;
}

/* la tarjeta pub-grupo se usa también aquí; como <a> hay que quitar el subrayado */
a.pub-grupo{
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:border-color .15s ease;
}
a.pub-grupo:hover{ border-color:var(--ambar); }

/* Imagen de la tarjeta: altura fija, recortada; sin estirones verticales. */
.pub-grupo .pub-imagen{
  aspect-ratio:auto; height:170px; flex:0 0 auto;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.pub-grupo .pub-imagen span{
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.2em; color:var(--gris-cl);
}

/* Ficha de viaje */
.ficha-galeria{ display:flex; flex-wrap:wrap; gap:10px; margin:1.5rem 0; }
.ficha-galeria img{ width:230px; height:155px; object-fit:cover; border:1px solid var(--linea); border-radius:4px; }
.ficha-acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin:1.6rem 0; }

/* Avisos de estado en formularios públicos (ayuda/contacto, ayuda/formulario, reserva) */
.alert{ font-size:.86rem; border-radius:6px; padding:.85rem 1.1rem; margin:0 0 1.2rem; }
.alert[hidden]{ display:none; }
.alert-error{ background:#fbeae5; border:1px solid #e0a48c; color:#8a3d21; }
.alert-ok{ background:#eef6ec; border:1px solid #9cc79a; color:#356b32; }
.pub-form .req{ color:var(--ambar-lk); }

/* Avisos en la ficha de viaje (condiciones variables / compromiso de la agencia) */
.ficha-aviso{
  font-size:.85rem; line-height:1.55; margin:1.4rem 0 0; padding:.8rem 1rem;
  border-left:3px solid var(--linea); color:var(--gris); background:var(--hueso);
}
.ficha-aviso--ok{ border-left-color:#9cc79a; color:#356b32; background:#eef6ec; }

/* "plazas disponibles" que se actualiza en vivo */
.f-plazas-flash{ background:#fff6e0; transition:background .4s ease; border-radius:3px; }

/* honeypot anti-spam (oculto para personas, visible para bots) */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ── Móvil: repaso a 375px — menos aire, sin desbordes horizontales ── */
@media (max-width:480px){
  .pub-contenedor{ padding:0 1.15rem; }
  .pub-seccion{ padding:2.75rem 0; }
  .pub-seccion--estrecha{ padding:2rem 0; }
  .pub-portada{ padding:2.5rem 0 2rem; }
  .pub-banda{ padding:2.75rem 0; }
  .pub-titulo{ font-size:1.55rem; }
  .pub-fila{ gap:1.5rem; }
  .pub-tarjeta{ padding:1.25rem; }
  .ficha-galeria img{ width:100%; max-width:280px; }
}