/* ============================================================================
   MASTER KIT — LAS TORRES PATAGONIA
   Los colores y tipografías se controlan desde config.js (sección "marca").
   ============================================================================ */

/* ---------------------------------------------------------------------------
   TIPOGRAFÍAS DE MARCA — instaladas y funcionando.
   Los archivos están en assets/fonts/, convertidos desde los originales.
   · ABC Arizona Flare  → títulos del banner principal y de los banners de abajo
   · GT Pressura        → disponible
   · Neue Haas Display  → disponible para textos (se activa en config.js)

   De Arizona solo existe el peso Bold: el @font-face de abajo lo declara para
   todo el rango de pesos, así que responde igual a cualquiera que se le pida.
   Si algún día llega el peso Regular, se agrega acá como una declaración
   aparte con su propio font-weight y los títulos adelgazan solos.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:'ABC Arizona Flare';
  src:url('../fonts/ABCArizonaFlare-Bold.woff2') format('woff2'),
      url('../fonts/ABCArizonaFlare-Bold.woff') format('woff');
  font-weight:400 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'GT Pressura';
  src:url('../fonts/GTPressura-Regular.woff2') format('woff2'),
      url('../fonts/GTPressura-Regular.woff') format('woff');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Neue Haas Display';
  src:url('../fonts/NeueHaasDisplay-Light.woff2') format('woff2'),
      url('../fonts/NeueHaasDisplay-Light.woff') format('woff');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Neue Haas Display';
  src:url('../fonts/NeueHaasDisplay-Roman.woff2') format('woff2'),
      url('../fonts/NeueHaasDisplay-Roman.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Neue Haas Display';
  src:url('../fonts/NeueHaasDisplay-Medium.woff2') format('woff2'),
      url('../fonts/NeueHaasDisplay-Medium.woff') format('woff');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Neue Haas Display';
  src:url('../fonts/NeueHaasDisplay-Bold.woff2') format('woff2'),
      url('../fonts/NeueHaasDisplay-Bold.woff') format('woff');
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --cream:#F5F2EC; --cream-soft:#FBF9F5; --ink:#2B2A26; --ink-soft:#6E6A61;
  --gold:#B08A4F; --gold-soft:#D9BE8E; --dark:#1C1B18; --line:rgba(0,0,0,.08);
  --radius:4px; --serif:'Cormorant Garamond',serif; --sans:'Jost',Arial,sans-serif;
  --hd-bg:#F5F2EC; --hd-text:#2B2A26; --hd-accent:#B08A4F; --hd-border:rgba(0,0,0,.07);
  --hd-height:130px; --hd-size:13px; --hd-spacing:.09em; --hd-transform:uppercase;
  --wrap:1220px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.ico{flex:none}
h1,h2,h3,h4{margin:0;font-weight:400}

/* ---------- BOTONES ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  padding:14px 28px;border-radius:var(--radio-boton,6px);font-size:13.5px;letter-spacing:.03em;
  transition:.25s;border:1px solid transparent;white-space:nowrap;
}
.btn-gold{background:var(--gold-btn);color:#fff}
.btn-gold:hover{filter:brightness(1.06)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-dark{background:var(--dark);color:#fff}

/* ============================ HEADER ==================================== */
.hd{background:var(--hd-bg);border-bottom:1px solid var(--hd-border);position:relative;z-index:60}
.hd--sticky{position:sticky;top:0}
.hd-in{display:flex;align-items:center;gap:28px;min-height:var(--hd-height)}
.hd-logo{flex:none}
.hd-nav{margin-left:auto;display:flex;align-items:center;gap:34px}
.hd-link,.hd-user{
  font-family:var(--hd-font,var(--sans));
  font-size:var(--hd-size);letter-spacing:var(--hd-spacing);font-weight:var(--hd-weight,500);
  text-transform:var(--hd-transform);color:var(--hd-text);transition:.2s;
  display:inline-flex;align-items:center;gap:9px;
}
.hd-link:hover,.hd-user:hover{color:var(--hd-accent)}
.hd-files{
  display:inline-flex;align-items:center;gap:10px;position:relative;
  border:1px solid var(--gold-soft);padding:15px 24px;border-radius:3px;
  font-family:var(--hd-font,var(--sans));
  font-size:var(--hd-size);letter-spacing:var(--hd-spacing);font-weight:var(--hd-weight,500);
  text-transform:var(--hd-transform);color:var(--hd-text);transition:.2s;
}
.hd-files:hover{background:var(--gold-btn);border-color:var(--gold-btn);color:#fff}
.hd-badge{
  position:absolute;top:-8px;right:-8px;background:var(--gold);color:#fff;
  min-width:20px;height:20px;border-radius:10px;font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}
.hd-badge[hidden]{display:none}
/* Los ítems del menú nunca se parten en dos líneas, y el nombre del usuario
   se recorta con puntos suspensivos: un nombre largo no puede desarmar el
   header. */
.hd-link,.hd-files,.hd-user{white-space:nowrap}
.hd-user span{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
@media (max-width:1240px){ .hd-nav{gap:24px} .hd-user span{max-width:130px} }
@media (max-width:1020px){ .hd-nav{gap:18px} .hd-files{padding:13px 16px} }
.hd-lang{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.08em;color:var(--ink-soft)}
.hd-lang a{transition:.2s}
.hd-lang a.on{color:var(--ink);font-weight:500}
.hd-lang a:hover{color:var(--hd-accent)}
.hd-burger{display:none;flex-direction:column;gap:5px;margin-left:auto;padding:8px}
.hd-burger span{width:24px;height:1.5px;background:var(--hd-text);display:block}

/* ============================ HERO ====================================== */
/* ================= VENTANA EMERGENTE DE CAMPAÑA ========================== */
.pop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:28px}
.pop-fondo{position:absolute;inset:0;background:rgba(18,17,15,.66);backdrop-filter:blur(3px)}
.pop-caja{
  position:relative;width:min(560px,100%);max-height:calc(100vh - 56px);
  border-radius:16px;overflow:hidden;background:var(--cream-soft);
  box-shadow:0 26px 80px rgba(0,0,0,.42);
  display:flex;flex-direction:column;
  animation:popEntra .24s cubic-bezier(.2,.8,.3,1);
}
@keyframes popEntra{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

/* La gráfica se ve ENTERA: no se recorta ni se le pone nada encima. */
.pop-media{background:#141310;flex:0 1 auto;min-height:0;display:flex}
.pop-media img{width:100%;height:auto;max-height:58vh;object-fit:contain;display:block;margin:auto}

.pop-x{
  position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(0,0,0,.42);backdrop-filter:blur(4px);transition:.2s;
}
.pop-x:hover{background:rgba(0,0,0,.62)}

/* Franja de abajo: el texto y el botón viven acá, con aire propio. */
.pop-pie{
  flex:none;padding:24px 28px 26px;display:flex;flex-direction:column;gap:18px;
  border-top:1px solid var(--line);background:var(--cream-soft);
}
.pop-txt-caja{display:flex;flex-direction:column;gap:8px}
.pop-tit{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.4vw,26px);line-height:1.18;letter-spacing:.02em;margin:0;color:var(--ink)}
.pop-txt{font-size:14.5px;line-height:1.6;margin:0;color:var(--ink-soft)}
.pop-cta{
  width:100%;justify-content:center;text-align:center;cursor:pointer;font-family:inherit;
  padding:15px 26px;font-size:14px;letter-spacing:.06em;
}
.pop-cta.cargando{opacity:.72;cursor:default}

/* Resultado: reemplaza la franja entera, con el mismo aire */
.pop-res{display:flex;align-items:flex-start;gap:14px}
.pop-res b{display:block;font-size:16px;font-weight:500;line-height:1.35;margin-bottom:4px}
.pop-res span{display:block;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.pop-check{
  flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#E4F2E6;color:#2C6E33;
}
.pop-pie--ok{background:#F3F9F3;border-top-color:#D8E9D9}
.pop-pie--ok .pop-res b{color:#2C6E33}
.pop-pie--mal{background:#FDF3F1;border-top-color:#EFD9D4}
.pop-pie--mal .pop-res b{color:#A5432F}

@media(max-width:640px){
  .pop{padding:0;align-items:flex-end}
  .pop-caja{width:100%;max-height:94vh;border-radius:16px 16px 0 0}
  .pop-media img{max-height:48vh}
  .pop-pie{padding:20px 20px 24px;gap:16px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .pop-tit{font-size:20px}
  .pop-txt{font-size:14px}
}

/* Cinta de vista previa: lo que se ve está guardado solo en este navegador */
.mk-previa{
  background:#F3E6CF;color:#6B4E17;font-size:13px;line-height:1.5;
  padding:10px 20px;display:flex;gap:14px;align-items:center;justify-content:center;
  flex-wrap:wrap;text-align:center;
}
.mk-previa a{color:#6B4E17;text-decoration:underline;white-space:nowrap;font-weight:500}
@media(max-width:640px){.mk-previa{font-size:12px;padding:9px 14px;text-align:left}}

.hero{position:relative;overflow:hidden;isolation:isolate}
/* La foto va como <img> (no como background) porque Google no siempre
   entrega las miniaturas de Drive a un background-image. */
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#EFECE7}
.hero-bg img,.camp-bg img,.acceso-bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero-ov{position:absolute;inset:0;z-index:-1}
.hero-in{max-width:var(--wrap);margin:0 auto;padding:0 32px;display:flex;flex-direction:column;justify-content:center;height:100%}
.hero-kicker{font-size:14px;font-weight:500;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.hero-rule{width:46px;height:1.5px;background:var(--gold);margin:13px 0 22px}
/* Mismas proporciones que la propuesta: el título ocupa el mismo alto y el
   mismo ancho de columna, y nunca se estira a lo ancho de la foto. */
/* El tamaño va un 6% arriba del original. Arizona tiene la minúscula más baja
   que la tipografía anterior (474 contra 517 sobre 1000), así que al mismo
   tamaño el bloque de título se leía más chico. Con esto ocupa lo mismo. */
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,4.9vw,72px);line-height:1.0;letter-spacing:-.015em;
  max-width:7.4em;
}
.hero h1 .acc{color:var(--gold);display:block}
.hero-sub{margin:26px 0 34px;font-size:16px;line-height:1.65;max-width:420px;color:var(--ink)}
.hero-cta{align-self:flex-start}

/* Buscador: va DENTRO del hero, cerca del borde inferior.
   "bottom" se controla desde config.js → hero.search.separacionInferior */
.hero-search{
  position:absolute;left:0;right:0;bottom:var(--search-bottom,46px);
  z-index:5;display:flex;justify-content:center;padding:0 32px;
}
.hero-search form{
  width:100%;max-width:544px;background:var(--search-bg);border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.09);display:flex;align-items:center;
  gap:12px;padding:5px 7px 5px 24px;
}
.hero-search .ico{color:#6E6A61}
.hero-search input{
  flex:1;border:0;outline:0;font-family:inherit;font-size:15px;color:var(--ink);
  background:none;padding:15px 0;
}
.hero-search input::placeholder{color:#A9A499}
.hero-search button{
  width:44px;height:44px;border-radius:50%;background:#EDEDED;
  display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.2s;
}
.hero-search button:hover{background:var(--gold-btn);color:#fff}

/* ======================= CAJAS DE CATEGORÍA ============================== */
.cats{padding:56px 0 10px}
.cats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.cat{
  background:#FCFAF7;border:1px solid rgba(0,0,0,.05);border-radius:6px;
  padding:30px 14px 25px;text-align:center;transition:.28s;display:block;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.cat:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.07);border-color:var(--gold-soft)}
.cat .ico{margin:0 auto;color:#3A3833;stroke-width:1.1}
.cat-arrow .ico{color:var(--gold-btn);stroke-width:1.4}
.cat-img{margin:0 auto;width:auto;object-fit:contain}
.cat-label{margin:26px 0 18px;font-size:15px;line-height:1.3;display:flex;align-items:center;justify-content:center}
.cat-arrow{color:var(--gold);display:flex;justify-content:center}
.cat:hover .cat-arrow{transform:translateX(4px);transition:.25s}

/* --- Caja destacada de Disponibilidad -------------------------------------
   Borde dorado y una cinta que FLOTA sobre el borde superior, colgada como un
   tag. Va fuera del flujo (absolute) a propósito: adentro de la caja empujaba
   el ícono y el texto y desalineaba la fila completa de cajas. */
.cat--dispo{position:relative;overflow:visible;border-color:var(--gold-soft);background:#FCFAF6}
.cat--dispo:hover{border-color:var(--gold)}
.cat-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);z-index:2;
  display:inline-block;background:var(--gold-btn);color:#fff;
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:3px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.cat--dispo .cat-label{max-width:17ch;margin-left:auto;margin-right:auto}

/* ===================== NOVEDADES + MÁS DESCARGADO ======================== */
/* Novedades y Más descargado van dentro de UN solo bloque, del mismo alto,
   separados por una línea vertical (igual que la propuesta) */
.panels{
  margin:36px 0 20px;display:grid;grid-template-columns:1fr 340px;align-items:stretch;
  background:var(--cream-soft);border:1px solid var(--line);border-radius:6px;overflow:hidden;
}
.panel{padding:24px 26px 20px;display:flex;flex-direction:column}
.panel--top{border-left:1px solid var(--line)}
.panel-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.panel-hd h2{font-size:19px;font-weight:400}
.panel-tit{min-width:0}
.panel-sub{font-size:13px;color:var(--ink-soft);margin:5px 0 0;line-height:1.45}
.panel-hd .panel-more{flex:none;margin-top:4px}
.panel-more{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--gold)}
.panel-more:hover{gap:13px;transition:.2s}

/* Carrusel de novedades — se estira para quedar del mismo alto que la lista
   de la derecha, como en la propuesta */
.nov-track{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;flex:1;align-items:stretch}
.nov{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
     display:flex;flex-direction:column;height:100%;transition:.22s}
.nov:hover{box-shadow:0 10px 24px rgba(0,0,0,.09);transform:translateY(-2px)}
/* La foto se lleva todo el alto sobrante; como el texto de abajo mide
   siempre lo mismo, las cuatro fotos quedan exactamente iguales y altas. */
/* La foto crece para llenar la tarjeta, pero con tope: los dos paneles quedan
   a la misma altura, y sin este máximo una lista larga de "Más descargado"
   estiraba las fotos de Novedades hasta dejarlas desproporcionadas. */
.nov-media{position:relative;flex:1;min-height:170px;max-height:250px;background:#EFECE7;overflow:hidden;display:block}
.nov-media img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.nov-media.fit-contain{background:#fff}
.nov-media.fit-contain img{object-fit:contain;padding:6px}
.nov-eye{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
         background:rgba(28,27,24,.34);color:#fff;opacity:0;transition:.25s}
.nov:hover .nov-eye{opacity:1}
.nov-title a{color:inherit}
.nov-title a:hover{color:var(--gold-btn)}
/* Etiquetas NUEVO / ACTUALIZADO: café y pegadas a la esquina de la foto,
   como en la propuesta (no flotando encima) */
.nov-tag{
  position:absolute;top:0;left:0;z-index:3;background:var(--gold-btn);color:#fff;
  font-size:10px;letter-spacing:.1em;padding:6px 12px;border-radius:0 0 4px 0;
  text-transform:uppercase;font-weight:500;
}
.nov-tag.upd{background:#A8814D}
.nov-body{padding:13px 13px 12px;display:flex;flex-direction:column;flex:none}
.nov-title{
  font-size:14px;line-height:1.35;color:var(--ink);display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;
}
.nov-foot{margin-top:9px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.nov-date{font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nov-dl{color:var(--ink);transition:.2s}
.nov-dl:hover{color:var(--gold)}
.dots{display:flex;gap:7px;justify-content:center;margin-top:20px;min-height:7px}
.dots i{width:7px;height:7px;border-radius:50%;background:#DAD4C8;display:block;cursor:pointer;transition:.2s}
.dots i.on{background:var(--gold);width:18px;border-radius:4px}

/* Lista más descargado */
/* --- MÁS DESCARGADO: una fila por archivo, con su ícono según el tipo ------ */
.top-list{list-style:none;margin:0;padding:0}
.top-list li{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.top-list li:last-child{border-bottom:0}
.top-info{flex:1;min-width:0;display:flex;align-items:center;gap:16px;transition:.18s}
.top-info:hover .top-name{color:var(--gold-btn)}
.top-list li.inerte .top-info{pointer-events:none;opacity:.55}

/* cuadradito con la hoja y la extensión adentro */
.tipo-ico{
  flex:none;width:46px;height:46px;border-radius:9px;background:var(--cream);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);transition:.18s;
}
.tipo-ico .ext{fill:currentColor}
.tipo-pdf{color:#B4553F}
.tipo-ppt{color:#C07A3A}
.tipo-doc{color:#3F6FA8}
.tipo-hoja{color:#3E7D52}
.tipo-foto{color:#8A6BA8}
.tipo-video{color:#A8506B}
.tipo-zip{color:#6E6A61}
.top-info:hover .tipo-ico{border-color:var(--gold-btn);background:#fff}

.top-txt{min-width:0;display:flex;flex-direction:column;gap:4px}
.top-name{font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.18s}
.top-meta{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-meta i{font-style:normal;opacity:.5;margin:0 2px}

/* botón redondo de descarga, a la derecha */
.top-dl{
  flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  background:var(--cream);transition:.2s;
}
.top-dl:hover{color:#fff;background:var(--gold-btn);border-color:var(--gold-btn)}
.panel-foot{display:flex;justify-content:flex-end;padding-top:11px}

/* ========================= CAMPAÑA DESTACADA ============================= */
/* Banners de abajo: uno solo a lo ancho, o dos en columnas si el segundo
   está lleno. Se decide solo según lo que haya en el editor. */
.camps{display:grid;grid-template-columns:1fr;gap:18px;margin:20px 0 16px}
.camps.dos{grid-template-columns:1fr 1fr}
.camp{position:relative;overflow:hidden;border-radius:var(--radius);isolation:isolate;display:block;color:inherit}
a.camp:hover .btn-gold{filter:brightness(1.06)}
.camps.dos .camp-in{padding:32px 34px;max-width:none}
.camps.dos .camp h2{font-size:clamp(23px,2.3vw,32px)}
.camps.dos .camp p{font-size:14px}
@media(max-width:860px){.camps.dos{grid-template-columns:1fr}}
.camp-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#2A2A28}
.camp-ov{position:absolute;inset:0;z-index:-1}
.camp-in{padding:38px 46px;max-width:620px;color:#fff;height:100%;display:flex;flex-direction:column;justify-content:center}
.camp-kicker{font-size:12px;letter-spacing:.2em;color:var(--gold-soft);text-transform:uppercase}
.camp h2{font-family:var(--serif);font-size:clamp(28px,3.1vw,40px);line-height:1.08;letter-spacing:.05em;margin:12px 0 15px}
.camp p{font-size:15px;line-height:1.65;margin:0 0 28px;color:rgba(255,255,255,.9)}
.camp .btn{align-self:flex-start}

/* ============================ FOOTER ==================================== */
.ft{padding:54px 0 0;font-size:13px}
.ft-in{display:grid;grid-template-columns:250px 1fr 1fr auto;gap:40px;align-items:start}
.ft-brand img{width:150px;opacity:.95}
.ft-cols{grid-column:2 / 4;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.ft-col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ft-col a{opacity:.82;transition:.2s}
.ft-col a:hover{opacity:1;color:var(--gold-soft)}
.ft-contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ft-contact li{display:flex;align-items:center;gap:9px;opacity:.85;white-space:nowrap}
.ft-contact a:hover{color:var(--gold-soft)}
.ft-dot{opacity:.5;margin:0 2px}
.ft-legal{margin-top:44px;border-top:1px solid rgba(255,255,255,.12);padding:18px 0;text-align:center;font-size:11px;letter-spacing:.06em;opacity:.65}

/* ======================= PÁGINAS INTERNAS =============================== */
.page-hero{position:relative;color:#fff;padding:52px 0 30px;background:var(--dark);overflow:hidden;isolation:isolate}
.page-hero .hero-bg{opacity:.55;background:none}
.page-hero .hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.page-hero h1{font-size:clamp(26px,3.6vw,40px);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:16px}
/* ícono propio (imagen) en el título: se pinta blanco como los demás */
.page-hero h1 .titulo-img{flex:none;width:auto;object-fit:contain;filter:brightness(0) invert(1)}
.crumbs{margin-top:14px;font-size:12.5px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;opacity:.9}
.crumbs a:hover{color:var(--gold-soft)}
.crumbs .sep{opacity:.5}
.crumbs b{font-weight:500}

.seccion{padding:44px 0 70px;min-height:340px}
.seccion h2{font-size:20px;margin-bottom:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.grid-sep{
  margin:34px 0 18px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.grid-sep em{font-style:normal;text-transform:none;letter-spacing:0;font-size:13px;color:#9A958C}
.grid-sep em::before{content:'·';margin-right:14px}

/* Tarjetas de carpeta / archivo */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:.25s}
.card:hover{box-shadow:0 12px 28px rgba(0,0,0,.09);transform:translateY(-3px)}
.card-media{
  display:block;aspect-ratio:1/1;position:relative;overflow:hidden;
  background:linear-gradient(100deg,#EFECE7 30%,#F7F5F1 50%,#EFECE7 70%);
  background-size:220% 100%;animation:cargando 1.4s ease-in-out infinite;
}
.card-media.lista{animation:none;background:#EFECE7}
@keyframes cargando{0%{background-position:130% 0}100%{background-position:-30% 0}}
.card-media img{width:100%;height:100%;position:relative;z-index:1}
.card-media.fit-contain{background:#fff;padding:0}
.card-media.fit-contain img{padding:6px}
.card-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#BDB7AC}
.card-eye{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(28,27,24,.34);color:#fff;opacity:0;transition:.25s;
}
.card:hover .card-eye{opacity:1}
.card-body{padding:14px;display:flex;align-items:flex-start;gap:10px;flex:1}
.card-info{flex:1;min-width:0}
.card-title{font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500}
.card-meta{margin-top:5px;font-size:11px;color:var(--ink-soft);display:flex;gap:8px}
.card-ext{
  position:absolute;top:8px;right:8px;z-index:2;background:rgba(34,35,37,.78);color:#fff;
  font-size:10px;letter-spacing:.07em;padding:3px 7px;border-radius:2px;font-weight:500;
}
.card-ph--file{flex-direction:column;gap:8px;color:#B9B4A9;display:none}
.card-ph--file b{font-size:11px;letter-spacing:.08em;font-weight:600}
.card-media.sin-img{background:#F2EFEA}
.card-media.sin-img .card-ph--file{display:flex}
.card-dl{color:var(--ink);flex:none;border:1px solid var(--line);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:.2s}
.card-dl:hover{border-color:var(--gold);color:var(--gold)}
.card-cta{
  display:inline-block;border:1px solid var(--line);border-radius:999px;
  padding:7px 16px;font-size:12px;color:var(--ink);transition:.2s;
}
.card-cta:hover{border-color:var(--gold);color:var(--gold)}
.card--folder .card-body{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:16px}
/* Círculo para seleccionar: siempre visible, como una casilla */
.card-pick{
  position:absolute;top:10px;left:10px;z-index:3;width:28px;height:28px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.95);background:rgba(28,27,24,.28);color:transparent;
  display:flex;align-items:center;justify-content:center;transition:.18s;
  box-shadow:0 1px 5px rgba(0,0,0,.18);backdrop-filter:blur(2px);
}
.card-pick:hover{background:rgba(28,27,24,.5);transform:scale(1.08)}
.card.is-sel .card-pick{background:var(--gold-btn);border-color:#fff;color:#fff}
.card.is-sel{border-color:var(--gold-btn);box-shadow:0 0 0 2px var(--gold-btn) inset}
.card.is-sel .card-media::after{
  content:'';position:absolute;inset:0;background:rgba(194,155,100,.16);pointer-events:none;z-index:2;
}
.card-path{padding:0 14px 12px;margin-top:-2px;font-size:11px;color:#9A958C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Bloque inferior de búsqueda (dentro de las categorías) */
.bloque-buscar{margin-top:56px;padding-top:34px;border-top:1px solid var(--line)}
.bloque-buscar h2{font-size:18px;margin-bottom:20px;font-weight:400}

/* Chips de búsqueda sugerida */
.chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:18px}
.chip{border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-size:13px;background:#fff;transition:.2s}
.chip:hover,.chip.on{border-color:var(--gold);color:var(--gold)}
.chip b{font-weight:500;color:#A8A196;margin-left:5px;font-size:11.5px}
.chip:hover b{color:var(--gold-soft)}

/* Barra de filtros */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}

/* Buscador de páginas internas */
.buscador{display:flex;gap:10px;max-width:620px;margin:0 0 30px}
.buscador input{
  flex:1;border:1px solid var(--line);border-radius:999px;padding:15px 24px;
  font-family:inherit;font-size:15px;outline:0;background:#fff;
}
.buscador input:focus{border-color:var(--gold)}

/* Avisos y cargando */
.aviso{text-align:center;padding:70px 20px;color:var(--ink-soft)}
.aviso h3{font-size:19px;color:var(--ink);margin-bottom:10px}
.aviso p{margin:0 0 22px}
.cargando{display:flex;flex-direction:column;align-items:center;gap:10px;padding:70px 0;color:var(--ink-soft)}
.cargando span{width:8px;height:8px;border-radius:50%;background:var(--gold-soft);display:inline-block;animation:pulso 1s infinite}
.cargando{flex-direction:row;flex-wrap:wrap;justify-content:center}
.cargando p{width:100%;text-align:center;margin:8px 0 0;font-size:13px}
.cargando span:nth-child(2){animation-delay:.15s}
.cargando span:nth-child(3){animation-delay:.3s}
@keyframes pulso{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* Barra de selección */
.selbar{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,160%);
  background:var(--dark);color:#fff;border-radius:999px;padding:12px 14px 12px 26px;
  display:flex;align-items:center;gap:16px;z-index:80;box-shadow:0 14px 40px rgba(0,0,0,.3);
  transition:.35s cubic-bezier(.2,.9,.3,1);font-size:13.5px;
  opacity:0;visibility:hidden;pointer-events:none;
}
.selbar.on{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto}
.selbar .btn{padding:10px 20px}
.selbar .btn-ghost{border-color:rgba(255,255,255,.3);color:#fff}
.selbar .btn-ghost:hover{border-color:#fff;color:#fff}

/* ===================== AVISO DE PRIVACIDAD =============================== */
.priv{
  position:fixed;left:24px;right:24px;bottom:24px;z-index:70;
  background:var(--dark);color:#fff;border-radius:10px;
  padding:18px 22px;display:flex;align-items:center;gap:26px;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  transform:translateY(160%);opacity:0;transition:.38s cubic-bezier(.2,.9,.3,1);
  max-width:980px;margin:0 auto;
}
.priv.on{transform:translateY(0);opacity:1}
.priv p{font-size:13px;line-height:1.6;margin:0;color:rgba(255,255,255,.86)}
.priv a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:2px}
.priv a:hover{color:#fff}
.priv .btn{flex:none;padding:12px 26px;font-size:12.5px}
@media (max-width:640px){
  .priv{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
    flex-direction:column;align-items:stretch;gap:14px;padding:16px 18px}
  .priv p{font-size:12.5px}
  .priv .btn{justify-content:center}
  /* si la barra de selección está arriba, el aviso se corre */
  body:has(.selbar.on) .priv{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ===================== ESQUELETOS MIENTRAS CARGA ========================= */
/* Molde gris de lo que está por llegar. Se siente más rápido que un bloque
   vacío y evita que la página salte cuando aparece el contenido. */
.hueso{
  background:linear-gradient(100deg,
    rgba(0,0,0,.045) 28%, rgba(0,0,0,.075) 48%, rgba(0,0,0,.045) 68%);
  background-size:220% 100%;
  animation:hueso 1.5s ease-in-out infinite;
  border-radius:5px;
}
@keyframes hueso{ from{background-position:180% 0} to{background-position:-40% 0} }
.hueso-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
}
.hueso-media{height:170px;border-radius:0}
.hueso-body{padding:13px 13px 16px;display:flex;flex-direction:column;gap:9px}
.hueso-linea{height:11px}
.hueso-linea.corta{height:9px;opacity:.7}
.hueso-fila{
  display:flex;align-items:center;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--line);
}
.hueso-fila:last-child{border-bottom:0}
.hueso-fila>div:not(.hueso){display:flex;flex-direction:column;gap:8px}
.hueso-tipo{width:46px;height:46px;flex:none;border-radius:9px}
.hueso-icono{width:42px;height:42px;flex:none;border-radius:50%}
@media(max-width:640px){
  .hueso-tipo{width:40px;height:40px;border-radius:8px}
  .hueso-icono{width:38px;height:38px}
}
.vacio{color:var(--ink-soft);font-size:14px;padding:18px 2px}
@media (prefers-reduced-motion:reduce){ .hueso{animation:none} }

/* Visor */
.visor{position:fixed;inset:0;background:rgba(18,17,15,.94);z-index:100;display:flex;align-items:center;justify-content:center;padding:40px}
.visor-in{max-width:1100px;width:100%;max-height:100%;display:flex;flex-direction:column;gap:14px}
.visor-img{max-height:76vh;width:auto;margin:0 auto;object-fit:contain}
.visor-frame{width:100%;height:76vh;border:0;background:#fff;border-radius:2px}
.visor-video{width:100%;max-height:76vh;background:#000;border-radius:2px;display:block}
.visor-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#fff}
.visor-name{font-size:14px;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-acts{display:flex;gap:10px;flex:none}
/* sobre el fondo oscuro del visor los botones van en blanco */
.visor-acts .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.visor-acts .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.visor-x{position:absolute;top:20px;right:24px;color:#fff;opacity:.8}
.visor-x:hover{opacity:1}
.visor-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;opacity:.7;padding:16px}
.visor-nav:hover{opacity:1}
.visor-prev{left:14px;transform:translateY(-50%) rotate(180deg)}
.visor-next{right:14px}

/* ============================ ACCESO ==================================== */
.acceso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:60px 20px;position:relative;isolation:isolate}
.acceso-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#2A2A28}
.acceso-bg::after{content:'';position:absolute;inset:0;background:rgba(20,22,26,.35)}
.acceso-card{background:#fff;width:100%;max-width:520px;padding:52px 56px;border-radius:2px;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.acceso-card h1{font-size:29px;text-align:center;font-weight:500;margin-bottom:16px}
.acceso-card .lead{text-align:center;font-size:14px;color:var(--ink-soft);margin:0 0 18px}
.acceso-card .lead a{color:var(--gold);text-decoration:underline}
.campo{margin-top:24px}
.campo label{display:block;font-size:13px;margin-bottom:6px;color:var(--ink)}
.campo-in{position:relative}
.campo input[type=email],.campo input[type=password],.campo input[type=text]{
  width:100%;border:0;border-bottom:1px solid var(--line);padding:10px 34px 10px 0;
  font-family:inherit;font-size:14px;outline:0;background:none;color:var(--ink);
}
.campo input:focus{border-bottom-color:var(--gold)}
.campo .ojo{position:absolute;right:0;top:6px;color:var(--ink-soft)}
.fila{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;font-size:13px}
.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;line-height:1.5}
.check input{margin-top:3px;accent-color:var(--gold);width:16px;height:16px;flex:none}
.link-sutil{color:var(--ink-soft);text-decoration:underline}
.link-sutil:hover{color:var(--gold)}
.acceso-card .btn{width:100%;margin-top:30px;padding:15px}
.acceso-error{background:#FBEDEC;color:#9B2C22;font-size:13px;padding:11px 14px;border-radius:2px;margin-top:20px}
/* Aviso de dónde puede caer el correo con las credenciales (Promociones/Spam) */
.acceso-aviso-correo{background:#F3E6CF;color:#6B4E17;font-size:13px;line-height:1.6;
  padding:11px 14px;border-radius:4px;margin-top:14px}
.acceso-alt{text-align:center;margin-top:26px;font-size:13.5px;color:var(--ink-soft)}
.acceso-alt a{color:var(--gold)}
.hs-wrap{margin-top:26px}

/* ============================ RESPONSIVE ================================ */
@media (max-width:1080px){
  .panels{grid-template-columns:1fr}
  .cats-grid{grid-template-columns:repeat(3,1fr)}
  .nov-track{grid-template-columns:repeat(2,1fr)}
  .ft-in{grid-template-columns:1fr 1fr;gap:30px}
  .ft-cols{grid-column:auto}
}
/* El menú pasa a hamburguesa cuando deja de caber. El corte es 1000px y no
   860 porque en español los textos son más largos ("EDITAR CONTENIDO",
   "CENTRO DE AYUDA") y a 900px se desbordaban. */
@media (max-width:1000px){
  /* --- menú de teléfono --- */
  .hd-burger{display:flex;position:relative;z-index:2;margin-left:auto;
    width:44px;height:44px;justify-content:center;align-items:center;gap:0}
  .hd-burger span{position:absolute;transition:transform .28s, opacity .2s}
  .hd-burger span:nth-child(1){transform:translateY(-7px)}
  .hd-burger span:nth-child(3){transform:translateY(7px)}
  body.menu-abierto .hd-burger span:nth-child(1){transform:rotate(45deg)}
  body.menu-abierto .hd-burger span:nth-child(2){opacity:0}
  body.menu-abierto .hd-burger span:nth-child(3){transform:rotate(-45deg)}
  .hd-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--hd-bg);
    flex-direction:column;align-items:stretch;gap:0;padding:0 20px;
    max-height:0;overflow:hidden;transition:.3s;border-bottom:1px solid var(--hd-border);
    box-shadow:0 18px 30px rgba(0,0,0,.10);
  }
  body.menu-abierto .hd-nav{max-height:80vh;overflow:auto;padding:8px 20px 22px}
  .hd-nav>*{width:100%;padding:15px 0;border-bottom:1px solid var(--hd-border)}
  .hd-nav>*:last-child{border-bottom:0}
  .hd-files{justify-content:center;padding:15px 20px;margin-top:14px;border:1px solid var(--gold-soft)}
  .hd-link,.hd-user{white-space:normal}
  .hd-user span{max-width:none}
  .hd-lang{justify-content:center;gap:14px;font-size:14px;padding-top:18px}
  .hd-lang a{padding:6px 10px}
  /* velo que tapa la página mientras el menú está abierto */
  .hd-velo{position:fixed;inset:0;background:rgba(20,19,17,.35);opacity:0;pointer-events:none;transition:.25s;z-index:-1}
  body.menu-abierto .hd-velo{opacity:1;pointer-events:auto}
}

@media (max-width:860px){
  .wrap{padding:0 20px}


  .hero-in{padding-top:56px;padding-bottom:80px}
  .hero-sub{max-width:100%}
  .cats-grid{grid-template-columns:repeat(3,1fr)}
  .camp-in{padding:40px 28px}
  .ft-in{grid-template-columns:1fr}
  .ft-cols{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .acceso-card{padding:38px 26px}
  .visor{padding:16px}
}

/* ==========================================================================
   TELÉFONO
   La foto del hero es angosta y el texto queda encima, así que el velo pasa a
   ser de arriba hacia abajo; las novedades se recorren deslizando el dedo; y
   todo lo que se toca queda de al menos 44px.
   ========================================================================== */
@media (max-width:640px){
  html{-webkit-text-size-adjust:100%}
  a,button{-webkit-tap-highlight-color:rgba(185,144,90,.18)}
  .wrap{padding:0 18px}

  /* --- header más bajo ---
     OJO: no sirve redefinir --hd-height acá. El sitio la escribe como estilo
     en línea sobre <html> al aplicar la marca, y un estilo en línea le gana a
     una regla de hoja de estilo. Por eso el header seguía igual de alto en el
     celular. Se usan variables propias de teléfono, aplicadas al elemento. */
  .hd-in{gap:12px;min-height:var(--hd-height-movil,72px)!important}
  .hd-logo img{height:var(--logo-h-movil,44px)!important;width:auto}

  /* --- hero --- */
  .hero{min-height:clamp(440px,124vw,545px)!important}
  .hero-ov{
    background:var(--ov-movil,linear-gradient(180deg,#F6F2EF,rgba(246,242,239,0)))!important;
    clip-path:none!important;mix-blend-mode:normal!important;
  }
  .hero-in{padding:32px 18px 128px!important;min-height:0!important;justify-content:flex-start}
  .hero-kicker{font-size:12px;letter-spacing:.18em}
  .hero-rule{margin:10px 0 16px}
  .hero h1{font-size:clamp(33px,9.3vw,42px);max-width:100%;line-height:1.06}
  .hero-sub{margin:16px 0 22px;font-size:15px}
  .hero-cta{align-self:stretch;text-align:center;justify-content:center}
  .hero-search{bottom:26px!important;padding:0 18px}
  .hero-search form{padding:4px 6px 4px 16px;gap:8px}
  .hero-search input{font-size:16px;padding:13px 0;min-width:0}
  .hero-search .ico{flex:none}
  .hero-search button{flex:none;width:42px;height:42px}

  /* --- cajas de categoría: más bajas y parejas --- */
  .cats{padding:26px 0 4px}
  .cats-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .cat{padding:20px 10px 16px;border-radius:8px}
  .cat .ico,.cat-img{height:40px!important;width:auto}
  .cat-label{margin:14px 0 10px;font-size:13.5px}
  .cat-arrow .ico{width:16px;height:16px}
  /* Si queda una sola caja en la última fila (hoy, "Revisar Disponibilidad"),
     ocupa el ancho completo como una FILA: ícono y texto juntos a la
     izquierda, flecha anclada a la derecha. Antes iba todo centrado con el
     ícono al tamaño de las cajas grandes, y quedaba como un parche. */
  .cats-grid .cat:last-child:nth-child(odd){
    grid-column:1 / -1;display:flex;align-items:center;gap:14px;
    padding:16px 18px;text-align:left;
  }
  .cats-grid .cat:last-child:nth-child(odd) .ico,
  .cats-grid .cat:last-child:nth-child(odd) .cat-img{height:28px!important;flex:none;margin:0}
  .cats-grid .cat:last-child:nth-child(odd) .cat-label{margin:0;flex:1;min-width:0;font-size:14px}
  .cats-grid .cat:last-child:nth-child(odd) .cat-arrow{flex:none;margin-left:auto;color:var(--gold)}
  /* La cinta flota sobre el borde también en la fila del celular; solo se
     achica un poco y se le da aire arriba para que no toque la caja anterior */
  .cats-grid .cat--dispo:last-child:nth-child(odd){margin-top:8px}
  .cats-grid .cat--dispo:last-child:nth-child(odd) .cat-badge{font-size:9px;padding:3px 8px;top:-10px}
  .cats-grid .cat--dispo:last-child:nth-child(odd) .cat-label{max-width:none}

  /* --- paneles --- */
  .panels{margin-top:22px;border-radius:8px}
  /* sin esto la fila de novedades que se desliza estira el panel a lo ancho */
  .panels>*,.panel{min-width:0}
  .panel{padding:18px 16px 16px}
  .panel--top{border-left:0;border-top:1px solid var(--line)}
  .panel-hd h2{font-size:18px}

  /* --- novedades: se pasan deslizando --- */
  .nov-track{
    display:flex;grid-template-columns:none;gap:12px;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -16px;padding:2px 16px 8px;
  }
  .nov-track::-webkit-scrollbar{display:none}
  .nov{flex:0 0 76%;scroll-snap-align:start;border-radius:8px}
  .nov-media{flex:none;height:190px;min-height:0}
  .nov-eye{opacity:1;background:transparent}
  .nov-eye .ico{filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
  .nov-body{padding:12px 12px 13px}
  .nov-title{font-size:14px}
  .nov-dl{padding:6px;margin:-6px}
  .dots{margin-top:2px}

  /* --- más descargado --- */
  .top-list li{padding:13px 0;gap:12px}
  .top-info{gap:12px}
  .tipo-ico{width:40px;height:40px;border-radius:8px}
  .tipo-ico svg{width:23px;height:23px}
  .top-name{font-size:14px}
  .top-meta{font-size:11.5px}
  .top-dl{width:38px;height:38px}
  .panel-hd{flex-wrap:wrap}
  .panel-sub{font-size:12.5px}

  /* --- banner de abajo --- */
  /* El texto va sobre la foto, pero ocupando solo la parte de arriba: así se
     lee bien y abajo se sigue viendo la imagen. */
  .camps{gap:14px;margin:18px 0 12px}
  .camp{border-radius:8px}
  .camp-ov{background:var(--ov-movil,linear-gradient(180deg,rgba(20,19,17,.78),rgba(20,19,17,.25)))!important;
    clip-path:none!important}
  .camp-in{padding:26px 20px 30px;justify-content:flex-start;max-width:none}
  .camp-kicker{font-size:11px;letter-spacing:.18em}
  /* el título respeta los saltos de línea que se pusieron en el administrador,
     así que no se le pone ancho máximo: se le baja el tamaño y ya */
  .camp h2{font-size:clamp(21px,5.7vw,27px);letter-spacing:.03em;line-height:1.16;margin:9px 0 10px}
  .camp p{font-size:14px;line-height:1.55;margin-bottom:18px;max-width:34ch}
  .camp .btn{align-self:flex-start;padding:12px 22px;font-size:12.5px}

  /* --- páginas interiores --- */
  .page-hero{padding:30px 0 26px}
  .page-hero h1{font-size:clamp(21px,6vw,27px);gap:11px}
  .page-hero h1 .ico,.page-hero h1 .titulo-img{width:26px;height:26px;flex:none}
  .crumbs{font-size:12px;margin-top:10px}
  .seccion{padding:26px 0 40px}
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .card-title{font-size:13.5px}
  .card-meta{font-size:11.5px}
  .card-cta{padding:9px 14px;font-size:12.5px}
  .acciones{flex-wrap:wrap;gap:10px}
  .acciones .btn{flex:1 1 auto;justify-content:center}
  .grid-sep{margin:24px 0 14px;gap:4px;flex-direction:column;align-items:flex-start}
  .grid-sep em{font-size:12.5px;line-height:1.45}
  .grid-sep em::before{content:none}
  .chips{gap:8px}
  .chip{padding:9px 14px;font-size:12.5px}

  /* --- barra de selección --- */
  .selbar{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
    transform:translateY(160%);width:auto;border-radius:12px;gap:10px;padding:12px 14px;
    display:grid;grid-template-columns:1fr 1fr}
  .selbar.on{transform:translateY(0)}
  .selbar>span{grid-column:1 / -1;text-align:center;font-size:12.5px}
  .selbar .btn{padding:12px 10px;font-size:12.5px;justify-content:center;text-align:center}

  /* --- visor --- */
  .visor{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .visor-in{gap:10px}
  .visor-img{max-height:66vh}
  .visor-frame,.visor-video{height:66vh}
  .visor-x{top:8px;right:8px;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
  .visor-nav{width:44px;height:44px;background:rgba(0,0,0,.35);border-radius:50%;
    display:flex;align-items:center;justify-content:center}
  .visor-bar{flex-direction:column;align-items:stretch;gap:10px}
  .visor-name{font-size:13px;text-align:center}
  .visor-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .visor-acts .btn{justify-content:center;padding:13px 10px;font-size:12.5px}

  /* --- acceso y ayuda --- */
  .acceso{min-height:100dvh}
  .acceso-card{padding:30px 20px;border-radius:10px}
  .acceso-card h1{font-size:26px}
  .faq-q{padding:16px 12px;font-size:14.5px}
  .faq-a{padding:0 12px 16px}

  /* --- footer --- */
  .ft{padding:38px 0 0}
  .ft-in{gap:26px}
  .ft-cols{grid-template-columns:1fr 1fr;gap:20px}
  .ft-col li{padding:5px 0}
  .ft-contact li{padding:6px 0}
  .ft-legal{font-size:11px}
}

@media (max-width:380px){
  .cats-grid{grid-template-columns:1fr}
  /* En pantallas muy angostas todas las cajas van apiladas; la de
     Disponibilidad mantiene su forma de fila, que ahí también se ve bien. */
  .grid{grid-template-columns:1fr}
  .nov{flex:0 0 84%}
  .ft-cols{grid-template-columns:1fr}
}