/* North Atlas · base.css — reset, letra, botones, barra, menú, pie, barra inferior de celular, anclas y breakpoints 1300/1040/860/480. E4 (27-oct): sin selector ni su margen reservado; color-scheme «light dark» con colores explícitos (la página se ve igual en ambos modos; pensado para que el navegador no la oscurezca por su cuenta); barra de 60 px y menú a pantalla completa en celular; barra inferior Cotizar · Llamar (auditoría de Sordón C1, C7, C14). Portado de scripts/laminas.py (láminas aprobadas). Los tokens de cada opción llegan en el :root inline de cada página (opciones.py); este archivo no redefine tokens en :root ni lleva reglas por opción (E3, diseño §2a): lo único que cambia entre opciones es la paleta y el hero, que usa sus tokens locales --hero-* (§17). Dueño: asiento 2 (Opus). E5 (27-oct, expeditio/e5-diseno.md §4–§5): superficies --sup-1/--sup-2 y texto secundario ≥ 0.85 (Sordón C11); escala de 8 tamaños; título de sección común (.sec-titulo); barra a todo el ancho con 1fr auto 1fr (logo y teléfono a la izquierda, menú centrado, idioma y botón a la derecha); pie con línea legal única y enlaces de 44 px (C10); secciones de 64 px en tablet y 40 px en celular; cuerpo de 16 px a ≤ 600 px; main enfocable para «Saltar». E6 (28-oct, auditoría v3 de Sordón §5.4): el número de teléfono se ve junto a su ícono en la barra desde 1200 px (antes sólo desde ~1300 en EN y ~1420 en ES); de 1200 a 1439 el menú se centra en el espacio libre entre logo y botón. En celular la barra no anima su sombra (decisión 5: nada se mueve solo). E6, excepción de César del 29-oct (E6-P-SITIO-02 y 05; sitio/e6-excepcion-reparacion/LEEME.md): áreas de 44 px de alto en el menú de escritorio, el botón de la barra y los botones chicos; en celular, el foco de teclado ya no queda bajo la barra inferior (scroll-padding-bottom). */ @font-face { font-family: 'Archivo'; src: url(../fonts/Archivo-100-900.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; } @font-face { font-family: 'Cormorant Garamond'; src: url(../fonts/CormorantGaramond-600.woff2) format('woff2'); font-weight: 500 700; font-display: swap; } @font-face { font-family: 'Geist'; src: url(../fonts/Geist-400.woff2) format('woff2'); font-weight: 100 900; font-display: swap; } * { box-sizing: border-box; } /* Anclas de la página única (§4.5): la barra fija mide 76 px (60 en celular); el título queda 12 px debajo. */ :root { color-scheme: light dark; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; background: var(--bg); color: var(--text); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { --max: 1200px; --gap: clamp(20px, 3vw, 40px); --borde: var(--gap); --sec: var(--sec-d); --sup-1: color-mix(in srgb, var(--dark) 6%, var(--bg)); --sup-2: color-mix(in srgb, var(--dark) 10%, var(--bg)); --soft-dark: color-mix(in srgb, var(--on-dark) 88%, transparent); --linea: color-mix(in srgb, var(--text) 12%, transparent); --t-sec: clamp(30px, 3.6vw, 44px); --t-banda: clamp(36px, 4.2vw, 52px); --t-enunciado: clamp(24px, 2.4vw, 32px); margin: 0; font: 400 17px/1.6 var(--body); color: var(--text); background: var(--bg); } img, video { display: block; max-width: 100%; } .wrap { width: min(100% - 2 * var(--borde), var(--max)); margin-inline: auto; } .bar .wrap { width: min(100% - 2 * var(--gap), var(--max)); } h1, h2, h3 { font-family: var(--display); font-stretch: var(--display-stretch); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); margin: 0; line-height: 1.05; text-wrap: balance; } h1 { font-size: clamp(34px, 5.2vw, var(--h1)); max-width: 18ch; } h2 { font-size: clamp(30px, 3.6vw, var(--h2)); max-width: 18ch; line-height: 1.1; } h3 { font-size: var(--h3); line-height: 1.15; } p { margin: 0; max-width: 62ch; } a { color: inherit; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } main:focus, .grupo:focus { outline: none; } .saltar { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 16px; background: var(--accent); color: var(--dark); font-weight: 600; text-decoration: none; border-radius: var(--radius-btn); } .saltar:focus { top: 12px; } /* título de sección (diseño §4.4): abre cada sección clara con título de 44, regla amarilla y entrada de 19 */ .sec-titulo { display: grid; gap: 14px; justify-items: start; margin-bottom: 40px; } .sec-titulo h2, .sec-titulo h3 { font-size: var(--t-sec); line-height: 1.06; max-width: 24ch; } .sec-titulo .regla { display: block; width: 48px; height: 4px; background: var(--accent); } .sec-titulo .entrada { font-size: 19px; line-height: 1.5; color: var(--soft); max-width: 62ch; } .oscura .sec-titulo .entrada { color: var(--soft-dark); } .sec-titulo.centro { justify-items: center; text-align: center; } /* botones */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: var(--radius-btn); font: 600 17px/1.2 var(--body); text-decoration: none; border: 2px solid transparent; } .btn-primary { background: var(--accent); color: var(--dark); } .btn-ghost { border-color: currentColor; } .btn-oscuro { background: var(--dark); color: var(--accent); } /* E6-P-SITIO-02: 44 px también con ratón (antes 40, y 44 sólo en pantallas táctiles) */ .btn-chico { min-height: 44px; padding: 8px 14px; font-size: 15px; } .acciones { display: flex; flex-wrap: wrap; gap: 12px; } /* barra */ .bar { position: sticky; top: 0; z-index: 20; background: var(--dark); color: var(--on-dark); } .bar.scrolled { box-shadow: 0 6px 24px color-mix(in srgb, var(--dark) 50%, transparent); } .bar .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; min-height: 76px; width: calc(100% - 48px); max-width: none; } .bar-start { justify-self: start; display: flex; align-items: center; gap: 20px; min-width: 0; } /* el grupo izquierdo no se encoge dentro de su columna: con img{max-width:100%} el logo se comprimía y el separador y el teléfono pisaban «ATLAS» (visto en 59cbc85: EN a 1301, ES a 1301 y 1440; reparación R1, NA-E5-CON-001). Los tramos de abajo garantizan que quepa. */ .bar-start > * { flex: none; } .bar .logo img { max-width: none; } .bar-sep { flex: none; width: 1px; height: 28px; background: color-mix(in srgb, var(--on-dark) 25%, transparent); } .bar-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 15px/1 var(--body); text-decoration: none; white-space: nowrap; } .bar-tel .isvg { width: 20px; height: 20px; color: var(--accent); flex: none; } .bar-tel:hover .num { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; } .nav { justify-self: center; } .logo { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; } .logo .emblema { width: 44px; height: 44px; } .logo .nombre { width: 168px; height: auto; } .nav ul { --nav-gap: 22px; display: flex; justify-content: center; gap: var(--nav-gap); list-style: none; margin: 0; padding: 0; font-size: 15px; } .nav a { text-decoration: none; opacity: .9; white-space: nowrap; } /* E6-P-SITIO-02: cada entrada del menú es un área de 44 px de alto (antes sólo la línea del texto, 15–16 px). El texto no se mueve: la caja crece arriba y abajo dentro de la barra de 76 px y, a los lados, hasta la mitad del espacio entre entradas (--nav-gap), con un margen negativo igual que la compensa; las áreas vecinas se tocan sin encimarse. */ .nav ul a { display: flex; align-items: center; min-height: 44px; padding-inline: calc(var(--nav-gap) / 2); margin-inline: calc(var(--nav-gap) / -2); } /* el contorno de foco dibuja esa misma área (por dentro), en vez de rodearla 6 px más afuera */ .nav ul a:focus-visible { outline-offset: -3px; } .nav a:hover, .nav a[aria-current="true"] { opacity: 1; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; } .nav-extra { display: none; } .bar-end { justify-self: end; display: flex; align-items: center; gap: 16px; font-size: 15px; white-space: nowrap; } .lang { display: flex; align-items: center; gap: 6px; } .lang a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; opacity: .85; } .lang a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } .lang-actual { font-weight: 600; } .lang-sep { opacity: .6; } .cotizar .corto { display: none; } /* ES en escritorio: «Cotizar» en la barra para que las 7 entradas quepan sin pisar el logo (NA-E2-O3-001); el texto completo sigue en el panel móvil, el hero y el cierre */ html[lang="es"] .cotizar .largo { display: none; } html[lang="es"] .cotizar .corto { display: inline; } .nav-tel { display: none; } .menu-btn { display: none; min-height: 44px; padding: 0 14px; border-radius: var(--radius-btn); background: transparent; color: var(--on-dark); border: 2px solid currentColor; font: 600 15px var(--body); cursor: pointer; } /* hero de Inicio (diseño §17): el hero E2 se conserva completo. Dentro de .hero, la letra del título, la del párrafo y los botones, y el radio de los botones vuelven a los valores E2 de la opción (tokens --hero-*); la familia del párrafo se fija explícita, porque la heredada ya se resolvió en body. Barra, pie y cuerpo común no cambian por este ámbito. */ .hero { --display: var(--hero-display); --display-stretch: var(--hero-display-stretch); --display-weight: var(--hero-display-weight); --display-tracking: var(--hero-display-tracking); --body: var(--hero-body); --radius-btn: var(--hero-radius-btn); font-family: var(--hero-body); } .hero p { font-family: var(--hero-body); } .hero .btn { font-family: var(--hero-body); border-radius: var(--hero-radius-btn); } /* pie (diseño §5.3): marca, Contacto e Información arriba; línea legal única abajo; enlaces de 44 px (Sordón C10) */ .pie { background: color-mix(in srgb, var(--dark) 93%, var(--on-dark)); color: var(--on-dark); padding-block: 64px 28px; font-size: 15px; } .pie .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: var(--gap); align-items: start; } .pie p { color: var(--soft-dark); line-height: 1.7; } .pie .pie-h { color: var(--on-dark); font-weight: 600; margin-bottom: 2px; } .pie-logo { width: 180px; height: auto; margin-bottom: 18px; } .pie a { text-decoration: none; } .pie-lista { list-style: none; margin: 0; padding: 0; color: var(--soft-dark); } .pie-lista a { display: inline-block; padding-block: 10px; line-height: 24px; } .pie-info { columns: 2; column-gap: 24px; } .pie-info li { break-inside: avoid; } .pie a:hover { text-decoration: underline; text-underline-offset: 4px; } .pie .pie-legal { display: block; margin-top: 40px; } .pie .pie-legal p { font-size: 15px; } /* breakpoints de la barra (DESIGN.md, vuelta 2: menú completo hasta 1040 px; «Menu» por debajo) */ @media (max-width: 1300px) { .bar .wrap { gap: 20px; } .bar-start { gap: 14px; } .nav ul { --nav-gap: 16px; font-size: 14px; } .logo .nombre { width: 140px; } .logo .emblema { width: 40px; height: 40px; } .bar-end { gap: 12px; } .bar-end .btn { min-height: 44px; padding: 9px 16px; font-size: 15px; } } @media (max-width: 1199.98px) { .bar-tel { justify-content: center; width: 44px; } .bar-tel .num { display: none; } } @media (max-width: 1100px) { .nav ul { --nav-gap: 14px; } .bar .wrap { gap: 16px; } } /* E6 (§5.4): de 1200 a 1439 el número cabe si el menú deja de centrarse en la página y se centra entre los dos grupos */ @media (min-width: 1200px) and (max-width: 1439.98px) { .bar .wrap { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; } .bar-start { gap: 12px; } .bar-tel { font-size: 14px; gap: 6px; } } /* escritorio estrecho, 1040–1199 (reparación R1, NA-E5-CON-001): el menú completo y centrado con sus 7 entradas no dejaba sitio a idioma + botón (a 1040 EN se pisaban «Contact» y «EN» 21 px) y comprimía el teléfono a menos de 44 px. En ES el menú es más ancho y el logo y el teléfono se encogían (teléfono de 34 a 40 px, bajo los 44 de toque). Se compactan sólo espacios, costados, el botón y, hasta 1099, el logo («logo más chico», DESIGN.md); el menú sigue en 14 px, no se esconde ninguna entrada ni cambia ningún texto. */ @media (min-width: 1040px) and (max-width: 1199.98px) { .bar .wrap { width: calc(100% - 32px); gap: 12px; } .bar-start { gap: 10px; } .nav ul { --nav-gap: 12px; } .bar-end { gap: 10px; } .bar-end .btn { padding: 9px 12px; font-size: 14px; } } @media (min-width: 1040px) and (max-width: 1099.98px) { .bar .logo { gap: 10px; } .logo .emblema { width: 36px; height: 36px; } .logo .nombre { width: 118px; } } /* tramo intermedio (reparación R1): número visible con logo compacto y menú de 15 px con menos espacio entre entradas. Medido: el tramo completo (logo 224, número, menú 15/22) sólo cabe desde ~1422 px en EN y ~1517 en ES, porque el menú ES mide 95 px más. ES de 1301 a 1419 sigue con el tramo compacto de 1040–1300 (teléfono sólo ícono). */ @media (min-width: 1301px) and (max-width: 1439.98px) { html[lang="en"] .bar .wrap { width: calc(100% - 32px); } html[lang="en"] .bar-start { gap: 14px; } html[lang="en"] .logo .nombre { width: 140px; } html[lang="en"] .logo .emblema { width: 40px; height: 40px; } html[lang="en"] .nav ul { --nav-gap: 16px; } } @media (min-width: 1420px) and (max-width: 1539.98px) { html[lang="es"] .bar-start { gap: 14px; } html[lang="es"] .logo .nombre { width: 140px; } html[lang="es"] .logo .emblema { width: 40px; height: 40px; } html[lang="es"] .nav ul { --nav-gap: 18px; } } @media (min-width: 1301px) and (max-width: 1419.98px) { html[lang="es"] .bar-start { gap: 12px; } html[lang="es"] .nav ul { --nav-gap: 16px; font-size: 14px; } html[lang="es"] .logo .nombre { width: 140px; } html[lang="es"] .logo .emblema { width: 40px; height: 40px; } html[lang="es"] .bar-end { gap: 12px; } html[lang="es"] .bar-end .btn { min-height: 44px; padding: 9px 16px; font-size: 15px; } } @media (max-width: 1039.98px) { .bar .wrap { grid-template-columns: auto 1fr; width: min(100% - 2 * var(--gap), var(--max)); } .bar-sep, .bar-tel { display: none; } .bar-end { justify-self: end; } .menu-btn { display: inline-flex; align-items: center; } /* menú a pantalla completa bajo la barra; la página no se desplaza detrás (sitio.js pone .menu-abierto) */ .nav { position: fixed; left: 0; right: 0; top: var(--bar-h, 76px); bottom: 0; overflow: auto; overscroll-behavior: contain; background: var(--dark); visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; } .bar.abierto .nav { visibility: visible; opacity: 1; transition: opacity .2s ease; } html.menu-abierto { overflow: hidden; } .nav-in { min-height: 0; } .nav ul { --nav-gap: 0px; flex-direction: column; width: min(100% - 2 * var(--gap), var(--max)); margin-inline: auto; padding-block: 8px; font-size: 17px; } .nav ul a { display: flex; align-items: center; min-height: 52px; } .nav-extra { width: min(100% - 2 * var(--gap), var(--max)); margin-inline: auto; flex-wrap: wrap; align-items: center; gap: 16px; } .nav-extra > * { display: none; } html[lang="es"] .cotizar .largo { display: inline; } html[lang="es"] .cotizar .corto { display: none; } } @media (max-width: 860px) { body { --sec: 64px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* E6-P-SITIO-05: el navegador deja el elemento con foco (Tab, errores del formulario) arriba de la barra inferior de 64 px + zona segura; antes quedaban enteros debajo de ella (resúmenes de la FAQ, «Enviar solicitud», correos) */ html { scroll-padding-top: 72px; scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); } .bar .wrap { min-height: 60px; } .bar { --bar-h: 60px; } .logo .emblema { width: 36px; height: 36px; } .bar-end .btn { display: none; } .nav-extra { display: flex; padding-bottom: 24px; } .nav-extra .btn { display: inline-flex; } .nav-tel { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; font-weight: 600; } .nav-tel .isvg { width: 22px; height: 22px; color: var(--accent); } .pie { padding-block: 40px 20px; } .pie .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 16px; } .pie-marca { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; align-items: start; } .pie-logo { width: 140px; margin: 6px 0 0; } .pie-info { columns: 1; } .pie .pie-legal { margin-top: 20px; } .logo .nombre { width: 136px; } .sec-titulo { margin-bottom: 28px; } } @media (max-width: 600px) { body { --sec: var(--sec-m); font-size: 16px; } .sec-titulo { gap: 10px; } .sec-titulo .entrada { font-size: 17px; } } @media (max-width: 480px) { .bar-end .lang { display: none; } .nav-extra .lang { display: flex; } } /* barra inferior de celular: Cotizar · Llamar, siempre a la mano (auditoría de Sordón C1). Sólo bajo 861 px. */ .barra-movil { display: none; } @media (max-width: 860px) { .barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--dark); box-shadow: 0 -6px 20px color-mix(in srgb, var(--dark) 35%, transparent); } .barra-movil a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--radius-btn); font: 600 16px/1 var(--body); text-decoration: none; } .barra-movil .isvg { width: 20px; height: 20px; } .bm-cotizar { background: var(--accent); color: var(--dark); } .bm-llamar { color: var(--on-dark); border: 2px solid color-mix(in srgb, var(--on-dark) 55%, transparent); } html.menu-abierto .barra-movil { display: none; } } /* 404 (E6, reparación R1, E6-P-SITIO-10): la misma paleta, letra y portada oscura que las demás páginas, con el logo de la barra y un título dominante bilingüe; sin barra de navegación, pie ni barra inferior de celular. */ .p404 { background: var(--bg); color: var(--text); padding-bottom: env(safe-area-inset-bottom); } .p404-bar { background: var(--dark); border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent); } .p404-bar .wrap { display: flex; align-items: center; min-height: 72px; } .p404-portada .texto { padding-block: 56px 64px; gap: 16px; } .p404-portada .p404-codigo { font-family: var(--display); font-stretch: var(--display-stretch); font-weight: var(--display-weight); font-size: clamp(88px, 16vw, 168px); line-height: .85; letter-spacing: -0.02em; color: var(--accent); } .p404-portada h1 { display: grid; gap: 6px; max-width: none; } .p404-portada h1 span { font-size: .6em; color: var(--soft-dark); } .p404-portada p + p { margin-top: -8px; } .p404-accion { padding-block: 40px 80px; } .p404-accion .wrap { display: flex; flex-wrap: wrap; gap: 16px; } @media (max-width: 600px) { .p404-accion .btn { width: 100%; } } /* sin sitio.js no hay .entrada-hecha: la 404 queda quieta desde el primer cuadro (nada corre solo ni se queda a medias) */ .p404 .portada h1, .p404 .portada p, .p404 .portada .regla { animation: none; } /* North Atlas · componentes.css — un bloque por componente, en el orden de plantillas/componentes.py. E4 (27-oct): una sola versión (D1 azul); sin selector, sin hero de mapa y sin diagrama. Entran los dos bloques de «A quién surtimos», el diálogo de productos, la dirección centrada, el teléfono y el formulario por Web3Forms, y el celular compacto de la auditoría de Sordón (C4, C5, C6, C10, C13, C15). Sin hex: sólo tokens y mezclas. E6 (28-oct, auditoría v3 de Sordón y Tessera E6; asiento 2a): mapa 3B sobre el amarillo de Proveedores con fondo blanco y rutas marino (decisión 3; «white» es el blanco #FFFFFF de DESIGN.md, D1, escrito como palabra); globo al centro del espacio de su lado (decisión 4); muro de marcas; 2 fotos de bambú; Contacto con el formulario antes de los datos; campos del formulario según la entrega; celular más corto (§5.1). Salen Envíos y el dibujo de cajas. */ /* utilidades de sección */ .sec-cabeza { display: grid; gap: 16px; margin-bottom: 40px; } .ico { width: 56px; height: 56px; padding: 6px; border-radius: 50%; background: var(--bg); } /* hero de Inicio: común (E2) */ .hero { background: var(--dark); color: var(--on-dark); overflow: hidden; } .hero p { font-size: 19px; opacity: .88; } .hero .acciones { margin-top: 8px; } /* hero_pase (D1): pase de 7 fotos con fundidos, velo de tinta hacia la izquierda (plan B de A10) */ .hero-pase { position: relative; min-height: min(88vh, 820px); display: grid; align-items: center; isolation: isolate; } .pase { position: absolute; inset: 0; overflow: hidden; z-index: -2; } .pase img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } .pase img:first-child { opacity: 1; } .hero-pase::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--dark) 88%, transparent) 0%, color-mix(in srgb, var(--dark) 55%, transparent) 50%, color-mix(in srgb, var(--dark) 15%, transparent) 100%); } .hero-pase .texto { display: grid; gap: 22px; padding-block: 80px; } /* E5 (diseño §6.1): titular con salto fijo, dos líneas en todos los anchos; tamaño medido con la fuente real (390 → 28 px, 768 → 40, 1440 → 68). Antetítulo de Sordón en caja baja, sin mayúsculas. */ .hero-pase h1 { font-size: min(max(26px, 7.2vw), max(40px, 5.2vw), 68px); max-width: none; line-height: 1.05; } .hero .descriptor { font-weight: 600; color: var(--accent); } /* mapa vivo (estructura; el movimiento M-C vive en motion.css) */ .mapa { width: 100%; height: auto; display: block; } .mapa .marcha { stroke-dasharray: 8 10; } /* mapa v5 (E5 §13.2): colores por clase; México más tenue que EE. UU.; todas las rutas iguales */ .mapa-v5 .pt-us { fill: var(--slate); } .mapa-v5 .pt-mx { fill: var(--slate); opacity: .45; } .mapa-v5 .trama-us { opacity: .85; } .mapa-v5 .mx-contorno { fill: none; stroke: var(--slate); stroke-width: 1.4; stroke-linejoin: round; opacity: .9; } .mapa-v5 .m-opaco { fill: var(--bg); stop-color: var(--bg); } .mapa-v5 .m-vacio { stop-color: var(--bg); stop-opacity: 0; } .mapa-v5 .rutas { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; } .mapa-v5 .trazo { opacity: .35; } .mapa-v5 .ciudad, .mapa-v5 .origen, .mapa-v5 .pulso, .mapa-v5 .paquete { fill: var(--accent); } .mapa-v5 .paquete { stroke: var(--dark); stroke-width: 1; } .mapa .anillo { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; } .mapa .pulso { transform-box: fill-box; transform-origin: center; } /* E6 (decisión 3): en Proveedores, sobre el amarillo. Fondo del mapa —puntos de EE. UU., contorno y trama de México— en blanco; rutas, ciudades, origen, pulso y paquetes en azul marino (--dark, #0B1F3A). Ningún amarillo dentro. */ .proveedores .mapa-v5 .pt-us, .proveedores .mapa-v5 .pt-mx { fill: white; } .proveedores .mapa-v5 .pt-mx { opacity: .75; } .proveedores .mapa-v5 .trama-us { opacity: 1; } .proveedores .mapa-v5 .mx-contorno { stroke: white; stroke-width: 1.6; opacity: 1; } .proveedores .mapa-v5 .m-opaco { fill: white; stop-color: white; } .proveedores .mapa-v5 .m-vacio { stop-color: white; } .proveedores .mapa-v5 .rutas { stroke: var(--dark); } .proveedores .mapa-v5 .trazo { opacity: .3; } .proveedores .mapa-v5 .ciudad, .proveedores .mapa-v5 .origen, .proveedores .mapa-v5 .pulso, .proveedores .mapa-v5 .paquete { fill: var(--dark); } .proveedores .mapa-v5 .paquete { stroke: white; stroke-width: 1.2; } .proveedores .mapa .anillo { stroke: var(--dark); } /* portada de Privacy y Terms (M-K): banda corta, una columna, sin foto ni fondo decorativo */ .portada { position: relative; background: var(--dark); color: var(--on-dark); overflow: hidden; isolation: isolate; } .portada .wrap { display: grid; align-items: center; min-height: clamp(260px, 36vh, 400px); } .portada .texto { position: relative; display: grid; gap: 20px; align-content: center; justify-items: start; padding-block: 72px; } .portada .regla, .banda .regla { display: block; width: 64px; height: 4px; background: var(--accent); } .portada p { font-size: 19px; color: var(--soft-dark); } /* banda_seccion: cabecera con foto de fondo atenuada y título claro encima (diseño §6; NA-FB-025) */ .banda { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: var(--on-dark); min-height: clamp(320px, 42vh, 460px); display: grid; align-items: center; } .banda-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .banda::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--dark) 86%, transparent) 0%, color-mix(in srgb, var(--dark) 66%, transparent) 55%, color-mix(in srgb, var(--dark) 40%, transparent) 100%); } .banda.sin-foto::after { content: none; } .banda .texto { display: grid; gap: 18px; justify-items: start; padding-block: 64px; max-width: 680px; } .banda h2 { font-size: var(--t-banda); max-width: 20ch; } .banda p { font-size: 19px; color: color-mix(in srgb, var(--on-dark) 86%, transparent); } /* Cómo comprar (NA-FB-029; NA-E3-CON-001): la persona usando la tablet se ve entera —cabeza, mano y tablet—. La foto toma la altura de la banda con la ventana de filas 10–770 de 900, anclada a la derecha; si no llena el ancho, su borde izquierdo se funde con el fondo oscuro bajo el mismo velo. Desde 600 px el texto no pisa cabeza, manos ni tablet. */ .banda-accion { min-height: clamp(340px, 32vw, 480px); } .banda-accion .banda-foto { left: auto; width: auto; max-width: 100%; aspect-ratio: 1600 / 760; -webkit-mask-image: linear-gradient(90deg, transparent, var(--dark) 30%); mask-image: linear-gradient(90deg, transparent, var(--dark) 30%); } .banda-accion .texto { max-width: min(680px, 44vw); } /* ilustraciones (E5, plantillas/ilustraciones.py): colores sólo por clases sobre tokens; --trazo lo pone cada escena */ .ilu { display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } .ilu .t { stroke: var(--trazo); stroke-width: 2; } .ilu .t1 { stroke: var(--trazo); stroke-width: 1.5; } .ilu .fa { fill: var(--accent); } .ilu .fs { fill: var(--slate); } .ilu .fd { fill: var(--dark); } .ilu .fd2 { fill: var(--dark2); } .ilu .fbg { fill: var(--bg); } .ilu .fon { fill: var(--on-dark); } /* A quién surtimos · 1B (diseño §7): banda gris azulada con regla amarilla arriba; dos bloques con escena viva */ .quienes { padding-block: 80px; background: var(--sup-1); border-top: 4px solid var(--accent); } .q-bloques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .q-bloque { display: grid; align-content: start; padding: 0 0 28px; border-radius: var(--radius); overflow: hidden; } .q-cuerpo { display: grid; gap: 22px; padding: 24px 28px 0; } .q-export { background: var(--dark); color: var(--on-dark); } .q-usa { background: var(--bg); color: var(--text); border: 2px solid var(--accent); } .q-cabeza { display: flex; gap: 16px; align-items: center; } .q-marca { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--dark); } .q-marca .isvg { width: 30px; height: 30px; } .q-bloque h3 { font-size: var(--h3); } .q-region { margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--accent); } .q-usa .q-region { color: var(--dark2); } .q-tipos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .q-tipos li { display: grid; justify-items: center; gap: 10px; padding: 16px 8px; border-radius: var(--radius); text-align: center; font-weight: 600; font-size: 15px; line-height: 1.25; } .q-export .q-tipos li { background: var(--dark2); } .q-usa .q-tipos li { background: var(--sup-2); } .q-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; } .q-export .q-ico { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--dark)); } .q-usa .q-ico { color: var(--dark); background: color-mix(in srgb, var(--accent) 45%, var(--bg)); } .q-ico .isvg { width: 24px; height: 24px; } .q-nota { font-size: 15px; } .q-export .q-nota { color: var(--soft-dark); } .q-usa .q-nota { color: var(--soft); } /* E6 (auditoría §2): la frase que traía «Exportación y envíos», debajo de los dos bloques */ .q-envio { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: none; margin-top: 24px; font-size: 17px; font-weight: 600; color: var(--text); text-align: center; } .q-envio .isvg { flex: none; width: 24px; height: 24px; color: var(--dark); } /* escenas (M-P, M-Q): --s escala todo con la altura (120 / 96 / 84 px). El fondo fijo es un SVG de 1000×120 con «slice» anclado abajo a la izquierda; barco, camión, olas y capas que se desplazan van en px × --s. */ .escena { --s: 1; --cielo: 22px; position: relative; height: calc(120px * var(--s) + var(--cielo)); overflow: hidden; container-type: inline-size; isolation: isolate; } .escena > * { position: absolute; } .escena-fondo { left: 0; bottom: 0; width: 100%; height: calc(120px * var(--s)); } .lugar { z-index: 3; top: 10px; font: 600 15px/1.2 var(--body); letter-spacing: .02em; white-space: nowrap; } .lugar.i { left: 14px; } .lugar.d { right: 14px; } .l-corto { display: none; } /* rótulo largo sólo cuando el bloque mide más de ~540 px (escritorio ancho); debajo, el corto (no se enciman) */ @media (max-width: 1300px) { .l-largo { display: none; } .l-corto { display: inline; } } .escena-export { --trazo: var(--on-dark); background: color-mix(in srgb, var(--dark2) 60%, var(--dark)); } .escena-export .lugar { color: var(--soft-dark); } .escena-export .horizonte { stroke: var(--slate); stroke-width: 1; opacity: .5; } .escena-export .ruta-mar { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 8; } .escena-export .plataforma { opacity: .6; } .escena-export .muelle { opacity: .9; } .capa-ola { left: 0; width: calc(1800px * var(--s)); height: calc(40px * var(--s)); } .capa-ola svg { width: 100%; height: 100%; overflow: visible; } .ola-1 { z-index: 1; top: auto; bottom: calc(4px * var(--s)); } .ola-1 .ola-l { stroke: var(--slate); stroke-width: 1.5; opacity: .45; } .ola-2 { z-index: 2; top: auto; bottom: calc(-2px * var(--s)); } .ola-2 .ola-l { stroke: var(--slate); stroke-width: 2; opacity: .7; } .ola-3 { z-index: 2; top: auto; bottom: calc(-10px * var(--s)); } .ola-3 .ola-l { stroke: var(--on-dark); stroke-width: 2; opacity: .6; } .agua-2 { fill: color-mix(in srgb, var(--dark2) 45%, var(--dark)); } .agua-3 { fill: var(--dark); } .viaja { left: 0; z-index: 1; transform: translateX(calc(60cqw - 75px * var(--s))); } .barco-v { bottom: calc(18px * var(--s)); width: calc(170px * var(--s)); } .barco-v svg, .camion-v svg { width: 100%; height: auto; } .barco .vent { opacity: .7; } .barco .estela { opacity: .6; } .barco .costilla { stroke: var(--dark); stroke-width: 1; opacity: .35; } .barco .linea-flot { stroke: var(--accent); stroke-width: 2; } .mece { transform-origin: 55% 75%; } .escena-usa { --trazo: var(--dark); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); } .escena-usa .lugar { color: var(--dark2); } .capa-mov { left: 0; bottom: 0; width: calc(1800px * var(--s)); height: calc(120px * var(--s)); } .capa-mov svg { width: 100%; height: 100%; } .lejos { z-index: 0; } .lejos path { stroke: var(--dark); stroke-width: 2; opacity: .18; } .escena-usa .carretera { fill: color-mix(in srgb, var(--dark) 8%, var(--bg)); } .escena-usa .borde { stroke: var(--dark); stroke-width: 2; opacity: .4; } .escena-usa .linea-central { stroke: var(--dark); stroke-width: 3; stroke-dasharray: 22 18; } .postes { z-index: 1; } .camion-v { z-index: 2; bottom: calc(23px * var(--s)); width: calc(150px * var(--s)); } .camion-ilu .tenue, .camion-escena .tenue { opacity: .25; } .ilu .rayo { stroke: var(--dark); stroke-width: 1.5; } .ilu .rueda { transform-box: fill-box; transform-origin: center; } .ilu .humo { opacity: 0; transform-box: fill-box; transform-origin: center; } .hierba { z-index: 3; } .hierba path { stroke: var(--dark); stroke-width: 2; opacity: .25; } /* built for business buyers */ .porque { padding-block: var(--sec); } .porque-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gap); } .porque-lista li { display: grid; gap: 12px; align-content: start; } .porque-lista .ico { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); } .porque-lista h3 { font-family: var(--body); font-stretch: 100%; font-size: 19px; font-weight: 600; letter-spacing: 0; } /* E6: 5 puntos (sale el de envíos, auditoría §2); en 3 columnas, los 2 de abajo centrados en una rejilla de 6 */ .porque-lista.n-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .porque-lista.n-5 li { grid-column: span 2; } .porque-lista.n-5 li:nth-child(4) { grid-column: 2 / span 2; } .porque-lista.n-5 li:nth-child(5) { grid-column: 4 / span 2; } .porque-lista p { font-size: 15px; color: var(--soft); } /* catálogo · mockup 4A (diseño §9): la tarjeta entera abre su diálogo; etiqueta amarilla flotando abajo a la izquierda */ .catalogo { padding-block: var(--sec); } .rejilla-cat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; } .tarjeta { position: relative; display: grid; align-content: start; } .tarjeta-enlace { display: grid; gap: 12px; align-content: start; color: inherit; text-decoration: none; border-radius: var(--radius); } .tarjeta-enlace:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } .tarjeta-foto { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--sup-2); } .tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; } .tag { background: var(--tag); color: var(--dark); border: 2px solid var(--dark); padding: 5px 10px; font: 600 15px/1.2 var(--body); } .tarjeta-foto .tag { position: absolute; left: 12px; bottom: 12px; display: inline-grid; grid-template-columns: auto auto; align-items: center; max-width: calc(100% - 24px); padding: 6px 12px; } /* nombre y «See products» comparten la celda; el que no se ve mide 0 de ancho, así la etiqueta mide lo que su texto */ .tarjeta-foto .tag .nom, .tarjeta-foto .tag .ver { grid-area: 1 / 1; white-space: nowrap; justify-self: center; } .tarjeta-foto .tag .ver { opacity: 0; width: 0; } .tarjeta-foto .tag .chev { display: none; grid-area: 1 / 2; padding-left: 4px; font-weight: 700; } .tarjeta-texto { display: block; font-size: 15px; color: var(--soft); } /* M-T · mouse (puntero fino, desde 861 px) o foco de teclado (a todo ancho): la foto se oscurece y la etiqueta viaja al centro con «See products». Reparación R1 (NA-E5-CON-002): hasta 860 px el diseño trata la tarjeta como táctil (§9.2), así que el mouse ya no cambia la etiqueta ahí; el foco de teclado sí, en todo ancho, con la acción visible. */ @media (hover: hover) and (pointer: fine) and (min-width: 861px) { .tarjeta-enlace:hover .tarjeta-foto img { transform: scale(1.03); filter: brightness(.72); } .tarjeta-enlace:hover .tag { left: 50%; bottom: 50%; transform: translate(-50%, 50%); } .tarjeta-enlace:hover .tag .nom { opacity: 0; width: 0; } .tarjeta-enlace:hover .tag .ver { opacity: 1; width: auto; } } .tarjeta-enlace:focus-visible .tarjeta-foto img { transform: scale(1.03); filter: brightness(.72); } .tarjeta-enlace:focus-visible .tag { left: 50%; bottom: 50%; transform: translate(-50%, 50%); } .tarjeta-enlace:focus-visible .tag .nom { opacity: 0; width: 0; } .tarjeta-enlace:focus-visible .tag .ver { opacity: 1; width: auto; } /* táctil: sin estado intermedio; nombre y flechita que dice que se puede tocar (un toque abre). El foco de teclado cambia nombre y flechita por la acción, también aquí (NA-E5-CON-002). */ @media (hover: none), (max-width: 860px) { .tarjeta-enlace:not(:focus-visible) .tag .chev { display: block; } .tarjeta-enlace:not(:focus-visible) .tag .ver { display: none; } .tarjeta-enlace:focus-visible .tag .nom { display: none; } } /* 9ª tarjeta: fila amarilla a todo el ancho (4 y 2 columnas); en 3 columnas ocupa la última casilla (3×3, sin hueco) */ .tarjeta-otra { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: 12px 28px; padding: 24px 28px; border-radius: var(--radius); background: var(--accent); color: var(--dark); } .tarjeta-otra .tarjeta-texto { color: color-mix(in srgb, var(--dark) 86%, transparent); } .tarjeta-otra-t { font: var(--display-weight) var(--h3)/1.15 var(--display); font-stretch: var(--display-stretch); letter-spacing: var(--display-tracking); } /* banda de bambú dentro de Lawn & Garden (respuesta 6 de César). E6 (decisión 10): las 2 fotos de Armando a la izquierda (planta y camión, 4:3) y el texto a la derecha; hasta 860 px, sólo la planta */ .bambu { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(var(--gap) * 1.2); align-items: center; margin-top: 48px; padding: 28px; border-radius: var(--radius); background: var(--sup-1); } .bambu-texto h3 { font-size: var(--h3); } .bambu.sin-foto { grid-template-columns: minmax(0, 1fr); } .bambu-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* 30-oct: fila de 3 fotos más chicas bajo las 2 grandes */ .bambu-extra { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .bambu-foto { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); } .bambu-foto img { width: 100%; height: 100%; object-fit: cover; } /* E6 · muro de marcas (decisión 7): después de las 8 categorías; logos en azul marino (los entrega 2b) con su tamaño en pantalla del catálogo (--w, --h), sin enlaces; título y aviso. --escala los achica en celular sin cambiar su proporción */ .marcas { --escala: 1; display: grid; gap: 22px; justify-items: center; margin-top: 48px; padding: 32px 28px 24px; border-radius: var(--radius); background: var(--sup-1); text-align: center; } .marcas h3 { font-size: var(--h3); } .marcas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 40px; max-width: 1080px; } .marca { display: grid; place-items: center; } .marca img { width: calc(var(--w) * var(--escala) * 1px); height: auto; max-width: 100%; } .marcas-aviso { font-size: 14px; color: var(--soft); } .bambu-texto { display: grid; gap: 14px; justify-items: start; } /* 30-oct (Sordón): lista de productos de bambú */ .bambu-lista { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; } .bambu-lista li::marker { color: var(--accent); } /* diálogo de productos de una categoría (E4): tarjeta centrada en escritorio, hoja desde abajo en celular */ .cat-dialogo { width: min(640px, calc(100% - 32px)); max-height: min(86vh, 860px); padding: 0; border: 0; border-radius: var(--radius); background: var(--bg); color: var(--text); box-shadow: 0 24px 60px color-mix(in srgb, var(--dark) 45%, transparent); overflow: auto; } .cat-dialogo::backdrop { background: color-mix(in srgb, var(--dark) 70%, transparent); } .cd-cabeza { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; gap: 16px; align-items: center; padding: 20px; background: var(--dark); color: var(--on-dark); } .cd-cabeza img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius); } .cd-titulo { display: grid; gap: 6px; } .cd-titulo h3 { font-size: clamp(24px, 3vw, 30px); } .cd-titulo p { font-size: 15px; color: var(--soft-dark); } .cd-titulo h3:focus { outline: none; } .cd-titulo h3:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } .cd-cerrar { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid color-mix(in srgb, var(--on-dark) 55%, transparent); border-radius: 50%; background: transparent; color: var(--on-dark); cursor: pointer; align-self: start; } .cd-cerrar .isvg { width: 22px; height: 22px; } .cd-lista { list-style: none; margin: 0; padding: 8px 20px; } .cd-lista li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 8px; border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } .cd-prod { font-weight: 600; } .cd-lista .btn { flex: none; color: var(--dark); } .cd-pie { padding: 16px 20px 24px; } /* Nosotros · Who we are (E5 §10.2): título de 44 px; la foto mide lo mismo que el texto (sin hueco arriba, V1) */ .equipo { padding-block: 72px var(--sec); } .equipo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: stretch; } .equipo-texto { display: grid; gap: 16px; align-content: start; } .equipo-texto .sec-titulo { margin-bottom: 8px; } .equipo-texto p + h3 { margin-top: 16px; } .equipo-foto { position: relative; margin: 0; min-height: 300px; overflow: hidden; border-radius: var(--radius); } .equipo-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } .equipo-vacio { display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: var(--radius); background: var(--sup-1); } .equipo-vacio .ico-grande { width: 128px; height: 128px; padding: 18px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, var(--bg)); } /* lista de tarjetas (compromisos, qué incluir, bueno saber): superficie propia y dos variantes (E5 §10.3, §11.2, §11.3) */ .lista-tarjetas { padding-block: var(--sec); } .sup-sup { background: var(--sup-1); } .sup-bg { background: var(--bg); } .lt-rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 28px var(--gap); } .lt-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 16px; align-content: start; } .lt-item > :not(.ico) { grid-column: 2; } .lt-item .ico { grid-row: span 2; background: color-mix(in srgb, var(--accent) 22%, var(--bg)); } .lt-item h4 { margin: 0; font: 600 19px/1.3 var(--body); } .lt-item p { font-size: 15px; color: var(--soft); } .lt-lista .lt-item { align-items: center; } .lt-lista .lt-item p { font-size: 17px; color: var(--text); } /* compromisos (V2, A-EN-6/7): sobre el gris, título a la izquierda y los cuatro compromisos a la derecha en 2×2, con ícono al lado (el inspector rechaza la fila de tarjetas idénticas con ícono arriba); termina donde empieza la misión */ .lista-tarjetas.lt-tarjetas { padding-block: 72px; } .lt-tarjetas .lt-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 56px; align-items: start; } .lt-tarjetas .sec-titulo { margin-bottom: 0; } .lt-tarjetas .lt-rejilla { gap: 32px 40px; } .lt-tarjetas .lt-item .ico { background: var(--bg); } /* qué incluir: 5 ítems en 3 columnas; la fila de abajo, centrada (rejilla de 6) */ .lt-centrada { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lt-centrada > li { grid-column: span 2; } .lt-centrada > li:nth-child(4) { grid-column: 2 / span 2; } .lt-centrada > li:nth-child(5) { grid-column: 4 / span 2; } /* misión · mockup 2A (E5 §10.4): globo con el título adentro y la frase a la derecha; en columna, todo centrado (V7). E6 (decisión 4): la frase se queda en su columna (empieza a ~37 % del ancho, donde la dejaba la v5 a 1280–1440) y el globo va al centro del espacio libre de su lado; más grande. Medida del autor: ~210 px vacíos a su izquierda contra ~50 px hasta el texto; aquí quedan iguales a cada lado del globo (más los 24 px de separación). */ .mision { padding-block: 72px; background: var(--accent); color: var(--dark); } .mision-grid { display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); column-gap: 24px; align-items: center; } .globo-caja { position: relative; justify-self: center; width: clamp(220px, 23vw, 320px); aspect-ratio: 1; display: grid; place-items: center; } .globo-caja .globo { position: absolute; inset: 0; width: 100%; height: 100%; } .globo-titulo { position: relative; z-index: 1; max-width: 5.6ch; text-align: center; font-size: var(--t-enunciado); line-height: 1.02; color: var(--on-dark); } .mision-frase { max-width: 38ch; font: var(--display-weight) var(--t-enunciado)/1.18 var(--display); font-stretch: var(--display-stretch); letter-spacing: var(--display-tracking); color: var(--dark); } .globo .orbita-tras { stroke: color-mix(in srgb, var(--dark) 30%, transparent); stroke-width: 1.5; } .globo .orbita-del { stroke: var(--accent); stroke-width: 1.5; } .globo .anillo-g { stroke: var(--accent); stroke-width: 2.5; } .globo .reticula { stroke: var(--accent); stroke-opacity: .45; stroke-width: 1.6; } .globo .ruta-g { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 6; } .globo .brillo { stroke: var(--on-dark); stroke-opacity: .15; stroke-width: 2; } .globo .satelite { stroke: var(--dark); stroke-width: 1.5; } .globo .halo-g { stroke: var(--dark); stroke-opacity: .28; stroke-width: 1.5; stroke-dasharray: 2 7; } .globo .sombra-g { fill: var(--dark); opacity: .16; } /* Quiénes la dirigen (E5 §10.5): retratos con placa amarilla a la izquierda, título y ficha a la derecha (V3) */ .direccion { padding-block: var(--sec); } .dir-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; } .personas { list-style: none; margin: 0; padding: 0 12px 12px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; } .persona { display: grid; gap: 14px; align-content: start; } .persona-foto { position: relative; isolation: isolate; margin: 0 0 12px; aspect-ratio: 4 / 5; } .persona-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translate(12px, 12px); background: var(--accent); border-radius: var(--radius); } .persona-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); } .persona h4 { margin: 0 0 4px; font: var(--display-weight) var(--h3)/1.1 var(--display); font-stretch: var(--display-stretch); letter-spacing: var(--display-tracking); } .persona p { font-size: 15px; color: var(--soft); } .dir-lado .sec-titulo { margin-bottom: 32px; } .ficha-datos { display: grid; gap: 4px; } .ficha-datos h4 { margin: 0 0 4px; font: 600 15px/1.3 var(--body); color: var(--soft); } .ficha { margin: 0; display: grid; } .ficha div { display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--radius); } .ficha div:nth-child(odd) { background: var(--sup-1); } .ficha dt { font-size: 15px; color: var(--soft); } .ficha dd { margin: 0; overflow-wrap: anywhere; } /* pasos con riel (lámina), Cómo comprar */ .pasos { --riel-viaje: 550ms; --riel-pausa: 2400ms; padding-block: var(--sec); background: var(--sup-1); } .linea { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; } .paso { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; align-content: start; } .parada { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; border: 4px solid color-mix(in srgb, var(--text) 16%, var(--bg)); } .parada .ico { width: 48px; height: 48px; padding: 0; background: none; } .paso.activo .parada { border-color: var(--accent); background: color-mix(in srgb, var(--dark) 6%, var(--bg)); transform: scale(1.06); } .paso h4 { margin: 0 0 6px; font: 600 19px/1.3 var(--body); } .paso p { font-size: 15px; color: var(--soft); } .paso p a { color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } .linea.largo .paso { grid-template-columns: 1fr; } .riel { position: relative; height: 64px; margin-top: 36px; } .riel .via, .riel .lleno { position: absolute; left: calc(50% / var(--n, 4)); top: 50%; height: 6px; transform: translateY(-50%); border-radius: 6px; } .riel .via { right: calc(50% / var(--n, 4)); background: color-mix(in srgb, var(--text) 14%, transparent); } .riel .lleno { width: var(--p, 0%); background: var(--accent); } .riel .tope { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--bg); border: 4px solid color-mix(in srgb, var(--text) 22%, var(--bg)); } .riel .tope.hecho { border-color: var(--accent); } .riel .camion { position: absolute; top: 50%; left: var(--x, calc(50% / var(--n, 4))); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); transform: translate(-50%, -50%); } .camion-riel { --trazo: var(--dark); width: 42px; height: auto; } /* Proveedores: amarillo con texto marino en las 3 opciones (NA-FB-034); botón debajo del texto (NA-FB-038) */ .proveedores { padding-block: var(--sec); background: var(--accent); color: var(--dark); } .proveedores .sec-titulo { margin-bottom: 0; } .proveedores .sec-titulo .regla { background: var(--dark); } .prov-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; align-items: center; margin-bottom: 56px; } .proveedores .intro { display: grid; gap: 20px; justify-items: start; max-width: 62ch; } .prov-lado .mapa { max-width: 560px; margin-inline: auto; } .proveedores .intro p { font-size: 19px; color: color-mix(in srgb, var(--dark) 88%, transparent); } .busc-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px calc(var(--gap) * 1.2); } .busc-col { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; } .busc-col .ico { background: color-mix(in srgb, var(--dark) 10%, var(--accent)); } .busc-col div { display: grid; gap: 8px; } .busc-col h4 { margin: 0; font: 600 19px/1.3 var(--body); } .busc-col p, .busc-lista { font-size: 17px; color: color-mix(in srgb, var(--dark) 88%, transparent); } .busc-col a { color: var(--dark); text-decoration-thickness: 2px; text-underline-offset: 3px; } .busc-lista { margin: 0; padding-left: 20px; display: grid; gap: 4px; } .busc-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .busc-correo { font-size: 17px; } .busc-correo a { display: inline-block; padding-block: 10px; line-height: 24px; color: var(--dark); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; } .busc-acciones { row-gap: 0; } /* E6 (§4.1): alta de cliente y verificación en Sunbiz, en una línea al pie de la sección */ .busc-alta { max-width: none; margin-top: 36px; padding-top: 20px; border-top: 2px solid color-mix(in srgb, var(--dark) 18%, transparent); font-size: 17px; color: color-mix(in srgb, var(--dark) 88%, transparent); } .busc-alta strong { color: var(--dark); } .busc-doc { display: inline-block; } .sunbiz { display: inline-block; padding-block: 10px; line-height: 24px; font-weight: 600; color: inherit; white-space: nowrap; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 3px; } .busc-alta .sunbiz { color: var(--dark); } .busc-doc .sunbiz { margin-left: 10px; } /* E6, reparación R1 (E6-P-SITIO-02): el enlace de la ficha conserva su letra de 15 px pero su área operable llega a 44 px de alto (antes 24); la fila que lo lleva pierde su relleno vertical, que ya da el propio enlace. */ .ficha .sunbiz { padding-block: 10px; margin-left: 6px; font-size: 15px; color: var(--text); text-decoration-color: var(--accent); } .ficha div:has(.sunbiz) { padding-block: 0; } /* preguntas frecuentes (M-M en motion.css) */ .faq { padding-block: var(--sec); } .faq-lista { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 32px; align-items: start; } .faq-col { display: grid; gap: 12px; } .faq-item { border-radius: var(--radius); background: color-mix(in srgb, var(--dark) 5%, var(--bg)); } .faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 48px; padding: 12px 20px; list-style: none; cursor: pointer; font-weight: 600; font-size: 17px; } .faq-item summary::-webkit-details-marker { display: none; } .flecha { flex: none; width: 12px; height: 12px; border-right: 3px solid var(--text); border-bottom: 3px solid var(--text); transform: rotate(-45deg); } .faq-item[open] .flecha { transform: rotate(45deg); } .faq-r { display: grid; grid-template-rows: 1fr; } .faq-r > div { overflow: hidden; } .faq-r p { padding: 0 20px 18px; color: var(--soft); } .faq-r a { color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* formulario (M-L en motion.css) */ .formulario { display: grid; gap: 14px; } .form-campos { display: grid; gap: 10px; min-width: 0; } /* E6, reparación R1: campos lado a lado alineados por abajo; si una etiqueta ocupa dos líneas (p. ej. «Agente de carga» a 390 px), los dos controles quedan a la misma altura */ .form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; align-items: end; } .campo { display: grid; gap: 6px; align-content: start; } .campo label { font-size: 15px; font-weight: 600; } .req { color: var(--soft); } .campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--radius); border: 2px solid color-mix(in srgb, var(--text) 26%, transparent); background: var(--bg); color: var(--text); font: 400 16px/1.4 var(--body); } .campo textarea { resize: vertical; } .campo [aria-invalid="true"] { border-color: var(--dark); box-shadow: inset 0 0 0 1px var(--dark); } /* espacio fijo para el mensaje (NA-E2-CONTACT-002): aparecer o desaparecer no mueve los controles de abajo */ .campo-error { min-height: 1.2em; line-height: 1.2; font-size: 15px; font-weight: 600; color: var(--text); } .campo-error:not(:empty)::before { content: "! "; color: var(--text); } .contador { justify-self: end; font-size: 15px; color: var(--soft); } .campo-check .check { display: flex; gap: 12px; align-items: center; font-weight: 400; } .campo-check input { width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; accent-color: var(--dark); } /* E6, reparación R1 (E6-P-SITIO-02): el enlace a la política dentro del consentimiento tiene 44 px de alto operable (antes 15-16) sin cambiar su letra; la etiqueta ya medía 44 px, así que la fila no crece en una línea. */ .campo-check .check a { display: inline-block; padding-block: 12px; line-height: 20px; } .campo-check .check { min-height: 44px; cursor: pointer; } .obligatorios, .form-nota { font-size: 15px; color: var(--soft); } .form-envio .btn { min-height: 52px; } .form-estado { font-weight: 600; } .form-estado:focus { outline: none; } .trampa { display: none; } .form-ok { display: grid; gap: 8px; padding: 24px; border-radius: var(--radius); background: var(--accent); color: var(--dark); } .form-ok[hidden] { display: none; } .form-ok-t { font: var(--display-weight) var(--h3)/1.2 var(--display); font-stretch: var(--display-stretch); } .formulario.enviado .form-campos, .formulario.enviado .form-chip { display: none; } /* E6 (§5.3): campos que dependen de la entrega; sitio.js pone hidden a los que no tocan (sin JS se ven todos) */ .campo[hidden] { display: none; } .form-cond:not(:has(.campo:not([hidden]))) { display: none; } .form-estado:empty { display: none; } /* etiqueta de la categoría elegida con «Ask about this» (diseño §7): la misma etiqueta de rack del catálogo */ .form-chip { display: flex; align-items: center; gap: 8px; } .form-chip[hidden] { display: none; } .chip-quitar { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--dark); border-radius: var(--radius-btn); background: var(--bg); color: var(--dark); font: 600 20px/1 var(--body); cursor: pointer; } /* Contacto: sección partida a sangre, datos sobre oscuro y formulario sobre claro (diseño §5.9; NA-FB-048). E6 (§5.1.3): en el documento va título, formulario y datos; en computadora, título y datos ocupan la columna oscura (filas 1 y 2) y el formulario la clara (las dos filas). E6, reparación R1 (E6-P-SITIO-05): el fondo partido ya no es un degradado de corte duro; son dos planos de color: la sección en claro y un panel oscuro a sangre (::before) que llega hasta el corte, detrás del contenido. Mismo dibujo y misma paleta D1. */ .contacto { --ancho: min(100% - 2 * var(--borde), var(--max)); --corte: calc((100% - var(--ancho)) / 2 + var(--ancho) * .45); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(var(--borde), 1fr) calc(var(--ancho) * .45) calc(var(--ancho) * .55) minmax(var(--borde), 1fr); grid-template-rows: auto 1fr; background: var(--bg); } .contacto::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--corte); z-index: -1; background: var(--dark); } .contacto-cabeza { grid-column: 2; grid-row: 1; padding: var(--sec) calc(var(--gap) * 1.2) 0 0; color: var(--on-dark); } .contacto-datos { grid-column: 2; grid-row: 2; padding: 20px calc(var(--gap) * 1.2) var(--sec) 0; color: var(--on-dark); } .contacto-form { grid-column: 3; grid-row: 1 / 3; display: grid; padding: var(--sec) 0 var(--sec) calc(var(--gap) * 1.2); } .contacto .sec-titulo { margin-bottom: 8px; } .contacto .sec-titulo h2 { line-height: 1; margin-top: 0; } .contacto .sec-titulo .entrada { color: var(--soft-dark); } /* los datos acompañan al formulario al bajar (no queda un bloque oscuro vacío a la vista) */ @media (min-width: 861px) { .contacto-filas { position: sticky; top: calc(var(--bar-h, 76px) + 24px); } } .form-tarjeta { height: 100%; box-sizing: border-box; align-content: start; } .contacto-filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; } .contacto-fila { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; } .contacto-fila .ico { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); } .contacto-fila p, .contacto-fila address { font-size: 17px; font-style: normal; color: color-mix(in srgb, var(--on-dark) 86%, transparent); } .contacto-fila .fila-t { font-size: 15px; font-weight: 600; color: var(--on-dark); } .contacto-fila p + .fila-t { margin-top: 12px; } .contacto-fila .fila-grande { font: var(--display-weight) var(--h3)/1.25 var(--display); font-stretch: var(--display-stretch); letter-spacing: var(--display-tracking); color: var(--on-dark); } .contacto-fila .fila-tel { font: var(--display-weight) var(--h3)/1.25 var(--display); font-stretch: var(--display-stretch); color: var(--on-dark); } .contacto-fila .fila-tel a { text-decoration: none; } .contacto-fila .fila-correo a, .contacto-fila .fila-grande a { display: inline-block; padding-block: 8px; line-height: 28px; } .contacto-fila .fila-tel a { display: inline-block; padding-block: 7px; min-height: 44px; } .contacto-fila p.fila-correo, .contacto-fila p.fila-grande, .contacto-fila p.fila-tel { margin-block: -6px; } .ico-svg { display: grid; place-items: center; color: var(--dark); } .ico-svg .isvg { width: 30px; height: 30px; } .contacto-fila a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; } .form-tarjeta { display: grid; gap: 22px; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius); background: color-mix(in srgb, var(--dark) 4%, var(--bg)); } /* Gracias (E5): la escena del camión a todo el ancho bajo la portada */ .gracias-escena .escena { --cielo: 0px; height: calc(120px * var(--s)); } .gracias-escena .lugar { display: none; } /* E6 (auditoría §5.4): teléfono y «Ver productos» bajo la escena */ .gracias-accion { padding-top: 40px; } .gracias-accion .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; } .gracias-tel { font-size: 19px; } .gracias-tel a { display: inline-block; padding-block: 10px; font-weight: 600; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; } .gracias-accion + .prosa { padding-top: 24px; } /* prosa (Privacy, Terms) */ .prosa { padding-block: var(--sec); } .prosa-cuerpo { display: grid; gap: 18px; max-width: 62ch; } .prosa-cuerpo h2 { margin-top: 20px; font-size: clamp(26px, 3vw, 36px); } .prosa-cuerpo h2:first-child { margin-top: 0; } .prosa-cuerpo h3 { margin-top: 8px; } .prosa-cuerpo ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; } .prosa-cuerpo a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } .prosa-cuerpo .volver { margin-top: 40px; font-weight: 600; } @media (max-width: 1039.98px) { .q-bloques { gap: 20px; } .escena { --s: .8; } .q-cuerpo { padding: 20px 20px 0; gap: 18px; } .q-tipos { gap: 8px; } .q-tipos li { padding: 12px 4px; font-size: 14px; gap: 8px; } .q-ico { width: 40px; height: 40px; } .q-marca { width: 48px; height: 48px; } .q-marca .isvg { width: 26px; height: 26px; } } @media (max-width: 1099.98px) { .rejilla-cat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; } .tarjeta-enlace .tarjeta-texto { display: none; } .tarjeta-foto .tag { font-size: 14px; } .tarjeta-otra { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; gap: 10px; padding: 18px; } .tarjeta-otra-t { font-size: 22px; } .tarjeta-otra .tarjeta-texto { font-size: 15px; } } @media (max-width: 1039.98px) { .faq-lista { grid-template-columns: minmax(0, 1fr); gap: 8px; } .faq-col { gap: 8px; } .prov-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .prov-lado { max-width: 460px; } /* dirección en tablet: título centrado arriba, retratos centrados, ficha a 3 columnas debajo */ .dir-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .dir-lado { display: contents; } .dir-lado .sec-titulo { order: -1; margin-bottom: 0; justify-items: center; text-align: center; } .personas { justify-content: center; grid-template-columns: repeat(2, minmax(0, 260px)); } .ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; } .ficha-datos h4 { text-align: center; } .lt-tarjetas .lt-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lt-tarjetas .lt-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } } @media (max-width: 1100px) { .lt-rejilla:not(.lt-centrada) { grid-template-columns: repeat(min(var(--cols), 3), minmax(0, 1fr)); } .linea { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; } .riel { display: none; } } @media (max-width: 860px) { .hero-pase { min-height: min(62svh, 520px); } .hero-pase .texto { padding-block: 40px 36px; gap: 16px; } .hero p { font-size: 17px; } .portada .texto { padding-block: 56px 40px; } /* bandas de sección más bajas y con el título sobre un velo más oscuro (C13) */ .banda, .banda-accion { min-height: 0; align-items: end; } .banda::after { background: linear-gradient(0deg, color-mix(in srgb, var(--dark) 90%, transparent) 0%, color-mix(in srgb, var(--dark) 74%, transparent) 55%, color-mix(in srgb, var(--dark) 45%, transparent) 100%); } /* E6 (§5.1.4): bandas a la mitad de su altura también en tablet (E5: 189 px) */ .banda .texto { padding-block: 16px 12px; gap: 4px; } .banda h2 { font-size: 26px; max-width: none; } .banda p { font-size: 14px; line-height: 1.38; } .banda-accion .banda-foto { left: 0; width: 100%; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; } .banda-accion .texto { max-width: none; } .equipo-grid, .mision-grid { grid-template-columns: minmax(0, 1fr); } .bambu { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .bambu-fotos { grid-template-columns: minmax(0, 1fr); } .bambu-camion, .bambu-extra { display: none; } /* misión sin globo (decisión 4): título y frase centrados, frase grande; sin el hueco que el globo llenaba */ .mision { padding-block: 40px; } .mision-grid { gap: 14px; justify-items: center; text-align: center; } .globo-caja { width: auto; aspect-ratio: auto; } .globo-caja .globo { display: none; } .globo-titulo { max-width: none; font-size: 26px; color: var(--dark); } .mision-frase { max-width: 30ch; font-size: 26px; } .equipo { padding-block: var(--sec); } .equipo-grid { gap: 24px; } .equipo-foto { order: -1; min-height: 0; aspect-ratio: 21 / 9; } .equipo-vacio { order: -1; } .bambu { padding: 20px; margin-top: 32px; } .busc-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; } /* en celular, los 6 puntos quedan en ícono + título, de dos en dos: su detalle ya vive en su sección */ .porque-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } .porque-lista li { gap: 8px; } .porque-lista .ico { width: 48px; height: 48px; } .porque-lista h3 { font-size: 16px; line-height: 1.3; } .porque-lista p { display: none; } .porque-lista.n-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .porque-lista.n-5 li, .porque-lista.n-5 li:nth-child(4) { grid-column: auto; } .porque-lista.n-5 li:nth-child(5) { grid-column: 1 / -1; } .marcas { --escala: .8; margin-top: 32px; padding: 24px 20px 20px; gap: 18px; } .marcas-lista { gap: 18px 28px; } .linea { grid-template-columns: minmax(0, 1fr); gap: 20px; } .linea.largo .paso { grid-template-columns: 56px minmax(0, 1fr); } .parada { width: 56px; height: 56px; } .parada .ico { width: 38px; height: 38px; } .paso h4 { font-size: 17px; margin-bottom: 2px; } .paso p { font-size: 15px; } .lt-rejilla:not(.lt-centrada), .lt-centrada { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .lt-centrada > li, .lt-centrada > li:nth-child(4) { grid-column: auto; } .lt-centrada > li:nth-child(5) { grid-column: 1 / -1; justify-self: center; max-width: 50%; } /* Contacto apilado (E6, §5.1.3): título, formulario y, al final, ventas y teléfono; el domicilio queda en el pie */ .contacto { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; background: none; } .contacto::before { display: none; } .contacto-cabeza, .contacto-form, .contacto-datos { grid-column: 1; grid-row: auto; padding-inline: var(--borde); } .contacto-cabeza { background: var(--dark); padding-block: var(--sec) calc(var(--sec) * .6); } .contacto-form { background: var(--bg); padding-block: calc(var(--sec) * .6) calc(var(--sec) * .75); } .contacto-datos { background: var(--dark); padding-block: calc(var(--sec) * .75); } .fila-domicilio { display: none; } .cat-dialogo { width: 100%; max-width: none; max-height: 88svh; margin: auto 0 0; border-radius: var(--radius) var(--radius) 0 0; } .cd-cabeza { grid-template-columns: 64px minmax(0, 1fr) 48px; padding: 16px; gap: 12px; } .cd-cabeza img { width: 64px; height: 64px; } .cd-titulo p { display: none; } .cd-lista { padding: 4px 16px; } .cd-pie { padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); } } /* Cómo comprar en tablet vertical */ @media (min-width: 600px) and (max-width: 860px) { .linea { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .quienes { padding-block: var(--sec); } .prov-lado { display: none; } .prov-grid { margin-bottom: 32px; } } @media (max-width: 599.98px) { .mapa-v5 .rutas { stroke-width: 4; } /* Nosotros en celular */ .lt-rejilla:not(.lt-centrada), .lt-centrada { grid-template-columns: minmax(0, 1fr); gap: 12px; } .lt-centrada > li:nth-child(5) { grid-column: auto; justify-self: stretch; max-width: none; } .lt-lista .lt-item { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; } .lt-lista .lt-item .ico { width: 40px; height: 40px; padding: 4px; } .lt-lista .lt-item p { font-size: 15px; } .lista-tarjetas.lt-tarjetas { padding-block: var(--sec); } .lt-tarjetas .lt-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .lt-tarjetas .lt-item { padding: 16px; gap: 6px; } .lt-tarjetas .lt-item .ico { width: 44px; height: 44px; padding: 5px; } .lt-tarjetas .lt-item h4 { font-size: 16px; } .lt-tarjetas .lt-item p { font-size: 14px; } /* Quiénes la dirigen: retrato en círculo y nombre al lado (Sordón C5); ficha en filas de una línea */ .dir-lado .sec-titulo { justify-items: start; text-align: left; } .dir-grid { gap: 20px; } .personas { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; } .persona { grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 14px; } .persona-foto { width: 80px; height: 80px; aspect-ratio: 1; margin: 0; } .persona-foto::before { display: none; } .persona-foto img { border-radius: 50%; object-position: 50% 20%; } .persona h4 { font-size: 19px; } .ficha-datos h4 { text-align: left; } .ficha { grid-template-columns: minmax(0, 1fr); } .ficha div { display: flex; flex-wrap: wrap; gap: 0 8px; padding-block: 6px; } .dir-lado .sec-titulo { margin-bottom: 0; } .ficha dd { font-size: 15px; } .q-bloques { grid-template-columns: minmax(0, 1fr); gap: 16px; } .escena { --s: .7; --cielo: 14px; } .lugar { font-size: 13px; } .lugar.i { left: 12px; } .lugar.d { right: 12px; } .l-largo { display: none; } .l-corto { display: inline; } .q-bloque { padding-bottom: 18px; } .q-cuerpo { padding: 14px 16px 0; gap: 14px; } .q-cabeza { gap: 12px; } .q-marca { width: 40px; height: 40px; } .q-marca .isvg { width: 22px; height: 22px; } .q-tipos li { padding: 10px 4px; gap: 6px; font-size: 14px; } .q-ico { width: 34px; height: 34px; } .q-ico .isvg { width: 20px; height: 20px; } } @media (max-width: 600px) { /* categorías de dos en dos, la tarjeta entera abre sus productos (C4) */ .rejilla-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tarjeta-foto .tag { left: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: 13px; padding: 4px 8px; } .tarjeta-foto .tag { display: flex; align-items: flex-end; gap: 4px; } .tarjeta-foto .tag .nom { white-space: normal; } .tarjeta-foto .tag .chev { padding-left: 0; } .tarjeta-otra { grid-column: 1 / -1; padding: 16px 20px; } .tarjeta-otra .btn { width: 100%; } /* bambú en fila compacta: la foto de la planta (4:3, 128 px) a la izquierda (diseño §9.4; E6, decisión 10) */ .bambu { grid-template-columns: 128px minmax(0, 1fr); gap: 12px 14px; padding: 12px; align-items: center; } .bambu-texto { display: contents; } .bambu-texto h3, .bambu-texto p { grid-column: 2; } .bambu-fotos { grid-row: 1 / span 2; } .bambu-texto .btn { grid-column: 1 / -1; justify-self: stretch; } .bambu-texto { gap: 6px; } .bambu-texto h3 { font-size: 19px; } .bambu-texto p { font-size: 15px; line-height: 1.4; } .bambu-lista { grid-column: 1 / -1; font-size: 15px; gap: 4px; } .bambu-texto .btn { min-height: 44px; padding: 8px 12px; font-size: 15px; } .form-2 { grid-template-columns: minmax(0, 1fr); } .formulario, .form-campos, .form-2 { gap: 10px; } .form-tarjeta { gap: 16px; padding: 20px 16px; } .busc-col { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; } .busc-col .ico { width: 48px; height: 48px; } .faq-item summary { min-height: 48px; padding: 10px 16px; font-size: 16px; } .faq-r p { padding: 0 16px 14px; font-size: 15px; } } /* ── E5 P7 · celular (≤ 600 px): presupuesto de 12 pantallas a 390×844 sin quitar secciones (diseño §16). Cada regla compacta una sección ya presente; ninguna esconde contenido de negocio. Peldaños de la escalera §16.3 usados: 1 (FAQ), 2 (hero), 4 (qué incluir y bueno saber como lista), 5 (pasos 14 px), 6 (nombre + correo en dos columnas), 8 (bandas). */ @media (max-width: 600px) { body { --sec: 26px; line-height: 1.5; } /* párrafos largos a 15 px (piso del cuerpo en DESIGN.md) */ .equipo-texto p, .q-nota, .contacto-fila p, .contacto-fila address, .faq-r p { font-size: 15px; } .hero-pase { min-height: 0; } .hero-pase .texto { padding-block: 28px 24px; gap: 14px; } /* bandas con foto a la mitad de su altura (auditoría v3 §5.1.4; E5: 125–174 px): título y subtítulo, ≤ 110 px */ .banda .texto { padding-block: 14px 12px; gap: 2px; } .banda h2 { font-size: 23px; line-height: 1.08; } .banda .regla { display: none; } .banda p { font-size: 13px; line-height: 1.32; } .sec-titulo h2, .sec-titulo h3 { font-size: 28px; } .sec-titulo .entrada { font-size: 15px; line-height: 1.45; } .sec-titulo { margin-bottom: 14px; gap: 8px; } .sec-titulo .regla { height: 3px; width: 40px; } /* A quién surtimos */ .q-tipos li { padding: 8px 4px; gap: 4px; } .q-ico { width: 30px; height: 30px; } .q-ico .isvg { width: 18px; height: 18px; } .q-cuerpo { gap: 10px; padding-top: 12px; } /* Pensado para negocios: ícono junto al título, de dos en dos */ .porque-lista { gap: 12px; } .porque-lista li { grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 8px; } .porque-lista .ico { width: 36px; height: 36px; padding: 4px; } .porque-lista h3 { font-size: 15px; line-height: 1.25; } /* catálogo: fotos 4:3 en lugar de cuadradas */ .tarjeta-foto { aspect-ratio: 3 / 2; } .tarjeta-otra { gap: 6px; padding: 14px 16px; } .tarjeta-otra-t { font-size: 19px; } .tarjeta-otra .tarjeta-texto { font-size: 15px; } .bambu { margin-top: 20px; } /* compromisos: ícono junto al título */ .lt-tarjetas .lt-item { grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 6px 10px; padding: 10px; } .lt-tarjetas .lt-item .ico { width: 32px; height: 32px; padding: 3px; margin: 0; } .lt-tarjetas .lt-item > :not(.ico) { grid-column: 2; } /* E6 (auditoría §5.1.2): compromisos 2×2 sin la descripción larga; en computadora se leen completos */ .lt-tarjetas .lt-item p { display: none; } .lt-tarjetas .lt-item h4 { line-height: 1.25; } /* misión (decisión 4): sin globo, título y frase centrados en letra grande */ .mision { padding-block: 32px; } .mision-grid { gap: 10px; } .globo-titulo { font-size: 22px; } .mision-frase { font-size: 24px; line-height: 1.15; } /* pasos (peldaño 5) */ .linea { gap: 14px; } .linea.largo .paso { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; } .parada { width: 48px; height: 48px; border-width: 3px; } .parada .ico { width: 32px; height: 32px; } .paso h4 { font-size: 16px; } .paso p { font-size: 14px; line-height: 1.45; } /* qué incluir y bueno saber como lista con viñeta amarilla (peldaño 4) */ .lt-lista .lt-rejilla { gap: 8px; } .lt-lista .lt-item { display: block; position: relative; padding-left: 18px; } .lt-lista .lt-item .ico { display: none; } .lt-lista .lt-item::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .lt-lista .lt-item p { font-size: 15px; line-height: 1.45; } /* proveedores */ .proveedores .intro { gap: 14px; } .proveedores .intro p { font-size: 15px; } .prov-grid { margin-bottom: 24px; } .busc-cols { gap: 14px; } .busc-col { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; } .busc-col .ico { width: 36px; height: 36px; padding: 4px; } .busc-col h4 { font-size: 16px; } .busc-col p, .busc-lista { font-size: 15px; } .busc-lista { display: flex; flex-wrap: wrap; gap: 0 22px; } .busc-correo { font-size: 15px; } /* FAQ (peldaño 1) */ .faq-lista, .faq-col { gap: 5px; } .faq-item summary { min-height: 44px; padding: 8px 14px; font-size: 15px; line-height: 1.3; } /* contacto: filas más juntas, ícono de 40 */ .contacto-filas { gap: 10px; margin-top: 0; } .contacto-fila { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; } .contacto-fila .ico { width: 40px; height: 40px; padding: 4px; } .contacto-fila p, .contacto-fila address { font-size: 15px; line-height: 1.5; } .contacto-fila p + .fila-t { margin-top: 4px; } .contacto-fila .fila-grande { font: 600 15px/1.5 var(--body); letter-spacing: 0; } .contacto-fila .fila-tel { font-size: 21px; } .contacto .sec-titulo { margin-bottom: 0; } /* formulario: Empresa + Tipo de negocio y País + Código postal a dos columnas; nombre y correo a una (sus ejemplos se cortaban a dos columnas: el peldaño 6 se probó y se descartó), campos de 44 px */ .form-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; } .form-nombre { grid-template-columns: minmax(0, 1fr); } #f-productos { height: 68px; min-height: 68px; } #f-comentarios { height: 80px; min-height: 80px; } .form-campos { gap: 6px; } .formulario { gap: 10px; } .form-tarjeta { gap: 12px; padding: 16px 14px; } .form-tarjeta > h3 { font-size: 22px; } .campo { gap: 4px; } .campo label { font-size: 14px; line-height: 1.3; } .campo input, .campo select, .campo textarea { min-height: 44px; padding: 8px 10px; font-size: 16px; } .campo-error { font-size: 13px; min-height: 1.1em; } .obligatorios, .form-nota { font-size: 14px; line-height: 1.4; } /* pie: Contacto | Información lado a lado, línea legal única */ .pie .wrap { gap: 12px 14px; } .pie .pie-h { margin-bottom: 0; } .pie-lista a { padding-block: 10px; line-height: 24px; } .pie-marca { grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; } .pie-marca p { font-size: 14px; line-height: 1.5; } .pie-logo { width: 120px; } /* ajuste fino para que el español también quepa en 12 pantallas (mismas reglas en los dos idiomas) */ body { --sec: 24px; } .escena { --s: .62; --cielo: 14px; } .ficha dd { font-size: 14px; } .linea { gap: 10px; } .paso p { line-height: 1.4; } .busc-cols { gap: 10px; } .proveedores .intro { gap: 12px; } .rejilla-cat { gap: 10px; } .bambu { margin-top: 14px; } .hero-pase .texto { gap: 12px; } .form-tarjeta { padding: 14px 12px; } .form-campos { gap: 4px; } .campo { gap: 3px; } .pie { padding-block: 32px 16px; } .pie .pie-legal { margin-top: 14px; padding-top: 12px; } .form-2 input::placeholder { font-size: 14px; } .lt-lista .lt-rejilla { gap: 6px; } .porque-lista { gap: 10px; } .equipo-texto { gap: 12px; } .dir-grid { gap: 16px; } .form-tarjeta { gap: 10px; } .q-bloques { gap: 12px; } .pie .wrap { gap: 10px 14px; } } /* ── E5 P7 · tablet (601–860 px; diseño §16.2): dos columnas donde el ancho lo permite, para no alargar la página */ @media (min-width: 601px) and (max-width: 860px) { body { --sec: 56px; } .equipo-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; } .equipo-foto { order: 0; aspect-ratio: auto; min-height: 280px; } .personas { grid-template-columns: repeat(2, minmax(0, 200px)); } .contacto-filas { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 28px; } } /* ── E5 P7 · celular, ajustes de cierre */ @media (max-width: 600px) { .rejilla-cat { gap: 8px; } .tarjeta-otra { padding: 12px 14px; } .catalogo .sec-titulo { margin-bottom: 12px; } .bambu { margin-top: 8px; } /* el último dato de la ficha queda a más de 72 px del título de la banda siguiente (no se lee como su rótulo) */ .direccion { padding-bottom: 44px; } } /* ── E6 · celular (≤ 600 px): unas 9 a 10 pantallas a 390×844 (auditoría v3 §5.1; Tessera E6). Además de las 4 medidas de Sordón (Envíos fuera, Nosotros compacto, formulario antes de los correos, bandas a la mitad), entran el muro de marcas, 2 campos y la línea de alta; para que quepa, cada sección se compacta un poco más. Nada de negocio se esconde, salvo lo que Sordón pide quitar del celular (descripción de compromisos) y textos de entrada que repiten su título. */ @media (max-width: 600px) { .sec-titulo h2, .sec-titulo h3 { font-size: 25px; } .sec-titulo { margin-bottom: 12px; gap: 6px; } .hero-pase .texto { padding-block: 24px 22px; } /* A quién surtimos: casillas de tipo de cliente más bajas; la frase de entrega, alineada con los bloques */ .q-tipos li { padding: 6px 4px; gap: 2px; font-size: 13px; } .q-ico { width: 26px; height: 26px; } .q-ico .isvg { width: 16px; height: 16px; } .q-cuerpo { gap: 8px; } .q-bloque { padding-bottom: 14px; } .q-envio { justify-content: flex-start; text-align: left; margin-top: 12px; font-size: 15px; } .q-envio .isvg { width: 20px; height: 20px; } /* catálogo: fotos 2:1 */ .tarjeta-foto { aspect-ratio: 2 / 1; } /* muro de marcas: pista de dos filas que se desliza con el dedo; el borde derecho se desvanece para decir que sigue */ .marcas { --escala: .62; gap: 12px; margin-top: 16px; padding: 16px 0 14px; } .marcas h3 { font-size: 21px; padding-inline: 16px; } .marcas-pista { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, var(--dark) 85%, transparent); mask-image: linear-gradient(90deg, var(--dark) 85%, transparent); } .marcas-pista::-webkit-scrollbar { display: none; } .marcas-lista { display: grid; grid-template-rows: repeat(2, 40px); grid-auto-flow: column; grid-auto-columns: max-content; gap: 10px 24px; max-width: none; width: max-content; padding-inline: 16px; } .marcas-aviso { font-size: 13px; padding-inline: 16px; line-height: 1.4; } .bambu { margin-top: 8px; } /* Nosotros */ .equipo-foto { aspect-ratio: 3 / 1; } .mision { padding-block: 26px; } .globo-titulo { font-size: 20px; } .mision-frase { font-size: 22px; } .dir-lado .sec-titulo .entrada { display: none; } .persona { grid-template-columns: 64px minmax(0, 1fr); } .persona-foto { width: 64px; height: 64px; } .persona h4 { font-size: 18px; margin-bottom: 0; } .persona p { font-size: 14px; line-height: 1.35; } .ficha div { padding: 4px 10px; } /* Cómo comprar */ .linea.largo .paso { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; } .parada { width: 40px; height: 40px; } .parada .ico { width: 28px; height: 28px; } .paso h4 { font-size: 15px; } .lt-lista .lt-item p { font-size: 14px; line-height: 1.4; } /* Proveedores: «Qué enviar» en dos columnas; alta de cliente más chica */ .busc-lista { display: grid; gap: 0; padding-left: 18px; } .busc-lista, .busc-col p { font-size: 14px; line-height: 1.45; } .busc-col h4 { font-size: 15px; } .busc-alta { margin-top: 16px; padding-top: 12px; font-size: 15px; line-height: 1.45; } .busc-doc { display: block; } .busc-doc .sunbiz { margin-left: 8px; } /* FAQ: la entrada repite el título; en celular se va */ .faq .sec-titulo .entrada { display: none; } /* Contacto: nombre y correo a dos columnas (ejemplos de 14 px caben), tarjeta del formulario sin caja */ .form-nombre { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contacto-form .form-tarjeta { padding: 0; background: none; } .contacto-datos { padding-block: 16px 18px; } .contacto-filas { gap: 8px; } .contacto-fila .fila-tel { font-size: 19px; } .pie { padding-block: 26px 14px; } /* E6, reparación R1 (E6-P-SITIO-05, body-size): el pie no baja de 15 px en celular (era 13: en Gracias era casi todo el texto corrido); interlineado más justo para no alargar la página */ .pie-marca p, .pie .pie-legal p { font-size: 15px; line-height: 1.4; } .contacto-fila p + .fila-t { margin-top: 2px; } .contacto-fila .fila-grande a, .contacto-fila .fila-tel a { padding-block: 4px; } .lt-tarjetas .lt-rejilla { gap: 8px; } /* secciones un poco más juntas (24 → 20 px arriba y abajo) */ body { --sec: 20px; } } /* North Atlas · motion.css — vocabulario de movimiento M-A a M-O (arquitectura E2 §8 y precisión R1 de M-O). Marcado en los heroes, sutil en el resto; todo tiene estado final quieto. Sólo transform y opacidad, salvo el llenado del riel. Las animaciones continuas se pausan fuera de pantalla (.fuera, sitio.js módulo continuas). El bloque de prefers-reduced-motion va siempre al final; también para el SVG del mapa (sitio.js pausa SMIL). E3: salen la cinta (M-D), la foto de portada, la palomita y los botones de gracias; entran las bandas de sección (M-K al entrar en pantalla) y el catálogo con «Ask about this». Dueño: asiento 2 (Opus). E6 (28-oct, Tessera E6, decisiones 5 y 6; asiento 2a): en celular (≤ 860 px) nada se mueve solo —escenas, entrada del bloque de arriba, camión de Gracias, riel, mapa—; sólo responden al toque el diálogo, la pregunta, el menú, el botón, el temblor del formulario y el fundido entre páginas. La entrada del bloque de arriba corre una sola vez: sitio.js pone .entrada-hecha al terminar (o enseguida con movimiento reducido o en celular) y ya no se repite al volver a encender el movimiento (defecto 1 de la E5). En computadora, el resto sigue como en la versión 5. */ /* M-I · botones */ .btn { transition: transform .2s ease, background-color .2s ease, color .2s ease; } .btn:hover { transform: translateY(-2px); } /* E6-P-SITIO-02 (excepción de César del 29-oct): al subir, el botón dejaba fuera sus 2 px de abajo; con el ratón entrando por ahí el hover parpadeaba y el clic caía fuera (medido: 2–3 filas de 1 px sin respuesta al pie de cada botón; el de la barra a 1440 encendía y apagaba el hover 11 veces en 0,8 s). Una franja invisible bajo el botón levantado cubre su lugar original. Sólo existe con hover: el transform de .btn:hover la contiene. */ .btn:hover::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -4px; height: 4px; } /* M-F · barra: sombra al bajar (el panel móvil se despliega con grid-template-rows en base.css) */ .bar { transition: box-shadow .3s ease; view-transition-name: barra; } /* M-B · hero de Inicio: entrada al cargar + parallax (sitio.js escribe --py-capa y --py-texto; sólo ≥ 1040 px) */ .hero .texto > * { animation: subir .6s cubic-bezier(.2, .7, .2, 1) both; } .hero .texto > :nth-child(2) { animation-delay: .08s; } .hero .texto > :nth-child(3) { animation-delay: .16s; } .hero .texto > :nth-child(4) { animation-delay: .24s; } @keyframes subir { from { opacity: 0; transform: translateY(24px); } } /* E6 (decisión 6, defecto 1 de la E5): una vez hecha, la entrada no vuelve a correr al quitar el movimiento reducido */ .entrada-hecha .hero .texto > *, .entrada-hecha .portada h1, .entrada-hecha .portada p, .entrada-hecha .portada .regla { animation: none; } .hero .texto { transform: translate3d(0, var(--py-texto, 0px), 0); } .pase { transform: translate3d(0, var(--py-capa, 0px), 0); } .hero-mapafull .fondo-mapa { transform: translateY(calc(-50% + var(--py-capa, 0px))); } @media (max-width: 860px) { .hero-mapafull .fondo-mapa { transform: none; } } /* Pase de fotos del hero D1 (plan B de A10): 7 fotos × 3 s = 21 s; fundido de 1 s y el movimiento de cada foto del video (acercar, paneo a la derecha, alejar, paneo a la izquierda). La foto que entra queda encima (z-index 2). */ .pase img { animation: pase 21s linear infinite both, var(--mov) 21s linear infinite both; animation-delay: calc(var(--k) * 3s - 1s); } .mov-acercar { --mov: acercar; } .mov-paneo-der { --mov: paneo-der; } .mov-alejar { --mov: alejar; } .mov-paneo-izq { --mov: paneo-izq; } @keyframes pase { 0% { opacity: 0; z-index: 2; } 4.762% { opacity: 1; z-index: 2; } 14.286% { opacity: 1; z-index: 1; } 19.048% { opacity: 1; z-index: 1; } 19.1%, 100% { opacity: 0; z-index: 1; } } @keyframes acercar { 0% { transform: scale(1); } 19.048%, 100% { transform: scale(1.09); } } @keyframes paneo-der { 0% { transform: scale(1.1) translateX(4.5%); } 19.048%, 100% { transform: scale(1.1) translateX(-4.5%); } } @keyframes alejar { 0% { transform: scale(1.12); } 19.048%, 100% { transform: scale(1.03); } } @keyframes paneo-izq { 0% { transform: scale(1.1) translateX(-4.5%); } 19.048%, 100% { transform: scale(1.1) translateX(4.5%); } } /* M-C / M-S · mapa v5 (E5 §13.3). Fase 1, una vez al entrar el 30 % (sitio.js pone .vivo): aparece la trama de EE. UU., el contorno de México se dibuja y su trama aparece después; cada ruta se dibuja desde Fort Lauderdale (110 ms de escalón) y al terminar aparece encima su versión punteada; cada ciudad llega con su anillo. Fase 2, continua: marcha de todas las rutas, pulso en el origen y tres paquetes (SMIL) que viajan a New York, Dallas y la Ciudad de México. Sin JS o con movimiento reducido: mapa completo y quieto, sin paquetes. */ .mapa-v5 .mx-contorno { stroke-dasharray: 1; } .mapa-v5 .paquetes { display: none; } .js .mapa:not(.vivo) .trama-us, .js .mapa:not(.vivo) .mexico, .js .mapa:not(.vivo) .rutas path, .js .mapa:not(.vivo) .ciudad, .js .mapa:not(.vivo) .pulso { opacity: 0; } .mapa.vivo .trama-us { animation: aparece .6s ease both; } .mapa.vivo .mx-contorno { animation: dibuja 1.4s ease-out .2s both; } .mapa.vivo .trama-mx { animation: aparece .8s ease .9s both; } .mapa.vivo .rutas .trazo { animation: dibuja .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 110ms); stroke-dasharray: 1; } .mapa.vivo .rutas .marcha { animation: aparece .3s ease both, marcha 1.3s linear infinite; animation-delay: calc(var(--i) * 110ms + 700ms), calc(var(--i) * 110ms + 700ms); } .mapa.vivo .ciudad { animation: aparece .45s ease both; animation-delay: calc(var(--i) * 110ms + 600ms); } .mapa.vivo .anillo { animation: anillo 1s ease-out forwards; animation-delay: calc(var(--i) * 110ms + 650ms); } .mapa.vivo .pulso { animation: pulso 2s ease-out 1.5s infinite both; } .js .mapa-v5.vivo .paquetes { display: inline; animation: aparece .6s ease 2.6s both; } @keyframes aparece { from { opacity: 0; } } @keyframes dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes marcha { to { stroke-dashoffset: -18; } } @keyframes anillo { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } } @keyframes pulso { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } } /* M-E · riel de pasos (sitio.js módulo riel: avanza cada 3 s mientras la sección está en pantalla) */ /* E5 §11.1 (A-EN-10, «muy lenta»): traslado y pausa separados; el tope se enciende al terminar el traslado; mientras viaja, las ruedas del camión giran y el camión baja 1 px al arrancar */ .riel .lleno { transition: width var(--riel-viaje) cubic-bezier(.4, 0, .2, 1); } .riel .camion { transition: left var(--riel-viaje) cubic-bezier(.4, 0, .2, 1); } .riel .tope { transition: border-color .3s ease var(--riel-viaje); } .riel .camion.viajando .rueda { animation: rueda .8s linear infinite; } .riel .camion.viajando .camion-riel { animation: arranca var(--riel-viaje) ease-in-out; } @keyframes arranca { 0%, 100% { translate: 0 0; } 20%, 80% { translate: 0 1px; } } .parada { transition: border-color .4s ease, transform .4s ease; } /* M-T · tarjeta 4A (E5 §9.2): foto y etiqueta en .35 s; nombre ↔ «See products» en .25 s. Con movimiento reducido el cambio es instantáneo (bloque final). */ .tarjeta-foto img { transition: transform .35s cubic-bezier(.2, .7, .2, 1), filter .35s ease; } .tarjeta-foto .tag { transition: left .35s cubic-bezier(.2, .7, .2, 1), bottom .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1); } .tarjeta-foto .tag .nom, .tarjeta-foto .tag .ver { transition: opacity .25s ease; } /* M-K · portada de Privacy y Terms: título sube y la regla amarilla se dibuja al cargar. Bandas de sección: lo mismo al entrar en pantalla, una vez (sitio.js, módulo revelar); sin parallax. */ .portada h1 { animation: subir-k .5s ease both; } .portada p { animation: subir-k .5s ease .1s both; } .portada .regla { transform-origin: left center; animation: regla .6s cubic-bezier(.2, .7, .2, 1) .2s both; } @keyframes subir-k { from { opacity: 0; transform: translateY(20px); } } @keyframes regla { from { transform: scaleX(0); } } .banda .regla { transform-origin: left center; } /* E6, reparación R1 (E6-P-SITIO-04): la transición vive sólo en el estado de llegada (.visto). Al cargar, sitio.js pone .revelar/.revelar-foto a lo que está fuera de pantalla y eso lo esconde al instante, sin animar nada fuera de la vista (antes: ~145 transiciones de «esconder» y el acercamiento de las fotos corrían fuera de pantalla al cargar). */ .banda .regla.revelar { transform: scaleX(0); } .banda .regla.revelar.visto { transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--retraso, 0ms); } .banda.revelar-foto .banda-foto { transform: scale(1.04); } .banda.revelar-foto.visto .banda-foto { transform: none; transition: transform 1.2s ease; } /* M-P · escena barco (E5 §7.3): barco cruza en 14 s, se mece (translate ±2 px en 3 s, rotate ±0.8° en 4 s); tres olas a 9, 7 y 5 s; la ruta del horizonte marcha en 2.4 s. M-Q · escena camión (§7.4): camión cruza en 9 s con suspensión de 1 px, ruedas a 0.8 s, humo a 1.6 s; lejanía a 18 s, postes y línea central a la misma velocidad (600 px en 9 s), hierba a 6 s. Sólo con JS (.js) y sin movimiento reducido; quietas en el 60 % del recorrido. */ .js .barco-v { animation: cruza 14s linear infinite; } .js .camion-v { animation: cruza 9s linear infinite; } @keyframes cruza { from { transform: translateX(calc(-170px * var(--s))); } to { transform: translateX(calc(100cqw + 20px)); } } .js .mece { animation: mece-y 3s ease-in-out infinite alternate, mece-r 4s ease-in-out infinite alternate; } @keyframes mece-y { from { translate: 0 -2px; } to { translate: 0 2px; } } @keyframes mece-r { from { rotate: -.8deg; } to { rotate: .8deg; } } .js .ola-1 { animation: ola-s 9s linear infinite; } .js .ola-2 { animation: ola-s 7s linear infinite; } .js .ola-3 { animation: ola-s 5s linear infinite; } @keyframes ola-s { to { transform: translateX(calc(-600px * var(--s))); } } .js .escena-export .ruta-mar { animation: marcha-12 2.4s linear infinite; } @keyframes marcha-12 { to { stroke-dashoffset: -12; } } .js .suspension { animation: suspension .5s ease-in-out infinite alternate; } @keyframes suspension { from { translate: 0 -1px; } to { translate: 0 1px; } } .js .camion-escena .rueda { animation: rueda .8s linear infinite; } @keyframes rueda { to { transform: rotate(360deg); } } .js .camion-escena .humo { animation: humo 1.6s ease-out infinite; } .js .camion-escena .humo.h2 { animation-delay: .8s; } @keyframes humo { 0% { opacity: .5; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-6px, -12px) scale(1.4); } } .js .lejos { animation: ola-s 18s linear infinite; } .js .postes { animation: ola-s 9s linear infinite; } .js .hierba { animation: ola-s 6s linear infinite; } .js .escena-usa .linea-central { animation: marcha-40 .6s linear infinite; } @keyframes marcha-40 { to { stroke-dashoffset: -40; } } /* M-L · formulario: campo inválido marcado (componentes.css); el formulario tiembla una vez por intento */ .tiembla { animation: tiembla .24s ease; } @keyframes tiembla { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-4px); } } /* M-M · FAQ: la respuesta se despliega con grid-template-rows y opacidad; la flecha gira 90° */ .faq-r { transition: grid-template-rows .24s ease, opacity .24s ease; } .js .faq-item:not(.abierto) .faq-r { grid-template-rows: 0fr; opacity: 0; } .flecha { transition: transform .24s ease; } .js .faq-item .flecha { transform: rotate(-45deg); } .js .faq-item.abierto .flecha { transform: rotate(45deg); } /* M-N · entre páginas: fundido de documento a documento; barra quieta */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; } /* M-O · R-FONDO: degradado sutil que se desplaza en 24 s en las secciones claras; tokens de la opción */ .fondo-vivo { position: relative; isolation: isolate; overflow-x: clip; } .fondo-vivo::before { content: ""; position: absolute; inset: 0 -14%; z-index: -1; pointer-events: none; background: radial-gradient(38% 60% at 22% 30%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%), radial-gradient(42% 64% at 78% 72%, color-mix(in srgb, var(--dark) 4%, transparent), transparent 72%); animation: deriva 24s ease-in-out infinite alternate; } @keyframes deriva { from { transform: translate3d(-8%, 0, 0); } to { transform: translate3d(8%, 0, 0); } } /* M-A · revelar al entrar en pantalla, una vez; hermanos escalonados (sitio.js, módulo revelar) */ .revelar { opacity: 0; transform: translateY(14px); } .revelar.visto { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; transition-delay: var(--retraso, 0ms); } /* entrada que salió de la vista antes de terminar (sitio.js): estado final al instante, nada corre fuera de pantalla */ .revelado, .revelado.visto, .revelado .banda-foto, .banda .regla.revelado { transition: none !important; } /* E4 · celular (auditoría de Sordón C11 y C12): nada se esconde para aparecer al bajar, y el hero muestra una sola foto fija; en celular, el deslizar rápido dejaba huecos y dos fotos a la vez. */ @media (max-width: 860px) { /* E6 (decisión 5): nada se mueve solo en celular. Escenas de barco y camión (también la de Gracias), entrada del bloque de arriba y de las portadas, riel y mapa (oculto) quedan en su estado final; la barra no anima su sombra. sitio.js deja el SMIL en pausa y no arranca el temporizador del riel. Siguen las respuestas al toque. */ .escena, .escena *, .mapa, .mapa *, .riel, .riel * { animation: none !important; transition: none !important; } .hero .texto > *, .portada h1, .portada p, .portada .regla { animation: none !important; } .bar, .parada { transition: none; } .revelar, .revelar.visto { opacity: 1 !important; transform: none !important; transition: none !important; } .banda .regla.revelar { transform: none !important; } .banda.revelar-foto .banda-foto { transform: none !important; } .pase img { animation: none !important; opacity: 0 !important; transform: none !important; } .pase img:first-child { opacity: 1 !important; } /* E5 §4.5.3: el degradado de fondo no aporta en celular y gasta batería */ .fondo-vivo::before { animation: none; } } /* diálogo de productos: entra desde abajo en celular y con un fundido en escritorio */ .cat-dialogo[open] { animation: dialogo .22s ease-out; } .cat-dialogo::backdrop { animation: aparece .22s ease-out; } @keyframes dialogo { from { opacity: 0; transform: translateY(16px); } } /* continuas fuera de pantalla: pausadas */ .fuera, .fuera *, .fuera::before, .fuera::after, .fuera *::before, .fuera *::after { animation-play-state: paused !important; } /* movimiento reducido: todo queda en su estado final quieto (también al cambiar la preferencia en vivo) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .marcha { stroke-dashoffset: 0; } .pulso, .mapa .anillo, .mapa-v5 .paquetes { display: none !important; } .mapa-v5 .mx-contorno, .mapa-v5 .trazo { stroke-dashoffset: 0; } .js .mapa .rutas path, .js .mapa .ciudad { opacity: 1 !important; } .revelar { opacity: 1; transform: none; } .banda .regla.revelar { transform: none; } .banda .banda-foto { transform: none !important; } .pase img { opacity: 0 !important; transform: none !important; } .pase img:first-child { opacity: 1 !important; } .hero .texto, .pase { transform: none !important; } .hero-mapafull .fondo-mapa { transform: translateY(-50%) !important; } .fondo-vivo::before { transform: none; } .js .faq-item.abierto .faq-r { grid-template-rows: 1fr; opacity: 1; } } @media (prefers-reduced-motion: reduce) and (max-width: 860px) { .hero-mapafull .fondo-mapa { transform: none !important; } } /* NA-QA-06 (Opus, base; Privacy no tiene otro CSS local): al final de 2 párrafos el correo queda solo en su línea y, a menos de 72 px del h2 siguiente, el inspector lo lee como rótulo de ese título. Más aire antes de cada apartado de la política separa párrafo y título; el texto, el correo y su enlace mailto no cambian. */ html[data-pagina="privacy"] .prosa-cuerpo h2:not(:first-child) { margin-top: 60px; }