/*
 * Diario al Día — Viajes
 *
 * Móvil primero. Sin variables del tema a propósito: si mañana cambia el tema,
 * esto sigue viéndose bien. Los colores son los mismos que ya usa la tabla de
 * la tasa del dólar, para que las dos secciones de datos se parezcan.
 *
 * min-height fijo en la tarjeta: la vitrina se pinta desde caché y no debe
 * empujar el contenido de abajo cuando entra. Mediavine mide CLS y lo paga.
 */

/* IMPORTANTE — POR QUE HAY !important EN ESTE ARCHIVO
   ---------------------------------------------------
   El tema (newscore-modern) define reglas como ".entry-content p { margin }"
   y ".entry-content h3 span { display:block }". Tienen mas especificidad que
   las mias, asi que sin !important ganan ellas: aparecen huecos gigantes entre
   lineas, se apila "Miami / -> / Santo Domingo", y la fila de fechas se
   desborda de la tarjeta. El !important esta puesto SOLO en las invariantes de
   layout que el tema no debe tocar (margenes de los hijos, display de los span,
   ancho del contenedor). El color y el tamano de letra se dejan sin el, para
   que hereden bien del sitio. */

.dadv {
  margin: 1.5rem auto;
  max-width: 1040px !important;
}

.dadv__titulo {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}

/* auto-fill + minmax decide solo cuantas columnas caben: 1 en movil, hasta 4
   en ancho completo. align-items:start evita que el grid estire todas las
   tarjetas a la altura de la mas alta. */
.dadv__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  align-items: start;
}

/* El espaciado interno de la tarjeta lo da el gap del flex, NO los margenes de
   cada elemento. Asi es inmune a la tipografia del tema. */
.dadv-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 16px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

/* Anula los margenes que el tema le mete a p/h3/a dentro de la tarjeta. Con
   !important porque el selector del tema gana en especificidad. */
.dadv-card > * {
  margin: 0 !important;
}

/* Devuelve los span del h3 a linea (el tema los pone en bloque y se apilan). */
.dadv-card__ruta > span {
  display: inline !important;
}

.dadv-card__ruta {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1d21;
}

.dadv-card__flecha {
  margin: 0 4px !important;
  color: #7a828c;
}

.dadv-card__precio {
  line-height: 1.2;
}

.dadv-card__desde {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7a828c;
}

.dadv-card__precio strong {
  font-size: 1.65rem;
  font-weight: 700;
  color: #0b6b3a;
}

.dadv-card__tipo {
  font-size: 0.8rem;
  color: #4a5158;
}

.dadv-card__fechas {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #4a5158;
}

.dadv-card__sep { margin: 0 5px; color: #b6bcc4; }

.dadv-card__directo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e7f5ec;
  color: #0b6b3a;
  font-size: 0.72rem;
  font-weight: 600;
}

.dadv-card__cta {
  display: block;
  margin-top: 4px !important;
  padding: 10px 14px;
  border-radius: 8px;
  background: #0b6b3a;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.dadv-card__cta:hover,
.dadv-card__cta:focus {
  background: #095b31;
  color: #fff;
}

/* La antigüedad del precio no es letra pequeña decorativa: es la diferencia
   entre informar y prometer. Se lee, aunque sea discreta. */
.dadv-card__edad {
  font-size: 0.74rem;
  color: #7a828c;
}

.dadv-card--vacio .dadv-card__sin {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: #7a828c;
}

.dadv__nota {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #7a828c;
}

.dadv--vacio p {
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed #d5d9de;
  border-radius: 10px;
  font-size: 0.88rem;
  color: #4a5158;
}

/* NADA de @media (prefers-color-scheme: dark) en este componente.
   El tema newscore-modern es SIEMPRE claro (fondo blanco), no responde al modo
   oscuro del sistema. Si el componente se pusiera en oscuro cuando el navegador
   del visitante esta en modo oscuro, saldria texto claro sobre el fondo blanco
   del tema = invisible. Por eso todo es claro, fijo, como el tema. */

/* ============================================================
   Landing /vuelos-baratos-rd/  —  destino de tráfico de Facebook
   Móvil primero: el 95% llega desde el móvil.
   ============================================================ */

.dadv-landing__intro {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #2b2f36;
}

.dadv-landing__aviso {
  margin: 0 0 1.25rem;
  padding: 8px 12px;
  border-left: 3px solid #d5d9de;
  background: #f6f7f9;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #6a727b;
}

.dadv-landing__h2 {
  margin: 1.75rem 0 0.75rem;
  font-size: 1.3rem;
  line-height: 1.3;
}

.dadv-landing__pasos {
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.6;
}

.dadv-landing__pasos li {
  margin-bottom: 0.4rem;
}

/* FAQ desplegable. <details> nativo: cero JavaScript, accesible,
   y el texto está siempre en el DOM para Google aunque esté plegado. */
.dadv-faq {
  border-top: 1px solid #e3e6ea;
  max-width: 100%;
}

/* El <details> y su respuesta deben LLENAR la columna, no encogerse al ancho de
   su contenido. Sin esto, la respuesta larga se dimensiona a su propio texto en
   una sola linea y se desborda por la derecha (la pregunta corta no lo revela).
   width:100% + el wrap fuerzan que envuelva dentro de la columna. */
.dadv-faq__item {
  display: block;
  width: 100%;
  max-width: 100%;
  border-bottom: 1px solid #e3e6ea;
  box-sizing: border-box;
}

.dadv-faq__q {
  padding: 13px 30px 13px 2px;
  position: relative;
  font-size: 0.98rem;
  font-weight: 600;
  color: #1a1d21;
  cursor: pointer;
  list-style: none;
}

.dadv-faq__q::-webkit-details-marker { display: none; }

.dadv-faq__q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  color: #7a828c;
}

.dadv-faq__item[open] .dadv-faq__q::after { content: "\2212"; }

.dadv-faq__a {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal !important;
  overflow-wrap: break-word;
  padding: 0 2px 15px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #4a5158;
}

/* ============================================================
   Buscador  /vuelos/
   Móvil primero: los campos se apilan en pantalla estrecha y se
   ponen en fila cuando hay sitio. Espaciado por gap, como las
   tarjetas, para no depender de los márgenes del tema.
   ============================================================ */

.dadv-bus {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e3e6ea;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

.dadv-bus > * { margin: 0 !important; }

.dadv-bus__titulo {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1d21;
}

.dadv-bus__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dadv-bus__campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 160px;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4a5158;
}

.dadv-bus__campo em {
  font-weight: 400;
  font-style: normal;
  color: #9aa2ab;
}

.dadv-bus__campo--pax { flex: 0 1 110px; }

.dadv-bus__campo select,
.dadv-bus__campo input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ccd2d9;
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
  font-weight: 400;
  color: #1a1d21;
  -webkit-appearance: none;
  appearance: none;
}

.dadv-bus__campo select:focus,
.dadv-bus__campo input:focus {
  outline: 2px solid #0b6b3a;
  outline-offset: 1px;
  border-color: #0b6b3a;
}

.dadv-bus__enviar {
  padding: 13px 16px;
  border: 0;
  border-radius: 8px;
  background: #0b6b3a;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.dadv-bus__enviar:hover,
.dadv-bus__enviar:focus {
  background: #095b31;
}

.dadv-bus__nota {
  font-size: 0.76rem;
  line-height: 1.45;
  color: #7a828c;
}

/* ============================================================
   Consejos (contenido editorial del buscador, para Mediavine)
   ============================================================ */

.dadv-tips {
  margin-top: 1.75rem;
}

.dadv-tips__h2 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  line-height: 1.3;
}

.dadv-tips__intro {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a5158;
}

.dadv-tips__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.dadv-tips__item {
  padding: 12px 14px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
}

.dadv-tips__item b {
  display: block;
  margin-bottom: 2px;
  color: #1a1d21;
  font-size: 0.95rem;
}

.dadv-tips__item span {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #4a5158;
}

/* ============================================================
   Banda de la portada  [vuelos_home]
   Usa .section-heading del tema (para alinear con las otras
   secciones) + 3 tarjetas parejas. No lleva .dadv, asi que
   ocupa el ancho del .container del tema, no el max-width propio.
   ============================================================ */

.dadv-home {
  margin: 2rem auto;
}

/* 3 columnas parejas en escritorio; apiladas en movil. Se sobreescribe el
   auto-fill de .dadv__grid para que las 3 ofertas llenen el ancho en vez de
   quedar amontonadas a la izquierda. */
.dadv-home__grid {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .dadv-home__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}