/* ==========================================================================
TECNOLAB — Sistema de diseño
Minimalista. Movimiento solo donde aporta (cortina de #why-tecnolab, conteo de números, loop de reseñas,
ventanas de fotos, lente del hero y cards 3D del Home); todo respeta prefers-reduced-motion.
========================================================================== */
/* Respaldo con métricas parecidas a Montserrat: evita que el h1 cambie de alto
(CLS) cuando llega la fuente real. */
@font-face {
font-family: "Montserrat Fallback";
src: local("Arial");
size-adjust: 113%;
ascent-override: 85%;
descent-override: 22%;
line-gap-override: 0%;
}
:root {
/* ---- Color de marca ---- */
--black: #000000;
--blue: #04A5FF;
--blue-hover: #3DBAFF;
--blue-rgb: 4, 165, 255;
/* #04A5FF sobre #F5F5F7 da 2.46:1: sobre claro el azul de texto/íconos es este (5.24:1) */
--blue-on-light: #0069B4;
--white: #FFFFFF;
/* ---- Escala de superficies (sin saltos de blanco a negro) ---- */
--surface-0: #0B0720; /* marino casi negro: solo paneles chicos (menú móvil, tarjeta "ver todo"); las secciones oscuras usan .bg-post */
/* ---- Fondo "posteo": degradé circular azul acero con una luz clara en un borde (clase .bg-post) ---- */
--post-pale: #D6E1F0;
--post-light: #A9BDDB;
--post-mid: #7A96C8;
--post-blue: #3F6399;
--post-steel: #34558C;
--post-deep: #274475;
--post-base: #2A4A7E;
--post-base-grad: radial-gradient(ellipse 70% 80% at 62% 40%, var(--post-blue) 0%, var(--post-steel) 45%, var(--post-deep) 100%);
--surface-2: #F5F5F7; /* gris claro */
/* blanco (--white) para las secciones .surface-white y dentro de las cards */
/* blanco puro solo dentro de las cards */
/* ---- Texto ---- */
--text: #1D1D1F; /* principal sobre claro */
--text-2: #4A4A4F; /* secundario sobre claro (≥4.5:1 sobre #F5F5F7 y blanco) */
--text-inv: #FFFFFF; /* principal sobre negro */
--text-inv-2: #C7C7CC; /* secundario sobre negro */
/* ---- Tipografía ---- */
--font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
--fs-h2: clamp(30px, 4vw, 48px); /* h2 largos (.title-sentence) y números/títulos de card */
--fs-h1-caps: clamp(34px, 4.8vw, 60px); /* titulares en mayúsculas: más anchos, un paso menos */
--fs-h2-caps: clamp(26px, 3.4vw, 40px);
--fs-h3: 22px;
--fs-lead: clamp(18px, 2vw, 20px);
--fs-body: 17px;
--fs-small: 14px; /* mínimo del sitio: nada por debajo */
--fs-btn: 15px;
--fs-price: 20px;
--fs-display: clamp(36px, 4.4vw, 56px);
--fw-title: 600;
--fw-body: 300;
--fw-eyebrow: 600;
--lh-body: 1.6;
/* ---- Espaciado ---- */
--space-section: clamp(64px, 9vw, 112px);
--space-block: 48px;
--space-gutter: 24px;
--container-max: 1200px;
/* Header: cápsula flotante. --header-h es el alto de la cápsula; --header-space, lo que ocupa
desde el borde superior (para paddings, scroll-padding y elementos sticky). Para volver a
barra a todo el ancho: --header-top: 0, --header-radius: 0 y ancho 100%. */
--header-h: 64px;
--header-top: 12px;
--header-space: calc(var(--header-top) + var(--header-h));
--header-radius: 999px;
/* ---- Radios y sombras ---- */
--radius-card: 20px;
--radius-product: 24px;
--radius-media: 14px;
--radius-btn: 999px;
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -8px rgba(0, 0, 0, 0.14);
--shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.06), 0 18px 40px -12px rgba(0, 0, 0, 0.22), 0 30px 60px -30px rgba(0, 0, 0, 0.18);
/* ---- Superficie por defecto (oscura); .surface-* la reemplazan ---- */
--fg: var(--text-inv);
--fg-2: var(--text-inv-2);
--line: rgba(255, 255, 255, 0.16);
--line-strong: rgba(255, 255, 255, 0.5);
--accent: var(--blue);
}
@media (min-width: 768px) {
:root { --space-gutter: 40px; }
}
@media (max-width: 899px) {
:root { --header-h: 56px; --header-top: 8px; --header-radius: 28px; }
}
/* Superficies: cada una trae su propio set de colores de texto/borde/acento.
Solo tres fondos, como en Apple: gris claro (la mayor parte del recorrido), blanco y,
como contraste, el oscuro. Los cambios entre secciones son cortes rectos: sin degradés. */
.surface-dark { --bg: var(--post-base); --fg: var(--text-inv); --fg-2: var(--text-inv-2); --line: rgba(255,255,255,.16); --line-strong: rgba(255,255,255,.5); --accent: var(--blue); }
.surface-light { --bg: var(--surface-2); --fg: var(--text); --fg-2: var(--text-2); --line: rgba(0,0,0,.12); --line-strong: rgba(0,0,0,.45); --accent: var(--blue-on-light); background: var(--bg); }
.surface-white { --bg: var(--white); --fg: var(--text); --fg-2: var(--text-2); --line: rgba(0,0,0,.12); --line-strong: rgba(0,0,0,.45); --accent: var(--blue-on-light); background: var(--bg); }
/* ==========================================================================
FONDO "POSTEO" — degradé circular azul acero con una luz clara en un borde o esquina (nunca bajo el contenido).
Lo llevan todas las secciones oscuras: base .bg-post + una variante que antepone la luz.
a = luz a la izquierda · b = arriba a la derecha · c = abajo al centro (pico blanco: se funde con el footer blanco)
Asignación fija por sección: hero del Home = a, #why-tecnolab = b, franja final = c (el footer es blanco, sin degradé); encabezados de página:
catálogo = b, nosotros = a, servicio = b, plan canje = a, 404 = a. Solo CSS: sin imágenes, sin fixed, sin animación.
Textos sobre este fondo: blanco, secundarios .88, apagados .78; acentos #CDEBFF.
========================================================================== */
.bg-post {
--luz: linear-gradient(transparent, transparent);
--fg: #FFFFFF;
--fg-2: rgba(255, 255, 255, 0.88);
--fg-3: rgba(255, 255, 255, 0.78);
--accent: #CDEBFF;
--line: rgba(255, 255, 255, 0.22);
--line-strong: rgba(255, 255, 255, 0.55);
background: var(--luz), var(--post-base-grad), var(--post-base);
color: var(--fg);
}
.bg-post--a { --luz: radial-gradient(ellipse 24% 100% at 0% 60%, var(--post-pale) 0%, var(--post-light) 24%, rgba(122, 150, 200, 0.45) 55%, rgba(63, 99, 153, 0) 100%); }
/* b: 28% de ancho (antes 36%) para que la luz no llegue por debajo del último link del menú */
.bg-post--b { --luz: radial-gradient(ellipse 28% 78% at 100% 0%, var(--post-pale) 0%, var(--post-light) 24%, rgba(122, 150, 200, 0.45) 55%, rgba(63, 99, 153, 0) 100%); }
.bg-post--c { --luz: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - var(--space-section) * 1.1), #FFFFFF calc(100% - 6px)), radial-gradient(ellipse 70% 30% at 50% 114%, #FFFFFF 0%, #E4ECF7 14%, #A9BDDB 34%, rgba(122, 150, 200, 0.45) 60%, rgba(63, 99, 153, 0) 100%); }
/* Móvil: la luz de la variante a pasa al borde inferior (el contenido ocupa todo el ancho); las demás, en su borde con la mitad de radio */
@media (max-width: 699px) {
.bg-post--a { --luz: radial-gradient(ellipse 120% 36% at 50% 112%, var(--post-pale) 0%, var(--post-light) 24%, rgba(122, 150, 200, 0.45) 55%, rgba(63, 99, 153, 0) 100%); }
.bg-post--b { --luz: radial-gradient(ellipse 18% 39% at 100% 0%, var(--post-pale) 0%, var(--post-light) 24%, rgba(122, 150, 200, 0.45) 55%, rgba(63, 99, 153, 0) 100%); }
.bg-post--c { --luz: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - var(--space-section) * 1.1), #FFFFFF calc(100% - 6px)), radial-gradient(ellipse 35% 15% at 50% 114%, #FFFFFF 0%, #E4ECF7 14%, #A9BDDB 34%, rgba(122, 150, 200, 0.45) 60%, rgba(63, 99, 153, 0) 100%); }
}
/* Botones y números sobre el degradé */
.bg-post .btn-primary { background: #FFFFFF; color: #0B0720; }
.bg-post .btn-primary:hover { background: #E8E8ED; }
.bg-post .stat-number { color: #FFFFFF; }
/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: auto;
scroll-padding-top: calc(var(--header-space) + 8px);
}
body {
margin: 0;
background: var(--post-base);
color: var(--fg);
font-family: var(--font-family);
font-size: var(--fs-body);
font-weight: var(--fw-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-gutter);
}
/* ---- Tipografía ---- */
h1, h2, h3 {
font-family: var(--font-family);
font-weight: var(--fw-title);
color: var(--fg);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.12;
text-wrap: balance;
overflow-wrap: break-word;
}
/* Manual de marca: titulares en Montserrat SemiBold, mayúsculas. H1 y H2 cortos van
en mayúsculas; los H2 de más de ~30 caracteres llevan .title-sentence y quedan
en mayúscula/minúscula (si no, se vuelven una pared de capitales). */
h1, h2 {
text-transform: uppercase;
letter-spacing: 0.01em;
font-size: var(--fs-h2-caps);
}
h1 { font-size: var(--fs-h1-caps); }
h2.title-sentence {
text-transform: none;
letter-spacing: -0.02em;
font-size: var(--fs-h2);
}
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.25; }
p {
margin: 0;
text-wrap: pretty;
color: var(--fg-2);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
strong { font-weight: var(--fw-eyebrow); color: var(--fg); }
.lede {
font-size: var(--fs-lead);
line-height: 1.55;
max-width: 60ch;
}
.eyebrow {
display: block;
margin: 0 0 12px;
font-size: var(--fs-small);
font-weight: var(--fw-eyebrow);
letter-spacing: 0.12em;
line-height: 1.3;
text-transform: uppercase;
color: var(--accent);
}
.center { text-align: center; }
/* ---- Botones: dos variantes, 48px, mismo padding ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 28px;
border-radius: var(--radius-btn);
border: 1px solid transparent;
font-family: var(--font-family);
font-size: var(--fs-btn);
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
transition: background 150ms, border-color 150ms, color 150ms;
}
.btn-primary {
background: var(--blue);
color: var(--black);
}
.btn-primary:hover { background: var(--blue-hover); }
.btn-outline {
border-color: var(--line-strong);
color: var(--fg);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.link-arrow {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: var(--fs-btn);
font-weight: 600;
color: var(--accent);
transition: color 150ms;
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
/* ==========================================================================
HEADER
========================================================================== */
.site-header {
/* Tema por la sección que está bajo el centro del header (js/main.js → data-theme) */
--hdr-fg: var(--text-inv);
--hdr-fg-2: var(--text-inv-2);
--hdr-tint: rgba(255, 255, 255, 0.08);
--hdr-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10);
position: fixed;
top: var(--header-top);
left: 0; right: 0;
width: min(1200px, calc(100% - 32px));
margin: 0 auto;
z-index: 1000;
height: var(--header-h);
}
@media (max-width: 899px) {
.site-header { left: 8px; right: 8px; width: auto; }
}
.site-header[data-theme="light"] {
--hdr-fg: #1D1D1F;
--hdr-fg-2: #4A4A4F;
--hdr-tint: rgba(255, 255, 255, 0.45);
--hdr-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Con el menú mobile abierto el panel es oscuro: el header vuelve al tema oscuro */
html.nav-open .site-header {
--hdr-fg: var(--text-inv);
--hdr-fg-2: var(--text-inv-2);
--hdr-tint: rgba(255, 255, 255, 0.08);
--hdr-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10);
}
/* El vidrio va en un pseudo-elemento: un backdrop-filter en el propio header
haría que el menú mobile (position: fixed) se midiera contra el header. */
.site-header::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: var(--header-radius);
background: var(--hdr-tint);
/* Respaldo (cualquier navegador, y mobile): vidrio simple, sin borde, separado por sombra */
backdrop-filter: blur(4px) saturate(1.5);
-webkit-backdrop-filter: blur(4px) saturate(1.5);
border: 0;
box-shadow: var(--hdr-shadow);
transition: background-color 200ms;
}
/* ---- Liquid Glass: solo cuando js/main.js pone html[data-glass="liquid"] (Chromium de escritorio,
puntero fino, sin reduced-motion/transparency, sin ?glass=off). #lg-refract es el filtro SVG
que inyecta el JS: refracta lo que pasa por debajo y separa los canales R/G/B en el borde. ---- */
html[data-glass="liquid"] .site-header { --hdr-tint: rgba(255, 255, 255, 0.04); }
html[data-glass="liquid"] .site-header[data-theme="light"] { --hdr-tint: rgba(255, 255, 255, 0.10); }
/* Tema claro: un halo blanco sostiene el contraste de las letras oscuras sobre lo que pasa por debajo (en tema oscuro no hay sombra). */
html[data-glass="liquid"] .site-header[data-theme="light"] .nav-link { text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 12px rgba(255, 255, 255, 0.95), 0 0 22px rgba(255, 255, 255, 0.8); }
/* Densidad por bloque (data-header-density en la sección que está bajo el header, la pone js/main.js):
"tint" = velo de color (oscuro 0.22 / claro 0.28) para fondos con texto o fotos debajo. */
html[data-glass="liquid"] .site-header[data-density="tint"] { --hdr-tint: rgba(6, 6, 20, 0.35); }
html[data-glass="liquid"] .site-header[data-density="tint"][data-theme="light"] { --hdr-tint: rgba(255, 255, 255, 0.35); }
/* "busy" = velo + blur(2px): solo donde el velo no alcanza (texto grande o fotos pasando bajo el header). */
html[data-glass="liquid"] .site-header[data-density="busy"] { --hdr-tint: rgba(6, 6, 20, 0.35); }
html[data-glass="liquid"] .site-header[data-density="busy"][data-theme="light"] { --hdr-tint: rgba(255, 255, 255, 0.35); }
/* .is-busy (nivel "heavy", solo Home: Hero, Categorías, Sucursales): velo 0,45 + blur(6px). El blur vive en ::after
y entra por opacidad (200ms) porque un filtro con url() no se puede interpolar. */
html[data-glass="liquid"] .site-header.is-busy { --hdr-tint: rgba(6, 6, 20, 0.45); }
html[data-glass="liquid"] .site-header.is-busy[data-theme="light"] { --hdr-tint: rgba(255, 255, 255, 0.45); }
html[data-glass="liquid"] .site-header::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: var(--header-radius);
pointer-events: none;
opacity: 0;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: opacity 200ms;
}
html[data-glass="liquid"] .site-header.is-busy::after { opacity: 1; }
html[data-glass="liquid"] .site-header[data-density="busy"]::before {
backdrop-filter: url(#lg-refract) blur(2px) saturate(1.3) brightness(1.04);
-webkit-backdrop-filter: url(#lg-refract) blur(2px) saturate(1.3) brightness(1.04);
}
/* Vidrio de iPhone: sin borde ni brillo interior, sin blur; solo refracción + sombra externa que lo eleva */
html[data-glass="liquid"] .site-header::before {
backdrop-filter: url(#lg-refract) saturate(1.3) brightness(1.04);
-webkit-backdrop-filter: url(#lg-refract) saturate(1.3) brightness(1.04);
border: 0;
box-shadow: var(--hdr-shadow);
}
.site-header .header-inner {
max-width: none;
padding: 0 14px 0 28px;
}
.header-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { height: 28px; width: auto; }
/* No hay variante oscura del logo en assets: en tema claro se oscurece con un filtro */
.site-header[data-theme="light"] .logo img { filter: brightness(0); }
html.nav-open .site-header .logo img { filter: none; }
.main-nav > ul { display: flex; gap: 24px; }
.nav-link {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--hdr-fg-2);
transition: color 150ms, opacity 150ms;
}
.nav-link::after {
content: '';
position: absolute;
left: 0; bottom: 6px;
width: 100%; height: 2px;
background: var(--blue);
transform: scaleX(0);
transform-origin: left center;
}
.nav-link:hover,
.nav-link.is-active { color: var(--hdr-fg); }
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.header-cta { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; }
/* Botón "Mi pedido": mismo color que los links del menú (--hdr-fg: blanco en tema oscuro, #1D1D1F en claro) */
.cart-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
color: var(--hdr-fg);
cursor: pointer;
}
.cart-btn svg { width: 24px; height: 24px; }
.cart-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 50%; }
.cart-count {
position: absolute;
top: 2px;
right: 0;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 9px;
background: #04A5FF;
color: #0B0720;
font-size: 11px;
font-weight: 600;
line-height: 18px;
text-align: center;
}
.cart-count[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
.cart-count.is-bump { animation: cart-bump 300ms ease; }
}
@keyframes cart-bump { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
.nav-toggle {
display: none;
position: relative;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
padding: 0;
}
.nav-toggle span {
display: block;
width: 22px; height: 2px;
background: var(--hdr-fg);
}
/* Abierto: las tres barras forman una X (el botón queda visible sobre el panel) */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 899px) {
.header-wa { display: none; }
.nav-toggle { display: inline-flex; }
/* Panel a pantalla completa */
.main-nav {
position: fixed;
inset: 0;
z-index: 1;
height: 100vh;
height: 100dvh;
padding: calc(var(--header-space) + 24px) var(--space-gutter) 32px;
background: var(--surface-0);
overflow-y: auto;
visibility: hidden;
}
.main-nav.is-open { visibility: visible; }
.main-nav > ul { flex-direction: column; gap: 16px; }
.nav-link {
display: flex;
min-height: 48px;
font-size: var(--fs-h3);
letter-spacing: 0;
text-transform: none;
color: var(--text-inv);
}
.nav-link::after { display: none; }
.nav-link.is-active { color: var(--blue); }
html.nav-open { overflow: hidden; }
}
/* Botón flotante de WhatsApp (solo mobile) */
.wa-fab {
display: none;
position: fixed;
right: 16px;
bottom: 16px;
z-index: 900;
width: 56px;
height: 56px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--blue);
color: var(--black);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.wa-fab:hover { background: var(--blue-hover); }
.wa-fab svg { width: 28px; height: 28px; fill: currentColor; }
@media (max-width: 899px) {
.wa-fab { display: inline-flex; }
/* el aire para que el botón no tape el footer va DENTRO del footer (ver .site-footer): fuera quedaría
visible el fondo oscuro del body como una franja azul bajo el footer blanco */
}
/* ==========================================================================
SECCIONES
========================================================================== */
.section { position: relative; padding: var(--space-section) 0; }
.section--tight { padding: calc(var(--space-section) * 0.6) 0; }
.section-head { margin-bottom: var(--space-block); }
.section-head h2 { max-width: 22ch; }
.section-head.center { text-align: center; }
.section-head.center h2 { margin-left: auto; margin-right: auto; }
.section-head > p { margin-top: 16px; }
/* Título a la izquierda + link a la derecha */
.section-head--row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 8px 24px;
}
/* Dos columnas en desktop, una en mobile */
.split {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-block);
align-items: center;
}
@media (min-width: 900px) {
.split { grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
.split--even { grid-template-columns: 1fr 1fr; }
.split--top { align-items: start; }
}
/* ---- Ritmo vertical de TODO encabezado (hero del Home y .page-hero):
eyebrow → 16px → h1 → 20px → lede (max 58ch) → 32px → botones ---- */
.hero .eyebrow,
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero .lede { margin: 20px auto 0; max-width: 58ch; color: var(--fg-2); }
.hero-actions,
.page-hero .btn { margin-top: 32px; }
/* ---- Hero del Home: una columna centrada que ocupa el primer pantallazo (fondo: .bg-post). ---- */
.hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: calc(var(--header-space) + 48px) var(--space-gutter) 96px;
}
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero h1 { max-width: 18ch; }
.hero .lede { margin: 20px auto 0; max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
@media (max-width: 599px) {
.hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
.hero-actions .btn { width: 100%; }
}
/* ---- Hero del Home (.hero--cristal): logo blanco (con lente de cristal al acercar el mouse, js/hero-glass.js)
→ titular → texto → botones, centrado en el alto disponible. Solo el cuerpo del hero: el header no se
toca. La 404 sigue usando .hero plano. ---- */
.hero--cristal {
justify-content: center;
gap: 0;
/* abajo se reserva el espacio del chevron para que el bloque quede centrado en lo que realmente se ve */
padding: var(--header-space) var(--space-gutter) 72px;
}
/* Logo: blanco liso, sin sombras ni brillo. El canvas de la lente se superpone exactamente a la imagen. */
.hero-logo { position: relative; flex: 0 0 auto; width: min(460px, 62vw); aspect-ratio: 1600 / 796; margin: 0 auto 36px; }
.hero-logo-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* El canvas se extiende alrededor del logo (lo dimensiona el JS) para que la lente no se corte; el logo queda alineado con la ![]()
*/
.hero-logo-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; pointer-events: none; } /* sin JS (táctil, reduced-motion) queda dentro del logo; el JS lo agranda al activar la lente */
.hero-logo.is-lens .hero-logo-canvas { visibility: visible; }
.hero-logo.is-lens .hero-logo-img { visibility: hidden; }
.hero--cristal h1,
.hero--cristal .lede { text-shadow: none; filter: none; }
/* Titular en UNA línea desde 760px; debajo, dos líneas balanceadas */
.hero--cristal h1 {
max-width: 340px;
margin: 0 auto;
font-size: clamp(26px, 7vw, 34px);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.01em;
text-align: center;
text-transform: none;
text-wrap: balance;
color: #fff;
}
@media (min-width: 760px) {
.hero--cristal h1 { max-width: none; font-size: clamp(26px, 3.3vw, 46px); white-space: nowrap; }
}
.hero--cristal .hero-copy { padding-inline: max(24px, 5vw); }
.hero--cristal .lede {
max-width: 520px;
margin: 16px auto 0;
font-size: clamp(16px, 1.3vw, 18px);
font-weight: 300;
line-height: 1.55;
text-align: center;
text-wrap: balance;
color: var(--fg-2);
}
.hero--cristal .hero-actions { margin-top: 32px; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; width: auto; }
.hero--cristal .hero-actions .btn { width: auto; }
.hero-btn {
height: 48px;
min-height: 48px;
border-radius: 999px;
transition: background 150ms, border-color 150ms, transform 100ms;
}
.hero-btn:active { transform: scale(0.98); }
.hero-btn--primary { padding: 0 28px; border: 0; background: #FFFFFF; color: #0B0720; font-size: 16px; font-weight: 600; }
.hero-btn--primary:hover { background: #E8E8ED; }
/* «Ver catálogo»: vidrio líquido como el header, sin borde ni reflejos blancos. Base (Safari, Firefox, móvil, reduced-motion):
fondo translúcido + blur simple. En Chromium de escritorio (html[data-glass="liquid"]) js/glass-button.js crea el filtro
#lg-refract-btn y se usa refracción en vez de blur. La luz que sigue al mouse (--mx/--my) solo existe con mouse fino. */
.hero-btn--ghost {
position: relative;
isolation: isolate;
overflow: hidden;
gap: 8px;
padding: 0 24px;
border: 0;
background: rgba(255, 255, 255, 0.10);
box-shadow: 0 8px 24px rgba(10, 25, 60, 0.30);
-webkit-backdrop-filter: blur(8px) saturate(1.4);
backdrop-filter: blur(8px) saturate(1.4);
color: #fff;
font-weight: 600;
}
html[data-glass="liquid"] .hero-btn--ghost {
-webkit-backdrop-filter: url(#lg-refract-btn) saturate(1.3) brightness(1.04);
backdrop-filter: url(#lg-refract-btn) saturate(1.3) brightness(1.04);
}
.hero-btn--ghost svg { flex: 0 0 auto; width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.hero-btn--ghost::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(circle 60px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 100%);
opacity: 0;
transition: opacity 200ms;
}
.hero-btn--ghost:hover::before { opacity: 1; }
}
@media (max-width: 599px) {
.hero--cristal { padding-bottom: 60px; }
.hero--cristal .hero-scroll { bottom: 8px; }
}
@media (max-width: 359px) {
.hero--cristal .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
.hero--cristal .hero-actions .btn { width: 100%; }
}
/* Chevron estático al pie: indica que hay más contenido abajo */
.hero-scroll {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--fg-3);
transition: color 150ms;
}
.hero-scroll:hover { color: var(--accent); }
.hero-scroll svg { width: 28px; height: 28px; }
/* ---- Encabezado de página interna ---- */
.page-hero {
padding: calc(var(--header-space) + 64px) 0 72px;
text-align: center;
}
.page-hero h1 { max-width: 20ch; margin: 0 auto; font-size: var(--fs-h2-caps); }
/* Catálogo: encabezado compacto para que filtros y grilla entren en el primer pantallazo */
.page-hero--compact { padding: calc(var(--header-space) + 48px) 0 32px; }
.page-hero--compact .lede { max-width: none; font-size: var(--fs-body); }
/* ==========================================================================
CARDS DE PRODUCTO — blanca, esquinas de 24px, casi tan ancha como alta (~4:5).
Arriba etiqueta + nombre, al centro la foto con su sombra, puntos de color y, abajo,
precio a la izquierda y botón a la derecha. Toda la card es clicable (abre WhatsApp con el
equipo); los puntos de color cambian la foto sin disparar el enlace. El efecto 3D vive
en js/main.js (initCardTilt) y se apoya en las clases .is-tilting / .is-tilt-hover.
========================================================================== */
.product-card {
position: relative;
--fg: var(--text);
--fg-2: var(--text-2);
--line: rgba(0, 0, 0, 0.12);
--line-strong: rgba(0, 0, 0, 0.45);
--accent: var(--blue-on-light);
display: flex;
flex-direction: column;
justify-content: flex-start; /* nunca space-between/around: el sobrante lo absorbe la zona de foto */
min-width: 0;
width: 100%;
height: auto;
aspect-ratio: 10 / 17; /* alto proporcional al ancho (476px a 280px, 510px a 300px): en una fila todas miden igual */
padding: 24px;
border-radius: var(--radius-product);
background: var(--white);
color: var(--fg);
box-shadow: var(--shadow-card);
cursor: pointer;
transition: box-shadow 200ms, transform 200ms;
transform-style: preserve-3d;
}
/* Hover (mouse): sombra más intensa, difusa y completa; sin aro. Teclado: outline de 2px solo con :focus-visible */
.product-card:hover { box-shadow: var(--shadow-card-hover); }
.product-card:has(.product-card-open:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
body:not([data-page="home"]) .product-card:hover { transform: translateY(-2px); }
}
.product-card a:focus-visible { outline: none; }
.product-card-head { display: flex; flex-direction: column; gap: 0; container-type: inline-size; }
.product-card-eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
color: var(--fg-2);
}
.product-card-eyebrow.is-new { color: var(--accent); }
.product-card-eyebrow.is-used { color: var(--accent); }
.product-card-add svg { flex: 0 0 16px; }
.btn[aria-disabled="true"][data-add] { opacity: 0.6; cursor: default; }
.product-card-tag {
display: block;
position: absolute; top: 0; left: 0; z-index: 2;
padding: 3px 8px; border-radius: 999px;
background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px var(--line-strong);
font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--fg);
}
/* Nombre SIEMPRE en una línea; el tamaño baja con el ancho útil de la card (container query sobre .product-card-head,
cuyo ancho es el de la card menos su padding): card ≥280px → 24px · 250–279 → 22 · 220–249 → 20 · menos → 18.
Si un nombre largo igual no entra, js/main.js (ajustarListado) lo achica de a 1px; al final, puntos suspensivos. */
.product-card-name {
margin-top: 2px;
height: 28px; /* alto fijo: aunque la tipografía baje, el bloque de texto no se mueve (fotos alineadas) */
font-size: 18px;
line-height: 28px;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@container (min-width: 172px) { .product-card-name { font-size: 20px; } }
@container (min-width: 202px) { .product-card-name { font-size: 22px; } }
@container (min-width: 232px) { .product-card-name { font-size: 24px; } }
.product-card-variant { margin-top: 4px; font-size: 16px; line-height: 1.3; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Foto centrada, sin fondo propio; una elipse suave de sombra la apoya */
.product-card-media {
position: relative;
flex: 1 1 auto;
min-height: 0;
margin: 8px 0 0;
}
.product-card-media::after {
content: '';
position: absolute;
left: 16%; right: 16%; bottom: 3%;
height: 12%;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.16) 0%, transparent 70%);
}
.product-card-media--vacio::after { display: none; }
.product-card-media img {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
/* las fotos traen aire alrededor del producto: un leve zoom le da presencia (1.04: con la foto grande deja >12px de aire lateral incluso con el desplazamiento del tilt) */
transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.04);
}
/* Sin foto: el mismo espacio, con un ícono gris claro */
.product-card-media-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--fg-2);
}
.product-card-media-placeholder svg { width: 56px; height: 56px; color: #C7C7CC; }
.product-card-media-placeholder span {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Puntos de color: círculo de 18px con área táctil de 28px */
.color-swatches { display: flex; flex: 0 0 28px; height: 28px; align-items: center; justify-content: center; gap: 4px; margin: 8px 0 0; }
.color-swatches-slot { display: none; flex: 0 0 28px; height: 28px; margin-top: 8px; }
.has-swatches .color-swatches-slot { display: block; } /* si alguna card del listado tiene puntos, las demás reservan la fila (fotos alineadas) */
.color-swatch {
position: relative;
z-index: 3;
width: 28px;
height: 28px;
padding: 0;
}
.color-swatch::before {
content: '';
position: absolute;
top: 5px; left: 5px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--swatch);
border: 1px solid rgba(0, 0, 0, 0.3);
}
.color-swatch.is-active::before {
box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--blue);
}
/* Pie en dos filas: 1) precio («Desde»/«USD» arriba, valor abajo) 2) botón «Agregar» a ancho completo */
.product-card-foot { display: flex; flex-direction: column; align-items: stretch; margin-top: 0; }
.product-card-price {
margin-top: 10px;
display: flex;
flex-direction: column;
flex: 0 0 auto;
min-width: 0;
line-height: 1.15;
white-space: nowrap;
font-variant-numeric: tabular-nums;
color: var(--fg);
}
.product-card-price small { font-size: 12px; line-height: 1.15; color: var(--fg-2); }
.product-card-price strong { font-size: 24px; line-height: 1.15; font-weight: 600; color: var(--fg); }
.product-card.is-w-md .product-card-price strong { font-size: 20px; }
.product-card-price { min-height: 41.4px; } /* alto del bloque con precio: sin precio el espacio se conserva (fotos iguales) */
.product-card.is-w-md .product-card-price { min-height: 36.8px; }
.product-card-price strong.es-consulta { font-size: 17px; }
.product-card-price:has(.es-consulta) { visibility: hidden; }
.product-card .btn { flex: 0 0 auto; width: 100%; height: 48px; min-height: 48px; margin: 12px 0 0; padding: 0 16px; gap: 8px; font-size: 16px; }
.product-card .btn svg { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.product-card .btn:focus-visible { outline: 2px solid #0B0720; outline-offset: 3px; }
.add-check { display: inline-block; animation: add-check-in 220ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes add-check-in { from { transform: scale(0.6); } to { transform: scale(1); } }
/* Botón con feedback propio (no depende del hover de la card). Solo mouse; en táctil solo :active. */
.product-card .btn { transition: background-color 180ms ease; }
@media (prefers-reduced-motion: no-preference) {
.product-card .btn { transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease, background-color 180ms ease; }
.product-card .btn:active { transform: translateY(0) scale(0.97); box-shadow: 0 3px 8px -2px rgba(4, 165, 255, 0.4); transition-duration: 90ms; }
}
@media (hover: none), (pointer: coarse) { .product-card .btn-primary:hover { background: var(--blue); } }
@media (hover: hover) and (pointer: fine) {
.product-card .btn { cursor: pointer; }
.product-card .btn:hover { background: var(--blue-hover); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.product-card .btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 22px -6px rgba(4, 165, 255, 0.55); }
.product-card .btn:hover svg { transform: rotate(90deg); }
.product-card .btn:active { transform: translateY(0) scale(0.97); box-shadow: 0 3px 8px -2px rgba(4, 165, 255, 0.4); }
}
@media (prefers-reduced-motion: reduce) { .add-check { animation: none; } .product-card .btn svg { transition: none; } }
/* Toda la card abre el detalle: un botón invisible (.product-card-open) la cubre. Capas: foto (1) < botón que
abre el detalle (2) < «Consultar» y puntos de color (3), que siguen siendo clicables por separado. */
.product-card-open {
position: absolute;
inset: 0;
z-index: 2;
padding: 0;
border: 0;
border-radius: var(--radius-product);
background: none;
cursor: pointer;
}
.product-card .product-card-open:focus-visible { outline: none; } /* el foco se ve en el aro de la card (:focus-within) */
.product-card .btn { position: relative; z-index: 3; }
/* Cards sin detalle (Mac / iPad a pedido, estáticas): toda la card sigue siendo el link de WhatsApp */
.product-card--solo-wa .btn::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-product); }
/* ---- Efecto 3D que sigue al mouse (js/main.js → initCardTilt). Las clases las pone el JS. ---- */
.is-tilting { will-change: transform; }
.is-tilt-hover { z-index: 2; }
.tilt-glare {
position: absolute;
inset: 0;
z-index: -1; /* sobre el fondo de la card, bajo foto, texto y botón */
border-radius: inherit;
pointer-events: none;
opacity: 0;
background: radial-gradient(circle closest-side at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.9) 0%, transparent 45%);
mix-blend-mode: soft-light;
transition: opacity 150ms;
}
.is-tilt-hover > .tilt-glare { opacity: 0.35; }
/* ==========================================================================
CATÁLOGO DESTACADO (Home) — carrusel horizontal nativo
========================================================================== */
/* El carrusel sale del container pero alinea su primer card con el título */
.catalog-cards-row {
--row-pad: max(var(--space-gutter), calc((100vw - var(--container-max)) / 2 + var(--space-gutter)));
display: flex;
gap: 24px;
padding: 24px var(--row-pad) 56px; /* aire arriba y abajo para que overflow no recorte la sombra */
margin-block: -16px -40px; /* compensa el padding: el layout no cambia */
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--row-pad);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
cursor: grab;
/* altura reservada: las cards se inyectan por JS y no deben empujar lo de abajo (CLS) */
min-height: 520px;
}
.catalog-cards-row::-webkit-scrollbar { display: none; }
.catalog-cards-row.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.catalog-cards-row .product-card {
align-self: flex-start; /* el alto lo da la proporción de la card, no el del carrusel */
flex: 0 0 300px;
scroll-snap-align: start;
}
.catalog-cards-row img { -webkit-user-drag: none; }
/* ---- Desde 700px: "ventana" centrada con N cards completas y bordes que se difuminan ----
--fade-l / --fade-r las pone el JS (initCatalogCarousel) según haya contenido a cada lado. */
@property --fade-l { syntax: ''; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: ''; inherits: false; initial-value: 0px; }
@media (min-width: 700px) {
.catalog-featured {
--cat-n: 2; /* cards completas visibles */
--cat-fade: 40px; /* F: zona de difuminado a cada lado */
--cat-box: calc(var(--cat-n) * 300px + (var(--cat-n) - 1) * 24px);
--cat-win: calc(var(--cat-box) + 2 * var(--cat-fade));
}
@media (min-width: 1100px) { .catalog-featured { --cat-n: 3; --cat-fade: 72px; } }
@media (min-width: 1416px) { .catalog-featured { --cat-n: 4; } }
.catalog-cards-row {
width: var(--cat-win);
max-width: 100%;
margin-inline: auto;
padding-inline: var(--cat-fade);
scroll-padding-inline: var(--cat-fade);
}
/* título, enlace y pie alineados con la caja de las N cards */
.catalog-featured .container {
width: var(--cat-box);
max-width: 100%;
padding-inline: 0;
}
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
.catalog-cards-row {
--mask: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
-webkit-mask-image: var(--mask);
mask-image: var(--mask);
transition: --fade-l 250ms ease, --fade-r 250ms ease;
}
}
}
/* Entrada: la primera vez que la sección entra en pantalla las cards aparecen escalonadas */
.catalog-cards-row.is-reveal-pending > * { opacity: 0; }
@keyframes catalog-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.catalog-cards-row.is-revealed > * { animation: catalog-card-in 450ms ease-out backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@media (max-width: 699px) {
/* card de min(64vw, 260px): se ve el borde de la siguiente */
.catalog-cards-row { gap: 12px; }
.catalog-cards-row .product-card,
.catalog-cards-row .catalog-end-card { flex-basis: min(64vw, 260px); }
.catalog-arrows { display: none; }
}
.catalog-carousel-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* ---- Dotnav (estilo Apple): el punto activo se alarga. Un punto por equipo.
Colores pensados para la superficie clara del carrusel. ---- */
.dotnav {
--dot-size: 8px;
--dot-active-width: 32px;
--dot-margin: 8px;
--dot-bg: rgba(0, 0, 0, 0.28);
--dot-bg-active: rgba(0, 0, 0, 0.8);
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 0 0 calc(var(--dot-margin) * -1);
}
.dot-item { opacity: 0.5; }
.dot-item.active { opacity: 1; }
.dot-link {
position: relative;
display: block;
box-sizing: content-box;
width: var(--dot-size);
height: var(--dot-size);
padding: var(--dot-margin);
border: none;
border-radius: 999px;
background: var(--dot-bg);
background-clip: content-box;
cursor: pointer;
}
/* área táctil de 44px sin agrandar el punto */
.dot-link::before { content: ""; position: absolute; inset: -10px 0; }
.dot-item.active .dot-link {
width: var(--dot-active-width);
background-color: var(--dot-bg-active);
background-clip: content-box;
}
@media (prefers-reduced-motion: no-preference) {
.dot-link { transition: width 250ms linear; }
}
.catalog-arrows { display: flex; gap: 12px; }
.catalog-arrow {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: transparent;
color: var(--fg);
transition: border-color 150ms, color 150ms;
}
.catalog-arrow svg { width: 20px; height: 20px; }
.catalog-arrow:hover { border-color: var(--blue); color: var(--blue-on-light); }
.catalog-arrow[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
/* Última "card" del carrusel: lleva al catálogo completo */
.catalog-end-card {
flex: 0 0 300px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 12px;
padding: 24px;
border-radius: var(--radius-card);
background: var(--surface-0);
color: var(--text-inv);
font-size: var(--fs-h3);
font-weight: 600;
line-height: 1.25;
transition: box-shadow 150ms;
}
.catalog-end-card:hover,
.catalog-end-card:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
.catalog-end-card svg { width: 28px; height: 28px; color: var(--blue); }
.catalog-error { color: var(--fg-2); }
.catalog-error a { color: var(--fg); text-decoration: underline; }
/* ---- Accesos rápidos por categoría: tiles asimétricos con foto.
Sombra suave en reposo y más intensa en hover (mismo criterio que las cards). ---- */
.category-grid {
padding-bottom: 8px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 168px;
gap: 12px;
}
.category-tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 44px;
padding: 20px;
overflow: hidden;
border-radius: var(--radius-media);
background: var(--surface-2);
transition: background 150ms;
}
.category-tile h3 { position: relative; z-index: 1; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.01em; }
.category-tile-cta {
position: relative;
z-index: 1;
font-size: var(--fs-h3);
font-weight: 600;
line-height: 1;
color: var(--accent);
}
/* iPad sin foto todavía: el CTA dice qué falta confirmar */
.category-tile:not(:has(img)) .category-tile-cta { font-size: var(--fs-small); }
/* Las fotos traen aire alrededor del producto: se centran y agrandan, el tile recorta */
.category-tile img {
position: absolute;
right: 0;
top: 50%;
translate: 0 -50%;
width: 90%;
height: auto;
max-width: none;
}
.category-tile:hover { background: #ECECEF; }
.category-tile { box-shadow: var(--shadow-card); transform-style: preserve-3d; }
.category-tile:hover { box-shadow: var(--shadow-card-hover); }
.category-tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.category-tile:hover h3 { color: var(--accent); }
.category-tile--iphone,
.category-tile--mac { grid-column: span 2; }
.category-tile--iphone { grid-row: span 2; }
.category-tile--iphone img { width: 82%; right: 0; }
.category-tile--mac img { width: 66%; right: 2%; }
.category-tile--airpods img { width: 92%; right: -6%; top: 64%; }
@media (min-width: 768px) {
.category-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px; }
.category-tile { padding: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
.category-tile img { transition: transform 300ms ease-out; }
.category-tile:hover img { transform: scale(1.03); }
}
/* ==========================================================================
CATÁLOGO (catalogo.html) — barra de filtros + grilla
========================================================================== */
.catalog-page { padding: 0 0 var(--space-section); }
/* La barra de filtros y la grilla del catálogo son un poco más anchas que el resto: 4 columnas de 280px + 3 huecos de 24px = 1192px */
.catalog-page .container { max-width: calc(1192px + 2 * var(--space-gutter)); }
/* Barra de filtros en el flujo normal (se desplaza con la página): sin sticky, fondo propio ni línea inferior. */
.catalog-toolbar { position: static; }
.catalog-toolbar-inner {
display: flex;
align-items: center;
gap: 12px;
padding-top: 6px;
padding-bottom: 6px;
}
.catalog-filter-tabs {
display: flex;
flex-wrap: nowrap;
gap: 8px;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.catalog-filter-tabs::-webkit-scrollbar { display: none; }
.catalog-filter-tab {
flex: 0 0 auto;
min-height: 32px;
padding: 6px 14px;
border-radius: var(--radius-btn);
border: 1px solid var(--line-strong);
background: transparent;
color: var(--fg);
font-size: 13px;
line-height: 1.2;
font-weight: 600;
white-space: nowrap;
transition: background 150ms, border-color 150ms, color 150ms;
}
.catalog-filter-tab:hover { border-color: var(--accent); color: var(--accent); }
.catalog-filter-tab.is-active {
background: var(--blue);
border-color: var(--blue);
color: var(--black);
}
/* Chips de condición (Nuevos / Usados): solo si hay usados */
.catalog-condtabs { padding-left: 8px; border-left: 1px solid var(--line-strong); }
@media (max-width: 699px) { .catalog-condtabs { padding-left: 0; border-left: 0; } }
/* Segunda fila (subcategorías de Accesorios): más discreta, una sola línea con scroll horizontal */
.catalog-subfilters { padding-top: 0; padding-bottom: 6px; }
.catalog-subtab { min-height: 28px; padding: 4px 12px; font-size: 12px; font-weight: 500; }
.catalog-subtabs { flex-wrap: nowrap; overflow-x: auto; }
.catalog-filter-search {
margin-left: auto;
flex: 0 1 220px;
min-height: 32px;
height: 32px;
padding: 0 14px;
border-radius: var(--radius-btn);
border: 1px solid var(--line-strong);
background: var(--white);
color: var(--fg);
font-family: var(--font-family);
font-size: 13px;
}
.catalog-filter-search::placeholder { color: var(--fg-2); }
.catalog-filter-search:focus { border-color: var(--accent); }
@media (max-width: 699px) {
/* categorías en una línea deslizable; el buscador queda debajo a todo el ancho */
.catalog-toolbar-inner { flex-wrap: wrap; gap: 8px; }
.catalog-filter-tabs { flex: 1 1 100%; }
.catalog-filter-search { order: 2; flex: 1 1 100%; margin-left: 0; }
}
.catalog-grid {
display: grid;
/* auto-fill (no auto-fit): con pocas cards cada una mantiene el ancho de UNA columna y queda a la izquierda.
Mínimo de 280px (o un tercio del ancho si es menor, así desde 900px hay al menos 3 columnas); con ≥ 1192px, 4 columnas. */
grid-template-columns: repeat(auto-fill, minmax(min(280px, calc((100% - 48px) / 3)), 1fr));
grid-auto-rows: 1fr;
justify-content: stretch;
align-content: start;
gap: 24px;
padding: var(--space-block) 0 24px; /* aire para que la sombra no quede pegada al borde */
}
/* Alto mínimo en el contenedor padre (no en la grilla): una card sola no se estira y el footer no sube */
.catalog-main { min-height: 80vh; }
/* Pocas cards (Mac / iPad a pedido): mismo tamaño de card, sin estirarse */
.catalog-grid--few { padding-top: 0; }
.catalog-empty { padding: var(--space-block) 0; text-align: center; }
.catalog-empty p { margin-bottom: 24px; color: var(--fg); }
.catalog-note { max-width: 70ch; margin-top: var(--space-block); }
/* Hasta que el JS rinde las cards la nota queda invisible: así no salta cuando llegan (CLS). */
.catalog-grid-full:empty ~ .catalog-note { visibility: hidden; }
/* ==========================================================================
MÓVIL — grilla del catálogo en 2 columnas (hasta 559px) / 3 columnas (560–899px) y card compacta.
La card compacta también la usa el carrusel del Home hasta 699px. Solo CSS: el HTML de la card es el mismo.
========================================================================== */
@media (max-width: 899px) {
.catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; justify-content: stretch; align-content: start; gap: 16px; padding-top: 24px; }
}
@media (max-width: 559px) {
.catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.catalog-page .container, #catalogo-mac-ipad .container { padding-left: 16px; padding-right: 16px; }
}
/* Card compacta: js/main.js (ajustarListado) pone .is-compact en el listado (grilla ≤899px, carrusel ≤699px).
Solo cambia tamaños: padding, tipografía, alto del botón y foto cuadrada. El orden y la estructura son los de la base. */
.is-compact .product-card { aspect-ratio: auto; padding: 12px; }
.is-compact .product-card .product-card-eyebrow { display: none; }
.is-compact .product-card .product-card-name { margin-top: 0; height: auto; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.is-compact .product-card .product-card-variant { margin-top: 2px; font-size: 12px; line-height: 1.3; }
.is-compact .product-card .product-card-variant--vacio, .is-compact .product-card .product-card-price:has(.es-consulta), .is-compact .color-swatches-slot { display: none; }
.is-compact .product-card .product-card-promo-slot { flex-basis: 24px; height: 24px; margin-top: 6px; }
.is-compact .product-card .product-card-promo { height: 22px; padding: 0 8px; }
.is-compact .product-card .product-card-promo .pp-largo { display: none; }
.is-compact .product-card .product-card-promo .pp-corto { display: inline; }
.is-compact .product-card .product-card-media { flex: 0 0 auto; aspect-ratio: 1 / 1; margin: 6px 0 0; }
.is-compact .product-card .color-swatches { margin: 4px 0 0; }
.is-compact .product-card .product-card-foot { margin-top: auto; padding-top: 6px; }
.is-compact .product-card .product-card-price { margin-top: 0; }
.is-compact .product-card .product-card-price small { font-size: 11px; }
.is-compact .product-card .product-card-price strong { font-size: 16px; font-weight: 600; }
.is-compact .product-card .btn { height: 40px; min-height: 40px; margin: 8px 0 0; padding: 0 12px; font-size: 14px; }
.is-compact .product-card:active { transform: scale(0.98); }
.catalog-cards-row.is-compact .product-card { align-self: stretch; } /* carrusel móvil: todas las cards con el alto de la más alta */
/* ==========================================================================
OPORTUNIDAD DEL DÍA — franja azul dentro de la product-card (misma card y tamaño que las demás)
========================================================================== */
.product-card--oferta { --op: 24px; }
.oferta-head {
margin: calc(var(--op) * -1) calc(var(--op) * -1) 14px;
padding: 12px 16px 14px;
border-radius: var(--radius-product) var(--radius-product) 0 0;
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-on-light) 100%);
display: flex;
flex-direction: column;
gap: 2px;
}
.oferta-head-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.75); }
.oferta-head-old { font-size: 12px; color: rgba(255, 255, 255, 0.65); text-decoration: line-through; }
.oferta-head-new { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.15; }
@media (max-width: 899px) { .product-card--oferta { --op: 12px; } }
/* ==========================================================================
POR QUÉ TECNOLAB — estadísticas (+ cortina)
========================================================================== */
#why-tecnolab .section-head h2 { max-width: 24ch; }
/* Fila de 3 estadísticas: una columna apilada y centrada en móvil (línea fina entre bloques), 3 columnas iguales desde 900px */
.stat-row { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat-block { padding: 0 12px; text-align: center; }
.stat-row .stat-block { padding: 28px 12px; border-top: 1px solid rgba(11, 7, 32, 0.12); }
.stat-row .stat-block:first-child { border-top: 0; padding-top: 0; }
.stat-row .stat-block:last-child { padding-bottom: 0; }
@media (min-width: 900px) { .stat-row .stat-block { border-top: 0; padding: 0 12px; } }
/* etiqueta de una sola línea; número y estrella con el mismo celeste y el mismo tamaño en los tres bloques */
.stat-row .stat-label { white-space: nowrap; font-size: 13px; letter-spacing: 0.12em; line-height: 1.3; }
@media (max-width: 340px) { .stat-row .stat-label { font-size: 11px; } }
.stat-row .stat-number { font-size: clamp(40px, 7vw, 56px); line-height: 1; color: var(--blue-on-light); }
.stat-row .stat-caption { max-width: 30ch; }
.stat-label {
display: block;
margin-bottom: 12px;
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-2);
}
.stat-number {
display: block;
margin-bottom: 12px;
font-size: var(--fs-display);
font-weight: var(--fw-title);
line-height: 1;
color: var(--accent);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.stat-caption { max-width: 260px; margin: 0 auto; font-size: var(--fs-body); line-height: 1.5; }
.step-number {
display: block;
margin-bottom: 12px;
font-size: var(--fs-h2);
font-weight: var(--fw-title);
line-height: 1;
color: var(--accent);
}
/* Home: una cifra grande a la izquierda y dos secundarias apiladas a la derecha */
.stat-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: stretch; }
@media (min-width: 900px) {
.stat-layout { grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: center; }
}
.stat-layout .stat-block { padding: 0; text-align: left; border-right: 0; }
.stat-layout .stat-caption { margin: 0; max-width: 34ch; }
.stat-block--lead .stat-number {
margin-bottom: 16px;
font-size: clamp(96px, 15vw, 188px);
letter-spacing: -0.03em;
}
.stat-side { display: flex; flex-direction: column; gap: 0; }
.stat-side .stat-block { padding: 28px 0; border-top: 1px solid var(--line); }
.stat-side .stat-block:last-child { padding-bottom: 0; }
.stat-side .stat-number { font-size: clamp(36px, 4.4vw, 56px); white-space: normal; }
/* ==========================================================================
PLAN CANJE
========================================================================== */
/* Home: encabezado centrado, 3 tarjetas parejas y franja de acción */
.canje-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 16px; }
.canje-card {
position: relative;
display: flex;
flex-direction: column;
padding: 32px 28px;
border-radius: var(--radius-product);
background: var(--white);
box-shadow: var(--shadow-card);
}
.canje-card-icon { display: inline-flex; width: 48px; height: 48px; margin-bottom: 24px; color: var(--blue-on-light); }
.canje-card-icon svg { width: 100%; height: 100%; }
.canje-card-num { position: absolute; top: 28px; right: 28px; font-size: var(--fs-h3); font-weight: var(--fw-title); line-height: 1; color: var(--blue-on-light); }
.canje-card h3 { font-size: var(--fs-body); letter-spacing: 0; line-height: 1.4; margin-bottom: 8px; }
.canje-card p { font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.canje-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin-top: var(--space-block); }
.canje-legal { margin: 20px auto 0; max-width: 56ch; text-align: center; font-size: 13px; line-height: 1.5; color: var(--text-2); }
@media (min-width: 768px) {
.canje-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.canje-actions { flex-direction: row; justify-content: center; }
}
#plan-canje .section-head .lede { margin: 16px auto 0; max-width: 48ch; }
/* Plan Canje (página): 3 pasos en columnas */
.steps-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.steps-grid h3 { margin-bottom: 8px; }
.callout {
max-width: 760px;
margin: 0 auto;
padding: 40px;
border-radius: var(--radius-card);
background: var(--white);
box-shadow: var(--shadow-card);
--fg: var(--text); --fg-2: var(--text-2); --accent: var(--blue-on-light);
}
.callout h2 { margin-bottom: 16px; }
/* ==========================================================================
SERVICE TÉCNICO
========================================================================== */
.service-list { display: flex; flex-direction: column; margin-top: 8px; }
.service-item {
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
padding: 20px 0;
border-top: 1px solid var(--line);
}
.service-item-icon { width: 48px; height: 48px; color: var(--accent); }
.service-item-icon svg { width: 32px; height: 32px; }
.service-item h3 { margin-bottom: 4px; }
.service-mac-card {
padding: 28px 0 0;
border-top: 1px solid var(--line-strong);
}
.service-mac-card h3 { font-size: var(--fs-h2); margin-bottom: 16px; }
.service-mac-card p { margin-bottom: 28px; }
/* service.html: seis reparaciones en cards */
.repair-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .repair-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .repair-grid { grid-template-columns: repeat(3, 1fr); } }
.repair-grid .service-item {
display: flex;
flex-direction: column;
gap: 12px;
padding: 28px 0 8px;
border-top: 1px solid var(--line-strong);
}
.two-col-text { display: grid; gap: 20px; }
.two-col-text p { color: var(--fg-2); }
/* ==========================================================================
SUCURSALES
========================================================================== */
.branches { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
@media (min-width: 900px) { .branches { grid-template-columns: 1.5fr 1fr; } }
.branch-map-card { position: relative; border-radius: var(--radius-card); overflow: hidden; min-height: 400px; }
/* Fondo gris neutro: es lo que se ve hasta que carga Leaflet (o si no carga);
la dirección en texto está en .branch-map-label. */
.branch-map { position: absolute; inset: 0; background: #1b1438; }
.branch-map-label {
position: absolute;
left: 16px; right: 16px; bottom: 36px;
z-index: 500;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-radius: var(--radius-media);
background: rgba(18, 10, 46, 0.92);
}
.branch-map-label {
--fg: var(--text-inv);
--accent: var(--blue);
--line-strong: rgba(255, 255, 255, 0.5);
}
.branch-map-label div { display: flex; flex-direction: column; }
.branch-map-name { font-weight: 600; color: var(--text-inv); }
.branch-map-address { font-size: var(--fs-small); color: var(--text-inv-2); }
.branches-lite { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 700px) { .branches-lite { grid-template-columns: 1fr 1fr; } }
.branch-lite-card {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
padding: 28px 0 0;
border-top: 1px solid var(--line-strong);
}
.branch-lite-name {
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
}
.branch-lite-address { font-size: var(--fs-h3); font-weight: var(--fw-title); color: var(--fg); margin-bottom: 8px; }
.branch-lite-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.brand-map-pin-dot {
width: 28px;
height: 28px;
border-radius: 50% 50% 50% 0;
background: var(--blue);
transform: rotate(-45deg);
box-shadow: 0 0 0 6px rgba(var(--blue-rgb), 0.25);
}
.brand-map-pin-dot::after {
content: "";
position: absolute;
width: 10px; height: 10px;
background: var(--surface-0);
border-radius: 50%;
top: 9px; left: 9px;
}
/* ---- Accesorios (catálogo) ---- */
.accessories-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 768px) { .accessories-grid { grid-template-columns: repeat(4, 1fr); } }
.accessory-item { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.accessory-item svg { width: 32px; height: 32px; color: var(--accent); }
.accessory-item span { font-weight: 600; color: var(--fg); }
/* ==========================================================================
CTA FINAL
========================================================================== */
.final-cta { text-align: center; padding: calc(var(--space-section) * 1.2) 0; }
.final-cta h2 { max-width: 22ch; margin: 0 auto 32px; }
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer {
/* Fin de página liso: fondo blanco sólido (la franja final se funde con él, ver .bg-post--c) */
--fg: #1D1D1F;
--fg-2: #6E6E73;
--accent: var(--blue-on-light);
padding: 64px 0 32px;
background: #FFFFFF;
color: var(--fg);
}
@media (max-width: 899px) {
.site-footer { padding-bottom: max(88px, calc(72px + env(safe-area-inset-bottom))); }
}
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; margin-bottom: 48px; }
.footer-logo img { height: 46px; width: auto; margin-bottom: 16px; }
.footer-logo p { max-width: 280px; font-size: var(--fs-small); color: #6E6E73; }
.footer-col h3 {
margin-bottom: 12px;
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6E6E73;
}
.footer-col ul { display: flex; flex-direction: column; }
.footer-col a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: var(--fs-small);
color: #1D1D1F;
transition: color 150ms;
}
.footer-col a:hover { color: var(--blue-on-light); text-decoration: underline; text-underline-offset: 4px; }
.footer-col--contacto a { color: var(--blue-on-light); }
.site-footer a:focus-visible { outline: 2px solid var(--blue-on-light); outline-offset: 3px; }
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px 16px;
padding-top: 24px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
font-size: var(--fs-small);
color: #6E6E73;
}
/* ==========================================================================
CORTINA — #plan-canje sube y tapa a #why-tecnolab, que queda fija detrás.
Sin JavaScript: el sticky vive dentro de .curtain-group y termina donde
termina el grupo. Un sticky posicionado se pinta por encima de las
secciones no posicionadas, así que todo lo que viene después del grupo
lleva position: relative + z-index: 2 y fondo opaco.
========================================================================== */
.curtain-group { position: relative; }
#why-tecnolab { position: sticky; top: 0; z-index: 1; }
#plan-canje {
position: relative;
z-index: 2;
border-top-left-radius: var(--radius-card);
border-top-right-radius: var(--radius-card);
}
#service,
#sucursales,
.final-cta,
.site-footer { position: relative; z-index: 2; }
/* Si #why-tecnolab no entra en el viewport no puede quedar fija sin cortarse:
baja con el scroll normal, sin efecto. Altura medida de la sección: 534px
(900px de ancho) a 614px (≥1280); su contenido termina ~110px antes del borde
inferior (padding), así que con 600px de alto de viewport se ve completo.
En mobile (<900px) las estadísticas pasan a 2 columnas y la sección es más alta. */
@media (max-height: 600px), (max-width: 899px) {
#why-tecnolab { position: relative; }
}
/* ==========================================================================
ACCESIBILIDAD
========================================================================== */
.skip-link {
position: absolute;
top: 8px;
left: 8px;
z-index: 2000;
padding: 12px 20px;
border-radius: var(--radius-btn);
background: var(--blue);
color: var(--black);
font-size: var(--fs-small);
font-weight: 600;
transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* #contenido recibe foco por programa al saltar: sin aro */
main:focus { outline: none; }
/* Foco visible y consistente: 2px azul con separación. Sobre superficies
claras el azul de marca da 2.46:1, así que ahí se usa el azul legible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 3px;
}
.surface-light a:focus-visible, .surface-light button:focus-visible, .surface-light input:focus-visible, .surface-light [tabindex]:focus-visible,
.surface-white a:focus-visible, .surface-white button:focus-visible, .surface-white input:focus-visible, .surface-white [tabindex]:focus-visible,
.product-card a:focus-visible, .product-card button:focus-visible,
.catalog-toolbar a:focus-visible, .catalog-toolbar button:focus-visible, .catalog-toolbar input:focus-visible,
.calc select:focus-visible, .calc input:focus-visible, .calc textarea:focus-visible, .calc button:focus-visible, .calc a:focus-visible {
outline-color: var(--blue-on-light);
}
/* ---- Ajustes de composición ---- */
.center .lede { margin-left: auto; margin-right: auto; }
#categorias .eyebrow { margin-bottom: 24px; }
/* Mobile: sin flechas en los carruseles (va después de la regla base de .catalog-arrows) */
@media (max-width: 699px) {
.catalog-arrows { display: none; }
}
/* Sin el cuadro azul de tap en mobile (el foco ya tiene su propio aro) */
a, button { -webkit-tap-highlight-color: transparent; }
/* ---- Plan Canje: pasos compactos en una fila ---- */
.steps-grid .canje-step p { max-width: 30ch; }
.canje-note { margin-top: 12px; }
/* ==========================================================================
MICRO-INTERACCIONES — solo con movimiento permitido.
Con prefers-reduced-motion todo queda en su estado final, sin transición.
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
/* Subrayado del nav: crece desde la izquierda */
.nav-link::after { transition: transform 200ms ease-out; }
/* Hamburguesa: las barras rotan / se desvanecen y el panel entra con fade */
.nav-toggle span { transition: transform 200ms ease-out, opacity 150ms ease-out; }
@media (max-width: 899px) {
.main-nav { opacity: 0; transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
.main-nav.is-open { opacity: 1; transition: opacity 200ms ease-out, visibility 0s; }
}
/* Títulos: revelado único al entrar en viewport (js/main.js agrega .reveal / .is-in) */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in {
opacity: 1;
transform: none;
transition: opacity 500ms ease-out, transform 500ms ease-out;
}
}
/* ---- Nav de escritorio: al pasar el mouse por un ítem, los demás se atenúan (efecto Apple).
Solo con puntero real y en la barra horizontal (≥900px), no en el panel mobile. ---- */
@media (hover: hover) and (min-width: 900px) {
.main-nav > ul:has(.nav-link:hover) .nav-link:not(:hover) { opacity: 0.4; }
}
@media (prefers-reduced-motion: no-preference) {
.nav-link { transition: color 150ms, opacity 0.32s cubic-bezier(0.4, 0, 0.6, 1); }
}
/* ==========================================================================
CALCULADORA DE PLAN CANJE (plan-canje.html#calculadora)
Se arma por JS y solo se muestra con datos reales o ?preview=1.
Grises + tarjeta blanca; sin transiciones ni animaciones propias.
========================================================================== */
/* [hidden] gana siempre, aunque la clase del elemento defina display */
[hidden] { display: none !important; }
.calc { max-width: 720px; margin: 0 auto; }
.calc-preview {
margin: 0 0 16px;
padding: 10px 16px;
border-radius: var(--radius-media);
background: #2C2C2E;
color: #FFFFFF;
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.08em;
text-align: center;
}
.calc-card {
--fg: var(--text);
--fg-2: var(--text-2);
--accent: var(--blue-on-light);
padding: 32px;
border-radius: var(--radius-card);
background: var(--white);
box-shadow: var(--shadow-card);
color: var(--fg);
}
.calc-card h2 { margin-bottom: 24px; }
.calc-result:not(:empty) { margin-top: 16px; }
.calc-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.calc-field label { font-size: var(--fs-btn); font-weight: 600; color: var(--fg); }
.calc-help { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.calc select,
.calc input[type="number"],
.calc input[type="text"],
.calc textarea {
width: 100%;
min-height: 48px;
padding: 0 16px;
border: 1px solid #767676;
border-radius: 12px;
background: var(--white);
color: var(--fg);
font-family: var(--font-family);
font-size: var(--fs-body);
font-weight: 300;
line-height: 1.4;
}
.calc textarea { min-height: 96px; padding: 12px 16px; resize: vertical; }
.calc select:disabled { background: var(--surface-2); color: var(--fg-2); }
.calc [aria-invalid="true"] { border: 2px solid var(--fg); }
.calc-check { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; margin-bottom: 20px; }
.calc-check input { flex: 0 0 24px; width: 24px; height: 24px; margin: 12px 0 0; accent-color: var(--fg); }
.calc-check label { padding: 11px 0; font-size: var(--fs-body); line-height: 1.4; color: var(--fg); cursor: pointer; }
/* Error sin depender del color: texto en tono principal + barra lateral */
.calc-error {
padding-left: 12px;
border-left: 3px solid var(--fg);
font-size: var(--fs-small);
font-weight: 600;
line-height: 1.5;
color: var(--fg);
}
.calc-submit { width: 100%; min-height: 48px; font-size: var(--fs-body); }
.calc-valor-wrap { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.calc-valor-label { font-size: var(--fs-small); font-weight: 600; color: var(--fg-2); }
.calc-valor { font-size: 36px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--fg); }
.calc-tramo { margin: -8px 0 16px; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.calc-otro .calc-wa-otro { width: 100%; }
.calc-consulta { margin-bottom: 16px; font-size: var(--fs-lead); font-weight: 600; line-height: 1.4; color: var(--fg); }
.calc-aviso { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.calc-escalones-titulo { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); font-size: var(--fs-h3); }
.calc-escalones-titulo + .calc-help { margin-top: 4px; }
.calc-escalones { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; }
.calc-escalon {
display: flex;
flex-direction: column;
gap: 4px;
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius-media);
background: var(--surface-2);
}
.calc-escalon p { font-size: var(--fs-body); color: var(--fg-2); }
.calc-escalon .calc-escalon-nombre { font-weight: 600; color: var(--fg); }
.calc-escalon-paga strong { font-size: var(--fs-h3); font-weight: 600; color: var(--fg); }
.calc-escalon .btn { align-self: flex-start; margin-top: 12px; }
.calc-acciones { margin-top: 24px; }
.calc-acciones .btn { width: 100%; }
@media (max-width: 599px) {
.calc-card { padding: 20px; }
.calc-escalon .btn { align-self: stretch; }
}
/* ==========================================================================
PANEL «CATÁLOGO» (js/main.js → initNavCatalogo)
Escritorio: panel de vidrio simple bajo el header + fondo atenuado (.nav-scrim).
Mobile: acordeón dentro del menú de pantalla completa. Un solo estado: li.is-open.
Transiciones de 150 ms como máximo.
========================================================================== */
.site-header {
--panel-bg: rgba(11, 7, 32, 0.74);
--panel-line: rgba(255, 255, 255, 0.2);
--panel-accent: rgba(var(--blue-rgb), 0.18);
}
.site-header[data-theme="light"] {
--panel-bg: rgba(255, 255, 255, 0.8);
--panel-line: rgba(0, 0, 0, 0.12);
--panel-accent: rgba(var(--blue-rgb), 0.16);
}
html.nav-open .site-header { --panel-bg: transparent; --panel-line: rgba(255, 255, 255, 0.16); }
.nav-trigger { padding: 0; gap: 6px; background: none; border: 0; cursor: pointer; text-align: left; }
.nav-trigger svg { width: 10px; height: 10px; flex: 0 0 auto; }
.nav-panel ul { display: block; margin: 0; padding: 0; list-style: none; }
.nav-panel a { color: var(--hdr-fg-2); text-decoration: none; transition: color 150ms; }
.nav-panel a:hover { color: var(--hdr-fg); }
.nav-panel-heading {
display: inline-block;
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.4;
text-transform: uppercase;
}
.nav-panel-links a { display: flex; align-items: center; min-height: 36px; font-size: 15px; line-height: 1.3; }
.nav-panel-all {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 112px;
padding: 18px 20px;
border-radius: 20px;
background: var(--panel-accent);
font-size: 17px;
font-weight: 600;
line-height: 1.25;
color: var(--hdr-fg) !important;
}
.nav-panel-all:hover { background: rgba(var(--blue-rgb), 0.3); }
.nav-scrim {
position: fixed;
inset: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity 150ms, visibility 0s linear 150ms;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; transition: opacity 150ms; }
/* Bloqueo del scroll sin salto de layout: se compensa el ancho de la barra de scroll (--sbw) */
html.nav-panel-open, html.dialog-open { overflow: hidden; }
html.nav-panel-open body, html.dialog-open body { padding-right: var(--sbw, 0px); }
html.nav-panel-open .site-header, html.dialog-open .site-header { right: var(--sbw, 0px); }
@media (max-width: 899px) {
html.dialog-open .site-header { right: calc(8px + var(--sbw, 0px)); }
}
@media (min-width: 900px) {
.nav-trigger.nav-link { display: inline-flex; align-items: center; }
.nav-trigger[aria-expanded="true"] { color: var(--hdr-fg); }
.nav-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-trigger svg { transition: transform 150ms; }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-item { position: static; }
.nav-panel {
position: fixed;
top: calc(var(--header-top) + var(--header-h) + 12px);
left: 0;
right: var(--sbw, 0px);
width: min(1200px, calc(100% - 32px));
margin: 0 auto;
padding: 28px 36px 32px;
display: grid;
grid-template-columns: repeat(var(--nav-cols, 4), minmax(0, 1fr));
gap: 8px 40px;
border-radius: 28px;
background: var(--panel-bg);
backdrop-filter: blur(6px) saturate(1.4);
-webkit-backdrop-filter: blur(6px) saturate(1.4);
border: 1px solid var(--panel-line);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 16px 48px rgba(0, 0, 0, 0.25);
visibility: hidden;
opacity: 0;
transition: opacity 150ms, visibility 0s linear 150ms;
}
/* puente invisible entre el header y el panel para que el hover no se corte */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-item.is-open > .nav-panel { visibility: visible; opacity: 1; transition: opacity 150ms; }
}
@media (max-width: 899px) {
.nav-item > .nav-trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.nav-trigger svg { width: 16px; height: 16px; transition: transform 150ms; }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-panel { display: none; padding: 0 0 12px 4px; }
.nav-item.is-open > .nav-panel { display: block; }
.nav-panel-col { margin-bottom: 8px; }
.nav-panel-heading { margin: 8px 0 0; display: flex; align-items: center; min-height: 44px; }
.nav-panel-links a { min-height: 44px; font-size: 17px; color: var(--text-inv-2); }
.nav-panel a { color: var(--text-inv-2); }
.nav-panel-all { min-height: 56px; margin-top: 8px; justify-content: center; color: var(--text-inv) !important; background: rgba(var(--blue-rgb), 0.22); }
}
@media (prefers-reduced-motion: reduce) {
.nav-scrim, .nav-panel, .nav-trigger svg, .nav-panel a { transition: none !important; }
}
/* ==========================================================================
DETALLE DE PRODUCTO (