/* ══════════════════════════════════════════════════════════════════════ mobile.css — capa responsiva para las páginas internas del portafolio (Granados 60, La Enseñanza, Singularity House, Proyectos BIM, Telebachillerato, DACC/Sobre mí, Logros). Todo vive bajo html.is-mobile (la clase la fija mobile.js sólo en teléfonos / ventanas angostas). Sin esa clase, el diseño de escritorio de 960px queda EXACTAMENTE igual. La página de Inicio (Portafolio) trae su propia capa inline y NO carga este archivo. ══════════════════════════════════════════════════════════════════════ */ /* ---- Wrapper: dejar de forzar 960px ---- */ html.is-mobile [data-mobile-wrap] { min-width: 0 !important; width: 100% !important; overflow-x: clip !important; } /* Red de seguridad: cualquier contenedor con min-width:960 inline se libera en móvil */ html.is-mobile [style*="min-width: 960px"] { min-width: 0 !important; width: 100% !important; overflow-x: clip !important; } /* clip (no hidden) para NO crear un contenedor de scroll que rompa position:sticky */ html.is-mobile body { overflow-x: clip; } /* ══ NAV compacta + hamburguesa ══ */ html.is-mobile .g-nav, html.is-mobile .d-nav { padding: 0 18px !important; background: rgba(232,231,226,0.95) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(190,181,162,0.38); } /* ocultar el bloque central de links de etapa y el meta de la derecha */ html.is-mobile .g-nav > div[style*="align-self: center"], html.is-mobile .d-nav > div[style*="align-self: center"], html.is-mobile .g-nav > div[style*="text-align: right"], html.is-mobile .d-nav > div[style*="text-align: right"] { display: none !important; } /* forzar texto oscuro del título/back sobre la barra clara */ html.is-mobile .g-nav .nv-title, html.is-mobile .g-nav .nv-sub, html.is-mobile .g-nav .nv-link, html.is-mobile .d-nav .nv-title, html.is-mobile .d-nav .nv-sub, html.is-mobile .d-nav .nv-link { color: #1E1E1E !important; } html.is-mobile .d-nav .btn span { color: #1E1E1E !important; } /* Burger (lo inyecta mobile.js en , fijo arriba a la derecha) */ .nav-burger { display: none; } html.is-mobile .nav-burger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; position: fixed; top: 9px; right: 16px; z-index: 130; width: 36px; height: 36px; cursor: pointer; } html.is-mobile .nav-burger span { display: block; height: 1.5px; width: 23px; background: #1E1E1E; transition: transform 0.3s ease, opacity 0.2s ease; } html.is-mobile .nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } html.is-mobile .nav-burger.open span:nth-child(2) { opacity: 0; } html.is-mobile .nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Overlay menu (lo inyecta mobile.js en ) */ .mobile-menu { display: none; } html.is-mobile .mobile-menu { display: flex; flex-direction: column; gap: 2px; position: fixed; inset: 0; z-index: 200; background: #E8E7E2; padding: 92px 26px 40px; transform: translateY(-101%); transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); pointer-events: none; } html.is-mobile .mobile-menu.open { transform: translateY(0); pointer-events: auto; } html.is-mobile .mobile-menu .nav-link, html.is-mobile .mobile-menu .mm-back { font-family: 'Barlow', sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; color: #1E1E1E; text-decoration: none; padding: 18px 2px; border-bottom: 1px solid rgba(190,181,162,0.4); cursor: pointer; line-height: 1.05; } html.is-mobile .mobile-menu .mm-back { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.16em; color: #BEB5A2; border-bottom: none; margin-top: 22px; padding-top: 4px; } html.is-mobile .mobile-menu .nav-link:active { color: #494B30; } html.is-mobile .mobile-menu .mm-close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-family: 'Barlow', sans-serif; font-size: 42px; font-weight: 400; line-height: 1; color: #1E1E1E; cursor: pointer; border-bottom: none; padding: 0; } /* ══ Reflujo de secciones ══ */ html.is-mobile [style*="padding: 100px 80px"] { padding: 60px 22px !important; } html.is-mobile [style*="padding: 104px 80px"] { padding: 58px 22px !important; } html.is-mobile [style*="padding: 80px 80px"] { padding: 52px 22px !important; } html.is-mobile [style*="padding: 80px"]:not([style*="padding: 80px 80px"]):not([style*="padding: 80px 22px"]) { padding: 46px 22px !important; } /* columnas anchas → una sola columna */ html.is-mobile [style*="gap: 80px"], html.is-mobile [style*="gap: 56px"] { flex-direction: column !important; gap: 30px !important; } html.is-mobile [style*="gap: 48px"], html.is-mobile [style*="gap: 40px"] { gap: 24px !important; flex-wrap: wrap !important; } /* topes de ancho → 100% */ html.is-mobile [style*="max-width: 1120px"], html.is-mobile [style*="max-width: 1040px"], html.is-mobile [style*="max-width: 900px"], html.is-mobile [style*="max-width: 560px"], html.is-mobile [style*="max-width: 540px"], html.is-mobile [style*="max-width: 520px"] { max-width: 100% !important; } /* insets del hero 64px → 22px */ html.is-mobile [style*="left: 64px"] { left: 22px !important; } html.is-mobile [style*="right: 64px"] { right: 22px !important; } html.is-mobile [style*="bottom: 56px"][style*="left: 22px"] { bottom: 40px !important; } /* ══ Tipografía · UN solo tamaño para todo el texto informativo ══ Referencia: el primer bloque de texto de Granados 60 (12.5px). */ html.is-mobile [style*="font-size: 13.5px"], html.is-mobile [style*="font-size: 13px"], html.is-mobile [style*="font-size: 12.5px"], html.is-mobile [style*="font-size: 12px"], html.is-mobile [style*="font-size: 11.5px"] { font-size: 12.5px !important; line-height: 1.9 !important; text-align: justify; -webkit-hyphens: auto; hyphens: auto; } html.is-mobile [style*="font-size: 11px"] { font-size: 12.5px !important; line-height: 1.9 !important; } /* El párrafo de presentación de la portada escribe el inline sin espacio (font-size:13px), así que los selectores de arriba no lo alcanzan. */ html.is-mobile .intro-copy { font-size: 12.5px !important; line-height: 1.9 !important; text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /* ventanas internas (panel de espacios, fichas): mismo cuerpo de texto */ html.is-mobile .esp-body [style*="font-size: 11px"], html.is-mobile .esp-body [style*="font-size: 10.5px"], html.is-mobile .esp-body [style*="font-size: 10px"], html.is-mobile .esp-body [style*="font-size: 9.5px"], html.is-mobile .esp-body [style*="font-size: 9px"] { font-size: 12.5px !important; line-height: 1.9 !important; } html.is-mobile .esp-body [style*="font-size: 6.5px"], html.is-mobile .esp-body [style*="font-size: 7px"] { font-size: 8.5px !important; } html.is-mobile [style*="font-size: 10px"] { font-size: 12px !important; } html.is-mobile [style*="font-size: 9px"] { font-size: 11px !important; } html.is-mobile [style*="font-size: 8px"] { font-size: 10px !important; letter-spacing: 0.12em !important; } html.is-mobile [style*="font-size: 7px"] { font-size: 9px !important; } /* el menú mantiene su tamaño grande a pesar de las reglas de arriba */ html.is-mobile .mobile-menu .nav-link { font-size: 30px !important; line-height: 1.05 !important; text-align: left !important; } html.is-mobile .mobile-menu .mm-back { font-size: 11px !important; } /* ══ Secciones de RENDER a pantalla completa → banda integrada (cover, sin caja negra) ══ */ html.is-mobile #sec-renders[style*="100vh"] { height: 66vh !important; } html.is-mobile #sec-renders[style*="100vh"] .r-slide img, html.is-mobile #sec-renders[style*="100vh"] img { object-fit: cover !important; } /* ══ Granados · ESPACIOS en móvil ══ La banda de secuencia queda FIJA arriba (sticky) y se ve COMPLETA: ajuste al ancho, sin recorte lateral (frame 16:9 → alto 56.25vw). Debajo, a todo el ancho, la lista de espacios con su propio scroll. Los tags/marcadores quedan sobre la banda (el JS los reubica al modo "ajuste-a-ancho"). */ html.is-mobile #sec-espacios { height: 450vh !important; } html.is-mobile #sec-espacios .esp-sticky { overflow: hidden !important; } /* banda del canvas: ancho completo, alto = 16:9 del ancho */ html.is-mobile #sec-espacios #seq-canvas { top: 52px !important; left: 0 !important; bottom: auto !important; width: 100% !important; height: 56.25vw !important; } html.is-mobile #sec-espacios .hotspot-layer { display: block !important; top: 52px !important; left: 0 !important; width: 100% !important; height: 56.25vw !important; } /* viñeteado solo sobre la banda (debajo de la barra) */ html.is-mobile #sec-espacios .esp-sticky > div[style*="linear-gradient"] { top: 52px !important; height: 56.25vw !important; bottom: auto !important; } html.is-mobile #sec-espacios .seq-hint-g, html.is-mobile #sec-espacios #seq-load { display: none !important; } /* título "Espacios" compacto sobre la banda */ html.is-mobile #sec-espacios [style*="top: 72px"] { top: 60px !important; left: 20px !important; } html.is-mobile #sec-espacios [style*="font-size: 52px"] { font-size: 26px !important; } /* lista debajo de la banda, a todo el ancho, con scroll propio */ html.is-mobile #sec-espacios .esp-panel { top: calc(52px + 56.25vw) !important; left: 0 !important; width: 100% !important; border-left: none !important; border-top: 1px solid rgba(232,231,226,0.16) !important; } html.is-mobile #sec-espacios .esp-name { font-size: 18px !important; } html.is-mobile #sec-espacios .esp-head { padding: 15px 20px !important; } html.is-mobile #sec-espacios .esp-body { padding: 0 20px !important; } html.is-mobile #sec-espacios .esp-item.open .esp-body { padding: 2px 20px 22px !important; } /* ══ Granados · COSTO en móvil ══ Indicadores grandes en 2 columnas (el total ya cabe completo), gráficas apiladas en una columna, e indicadores urbanos apilados. Cifras un poco más chicas para que no se encimen. */ html.is-mobile #sec-costo [style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; } html.is-mobile #sec-costo [style*="1fr 1fr"] { grid-template-columns: 1fr !important; gap: 34px !important; } html.is-mobile #sec-costo [style*="font-size: 38px"] { font-size: 25px !important; letter-spacing: -0.01em !important; } html.is-mobile #sec-costo [style*="padding-top: 36px"] { flex-direction: column !important; gap: 16px !important; } html.is-mobile #sec-costo [style*="font-size: 24px"] { font-size: 20px !important; } /* ══ Cabeceras de etapa (todas las páginas) ══ Apilan título y subtítulo en móvil, así el texto lateral no se sale por la derecha (p. ej. "Esqueleto de acero · Retícula flexible"). */ html.is-mobile .reveal[style*="justify-content: space-between"][style*="align-items: flex-end"] { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } /* ══ FOOTER · "siguiente proyecto" en móvil ══ Menos padding lateral y filas apiladas (título → flecha, volver → crédito). */ html.is-mobile footer[data-screen-label="Footer"] { padding-left: 22px !important; padding-right: 22px !important; padding-top: 56px !important; } html.is-mobile footer[data-screen-label="Footer"] [style*="space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; } /* ══════════════════════════════════════════════════════════════ LA ENSEÑANZA · optimización teléfono ══════════════════════════════════════════════════════════════ */ /* Hero: el video va COVER para recortar las barras negras laterales del archivo (la regla global de #sec-inicio lo forzaba a contain → se veían). */ html.is-mobile #sec-inicio video[poster*="hero-ambar"] { object-fit: cover !important; } /* INVESTIGACIÓN */ /* intro en una sola columna */ html.is-mobile #sec-investigacion [style*="gap: 60px"] { flex-direction: column !important; gap: 26px !important; } /* primer diagrama (radar) + columna de leyenda/ficha rosa: caben completos */ html.is-mobile #sec-investigacion [style*="min-width: 440px"], html.is-mobile #sec-investigacion [style*="min-width: 290px"] { min-width: 0 !important; flex-basis: auto !important; width: 100% !important; } html.is-mobile #sec-investigacion #inv-radar { min-height: 0 !important; } /* segundo diagrama (transecto): se elimina en teléfono (se ve muy pequeño) */ html.is-mobile #sec-investigacion .reveal:has(#inv-transect) { display: none !important; } /* INTERVENCIONES: el fondo negro se ajusta al contenido y el render un poco más grande */ html.is-mobile #sec-intervenciones { min-height: 0 !important; padding: 56px 0 40px !important; } html.is-mobile #sec-intervenciones > div:not(#cc-modal) { padding-left: 14px !important; padding-right: 14px !important; } /* Títulos largos de cabecera (Investigación / Visualizaciones) no caben a 48px */ html.is-mobile #sec-investigacion [style*="font-size: 48px"], html.is-mobile #sec-visualizaciones [style*="font-size: 48px"] { font-size: 32px !important; } /* ══════════════════════════════════════════════════════════════ SINGULARITY HOUSE · optimización teléfono ══════════════════════════════════════════════════════════════ */ /* DISTRIBUCIÓN · título (cabecera, ya apila) → fila [texto | isométrico] → renders debajo. Se aplanan los contenedores (display:contents) para poder ordenar texto, isométrico y renders como hermanos dentro de la misma fila flex. */ html.is-mobile #sec-distribucion .dist-main { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 20px 16px !important; } html.is-mobile #sec-distribucion .dist-left { display: contents !important; } html.is-mobile #sec-distribucion .dist-left > sc-if { display: contents !important; } html.is-mobile #sec-distribucion .lv-block { display: contents !important; } html.is-mobile #sec-distribucion .lv-chips { order: 1; flex: 0 0 100% !important; margin-bottom: 4px !important; } html.is-mobile #sec-distribucion .lv-text { display: contents !important; } html.is-mobile #sec-distribucion .lv-copy { order: 2; flex: 1 1 55% !important; min-width: 0 !important; } html.is-mobile #sec-distribucion .dist-iso { order: 3; flex: 0 0 40% !important; position: static !important; } /* etiquetas (círculos) a todo el ancho → fluyen en horizontal */ html.is-mobile #sec-distribucion .lv-tags { order: 4; flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 8px !important; } html.is-mobile #sec-distribucion .lv-renders { order: 5; flex: 0 0 100% !important; margin-top: 6px !important; } /* planos más pequeños → renders más grandes; y se oculta el texto Fig. XX */ html.is-mobile #sec-distribucion .lv-renders > div:first-child { flex: 0 0 96px !important; } html.is-mobile #sec-distribucion .lv-renders [style*="font-size: 7.5px"] { display: none !important; } /* el isométrico ajusta su alto al ancho de su columna (no 74vh) */ html.is-mobile #sec-distribucion .dist-iso-frame { height: auto !important; } /* textos de nivel más pequeños para que quepan junto al isométrico */ html.is-mobile #sec-distribucion .lv-copy [style*="font-size: 36px"] { font-size: 23px !important; margin-bottom: 14px !important; } html.is-mobile #sec-distribucion .lv-copy [style*="font-size: 13px"] { font-size: 12.5px !important; line-height: 1.9 !important; } /* HUERTOS · una sola columna. Bloque 1: texto → 3D. Bloque 2: texto → isométrico */ html.is-mobile #sec-huertos [style*="gap: 60px"] { flex-direction: column !important; gap: 30px !important; } /* ══════════════════════════════════════════════════════════════ PROYECTOS BIM · optimización teléfono ══════════════════════════════════════════════════════════════ */ /* "El modelo se ensambla, capa por capa" (scroll assembly). En teléfono, dentro de la ventana fija se ve SOLO: LISTA de capas (arriba) → INFO (en medio) → IMÁGENES/scroll sequence (abajo). Se ocultan el eyebrow "gemelo digital", el título y el hint; y los pies de imagen (Fig.) de cada info para aprovechar el espacio. */ html.is-mobile #asm-track { padding: 0 22px !important; } /* fila interna → columna, alineada arriba */ html.is-mobile #asm-track [style*="gap: 56px"] { flex-direction: column !important; gap: 14px !important; align-items: stretch !important; } /* columna izquierda (lista) arriba · columna derecha (info+imgs) abajo */ html.is-mobile #asm-track [style*="flex: 0 0 288px"] { flex: none !important; width: 100% !important; order: 1; } html.is-mobile #asm-track [style*="flex: 1"][style*="min-width: 0"] { order: 2; } /* ocultar eyebrow y hint · el título SÍ se ve (compacto) */ html.is-mobile #asm-track [style*="margin-bottom: 16px"], html.is-mobile #asm-track [style*="margin-top: 26px"] { display: none !important; } /* título compacto para que quepan lista + info + imágenes */ html.is-mobile #asm-track [style*="font-size: 32px"] { font-size: 20px !important; margin-bottom: 12px !important; } /* lista compacta */ html.is-mobile #asm-track .asm-item { padding: 8px 2px !important; gap: 12px !important; } html.is-mobile #asm-track .asm-name { font-size: 18px !important; } /* info: la etiqueta mono se apila sobre el texto (nunca desborda) */ html.is-mobile #asm-track .asm-info [style*="gap: 26px"] { flex-direction: column !important; gap: 6px !important; } html.is-mobile #asm-track .asm-info [style*="min-width: 280px"] { min-width: 0 !important; } html.is-mobile #asm-track .asm-info [style*="font-size: 12.5px"] { font-size: 12.5px !important; line-height: 1.9 !important; } /* alto reservado para la info (texto absoluto que hace cross-fade) */ html.is-mobile #asm-track [style*="min-height: 118px"] { min-height: 130px !important; margin-bottom: 12px !important; } /* pies de imagen (Fig. 03 · 0X) fuera */ html.is-mobile #asm-track .asm-info [style*="margin-top: 14px"] { display: none !important; } /* ── Resto de secciones BIM · anti-desbordamiento ── Padding lateral a 22px y cabeceras (48px) más chicas. */ html.is-mobile #sec-coordinacion, html.is-mobile #sec-presupuesto, html.is-mobile #sec-presupuesto-lp, html.is-mobile #sec-renders, html.is-mobile #sec-liverpool { padding-left: 22px !important; padding-right: 22px !important; padding-top: 64px !important; padding-bottom: 64px !important; } html.is-mobile #sec-coordinacion [style*="font-size: 48px"], html.is-mobile #sec-presupuesto [style*="font-size: 48px"], html.is-mobile #sec-presupuesto-lp [style*="font-size: 48px"], html.is-mobile #sec-renders [style*="font-size: 48px"], html.is-mobile #sec-liverpool [style*="font-size: 48px"] { font-size: 32px !important; } /* Filas de dos columnas [texto | imagen/gráficas] → una sola columna. (los contenedores usan gap 60/64px; sus hijos tienen min-width grande que desbordaba el teléfono) */ html.is-mobile #sec-coordinacion .reveal[style*="gap: 64px"], html.is-mobile #sec-presupuesto .reveal[style*="gap: 60px"], html.is-mobile #sec-presupuesto .reveal[style*="gap: 64px"], html.is-mobile #sec-presupuesto-lp .reveal[style*="gap: 60px"], html.is-mobile #sec-presupuesto-lp .reveal[style*="gap: 64px"], html.is-mobile #sec-liverpool .reveal[style*="gap: 60px"] { gap: 30px !important; } html.is-mobile #sec-coordinacion .reveal[style*="gap: 64px"] > div, html.is-mobile #sec-presupuesto .reveal[style*="gap: 60px"] > div, html.is-mobile #sec-presupuesto .reveal[style*="gap: 64px"] > div, html.is-mobile #sec-presupuesto-lp .reveal[style*="gap: 60px"] > div, html.is-mobile #sec-presupuesto-lp .reveal[style*="gap: 64px"] > div, html.is-mobile #sec-liverpool .reveal[style*="gap: 60px"] > div { flex: 1 1 100% !important; min-width: 0 !important; } /* Tablas de 4 columnas (indicadores / capítulos) → 2×2 en teléfono */ html.is-mobile #sec-coordinacion [style*="repeat(4"], html.is-mobile #sec-presupuesto [style*="repeat(4"], html.is-mobile #sec-presupuesto-lp [style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; } /* ── RENDERS · Suburbia Satélite ── mismo formato que las demás páginas en móvil: una sola columna, imágenes apiladas a todo el ancho. */ html.is-mobile #sec-renders [style*="grid-template-columns: 4.3fr 5.7fr"], html.is-mobile #sec-renders [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 20px !important; } /* Fig. 06 usa height:100% (se estira contra su hermano en desktop); sin hermano en móvil colapsaría a 0 → relación de aspecto explícita */ html.is-mobile #sec-renders [style*="flex: 1"][style*="min-height: 0"] { flex: none !important; aspect-ratio: 3/4 !important; } /* ══════════════════════════════════════════════════════════════ TELEBACHILLERATO N.º 19 · optimización teléfono ══════════════════════════════════════════════════════════════ */ /* Hero: título más chico para que "Telebachillerato" no se corte (insets 64px→22px y sello ya los ajustan reglas globales). */ html.is-mobile #sec-inicio [style*="clamp(52px, 7vw, 102px)"] { font-size: clamp(34px, 9.5vw, 40px) !important; } /* Padding lateral 22px en secciones de contenido */ html.is-mobile section[data-screen-label="Ficha"], html.is-mobile #sec-investigacion, html.is-mobile #sec-distribucion { padding-left: 22px !important; padding-right: 22px !important; padding-top: 64px !important; padding-bottom: 64px !important; } /* Cabecera Distribución (48px) más chica (Investigación ya la reduce una regla compartida) */ html.is-mobile #sec-distribucion [style*="font-size: 48px"] { font-size: 32px !important; } /* FICHA · texto arriba, planos/fachada abajo */ html.is-mobile section[data-screen-label="Ficha"] [style*="gap: 80px"] { flex-direction: column !important; gap: 34px !important; } /* INVESTIGACIÓN · columnas con min-width grande (360–460px) desbordaban */ html.is-mobile #sec-investigacion [style*="min-width:"] { min-width: 0 !important; } /* cifras sociodemográficas (min-width:170) → 2 por fila */ html.is-mobile #sec-investigacion [style*="min-width: 170px"] { flex: 1 1 42% !important; } /* filas [gráfica | texto] → una sola columna (asoleamiento, temp+viento, pirámide) */ html.is-mobile #sec-investigacion [style*="gap: 52px"], html.is-mobile #sec-investigacion [style*="gap: 40px"], html.is-mobile #sec-investigacion [style*="gap: 24px"][style*="align-items: stretch"] { flex-direction: column !important; gap: 30px !important; } /* perfiles de habitantes: 4 → 2 columnas */ html.is-mobile #sec-investigacion [style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; } /* DISTRIBUCIÓN */ /* neutralizar min-widths (incluye las tarjetas del modal de cada espacio) */ html.is-mobile #sec-distribucion [style*="min-width:"] { min-width: 0 !important; } /* Render aéreo seleccionable → a todo el ancho de pantalla (máximo tamaño sin recortar, así es más fácil tocar cada espacio) */ html.is-mobile #sec-distribucion #cc-stage { width: 100vw !important; margin-left: -22px !important; } /* Modal de cada espacio: columnas [texto | planos] apiladas y rejilla de 2 imágenes → 1 columna */ html.is-mobile #sec-distribucion #cc-modal [style*="gap: clamp(28px"] { flex-direction: column !important; gap: 26px !important; } html.is-mobile #sec-distribucion #cc-modal [style*="repeat(2"] { grid-template-columns: 1fr !important; } /* ══════════════════════════════════════════════════════════════ SOBRE MÍ (DACC) · optimización teléfono ══════════════════════════════════════════════════════════════ */ /* padding lateral 22px */ html.is-mobile #sec-perfil, html.is-mobile #sec-metodo, html.is-mobile #sec-tools, html.is-mobile #sec-contacto { padding-left: 22px !important; padding-right: 22px !important; } html.is-mobile #sec-perfil { padding-top: 88px !important; padding-bottom: 60px !important; } html.is-mobile #sec-metodo, html.is-mobile #sec-tools, html.is-mobile #sec-contacto { padding-top: 62px !important; padding-bottom: 62px !important; } /* nombre del hero más chico para que "Chávez Camacho" no se corte */ html.is-mobile #sec-perfil [style*="clamp(46px, 6vw, 88px)"] { font-size: clamp(32px, 9vw, 44px) !important; } /* filas de dos columnas → una sola columna */ html.is-mobile #sec-perfil [style*="gap: 76px"], html.is-mobile #sec-perfil [style*="gap: 80px"], html.is-mobile #sec-metodo [style*="gap: 80px"], html.is-mobile #sec-metodo [style*="gap: 72px"], html.is-mobile #sec-contacto [style*="gap: 80px"] { flex-direction: column !important; gap: 30px !important; align-items: stretch !important; } /* retrato: centrado y sin ocupar toda la pantalla de alto */ html.is-mobile #sec-perfil [style*="flex: 0.75"] { align-self: center !important; width: 100% !important; max-width: 300px !important; } /* tarjetas del método (3 col) → apiladas */ html.is-mobile #sec-metodo [style*="gap: 0"] { flex-direction: column !important; } html.is-mobile #sec-metodo [style*="gap: 0"] > div { border-right: none !important; padding: 26px 0 !important; } /* franja de datos (3 col): números más chicos y padding lateral parejo */ html.is-mobile #sec-perfil [style*="gap: 0"] > div { padding-left: 16px !important; } html.is-mobile #sec-perfil [style*="gap: 0"] [style*="font-size: 40px"] { font-size: 28px !important; } /* herramientas: 4 categorías → 2 por fila */ html.is-mobile #sec-tools [style*="gap: 44px"] { flex-wrap: wrap !important; gap: 26px 20px !important; } html.is-mobile #sec-tools [style*="gap: 44px"] > div { flex: 1 1 44% !important; } /* footer (DACC y Logros comparten este) */ html.is-mobile footer[style*="padding: 28px 80px"] { padding-left: 22px !important; padding-right: 22px !important; flex-wrap: wrap !important; gap: 14px !important; } /* ══════════════════════════════════════════════════════════════ LOGROS · optimización teléfono ══════════════════════════════════════════════════════════════ */ html.is-mobile #sec-top { padding-left: 22px !important; padding-right: 22px !important; padding-top: 92px !important; padding-bottom: 56px !important; } html.is-mobile #sec-premios { padding-left: 22px !important; padding-right: 22px !important; padding-top: 60px !important; padding-bottom: 72px !important; } /* hero: título + intro en una columna */ html.is-mobile #sec-top [style*="gap: 60px"] { flex-direction: column !important; gap: 22px !important; align-items: flex-start !important; } /* filas de premio [diploma | texto] → una columna; diploma a ancho completo */ html.is-mobile #sec-premios [style*="gap: 52px"] { flex-direction: column !important; gap: 26px !important; } html.is-mobile #sec-premios [style*="width: 320px"] { width: 100% !important; max-width: 360px !important; } /* ══════════════════════════════════════════════════════════════ TEXTO JUSTIFICADO (todas las páginas · teléfono y computadora) Solo el cuerpo de texto (peso 300 con interlineado de párrafo). Títulos, etiquetas, nav y cifras quedan igual. ══════════════════════════════════════════════════════════════ */ [style*="font-weight: 300"][style*="line-height: 1.6"], [style*="font-weight: 300"][style*="line-height: 1.7"], [style*="font-weight: 300"][style*="line-height: 1.8"], [style*="font-weight: 300"][style*="line-height: 1.9"], [style*="font-weight: 300"][style*="line-height: 2"] { text-align: justify !important; } html.is-mobile #sec-huertos [style*="gap: 60px"][style*="align-items: center"] { flex-direction: column-reverse !important; } html.is-mobile #sec-huertos [style*="gap: 60px"] > div { flex: none !important; width: 100% !important; } html.is-mobile #sec-huertos [style*="min(80vh"] { height: auto !important; } /* ══════════════════════════════════════════════════════════════ BLINDAJE anti-desbordamiento + HÉROES más pequeños y completos ══════════════════════════════════════════════════════════════ */ /* Nada puede exceder el ancho del teléfono */ html.is-mobile [data-mobile-wrap] { overflow-x: clip !important; max-width: 100vw !important; } html.is-mobile section { max-width: 100vw !important; } /* Imágenes/diagramas de contenido que ya llenan su caja no se salen */ html.is-mobile [style*="width: 100%"] > img, html.is-mobile img[style*="width: 100%"], html.is-mobile video[style*="width: 100%"], html.is-mobile canvas[style*="width: 100%"] { max-width: 100% !important; } /* Hero de portada: imagen completa (contain) y más pequeña */ html.is-mobile #sec-inicio[style*="100vh"] { height: 64vh !important; } html.is-mobile #sec-inicio img, html.is-mobile #sec-inicio video { object-fit: contain !important; } /* ══════════════════════════════════════════════════════════════ SELLO de reconocimiento más pequeño en teléfono (todas las páginas que lo usan: Granados, BIM, Telebachillerato — mismo componente) ══════════════════════════════════════════════════════════════ */ html.is-mobile .seal { width: 84px !important; height: 84px !important; top: 62px !important; right: 16px !important; } /* ══════════════════════════════════════════════════════════════ GRANADOS 60 · reflujo vertical por sección (solo teléfono) ══════════════════════════════════════════════════════════════ */ /* Hero: isométrico ligeramente más grande (menos padding alrededor) */ html.is-mobile #sec-inicio img[src*="axonometrico-granados"] { padding: 40px 56px 92px !important; } /* ── ESTRUCTURA: formato vertical (imagen arriba, texto abajo) y SOLO el primer diagrama; se ocultan los otros dos, las flechas y el contador ── */ html.is-mobile #sec-estructura #estr-viewport { aspect-ratio: auto !important; height: auto !important; } html.is-mobile #sec-estructura .estr-slide.active { position: relative !important; opacity: 1 !important; pointer-events: auto !important; padding: 0 !important; } html.is-mobile #sec-estructura .estr-slide.active > div { flex-direction: column !important; gap: 26px !important; align-items: stretch !important; } html.is-mobile #sec-estructura .estr-slide.active > div > div:first-child { flex: none !important; width: 100% !important; } /* diagramas 02 y 03, flechas, hint y contador fuera en móvil */ html.is-mobile #sec-estructura .estr-slide.active ~ .estr-slide, html.is-mobile #sec-estructura #estr-prev, html.is-mobile #sec-estructura #estr-next, html.is-mobile #sec-estructura #estr-next-hint, html.is-mobile #sec-estructura #estr-counter { display: none !important; } /* ── PIEL: formato vertical (información arriba, modelo 3D abajo) ── */ html.is-mobile #sec-piel [style*="gap: 72px"] { flex-direction: column !important; gap: 30px !important; align-items: stretch !important; } html.is-mobile #sec-piel [style*="gap: 72px"] > div { flex: none !important; width: 100% !important; } /* ══ AVISO DE PROPIEDAD INTELECTUAL · franja legal bajo el footer ══ */ html.is-mobile .legal-strip { padding: 18px 22px !important; } html.is-mobile .legal-strip > div:last-child { max-width: 100% !important; } /* ══ VISORES "AMPLIAR" en móvil · flecha mínima en el subtono de cada página ══ Solo el chevron: sin disco, sin marco, sin blur. Toma el color de acento de la página (--lb-accent, declarado en el