/* infra-it-critica — hoja de estilos única del portal.

   Tema oscuro sobre un degradé vertical azul→navy sumado a una
   diagonal turquesa que nace en el vértice inferior izquierdo.
   Las tarjetas siguen la referencia: relleno en degradé diagonal
   (#17293c → #273d53), borde apenas visible, radio generoso, ícono de
   trazo arriba y bastante aire hasta el título. Tipografía: Inter.

   Orden: variables · base · PORTADA (4 zonas) · barra superior ·
   secciones · filtros · tarjetas · estados · instalar app · responsive */

:root{
  /* ---- SUPERFICIES ------------------------------------------------ */
  --noche:#0a2c40;        /* color plano equivalente, para fallbacks */
  --paper:var(--noche);   /* se conserva el nombre original */
  --ink:#dbe6f2;          /* color de TEXTO principal (antes era el fondo) */
  --ink-fondo:#0a1626;    /* el oscuro real, para los pocos fondos sólidos */
  --muted:#8ea3bb;
  --line:rgba(255,255,255,.09);

  /* ---- TARJETAS (la referencia) ----------------------------------- */
  --tarjeta:linear-gradient(155deg,#17293c 0%,#1e3346 46%,#273d53 100%);
  --tarjeta-hover:linear-gradient(155deg,#1c2f44 0%,#24394e 46%,#2e475e 100%);
  --tarjeta-borde:rgba(255,255,255,.085);
  --tarjeta-borde-hover:rgba(255,255,255,.2);
  --icono:#60c09a;        /* turquesa del ícono cuando no hay color propio */

  /* ---- SEGUNDO NIVEL: un set de color único para las tarjetas ------
     Las tarjetas de producto ya no toman el color de su grupo: todas
     comparten este cian. Muestreado de la referencia.                */
  --card-acc:#0891b2;       /* eyebrow, viñeta, chip acentuado, botón */
  --card-acc-tinte:#17445a; /* relleno del chip acentuado */
  --card-acc-txt:#0c1f2c;   /* texto sobre el cian pleno */
  --chip-neutro:#8b9aab;    /* chip sin acento: pastilla clara */
  --chip-neutro-txt:#16232f;

  /* ---- ACENTOS ---------------------------------------------------- */
  --acc:#e8672a;          /* naranja de marca, para rellenos sólidos */
  --acc-claro:#ff8c4b;    /* el mismo naranja, legible sobre oscuro */
  --acc2:#1a3a5c;
  --ambar:#f0b45e;

  --shadow:0 1px 2px rgba(0,0,0,.34),0 16px 36px -18px rgba(0,0,0,.72);
  --shadow-alta:0 2px 6px rgba(0,0,0,.4),0 28px 56px -24px rgba(0,0,0,.85);
  --r:18px;

  /* ---- FONDO: VERTICAL + DIAGONAL --------------------------------
     Dos degradés sumados, como en la referencia:
       · una VERTICAL que baja de azul cian a navy profundo
       · una DIAGONAL de turquesa que entra desde el vértice inferior
         izquierdo y se apaga antes de la mitad
     más un brillo cian sobre el borde superior, que en la referencia
     hace pico al centro y cae en las dos esquinas.
     Lo usan TODAS las superficies; lo que cambia entre ellas es cuánto
     se las oscurece.                                                */
  --turquesa:#40ccb2;     /* el punto más claro, abajo a la izquierda */
  --cian:#03a0be;         /* el brillo del borde superior */
  --navy:#091f37;         /* el punto más oscuro, abajo a la derecha */
  --velo:6,20,28;         /* base de los velos de legibilidad */

  --diagonal:linear-gradient(42deg,
    rgba(64,204,178,.95) 0%, rgba(45,164,157,.62) 20%,
    rgba(26,116,126,.22) 38%, rgba(20,90,110,0) 56%);
  --brillo-sup:radial-gradient(130% 78% at 50% -20%,
    rgba(3,160,190,.72) 0%, rgba(3,160,190,0) 68%);
  --vertical:linear-gradient(180deg,
    #05506f 0%, #094a5e 26%, #0a3348 62%, var(--navy) 100%);

  --fondo:var(--diagonal),var(--brillo-sup),var(--vertical);

  /* El mismo juego con alfa, para la barra de navegación traslúcida */
  --vertical-alfa:linear-gradient(180deg,
    rgba(5,80,111,.93) 0%, rgba(9,74,94,.93) 26%,
    rgba(10,51,72,.93) 62%, rgba(9,31,55,.93) 100%);
  --fondo-alfa:var(--diagonal),var(--brillo-sup),var(--vertical-alfa);

  /* Velos. Sin ellos el turquesa del vértice inferior izquierdo da 2,6:1
     contra blanco; con el velo izquierdo al 38% sube a ~6:1 y la diagonal
     sigue a la vista. */
  --velo-izq:linear-gradient(96deg,
    rgba(var(--velo),.38) 0%, rgba(var(--velo),.14) 44%,
    rgba(var(--velo),0) 70%);
  --velo-sup:linear-gradient(180deg,
    rgba(var(--velo),.42) 0%, rgba(var(--velo),.14) 26%,
    rgba(var(--velo),0) 48%);
  --velo-barra:linear-gradient(96deg,
    rgba(var(--velo),.45) 0%, rgba(var(--velo),.18) 46%,
    rgba(var(--velo),0) 72%);
  /* Velo plano y fuerte: convierte el degradé en el fondo tranquilo sobre
     el que viven las tarjetas, sin perder el recorrido vertical ni la
     diagonal turquesa. */
  --velo-fondo:linear-gradient(rgba(var(--velo),.70),rgba(var(--velo),.70));

}

*,*::before,*::after{box-sizing:border-box}
/* El degradé se pinta UNA sola vez, en <html>. Las zonas y secciones lo
   dejan pasar, así el recorrido es continuo de punta a punta y no se
   corta en cada borde.
   Va en <html> y no en <body> para que cubra todo el alto del documento:
   con background-attachment:fixed el fondo se ancla al viewport y aparece
   un corte horizontal al scrollear. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:dark;
 min-height:100%;
 background-color:var(--navy);
 background-image:var(--velo-fondo),var(--fondo);
 background-repeat:no-repeat;background-size:100% 100%}
body{margin:0;color:var(--ink);background:transparent;
 font-family:'Inter','Inter var',system-ui,-apple-system,'Segoe UI',sans-serif;
 font-size:16px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--acc-claro);outline-offset:3px;border-radius:4px}
.cargando{display:grid;place-items:center;min-height:60svh;color:var(--muted)}

/* Ícono de trazo: turquesa por defecto, o el color propio del bloque */
.ic{color:var(--c,var(--icono));flex:none}

/* ==================================================================
   PORTADA — cuatro zonas apiladas, cada una con su fondo
   1 cabecera (el degradé completo, a plena saturación)
   2 ofertas   (deja pasar el degradé de la página)
   3 verticales(deja pasar el degradé de la página)
   4 unidad    (el degradé completo otra vez, cierra la página)
   ================================================================== */
.portada{display:block}
.zona{padding:clamp(1.8rem,3.4vw,3rem) clamp(1rem,4vw,4rem)}
.zwrap{max-width:1500px;margin:0 auto}
.ztit{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:1.2rem}
.ztit h2{font-size:clamp(1.1rem,1.9vw,1.45rem);margin:0;letter-spacing:-.02em;color:#eaf1fa}
.ztit .icono{line-height:1}
.ztit p{margin:0;color:var(--muted);font-size:.88rem}
.ztit .linea{flex:1;height:1px;background:var(--line);min-width:2rem}

/* ---- zona 1 · cabecera: el degradé completo, a plena saturación ---- */
.z-cab{position:relative;color:#fff;overflow:hidden;
 padding:clamp(2.4rem,5vw,4.2rem) clamp(1rem,4vw,4rem);
 background-color:var(--navy);background-repeat:no-repeat;background-size:100% 100%;
 background-image:var(--velo-sup),var(--velo-izq),var(--fondo)}
.z-cab::after{content:"";position:absolute;inset:auto -10% -50% auto;width:70vw;height:70vw;
 background:radial-gradient(circle,rgba(3,160,190,.12),transparent 62%);pointer-events:none}
.pcab{position:relative;z-index:2;text-align:center;max-width:1500px;margin:0 auto}
.tema{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.ptit-row{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,2.5vw,2.4rem);
 flex-wrap:wrap;margin-top:.6rem}
.logo-datco{max-height:64px;max-width:280px;width:auto;object-fit:contain}
.ptitle{font-size:clamp(2rem,4.6vw,3.7rem);font-weight:700;letter-spacing:-.03em;margin:0;
 line-height:1.02}
/* El naranja de marca sobre turquesa cae a 1,9:1. Dentro de la cabecera se
   usa una versión clara del mismo naranja, que llega a 3:1 en display. */
.ptitle span{color:#ffa961}
.bar{width:104px;height:5px;background:linear-gradient(90deg,#ff8c42,#ffc48a);
 border-radius:3px;margin:.9rem auto 0}

/* ---- zona 2 · ofertas prioritarias ----
   Sin fondo propio: deja pasar el degradé del body. La separación entre
   zonas la dan las líneas, no un cambio de color. */
.z-ofertas{background:transparent;border-bottom:1px solid var(--line)}
.z-ofertas .ztit h2{color:var(--acc-claro)}
.ofertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.9rem}

/* ---- zona 3 · verticales ---- */
.z-verticales{background:transparent;border-bottom:1px solid var(--line)}
.verticales{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem}

/* ==================================================================
   TARJETAS — el patrón de la referencia, compartido por ofertas,
   verticales, destinos y tarjetas de producto:
   relleno en degradé diagonal, borde apenas visible, radio 18,
   ícono de trazo arriba y aire hasta el título.
   ================================================================== */
.oferta,.vbtn,.destino,.card,.vpanel,.nota,.filtros,.vacio{
  background:var(--tarjeta);
  border:1px solid var(--tarjeta-borde);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  color:var(--ink);
}

.oferta,.vbtn,.destino{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(.7rem,1.6vw,1.15rem);          /* el aire ícono → título */
  text-align:left;text-decoration:none;font-family:inherit;
  padding:clamp(1.1rem,2vw,1.5rem);
  cursor:pointer;position:relative;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.oferta:hover,.vbtn:hover,.destino:hover{
  transform:translateY(-3px);
  background:var(--tarjeta-hover);
  border-color:var(--tarjeta-borde-hover);
  box-shadow:var(--shadow-alta);
}
.oferta b,.vbtn b,.destino b{display:block;font-size:1.02rem;line-height:1.25;
 letter-spacing:-.01em;color:#eaf1fa;font-weight:600}
.oferta small,.vbtn small,.destino small{display:block;font-size:.82rem;color:var(--muted);
 margin-top:.2rem;line-height:1.4}
.oferta .icono,.vbtn .icono,.destino .icono{line-height:1;flex:none}

/* La oferta es la pieza más prominente: ícono más grande y filo cálido */
.oferta{--c:var(--acc-claro)}
.oferta::before{content:"";position:absolute;left:0;top:1.5rem;bottom:1.5rem;width:2px;
 border-radius:2px;background:var(--acc-claro);opacity:.75}

/* Vertical desplegada: se tiñe hacia su color en vez de invertirse.
   Con la paleta aclarada, texto blanco sobre el color ya no alcanza. */
.vbtn .flecha{position:absolute;right:1.1rem;top:1.2rem;color:var(--muted);font-size:.9rem;
 transition:.2s ease}
.vbtn[aria-expanded="true"]{
  background:color-mix(in srgb,var(--c,var(--icono)) 16%,#17293c);
  border-color:var(--c,var(--icono))}
.vbtn[aria-expanded="true"] .flecha{color:var(--c,var(--icono));transform:rotate(180deg)}

/* panel que se despliega debajo de la vertical elegida */
.vpanel{display:none;margin-top:.8rem;border-left:3px solid var(--c,var(--icono));
 padding:1.3rem 1.4rem}
.vpanel.on{display:block}
.vpanel .vp-tit{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
 color:var(--c,var(--icono));margin-bottom:1rem}
.destinos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem}
.destino{border-radius:14px}

/* ---- zona 4 · unidad de negocio: el degradé completo otra vez, con un
   velo izquierdo que sostiene el texto sobre la diagonal turquesa. ---- */
.z-unidad{color:#fff;
 background-color:var(--navy);background-repeat:no-repeat;background-size:100% 100%;
 background-image:var(--velo-izq),var(--fondo)}
.z-unidad .ztit h2{color:#fff}
.z-unidad .ztit p{color:rgba(255,255,255,.75)}
.z-unidad .ztit .linea{background:rgba(255,255,255,.2)}
.z-unidad .destinos{margin-top:.2rem}
/* Sobre el degradé saturado la tarjeta se vuelve traslúcida y lo deja pasar */
.z-unidad .destino{background:linear-gradient(155deg,rgba(9,29,48,.72),rgba(30,52,72,.62));
 border-color:rgba(255,255,255,.16)}
.z-unidad .destino:hover{background:linear-gradient(155deg,rgba(9,29,48,.85),rgba(36,62,84,.75));
 border-color:rgba(255,255,255,.34)}
.z-unidad .destino small{color:rgba(255,255,255,.76)}

/* ======================================================== BARRA SUPERIOR */
/* Fija arriba y levemente traslúcida: la misma rampa con alfa .93 más un
   desenfoque, así el contenido se ve pasar por detrás. */
.topbar{position:sticky;top:0;z-index:60;color:#fff;display:flex;
 align-items:center;gap:1rem;flex-wrap:wrap;padding:.75rem clamp(1rem,4vw,4rem);
 border-bottom:1px solid rgba(255,255,255,.16);
 background-color:rgba(9,31,55,.86);background-repeat:no-repeat;background-size:100% 100%;
 background-image:var(--velo-barra),var(--fondo-alfa);
 -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.topbar .marca{display:flex;align-items:center;gap:.8rem;min-width:0}
.topbar img{max-height:34px;max-width:150px;width:auto;object-fit:contain}
.topbar .tt{font-size:.98rem;font-weight:600;line-height:1.15}
.topbar .volver{margin-left:auto;text-decoration:none;font-size:.82rem;font-weight:600;color:#fff;
 background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:999px;
 padding:.45rem .95rem;transition:.15s ease}
.topbar .volver:hover{background:var(--acc);border-color:var(--acc)}

/* ============================================================ SECCIONES */
section.sec{padding:clamp(2.2rem,4vw,3.4rem) clamp(1rem,4vw,4rem);border-top:1px solid var(--line);
 background:transparent}
section.sec.explorar{padding-bottom:1.6rem;border-top:0}
.wrap{max-width:1720px;margin:0 auto}
.hd{margin-bottom:1.6rem}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:600;
 letter-spacing:.18em;text-transform:uppercase;color:var(--acc-claro);margin-bottom:.7rem}
.eyebrow .ic{color:currentColor}   /* el ícono acompaña al rótulo, no al turquesa */
.hd h1{font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1.06;letter-spacing:-.025em;margin:0;
 color:#eaf1fa}
.hd h1 .l1{opacity:.5;font-weight:500}
.hd h1 .l2{display:block}
.hd p{color:var(--muted);margin:.7rem 0 0;max-width:88ch;font-size:.96rem}
.rule{height:4px;border-radius:3px;margin-top:1.1rem;max-width:520px}

.nota{border-left:4px solid var(--acc-claro);padding:1.3rem 1.4rem;margin-bottom:1rem}
.nota .s{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
 color:var(--acc-claro);margin-bottom:.35rem}
.nota h3{margin:0;font-size:1.1rem;color:#eaf1fa}
.nota p{margin:.6rem 0 0;color:var(--muted);font-size:.9rem;max-width:100ch}
.nota .docs{margin-top:.9rem}
.nota .docs a{display:inline-flex;text-decoration:none;font-size:.82rem;font-weight:600;
 padding:.55rem .95rem;border-radius:10px;background:rgba(255,255,255,.08);
 border:1px solid var(--tarjeta-borde-hover);color:#eaf1fa;transition:.15s}
.nota .docs a:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.nota.aviso{border-left-color:var(--ambar);
 background:linear-gradient(155deg,#2a2416 0%,#332c1c 46%,#3d3624 100%)}
.nota.aviso .s{color:var(--ambar)}
.nota.aviso p{color:#d9cdb2}

/* ============================================================== FILTROS */
.filtros{padding:1.05rem 1.15rem;margin-top:1.2rem;border-radius:14px}
.fgroup{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .8rem;margin-bottom:.75rem}
.flabel{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
 color:var(--muted);min-width:104px}
.fchips{display:flex;flex-wrap:wrap;gap:.4rem}
.chipf{font:inherit;font-size:.83rem;font-weight:500;cursor:pointer;line-height:1.2;
 background:rgba(255,255,255,.05);border:1px solid var(--tarjeta-borde);color:#c3d1e2;
 border-radius:999px;padding:.4rem .85rem;transition:.14s ease}
.chipf:hover{background:rgba(255,255,255,.1);border-color:var(--acc-claro);color:var(--acc-claro)}
.chipf[aria-pressed="true"]{background:var(--acc-claro);border-color:var(--acc-claro);
 color:#20120a;font-weight:700}
.fpie{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;border-top:1px solid var(--line);
 padding-top:.8rem}
.festado{font-size:.83rem;color:var(--muted)}
.limpiar{margin-left:auto;background:none;border:1px solid var(--tarjeta-borde);border-radius:999px;
 font:inherit;font-size:.79rem;padding:.35rem .85rem;cursor:pointer;color:var(--muted);
 transition:.14s ease}
.limpiar:hover{border-color:var(--acc-claro);color:var(--acc-claro)}

/* ==================================================== TARJETAS DE PRODUCTO */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
 grid-auto-rows:1fr;gap:.9rem}
/* Todas las tarjetas de segundo nivel comparten el mismo set de color:
   --c deja de venir por grupo y pasa a ser el cian de la referencia. */
.card{--c:var(--card-acc);
 overflow:hidden;height:100%;display:flex;flex-direction:column;
 transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);border-color:var(--tarjeta-borde-hover);
 box-shadow:var(--shadow-alta)}
.card .top{display:none}          /* la referencia no lleva filo de color */

/* La placa de imagen SÍ queda clara: las fotos de producto vienen con fondo
   blanco y se integran con mix-blend-mode:multiply, que sobre oscuro las
   borraría. Va embutida, con su propio radio. */
.media{height:186px;min-height:186px;max-height:186px;flex:none;
 width:calc(100% - 20px);margin:10px 10px 0;padding:14px;border-radius:12px;
 display:flex;align-items:center;justify-content:center;overflow:hidden;
 background:linear-gradient(180deg,#fff,#eef0f3)}
.media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:auto;
 mix-blend-mode:multiply}
.media .ph{font-size:2.2rem;color:var(--c);opacity:.3;font-weight:700}
.media.doc{height:240px;min-height:240px;max-height:240px;padding:0;background:#eef0f3;
 align-items:flex-start}
.media.doc img{width:100%;height:100%;object-fit:cover;object-position:top center;
 mix-blend-mode:normal;max-width:none;max-height:none}
.body{padding:1.15rem 1.2rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card .seg{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
 color:var(--c)}
.card h3{font-size:1.05rem;margin:0;line-height:1.25;letter-spacing:-.015em;display:flex;
 flex-wrap:wrap;align-items:center;gap:.5rem;color:#eaf1fa}
.card .mio{font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 color:#20120a;background:var(--acc-claro);border-radius:999px;padding:.16rem .5rem}
.card.destacada{border-color:var(--acc-claro);
 box-shadow:0 0 0 1px var(--acc-claro) inset,var(--shadow)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;min-height:1.7rem;align-content:flex-start}
/* Chip neutro: pastilla clara con texto oscuro, como en la referencia */
.chip{font-size:.72rem;font-weight:600;padding:.26rem .6rem;border-radius:8px;
 background:var(--chip-neutro);color:var(--chip-neutro-txt);font-variant-numeric:tabular-nums}
/* Chip acentuado (el primero): tinte del cian con el cian como texto */
.chip.hi{background:var(--card-acc-tinte);color:var(--card-acc)}
.card p{font-size:.85rem;color:var(--muted);margin:0;flex:1}
.lista{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.42rem;
 flex:1}
.lista li{position:relative;padding-left:.95rem;font-size:.83rem;color:#c3d1e2;line-height:1.35}
.lista li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;
 border-radius:50%;background:var(--c)}
.links{display:flex;border-top:1px solid var(--line);padding-top:.8rem;margin-top:auto}
/* Texto oscuro sobre el cian pleno: blanco daría 2,4:1 */
.links a{flex:1;text-align:center;text-decoration:none;font-size:.82rem;font-weight:700;
 padding:.6rem .6rem;border-radius:10px;background:var(--c);color:var(--card-acc-txt);
 transition:.15s ease}
.links a:hover{filter:brightness(1.12)}
.links a::after{content:" ↓";opacity:.6}

/* =============================================================== ESTADOS */
.oculto{display:none !important}
.vacio{border-style:dashed;padding:2.4rem 1.5rem;text-align:center;color:var(--muted);
 background:rgba(255,255,255,.03)}
.vacio b{display:block;color:#eaf1fa;font-size:1.05rem;margin-bottom:.3rem}

/* ========================================================= INSTALAR APP */
.up{position:fixed;right:14px;bottom:14px;z-index:60;background:var(--ink-fondo);color:#fff;
 text-decoration:none;font-size:.78rem;font-weight:600;padding:.62rem 1rem;border-radius:999px;
 border:1px solid var(--tarjeta-borde-hover);
 box-shadow:0 10px 26px -10px rgba(0,0,0,.8)}
.up:hover{background:var(--acc);border-color:var(--acc)}
#instalar{position:fixed;left:14px;bottom:14px;z-index:70;display:none;align-items:center;
 gap:.5rem;background:var(--acc);color:#fff;border:0;border-radius:999px;cursor:pointer;
 font-family:inherit;font-size:.82rem;font-weight:600;padding:.62rem 1.05rem;
 box-shadow:0 10px 26px -10px rgba(0,0,0,.8)}
#instalar.on{display:inline-flex}
#instalar:hover{filter:brightness(1.1)}
#ayudaIos{position:fixed;left:14px;right:14px;bottom:14px;z-index:70;display:none;
 background:var(--ink-fondo);color:#fff;border:1px solid var(--tarjeta-borde-hover);
 border-radius:12px;padding:.9rem 1rem;font-size:.83rem;line-height:1.45}
#ayudaIos.on{display:block}
#ayudaIos b{color:var(--acc-claro)}

/* ============================================================ RESPONSIVE */
@media (max-width:900px){
  .flabel{min-width:0;width:100%}
}
@media (max-width:640px){
  .topbar{padding:.6rem 1rem}
  .zona{padding:1.6rem 1rem}
  .z-cab{padding:2.2rem 1rem}
  .grid{grid-template-columns:1fr 1fr}
  .media{height:140px;min-height:140px;max-height:140px;padding:10px}
  .media.doc{height:180px;min-height:180px;max-height:180px;padding:0}
  .limpiar{margin-left:0}
  .logo-datco{max-height:48px}
  .destinos{grid-template-columns:1fr}
  .oferta,.vbtn,.destino{gap:.7rem;padding:1.1rem}
}
@media print{.up,#instalar,.filtros{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ==================================================================
   PORTADA FULL-PAGE — solo pantalla grande apaisada (PC ~1920×1080).
   Encaja las 4 zonas en 100dvh SIN scroll. Todo está scopeado a
   ".portada …", así que las SECCIONES internas y el CELULAR/PC chico
   conservan el responsive normal en cualquier resolución.

   Banda tolerante al escalado de Windows (un 1920×1080 físico reporta
   menos px CSS según el zoom del SO):
     1920×1080 @100% → 1920×1080  ✓
     1920×1080 @125% → 1536× 864  ✓
   Notebooks, tablets y celulares quedan afuera y siguen con scroll.
   Si alguna PC de reunión igual recorta contenido, bajá min-height.
   ================================================================== */
@media (min-width:1500px) and (min-height:840px) and (orientation:landscape)
  and (hover:hover) and (pointer:fine){

  /* La portada pasa a placa de alto fijo: 4 filas, la 3ª (verticales) flexible. */
  .portada{
    height:100dvh;overflow:hidden;display:grid;
    grid-template-rows:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto);
  }
  .portada>*{min-height:0;min-width:0}            /* deja que las zonas se encojan */

  /* Paddings verticales comprimidos (los horizontales quedan igual). */
  .portada .zona{padding-block:clamp(.7rem,1.6vh,1.5rem)}
  .portada .z-cab{padding:clamp(1.4rem,3vh,2.6rem) clamp(1rem,4vw,4rem)}
  .portada .z-ofertas{padding-top:clamp(.7rem,1.6vh,1.5rem)}
  .portada .ptitle{font-size:clamp(1.9rem,3.4vh,3.2rem)}
  .portada .ztit{margin-bottom:clamp(.5rem,1.2vh,1.1rem)}

  /* Zona 3 · flexible: centra su contenido en el espacio sobrante. */
  .portada .z-verticales{position:relative;display:flex;flex-direction:column;
    justify-content:center}

  /* El panel de una vertical abierta FLOTA sobre la zona: no empuja la grilla. */
  .portada .vpanel.on{
    position:absolute;left:clamp(1rem,4vw,4rem);right:clamp(1rem,4vw,4rem);
    bottom:clamp(.6rem,1.4vh,1.2rem);z-index:30;margin-top:0;
    max-height:52vh;overflow:auto;
    box-shadow:var(--shadow-alta)}

  /* Tarjetas más bajas y con menos aire interno para ganar altura. */
  .portada .oferta,.portada .vbtn,.portada .destino{
    padding-block:clamp(.7rem,1.4vh,1.1rem);
    gap:clamp(.35rem,1vh,.9rem)}
}