/* KBLE — Dashboard "Enchúfate" (16/08/2026, ver kable.md). Sistema visual PROPIO, deliberadamente distinto al resto del sitio: acá el fondo dominante es CREMA (no navy) — es el sistema del feed de Instagram documentado en KBLE-BIBLIA-INSTAGRAM-2026.md, Parte 1, no una regresión del rediseño 2026 de la web. Dark mode: NO, a propósito (misma Parte 1 — "se queda siempre crema, es la vibra de la marca"). Tokens propios (no los de sitio/css/tokens.css, que son del sistema navy-dominante de la landing) — un solo bloque :root, nunca hex sueltos fuera de acá. */ @font-face { font-family:'Cabinet Grotesk'; src:url('../assets/fonts/CabinetGrotesk-Extrabold.woff2') format('woff2'); font-weight:800; font-display:swap; } @font-face { font-family:'Cabinet Grotesk'; src:url('../assets/fonts/CabinetGrotesk-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; } @font-face { font-family:'Cabinet Grotesk'; src:url('../assets/fonts/CabinetGrotesk-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face { font-family:'Satoshi'; src:url('../assets/fonts/Satoshi-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Satoshi'; src:url('../assets/fonts/Satoshi-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face { font-family:'Satoshi'; src:url('../assets/fonts/Satoshi-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; } :root { /* Paleta — Biblia Parte 3, hex exactos */ --crema: #EDECEB; --navy: #283771; --azul-medio: #4D7CBB; --tan: #CCBE9B; --casi-negro: #2B2B2A; /* Módulos — Biblia Parte 3 */ --m-cupones: #E8823C; --m-tutorias: #8B5FBF; --m-marketplace: #3FA35E; --m-mapas: #4A90D9; --m-seguridad: #D64545; /* Espaciado — escala 4px, coherente con el resto del proyecto */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem; --s-32: 8rem; --r-card: 24px; /* "cards con border-radius 24px" — decisión de diseño explícita */ --sombra-card: 0 12px 32px rgba(40, 55, 113, 0.08); /* "sombra sutil blur 24 rgba navy 8%" */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } img, svg { max-width: 100%; display: block; } button, input { font: inherit; color: inherit; } a { color: inherit; } ul { list-style: none; } body { background: var(--crema); color: var(--navy); font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; /* overflow-x:hidden en solo no basta en todos los motores — el scroll horizontal interno de .dias-scroll (intencional, la tira de cards del cronograma) se filtraba a document.documentElement. scrollWidth aunque no se viera ningún scrollbar real. Bug real encontrado verificando con Chrome, no cosmético: el chequeo estándar de "sin overflow horizontal" de este proyecto usa exactamente esa medición. */ overflow-x: hidden; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; } *:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 3px; } /* ---------- Tipografía base ---------- */ .eyebrow { font-family: 'Satoshi', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--azul-medio); margin-bottom: var(--s-2); } .titulo-seccion { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800; font-size: clamp(1.75rem, 6vw, 2.75rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--navy); margin-bottom: var(--s-3); } .subtitulo-seccion { font-family: 'Satoshi', sans-serif; font-size: 1rem; color: color-mix(in srgb, var(--navy) 65%, transparent); max-width: 46ch; margin-bottom: var(--s-8); } .titulo-mini { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; font-size: 1.125rem; margin: var(--s-8) 0 var(--s-4); } section { padding: var(--s-24) var(--s-6); max-width: 74rem; margin: 0 auto; } /* ---------- Nav mínimo ---------- */ .nav { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-6); border-bottom: 1px solid color-mix(in srgb, var(--navy) 10%, transparent); position: sticky; top: 0; background: color-mix(in srgb, var(--crema) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 50; } .nav__marca { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; font-size: 0.95rem; } .nav__marca-sep { opacity: 0.4; font-weight: 400; } .nav__version { font-size: 0.75rem; color: color-mix(in srgb, var(--navy) 50%, transparent); } /* ---------- 1. Hero ---------- */ .hero { position: relative; text-align: center; padding: var(--s-32) var(--s-6) var(--s-16); overflow: hidden; } .hero__cable { position: absolute; top: 10%; left: 0; width: 100%; height: auto; color: var(--azul-medio); opacity: 0.5; pointer-events: none; } .hero__cable-path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; } .hero__eyebrow { position: relative; z-index: 1; justify-content: center; display: flex; } .hero__titulo { position: relative; z-index: 1; font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800; font-size: clamp(3rem, 16vw, 8rem); line-height: 0.9; letter-spacing: -0.02em; color: var(--navy); margin: var(--s-2) 0 var(--s-4); } .hero__subtitulo { position: relative; z-index: 1; max-width: 34ch; margin: 0 auto var(--s-12); font-size: 1.0625rem; color: color-mix(in srgb, var(--navy) 70%, transparent); } .contador { position: relative; z-index: 1; display: flex; justify-content: center; gap: var(--s-4); margin-bottom: var(--s-3); } .contador__pieza { display: flex; flex-direction: column; align-items: center; min-width: 3.5rem; } .contador__numero { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800; font-size: clamp(1.75rem, 6vw, 2.75rem); font-variant-numeric: tabular-nums; color: var(--navy); line-height: 1; } .contador__etiqueta { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--navy) 55%, transparent); margin-top: var(--s-1); } .contador__meta { position: relative; z-index: 1; font-size: 0.8125rem; color: color-mix(in srgb, var(--navy) 55%, transparent); margin-bottom: var(--s-16); } .hero__scroll { position: relative; z-index: 1; display: inline-block; font-size: 0.875rem; font-weight: 700; color: var(--azul-medio); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } /* ---------- 2. Objetivo y métrica ---------- */ .objetivo { text-align: center; } .objetivo__cifra { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800; font-size: clamp(3.5rem, 14vw, 7rem); line-height: 0.95; color: var(--navy); margin: var(--s-2) 0 var(--s-4); } .objetivo__cifra-unidad { display: block; font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: 500; color: var(--azul-medio); margin-top: var(--s-2); } .objetivo__nota { max-width: 42ch; margin: 0 auto var(--s-16); color: color-mix(in srgb, var(--navy) 65%, transparent); } .timeline { display: flex; flex-direction: column; gap: var(--s-6); max-width: 32rem; margin: 0 auto; text-align: left; } @media (min-width: 768px) { .timeline { flex-direction: row; align-items: stretch; max-width: none; text-align: center; } } .timeline__hito { background: #fff; border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; } .timeline__hito--pico { background: var(--navy); color: var(--crema); } .timeline__etiqueta { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--azul-medio); } .timeline__hito--pico .timeline__etiqueta { color: var(--tan); } .timeline__valor { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; font-size: 1.375rem; } .timeline__valor small { display: block; font-family: 'Satoshi', sans-serif; font-weight: 400; font-size: 0.75rem; opacity: 0.7; } .timeline__valor--editable { display: flex; flex-direction: column; } .timeline__linea { width: 2px; align-self: center; flex: 0 0 var(--s-6); background: color-mix(in srgb, var(--navy) 15%, transparent); } @media (min-width: 768px) { .timeline__linea { width: auto; flex: 0 0 2px; height: auto; align-self: stretch; } } .input-inline { border: 1px solid color-mix(in srgb, var(--navy) 20%, transparent); border-radius: 8px; padding: var(--s-1) var(--s-2); font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; font-size: 1.125rem; width: 8ch; background: var(--crema); color: var(--navy); } /* ---------- 3. Cronograma ---------- */ .cronograma { text-align: center; } .cronograma .subtitulo-seccion { margin-left: auto; margin-right: auto; } .dias-scroll { display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--s-4); margin: 0 calc(var(--s-6) * -1); padding-left: var(--s-6); padding-right: var(--s-6); text-align: left; -webkit-overflow-scrolling: touch; } @media (min-width: 1100px) { .dias-scroll { flex-wrap: wrap; justify-content: center; overflow-x: visible; margin: 0; padding: 0; } } .dia-card { scroll-snap-align: start; flex: 0 0 82vw; max-width: 22rem; background: #fff; border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: var(--s-6); border: 2px solid transparent; } @media (min-width: 640px) { .dia-card { flex-basis: 20rem; } } @media (min-width: 1100px) { .dia-card { flex: 0 0 21rem; } } .dia-card--hoy { border-color: var(--azul-medio); box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul-medio) 15%, transparent), var(--sombra-card); } .dia-card__hoy-tag { display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: var(--azul-medio); border-radius: 999px; padding: 2px 10px; margin-bottom: var(--s-2); } .dia-card__dia { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--navy); } .dia-card__fecha { font-size: 0.8125rem; color: color-mix(in srgb, var(--navy) 55%, transparent); margin-bottom: var(--s-2); } .dia-card__fase { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--azul-medio); background: color-mix(in srgb, var(--azul-medio) 12%, transparent); border-radius: 999px; padding: 3px 12px; margin-bottom: var(--s-4); } .pieza { display: block; width: 100%; text-align: left; background: var(--crema); border: none; border-radius: 14px; padding: var(--s-3); margin-bottom: var(--s-2); cursor: pointer; display: flex; align-items: center; gap: var(--s-3); transition: transform 0.15s ease, background 0.15s ease; } @media (hover: hover) { .pieza:hover { background: color-mix(in srgb, var(--azul-medio) 10%, var(--crema)); transform: translateX(2px); } } .pieza__mood { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; background: var(--mood-color, var(--navy)); } .pieza__cuerpo { min-width: 0; flex: 1; } .pieza__hora { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; font-size: 0.75rem; color: color-mix(in srgb, var(--navy) 55%, transparent); } .pieza__tipo { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--azul-medio); } .pieza__titulo { font-size: 0.875rem; font-weight: 500; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pieza__flecha { color: color-mix(in srgb, var(--navy) 30%, transparent); flex-shrink: 0; } /* ---------- Modal ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(43, 43, 42, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; z-index: 200; opacity: 0; transition: opacity 0.25s ease; } @media (min-width: 640px) { .modal-overlay { align-items: center; padding: var(--s-6); } } .modal-overlay[data-abierto="true"] { opacity: 1; } .modal-overlay[hidden] { display: none; } .modal { background: var(--crema); border-radius: var(--r-card) var(--r-card) 0 0; max-width: 34rem; width: 100%; max-height: 85vh; overflow-y: auto; padding: var(--s-8) var(--s-6); position: relative; transform: translateY(24px); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 640px) { .modal { border-radius: var(--r-card); transform: translateY(12px) scale(0.98); } } .modal-overlay[data-abierto="true"] .modal { transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { .modal-overlay, .modal { transition: none; } } .modal__cerrar { position: absolute; top: var(--s-4); right: var(--s-4); width: 32px; height: 32px; border-radius: 999px; border: none; background: color-mix(in srgb, var(--navy) 8%, transparent); color: var(--navy); font-size: 1rem; cursor: pointer; } .modal__mood-tag { display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; background: var(--mood-color, var(--navy)); border-radius: 999px; padding: 3px 10px; margin-bottom: var(--s-3); } .modal__titulo { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800; font-size: 1.5rem; margin-bottom: var(--s-2); } .modal__meta { display: flex; gap: var(--s-4); font-size: 0.8125rem; color: color-mix(in srgb, var(--navy) 60%, transparent); margin-bottom: var(--s-6); flex-wrap: wrap; } .modal__meta strong { color: var(--navy); } .modal__seccion { margin-bottom: var(--s-6); } .modal__seccion h4 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--azul-medio); margin-bottom: var(--s-2); } .modal__seccion p { font-size: 0.9375rem; } .modal__pendiente { font-style: italic; color: color-mix(in srgb, var(--navy) 45%, transparent); } .modal__prompt { background: var(--navy); color: var(--crema); border-radius: 14px; padding: var(--s-4); font-family: monospace; font-size: 0.8125rem; white-space: pre-wrap; max-height: 12rem; overflow-y: auto; margin-bottom: var(--s-2); } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); border: none; border-radius: 999px; padding: 10px 20px; font-family: 'Satoshi', sans-serif; font-weight: 700; font-size: 0.875rem; cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease; } @media (hover: hover) { .btn:hover { transform: translateY(-1px); filter: brightness(0.95); } } .btn--acento { background: var(--azul-medio); color: #fff; } .btn--fantasma { background: color-mix(in srgb, var(--navy) 8%, transparent); color: var(--navy); } .btn[data-copiado="true"] { background: var(--m-marketplace); color: #fff; } /* ---------- 4. Sistema visual ---------- */ .paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--s-3); margin-bottom: var(--s-8); } .paleta--modulos { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); } .swatch { background: var(--c); border-radius: 16px; padding: var(--s-4) var(--s-3); display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1; font-size: 0.8125rem; } .swatch--chico { aspect-ratio: 4/3; } .swatch span { font-weight: 700; } .swatch code { font-size: 0.75rem; opacity: 0.85; } .tipo-muestras { display: flex; flex-direction: column; gap: var(--s-6); margin-bottom: var(--s-4); } .tipo-muestra__ejemplo { color: var(--navy); } .tipo-muestra__ejemplo--xb { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800; font-size: clamp(2rem, 6vw, 3rem); line-height: 1; } .tipo-muestra__ejemplo--reg { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 500; font-size: clamp(1.25rem, 4vw, 1.75rem); } .tipo-muestra__ejemplo--body { font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 1.125rem; } .tipo-muestra__ejemplo--cita { font-family: 'Satoshi', sans-serif; font-style: italic; font-weight: 500; font-size: 1.25rem; } .tipo-muestra__etiqueta { font-size: 0.75rem; color: color-mix(in srgb, var(--navy) 55%, transparent); margin-top: var(--s-1); } .atomos { display: grid; grid-template-columns: 1fr; gap: var(--s-4); } @media (min-width: 640px) { .atomos { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .atomos { grid-template-columns: repeat(5, 1fr); } } .atomo { background: #fff; border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: var(--s-4); } .atomo__mini { width: 100%; aspect-ratio: 1; border-radius: 14px; background: var(--crema); margin-bottom: var(--s-3); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .atomo__mini--cable { color: var(--navy); } .atomo__mini--cable svg { width: 40%; height: 40%; } .atomo__mini--halftone { background-image: radial-gradient(color-mix(in srgb, var(--navy) 70%, transparent) 22%, transparent 23%); background-size: 10px 10px; background-color: var(--tan); } .atomo__mini--screenshot { background: var(--navy); flex-direction: column; gap: 4px; padding: var(--s-4); align-items: stretch; } .atomo__mini--screenshot span { display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--crema) 70%, transparent); } .atomo__mini--screenshot span:nth-child(2) { width: 60%; } .atomo__mini--brutalist { background: var(--navy); color: var(--crema); font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800; font-size: 1.75rem; } .atomo__mini--tape { background: var(--crema); } .atomo__mini--tape span { position: absolute; width: 70%; height: 22%; background: color-mix(in srgb, var(--tan) 80%, transparent); top: 40%; left: 15%; transform: rotate(-6deg); box-shadow: var(--sombra-card); } .atomo__nombre { font-weight: 700; font-size: 0.9375rem; margin-bottom: var(--s-1); } .atomo__desc { font-size: 0.8125rem; color: color-mix(in srgb, var(--navy) 60%, transparent); } .prohibido { margin-top: var(--s-8); background: #fff; border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: var(--s-4) var(--s-6); } .prohibido summary { font-weight: 700; cursor: pointer; } .prohibido ul { margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); } .prohibido li { font-size: 0.9375rem; padding-left: var(--s-4); position: relative; } .prohibido li::before { content: '✕'; position: absolute; left: 0; color: var(--m-seguridad); font-weight: 700; } /* ---------- 5. Moods ---------- */ .moods__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); } @media (min-width: 700px) { .moods__grid { grid-template-columns: repeat(2, 1fr); } } .mood-card { background: #fff; border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: var(--s-6); border-top: 4px solid var(--mood-color); } .mood-card--utilitario { --mood-color: var(--azul-medio); } .mood-card--emocional { --mood-color: var(--m-cupones); } .mood-card--testimonial { --mood-color: var(--m-tutorias); } .mood-card--hito { --mood-color: var(--navy); } .mood-card__numero { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--mood-color); color: #fff; font-weight: 700; font-size: 0.875rem; margin-bottom: var(--s-3); } .mood-card__nombre { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; font-size: 1.25rem; } .mood-card__cuando { color: var(--mood-color); font-weight: 700; font-size: 0.875rem; margin-bottom: var(--s-3); } .mood-card__desc { font-size: 0.9375rem; margin-bottom: var(--s-3); } .mood-card__ejemplo { font-size: 0.8125rem; font-style: italic; color: color-mix(in srgb, var(--navy) 55%, transparent); } .moods__regla { margin-top: var(--s-8); font-size: 0.9375rem; text-align: center; color: color-mix(in srgb, var(--navy) 65%, transparent); } /* ---------- 6. Herramientas ---------- */ .herramientas__lista { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-16); } .herramienta { background: #fff; border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: var(--s-4) var(--s-6); display: flex; align-items: center; gap: var(--s-4); } .herramienta__logo { width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: var(--crema); display: flex; align-items: center; justify-content: center; font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800; font-size: 1rem; flex-shrink: 0; } .herramienta__cuerpo { flex: 1; min-width: 0; } .herramienta__nombre { font-weight: 700; font-size: 1rem; } .herramienta__nombre a { color: var(--azul-medio); text-decoration: underline; text-underline-offset: 2px; } .herramienta__tier { font-size: 0.75rem; font-weight: 700; color: var(--azul-medio); text-transform: uppercase; letter-spacing: 0.04em; } .herramienta__desc { font-size: 0.875rem; color: color-mix(in srgb, var(--navy) 65%, transparent); margin-top: 2px; } .tabla-presupuesto { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sombra-card); font-size: 0.875rem; } .tabla-presupuesto th, .tabla-presupuesto td { text-align: left; padding: var(--s-3) var(--s-4); } .tabla-presupuesto thead { background: var(--navy); color: var(--crema); } .tabla-presupuesto tbody tr:nth-child(even) { background: var(--crema); } .tabla-presupuesto tfoot { background: color-mix(in srgb, var(--azul-medio) 12%, transparent); font-weight: 700; } /* ---------- 7. Prompts ---------- */ .acordeon { display: flex; flex-direction: column; gap: var(--s-3); } .acordeon-item { background: #fff; border-radius: var(--r-card); box-shadow: var(--sombra-card); overflow: hidden; } .acordeon-item__cabecera { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-6); background: none; border: none; text-align: left; cursor: pointer; font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; font-size: 1rem; color: var(--navy); } .acordeon-item__flecha { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); flex-shrink: 0; } .acordeon-item[data-abierto="true"] .acordeon-item__flecha { transform: rotate(180deg); } .acordeon-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; } .acordeon-item[data-abierto="true"] .acordeon-item__panel { grid-template-rows: 1fr; } .acordeon-item__panel-inner { overflow: hidden; } .acordeon-item__cuerpo { padding: 0 var(--s-6) var(--s-6); } .acordeon-item__pre { background: var(--navy); color: var(--crema); border-radius: 14px; padding: var(--s-4); font-family: monospace; font-size: 0.8125rem; white-space: pre-wrap; margin-bottom: var(--s-3); } @media (prefers-reduced-motion: reduce) { .acordeon-item__panel, .acordeon-item__flecha { transition: none; } } /* ---------- 8. División de trabajo ---------- */ .trabajo__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); } @media (min-width: 900px) { .trabajo__grid { grid-template-columns: repeat(3, 1fr); } } .persona-card { background: #fff; border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: var(--s-6); } .persona-card__nombre { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; font-size: 1.25rem; margin-bottom: var(--s-4); } .checklist { display: flex; flex-direction: column; gap: var(--s-3); } .checklist label { display: flex; align-items: flex-start; gap: var(--s-3); font-size: 0.9375rem; cursor: pointer; } .checklist input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--azul-medio); margin-top: 1px; } .checklist label:has(input:checked) span { text-decoration: line-through; opacity: 0.5; } /* ---------- 9. Métricas ---------- */ .metricas__bloque { margin-bottom: var(--s-16); } .form-metrica { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); } .form-metrica input { border: 1px solid color-mix(in srgb, var(--navy) 20%, transparent); border-radius: 12px; padding: var(--s-3); background: #fff; font-size: 0.9375rem; } .lista-registros { display: flex; flex-direction: column; gap: var(--s-2); } .lista-registros li { background: #fff; border-radius: 12px; padding: var(--s-3) var(--s-4); display: flex; justify-content: space-between; font-size: 0.9375rem; box-shadow: var(--sombra-card); } .lista-registros li strong { color: var(--azul-medio); } .lista-registros__vacio { color: color-mix(in srgb, var(--navy) 45%, transparent); font-style: italic; font-size: 0.9375rem; } .utms, .qrs { display: flex; flex-direction: column; gap: var(--s-3); } .utm-item, .qr-item { background: #fff; border-radius: var(--r-card); box-shadow: var(--sombra-card); padding: var(--s-4) var(--s-6); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; } .utm-item__dia, .qr-item__nombre { font-weight: 700; min-width: 6rem; } .utm-item__input { flex: 1; min-width: 12rem; border: 1px solid color-mix(in srgb, var(--navy) 20%, transparent); border-radius: 10px; padding: var(--s-2) var(--s-3); font-size: 0.875rem; background: var(--crema); } .qr-item__destino { flex: 1; min-width: 10rem; font-size: 0.875rem; color: color-mix(in srgb, var(--navy) 65%, transparent); } /* ---------- 10. Footer ---------- */ .footer-plan { position: relative; background: var(--navy); color: var(--crema); text-align: center; padding: var(--s-16) var(--s-6) var(--s-8); overflow: hidden; } .footer-plan__cable { position: absolute; bottom: 10%; left: 0; width: 100%; height: auto; color: var(--tan); opacity: 0.4; pointer-events: none; } .footer-plan__cable-path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; } .footer-plan__texto { position: relative; z-index: 1; font-size: 0.875rem; color: color-mix(in srgb, var(--crema) 70%, transparent); } /* ---------- Reveal genérico al entrar en viewport ---------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal[data-visible="true"] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1; transform: none; } }