
:root{--blue-900:#0a2540;--blue-800:#0f3b66;--blue-700:#134b85;--blue-600:#1760ad;--blue-500:#1c74d8;--blue-100:#e6f0fb;--sky-050:#f5f9ff;--white:#fff;--shadow:0 10px 25px rgba(6,33,70,.15);--radius:18px;}
html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:var(--blue-900);background:radial-gradient(1200px 800px at 80% -10%, rgba(28,116,216,.18), transparent),radial-gradient(900px 600px at -10% 20%, rgba(19,75,133,.18), transparent),var(--sky-050);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2vw,28px);padding:clamp(16px,2vw,32px);}
header{text-align:center;width:100%;max-width:1080px}.brand{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;border-radius:24px;background:linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.35));box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.logo-img{max-width:clamp(140px,28vw,220px);width:100%;height:auto;display:block;filter:drop-shadow(0 6px 12px rgba(16,59,102,.18))}
h1{margin:0;font-size:clamp(20px,3vw,28px)}.subtitle{color:#134b85;opacity:.9;font-size:clamp(14px,1.6vw,16px);margin:.25rem 0 0}
.lang-flags{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:8px}
.lang-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:600;color:var(--blue-800);background:#fff;border:1px solid rgba(23,96,173,.25);box-shadow:var(--shadow)}
.lang-btn.active{outline:2px solid rgba(28,116,216,.35)}
.content{width:100%;max-width:1080px;display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(18px,2.2vw,26px);border-radius:var(--radius);background:linear-gradient(165deg, rgba(255,255,255,.85), rgba(255,255,255,.6));border:1px solid rgba(23,96,173,.18);box-shadow:var(--shadow);text-decoration:none;color:var(--blue-800);overflow:hidden;transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease}
.card.docard{flex-direction:column}.card::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(300px 200px at 20% 10%, rgba(28,116,216,.18), transparent),radial-gradient(220px 160px at 80% 90%, rgba(19,75,133,.18), transparent);opacity:.7;transition:opacity .2s ease}
.card:hover,.card:focus-visible{transform:translateY(-2px);box-shadow:0 16px 32px rgba(6,33,70,.18);border-color:rgba(23,96,173,.35);outline:none}
.badge{position:absolute;top:10px;right:10px;font-size:11px;font-weight:600;letter-spacing:.3px;padding:6px 8px;border-radius:999px;color:#fff;background:linear-gradient(145deg, var(--blue-700), var(--blue-500));box-shadow:0 6px 12px rgba(16,59,102,.25)}
.title{font-weight:700;letter-spacing:.3px;font-size:clamp(15px,1.6vw,18px)}.hint{margin-top:6px;font-size:12px;opacity:.75}
.thumb{width:72px;height:72px;object-fit:contain;display:block;margin:0 auto 8px;filter:drop-shadow(0 4px 10px rgba(16,59,102,.15))}
.banner{grid-column:1 / -1;padding:clamp(28px,5vw,56px);background:linear-gradient(145deg, var(--blue-700), var(--blue-500));color:#fff;text-align:center}
.banner .title{color:#fff;font-size:clamp(20px,4vw,36px);letter-spacing:.4px;margin-bottom:12px}.banner .hint{display:block;font-size:clamp(13px,1.4vw,16px);opacity:.9;margin-bottom:14px}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;border-radius:999px;font-weight:700;letter-spacing:.3px;background:linear-gradient(145deg, var(--blue-600), var(--blue-500));color:#fff;text-decoration:none;box-shadow:0 10px 25px rgba(16,59,102,.25);transition:transform .15s ease, box-shadow .15s ease;width:100%;max-width:980px;font-size:clamp(15px, 2vw, 18px)}
.cta:hover,.cta:focus-visible{transform:translateY(-1px);box-shadow:0 14px 28px rgba(16,59,102,.3);outline:none}
.divider{height:1px;width:100%;max-width:1080px;background:linear-gradient(90deg, transparent, rgba(23,96,173,.25), transparent);margin:4px auto 0}
footer{text-align:center;color:#0f3b66;opacity:.85;font-size:12px}
.tematico-tile{background:linear-gradient(135deg,#ff7a18,#af002d);color:#fff;text-align:center;padding:20px}
.tematico-tile .tile-icon-wrap{position:relative;display:inline-block;margin-bottom:12px}
.tematico-tile .tile-icon{width:72px;height:72px;display:block}
.qr-badge{position:absolute;right:-8px;top:-8px;font-weight:800;background:#fff;color:#af002d;border-radius:10px;padding:2px 6px;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.tile-title{font-size:18px;font-weight:700;margin-bottom:6px}.tile-sub{font-size:14px;opacity:.95;margin-bottom:4px}
.is-disabled{position:relative;filter:grayscale(.1) opacity(.95)}
.is-disabled .uc-badge{position:absolute;inset:auto 0 0 0;text-align:center;background:rgba(0,0,0,.25);color:#fff;padding:6px 10px;font-weight:700;letter-spacing:.3px}
/* ---- Travelife: fijar cabecera + lista en tarjeta .poster ---- */
.poster--stack{
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.poster--stack *{
  float: none !important;        /* por si hay floats heredados */
}

.poster--stack h2,
.poster--stack h3{
  margin: .35rem 0 0;
  line-height: 1.15;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  text-align: center;
}

.poster--stack .poster-list{
  list-style: disc;
  list-style-position: outside;
  margin: 12px auto 0;
  padding-left: 1.25rem;         /* separa bullets del borde */
  max-width: 760px;
  text-align: left;              /* el texto de los bullets alineado */
  line-height: 1.5;
}

.poster--stack .poster-list li{ margin: 10px 0; }

/* ---- Rejilla de PDFs para esta página ---- */
.docs-card{ grid-column: 1 / -1; } /* encabezado de documentos, ancho completo */

.docs-grid{
  width: 100%;
  display: grid;
  gap: clamp(16px,2vw,22px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* <-- más ancho mínimo */
  justify-content: center; /* centra el conjunto */
}

@media (min-width: 768px){
  .docs-grid{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* escritorio */
}

/* Travelife: centrar la tarjeta del texto */
.poster--stack{
  grid-column: 1 / -1;     /* que abarque todo el grid */
  justify-self: center;    /* centrar el item dentro del grid */
  width: min(920px, 100%); /* ancho cómodo y fluido */
}
.docs-card{
  justify-self: center;
  width: min(920px, 100%);
}
/* ====== Travelife: tarjetas PDF anchas y centradas ====== */

/* Rejilla elástica: columnas de 300–480px */
.docs-grid{
  width: 100%;
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: center;                 /* centra el conjunto */
}

/* Cada tarjeta: ocupar todo el ancho de su celda y centrada */
.docs-grid .docard{
  width: 100%;
  min-width: 300px;
  max-width: 480px;
  justify-self: center;                    /* centra cada tarjeta */
}

/* Afinado visual dentro de la tarjeta */
.docs-grid .docard .title{
  font-size: 16px;                         /* baja tamaño para títulos largos */
  line-height: 1.35;
  word-break: break-word;
  hyphens: auto;
}
.docs-grid .docard .hint{ font-size: 13px; }

/* Logo/badge un pelín más contenidos */
.docs-grid .thumb{ width: 96px; height: 96px; }
.docs-grid .badge{ top: 12px; right: 12px; }
@media (min-width: 1080px){
  .docs-grid{ grid-template-columns: repeat(3, minmax(300px, 1fr)); }
}
/* ===== Travelife (desktop): tarjetas PDF sólidas y sin traslucirse ===== */
.docs-grid .docard{
  background: #fff !important;         /* fondo opaco */
  border: 1px solid rgba(23,96,173,.18);
  isolation: isolate;                   /* aísla efectos internos */
  z-index: 0;
}

/* Quitamos el velo decorativo que se ve por detrás */
.docs-grid .docard::before{ display: none; }

/* Suavizamos el “lift” para que no monte encima en hover */
@media (hover:hover){
  .docs-grid .docard:hover, 
  .docs-grid .docard:focus-visible{
    transform: translateY(-1px);       /* sutil, sin invadir filas vecinas */
    box-shadow: 0 12px 24px rgba(6,33,70,.16);
  }
}

/* Garantizamos altura por contenido y separación vertical cómoda */
.docs-grid{
  gap: clamp(18px, 2.2vw, 24px);
}
/* --- FIX Travelife: evitar solapamiento y forzar flujo normal en grid --- */
.docs-grid{
  width: 100%;
  display: grid !important;
  grid-auto-rows: auto;
  gap: clamp(18px, 2.2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: center;
}

.docs-grid .docard{
  position: static !important;   /* que no “flote” ni sea absoluta */
  float: none !important;        /* por si alguna regla global aplica float */
  display: flex !important;      /* como en la home */
  flex-direction: column;
  width: 100%;
  min-width: 300px;
  max-width: 520px;
  margin: 0 !important;          /* quita márgenes raros heredados */
  z-index: 0;
}

.docs-grid .docard::before{ display: none; } /* elimina el velo que se trasluce */
.docs-grid .docard .title{ font-size: 18px; line-height: 1.35; word-break: break-word; }
.docs-grid .docard .hint{ font-size: 14px; }

/* Opcional: 3 columnas seguras en escritorio amplio */
@media (min-width: 1200px){
  .docs-grid{ grid-template-columns: repeat(3, minmax(320px, 1fr)); }
}
.docs-card{ grid-column: 1 / -1; justify-self: center; width: min(920px, 100%); }
/* ====== TRAVELIFE / TARJETAS PDF ====== */

/* Rejilla responsiva y centrada */
.docs-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); /* más anchas */
  gap: 24px;
  justify-content: center;    /* centra el conjunto */
  align-items: stretch;
}

/* Cada tarjeta: flujo normal, opaca y contenida (sin “traslucir” ni montarse) */
.docs-grid .docard{
  position: static !important;      /* nada de absolute/fixed heredado */
  float: none !important;           /* por si alguna regla global aplicó float */
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  background: #fff !important;      /* fondo sólido */
  border: 1px solid rgba(23,96,173,.18);
  box-shadow: 0 12px 24px rgba(6,33,70,.16);
  overflow: hidden;                 /* recorta sombras internas */
  contain: paint;                   /* aísla efectos y evita solapes visuales */
  z-index: auto;
}

/* Quitamos velos decorativos que provocaban “trasparencias” */
.docs-grid .docard::before{ content: none !important; }

/* Efecto hover suave que no invada otras filas */
@media (hover:hover){
  .docs-grid .docard:hover,
  .docs-grid .docard:focus-visible{
    transform: translateY(-1px);    /* sin levantar demasiado */
    box-shadow: 0 16px 28px rgba(6,33,70,.18);
  }
}

/* Tipografías controladas dentro de la tarjeta */
.docs-grid .docard .title{
  font-size: 18px;
  line-height: 1.35;
  word-break: break-word;
}
.docs-grid .docard .hint{ font-size: 14px; }

/* Encabezado “Documentos…” centrado como una tarjeta de ancho cómodo */
.docs-card{
  grid-column: 1 / -1;
  justify-self: center;
  width: min(980px, 100%);
}
/* ===== FIX TRAVELIFE PDF GRID (independiente del resto del portal) ===== */
.travelife-section {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.travelife-section h2 {
  font-size: clamp(20px, 3vw, 28px);
  margin-bottom: 20px;
  color: var(--blue-900);
}

.travelife-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 26px !important;
  justify-content: center !important;
  align-items: stretch !important;
  width: 100%;
  margin-top: 24px;
}

/* Cada tarjeta PDF */
.travelife-grid .docard {
  position: relative !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #fff !important;
  border-radius: 22px;
  border: 1px solid rgba(23, 96, 173, .15);
  box-shadow: 0 10px 25px rgba(6, 33, 70, .12);
  padding: 28px 20px !important;
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}

.travelife-grid .docard:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(6, 33, 70, .16);
}

.travelife-grid .docard img.thumb {
  width: 90px;
  height: auto;
  margin-bottom: 14px;
}

.travelife-grid .docard .title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--blue-800);
  margin-bottom: 6px;
}

.travelife-grid .docard .hint {
  font-size: 14px;
  opacity: 0.8;
}

/* Para pantallas grandes: 3 columnas */
@media (min-width: 1280px) {
  .travelife-grid {
    grid-template-columns: repeat(3, minmax(320px, 1fr)) !important;
  }
}
