/* ============================================================ base.css — sistema mobile-first de imaquinua.com ------------------------------------------------------------ Se carga desde el real de cada página pública, antes de que support.js monte React. Así el layout ya está resuelto cuando aparece el primer píxel y no hay parpadeo. REGLA DE LA CASA: mobile-first. Lo que se declara fuera de un @media es el teléfono. Las pantallas grandes solo AÑADEN, con @media (min-width). No se escriben reglas max-width nuevas. Breakpoints (literales: las custom properties no funcionan dentro de @media): 640px sm · teléfono grande / phablet 861px nav · el menú deja de ser hamburguesa 901px lg · los grids abren a varias columnas 1200px xl · holguras de escritorio amplio ============================================================ */ :root { /* Paleta */ --crema: #FDFAF2; --tinta: #1B1622; --amarillo:#FFD21E; --magenta: #CE2F68; /* Tintas derivadas (evitan rgba() repetido por todo el HTML) */ --tinta-70: rgba(27, 22, 34, .70); --tinta-60: rgba(27, 22, 34, .60); --tinta-25: rgba(27, 22, 34, .25); --tinta-12: rgba(27, 22, 34, .12); --crema-70: rgba(253, 250, 242, .70); --crema-50: rgba(253, 250, 242, .50); /* Tipografía */ --fuente-display: 'Archivo', sans-serif; --fuente-texto: 'IBM Plex Sans', sans-serif; --fuente-mono: 'IBM Plex Mono', monospace; /* Ritmo espacial: el canalón crece con la pantalla */ --gutter: clamp(16px, 5vw, 44px); --ancho-max: 1400px; /* Separación vertical entre secciones */ --seccion-y: clamp(56px, 9vw, 100px); } /* ------------------------------------------------------------ 1 · Cimientos ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* iOS no reescala al girar */ scroll-behavior: smooth; } body { margin: 0; background: var(--crema); color: var(--tinta); font-family: var(--fuente-texto); /* overflow-x clip y no hidden: no crea contexto de scroll y deja funcionar el position:sticky del nav. */ overflow-x: clip; } /* Ninguna pieza puede empujar el ancho del documento. Es la red de seguridad contra el scroll horizontal en teléfono. */ img, svg, video, canvas, table, pre { max-width: 100%; } img, svg, video, canvas { height: auto; } /* Palabras largas (URLs, nombres compuestos) parten en vez de desbordar. En titulares con Archivo condensada pasa seguido. */ h1, h2, h3, h4 { overflow-wrap: anywhere; text-wrap: balance; } p, li { text-wrap: pretty; } * { -webkit-tap-highlight-color: transparent; } a { color: var(--tinta); } a:hover { color: var(--magenta); } ::selection { background: var(--amarillo); color: var(--tinta); } /* Foco visible para navegación por teclado. El diseño lo había perdido junto con el outline por defecto. */ :focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; } /* Área táctil mínima de 44px en controles (guía de Apple y WCAG 2.5.8). En móvil los enlaces del nav quedaban por debajo. */ @media (pointer: coarse) { nav a, nav button, footer a, [role="button"] { min-height: 44px; display: inline-flex; align-items: center; } } /* ------------------------------------------------------------ 2 · Contenedor ------------------------------------------------------------ */ .ima-wrap { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--gutter); } .ima-seccion { padding-block: var(--seccion-y); } /* ------------------------------------------------------------ 3 · Rejilla mobile-first ------------------------------------------------------------ Una columna en el teléfono. Las columnas se añaden hacia arriba, nunca se quitan hacia abajo. ------------------------------------------------------------ */ .ima-grid { display: grid; gap: clamp(14px, 3vw, 24px); grid-template-columns: 1fr; } /* Rejilla que se acomoda sola, sin breakpoints. Es el patrón que ya usaba gracias.html y el que conviene por defecto cuando las piezas son equivalentes entre sí. El minmax(0,...) del min() evita el desborde clásico de auto-fit cuando el viewport es más angosto que la base. */ .ima-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } .ima-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); } .ima-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } /* Catálogo: dos columnas ya en el teléfono — las fichas de producto se comparan mejor de a pares que en lista larga. */ .ima-grid--2-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 640px) { /* Paso intermedio: en tablet, dos columnas antes de abrir a tres o cuatro. Antes se saltaba de 1 a 4 de golpe. */ .ima-grid--sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 901px) { .ima-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ima-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ima-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ima-grid--2-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Asimétricas del sitio (hero, artículo destacado, catálogo) */ .ima-grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .ima-grid--7-4 { grid-template-columns: minmax(0, 7fr) minmax(260px, 4fr); } .ima-grid--145 { grid-template-columns: 1.45fr 1fr; } .ima-grid--14 { grid-template-columns: 1.4fr 1fr; } .ima-grid--115 { grid-template-columns: 1.15fr 1fr; } .ima-grid--1-115 { grid-template-columns: 1fr 1.15fr; } /* Artículo: barra lateral · cuerpo · índice */ .ima-grid--3-7-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); } } /* ------------------------------------------------------------ 4 · Escalonados decorativos ------------------------------------------------------------ El sitio desfasa piezas con margin-left y translateY para dar sensación de escalera. Eso solo se lee cuando hay ancho de sobra: en el teléfono es ancho perdido y desalineación. Por eso el desfase nace en cero y solo se activa en grande. ------------------------------------------------------------ */ .ima-escalon { margin-left: 0 !important; } .ima-desfase { transform: none !important; } /* Las cajas de la escalera se igualaban con min-height para que la fila cuadrara. Apiladas en el teléfono eso solo deja huecos: ahí crecen con su contenido. */ .ima-escalera__caja { min-height: 0; } @media (min-width: 901px) { .ima-escalon { margin-left: var(--escalon, 0) !important; } .ima-desfase { transform: translateY(var(--desfase, 0)) !important; } .ima-escalera__caja { min-height: var(--alto, 0); } } /* ------------------------------------------------------------ 5 · Fila de servicio (servicios.html) ------------------------------------------------------------ En el teléfono se apila: etiqueta, título y descripción en lectura vertical. En escritorio recupera la línea con la descripción empujada a la derecha. ------------------------------------------------------------ */ .ima-servicio { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-block: 22px; border-top: 1.5px solid var(--tinta-25); } .ima-servicio__desc { margin: 0; max-width: 60ch; font-size: 14px; line-height: 1.6; color: var(--tinta-70); } /* --desc-max deja que cada página fije el ancho de la columna derecha sin duplicar la regla. */ @media (min-width: 901px) { .ima-servicio { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 30px; padding-block: 26px; } .ima-servicio__desc { margin: 0 0 2px auto; /* empuja la descripción al extremo */ max-width: var(--desc-max, 360px); align-self: flex-end; } } /* ------------------------------------------------------------ 6 · Navegación ------------------------------------------------------------ Mobile-first invertido respecto al original: la hamburguesa es el estado base y los enlaces en línea son la mejora para pantalla ancha. Antes era al revés y obligaba a !important. ------------------------------------------------------------ */ .site-nav__burger { display: flex; } .site-nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px var(--gutter) 22px; background: var(--crema); border-bottom: 1.5px solid var(--tinta); /* dvh y no vh: en iOS la barra del navegador ya no recorta el menú al aparecer y desaparecer. */ max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; } .site-nav__links a { padding: 14px 0; border-top: 1px solid var(--tinta-12); } .site-nav__links a:first-child { border-top: none; } .site-nav__toggle:checked ~ .site-nav__links { display: flex; } .site-nav__login, .site-nav__cta { align-self: flex-start; margin-top: 8px; } @media (min-width: 861px) { .site-nav__burger { display: none; } .site-nav__links { display: flex; position: static; flex-direction: row; align-items: center; gap: 20px; margin-left: auto; /* empuja el menú al extremo derecho */ padding: 0; background: none; border-bottom: none; max-height: none; overflow: visible; } .site-nav__links a { padding: 0; border-top: none; } .site-nav__login, .site-nav__cta { align-self: auto; margin-top: 0; } } /* ------------------------------------------------------------ 7 · Respeto por las preferencias del sistema ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js-reveal { opacity: 1 !important; transform: none !important; } } /* ------------------------------------------------------------ 8 · Impresión ------------------------------------------------------------ */ @media print { .site-nav__burger, .site-nav__links, nav, footer { display: none !important; } body { background: #fff; color: #000; } .js-reveal { opacity: 1 !important; transform: none !important; } }