/* ================================================================ kb TODO Self Storage — Main Stylesheet Brutalismo Minimalista · Monocromático B&W ================================================================ */ /* ── VARIABLES ─────────────────────────────────────────────── */ :root { --black: #000000; --white: #F3F0E8; --g900: #0a0a0a; --g800: #111111; --g700: #1a1a1a; --g600: #262626; --g500: #404040; --g400: #666666; --g300: #999999; --g200: #cccccc; --g100: #e5e5e5; --blue: #1B2D4E; --logo-chip: #F3F0E8; /* color de fondo real del isologo — no se invierte con el tema */ --on-blue: #F3F0E8; /* texto/íconos sobre fondos --blue — --blue no se invierte, así que este tampoco */ --ff: 'Montserrat', sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.6s; --pad: clamp(5rem, 9vw, 9rem); --gutter: clamp(1.5rem, 5vw, 4rem); --max-w: 1440px; --line: 1px solid var(--g700); } /* ── TEMA CLARO (comparativo) ────────────────────────────────── Se activa con [data-theme="light"] en . Invierte la rampa de grises manteniendo los mismos roles semánticos: --black sigue siendo "fondo de página", --white sigue siendo "texto/acento principal" — solo cambian los valores. --blue y --logo-chip no se tocan (colores de marca, funcionan igual en ambos temas). */ [data-theme="light"] { --black: #F3F0E8; --white: #14140f; --g900: #F7F5F0; --g800: #EFEDE6; --g700: #E3E0D6; --g600: #D2CDBF; --g500: #A39D8B; --g400: #726B58; --g300: #55503F; --g200: #332F22; --g100: #1C1911; } [data-theme="light"] .hero__media::before { background: linear-gradient(to bottom, rgba(243,240,232,0.85) 0%, transparent 100%); } [data-theme="light"] .hero__media::after { background: linear-gradient(to right, rgba(243,240,232,0.35) 0%, transparent 60%); } [data-theme="light"] .hero__sub { text-shadow: 0 2px 16px rgba(243, 240, 232, 0.7); } [data-theme="light"] .promo__desc { color: #8a8470; } [data-theme="light"] .promo__eyebrow { color: #7C8FB0; } [data-theme="light"] .promo__benefit::before { color: #7C8FB0; } [data-theme="light"] .nav.nav--scrolled { background: linear-gradient(to right, var(--logo-chip) 0, var(--logo-chip) 170px, transparent 380px), rgba(243,240,232,0.92); } @media (max-width: 900px) { [data-theme="light"] .hero__media::after { background: linear-gradient(to bottom, rgba(243,240,232,0.92) 0%, rgba(243,240,232,0.8) 45%, rgba(243,240,232,0.62) 100%); } } /* Botón flotante para comparar tema oscuro / claro (herramienta de revisión) */ .theme-toggle { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1001; width: 46px; height: 46px; border-radius: 50%; background: var(--blue); border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s var(--ease); } .theme-toggle:hover { transform: scale(1.08); } .theme-toggle svg { width: 19px; height: 19px; color: var(--on-blue); } /* Botón flotante para volver a la página anterior (subpáginas) */ .back-button { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 1001; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--blue); color: var(--on-blue); border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; font-family: var(--ff); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.15em; cursor: pointer; transition: transform 0.3s var(--ease); } .back-button:hover { transform: translateX(-3px); } .back-button svg { width: 14px; height: 14px; flex-shrink: 0; } /* ── RESET ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; } body { font-family: var(--ff); background: var(--black); color: var(--white); overflow-x: hidden; cursor: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } ul, ol { list-style: none; } button { cursor: none; font-family: var(--ff); } input, textarea, select { font-family: var(--ff); } /* ── CURSOR ─────────────────────────────────────────────────── */ #cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; mix-blend-mode: difference; } .cursor__dot { position: absolute; width: 6px; height: 6px; background: #fff; /* fijo a propósito: mix-blend-mode:difference necesita blanco puro para invertir bien en cualquier fondo/tema */ border-radius: 50%; transform: translate(-50%, -50%); } .cursor__ring { position: absolute; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.35s var(--ease), height 0.35s var(--ease); } body.cursor--hover .cursor__ring { width: 56px; height: 56px; } /* ── TYPOGRAPHY ─────────────────────────────────────────────── */ .eyebrow { display: block; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.35em; text-transform: uppercase; color: var(--g300); margin-bottom: 1.75rem; } .section__title { font-size: clamp(2.75rem, 6vw, 6.5rem); font-weight: 900; line-height: 0.93; letter-spacing: -0.025em; text-transform: uppercase; } /* ── BUTTONS ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.875rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; padding: 1rem 2rem; border: 1px solid transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); white-space: nowrap; line-height: 1; } .btn--primary { background: var(--white); color: var(--black); border-color: var(--white); } .btn--primary:hover { background: transparent; color: var(--white); } .btn--outline { background: transparent; color: var(--white); border-color: var(--g600); } .btn--outline:hover { background: var(--white); color: var(--black); border-color: var(--white); } .btn--ghost { background: transparent; color: var(--g400); border-color: transparent; padding-left: 0; } .btn--ghost:hover { color: var(--white); } .btn--large { padding: 1.25rem 2.75rem; font-size: 0.6875rem; } .btn--full { width: 100%; justify-content: center; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn:disabled:hover { background: transparent; color: var(--g300); border-color: var(--g600); } /* ── BRAND FRAME MOTIF (marco abierto del logo) ─────────────── */ .kb-frame::before { content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-top: 1px solid var(--g600); border-left: 1px solid var(--g600); pointer-events: none; } .kb-frame::after { content: ''; position: absolute; bottom: 0; right: 0; width: 44px; height: 44px; border-bottom: 1px solid var(--g600); border-right: 1px solid var(--g600); pointer-events: none; } /* ── SECTION BASE ───────────────────────────────────────────── */ .section { padding: var(--pad) var(--gutter); } .section__wrap { max-width: var(--max-w); margin: 0 auto; } .section__header { margin-bottom: clamp(3rem, 5vw, 5.5rem); text-align: center; } .section__header--left { text-align: left; } /* Subpáginas: no tienen hero de pantalla completa, así que la primera sección necesita aire extra para no pegarse al nav fijo. */ .main--subpage > *:first-child { padding-top: calc(var(--pad) + 3rem); } /* ════════════════════════════════════════════════════════════ NAV ════════════════════════════════════════════════════════════ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: 1.75rem var(--gutter); background: linear-gradient(to right, var(--logo-chip) 0, var(--logo-chip) 210px, transparent 430px); transition: background 0.5s ease, padding 0.4s var(--ease), border-color 0.5s; border-bottom: 1px solid transparent; } .nav.nav--scrolled { background: linear-gradient(to right, var(--logo-chip) 0, var(--logo-chip) 210px, transparent 430px), rgba(0,0,0,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding-top: 1.125rem; padding-bottom: 1.125rem; border-bottom-color: var(--g700); } .nav.nav--scrolled .nav__logo-img { height: 60px; } .nav.is-menu-open { background: var(--g900); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } /* Logo */ .nav__logo { display: flex; align-items: center; line-height: 1; } .nav__logo-img { height: 84px; width: auto; display: block; transition: height 0.4s var(--ease); } /* Links */ .nav__links { display: flex; gap: 2.5rem; align-items: center; justify-content: center; justify-self: center; } .nav__link { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--g300); position: relative; transition: color 0.3s; } .nav__link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--white); transition: width 0.3s var(--ease); } .nav__link:hover { color: var(--white); } .nav__link:hover::after { width: 100%; } .nav__link.is-active { color: var(--white); } .nav__link.is-active::after { width: 100%; } .nav__cta { padding: 0.625rem 1.375rem; } .nav__actions { display: flex; align-items: center; gap: 1rem; justify-self: end; } .nav__cta-group { display: flex; align-items: center; gap: 0.625rem; } .nav__cta--reserva { padding: 0.625rem 1rem; font-size: 0.5625rem; } .nav__cta--reserva.is-active { background: var(--white); color: var(--black); border-color: var(--white); } .nav__hamburger { display: none; flex-direction: column; gap: 6px; background: none; border: none; padding: 4px; mix-blend-mode: difference; /* como el cursor: se ve bien sobre cualquier fondo/tema, sin importar qué haya detrás del nav */ } .nav__hamburger span { display: block; width: 22px; height: 1px; background: #fff; /* fijo a propósito, ver mix-blend-mode arriba */ transition: transform 0.35s var(--ease), opacity 0.2s; transform-origin: center; } .nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu */ .menu-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 998; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); } .menu-overlay.is-open { opacity: 1; pointer-events: auto; } .mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(300px, 80%); background: var(--g900); border-left: var(--line); z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 2rem; gap: 2.5rem; transform: translateX(100%); transition: transform 0.45s var(--ease); } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu ul { display: flex; flex-direction: column; gap: 0; width: 100%; } .mobile-menu ul li { border-top: var(--line); padding: 1.25rem 0; } .mobile-menu ul li:last-child { border-bottom: var(--line); } .mobile-menu a { font-size: clamp(1.375rem, 5.5vw, 2rem); font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; color: var(--g400); transition: color 0.25s; display: block; } .mobile-menu a:hover { color: var(--white); } .mobile-menu a.is-active { color: var(--white); } .mobile-menu .btn { display: inline-flex; font-size: 0.6875rem; white-space: nowrap; width: 100%; justify-content: center; align-self: stretch; } .mobile-menu .btn.is-active { background: var(--white); color: var(--black); border-color: var(--white); } .mobile-menu__social { display: flex; gap: 1.5rem; align-items: center; justify-content: center; border-top: var(--line); padding-top: 1.5rem; width: 100%; } .mobile-menu__social a { color: var(--g400); display: flex; transition: color 0.25s; font-size: inherit; white-space: normal; text-transform: none; font-weight: normal; letter-spacing: 0; } .mobile-menu__social a:hover { color: var(--white); } /* Nav switches to hamburger earlier than other breakpoints: logo + 4 links + 2 CTA buttons need more room than the shared 768px tablet breakpoint gives. */ @media (max-width: 1080px) { .nav__links { display: none; } .nav__actions .nav__cta-group { display: none; } .nav__hamburger { display: flex; } } /* ════════════════════════════════════════════════════════════ HERO ════════════════════════════════════════════════════════════ */ .hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: 55% 45%; overflow: hidden; border-bottom: var(--line); } .hero__media { position: relative; grid-column: 2; grid-row: 1; overflow: hidden; border-left: var(--line); } .hero__media::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 220px; background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%); z-index: 1; pointer-events: none; } .hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.2) 0%, transparent 60%); pointer-events: none; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.3) contrast(1.1); transform-origin: center; } .hero__content { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; padding: 9rem var(--gutter) 8rem calc(var(--gutter) + 1rem); position: relative; z-index: 2; } .hero__eyebrow { margin-bottom: 2.5rem; } .hero__title { font-size: clamp(4.5rem, 8.5vw, 12rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 2.5rem; padding-right: 0.1em; } .hero__line { display: block; overflow-x: visible; overflow-y: clip; } .hero__line-inner { display: block; } .hero__sub { font-size: clamp(0.875rem, 1.4vw, 1.0625rem); font-weight: 300; color: var(--g300); letter-spacing: 0.04em; line-height: 1.7; margin-bottom: 3rem; max-width: 400px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); } .hero__actions { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; } /* Badge 24/7 */ .hero__badge { position: absolute; bottom: 5rem; left: calc(55% - 80px); transform: translateX(-50%); z-index: 3; padding: 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.125rem; line-height: 1; } .hero__badge span { font-size: 0.4375rem; font-weight: 700; letter-spacing: 0.45em; text-transform: uppercase; color: var(--g500); } .hero__badge strong { font-size: clamp(1.75rem, 3.5vw, 3rem); font-weight: 900; letter-spacing: -0.03em; } /* Scroll indicator */ .hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .hero__scroll-label { font-size: 0.4375rem; font-weight: 700; letter-spacing: 0.45em; text-transform: uppercase; color: var(--g600); } .hero__scroll-line { width: 1px; height: 50px; position: relative; overflow: hidden; background: var(--g700); } .hero__scroll-line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--g400); animation: scrollDrop 2s ease-in-out infinite; } @keyframes scrollDrop { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } } /* Ticker */ .hero__ticker { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; overflow: hidden; border-top: var(--line); background: rgba(0,0,0,0.7); } .ticker__track { display: flex; width: max-content; } .ticker__set { display: flex; align-items: center; gap: 2.5rem; padding: 0.875rem 2.5rem; white-space: nowrap; } .ticker__set span { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--g500); } .ticker__sep { width: 3px; height: 3px; background: var(--g700); border-radius: 50%; flex-shrink: 0; } /* ════════════════════════════════════════════════════════════ SOBRE NOSOTROS (index.html — reemplaza la vieja grilla de Servicios) ════════════════════════════════════════════════════════════ */ .sobre-nosotros { border-top: var(--line); display: grid; grid-template-columns: 1fr 1fr; } .sobre-nosotros__media { position: relative; overflow: hidden; border-right: var(--line); min-height: 420px; } .sobre-nosotros__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.25) contrast(1.05); } .sobre-nosotros__content { padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; } .sobre-nosotros__desc { font-size: 0.9375rem; font-weight: 300; color: var(--g300); line-height: 1.75; max-width: 480px; } @media (max-width: 900px) { .sobre-nosotros { grid-template-columns: 1fr; } .sobre-nosotros__media { height: 55vw; min-height: 240px; border-right: none; border-bottom: var(--line); } } /* ════════════════════════════════════════════════════════════ SERVICIOS (sin uso actualmente — se deja por si se vuelve a usar) ════════════════════════════════════════════════════════════ */ .servicios { border-top: var(--line); padding: var(--pad) 0; } .servicios .section__header { padding: 0 var(--gutter); } .servicios__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--line); background: var(--g700); gap: 1px; } .service-card { background: var(--black); overflow: hidden; display: flex; flex-direction: column; } .service-card__img { aspect-ratio: 4 / 5; overflow: hidden; position: relative; } .service-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease), filter 0.5s; filter: saturate(0.2) contrast(1.05); transform-origin: center; } .service-card:hover .service-card__img img { transform: scale(1.05); filter: saturate(0.5) contrast(1.05); } .service-card__body { padding: 2rem 2rem 2.5rem; border-top: var(--line); flex: 1; display: flex; flex-direction: column; } .service-card__num { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.35em; color: var(--white); margin-bottom: 1rem; } .service-card__tag { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--on-blue); background: var(--blue); padding: 0.2rem 0.625rem; margin-bottom: 0.875rem; display: inline-block; } .service-card__title { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 900; letter-spacing: -0.025em; text-transform: uppercase; margin-bottom: 1.125rem; line-height: 1; } .service-card__desc { font-size: 0.8125rem; font-weight: 300; color: var(--g300); line-height: 1.75; flex: 1; margin-bottom: 2rem; } .service-card__link { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--white); padding-top: 1.5rem; border-top: var(--line); transition: color 0.3s; margin-top: auto; } .service-card__link svg { transition: transform 0.3s var(--ease); } .service-card:hover .service-card__link { color: var(--white); } .service-card:hover .service-card__link svg { transform: translateX(5px); } /* Acento azul — card de bauleras */ .service-card--accent { border-top: 3px solid var(--blue); } /* ════════════════════════════════════════════════════════════ TAMAÑOS ════════════════════════════════════════════════════════════ */ .tamanos { border-top: var(--line); background: var(--g900); padding: var(--pad) var(--gutter); } .tamanos__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--line); margin-top: 0; position: relative; } .tamanos__table { width: 100%; border-collapse: collapse; min-width: 700px; } .tamanos__table th, .tamanos__table td { padding: 1.5rem 2rem; border-right: var(--line); border-bottom: var(--line); vertical-align: middle; } .tamanos__table th:last-child, .tamanos__table td:last-child { border-right: none; } .tamanos__table thead tr { border-bottom: var(--line); } .tamanos__table tbody tr:last-child td { border-bottom: none; } .tamanos__table thead th { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--on-blue); background: var(--blue); white-space: nowrap; } .t-size { font-size: clamp(2.5rem, 4.5vw, 5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--white); } .t-m2 { font-size: 1.25rem; font-weight: 700; color: var(--white); white-space: nowrap; } .t-m2 sub { font-size: 0.625rem; font-weight: 300; color: var(--g400); vertical-align: middle; font-style: normal; } .t-desc { font-size: 0.8125rem; font-weight: 300; color: var(--g300); line-height: 1.65; min-width: 200px; } .t-price { white-space: nowrap; } .t-price .desde { font-size: 0.4375rem; font-weight: 600; color: var(--g500); display: block; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 0.25rem; } .t-price strong { font-size: 1.375rem; font-weight: 700; } .t-price .mes { font-size: 0.5625rem; color: var(--g400); font-weight: 300; } .tamanos__table tbody tr:hover { background: var(--g800); } /* Versión en carrusel — reemplaza la tabla en mobile (ver override al final del archivo). Misma info, en tarjetas que se desplazan horizontalmente en vez de la tabla completa con scroll lateral. */ .tamanos__cards { display: none; } .tamanos__card { border: var(--line); padding: 1.75rem; background: var(--g900); min-width: 0; /* si no, el navegador no la deja achicarse por debajo del contenido (precio+botón sin wrap) y termina tapada por las flechas */ } .tamanos__card-top { display: flex; align-items: baseline; gap: 1.25rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: var(--line); } .tamanos__card .t-desc { margin-bottom: 1.5rem; min-width: 0; } .tamanos__card-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: var(--line); } .tamanos__card-bottom .btn { padding: 0.625rem 1.25rem; font-size: 0.5625rem; } /* Flechas de carrusel (tamaños, testimonios) — sólo visibles en mobile (ver override al final del archivo), señalan que se puede desplazar. */ .carousel-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 50%; border: var(--line); background: var(--white); color: var(--black); box-shadow: 0 4px 16px rgba(0,0,0,0.22); cursor: pointer; transition: opacity 0.25s, transform 0.15s; } .carousel-arrow:active { transform: translateY(-50%) scale(0.9); } .carousel-arrow.is-disabled { opacity: 0.35; pointer-events: none; } .tamanos__arrow--prev { left: 0.5rem; } .tamanos__arrow--next { right: 0.5rem; } .testimonios__arrow--next { right: 0.5rem; } .tamanos__note { font-size: 0.625rem; color: var(--g300); margin-top: 1.5rem; letter-spacing: 0.08em; font-weight: 300; } /* Flete strip */ .flete-strip { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2.5rem; background: var(--blue); padding: 2.5rem 3rem; margin-top: 3rem; } .flete-strip__eyebrow { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); display: block; margin-bottom: 0.875rem; } .flete-strip__title { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: var(--on-blue); margin-bottom: 1rem; } .flete-strip__desc { font-size: 0.8125rem; font-weight: 300; color: rgba(255, 255, 255, 0.6); line-height: 1.75; max-width: 52ch; } @media (max-width: 700px) { .flete-strip { grid-template-columns: 1fr; gap: 1.75rem; padding: 2rem 1.5rem; } .flete-strip__cta { width: 100%; justify-content: center; } } /* ════════════════════════════════════════════════════════════ SUCURSALES ════════════════════════════════════════════════════════════ */ .espacios { border-top: var(--line); padding: var(--pad) 0; } .espacios .section__header { padding: 0 var(--gutter); } .sucursales__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--line); background: var(--g700); gap: 1px; } .sucursal-card { background: var(--black); overflow: hidden; display: flex; flex-direction: column; } .sucursal-card__img { aspect-ratio: 16 / 10; overflow: hidden; } .sucursal-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease), filter 0.5s; filter: saturate(0.2) contrast(1.05); } .sucursal-card:hover .sucursal-card__img img { transform: scale(1.05); filter: saturate(0.4) contrast(1.05); } .sucursal-card__body { padding: 1.75rem 2rem 2rem; border-top: var(--line); flex: 1; display: flex; flex-direction: column; } .sucursal-card__id { font-size: 0.4375rem; font-weight: 700; letter-spacing: 0.4em; color: var(--g600); text-transform: uppercase; margin-bottom: 0.625rem; } .sucursal-card__name { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 900; letter-spacing: -0.025em; text-transform: uppercase; line-height: 1; margin-bottom: 0.3rem; } .sucursal-card__barrio { font-size: 0.625rem; font-weight: 300; color: var(--g400); letter-spacing: 0.12em; margin-bottom: 0.75rem; } .sucursal-card__address { font-size: 0.75rem; font-weight: 300; color: var(--g400); flex: 1; margin-bottom: 1.25rem; } .sucursal-card__tags { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .tag-service { font-size: 0.4375rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.3rem 0.625rem; border: 1px solid var(--g700); color: var(--g500); } .sucursal-card__price { margin-bottom: 1.5rem; } .sucursal-card__price .desde { font-size: 0.4375rem; font-weight: 600; color: var(--g500); letter-spacing: 0.25em; text-transform: uppercase; display: block; margin-bottom: 0.25rem; } .sucursal-card__price strong { font-size: 1.625rem; font-weight: 700; } .sucursal-card__price .mes { font-size: 0.625rem; color: var(--g400); font-weight: 300; } .sucursal-card__cta { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--g500); padding-top: 1.375rem; border-top: var(--line); transition: color 0.3s; margin-top: auto; } .sucursal-card__cta svg { transition: transform 0.3s var(--ease); } .sucursal-card:hover .sucursal-card__cta { color: var(--white); } .sucursal-card:hover .sucursal-card__cta svg { transform: translateX(5px); } /* ════════════════════════════════════════════════════════════ SEGUÍ EXPLORANDO — índice a subpáginas + volver arriba (index.html) ════════════════════════════════════════════════════════════ */ .home-explore { border-top: var(--line); padding: var(--pad) 0; text-align: center; } .home-explore .section__header { padding: 0 var(--gutter); } .home-explore__grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: var(--line); border-bottom: var(--line); background: var(--g700); gap: 1px; margin-bottom: 3rem; } .home-explore__link { background: var(--black); padding: 1.75rem 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.625rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--g300); transition: color 0.3s, background 0.3s; } .home-explore__link:hover { color: var(--white); background: var(--g900); } .home-explore__link svg { transition: transform 0.3s var(--ease); flex-shrink: 0; } .home-explore__link:hover svg { transform: translateX(4px); } .home-explore__top { display: inline-flex; align-items: center; gap: 0.625rem; font-family: var(--ff); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--g400); background: none; border: none; cursor: pointer; transition: color 0.3s; } .home-explore__top:hover { color: var(--white); } .home-explore__top svg { transition: transform 0.3s var(--ease); } .home-explore__top:hover svg { transform: translateY(-3px); } @media (max-width: 900px) { .home-explore__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .home-explore__grid { grid-template-columns: 1fr; } } /* Volver arriba — subpáginas (index.html ya tiene el suyo dentro de .home-explore) */ .back-to-top-bar { border-top: var(--line); padding: 2.5rem var(--gutter); text-align: center; } /* ════════════════════════════════════════════════════════════ UBICACIÓN — mapa + galería (ubicacion.html) ════════════════════════════════════════════════════════════ */ .ubicacion-map { border-top: var(--line); height: 480px; background: var(--g900); filter: grayscale(0.6) contrast(1.05); } .ubicacion-map iframe { display: block; } .ubicacion-gallery__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--g700); border: 1px solid var(--g700); } .ubicacion-gallery__item { aspect-ratio: 4 / 3; overflow: hidden; background: var(--black); } .ubicacion-gallery__item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.2) contrast(1.05); transition: filter 0.5s, transform 0.9s var(--ease); } .ubicacion-gallery__item:hover img { filter: saturate(0.4) contrast(1.05); transform: scale(1.04); } /* ════════════════════════════════════════════════════════════ RESERVAS — placeholder (reservas.html) ════════════════════════════════════════════════════════════ */ .reservas-placeholder { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.5rem; } .reservas-placeholder__desc { max-width: 480px; color: var(--g300); font-size: 0.9375rem; line-height: 1.75; margin-top: -0.5rem; } /* ════════════════════════════════════════════════════════════ BENEFICIOS ════════════════════════════════════════════════════════════ */ .beneficios { border-top: var(--line); background: var(--g900); padding: 0 0 var(--pad); } /* Stats row */ .stats__row { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: var(--line); background: var(--g700); gap: 1px; margin-bottom: var(--pad); } .stat-item { background: var(--blue); padding: clamp(2rem, 4vw, 4rem) 2rem; text-align: center; } .stat-item__val { font-size: clamp(2.75rem, 5.5vw, 6rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.875rem; font-variant-numeric: tabular-nums; color: var(--on-blue); } .stat-item__label { font-size: 0.5625rem; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(243, 240, 232, 0.65); } /* Benefits grid */ .beneficios__inner { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 5vw, 5rem); padding: 0 var(--gutter); max-width: var(--max-w); margin: 0 auto; align-items: start; } .beneficios__inner .section__header { margin-bottom: 0; } .beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; border: var(--line); background: var(--g700); gap: 1px; } .beneficio-item { background: var(--g900); padding: 2rem 2rem 2.25rem; transition: background 0.3s; } .beneficio-item:hover { background: var(--g800); } .beneficio-item__title { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; margin-bottom: 0.75rem; } .beneficio-item__desc { font-size: 0.8125rem; font-weight: 300; color: var(--g300); line-height: 1.75; } /* ════════════════════════════════════════════════════════════ PROCESO ════════════════════════════════════════════════════════════ */ .proceso { border-top: var(--line); padding: var(--pad) 0; } .proceso .section__header { padding: 0 var(--gutter); } .pasos__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--line); background: var(--g700); gap: 1px; } .paso-item { background: var(--black); padding: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 3vw, 3rem); position: relative; overflow: hidden; } .paso-item::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--blue); } .paso-item__num { font-size: clamp(5rem, 9vw, 10rem); font-weight: 900; letter-spacing: -0.05em; line-height: 1; color: var(--white); display: block; margin-bottom: 2rem; user-select: none; } .paso-item__title { font-size: clamp(1.125rem, 2vw, 1.875rem); font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 1rem; line-height: 1.1; } .paso-item__desc { font-size: 0.8125rem; font-weight: 300; color: var(--g300); line-height: 1.8; } /* ════════════════════════════════════════════════════════════ TESTIMONIOS ════════════════════════════════════════════════════════════ */ .testimonios { border-top: var(--line); padding: var(--pad) 0; } .testimonios .section__header { padding: 0 var(--gutter); } /* Envuelve el grid para anclar la flecha del carrusel mobile a un contenedor que NO scrollea (si se ancla al grid mismo, que es el que tiene overflow-x, la flecha se desplaza con las tarjetas). */ .testimonios__carousel-wrap { position: relative; } .testimonios__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--line); background: var(--g700); gap: 1px; } .testimonio-card { background: var(--black); padding: 2.5rem 2.25rem; display: flex; flex-direction: column; gap: 1.5rem; } .testimonio-card__quote { font-size: 4rem; font-weight: 900; color: var(--blue); line-height: 0.8; font-style: normal; user-select: none; } .testimonio-card__text { font-size: 0.9375rem; font-weight: 300; color: var(--g200); line-height: 1.8; flex: 1; } .testimonio-card__author { border-top: var(--line); padding-top: 1.375rem; } .testimonio-card__name { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.25rem; } .testimonio-card__rol { font-size: 0.625rem; font-weight: 300; color: var(--g300); letter-spacing: 0.1em; } /* ════════════════════════════════════════════════════════════ CONTACTO ════════════════════════════════════════════════════════════ */ .contacto { border-top: var(--line); padding: var(--pad) var(--gutter); } .contacto__inner { display: grid; grid-template-columns: 1fr 1fr; border: var(--line); position: relative; max-width: var(--max-w); margin: 0 auto; } .contacto__left { min-width: 0; padding: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem); border-right: var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; } .contacto__title { font-size: clamp(2rem, 4vw, 5.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; text-transform: uppercase; } .contacto__sub { font-size: 0.9375rem; font-weight: 300; color: var(--g300); line-height: 1.75; max-width: 380px; } .contacto__right { min-width: 0; padding: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem); } /* Texto largo ("ESCRIBINOS POR WHATSAPP") — permite que envuelva en vez de desbordar el botón en mobile (usado en contacto.html y reservas.html) */ #whatsapp-link { white-space: normal; text-align: center; } /* Form */ .contacto__form { display: flex; flex-direction: column; gap: 2rem; } .form__field { display: flex; flex-direction: column; gap: 0.625rem; } .form__label { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--g500); } .form__input { background: transparent; border: none; border-bottom: 1px solid var(--g700); color: var(--white); padding: 0.875rem 0; font-size: 0.875rem; font-weight: 300; letter-spacing: 0.04em; transition: border-color 0.3s; outline: none; resize: none; width: 100%; appearance: none; } .form__input::placeholder { color: var(--g600); } .form__input:focus { border-color: var(--g400); } .form__textarea { min-height: 90px; line-height: 1.7; } .form__legal { font-size: 0.5625rem; color: var(--g600); letter-spacing: 0.06em; text-align: center; font-weight: 300; } .form__legal a { color: var(--g400); text-decoration: underline; text-underline-offset: 2px; } /* ════════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════════ */ .footer { border-top: var(--line); padding: 2.5rem var(--gutter) 1.75rem; } .footer__top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: var(--line); margin-bottom: 1.5rem; } .footer__logo { display: flex; align-items: center; } .footer__logo .nav__logo-img { height: 68px; box-sizing: content-box; padding: 0.4375rem; background: var(--logo-chip); border-radius: 0.625rem; } .footer__nav { display: flex; gap: 2rem; flex-wrap: wrap; } .footer__link { font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--g500); transition: color 0.3s; } .footer__link:hover { color: var(--white); } .footer__link.is-active { color: var(--white); } .footer__social { display: flex; gap: 1.5rem; } .footer__social-link { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.22em; color: var(--g500); transition: color 0.3s; } .footer__social-link:hover { color: var(--white); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .footer__copy { font-size: 0.5625rem; color: var(--g600); letter-spacing: 0.08em; font-weight: 300; } .footer__tagline { font-size: 0.4375rem; font-weight: 700; letter-spacing: 0.45em; text-transform: uppercase; color: var(--g700); } /* ════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .servicios__grid { grid-template-columns: 1fr 1fr; } .sucursales__grid { grid-template-columns: 1fr 1fr; } .stats__row { grid-template-columns: repeat(2, 1fr); } .beneficios__inner { grid-template-columns: 1fr; gap: 3rem; } .hero__badge { left: calc(55% - 100px); } } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; min-height: 90svh; } .hero__media { position: absolute; inset: 0; z-index: 0; border-left: none; grid-column: auto; grid-row: auto; } .hero__media::after { background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.78) 45%, rgba(0,0,0,0.6) 100%); } .hero__content { grid-column: 1; padding-top: 7rem; padding-bottom: 6rem; position: relative; z-index: 2; } .hero__badge { display: none; } } @media (max-width: 768px) { .nav__links { display: none; } .nav__cta-group { display: none; } .nav__hamburger { display: flex; } .nav { padding-top: 1rem; padding-bottom: 1rem; } .nav.nav--scrolled { padding-top: 0.75rem; padding-bottom: 0.75rem; } .nav__logo-img { height: 54px; } .nav.nav--scrolled .nav__logo-img { height: 46px; } .pasos__grid { grid-template-columns: 1fr; } .testimonios__grid { grid-template-columns: 1fr; } .servicios__grid { grid-template-columns: 1fr; } .sucursales__grid { grid-template-columns: 1fr; } .contacto__inner { grid-template-columns: 1fr; } .contacto__left { border-right: none; border-bottom: var(--line); } .footer__top { flex-direction: column; align-items: flex-start; } .footer__bottom { flex-direction: column; gap: 0.5rem; } .beneficios__grid { grid-template-columns: 1fr; } body { cursor: auto; } #cursor { display: none; } } @media (max-width: 480px) { :root { --gutter: 1.25rem; --pad: 4rem; } .hero__title { font-size: clamp(3.5rem, 14vw, 5.5rem); } .stats__row { grid-template-columns: repeat(2, 1fr); } .contacto__title { font-size: clamp(1.5rem, 8vw, 2.5rem); } .contacto__left { padding: 2rem 1.25rem; } .contacto__right { padding: 2rem 1.25rem; } .mobile-menu > .btn { display: inline-flex; align-self: stretch; justify-content: center; font-size: 0.6875rem; white-space: nowrap; width: 100%; } } /* ════════════════════════════════════════════════════════════ COWORK DETAIL ════════════════════════════════════════════════════════════ */ .cowork-detail { border-top: var(--line); } .cowork-detail__inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 85vh; } .cowork-detail__media { position: relative; overflow: hidden; border-right: var(--line); } .cowork-detail__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(0.25) contrast(1.05); transition: filter 0.6s; } .cowork-detail__media:hover img { filter: saturate(0.45) contrast(1.05); } .cowork-detail__media-tag { position: absolute; bottom: 2rem; left: 2rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--g400); } .cowork-detail__media-tag-sep { color: var(--g600); font-size: 0.625rem; } .cowork-detail__content { padding: clamp(4rem, 7vw, 7rem) clamp(2.5rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; gap: 2.5rem; background: var(--g900); } .cowork-detail__desc { font-size: clamp(0.875rem, 1.4vw, 1.0625rem); font-weight: 300; color: var(--g300); line-height: 1.85; max-width: 480px; } /* Features grid inside cowork detail */ .cowork-detail__features { display: grid; grid-template-columns: 1fr 1fr; border: var(--line); background: var(--g700); gap: 1px; } .cowork-feature { background: var(--g900); padding: 1.375rem 1.5rem; border-left: 2px solid transparent; transition: background 0.3s, border-color 0.3s; } .cowork-feature:hover { background: var(--g800); border-left-color: var(--blue); } .cowork-feature__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; } .cowork-feature__desc { font-size: 0.75rem; font-weight: 300; color: var(--g300); line-height: 1.65; } /* ════════════════════════════════════════════════════════════ PROMO INAUGURACIÓN ════════════════════════════════════════════════════════════ */ .promo { background: var(--white); color: var(--black); border-bottom: 1px solid var(--black); padding: clamp(4rem, 7vw, 6rem) var(--gutter); } .promo__inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: center; } .promo__eyebrow { display: block; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--blue); margin-bottom: 1.5rem; } .promo__title { font-size: clamp(1.75rem, 3.5vw, 3.5rem); font-weight: 900; line-height: 1.0; letter-spacing: -0.025em; text-transform: uppercase; color: var(--black); margin-bottom: 1.25rem; } .promo__desc { font-size: 0.9375rem; font-weight: 300; color: #444; line-height: 1.75; max-width: 420px; } .promo__right { display: flex; flex-direction: column; gap: 2.5rem; align-items: flex-start; } .promo__benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #000; border: 1px solid #000; width: 100%; } .promo__benefit { background: var(--white); padding: 1.125rem 1.375rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); display: flex; align-items: center; gap: 0.625rem; } .promo__benefit::before { content: '★'; font-size: 0.5rem; color: var(--blue); flex-shrink: 0; } /* ════════════════════════════════════════════════════════════ SUCURSAL ÚNICA ════════════════════════════════════════════════════════════ */ .sucursal-single { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--line); min-height: 60vh; } .sucursal-single__media { position: relative; overflow: hidden; border-right: var(--line); } .sucursal-single__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.2) contrast(1.05); transition: filter 0.6s; } .sucursal-single:hover .sucursal-single__media img { filter: saturate(0.4) contrast(1.05); } .sucursal-single__body { background: var(--g900); padding: clamp(3rem, 6vw, 6rem) clamp(2.5rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; gap: 2rem; } .sucursal-single__id { font-size: 0.4375rem; font-weight: 700; letter-spacing: 0.4em; color: var(--g600); text-transform: uppercase; } .sucursal-single__name { font-size: clamp(2rem, 4vw, 4rem); font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; line-height: 0.95; } .sucursal-single__address { font-size: 0.9375rem; font-weight: 300; color: var(--g400); letter-spacing: 0.04em; line-height: 1.6; } .sucursal-single__tags { display: flex; gap: 0.375rem; flex-wrap: wrap; } .sucursal-single__hours { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.5rem 0; border-top: var(--line); border-bottom: var(--line); } .sucursal-single__hour-row { display: flex; gap: 1.5rem; align-items: baseline; } .sucursal-single__hour-label { font-size: 0.4375rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--g600); min-width: 60px; } .sucursal-single__hour-val { font-size: 0.8125rem; font-weight: 300; color: var(--g300); } /* Horarios en contacto */ .contacto__horarios { display: flex; flex-direction: column; gap: 0; border-top: var(--line); border-bottom: var(--line); padding: 1.5rem 0; } .contacto__horario-item { display: flex; gap: 1.5rem; align-items: baseline; padding: 0.5rem 0; } .contacto__horario-label { font-size: 0.4375rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--g600); min-width: 75px; flex-shrink: 0; } .contacto__horario-val { font-size: 0.8125rem; font-weight: 300; color: var(--g300); } /* Botón invertido para secciones blancas */ .btn--dark { background: var(--blue); color: var(--on-blue); border-color: var(--blue); } .btn--dark:hover { background: transparent; color: var(--blue); } [data-theme="light"] .btn--dark:hover { color: var(--on-blue); } /* Navy sobre fondos oscuros — hover invierte a fondo claro */ .btn--blue { background: var(--blue); color: var(--on-blue); border-color: var(--blue); } .btn--blue:hover { background: var(--logo-chip); color: var(--blue); border-color: var(--logo-chip); } /* Hero 3rd line thin variant */ .hero__line--thin .hero__line-inner { font-size: 0.38em; font-weight: 300; letter-spacing: 0.18em; color: var(--g300); padding-top: 0.5em; display: block; } /* Form select */ .form__select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23404040' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; padding-right: 1.5rem; cursor: pointer; color: var(--g600); } .form__select option { background: var(--black); color: var(--white); } .form__select:focus { color: var(--white); } /* ════════════════════════════════════════════════════════════ RESPONSIVE — nuevas secciones ════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .cowork-detail__inner { grid-template-columns: 1fr; min-height: auto; } .cowork-detail__media { height: 55vw; min-height: 280px; border-right: none; border-bottom: var(--line); } .cowork-detail__content { padding: 3rem var(--gutter); } .promo__inner { grid-template-columns: 1fr; gap: 2.5rem; } .sucursal-single { grid-template-columns: 1fr; } .sucursal-single__media { height: 55vw; min-height: 260px; border-right: none; border-bottom: var(--line); } .sucursal-single__body { padding: 3rem var(--gutter); } } @media (max-width: 600px) { .cowork-detail__features { grid-template-columns: 1fr; } .promo__benefits { grid-template-columns: 1fr; } } @media (max-width: 480px) { /* Compactar el home en mobile — sigue sintiéndose largo */ .espacios { padding: 2.5rem 0; } .sucursal-single__media { height: 45vw; min-height: 190px; } .sucursal-single__body { padding: 2rem 1.25rem; gap: 1.25rem; } .sobre-nosotros__media { height: 45vw; min-height: 190px; } .sobre-nosotros__content { padding: 2.5rem 1.25rem; gap: 1.125rem; } .home-explore { padding: 2.5rem 0; } .home-explore .section__header { margin-bottom: 2rem; } .home-explore__grid { margin-bottom: 1.5rem; } .home-explore__link { padding: 1.125rem 1.5rem; } } /* ── ACORDEÓN MOBILE ───────────────────────────────────────────── Beneficios y Cowork Features colapsan en mobile para no generar listas largas. Desktop no se ve afectado. ────────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .beneficio-item, .cowork-feature { cursor: pointer; } .beneficio-item__title, .cowork-feature__title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0; } .beneficio-item__title::after, .cowork-feature__title::after { content: '+'; font-size: 1.5rem; font-weight: 200; flex-shrink: 0; line-height: 1; color: var(--g500); transition: transform 0.35s var(--ease), color 0.3s; } .beneficio-item.is-open .beneficio-item__title::after, .cowork-feature.is-open .cowork-feature__title::after { transform: rotate(45deg); color: var(--white); } .beneficio-item__desc, .cowork-feature__desc { height: 0; overflow: hidden; margin-top: 0; } } /* ════════════════════════════════════════════════════════════ CARRUSELES MOBILE — reemplaza el apilado vertical (1 columna) por listas horizontales con scroll, para que la página no se alargue tanto para abajo. Puesto al final a propósito: así siempre gana en la cascada sobre las reglas de grid de arriba. ════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Cómo Funciona (pasos) */ .pasos__grid { display: flex; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; padding: 0 var(--gutter); } .pasos__grid::-webkit-scrollbar { display: none; } .paso-item { flex: 0 0 82%; scroll-snap-align: start; } /* Testimonios */ .testimonios__grid { display: flex; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; padding: 0 var(--gutter); } .testimonios__grid::-webkit-scrollbar { display: none; } .testimonio-card { flex: 0 0 82%; scroll-snap-align: start; } /* Beneficios de la promo de inauguración: sin carrusel, se pidió dejarla como estaba (apilada, 1 columna). */ /* Seguí explorando (mini-menú a las subpáginas) */ .home-explore__grid { display: flex; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; padding: 0 var(--gutter); } .home-explore__grid::-webkit-scrollbar { display: none; } .home-explore__link { flex: 0 0 46%; scroll-snap-align: start; } /* Estadísticas (24/7, tamaños, etc.) */ .stats__row { display: flex; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; } .stats__row::-webkit-scrollbar { display: none; } .stat-item { flex: 0 0 46%; scroll-snap-align: start; } /* Sucursales (si en el futuro hay más de una) */ .sucursales__grid { display: flex; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; } .sucursales__grid::-webkit-scrollbar { display: none; } .sucursal-card { flex: 0 0 82%; scroll-snap-align: start; } /* Tamaños de self storage: carrusel de tarjetas en vez de tabla con scroll lateral, con flechas que señalan que se puede desplazar. */ .tamanos__table-wrap { border: none; } .tamanos__table { display: none; } .tamanos__cards { display: flex; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory; gap: 1rem; /* 3.5rem = ancho de la flecha (2.5rem) + su offset (0.5rem) + margen, así la tarjeta queda centrada entre las flechas y no le tapan el texto */ padding: 0 3.5rem; } .tamanos__cards::-webkit-scrollbar { display: none; } .tamanos__card { flex: 0 0 100%; scroll-snap-align: center; } .carousel-arrow { display: flex; } } /* ── UTILITY: visually hidden ───────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }