/* ============================================================ APPWEB PERSONAL — Daniel Esteban GM Estilo: home screen tipo iOS + subpáginas estilo página de producto de Apple, sobre fondo grafito de marca. Todas las clases llevan prefijo .appweb- para no chocar con el CSS de ningún tema de WordPress. ============================================================ */ :root { /* Base */ --bg-primary: #323347; /* gris grafito oscuro — fondo general (no negro puro) */ --bg-deep: #000000; /* negro — acento de profundidad puntual, no fondo base */ --surface-glass: rgba(255, 255, 255, 0.08); /* frost claro sobre el grafito, efecto vidrio */ --border-glass: rgba(255, 255, 255, 0.12); /* Texto */ --text-primary: #FFFFFF; --text-secondary: rgba(255, 255, 255, 0.65); /* Acentos */ --accent-primary: #F20505; --accent-blue: #084DA6; --accent-blue-light: #35AAF2; --accent-yellow: #F2E205; --accent-green: #03A64A; /* Tipografía */ --font-display: 'Anton', sans-serif; --font-body: 'Poppins', sans-serif; } /* ============================================================ RAÍZ DE LA APPWEB Todo vive dentro de .appweb-root, de modo que el mismo CSS funciona en el index.html local y dentro de WordPress sin depender de estilos sobre . ============================================================ */ .appweb-root, .appweb-root *, .appweb-root *::before, .appweb-root *::after { box-sizing: border-box; margin: 0; padding: 0; } .appweb-root { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; } /* Fondo fotográfico (logo en neón) con velo grafito de marca encima: mantiene contraste y evita que compita con los iconos. position:fixed en ::before (no background-attachment) porque iOS no soporta fixed + cover con fluidez. */ .appweb-root::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(50, 51, 71, 0.55), rgba(50, 51, 71, 0.82)), url("img/fondo.jpg") center / cover no-repeat; } .appweb-root img, .appweb-root svg { max-width: 100%; display: block; } .appweb-root a { color: inherit; text-decoration: none; } .appweb-root :focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 3px; border-radius: 6px; } /* Oculto accesible (para textos solo-lector-de-pantalla) */ .appweb-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ============================================================ VISTAS (SPA): solo una visible a la vez ============================================================ */ .appweb-view { display: none; min-height: 100vh; min-height: 100dvh; } .appweb-view.is-active { display: block; animation: appweb-open 260ms ease-out both; } /* La home centra su contenido con flex: debe ganar al display:block genérico de .is-active para verse ordenada desde el primer segundo */ .appweb-home.is-active { display: flex; } @keyframes appweb-open { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } /* ============================================================ HOME — grid de iconos tipo home screen de iPhone ============================================================ */ /* OJO: sin "display" aquí. El display de la home lo gobiernan .appweb-view (none) y .appweb-home.is-active (flex); si esta regla declarara display:flex, al ir después de .appweb-view ganaría siempre y la home quedaría visible sobre cada subpágina. */ .appweb-home { flex-direction: column; align-items: center; justify-content: center; padding: clamp(24px, 6vh, 64px) 20px; gap: clamp(28px, 6vh, 56px); } /* Identidad: foto + nombre, arriba de la home */ .appweb-identity { display: flex; flex-direction: column; align-items: center; gap: 16px; } .appweb-avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; /* encuadra el rostro del retrato vertical */ padding: 4px; /* anillo de vidrio alrededor de la foto */ background: var(--surface-glass); border: 1px solid var(--border-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); } .appweb-monogram { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.12em; text-indent: 0.12em; /* compensa el letter-spacing final para centrar */ color: rgba(255, 255, 255, 0.92); text-transform: uppercase; font-weight: 400; user-select: none; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } .appweb-subtitle { margin-top: -4px; /* pegado al título, como una sola pieza */ font-family: var(--font-body); font-weight: 400; font-size: 0.95rem; line-height: 1.5; color: var(--text-secondary); text-align: center; max-width: 30ch; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } .appweb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 5vw, 32px) clamp(14px, 4vw, 26px); width: 100%; max-width: 340px; list-style: none; justify-items: center; } /* Si la última fila queda con un solo icono, se centra en la columna del medio para mantener la simetría */ .appweb-grid li:nth-child(3n + 1):last-child { grid-column: 2; } .appweb-app { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 44px; -webkit-tap-highlight-color: transparent; } /* La "baldosa" de vidrio del icono — estilo Liquid Glass (iOS 26 / iPhone 17 Pro): vidrio en capas con brillo especular arriba, sombra interior abajo y saturación del fondo tras el cristal. */ .appweb-app-tile { position: relative; overflow: hidden; width: 100%; max-width: 76px; aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 24%; background: linear-gradient( 155deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 40%, rgba(255, 255, 255, 0.03) 68%, rgba(255, 255, 255, 0.12) 100% ); border: 1px solid rgba(255, 255, 255, 0.20); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -8px 14px rgba(0, 0, 0, 0.22); color: rgba(255, 255, 255, 0.92); /* símbolo blanco "iluminado" */ transition: transform 160ms ease, filter 160ms ease; } /* Reflejo especular superior, como luz cayendo sobre el cristal */ .appweb-app-tile::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(130% 75% at 50% -25%, rgba(255, 255, 255, 0.28), transparent 55%); pointer-events: none; } .appweb-app-tile svg { width: 46%; height: 46%; stroke-width: 1.9; /* halo suave: el trazo blanco parece retroiluminado tras el vidrio */ filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } .appweb-app:hover .appweb-app-tile { filter: brightness(1.18); } /* Feedback táctil tipo iOS */ .appweb-app:active .appweb-app-tile { transform: scale(0.95); } .appweb-app-label { font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.92); text-align: center; line-height: 1.25; } /* ============================================================ SUBPÁGINAS — modelo "página de producto de Apple" ============================================================ */ .appweb-page { position: relative; /* Aire inferior para que el menú del final no quede tapado por el dock flotante */ padding: 48px 24px 120px; } .appweb-page-inner { max-width: 720px; margin: 0 auto; } /* La navegación de vuelta al inicio vive en el dock inferior (icono de casa), como una barra de apps de iOS. */ /* Bloques: una idea por pantalla, tipografía protagonista */ .appweb-block { min-height: 42vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: clamp(40px, 10vh, 96px) 0; } .appweb-block--hero { min-height: 62vh; } .appweb-block--center { align-items: center; text-align: center; } /* Panel de profundidad: aquí sí entra el negro de marca */ .appweb-block--deep { background: var(--bg-deep); border-radius: 28px; padding: clamp(40px, 8vh, 80px) clamp(24px, 6vw, 64px); margin: 24px 0; } .appweb-kicker { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-primary); } .appweb-h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 9vw, 4.8rem); line-height: 1.02; letter-spacing: 0.01em; color: var(--text-primary); } .appweb-h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.9rem, 6vw, 3.2rem); line-height: 1.05; color: var(--text-primary); } .appweb-lead { font-family: var(--font-body); font-weight: 400; font-size: clamp(1.05rem, 2.6vw, 1.3rem); color: var(--text-secondary); max-width: 34ch; } .appweb-block--center .appweb-lead { margin-inline: auto; } /* Cifra protagonista (un dato por bloque) */ .appweb-stat { font-family: var(--font-display); font-size: clamp(4rem, 16vw, 8rem); line-height: 1; color: var(--accent-primary); } /* Marcador visual de placeholder — se elimina al meter copy real */ .appweb-placeholder { border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 12px; padding: 4px 12px; color: var(--text-secondary); font-style: italic; } /* Tarjeta de proyecto / entrada de blog */ .appweb-card { width: 100%; border: 1px solid var(--border-glass); border-radius: 24px; background: var(--surface-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.30), inset 0 1px 1px rgba(255, 255, 255, 0.22); padding: clamp(24px, 5vw, 40px); display: flex; flex-direction: column; gap: 10px; } .appweb-card-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.4rem, 4.5vw, 2rem); line-height: 1.1; } .appweb-card p { color: var(--text-secondary); font-size: 0.95rem; } /* CTA principal */ .appweb-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 32px; border: none; border-radius: 999px; background: var(--accent-primary); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 1rem; cursor: pointer; transition: transform 160ms ease, filter 160ms ease; } .appweb-cta:hover { filter: brightness(1.12); } .appweb-cta:active { transform: scale(0.95); } /* CTA secundaria (vidrio) */ .appweb-cta--ghost { background: var(--surface-glass); border: 1px solid var(--border-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ============================================================ REVELADO PROGRESIVO AL SCROLL (estilo Apple) ============================================================ */ .appweb-reveal { opacity: 0; transform: translateY(26px); transition: opacity 650ms ease, transform 650ms ease; } .appweb-reveal.is-visible { opacity: 1; transform: none; } /* ============================================================ DOCK FLOTANTE — inicio, WhatsApp y correo siempre a mano en las subpáginas. No repite las aplicaciones: para eso está el menú del final del contenido. ============================================================ */ .appweb-dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 50; display: none; gap: 6px; padding: 8px; border-radius: 999px; background: var(--surface-glass); border: 1px solid var(--border-glass); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.25); } .appweb-root.is-subpage .appweb-dock { display: flex; } .appweb-dock a, .appweb-dock button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; background: none; cursor: pointer; color: rgba(255, 255, 255, 0.9); transition: transform 160ms ease, background-color 160ms ease; } .appweb-dock a:hover, .appweb-dock button:hover { background: rgba(255, 255, 255, 0.10); } .appweb-dock a:active, .appweb-dock button:active { transform: scale(0.95); } .appweb-dock svg { width: 22px; height: 22px; } /* ============================================================ NAVEGACIÓN AL PIE DE CADA SUBPÁGINA Primero la información; al final, los iconos para seguir navegando (otras secciones, inicio, WhatsApp, correo). La genera buildPageNav() en script.js. ============================================================ */ .appweb-page-nav { margin-top: clamp(48px, 12vh, 110px); display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; } /* El menú del final se revela con animación al acercarse el scroll; mientras está oculto no es clicable — hay que llegar hasta él para abrir nuevas aplicaciones. */ .appweb-page-nav.appweb-reveal { pointer-events: none; } .appweb-page-nav.appweb-reveal.is-visible { pointer-events: auto; } .appweb-grid--nav { max-width: 320px; } .appweb-grid--nav .appweb-app-tile { max-width: 64px; } .appweb-grid--nav .appweb-app-label { font-size: 0.7rem; } /* Los items de la nav pueden ser