/* ---- vendor-masterkit.css ---- */
/* ============================================================================
BASE VISUAL — hoja de estilos de masterkit.lastorres.com, tal cual, para que
este sitio herede exactamente el mismo diseño (header, hero, tarjetas, visor,
cajas inferiores, footer). Solo se le quitaron las declaraciones de fuentes:
las tipografías se declaran en site.css.
NO EDITAR ESTE ARCHIVO: los ajustes propios de este sitio van en site.css.
============================================================================ */
/* ============================================================================
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.
--------------------------------------------------------------------------- */
: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 ![]()
(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}
.ok-aviso{background:#EDF6EE;color:#1F5E2B;font-size:13.5px;padding:12px 14px;border-radius:2px}
/* 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 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}
}
/* ---- site.css ---- */
/* ============================================================================
SOSTENIBILIDAD — LAS TORRES PATAGONIA
Ajustes propios de este sitio sobre la base visual de masterkit
(vendor-masterkit.css). Aquí viven: tipografías, colores de marca y las
diferencias de este home (un solo panel de documentos, sin buscador).
============================================================================ */
/* ---------- TIPOGRAFÍAS ---------------------------------------------------
· ABC Arizona Flare → títulos del hero y de las cajas inferiores (la misma
de masterkit; solo existe en peso Bold).
· Figtree → todo el resto. Es libre (SIL OFL) y va alojada en el sitio. */
@font-face{
font-family:'ABC Arizona Flare';
src:url('/assets/fonts/ABCArizonaFlare-Bold.woff2') format('woff2');
font-weight:400 900;font-style:normal;font-display:swap;
}
@font-face{
font-family:'Figtree';
src:url('/assets/fonts/figtree-latin-wght-normal.woff2') format('woff2');
font-weight:300 900;font-style:normal;font-display:swap;
}
/* ---------- MARCA: los mismos valores que masterkit publica hoy ------------ */
:root{
--cream:#FDFBFA; --cream-soft:#FDFDFB; --ink:#212121; --ink-soft:#6E6A61;
--gold:#B9905A; --gold-soft:#C3B2A0; --gold-btn:#C29B64; --dark:#222325;
--line:rgba(0,0,0,0.08); --radius:4px; --radio-boton:6px; --search-bg:#F5F5F5;
--serif:'ABC Arizona Flare','Playfair Display',Georgia,serif;
--sans:'Figtree','Helvetica Neue',Arial,sans-serif;
--hd-font:'Figtree','Helvetica Neue',Arial,sans-serif;
--hd-bg:#F6F2EF; --hd-text:#232323; --hd-accent:#B9905A; --hd-border:transparent;
--hd-height:166px; --logo-h:98px; --hd-height-movil:72px; --logo-h-movil:44px;
--hd-size:14px; --hd-spacing:0.03em; --hd-transform:uppercase; --hd-weight:500;
--wrap:1220px;
}
/* El sitio se dibuja dentro de un contenedor (.lt-site) para poder mostrarlo
también como vista previa dentro del editor. */
.lt-site{background:var(--cream);color:var(--ink);min-height:100%}
.lt-site [hidden]{display:none!important}
/* Foco visible para quien navega con teclado */
.lt-site a:focus-visible,.lt-site button:focus-visible,
.visor a:focus-visible,.visor button:focus-visible{outline:2px solid var(--gold-btn);outline-offset:3px;border-radius:3px}
/* ---------- HEADER --------------------------------------------------------- */
.hd-logo img{width:auto;display:block}
.hd-lang span{opacity:.6}
/* ---------- HERO (sin buscador) -------------------------------------------- */
/* El título puede ser una sola palabra larga ("Sostenibilidad"): se le permite
ocupar su ancho natural en vez de cortarse. */
.hero h1{overflow-wrap:normal;word-break:normal}
/* Títulos largos ("Master Kit Sostenibilidad"): bajan de tamaño y la columna
se ensancha, para que cada línea quepa entera. El largo lo mide site.js. */
.hero h1[data-largo="medio"]{font-size:clamp(36px,4.3vw,62px);max-width:11.5em}
.hero h1[data-largo="largo"]{font-size:clamp(31px,3.7vw,54px);max-width:15.5em;line-height:1.08}
.hero h1[data-largo="muy-largo"]{font-size:clamp(27px,3.1vw,44px);max-width:20em;line-height:1.12}
@media (max-width:640px){
/* Sin la barra de búsqueda no hace falta reservarle espacio abajo */
.hero-in{padding-bottom:64px!important}
.hero h1[data-largo="medio"]{font-size:clamp(29px,8.2vw,37px);max-width:100%}
.hero h1[data-largo="largo"]{font-size:clamp(25px,7.3vw,32px);max-width:100%;line-height:1.12}
.hero h1[data-largo="muy-largo"]{font-size:clamp(22px,6.3vw,28px);max-width:100%;line-height:1.16}
}
/* ---------- DOCUMENTOS ----------------------------------------------------- */
/* En masterkit este bloque comparte fila con "Más descargado". Aquí va solo,
a todo el ancho. */
.panels.panels--solo{grid-template-columns:1fr;margin-top:48px;scroll-margin-top:24px}
.panels--solo .panel-hd{margin-bottom:20px}
/* La grilla se acomoda a la cantidad de documentos: con 1 o 2 las tarjetas
son grandes; con 3, de a tres; con 4 o más, de a cuatro (como masterkit). */
.nov-track[data-n="1"]{grid-template-columns:minmax(0,620px)}
.nov-track[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.nov-track[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nov-track[data-n="muchos"]{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Aquí no hay un panel vecino que fije el alto, así que la portada lleva su
propia proporción (16:9, la de los documentos apaisados). */
.panels--solo .nov-media{flex:none;aspect-ratio:16/9;min-height:0;max-height:none;width:100%}
.panels--solo .nov-media img{position:absolute;inset:0}
.nov-media{cursor:pointer}
/* Pie de la tarjeta: el título a la izquierda y el botón de descarga a la
derecha, en una sola fila (aquí no hay fecha que mostrar debajo). */
.panels--solo .nov-body{flex-direction:row;align-items:center;gap:14px;padding:14px 14px 14px 16px}
.panels--solo .nov-title{flex:1;min-width:0;min-height:0}
.nov-dl{
flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
border:1px solid var(--line);border-radius:50%;background:var(--cream);color:var(--ink);transition:.2s;
}
.nov-dl:hover{color:#fff;background:var(--gold-btn);border-color:var(--gold-btn)}
/* Tarjetas grandes (1 o 2 documentos): la letra acompaña el tamaño */
.nov-track[data-n="1"] .nov-body,.nov-track[data-n="2"] .nov-body{padding:16px 18px 16px 22px}
.nov-track[data-n="1"] .nov-title,.nov-track[data-n="2"] .nov-title{font-size:17px}
.nov-track[data-n="3"] .nov-title{font-size:15px}
/* Si un documento no tiene portada (ni propia, ni guardada, ni la entrega
Drive), no queda un hueco: se arma una portada con su título. */
.nov-ph{
position:absolute;inset:0;display:none;flex-direction:column;gap:14px;align-items:center;justify-content:center;
padding:7% 11%;text-align:center;color:#C9B58F;background:#27302A;
}
.nov-ph b{
font-family:var(--serif);font-weight:700;color:#fff;font-size:clamp(15px,1.55vw,22px);line-height:1.22;letter-spacing:.01em;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.nov-track[data-n="3"] .nov-ph b,.nov-track[data-n="muchos"] .nov-ph b{font-size:15px}
.nov-media.sin-img{background:#27302A}
.nov-media.sin-img img{display:none}
.nov-media.sin-img .nov-ph{display:flex}
/* Mientras llega la miniatura: el mismo brillo suave que usa masterkit */
.nov-media.cargando-img{
background:linear-gradient(100deg,#EFECE7 30%,#F7F5F1 50%,#EFECE7 70%);
background-size:220% 100%;animation:cargando 1.4s ease-in-out infinite;
}
.nov-media.cargando-img img{opacity:0}
.nov-media img{transition:opacity .3s}
.docs-vacio{color:var(--ink-soft);font-size:14px;margin:0;padding:6px 2px 10px}
@media (max-width:1080px){
.nov-track[data-n="3"],.nov-track[data-n="muchos"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.panels.panels--solo{margin-top:22px}
/* Con 1 o 2 documentos van apilados y completos: no hay nada escondido que
obligue a deslizar. Con 3 o más se deslizan con el dedo, como en masterkit. */
.nov-track[data-n="1"],.nov-track[data-n="2"]{
display:grid;grid-template-columns:1fr;gap:14px;overflow:visible;margin:0;padding:0;
}
.nov-track[data-n="1"] .nov,.nov-track[data-n="2"] .nov{flex:none}
.panels--solo .nov-media{height:auto}
.nov-track[data-n="1"] .nov-body,.nov-track[data-n="2"] .nov-body{padding:12px 12px 12px 16px}
.nov-track[data-n="1"] .nov-title,.nov-track[data-n="2"] .nov-title{font-size:15.5px}
.nov-dl{width:44px;height:44px;margin:0}
/* En el celular no hay "pasar el mouse": el ojo queda siempre a la vista,
como en masterkit, pero en una esquina para no tapar la portada. */
.panels--solo .nov-eye{inset:auto 10px 10px auto;width:38px;height:38px;border-radius:50%;background:rgba(28,27,24,.58)}
.panels--solo .nov-eye .ico{filter:none;width:19px;height:19px}
}
/* Las fotos van dentro de para poder dar una versión de celular */
.hero-bg picture,.camp-bg picture{display:contents}
/* ---------- CAJAS INFERIORES ----------------------------------------------- */
/* Alto de cada caja: 300px cuando van dos en columnas, 262px si va una sola
(lo fija el sitio con --camp-alto) y 330px en el celular, como masterkit. */
.camp,.camp-in{min-height:var(--camp-alto,262px)}
@media (max-width:640px){ .camp,.camp-in{min-height:330px} }
/* Toda la caja es un solo enlace; el "botón" es parte de ella. */
a.camp{cursor:pointer}
/* De a dos, el texto no pasa de la zona donde el velo lo deja leer bien */
.camps.dos .camp p{max-width:38ch}
.camp h2,.camp p,.camp-kicker{text-shadow:0 1px 14px rgba(0,0,0,.28)}
a.camp .camp-bg img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
a.camp:hover .camp-bg img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){ a.camp:hover .camp-bg img{transform:none} }
.camp .btn{pointer-events:none}
.camp:focus-visible{outline:2px solid var(--gold-btn);outline-offset:3px}
.camps{margin-bottom:44px}
@media (max-width:640px){ .camps{margin-bottom:26px} }
/* ---------- VISOR ---------------------------------------------------------- */
.visor{animation:visorEntra .2s ease-out}
@keyframes visorEntra{from{opacity:0}to{opacity:1}}
/* El visor de Drive es oscuro: el marco también, para que no haya un
destello blanco mientras carga el documento. */
.visor-marco{position:relative;width:100%;height:76vh;background:#202124;border-radius:2px;overflow:hidden}
.visor-marco .visor-frame{position:absolute;inset:0;height:100%;z-index:1;background:transparent}
.visor-carga{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;
color:#CFCABF;font-size:13.5px}
.visor-carga i{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:var(--gold-btn);
animation:visorGira .8s linear infinite;display:block}
@keyframes visorGira{to{transform:rotate(360deg)}}
.visor-lento{font-size:12.5px;opacity:.75}
/* Cuando el lugar donde se mira no deja abrir Drive (una vista previa) */
.visor-no{gap:10px;padding:0 24px;text-align:center;color:#CFCABF}
.visor-no .ico{color:var(--gold-btn);margin-bottom:4px}
.visor-no b{font-weight:500;font-size:16px;color:#fff}
.visor-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;top:12px;right:14px}
@media (max-width:640px){
.visor-marco{height:66vh}
.visor-x{top:4px;right:4px}
.visor-in{margin-top:34px}
}
@media (prefers-reduced-motion:reduce){
.visor,.visor-carga i,.nov-media.cargando-img{animation:none}
}
/* ---------- FOOTER --------------------------------------------------------- */
.ft-contact a{transition:.2s}
[hidden]{display:none!important}