/* ==========================================================================   Portafolio eSaico — landing autocontenido   Paleta derivada del púrpura de marca #6F2BDC:   tinta #1C1230 · lavanda #EDE6FA · lavanda media #B69CF0 · neutro #F7F5FA   Tipografía: Bricolage Grotesque (display) · Instrument Sans (texto)   · JetBrains Mono (métricas y firma técnica)   ========================================================================== */.esaico-portfolio {    --pf-purple: #6F2BDC;    --pf-purple-deep: #5a1fbf;    --pf-purple-soft: #a684ee;    --pf-magenta: #e91e77;    /* Tema oscuro: --pf-ink pasa a ser el color de TEXTO principal       (claro sobre fondo oscuro). --pf-deep es el literal oscuro fijo       para fondos que deben quedarse oscuros pase lo que pase con --pf-ink. */    --pf-deep: #120a24;    --pf-ink: #f3effa;    --pf-ink-2: #241740;    --pf-ink-soft: #ab9fc9;    --pf-lavender: #ede6fa;    --pf-lavender-mid: #b69cf0;    --pf-bg: var(--pf-deep);    --pf-surface: #1c1230;    --pf-line: rgba(255, 255, 255, 0.1);    --pf-line-dark: rgba(182, 156, 240, 0.24);    --pf-text-on-dark: #d9d2ea;    --pf-font-display: "Bricolage Grotesque", "Instrument Sans", sans-serif;    --pf-font-body: "Instrument Sans", system-ui, sans-serif;    --pf-font-mono: "JetBrains Mono", ui-monospace, monospace;    --pf-radius: 18px;    --pf-radius-sm: 12px;    /* Sombra oscura pura: una sombra "tinta" quedaría invisible sobre un       fondo ya oscuro, así que la profundidad aquí es negro real + halo       púrpura sutil para que las tarjetas se despeguen del fondo. */    --pf-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);    --pf-shadow-purple: 0 12px 36px -10px rgba(111, 43, 220, 0.5);    --pf-ease: cubic-bezier(0.22, 1, 0.36, 1);    margin: 0;    background: var(--pf-bg);    color: var(--pf-ink);    font-family: var(--pf-font-body);    font-size: 17px;    line-height: 1.6;    -webkit-font-smoothing: antialiased;    scroll-behavior: smooth;}:where(.esaico-portfolio) *,:where(.esaico-portfolio) *::before,:where(.esaico-portfolio) *::after {    box-sizing: border-box;}/* * Reset base envuelto en :where() a propósito: :where() siempre aporta * especificidad 0. Sin esto, ".esaico-portfolio a" (1 clase + 1 elemento) * pesa MÁS que una clase de componente como ".pf-btn--primary" (1 clase), * y el "color: inherit" de aquí le ganaría al "color: #fff" del botón — * exactamente el bug de texto negro sobre fondo púrpura que hay que evitar. * Con :where(), cualquier clase de componente gana siempre, sin excepción. */:where(.esaico-portfolio) h1,:where(.esaico-portfolio) h2,:where(.esaico-portfolio) h3,:where(.esaico-portfolio) p,:where(.esaico-portfolio) ul,:where(.esaico-portfolio) dl,:where(.esaico-portfolio) dd,:where(.esaico-portfolio) figure {    margin: 0;    padding: 0;}:where(.esaico-portfolio) img {    max-width: 100%;    display: block;}/* El atributo [hidden] del navegador vale display:none, pero cualquier   componente que declare su propio display (.pf-btn es inline-flex) le gana   por especificidad y el elemento sigue viéndose. Esta regla lo zanja para   toda la landing en vez de ir parcheando componente por componente. */.esaico-portfolio [hidden] {    display: none !important;}:where(.esaico-portfolio) a {    color: inherit;    text-decoration: none;}.esaico-portfolio :focus-visible {    outline: 3px solid var(--pf-purple);    outline-offset: 3px;    border-radius: 4px;}.pf-container {    width: min(1180px, 100% - 48px);    margin-inline: auto;}.pf-icon {    width: 1.25em;    height: 1.25em;    flex: none;}/* Offset de anclas: en desktop el sidebar es lateral, no hay nada fijo   arriba, así que casi no hace falta margen. En móvil sí hay una barra   superior fija (ver breakpoint 1024px) y ahí se ajusta aparte. */.esaico-portfolio section[id] {    scroll-margin-top: -64px;}.esaico-portfolio #inicio {    scroll-margin-top: 0;}/* Skip link */.pf-skip-link {    position: absolute;    left: -9999px;    top: 0;    z-index: 999;    padding: 12px 20px;    background: var(--pf-purple);    color: #fff;    border-radius: 0 0 12px 0;}.pf-skip-link:focus {    left: 0;}/* ==========================================================================   Botones   ========================================================================== */.pf-btn {    display: inline-flex;    align-items: center;    gap: 10px;    padding: 12px 22px;    border-radius: 999px;    font-family: var(--pf-font-body);    font-weight: 600;    font-size: 15.5px;    line-height: 1.2;    border: 1.5px solid transparent;    cursor: pointer;    transition: transform 0.25s var(--pf-ease), box-shadow 0.25s var(--pf-ease), background 0.25s, color 0.25s, border-color 0.25s;    white-space: nowrap;    /* Red de seguridad: un botón nunca debe ser más ancho que su contenedor.       Con nowrap, una etiqueta larga imponía su ancho al layout entero y       sacaba scroll horizontal a toda la página. */    max-width: 100%;}.pf-btn:hover {    transform: translateY(-2px);}.pf-btn:active {    transform: translateY(0);}.pf-btn--sm { padding: 9px 18px; font-size: 14px; }.pf-btn--lg { padding: 15px 28px; font-size: 16.5px; }.pf-btn--xl { padding: 18px 32px; font-size: 17.5px; }.pf-btn--primary {    background: linear-gradient(135deg, var(--pf-purple) 0%, var(--pf-purple-deep) 100%);    color: #fff;    box-shadow: var(--pf-shadow-purple);}.pf-btn--primary:hover {    box-shadow: 0 16px 44px -10px rgba(111, 43, 220, 0.6);}/* Fondo semitransparente claro: un fondo --pf-surface (oscuro) casi no se   distinguía de la página, el botón se perdía. Este "vidrio esmerilado"   sí se despega del fondo oscuro. */.pf-btn--ghost {    background: rgba(255, 255, 255, 0.06);    color: var(--pf-ink);    border-color: rgba(255, 255, 255, 0.2);    box-shadow: 0 4px 18px -8px rgba(0, 0, 0, 0.4);}.pf-btn--ghost:hover {    background: rgba(255, 255, 255, 0.11);    border-color: var(--pf-lavender-mid);}.pf-btn--outline {    background: transparent;    color: var(--pf-lavender-mid);    border-color: rgba(182, 156, 240, 0.4);}.pf-btn--outline:hover {    background: var(--pf-purple);    color: #fff;    border-color: var(--pf-purple);}.pf-btn--whatsapp {    background: #1fa855;    color: #fff;    box-shadow: 0 12px 36px -10px rgba(31, 168, 85, 0.5);}/* ==========================================================================   Kicker (etiqueta mono de sección — firma técnica)   ========================================================================== */.pf-kicker {    display: inline-flex;    align-items: center;    gap: 10px;    font-family: var(--pf-font-mono);    font-size: 13px;    font-weight: 500;    letter-spacing: 0.08em;    text-transform: lowercase;    /* var(--pf-purple) es el morado saturado de marca: bien como relleno de       botón/ícono, pero como texto fino sobre fondo oscuro pierde contraste.       lavender-mid es la misma familia de color, pero legible. */    color: var(--pf-lavender-mid);    margin-bottom: 18px;}.pf-kicker__tick {    width: 22px;    height: 2px;    background: linear-gradient(90deg, var(--pf-purple), var(--pf-magenta));    border-radius: 2px;}/* ==========================================================================   Sidebar fijo (desktop) + barra superior (móvil)   ========================================================================== */.esaico-portfolio {    --pf-sidebar-w: 276px;}.pf-header__wordmark {    font-family: var(--pf-font-display);    font-weight: 800;    font-size: 24px;    letter-spacing: -0.02em;    color: var(--pf-ink);}.pf-header__wordmark span {    color: var(--pf-magenta);}.pf-sidebar {    position: fixed;    z-index: 100;    top: 0;    left: 0;    bottom: 0;    width: var(--pf-sidebar-w);    display: flex;    flex-direction: column;    gap: 20px;    padding: 28px 20px 22px;    /* Panel de cristal en vez de un bloque plano: el resplandor superior lo       ata al mismo lenguaje que el hero y las tarjetas destacadas. */    background:        radial-gradient(140% 60% at 0% 0%, rgba(111, 43, 220, 0.28), transparent 60%),        rgba(24, 15, 44, 0.92);    -webkit-backdrop-filter: blur(16px);    backdrop-filter: blur(16px);    border-right: 1px solid var(--pf-line);    overflow-y: auto;    /* Si el contenido del sidebar no cabe en pantallas bajas y hace falta       scroll interno, esto evita que ese scroll "se escape" y mueva la       página completa al llegar al tope — cada uno se queda en su carril. */    overscroll-behavior: contain;    /* Sin esto el navegador dibuja su barra de scroll del sistema (blanca)       encima del sidebar oscuro. Delgada y del color de la marca en su lugar. */    scrollbar-width: thin;    scrollbar-color: rgba(182, 156, 240, 0.35) transparent;}.pf-sidebar::-webkit-scrollbar {    width: 6px;}.pf-sidebar::-webkit-scrollbar-track {    background: transparent;}.pf-sidebar::-webkit-scrollbar-thumb {    background: rgba(182, 156, 240, 0.35);    border-radius: 999px;}.pf-sidebar::-webkit-scrollbar-thumb:hover {    background: rgba(182, 156, 240, 0.55);}.pf-sidebar__brand {    display: flex;    align-items: center;    padding-bottom: 20px;    border-bottom: 1px solid var(--pf-line);}.pf-sidebar__brand img {    max-height: 52px;    max-width: 100%;    width: auto;    height: auto;    object-fit: contain;    align-self: flex-start;}.pf-nav {    display: flex;    flex-direction: column;    gap: 3px;}/* El ícono va en un chip cuadrado como en servicios, tecnología y métricas:   un único vocabulario de formas en toda la página. */.pf-nav__link {    position: relative;    display: flex;    align-items: center;    gap: 12px;    padding: 9px 14px 9px 9px;    border-radius: 13px;    font-size: 14.5px;    font-weight: 600;    color: var(--pf-ink-soft);    overflow: hidden;    transition: background 0.25s, color 0.25s, transform 0.25s var(--pf-ease);}.pf-nav__link .pf-icon {    width: 18px;    height: 18px;    flex: none;}/* Chip del ícono: se dibuja como fondo del propio SVG mediante un pseudo,   así no hace falta tocar el marcado de cada enlace. */.pf-nav__link::before {    content: "";    position: absolute;    left: 9px;    width: 34px;    height: 34px;    border-radius: 10px;    background: rgba(255, 255, 255, 0.05);    border: 1px solid transparent;    transition: background 0.25s, border-color 0.25s;}.pf-nav__link .pf-icon,.pf-nav__link span {    position: relative;    z-index: 1;}.pf-nav__link .pf-icon {    margin: 8px;}.pf-nav__link:hover {    background: rgba(255, 255, 255, 0.045);    color: var(--pf-ink);    transform: translateX(2px);}.pf-nav__link:hover::before {    background: rgba(111, 43, 220, 0.28);    border-color: var(--pf-line-dark);}.pf-nav__link.is-active {    background: linear-gradient(100deg, rgba(111, 43, 220, 0.34), rgba(233, 30, 119, 0.14));    color: #fff;    box-shadow: inset 0 0 0 1px var(--pf-line-dark);}.pf-nav__link.is-active::before {    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    border-color: transparent;    box-shadow: 0 8px 20px -8px rgba(111, 43, 220, 0.8);}/* Barra indicadora a la izquierda del activo: marca la posición de un   vistazo, sin depender solo del color de fondo. */.pf-nav__link.is-active::after {    content: "";    position: absolute;    left: 0;    top: 50%;    transform: translateY(-50%);    width: 3px;    height: 22px;    border-radius: 0 3px 3px 0;    background: var(--pf-magenta);}.pf-sidebar__card {    margin-top: auto;    padding: 20px;    border-radius: 16px;    background: linear-gradient(150deg, rgba(111, 43, 220, 0.22), rgba(233, 30, 119, 0.12));    border: 1px solid var(--pf-line-dark);}.pf-sidebar__card-title {    font-family: var(--pf-font-display);    font-weight: 700;    font-size: 15px;    color: var(--pf-ink);    margin-bottom: 6px;}.pf-sidebar__card-text {    font-size: 12.5px;    color: var(--pf-ink-soft);    margin-bottom: 14px;}.pf-sidebar__card-btn {    width: 100%;    justify-content: center;}.pf-sidebar__cv {    display: flex;    align-items: center;    justify-content: space-between;    padding: 12px 14px;    border-radius: 12px;    border: 1px solid var(--pf-line);    font-size: 13.5px;    font-weight: 500;    color: var(--pf-ink-soft);    transition: border-color 0.25s, color 0.25s;}.pf-sidebar__cv .pf-icon {    width: 17px;    height: 17px;    color: var(--pf-lavender-mid);}.pf-sidebar__cv:hover {    border-color: var(--pf-lavender-mid);    color: var(--pf-ink);}.pf-sidebar__social {    display: flex;    gap: 10px;}.pf-sidebar__social a {    display: inline-grid;    place-items: center;    width: 36px;    height: 36px;    border-radius: 10px;    border: 1px solid var(--pf-line);    color: var(--pf-ink-soft);    transition: border-color 0.25s, color 0.25s, background 0.25s;}.pf-sidebar__social a:hover {    color: #fff;    background: var(--pf-purple);    border-color: var(--pf-purple);}.pf-sidebar__social .pf-icon {    width: 17px;    height: 17px;}/* Patrón decorativo — líneas onduladas de marca, esquina inferior del sidebar */.pf-sidebar__deco {    position: absolute;    left: 0;    right: 0;    bottom: 0;    height: 160px;    pointer-events: none;    z-index: -1;    opacity: 0.5;    background-image: repeating-radial-gradient(circle at 20% 120%, rgba(111, 43, 220, 0.35) 0, rgba(111, 43, 220, 0.35) 1px, transparent 1px, transparent 26px);    -webkit-mask-image: linear-gradient(0deg, #000, transparent);    mask-image: linear-gradient(0deg, #000, transparent);}/* Barra superior — solo visible en móvil (ver responsive) */.pf-topbar {    display: none;    position: fixed;    inset: 0 0 auto;    z-index: 110;    align-items: center;    gap: 12px;    padding: 11px 16px;    background: rgba(18, 10, 36, 0.78);    -webkit-backdrop-filter: blur(18px) saturate(140%);    backdrop-filter: blur(18px) saturate(140%);    border-bottom: 1px solid var(--pf-line);}/* Hilo de marca bajo la barra: detalle mínimo que la separa del contenido   sin agregar otra línea gris. */.pf-topbar::after {    content: "";    position: absolute;    left: 0;    right: 0;    bottom: -1px;    height: 1px;    background: linear-gradient(90deg, transparent, var(--pf-purple), var(--pf-magenta), transparent);    opacity: 0.55;}.pf-topbar__brand {    margin-right: auto;    display: flex;    align-items: center;}.pf-topbar__brand img {    height: 30px;    width: auto;}.pf-sidebar-overlay {    display: none;}/* Botón del menú: cuadrado con chip, igual que los íconos de navegación.   Los dos glifos se cruzan con giro en vez de saltar de uno a otro. */.pf-nav-toggle {    display: none;    position: relative;    width: 42px;    height: 42px;    padding: 0;    border-radius: 12px;    border: 1px solid var(--pf-line);    background: rgba(255, 255, 255, 0.05);    color: var(--pf-ink);    cursor: pointer;    flex: none;    transition: background 0.25s, border-color 0.25s;}.pf-nav-toggle[aria-expanded="true"] {    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    border-color: transparent;    color: #fff;}.pf-nav-toggle .pf-icon {    position: absolute;    top: 50%;    left: 50%;    width: 22px;    height: 22px;    margin: -11px 0 0 -11px;    transition: opacity 0.3s var(--pf-ease), transform 0.3s var(--pf-ease);}.pf-nav-toggle .pf-icon--close {    opacity: 0;    transform: rotate(-90deg) scale(0.6);}.pf-nav-toggle[aria-expanded="true"] .pf-icon--menu {    opacity: 0;    transform: rotate(90deg) scale(0.6);}.pf-nav-toggle[aria-expanded="true"] .pf-icon--close {    opacity: 1;    transform: none;}/* Contenido: desplazado por el ancho del sidebar en desktop.   Va por clase y no por #pf-main: en una página de Elementor puede haber   secciones sueltas sin sidebar, y ahí este margen dejaría un hueco lateral   sin nada que lo justifique. */.pf-main--framed,.pf-main--framed ~ .pf-footer {    margin-left: var(--pf-sidebar-w);}/* ==========================================================================   Hero   ========================================================================== */.pf-hero {    position: relative;    padding: 72px 0 0;    overflow: hidden;}/* Fondo aurora: 3 masas de gradiente púrpura/magenta con deriva lenta.   Sustituye la retícula plana por profundidad y movimiento con propósito. */.pf-hero__aurora {    position: absolute;    inset: -10% -10% auto -10%;    height: 130%;    pointer-events: none;    -webkit-mask-image: linear-gradient(#000 55%, transparent);    mask-image: linear-gradient(#000 55%, transparent);}.pf-aurora-blob {    position: absolute;    border-radius: 50%;    filter: blur(60px);    opacity: 0.55;    animation: pf-aurora-drift 22s ease-in-out infinite;}.pf-aurora-blob--1 {    top: 8%;    left: 4%;    width: 420px;    height: 420px;    background: radial-gradient(circle, var(--pf-lavender-mid), transparent 70%);}.pf-aurora-blob--2 {    top: 2%;    right: 6%;    width: 480px;    height: 480px;    background: radial-gradient(circle, rgba(111, 43, 220, 0.5), transparent 70%);    animation-duration: 26s;    animation-delay: -6s;}.pf-aurora-blob--3 {    bottom: 4%;    left: 32%;    width: 380px;    height: 380px;    background: radial-gradient(circle, rgba(233, 30, 119, 0.35), transparent 70%);    animation-duration: 19s;    animation-delay: -12s;}@keyframes pf-aurora-drift {    0%, 100% { transform: translate(0, 0) scale(1); }    33% { transform: translate(4%, 6%) scale(1.08); }    66% { transform: translate(-5%, 3%) scale(0.96); }}.pf-hero__inner {    position: relative;    display: grid;    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);    gap: 60px;    align-items: center;}/* Píldora de posicionamiento — lo primero que se lee: qué vendo, a quién */.pf-hero__badge {    display: inline-flex;    align-items: center;    gap: 10px;    padding: 7px 16px 7px 13px;    margin-bottom: 22px;    border: 1px solid var(--pf-line-dark);    border-radius: 999px;    background: rgba(111, 43, 220, 0.14);    font-size: 13px;    font-weight: 600;    letter-spacing: 0.01em;    color: var(--pf-lavender-mid);}.pf-hero__badge-dot {    width: 8px;    height: 8px;    flex: none;    border-radius: 50%;    background: #2fd48a;    box-shadow: 0 0 0 0 rgba(47, 212, 138, 0.6);    animation: pf-pulse-dot 2.4s ease-out infinite;}@keyframes pf-pulse-dot {    0% { box-shadow: 0 0 0 0 rgba(47, 212, 138, 0.55); }    70%, 100% { box-shadow: 0 0 0 9px rgba(47, 212, 138, 0); }}.pf-hero__title {    font-family: var(--pf-font-display);    font-size: clamp(38px, 4.9vw, 60px);    font-weight: 700;    line-height: 1.06;    letter-spacing: -0.028em;    margin-bottom: 16px;}.pf-hero__title-main {    display: block;    color: var(--pf-ink);}.pf-hero__title-accent {    display: block;    background: linear-gradient(100deg, var(--pf-purple-soft) 0%, var(--pf-magenta) 100%);    -webkit-background-clip: text;    background-clip: text;    color: transparent;}/* Terminal de escritura — ahora bajo el título, como "lista viva" de lo   que se digitaliza. Barra púrpura a la izquierda para que no flote suelto. */.pf-typewriter {    display: flex;    align-items: baseline;    gap: 8px;    /* Sin wrap y con alto reservado: al cambiar de frase el renglón no pasa       de una a dos líneas, que era lo que empujaba todo el hero hacia abajo       cada pocos segundos. */    flex-wrap: nowrap;    white-space: nowrap;    min-height: 26px;    padding-left: 14px;    border-left: 2px solid var(--pf-purple);    font-family: var(--pf-font-mono);    font-size: 14.5px;    color: var(--pf-ink-soft);    margin-bottom: 20px;}.pf-typewriter__prompt {    color: var(--pf-lavender-mid);    font-weight: 600;    flex: none;}.pf-typewriter__text {    min-width: 0;    color: var(--pf-ink);    font-weight: 500;}.pf-typewriter__cursor {    display: inline-block;    width: 8px;    height: 16px;    background: var(--pf-magenta);    animation: pf-blink 1s steps(1) infinite;    vertical-align: -2px;}.pf-sr-only {    position: absolute;    width: 1px;    height: 1px;    overflow: hidden;    clip: rect(0 0 0 0);    white-space: nowrap;}.pf-hero__subtitle {    font-size: clamp(16.5px, 1.35vw, 18px);    color: var(--pf-text-on-dark);    max-width: 56ch;    margin-bottom: 26px;}/* Beneficios: hablan del resultado (tiempo, evidencia, campo sin señal),   no de la stack. Es lo que convierte el hero en argumento de venta. *//* Beneficios — encabezan el catálogo de servicios.   Estaban en el hero, pero repetían en texto lo que la maqueta del teléfono   ya demuestra en imagen (la firma, el PDF firmado, el modo sin señal). */.pf-benefits {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));    gap: 14px;    list-style: none;    margin-bottom: 30px;}.pf-benefits li {    display: flex;    align-items: center;    gap: 12px;    padding: 14px 18px;    border-radius: 14px;    border: 1px solid var(--pf-line);    background: rgba(255, 255, 255, 0.03);    font-size: 14.5px;    line-height: 1.35;    color: var(--pf-text-on-dark);}.pf-benefits__icon {    display: inline-grid;    place-items: center;    width: 34px;    height: 34px;    flex: none;    border-radius: 10px;    background: rgba(111, 43, 220, 0.26);    color: var(--pf-lavender-mid);}.pf-benefits__icon .pf-icon {    width: 17px;    height: 17px;}/* Par de CTA: el primario manda y el secundario acompaña. Nunca se apilan —   apilados leen como dos pasos de un proceso en vez de como una elección. */.pf-hero__actions,.pf-cta-pair {    display: flex;    align-items: stretch;    /* Con nowrap y botones que tampoco encogen (.pf-btn), en anchos       intermedios el par desbordaba la columna en vez de partir. */    flex-wrap: wrap;    gap: 12px;    margin-bottom: 14px;}/* El secundario no compite: mismo alto, sin relleno sólido. La jerarquía la   marca el peso visual, no el tamaño. */.pf-hero__actions .pf-btn--ghost,.pf-cta-pair .pf-btn--whatsapp {    background: rgba(255, 255, 255, 0.06);    color: var(--pf-ink);    border-color: rgba(255, 255, 255, 0.2);    box-shadow: none;}.pf-hero__actions .pf-btn--ghost:hover,.pf-cta-pair .pf-btn--whatsapp:hover {    background: rgba(31, 168, 85, 0.18);    border-color: #2fd48a;    color: #fff;}.pf-cta-pair .pf-btn--whatsapp .pf-icon {    color: #2fd48a;}/* "Prefiero" se cae en pantallas estrechas y queda solo "WhatsApp": el par   sigue cabiendo en una fila sin recortar el botón principal. */.pf-btn__soft {    display: inline;}/* Nota bajo el CTA: quita fricción antes de que la pregunta aparezca   ("¿cuánto dura?", "¿me van a cobrar?", "¿qué me llevo?"). */.pf-hero__cta-note {    display: flex;    align-items: center;    gap: 8px;    font-size: 13.5px;    color: var(--pf-ink-soft);    margin-bottom: 30px;}.pf-hero__cta-note .pf-icon {    width: 15px;    height: 15px;    color: #2fd48a;}/* Firma humana: foto pequeña + años de experiencia. La foto grande cedió   su sitio a la maqueta del producto, pero la cara sigue vendiendo. */.pf-hero__author {    display: flex;    align-items: center;    gap: 13px;    padding-top: 22px;    border-top: 1px solid var(--pf-line);}.pf-hero__author-photo {    width: 48px;    height: 48px;    flex: none;    border-radius: 50%;    object-fit: cover;    object-position: top center;    border: 2px solid var(--pf-purple);    box-shadow: 0 0 0 4px rgba(111, 43, 220, 0.18);}.pf-hero__author-text {    font-size: 14px;    line-height: 1.45;    color: var(--pf-ink-soft);    max-width: 42ch;}/* Fila de normas: en Perú "SUNAFIL" y "Ley 29783" son el disparador real   de compra. Va a todo el ancho, bajo las dos columnas del hero. */.pf-hero__compliance {    position: relative;    z-index: 1;    display: flex;    align-items: center;    flex-wrap: wrap;    gap: 14px;    margin-top: 46px;    padding: 16px 20px;    border: 1px solid var(--pf-line);    border-radius: 16px;    background: rgba(255, 255, 255, 0.03);}.pf-hero__compliance-label {    display: inline-flex;    align-items: center;    gap: 8px;    font-size: 12.5px;    font-weight: 600;    letter-spacing: 0.02em;    text-transform: uppercase;    color: var(--pf-ink-soft);    white-space: nowrap;}.pf-hero__compliance-label .pf-icon {    width: 16px;    height: 16px;    color: var(--pf-lavender-mid);}.pf-hero__compliance-list {    display: flex;    flex-wrap: wrap;    gap: 8px;    list-style: none;}.pf-hero__compliance-list li {    padding: 6px 13px;    border-radius: 999px;    border: 1px solid var(--pf-line-dark);    background: rgba(111, 43, 220, 0.12);    font-family: var(--pf-font-mono);    font-size: 12px;    font-weight: 600;    color: var(--pf-lavender-mid);}/* ==========================================================================   Hero — maqueta de producto (columna derecha)   La demo pesa más que la promesa: se ve el checklist marcándose, la firma   dibujándose y el PDF resultante. Todo CSS, cero imágenes que cargar.   ========================================================================== */.pf-hero__showcase {    position: relative;    justify-self: center;    /* Aire arriba y abajo para las tarjetas que sobresalen del teléfono. */    margin-block: 48px;    perspective: 1400px;}.pf-showcase__halo {    position: absolute;    z-index: -1;    top: 50%;    left: 50%;    width: min(520px, 92vw);    aspect-ratio: 1;    transform: translate(-50%, -50%);    border-radius: 50%;    background: radial-gradient(circle, rgba(111, 43, 220, 0.45), transparent 65%);    filter: blur(20px);}.pf-phone {    position: relative;    width: min(310px, 76vw);    padding: 11px;    border-radius: 44px;    background: linear-gradient(160deg, rgba(182, 156, 240, 0.5), rgba(111, 43, 220, 0.18) 40%, rgba(18, 10, 36, 0.9));    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);    transition: transform 0.25s var(--pf-ease);    transform-style: preserve-3d;}.pf-hero__showcase.is-tilting .pf-phone {    transition: transform 0.08s linear;}.pf-phone__notch {    position: absolute;    z-index: 2;    top: 20px;    left: 50%;    transform: translateX(-50%);    width: 92px;    height: 7px;    border-radius: 999px;    background: rgba(0, 0, 0, 0.55);}/* Las escenas se apilan en la MISMA celda de grid: el teléfono adopta la   altura de la más alta y no da saltos al rotar. Con position:absolute   habría hecho falta fijar una altura a mano y ajustarla a cada cambio. */.pf-phone__screen {    display: grid;    padding: 30px 16px 30px;    border-radius: 34px;    background: linear-gradient(180deg, #1b1132, #140c28);    border: 1px solid rgba(255, 255, 255, 0.06);}.pf-phone__scene {    grid-area: 1 / 1;    display: flex;    flex-direction: column;    gap: 14px;    opacity: 0;    visibility: hidden;    transform: translateY(10px) scale(0.98);    transition: opacity 0.5s var(--pf-ease), transform 0.5s var(--pf-ease), visibility 0.5s;}.pf-phone__scene.is-active {    opacity: 1;    visibility: visible;    transform: none;}/* Puntos indicadores: dicen que hay más de una pantalla, no solo que algo   se mueve. Sin ellos la rotación parece un glitch. */.pf-phone__dots {    position: absolute;    left: 50%;    bottom: 18px;    transform: translateX(-50%);    display: flex;    gap: 6px;}.pf-phone__dot {    width: 6px;    height: 6px;    border-radius: 999px;    background: rgba(255, 255, 255, 0.22);    transition: width 0.4s var(--pf-ease), background 0.4s;}.pf-phone__dot.is-active {    width: 18px;    background: var(--pf-lavender-mid);}.pf-phone__head {    display: flex;    align-items: center;    gap: 11px;    padding-bottom: 13px;    border-bottom: 1px solid var(--pf-line);}.pf-phone__head-icon {    display: inline-grid;    place-items: center;    width: 36px;    height: 36px;    flex: none;    border-radius: 11px;    background: var(--pf-purple);    color: #fff;}.pf-phone__head-icon .pf-icon {    width: 19px;    height: 19px;}.pf-phone__head-text {    display: flex;    flex-direction: column;    min-width: 0;}.pf-phone__head-text b {    font-size: 14.5px;    font-weight: 700;    color: var(--pf-ink);    line-height: 1.25;}.pf-phone__head-text i {    font-style: normal;    font-size: 11.5px;    color: var(--pf-ink-soft);}.pf-phone__list {    display: grid;    gap: 9px;    list-style: none;}/* Cada ítem se marca solo, escalonado con --pf-item-delay, y el ciclo   reinicia: el visitante ve el flujo completo sin tocar nada. *//* Las animaciones cuelgan de .is-active y corren UNA vez por activación,   no en bucle: al volver a esta escena el navegador las reinicia solo,   así el recorrido siempre se ve desde el principio. */.pf-phone__item {    display: flex;    align-items: center;    gap: 10px;    padding: 10px 11px;    border-radius: 12px;    border: 1px solid var(--pf-line);    background: rgba(255, 255, 255, 0.03);}.pf-phone__scene.is-active .pf-phone__item {    animation: pf-item-check 0.45s var(--pf-item-delay, 0s) both;}.pf-phone__check {    display: grid;    place-items: center;    width: 21px;    height: 21px;    flex: none;    border-radius: 50%;    border: 1.5px solid var(--pf-line-dark);    color: #fff;}.pf-phone__scene.is-active .pf-phone__check {    animation: pf-check-fill 0.45s var(--pf-item-delay, 0s) both;}.pf-phone__check svg {    width: 12px;    height: 12px;    opacity: 0;}.pf-phone__scene.is-active .pf-phone__check svg {    animation: pf-check-pop 0.5s var(--pf-item-delay, 0s) both;}.pf-phone__item-text {    font-size: 12.5px;    line-height: 1.35;    color: var(--pf-text-on-dark);}@keyframes pf-item-check {    from {        border-color: var(--pf-line);        background: rgba(255, 255, 255, 0.03);    }    to {        border-color: rgba(182, 156, 240, 0.45);        background: rgba(111, 43, 220, 0.2);    }}@keyframes pf-check-fill {    from {        background: transparent;        border-color: var(--pf-line-dark);    }    to {        background: var(--pf-purple);        border-color: var(--pf-purple);    }}@keyframes pf-check-pop {    0% { opacity: 0; transform: scale(0.3); }    60% { opacity: 1; transform: scale(1.25); }    100% { opacity: 1; transform: scale(1); }}/* Zona de firma: el trazo se dibuja con stroke-dashoffset. Es el detalle   que hace clic —"esto reemplaza mi hoja firmada"— sin explicar nada. */.pf-phone__sign {    display: flex;    flex-direction: column;    gap: 2px;    padding: 11px 12px 9px;    border: 1px dashed var(--pf-line-dark);    border-radius: 14px;    background: rgba(255, 255, 255, 0.02);}.pf-phone__sign-label {    font-size: 10.5px;    letter-spacing: 0.06em;    text-transform: uppercase;    color: var(--pf-ink-soft);}.pf-phone__sign-path {    width: 100%;    height: 44px;    color: var(--pf-lavender-mid);}.pf-phone__sign-path path {    stroke-dasharray: 420;    stroke-dashoffset: 420;}.pf-phone__scene.is-active .pf-phone__sign-path path {    animation: pf-sign-draw 1.5s 2.3s both;}@keyframes pf-sign-draw {    from { stroke-dashoffset: 420; }    to { stroke-dashoffset: 0; }}.pf-phone__sign-by {    font-family: var(--pf-font-mono);    font-size: 10.5px;    color: var(--pf-lavender-mid);    opacity: 0;}.pf-phone__scene.is-active .pf-phone__sign-by {    animation: pf-sign-by 0.5s 3.7s both;}@keyframes pf-sign-by {    from { opacity: 0; transform: translateY(4px); }    to { opacity: 1; transform: none; }}/* ---- Escena de marcación de asistencia ---- */.pf-punch {    display: flex;    flex-direction: column;    align-items: center;    gap: 10px;    padding: 22px 0 8px;    text-align: center;}.pf-punch__clock {    font-family: var(--pf-font-mono);    font-size: 46px;    font-weight: 700;    line-height: 1;    letter-spacing: -0.03em;    color: var(--pf-ink);}.pf-punch__label {    font-size: 12.5px;    color: var(--pf-ink-soft);    margin-bottom: 6px;}/* Botón que se "pulsa" solo: escala con onda expansiva y luego se marca. */.pf-punch__button {    position: relative;    display: grid;    place-items: center;    width: 84px;    height: 84px;    border-radius: 50%;    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    color: #fff;    box-shadow: 0 14px 34px -10px rgba(111, 43, 220, 0.8);}.pf-punch__button .pf-icon {    width: 34px;    height: 34px;    opacity: 0;}.pf-phone__scene.is-active .pf-punch__button {    animation: pf-punch-press 0.7s 1s both;}.pf-phone__scene.is-active .pf-punch__button .pf-icon {    animation: pf-check-pop 0.45s 1.5s both;}@keyframes pf-punch-press {    0% { transform: scale(1); }    45% { transform: scale(0.9); }    100% { transform: scale(1); }}.pf-punch__ripple {    position: absolute;    inset: 0;    border-radius: 50%;    border: 2px solid var(--pf-lavender-mid);    opacity: 0;}.pf-phone__scene.is-active .pf-punch__ripple {    animation: pf-punch-ripple 1.1s 1.35s both;}@keyframes pf-punch-ripple {    0% { opacity: 0.7; transform: scale(1); }    100% { opacity: 0; transform: scale(1.9); }}.pf-punch__result {    display: flex;    flex-direction: column;    gap: 4px;    margin-top: 10px;    opacity: 0;}.pf-phone__scene.is-active .pf-punch__result {    animation: pf-sign-by 0.5s 2.1s both;}.pf-punch__done {    display: inline-flex;    align-items: center;    justify-content: center;    gap: 8px;    font-family: var(--pf-font-display);    font-size: 15px;    font-weight: 700;    color: #6ee7a8;}.pf-punch__done .pf-icon {    width: 16px;    height: 16px;}.pf-punch__place {    font-family: var(--pf-font-mono);    font-size: 10.5px;    color: var(--pf-ink-soft);}/* Tarjetas flotantes alrededor del teléfono: el resultado (PDF firmado),   la objeción resuelta (sin señal) y el diferencial (IA). *//* Las tarjetas se colocan FUERA del alto del teléfono (arriba y abajo) o   pegadas al bisel. Flotando sobre la pantalla tapaban el título, el primer   ítem del checklist y la firma — justo lo que la maqueta debe demostrar. */.pf-showcase__card {    position: absolute;    z-index: 3;    display: flex;    align-items: center;    gap: 9px;    max-width: 208px;    padding: 10px 13px;    border-radius: 14px;    border: 1px solid rgba(255, 255, 255, 0.14);    background: rgba(28, 18, 48, 0.92);    -webkit-backdrop-filter: blur(10px);    backdrop-filter: blur(10px);    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8);    animation: pf-float 5.5s ease-in-out infinite;}.pf-showcase__card-icon {    display: inline-grid;    place-items: center;    width: 30px;    height: 30px;    flex: none;    border-radius: 9px;    background: rgba(111, 43, 220, 0.28);    color: var(--pf-lavender-mid);}.pf-showcase__card-icon .pf-icon {    width: 16px;    height: 16px;}.pf-showcase__card-text {    display: flex;    flex-direction: column;    min-width: 0;}.pf-showcase__card-text b {    font-size: 12.5px;    font-weight: 600;    line-height: 1.3;    color: var(--pf-ink);}.pf-showcase__card-text i {    font-style: normal;    font-size: 11px;    color: var(--pf-ink-soft);}/* Debajo del teléfono: el PDF es el resultado, cierra el recorrido visual. */.pf-showcase__card--pdf {    right: -34px;    bottom: -30px;}.pf-showcase__card--pdf .pf-showcase__card-icon {    background: rgba(47, 212, 138, 0.2);    color: #2fd48a;}/* Al costado, estrecha y bien hacia afuera: solo pisa el bisel, no el texto. */.pf-showcase__card--offline {    left: -80px;    top: 56%;    max-width: 176px;    animation-delay: -2.4s;}/* Encima del teléfono, fuera de su alto: antes tapaba el título del formato. */.pf-showcase__card--ai {    top: -36px;    left: -26px;    max-width: 196px;    animation-delay: -4s;}.pf-showcase__card--ai .pf-showcase__card-icon {    background: rgba(233, 30, 119, 0.22);    color: #f473ac;}/* Barra de métricas — a todo el ancho de la sección, no encajada dentro   de la columna de texto. Tarjetas con ícono, así cada estadística tiene   sitio real para respirar en vez de pelear por 170px de columna. */.pf-metrics-strip {    position: relative;    z-index: 1;    margin-top: 52px;}/* Tarjetas sueltas, no una barra fusionada con separadores de 1px: aquello   se leía como una tabla de Excel, justo lo contrario de lo que vendemos. */.pf-metrics-strip__inner {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));    gap: 16px;}.pf-metric-card {    position: relative;    overflow: hidden;    display: flex;    flex-direction: column;    gap: 8px;    min-width: 0;    padding: 24px 22px;    border-radius: 18px;    border: 1px solid var(--pf-line);    background:        radial-gradient(120% 130% at 0% 0%, rgba(111, 43, 220, 0.24), transparent 62%),        var(--pf-surface);    transition: transform 0.35s var(--pf-ease), border-color 0.35s, box-shadow 0.35s;}.pf-metric-card:hover {    transform: translateY(-4px);    border-color: var(--pf-lavender-mid);    box-shadow: 0 22px 50px -22px rgba(111, 43, 220, 0.6);}/* El ícono pasa a marca de agua gigante en la esquina: da textura sin   competir con la cifra, que es lo único que debe leerse de golpe. */.pf-metric-card__icon {    position: absolute;    top: -14px;    right: -14px;    display: grid;    place-items: center;    width: 96px;    height: 96px;    color: rgba(182, 156, 240, 0.1);    pointer-events: none;    transition: color 0.35s, transform 0.35s var(--pf-ease);}.pf-metric-card:hover .pf-metric-card__icon {    color: rgba(182, 156, 240, 0.18);    transform: scale(1.08) rotate(-6deg);}.pf-metric-card__icon .pf-icon {    width: 58px;    height: 58px;}.pf-metric-card__text {    position: relative;    display: flex;    flex-direction: column;    gap: 7px;    min-width: 0;}/* Degradado sobre el texto: la cifra es el ancla visual de toda la franja. */.pf-metric-card__value {    font-family: var(--pf-font-display);    font-size: clamp(28px, 3vw, 38px);    font-weight: 800;    letter-spacing: -0.035em;    line-height: 1;    background: linear-gradient(115deg, #ffffff 0%, var(--pf-lavender-mid) 55%, var(--pf-purple-soft) 100%);    -webkit-background-clip: text;    background-clip: text;    color: transparent;}.pf-metric-card__label {    font-size: 13.5px;    line-height: 1.4;    color: var(--pf-ink-soft);}@keyframes pf-float {    0%, 100% { transform: translateY(0); }    50% { transform: translateY(-9px); }}/* Franja de clientes (marquee)   Antes eran nombres en texto plano al 75% de opacidad: el patrón "muro de   logos sin logos", que se lee como una lista desvaída en vez de como prueba   social. Ahora cada cliente es una placa con monograma — sustituto digno   del logo mientras no haya archivos reales. */.pf-clients {    position: relative;    margin-top: 72px;    padding: 26px 0;    border-top: 1px solid var(--pf-line);    border-bottom: 1px solid var(--pf-line);    background:        radial-gradient(80% 160% at 50% 0%, rgba(111, 43, 220, 0.16), transparent 70%),        var(--pf-surface);}.pf-clients__label {    text-align: center;    font-family: var(--pf-font-mono);    font-size: 11.5px;    letter-spacing: 0.14em;    text-transform: uppercase;    color: var(--pf-ink-soft);    margin-bottom: 18px;}.pf-clients__track {    display: flex;    overflow: hidden;    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);}.pf-clients__list {    display: flex;    gap: 16px;    padding-right: 16px;    list-style: none;    flex: none;    /* Más lento que antes (32s): las placas son bastante más anchas que el       texto suelto, y a la velocidad anterior costaba leerlas al pasar. */    animation: pf-marquee 46s linear infinite;}.pf-clients__track:hover .pf-clients__list {    animation-play-state: paused;}.pf-client {    display: flex;    align-items: center;    gap: 12px;    flex: none;    padding: 11px 20px 11px 11px;    border-radius: 999px;    border: 1px solid var(--pf-line);    background: rgba(255, 255, 255, 0.035);    white-space: nowrap;    transition: border-color 0.3s, background 0.3s, transform 0.3s var(--pf-ease);}.pf-client:hover {    border-color: var(--pf-lavender-mid);    background: rgba(111, 43, 220, 0.16);    transform: translateY(-2px);}.pf-client__monogram {    display: grid;    place-items: center;    width: 36px;    height: 36px;    flex: none;    border-radius: 50%;    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    color: #fff;    font-family: var(--pf-font-display);    font-size: 14px;    font-weight: 700;    letter-spacing: 0.02em;}/* Placa blanca para el logo: la mayoría de marcas tienen versión oscura o a   color, y sobre este fondo se perderían. El blanco garantiza que cualquier   logo se lea, venga como venga. */.pf-client__plate {    display: grid;    place-items: center;    height: 36px;    min-width: 36px;    max-width: 96px;    flex: none;    padding: 5px 9px;    border-radius: 10px;    background: #fff;}.pf-client__plate img {    max-height: 26px;    max-width: 100%;    width: auto;    object-fit: contain;}.pf-client__name {    font-family: var(--pf-font-display);    font-weight: 600;    font-size: 16px;    color: var(--pf-text-on-dark);}/* Con logo, el nombre baja a apoyo: la marca ya la lleva la imagen. */.pf-client--logo .pf-client__name {    font-size: 15px;    color: var(--pf-ink-soft);}@keyframes pf-marquee {    to { transform: translateX(-100%); }}/* ==========================================================================   Secciones   ========================================================================== */.pf-section {    padding: 104px 0;}.pf-section--dark {    background:        radial-gradient(circle at 15% 0%, rgba(111, 43, 220, 0.22), transparent 45%),        var(--pf-deep);    color: var(--pf-text-on-dark);}.pf-section__head {    max-width: 720px;    margin-bottom: 56px;}.pf-section__head--row {    max-width: none;    display: flex;    align-items: flex-end;    justify-content: space-between;    gap: 24px;    flex-wrap: wrap;}.pf-section__head--center {    max-width: none;    text-align: center;    display: flex;    flex-direction: column;    align-items: center;}.pf-section__title {    font-family: var(--pf-font-display);    font-size: clamp(30px, 3.6vw, 44px);    font-weight: 700;    line-height: 1.12;    letter-spacing: -0.02em;    margin-bottom: 16px;}.pf-section--dark .pf-section__title {    color: #fff;}.pf-section__intro {    font-size: 18px;    color: var(--pf-ink-soft);    max-width: 62ch;}.pf-section--dark .pf-section__intro {    color: var(--pf-text-on-dark);}/* ==========================================================================   Servicios — bento grid con spotlight   ========================================================================== */.pf-services__grid {    display: grid;    grid-template-columns: repeat(6, minmax(0, 1fr));    gap: 20px;}.pf-card {    position: relative;    border-radius: var(--pf-radius);    background: var(--pf-surface);    border: 1px solid var(--pf-line);    padding: 30px 28px;    overflow: hidden;    transition: transform 0.35s var(--pf-ease), box-shadow 0.35s var(--pf-ease), border-color 0.35s;}.pf-card:hover {    transform: translateY(-5px);    border-color: var(--pf-lavender-mid);    box-shadow: var(--pf-shadow);}/* Spotlight que sigue al cursor (JS fija --mx/--my) */.pf-card::before {    content: "";    position: absolute;    inset: 0;    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(111, 43, 220, 0.09), transparent 65%);    opacity: 0;    transition: opacity 0.4s;    pointer-events: none;}.pf-card:hover::before {    opacity: 1;}.pf-service {    grid-column: span 2;    display: flex;    flex-direction: column;    min-height: 262px;    padding: 26px 26px 22px;}/* Destacada: mismo lenguaje que .pf-authority y .pf-compare__col--custom —   fondo oscuro con resplandor púrpura y borde de marca. Antes era un bloque   lavanda CLARO heredado del tema claro: dos islas pálidas en una página   oscura, y encima obligaba a parchear a mano el color de cada texto. */.pf-service--featured {    grid-column: span 3;    background:        radial-gradient(110% 130% at 100% 0%, rgba(111, 43, 220, 0.34), transparent 60%),        var(--pf-surface);    border-color: var(--pf-lavender-mid);}.pf-service--featured:hover {    box-shadow: 0 22px 56px -20px rgba(111, 43, 220, 0.55);}/* Fila superior: el ícono y el distintivo comparten renglón. El flag estaba   en position:absolute y se montaba sobre el ícono en las tarjetas anchas. */.pf-service__top {    display: flex;    align-items: center;    justify-content: space-between;    gap: 14px;    margin-bottom: 18px;}.pf-service__flag {    font-family: var(--pf-font-mono);    font-size: 10.5px;    font-weight: 600;    letter-spacing: 0.09em;    text-transform: uppercase;    color: #fff;    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    padding: 5px 12px;    border-radius: 999px;    white-space: nowrap;}/* Cuadrado redondeado, no círculo: iguala a los íconos del hero, de   tecnología y de beneficios. Un solo vocabulario de formas en la página. */.pf-service__icon {    display: inline-grid;    place-items: center;    width: 50px;    height: 50px;    flex: none;    border-radius: 15px;    background: rgba(111, 43, 220, 0.22);    border: 1px solid var(--pf-line-dark);    color: var(--pf-lavender-mid);    transition: transform 0.35s var(--pf-ease), background 0.35s, color 0.35s;}.pf-service__icon .pf-icon {    width: 23px;    height: 23px;}.pf-service:hover .pf-service__icon {    transform: translateY(-3px);    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    border-color: transparent;    color: #fff;}.pf-service--featured .pf-service__icon {    width: 54px;    height: 54px;    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    border-color: transparent;    color: #fff;    box-shadow: 0 12px 28px -10px rgba(111, 43, 220, 0.6);}.pf-service__title {    font-family: var(--pf-font-display);    font-size: 19.5px;    font-weight: 700;    line-height: 1.25;    letter-spacing: -0.015em;    color: var(--pf-ink);    margin-bottom: 9px;}.pf-service--featured .pf-service__title {    font-size: 23px;}.pf-service__desc {    font-size: 14.5px;    line-height: 1.55;    color: var(--pf-ink-soft);    flex: 1;}.pf-service--featured .pf-service__desc {    font-size: 15.5px;    color: var(--pf-text-on-dark);}/* Pie con separador: antes el grupo y el "Ver más" quedaban sueltos al   final, cada uno flotando a distinta altura según el largo del texto. */.pf-service__foot {    display: flex;    align-items: center;    justify-content: space-between;    gap: 12px;    margin-top: 20px;    padding-top: 15px;    border-top: 1px solid var(--pf-line);}.pf-service__group {    font-family: var(--pf-font-mono);    font-size: 10.5px;    letter-spacing: 0.07em;    text-transform: lowercase;    color: var(--pf-ink-soft);    padding: 4px 10px;    border-radius: 999px;    border: 1px solid var(--pf-line);    white-space: nowrap;}.pf-service--featured .pf-service__group {    color: var(--pf-lavender-mid);    border-color: var(--pf-line-dark);}.pf-service__more {    display: inline-flex;    align-items: center;    gap: 6px;    background: none;    border: none;    padding: 0;    cursor: pointer;    font: inherit;    font-size: 13.5px;    font-weight: 600;    color: var(--pf-lavender-mid);    white-space: nowrap;    transition: color 0.3s;}.pf-service__more:hover {    color: var(--pf-ink);}.pf-service__more .pf-icon {    width: 15px;    height: 15px;    transition: transform 0.3s var(--pf-ease);}.pf-service:hover .pf-service__more .pf-icon {    transform: translateX(4px);}/* ==========================================================================   Proyectos — sección oscura de alto impacto   ========================================================================== */.pf-btn--outline-dark {    background: transparent;    color: #fff;    border-color: var(--pf-line-dark);}.pf-btn--outline-dark:hover {    background: rgba(182, 156, 240, 0.12);    border-color: var(--pf-lavender-mid);}/* ==========================================================================   Comparativa — a medida vs. suscripción genérica   Dos columnas deliberadamente desiguales: la genérica va apagada y hundida,   la propia va iluminada, con borde de marca y un punto más alta. La jerarquía   visual hace la mitad del argumento antes de que se lea una sola línea.   ========================================================================== */.pf-compare__grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 22px;    align-items: start;}.pf-compare__col {    padding: 30px 28px;    border-radius: var(--pf-radius);    border: 1px solid var(--pf-line);}.pf-compare__col--generic {    background: rgba(255, 255, 255, 0.02);    opacity: 0.82;}.pf-compare__col--custom {    position: relative;    background:        radial-gradient(120% 130% at 100% 0%, rgba(111, 43, 220, 0.32), transparent 62%),        var(--pf-surface);    border-color: var(--pf-lavender-mid);    box-shadow: var(--pf-shadow-purple);}.pf-compare__head {    padding-bottom: 16px;    margin-bottom: 18px;    border-bottom: 1px solid var(--pf-line);}.pf-compare__title {    font-family: var(--pf-font-display);    font-size: 20px;    font-weight: 700;    letter-spacing: -0.02em;    line-height: 1.25;    color: var(--pf-ink);}.pf-compare__note {    margin-top: 4px;    font-family: var(--pf-font-mono);    font-size: 12px;    color: var(--pf-ink-soft);}.pf-compare__col--custom .pf-compare__note {    color: var(--pf-lavender-mid);}.pf-compare__list {    display: grid;    gap: 13px;    list-style: none;}.pf-compare__list li {    display: flex;    align-items: flex-start;    gap: 11px;    font-size: 14.5px;    line-height: 1.5;    color: var(--pf-text-on-dark);}.pf-compare__col--generic .pf-compare__list li {    color: var(--pf-ink-soft);}.pf-compare__mark {    display: inline-grid;    place-items: center;    width: 24px;    height: 24px;    flex: none;    margin-top: 1px;    border-radius: 50%;}.pf-compare__mark .pf-icon {    width: 13px;    height: 13px;}.pf-compare__mark--no {    background: rgba(233, 30, 119, 0.16);    color: #f07bab;}.pf-compare__mark--yes {    background: rgba(47, 212, 138, 0.18);    color: #2fd48a;}/* CTA de fricción mínima: no pide presupuesto ni reunión, solo el formato   que la empresa ya tiene a mano. */.pf-compare__cta {    display: flex;    flex-direction: column;    align-items: center;    gap: 12px;    margin-top: 34px;    text-align: center;}.pf-compare__cta-note {    font-size: 13.5px;    color: var(--pf-ink-soft);    max-width: 52ch;}/* ==========================================================================   Tecnología y experiencia   Aquí aterriza el texto largo que se sacó del hero: con qué se construye   y por qué le compran a Wilber y no al primer freelance que cotice.   ========================================================================== *//* auto-fit en vez de 3 columnas fijas: en tablet reacomoda solo en lugar de   caer de golpe a una sola columna kilométrica. */.pf-tech__grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));    gap: 22px;}.pf-tech-card {    display: flex;    flex-direction: column;    gap: 10px;    padding: 26px 24px;}.pf-tech-card__icon {    display: inline-grid;    place-items: center;    width: 46px;    height: 46px;    border-radius: 13px;    background: rgba(111, 43, 220, 0.22);    border: 1px solid var(--pf-line-dark);    color: var(--pf-lavender-mid);}.pf-tech-card__icon .pf-icon {    width: 22px;    height: 22px;}.pf-tech-card__title {    font-family: var(--pf-font-display);    font-size: 20px;    font-weight: 700;    letter-spacing: -0.02em;    color: var(--pf-ink);}.pf-tech-card__desc {    font-size: 14.5px;    line-height: 1.55;    color: var(--pf-ink-soft);}/* ==========================================================================   Sobre mí — quién lidera el proyecto   ========================================================================== */.pf-about {    position: relative;    overflow: hidden;}.pf-about::before {    content: "";    position: absolute;    inset: 10% auto auto -12%;    width: 620px;    height: 620px;    border-radius: 50%;    background: radial-gradient(circle, rgba(111, 43, 220, 0.24), transparent 62%);    filter: blur(50px);    pointer-events: none;}.pf-about__grid {    position: relative;    display: grid;    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);    gap: 52px;    align-items: start;}/* La tarjeta acompaña la lectura del texto largo de la derecha en vez de   quedarse arriba dejando un hueco. */.pf-about__media {    position: sticky;    top: 32px;}.pf-about__glow {    position: absolute;    z-index: -1;    inset: -22px -22px auto -22px;    height: 70%;    border-radius: 28px;    background: linear-gradient(150deg, var(--pf-purple), var(--pf-magenta));    opacity: 0.35;    filter: blur(28px);}/* ---- Tarjeta de presentación ---- */.pf-card-id {    position: relative;    border-radius: 24px;    overflow: hidden;    border: 1px solid var(--pf-line-dark);    background: var(--pf-surface);    box-shadow: 0 34px 80px -32px rgba(0, 0, 0, 0.9);}.pf-card-id__photo {    position: relative;    aspect-ratio: 4 / 5;    overflow: hidden;    background:        radial-gradient(circle at 50% 30%, rgba(111, 43, 220, 0.35), transparent 60%),        var(--pf-ink-2);}.pf-card-id__photo img {    width: 100%;    height: 100%;    object-fit: cover;    object-position: top center;    transition: transform 0.6s var(--pf-ease);}.pf-card-id:hover .pf-card-id__photo img {    transform: scale(1.04);}.pf-card-id__empty {    position: absolute;    inset: 0;    display: grid;    place-items: center;    padding: 24px;    text-align: center;    font-size: 13.5px;    color: var(--pf-ink-soft);}/* Estado en vivo arriba: lo primero que se ve es que estás disponible. */.pf-card-id__status {    position: absolute;    z-index: 2;    top: 14px;    left: 14px;    display: inline-flex;    align-items: center;    gap: 8px;    padding: 7px 13px;    border-radius: 999px;    border: 1px solid rgba(255, 255, 255, 0.18);    background: rgba(12, 6, 26, 0.7);    -webkit-backdrop-filter: blur(10px);    backdrop-filter: blur(10px);    font-size: 11.5px;    font-weight: 600;    color: #fff;}.pf-card-id__dot {    width: 7px;    height: 7px;    border-radius: 50%;    background: #2fd48a;    box-shadow: 0 0 0 0 rgba(47, 212, 138, 0.6);    animation: pf-pulse-dot 2.4s ease-out infinite;}/* Nombre, cargo y especialidades SOBRE la foto: es lo que convierte el   retrato en una tarjeta de presentación y no en una imagen suelta. */.pf-card-id__overlay {    position: absolute;    inset: auto 0 0;    padding: 60px 20px 20px;    background: linear-gradient(0deg, rgba(10, 5, 22, 0.96) 30%, rgba(10, 5, 22, 0.7) 60%, transparent);}.pf-card-id__name {    display: flex;    align-items: center;    gap: 8px;    font-family: var(--pf-font-display);    font-size: 22px;    font-weight: 800;    letter-spacing: -0.025em;    line-height: 1.15;    color: #fff;}.pf-card-id__verified {    display: grid;    place-items: center;    width: 19px;    height: 19px;    flex: none;    border-radius: 50%;    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    color: #fff;}.pf-card-id__verified .pf-icon {    width: 11px;    height: 11px;}.pf-card-id__role {    margin-top: 4px;    font-size: 13px;    line-height: 1.4;    color: var(--pf-lavender-mid);}.pf-card-id__chips {    display: flex;    flex-wrap: wrap;    gap: 6px;    margin-top: 14px;    list-style: none;}.pf-card-id__chips li {    padding: 5px 11px;    border-radius: 999px;    border: 1px solid rgba(255, 255, 255, 0.2);    background: rgba(255, 255, 255, 0.1);    -webkit-backdrop-filter: blur(6px);    backdrop-filter: blur(6px);    font-family: var(--pf-font-mono);    font-size: 10.5px;    font-weight: 600;    color: #fff;}/* Pie de la tarjeta: LinkedIn como verificación externa del perfil. */.pf-card-id__link {    display: flex;    align-items: center;    gap: 10px;    padding: 14px 18px;    border-top: 1px solid var(--pf-line);    font-size: 13.5px;    font-weight: 600;    color: var(--pf-lavender-mid);    transition: background 0.25s, color 0.25s;}.pf-card-id__link span {    margin-right: auto;}.pf-card-id__link .pf-icon {    width: 17px;    height: 17px;    flex: none;}.pf-card-id__link .pf-icon--external {    width: 14px;    height: 14px;    opacity: 0.6;}.pf-card-id__link:hover {    background: rgba(111, 43, 220, 0.22);    color: #fff;}/* Tarjeta de transparencia: la promesa de "nada oculto" tiene más peso como   objeto propio que como una frase más dentro del párrafo. */.pf-about__badge {    display: flex;    align-items: flex-start;    gap: 12px;    margin-top: 14px;    padding: 16px 18px;    border-radius: 16px;    border: 1px solid rgba(47, 212, 138, 0.28);    background: rgba(47, 212, 138, 0.08);}.pf-about__badge-icon {    display: grid;    place-items: center;    width: 32px;    height: 32px;    flex: none;    border-radius: 10px;    background: rgba(47, 212, 138, 0.18);    color: #2fd48a;}.pf-about__badge-icon .pf-icon {    width: 17px;    height: 17px;}.pf-about__badge-body {    display: flex;    flex-direction: column;    gap: 3px;    min-width: 0;}.pf-about__badge-body b {    font-family: var(--pf-font-display);    font-size: 15px;    font-weight: 700;    color: #6ee7a8;}.pf-about__badge-body span {    font-size: 13px;    line-height: 1.45;    color: var(--pf-text-on-dark);}.pf-about__bio {    font-size: 16px;    line-height: 1.65;    color: var(--pf-text-on-dark);    margin-bottom: 16px;}/* La garantía que ningún competidor puede copiar: auditorías reales pasadas   con sus propios sistemas. Va destacada con barra de marca. */.pf-about__highlight {    display: flex;    align-items: flex-start;    gap: 15px;    margin: 24px 0;    padding: 20px 22px;    border-radius: 18px;    border: 1px solid var(--pf-line-dark);    border-left: 3px solid var(--pf-magenta);    background:        radial-gradient(120% 140% at 0% 0%, rgba(233, 30, 119, 0.16), transparent 60%),        var(--pf-surface);}.pf-about__highlight-icon {    display: grid;    place-items: center;    width: 38px;    height: 38px;    flex: none;    border-radius: 12px;    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    color: #fff;}.pf-about__highlight-icon .pf-icon {    width: 19px;    height: 19px;}.pf-about__highlight p {    font-family: var(--pf-font-display);    font-size: 16.5px;    font-weight: 600;    line-height: 1.45;    letter-spacing: -0.01em;    color: var(--pf-ink);}.pf-about__points {    display: grid;    gap: 13px;    list-style: none;    margin-bottom: 26px;}.pf-about__points li {    display: flex;    align-items: flex-start;    gap: 12px;    font-size: 15px;    line-height: 1.5;    color: var(--pf-text-on-dark);}.pf-about__stack {    padding: 20px 22px;    border-radius: 16px;    border: 1px solid var(--pf-line);    background: rgba(255, 255, 255, 0.03);    margin-bottom: 26px;}.pf-about__stack-title {    font-family: var(--pf-font-mono);    font-size: 11px;    letter-spacing: 0.14em;    text-transform: uppercase;    color: var(--pf-lavender-mid);    margin-bottom: 14px;}.pf-about__stack-list {    display: flex;    flex-wrap: wrap;    gap: 9px;    list-style: none;}.pf-about__stack-list li {    display: inline-flex;    align-items: center;    gap: 8px;    padding: 7px 14px;    border-radius: 999px;    border: 1px solid var(--pf-line-dark);    background: rgba(111, 43, 220, 0.14);    font-family: var(--pf-font-mono);    font-size: 12.5px;    font-weight: 500;    color: var(--pf-text-on-dark);    transition: border-color 0.25s, background 0.25s, transform 0.25s var(--pf-ease);}.pf-about__stack-list li:hover {    border-color: var(--pf-lavender-mid);    background: rgba(111, 43, 220, 0.26);    transform: translateY(-2px);}.pf-about__stack-dot {    width: 6px;    height: 6px;    border-radius: 50%;    background: var(--pf-lavender-mid);    flex: none;}/* Cierre de la sección: la frase y el botón forman un bloque con borde   propio. Suelto al final de una columna larga, el botón parecía olvidado. */.pf-about__close {    display: flex;    align-items: center;    justify-content: space-between;    gap: 22px;    padding: 20px 24px;    border-radius: 18px;    border: 1px solid var(--pf-line-dark);    background:        radial-gradient(130% 140% at 0% 0%, rgba(111, 43, 220, 0.26), transparent 62%),        var(--pf-surface);}.pf-about__media .pf-about__close {    margin-top: 14px;    flex-direction: column;    align-items: stretch;    gap: 14px;    padding: 20px;}.pf-about__media .pf-about__close-text {    max-width: none;}.pf-about__media .pf-about__close-btn {    justify-content: center;    width: 100%;}.pf-about__close-text {    font-size: 15px;    line-height: 1.5;    color: var(--pf-text-on-dark);    max-width: 40ch;}.pf-about__close-btn {    flex: none;}@media (max-width: 560px) {    .pf-about__close {        flex-direction: column;        align-items: stretch;        gap: 16px;        padding: 20px;    }    .pf-about__close-btn {        justify-content: center;    }}/* Banda de autoridad: conocimiento del proceso + auditorías reales.   Es el argumento que ningún competidor puede copiar pegando código. */.pf-authority {    display: grid;    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);    gap: 40px;    align-items: center;    margin-top: 34px;    padding: 34px 36px;    border: 1px solid var(--pf-line-dark);    border-radius: 22px;    background:        radial-gradient(120% 140% at 0% 0%, rgba(111, 43, 220, 0.3), transparent 60%),        var(--pf-surface);}.pf-authority__title {    font-family: var(--pf-font-display);    font-size: clamp(23px, 2.4vw, 30px);    font-weight: 700;    line-height: 1.15;    letter-spacing: -0.02em;    color: var(--pf-ink);    margin-bottom: 10px;}.pf-authority__text {    font-size: 15px;    line-height: 1.55;    color: var(--pf-ink-soft);}.pf-authority__list {    display: grid;    gap: 14px;    list-style: none;}.pf-authority__list li {    display: flex;    align-items: flex-start;    gap: 12px;    font-size: 15px;    line-height: 1.5;    color: var(--pf-text-on-dark);}.pf-authority__tick {    display: inline-grid;    place-items: center;    width: 26px;    height: 26px;    flex: none;    margin-top: 1px;    border-radius: 50%;    background: rgba(47, 212, 138, 0.18);    color: #2fd48a;}.pf-authority__tick .pf-icon {    width: 14px;    height: 14px;}/* Grilla de tarjetas — imagen primero, estilo galería *//* Tres tarjetas compactas en fila. auto-fit evita el hueco que dejaba una   grilla de 2 columnas con 3 proyectos. */.pf-projects-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(296px, 1fr));    gap: 24px;}.pf-project-card {    display: flex;}/* Toda la tarjeta es el botón que abre la ficha: un solo objetivo de clic,   sin enlaces sueltos compitiendo dentro. */.pf-project-card__trigger {    display: flex;    flex-direction: column;    width: 100%;    padding: 0;    text-align: left;    border-radius: 20px;    overflow: hidden;    background: var(--pf-ink-2);    border: 1px solid var(--pf-line-dark);    color: inherit;    font: inherit;    cursor: pointer;    transition: transform 0.4s var(--pf-ease), border-color 0.4s, box-shadow 0.4s;}.pf-project-card__trigger:hover {    transform: translateY(-6px);    border-color: rgba(182, 156, 240, 0.55);    box-shadow: 0 30px 70px -26px rgba(111, 43, 220, 0.55);}.pf-project-card__media {    display: block;    position: relative;    aspect-ratio: 16 / 10;    overflow: hidden;    background:        radial-gradient(circle at 30% 30%, rgba(111, 43, 220, 0.35), transparent 60%),        linear-gradient(150deg, #2d1b52, var(--pf-ink-2));}.pf-project-card__media::after {    content: "";    position: absolute;    inset: 0;    background: linear-gradient(0deg, rgba(15, 9, 28, 0.75) 0%, transparent 45%);    pointer-events: none;}.pf-project-card__media img {    position: absolute;    inset: 0;    width: 100%;    height: 100%;    object-fit: cover;    object-position: top left;    transition: transform 0.7s var(--pf-ease);}.pf-project-card__trigger:hover .pf-project-card__media img {    transform: scale(1.06);}.pf-project-card__media-placeholder {    position: absolute;    inset: 0;    display: grid;    place-items: center;    font-family: var(--pf-font-display);    font-size: clamp(22px, 2.6vw, 30px);    font-weight: 800;    letter-spacing: -0.02em;    color: transparent;    -webkit-text-stroke: 1.5px rgba(182, 156, 240, 0.5);}.pf-project-card__badges {    position: absolute;    z-index: 2;    top: 14px;    left: 14px;    display: flex;    flex-wrap: wrap;    gap: 6px;}.pf-badge {    display: inline-flex;    align-items: center;    gap: 6px;    padding: 5px 11px;    border-radius: 999px;    border: 1px solid rgba(255, 255, 255, 0.16);    background: rgba(15, 9, 28, 0.55);    -webkit-backdrop-filter: blur(6px);    backdrop-filter: blur(6px);    font-family: var(--pf-font-mono);    font-size: 11.5px;    color: #fff;}.pf-badge .pf-icon {    width: 13px;    height: 13px;}.pf-project-card__body {    display: flex;    flex-direction: column;    align-items: flex-start;    flex: 1;    padding: 22px 22px 20px;}.pf-project-card__sector {    display: inline-block;    margin-bottom: 12px;    padding: 4px 11px;    border-radius: 999px;    border: 1px solid var(--pf-line-dark);    background: rgba(111, 43, 220, 0.16);    font-family: var(--pf-font-mono);    font-size: 10.5px;    letter-spacing: 0.05em;    text-transform: lowercase;    color: var(--pf-lavender-mid);}.pf-project-card__logo {    max-height: 22px;    max-width: 74px;    width: auto;    object-fit: contain;    background: #fff;    border-radius: 6px;    padding: 3px 6px;}.pf-project-card__name {    display: flex;    align-items: center;    gap: 10px;    font-family: var(--pf-font-display);    font-size: 21px;    font-weight: 700;    letter-spacing: -0.015em;    line-height: 1.2;    color: #fff;    margin-bottom: 6px;}.pf-project-card__tagline {    display: block;    font-size: 14px;    line-height: 1.5;    color: var(--pf-text-on-dark);    margin-bottom: 16px;    flex: 1;}/* Afordancia explícita: sin ella nadie adivina que la tarjeta se abre. */.pf-project-card__more {    display: inline-flex;    align-items: center;    gap: 7px;    margin-top: auto;    padding-top: 14px;    width: 100%;    border-top: 1px solid var(--pf-line);    font-size: 13px;    font-weight: 600;    color: var(--pf-lavender-mid);    transition: color 0.25s;}.pf-project-card__trigger:hover .pf-project-card__more {    color: #fff;}.pf-project-card__more .pf-icon {    width: 15px;    height: 15px;    transition: transform 0.3s var(--pf-ease);}.pf-project-card__trigger:hover .pf-project-card__more .pf-icon {    transform: translateX(4px);}/* ==========================================================================   Modal genérico — ficha de proyecto   ========================================================================== */.pf-modal {    position: fixed;    inset: 0;    z-index: 200;    display: grid;    place-items: center;    padding: 24px;}.pf-modal[hidden] {    display: none;}.pf-modal__backdrop {    position: absolute;    inset: 0;    background: rgba(6, 3, 14, 0.8);    -webkit-backdrop-filter: blur(6px);    backdrop-filter: blur(6px);}.pf-modal__dialog {    position: relative;    width: min(1100px, 100%);    max-height: min(90vh, 960px);    overflow-y: auto;    border-radius: 24px;    border: 1px solid var(--pf-line-dark);    background: var(--pf-surface);    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9);    animation: pf-modal-in 0.35s var(--pf-ease);}@keyframes pf-modal-in {    from { opacity: 0; transform: translateY(18px) scale(0.98); }    to { opacity: 1; transform: none; }}.pf-modal__close {    position: absolute;    z-index: 3;    top: 16px;    right: 16px;    display: grid;    place-items: center;    width: 38px;    height: 38px;    border: 1px solid rgba(255, 255, 255, 0.18);    border-radius: 50%;    background: rgba(15, 9, 28, 0.72);    -webkit-backdrop-filter: blur(6px);    backdrop-filter: blur(6px);    color: #fff;    cursor: pointer;    transition: background 0.25s, transform 0.25s;}.pf-modal__close:hover {    background: var(--pf-purple);    transform: rotate(90deg);}/* ==========================================================================   Formulario de cotización (modal de 3 pasos)   ========================================================================== *//* Diálogo en tres franjas: cabecera fija, cuerpo con scroll y pie fijo.   Antes el diálogo entero era el scroller y en pantallas bajas los botones   quedaban por debajo del pliegue — había que adivinar que estaban ahí. */.pf-quote__dialog {    display: flex;    flex-direction: column;    width: min(760px, 100%);    max-height: min(88vh, 900px);    overflow: hidden;    padding: 0;}.pf-quote__head {    flex: none;    padding: 30px 34px 0;}.pf-quote__body {    flex: 1 1 auto;    min-height: 0;    overflow-y: auto;    overscroll-behavior: contain;    padding: 22px 34px 4px;    scrollbar-width: thin;    scrollbar-color: rgba(182, 156, 240, 0.4) transparent;}.pf-quote__body::-webkit-scrollbar {    width: 6px;}.pf-quote__body::-webkit-scrollbar-thumb {    background: rgba(182, 156, 240, 0.4);    border-radius: 999px;}.pf-quote__form {    display: flex;    flex-direction: column;    min-height: 0;    flex: 1 1 auto;}.pf-quote__kicker {    font-family: var(--pf-font-mono);    font-size: 11px;    letter-spacing: 0.14em;    text-transform: uppercase;    color: var(--pf-lavender-mid);    margin-bottom: 8px;}.pf-quote__title {    font-family: var(--pf-font-display);    font-size: clamp(24px, 3vw, 32px);    font-weight: 700;    letter-spacing: -0.025em;    line-height: 1.15;    color: var(--pf-ink);    margin-bottom: 8px;}.pf-quote__subtitle {    font-size: 14.5px;    line-height: 1.55;    color: var(--pf-ink-soft);    max-width: 56ch;}/* Barra de progreso: con seis pasos de una sola pregunta, unos chips   numerados ocupaban más sitio que la pregunta misma. */.pf-quote__progress {    display: flex;    align-items: center;    gap: 14px;    margin-top: 22px;    padding-top: 20px;    border-top: 1px solid var(--pf-line);}.pf-quote__progress-bar {    flex: 1;    height: 5px;    border-radius: 999px;    background: rgba(255, 255, 255, 0.08);    overflow: hidden;}.pf-quote__progress-bar span {    display: block;    height: 100%;    width: 16.6%;    border-radius: 999px;    background: linear-gradient(90deg, var(--pf-purple), var(--pf-magenta));    transition: width 0.45s var(--pf-ease);}.pf-quote__progress-text {    font-family: var(--pf-font-mono);    font-size: 12px;    color: var(--pf-ink-soft);    white-space: nowrap;}.pf-quote__progress-text #pf-quote-count {    color: var(--pf-lavender-mid);    font-weight: 700;}/* Saltar: discreto a propósito. Existe para no atrapar a nadie, no para   invitar a saltarse el formulario. */.pf-quote__skip {    margin-left: auto;    padding: 8px 4px;    white-space: nowrap;    border: 0;    background: none;    font-family: inherit;    font-size: 13px;    color: var(--pf-ink-soft);    text-decoration: underline;    text-underline-offset: 3px;    cursor: pointer;    transition: color 0.25s;}.pf-quote__skip:hover {    color: var(--pf-ink);}.pf-quote__panel {    display: none;    border: 0;    padding: 0;    margin: 0;    min-width: 0;    animation: pf-quote-in 0.35s var(--pf-ease);}.pf-quote__panel.is-active {    display: block;}@keyframes pf-quote-in {    from { opacity: 0; transform: translateX(12px); }    to { opacity: 1; transform: none; }}.pf-quote__legend {    display: block;    float: none;    width: 100%;    font-family: var(--pf-font-display);    font-size: 17px;    font-weight: 700;    color: var(--pf-ink);    margin-bottom: 14px;    padding: 0;}.pf-quote__legend i {    display: block;    font-style: normal;    font-family: var(--pf-font-body);    font-size: 13px;    font-weight: 400;    color: var(--pf-ink-soft);    margin-top: 3px;}.pf-quote__legend--sub {    font-size: 14.5px;    margin-top: 24px;    margin-bottom: 11px;}/* Tarjetas seleccionables en vez de casillas: objetivo táctil grande y el   estado elegido se ve de un vistazo. */.pf-quote__tiles {    display: grid;    gap: 11px;}.pf-quote__tiles--2 {    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));}.pf-quote__tiles--pills {    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));}.pf-tile {    display: block;    cursor: pointer;}.pf-tile input {    position: absolute;    opacity: 0;    width: 0;    height: 0;}.pf-tile__box {    position: relative;    display: flex;    align-items: center;    gap: 12px;    height: 100%;    padding: 14px 15px;    border-radius: 15px;    border: 1px solid var(--pf-line);    background: rgba(255, 255, 255, 0.03);    transition: border-color 0.25s, background 0.25s, transform 0.25s var(--pf-ease);}.pf-tile:hover .pf-tile__box {    border-color: var(--pf-line-dark);    background: rgba(255, 255, 255, 0.06);    transform: translateY(-2px);}.pf-tile input:checked + .pf-tile__box {    border-color: var(--pf-lavender-mid);    background: rgba(111, 43, 220, 0.24);}.pf-tile input:focus-visible + .pf-tile__box {    outline: 3px solid var(--pf-purple);    outline-offset: 2px;}.pf-tile__icon {    display: grid;    place-items: center;    width: 38px;    height: 38px;    flex: none;    border-radius: 11px;    background: rgba(111, 43, 220, 0.22);    color: var(--pf-lavender-mid);    transition: background 0.25s, color 0.25s;}.pf-tile input:checked + .pf-tile__box .pf-tile__icon {    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    color: #fff;}.pf-tile__icon .pf-icon {    width: 19px;    height: 19px;}.pf-tile__text {    display: flex;    flex-direction: column;    gap: 2px;    min-width: 0;}.pf-tile__text b {    font-size: 14.5px;    font-weight: 600;    line-height: 1.3;    color: var(--pf-ink);}.pf-tile__text i {    font-style: normal;    font-size: 12.5px;    color: var(--pf-ink-soft);}.pf-tile__check {    display: grid;    place-items: center;    width: 22px;    height: 22px;    flex: none;    margin-left: auto;    border-radius: 50%;    border: 1.5px solid var(--pf-line-dark);    color: #fff;    opacity: 0.5;    transition: background 0.25s, border-color 0.25s, opacity 0.25s;}.pf-tile__check .pf-icon {    width: 12px;    height: 12px;    opacity: 0;    transition: opacity 0.2s;}.pf-tile input:checked + .pf-tile__box .pf-tile__check {    background: var(--pf-purple);    border-color: var(--pf-purple);    opacity: 1;}.pf-tile input:checked + .pf-tile__box .pf-tile__check .pf-icon {    opacity: 1;}.pf-tile--pill .pf-tile__box {    justify-content: center;    text-align: center;    padding: 12px 14px;}/* Campos de texto */.pf-quote__grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));    gap: 14px;}.pf-field {    display: flex;    flex-direction: column;    gap: 7px;    min-width: 0;}.pf-field--full {    grid-column: 1 / -1;}.pf-field__label {    font-size: 13px;    font-weight: 600;    color: var(--pf-ink-soft);}.pf-field__label b {    color: var(--pf-magenta);}.pf-field input,.pf-field textarea {    width: 100%;    padding: 13px 15px;    border-radius: 13px;    border: 1px solid var(--pf-line);    background: rgba(255, 255, 255, 0.03);    color: var(--pf-ink);    font-family: inherit;    font-size: 15px;    transition: border-color 0.25s, background 0.25s;}.pf-field textarea {    resize: vertical;    min-height: 96px;}.pf-field input::placeholder,.pf-field textarea::placeholder {    color: rgba(171, 159, 201, 0.6);}.pf-field input:focus,.pf-field textarea:focus {    outline: none;    border-color: var(--pf-lavender-mid);    background: rgba(111, 43, 220, 0.12);}.pf-quote__privacy {    display: flex;    align-items: flex-start;    gap: 10px;    margin-top: 18px;    font-size: 12.5px;    line-height: 1.5;    color: var(--pf-ink-soft);}.pf-quote__privacy .pf-icon {    width: 16px;    height: 16px;    flex: none;    margin-top: 1px;    color: #2fd48a;}.pf-quote__error {    margin-top: 16px;    padding: 12px 16px;    border-radius: 12px;    border: 1px solid rgba(233, 30, 119, 0.4);    background: rgba(233, 30, 119, 0.12);    font-size: 13.5px;    color: #f7a8cb;}/* Pie siempre a la vista, con fondo propio para que el contenido que pasa   por debajo al hacer scroll no se lea a través de él. */.pf-quote__actions {    flex: none;    display: flex;    align-items: center;    flex-wrap: wrap;    gap: 12px;    margin-top: 0;    padding: 18px 34px 26px;    border-top: 1px solid var(--pf-line);    background: var(--pf-surface);}.pf-quote__actions [data-quote-send] {    margin-left: auto;}.pf-btn.is-loading {    opacity: 0.7;    pointer-events: none;}/* Trampa antibots: fuera de pantalla, nunca oculta con display:none   (algunos robots ignoran los campos ocultos de esa forma). */.pf-quote__trap {    position: absolute;    left: -9999px;    width: 1px;    height: 1px;    overflow: hidden;}/* Versión en página propia: sin altura tope ni pie flotante — la página ya   hace de contenedor, y ahí sí conviene que todo fluya. */.pf-quote--page .pf-quote__sheet {    display: block;    max-height: none;    overflow: visible;}.pf-quote--page .pf-quote__body {    overflow: visible;    padding: 22px 0 4px;}.pf-quote--page .pf-quote__head {    padding: 0;}.pf-quote--page .pf-quote__actions {    padding: 18px 0 0;    background: transparent;}/* Pantalla de confirmación */.pf-quote__done {    text-align: center;    padding: 34px;    overflow-y: auto;    animation: pf-quote-in 0.4s var(--pf-ease);}.pf-quote--page .pf-quote__done {    padding: 20px 0 10px;}.pf-quote__done-icon {    display: grid;    place-items: center;    width: 68px;    height: 68px;    margin: 0 auto 20px;    border-radius: 50%;    background: rgba(47, 212, 138, 0.16);    border: 1px solid rgba(47, 212, 138, 0.4);    color: #2fd48a;}.pf-quote__done-icon .pf-icon {    width: 32px;    height: 32px;}.pf-quote__done h3 {    font-family: var(--pf-font-display);    font-size: 25px;    font-weight: 700;    letter-spacing: -0.02em;    color: var(--pf-ink);    margin-bottom: 10px;}.pf-quote__done p {    font-size: 15px;    line-height: 1.6;    color: var(--pf-ink-soft);    max-width: 46ch;    margin: 0 auto 24px;}.pf-quote__done-actions {    display: flex;    flex-wrap: wrap;    justify-content: center;    gap: 12px;}/* ==========================================================================   Hero de proyecto — frame de browser con degradado   ========================================================================== *//* Contenedor del hero: degradado profundo de marca */.pf-project-hero {    position: relative;    overflow: hidden;    background: linear-gradient(        160deg,        #1a0a38 0%,        #0e0620 35%,        #06030f 100%    );    padding: 36px 40px 0;    border-radius: 24px 24px 0 0;    /* Linea inferior decorativa */    border-bottom: 1px solid rgba(111, 43, 220, 0.3);}/* Resplandor de marca (blob de luz en el fondo) */.pf-project-hero__glow {    position: absolute;    width: 600px;    height: 400px;    top: -100px;    left: 50%;    transform: translateX(-50%);    background: radial-gradient(        ellipse at center,        rgba(111, 43, 220, 0.35) 0%,        rgba(111, 43, 220, 0.1) 45%,        transparent 70%    );    pointer-events: none;}/* Frame que simula una ventana de browser */.pf-project-hero__browser {    position: relative;    z-index: 1;    border-radius: 10px 10px 0 0;    border: 1px solid rgba(255, 255, 255, 0.12);    border-bottom: none;    background: #0e0820;    box-shadow:        0 -4px 40px -10px rgba(111, 43, 220, 0.4),        0 30px 60px -20px rgba(0, 0, 0, 0.8),        inset 0 1px 0 rgba(255, 255, 255, 0.08);    overflow: hidden;}/* Barra de chrome del browser */.pf-project-hero__bar {    display: flex;    align-items: center;    gap: 8px;    padding: 10px 14px;    background: rgba(255, 255, 255, 0.04);    border-bottom: 1px solid rgba(255, 255, 255, 0.08);    flex-shrink: 0;}/* Botones semáforo */.pf-project-hero__dot {    width: 10px;    height: 10px;    border-radius: 50%;    flex-shrink: 0;}.pf-project-hero__dot:nth-child(1) { background: #ff5f57; }.pf-project-hero__dot:nth-child(2) { background: #febc2e; }.pf-project-hero__dot:nth-child(3) { background: #28c840; }/* URL pill */.pf-project-hero__bar-url {    flex: 1;    background: rgba(255, 255, 255, 0.06);    border-radius: 6px;    padding: 3px 12px;    font-family: var(--pf-font-mono);    font-size: 11px;    color: rgba(255, 255, 255, 0.4);    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;    max-width: 340px;    margin: 0 auto;}/* Pantalla — la imagen ocupa todo el ancho del frame */.pf-project-hero__screen {    position: relative;    overflow: hidden;    /* Limita la altura para que no ocupe toda la pantalla del modal */    max-height: 380px;    display: flex;    align-items: flex-start;    justify-content: center;    background: #fff;    cursor: zoom-in;}/* La imagen muestra la parte superior de la captura (la más relevante)   sin recortar: se ve completa a lo ancho y hace scroll natural si es larga */.pf-project-detail__shot {    display: block;    width: 100%;    height: auto;    object-fit: cover;    object-position: top center;    transition: transform 0.4s var(--pf-ease);}.pf-project-hero__screen:hover .pf-project-detail__shot {    transform: scale(1.015);}.pf-project-detail__body {    padding: 30px 34px 34px;}.pf-project-detail__head {    padding-bottom: 20px;    margin-bottom: 20px;    border-bottom: 1px solid var(--pf-line);}.pf-project-detail__name {    font-family: var(--pf-font-display);    font-size: clamp(26px, 3vw, 34px);    font-weight: 700;    letter-spacing: -0.025em;    line-height: 1.1;    color: var(--pf-ink);    margin-bottom: 6px;}.pf-project-detail__tagline {    font-size: 16px;    color: var(--pf-text-on-dark);    margin-bottom: 14px;}.pf-project-detail__badges {    display: flex;    flex-wrap: wrap;    gap: 8px;}.pf-project-detail__desc {    font-size: 15.5px;    line-height: 1.6;    color: var(--pf-ink-soft);    margin-bottom: 22px;}/* La descripción es contenido de entrada, así que puede traer varios párrafos   o una lista. El último hijo no suma margen para no descuadrar la ficha. */.pf-project-detail__desc > *:last-child {    margin-bottom: 0;}.pf-project-detail__desc p {    margin: 0 0 12px;}.pf-project-detail__desc ul,.pf-project-detail__desc ol {    margin: 0 0 12px;    padding-left: 20px;}/* Galería de capturas estilo tienda de apps.   Todas las imágenes comparten ALTURA y el ancho sale de su proporción real,   así una captura de móvil (vertical) y una de web (horizontal) conviven en   la misma tira sin recortes ni deformación. *//* Grupos de capturas por soporte (móvil / navegador), como las pestañas de   una ficha de tienda de aplicaciones. El rótulo evita que el visitante tenga   que deducir por la proporción qué está mirando. */.pf-shots-group {    margin-bottom: 26px;}.pf-shots-group__label {    display: flex;    align-items: center;    gap: 8px;    margin-bottom: 12px;    font-family: var(--pf-font-mono);    font-size: 11.5px;    letter-spacing: 0.12em;    text-transform: uppercase;    color: var(--pf-ink-soft);}.pf-shots-group__label svg {    width: 15px;    height: 15px;    flex: none;    opacity: 0.8;}/* El carrusel ya trae su propio margen inferior; dentro de un grupo lo pone   el contenedor, si no se suman dos separaciones. */.pf-shots-group .pf-shots {    margin-bottom: 0;}.pf-shots {    display: flex;    gap: 14px;    margin-bottom: 26px;    padding-bottom: 12px;    overflow-x: auto;    scroll-snap-type: x mandatory;    scrollbar-width: thin;    scrollbar-color: var(--pf-lavender-mid) transparent;    /* Sangrado a los bordes del modal: sugiere que hay más al desplazar. */    margin-inline: -34px;    padding-inline: 34px;}.pf-shots::-webkit-scrollbar {    height: 6px;}.pf-shots::-webkit-scrollbar-track {    background: rgba(255, 255, 255, 0.05);    border-radius: 999px;}.pf-shots::-webkit-scrollbar-thumb {    background: rgba(182, 156, 240, 0.5);    border-radius: 999px;}.pf-shots__item {    flex: none;    scroll-snap-align: start;    border-radius: 16px;    overflow: hidden;    border: 1px solid var(--pf-line-dark);    background: var(--pf-deep);    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);    transition: transform 0.35s var(--pf-ease), border-color 0.35s;    padding: 0;}.pf-shots__item:hover {    transform: translateY(-4px);    border-color: var(--pf-lavender-mid);}/* Botón wrapper de cada shot — ocupa todo el item */.pf-shots__zoom-btn {    position: relative;    display: block;    background: none;    border: none;    padding: 0;    cursor: zoom-in;    line-height: 0;}/* Icono de zoom que aparece en hover */.pf-shots__zoom-icon {    position: absolute;    inset: 0;    display: grid;    place-items: center;    background: rgba(10, 4, 22, 0.55);    color: #fff;    opacity: 0;    transition: opacity 0.25s;    border-radius: inherit;    -webkit-backdrop-filter: blur(2px);    backdrop-filter: blur(2px);}.pf-shots__zoom-btn:hover .pf-shots__zoom-icon,.pf-shots__zoom-btn:focus-visible .pf-shots__zoom-icon {    opacity: 1;}/* Altura fija + ancho automático: una captura de móvil (≈0.45 de proporción)   sale estrecha y una de web (≈2.1) sale ancha, ambas sin recorte. El tope   evita que un panel muy panorámico ocupe media pantalla él solo. */.pf-shots__item img {    display: block;    height: 420px;    width: auto;    max-width: min(880px, 78vw);    object-fit: contain;}/* ==========================================================================   Demo Viewer — Play Store style: carrusel horizontal con imágenes GRANDES   Estructura: header · stage (track scrollable + flechas) · footer (thumbs + zoom)   ========================================================================== */.pf-demo-viewer {    margin-bottom: 28px;    border-radius: 16px;    overflow: hidden;    border: 1px solid var(--pf-line-dark);    background: #08031a;}/* ---- Header ---- */.pf-demo-viewer__header {    display: flex;    align-items: center;    justify-content: space-between;    padding: 11px 20px;    border-bottom: 1px solid var(--pf-line-dark);    background: rgba(255, 255, 255, 0.025);}.pf-demo-viewer__heading {    display: flex;    align-items: center;    gap: 8px;    font-family: var(--pf-font-mono);    font-size: 10.5px;    letter-spacing: 0.1em;    text-transform: uppercase;    color: var(--pf-ink-soft);}.pf-demo-viewer__heading svg {    flex: none;    color: var(--pf-lavender-mid);}.pf-demo-viewer__counter {    font-family: var(--pf-font-mono);    font-size: 12px;    color: var(--pf-ink-soft);    display: flex;    align-items: baseline;    gap: 3px;}.pf-demo-viewer__counter-cur {    font-size: 17px;    font-weight: 700;    color: var(--pf-lavender-mid);    line-height: 1;}.pf-demo-viewer__counter-sep { opacity: 0.3; margin: 0 1px; }/* ---- Stage: zona de scroll con carrusel horizontal ---- */.pf-demo-viewer__stage {    position: relative;    background: #07021a;    /* degradado en los bordes para dar profundidad */    background-image:        radial-gradient(ellipse at 50% 0%, rgba(111,43,220,0.1) 0%, transparent 60%),        radial-gradient(ellipse at 50% 100%, rgba(60,20,120,0.08) 0%, transparent 50%);}/* Track: carrusel horizontal con scroll-snap, barra oculta */.pf-demo-viewer__track {    display: flex;    gap: 24px;    /* padding lateral: deja espacio para las flechas y centra la primera captura */    padding: 36px 80px;    overflow-x: auto;    scroll-snap-type: x mandatory;    overscroll-behavior-x: contain;    scrollbar-width: none;    -ms-overflow-style: none;    /* Centrar verticalmente imágenes de distintas alturas */    align-items: center;}.pf-demo-viewer__track::-webkit-scrollbar { display: none; }/* Slide individual — LA IMAGEN OCUPA SU TAMAÑO NATURAL */.pf-demo-viewer__slide {    flex: none;    scroll-snap-align: center;    border-radius: 12px;    overflow: hidden;    cursor: zoom-in;    box-shadow:        0 4px 20px rgba(0, 0, 0, 0.5),        0 16px 60px rgba(0, 0, 0, 0.5),        0 0 0 1px rgba(255, 255, 255, 0.06);    transition: transform 0.3s var(--pf-ease), box-shadow 0.3s var(--pf-ease);    /* Highlight ring on hover */    outline: 2px solid transparent;    outline-offset: 3px;    transition: transform 0.28s var(--pf-ease), box-shadow 0.28s, outline-color 0.2s;}.pf-demo-viewer__slide:hover {    transform: translateY(-6px) scale(1.015);    box-shadow:        0 8px 32px rgba(0, 0, 0, 0.55),        0 24px 80px rgba(0, 0, 0, 0.55),        0 0 0 1px rgba(182, 156, 240, 0.35);    outline-color: rgba(182, 156, 240, 0.22);}/* Imagen principal: ALTURA FIJA, ancho automático — igual que Play Store */.pf-demo-viewer__slide img {    display: block;    height: 480px;    width: auto;    /* Máximo para screenshots web muy panorámicos */    max-width: min(820px, 78vw);    object-fit: contain;    vertical-align: top;}/* ---- Flechas de navegación (superpuestas en el stage) ---- */.pf-demo-viewer__nav {    position: absolute;    top: 50%;    transform: translateY(-50%);    z-index: 20;    display: grid;    place-items: center;    width: 44px;    height: 44px;    border-radius: 50%;    border: 1px solid rgba(255, 255, 255, 0.15);    background: rgba(6, 2, 18, 0.82);    -webkit-backdrop-filter: blur(12px);    backdrop-filter: blur(12px);    color: rgba(255, 255, 255, 0.9);    cursor: pointer;    opacity: 0;    transition: opacity 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;}.pf-demo-viewer__stage:hover .pf-demo-viewer__nav,.pf-demo-viewer__stage:focus-within .pf-demo-viewer__nav {    opacity: 1;}.pf-demo-viewer__nav:hover {    background: var(--pf-purple);    border-color: transparent;    transform: translateY(-50%) scale(1.1);}.pf-demo-viewer__nav--prev { left: 14px; }.pf-demo-viewer__nav--next { right: 14px; }.pf-demo-viewer__nav:disabled {    opacity: 0 !important;    pointer-events: none;}/* ---- Footer: thumbnail strip + botón de zoom ---- */.pf-demo-viewer__footer {    display: flex;    align-items: center;    gap: 14px;    padding: 10px 20px;    border-top: 1px solid var(--pf-line-dark);    background: rgba(0, 0, 0, 0.25);}/* Thumbnail strip horizontal */.pf-demo-viewer__thumbs {    display: flex;    gap: 8px;    flex: 1;    overflow-x: auto;    overflow-y: hidden;    overscroll-behavior: contain;    scrollbar-width: none;    padding: 3px 2px;    align-items: center;}.pf-demo-viewer__thumbs::-webkit-scrollbar { display: none; }.pf-demo-viewer__thumb {    position: relative;    flex: none;    width: 54px;    height: 48px;    border-radius: 8px;    overflow: hidden;    border: 2px solid rgba(255, 255, 255, 0.08);    background: #0a0518;    cursor: pointer;    padding: 0;    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;}.pf-demo-viewer__thumb:hover {    border-color: rgba(182, 156, 240, 0.5);    transform: scale(1.06);}.pf-demo-viewer__thumb.is-active {    border-color: var(--pf-purple);    box-shadow: 0 0 0 2px rgba(111, 43, 220, 0.35);}.pf-demo-viewer__thumb img {    width: 100%;    height: 100%;    object-fit: cover;    object-position: top center;    opacity: 0.55;    transition: opacity 0.2s;    pointer-events: none;    display: block;}.pf-demo-viewer__thumb:hover img,.pf-demo-viewer__thumb.is-active img {    opacity: 1;}.pf-demo-viewer__thumb-badge {    position: absolute;    bottom: 3px;    right: 3px;    font-family: var(--pf-font-mono);    font-size: 7px;    letter-spacing: 0.04em;    text-transform: uppercase;    padding: 1px 4px;    border-radius: 3px;    line-height: 1.5;    pointer-events: none;}.pf-demo-viewer__thumb-badge--mobile {    background: rgba(111, 43, 220, 0.75);    color: #e6d8ff;}.pf-demo-viewer__thumb-badge--web {    background: rgba(22, 82, 200, 0.75);    color: #c8daff;}/* Botón de zoom en el footer */.pf-demo-viewer__zoom-btn {    flex: none;    display: flex;    align-items: center;    gap: 6px;    padding: 7px 14px;    border-radius: 20px;    border: 1px solid var(--pf-line-dark);    background: rgba(111, 43, 220, 0.1);    color: var(--pf-lavender-mid);    font-family: var(--pf-font-mono);    font-size: 10.5px;    letter-spacing: 0.05em;    cursor: pointer;    transition: background 0.2s, color 0.2s, border-color 0.2s;    white-space: nowrap;}.pf-demo-viewer__zoom-btn:hover {    background: var(--pf-purple);    color: #fff;    border-color: transparent;}/* ---- Responsive: teléfonos angostos ---- */@media (max-width: 500px) {    .pf-demo-viewer__track {        padding: 24px 50px;        gap: 16px;    }    .pf-demo-viewer__slide img {        height: 360px;    }    .pf-demo-viewer__nav {        width: 36px;        height: 36px;        opacity: 0.8; /* Siempre visible en táctil */    }    .pf-demo-viewer__nav--prev { left: 8px; }    .pf-demo-viewer__nav--next { right: 8px; }}.pf-project-detail__features {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));    gap: 12px;    list-style: none;    margin-bottom: 28px;}.pf-project-detail__features li {    display: flex;    align-items: flex-start;    gap: 11px;    font-size: 14.5px;    line-height: 1.5;    color: var(--pf-text-on-dark);}.pf-project-detail__actions {    display: flex;    flex-wrap: wrap;    gap: 12px;}/* El dominio no va dentro del botón sino debajo: el botón dice qué hace,   el dominio aporta la prueba de que existe de verdad. */.pf-project-detail__host {    display: flex;    align-items: center;    gap: 8px;    margin-top: 14px;    font-family: var(--pf-font-mono);    font-size: 12.5px;    color: var(--pf-ink-soft);}.pf-project-detail__host .pf-icon {    width: 15px;    height: 15px;    color: var(--pf-lavender-mid);}/* ==========================================================================   Videos de demostración   ========================================================================== */.pf-videos__grid {    display: grid;    grid-template-columns: repeat(3, minmax(0, 1fr));    gap: 24px;}.pf-videos__grid--1 { grid-template-columns: minmax(0, 760px); justify-content: center; }.pf-videos__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.pf-video__poster {    position: relative;    display: block;    width: 100%;    aspect-ratio: 16 / 9;    border: 0;    border-radius: var(--pf-radius);    overflow: hidden;    cursor: pointer;    padding: 0;    background: var(--pf-deep);    box-shadow: var(--pf-shadow);}.pf-video__poster img {    width: 100%;    height: 100%;    object-fit: cover;    opacity: 0.9;    transition: transform 0.6s var(--pf-ease), opacity 0.4s;}.pf-video__poster:hover img {    transform: scale(1.05);    opacity: 1;}.pf-video__play {    position: absolute;    inset: 0;    display: grid;    place-items: center;    color: #fff;    background: radial-gradient(circle, rgba(28, 18, 48, 0.25), transparent 70%);    transition: transform 0.3s var(--pf-ease);}.pf-video__play .pf-icon {    width: 64px;    height: 64px;    filter: drop-shadow(0 6px 24px rgba(111, 43, 220, 0.7));}.pf-video__poster:hover .pf-video__play {    transform: scale(1.08);}.pf-video__title {    margin-top: 14px;    font-weight: 600;    font-size: 16px;}/* Modal de video — display:none por defecto; el atributo [hidden] por sí   solo no le gana a una regla de clase que fija display:grid */.pf-video-modal {    display: none;    position: fixed;    inset: 0;    z-index: 200;    padding: 24px;}.pf-video-modal:not([hidden]) {    display: grid;    place-items: center;}.pf-video-modal__backdrop {    position: absolute;    inset: 0;    background: rgba(18, 10, 34, 0.85);    -webkit-backdrop-filter: blur(6px);    backdrop-filter: blur(6px);}.pf-video-modal__dialog {    position: relative;    width: min(960px, 100%);}.pf-video-modal__frame {    aspect-ratio: 16 / 9;    border-radius: 16px;    overflow: hidden;    background: #000;    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.8);}.pf-video-modal__frame iframe {    width: 100%;    height: 100%;    border: 0;    display: block;}.pf-video-modal__close {    position: absolute;    top: -48px;    right: 0;    background: none;    border: 0;    color: #fff;    cursor: pointer;    padding: 8px;}.pf-video-modal__close .pf-icon {    width: 28px;    height: 28px;}/* ==========================================================================   Precios   ========================================================================== */.pf-pricing {    background:        linear-gradient(180deg, var(--pf-bg), var(--pf-surface) 30%, var(--pf-bg));}.pf-pricing__grid {    display: grid;    grid-template-columns: repeat(3, minmax(0, 1fr));    gap: 24px;    align-items: stretch;}.pf-plan {    position: relative;    display: flex;    flex-direction: column;    background: var(--pf-surface);    border: 1px solid var(--pf-line);    border-radius: 22px;    padding: 36px 32px;    transition: transform 0.35s var(--pf-ease), box-shadow 0.35s var(--pf-ease);}.pf-plan:hover {    transform: translateY(-6px);    box-shadow: var(--pf-shadow);}.pf-plan--featured {    background:        linear-gradient(var(--pf-surface), var(--pf-surface)) padding-box,        linear-gradient(160deg, var(--pf-purple), var(--pf-magenta)) border-box;    border: 2px solid transparent;    box-shadow: 0 24px 60px -24px rgba(111, 43, 220, 0.45);}.pf-plan--featured:hover {    box-shadow: 0 30px 70px -24px rgba(111, 43, 220, 0.55);}.pf-plan__flag {    position: absolute;    top: -14px;    left: 50%;    transform: translateX(-50%);    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    color: #fff;    font-family: var(--pf-font-mono);    font-size: 11.5px;    font-weight: 600;    letter-spacing: 0.08em;    text-transform: uppercase;    padding: 6px 16px;    border-radius: 999px;    white-space: nowrap;}.pf-plan__name {    font-family: var(--pf-font-display);    font-size: 20px;    font-weight: 700;    margin-bottom: 14px;}/* El campo ya no lleva una cifra sino el alcance ("Un proceso", "Mensual"):   46px estaban calibrados para "S/ 390" y una palabra larga desbordaba. */.pf-plan__price {    font-family: var(--pf-font-display);    font-size: clamp(26px, 2.6vw, 32px);    font-weight: 800;    letter-spacing: -0.025em;    line-height: 1.1;    color: var(--pf-lavender-mid);}.pf-plan__period {    font-family: var(--pf-font-mono);    font-size: 12.5px;    color: var(--pf-ink-soft);    margin: 8px 0 24px;}.pf-plan__features {    list-style: none;    display: grid;    gap: 11px;    margin-bottom: 30px;    flex: 1;}.pf-plan__features li {    display: flex;    gap: 10px;    font-size: 15px;    color: var(--pf-ink-soft);}.pf-plan__features .pf-icon {    width: 18px;    height: 18px;    margin-top: 3px;    color: var(--pf-lavender-mid);}/* El CTA ocupa el ancho de la tarjeta y puede partir en dos líneas.   .pf-btn lleva white-space:nowrap, y un texto como "Quiero digitalizar mi   operación" imponía ~345px de ancho MÍNIMO a su columna: la grilla no podía   encogerse, se desbordaba el contenedor y aparecía la barra horizontal. */.pf-plan .pf-btn {    width: 100%;    justify-content: center;    text-align: center;    white-space: normal;    line-height: 1.35;}.pf-pricing__note {    text-align: center;    margin-top: 34px;    font-family: var(--pf-font-mono);    font-size: 13px;    color: var(--pf-ink-soft);}/* ==========================================================================   Blog   ========================================================================== */.pf-blog__grid {    display: grid;    grid-template-columns: repeat(3, minmax(0, 1fr));    gap: 24px;}.pf-post {    display: flex;    flex-direction: column;    border-radius: var(--pf-radius);    overflow: hidden;    background: var(--pf-surface);    border: 1px solid var(--pf-line);    transition: transform 0.35s var(--pf-ease), box-shadow 0.35s var(--pf-ease);}.pf-post:hover {    transform: translateY(-5px);    box-shadow: var(--pf-shadow);}.pf-post__thumb {    display: block;    aspect-ratio: 16 / 9;    overflow: hidden;    background: var(--pf-lavender);}.pf-post__thumb img {    width: 100%;    height: 100%;    object-fit: cover;    transition: transform 0.6s var(--pf-ease);}.pf-post:hover .pf-post__thumb img {    transform: scale(1.05);}.pf-post__thumb-fallback {    display: block;    width: 100%;    height: 100%;    background:        radial-gradient(circle at 70% 20%, rgba(111, 43, 220, 0.3), transparent 55%),        var(--pf-lavender);}.pf-post__body {    padding: 24px;    display: flex;    flex-direction: column;    gap: 10px;}.pf-post__date {    font-family: var(--pf-font-mono);    font-size: 12px;    letter-spacing: 0.05em;    color: var(--pf-lavender-mid);}.pf-post__title {    font-family: var(--pf-font-display);    font-size: 19px;    font-weight: 700;    line-height: 1.3;}.pf-post__title a:hover {    color: var(--pf-lavender-mid);}.pf-post__excerpt {    font-size: 14.5px;    color: var(--pf-ink-soft);}/* ==========================================================================   Testimonios — carrusel   ========================================================================== */.pf-testimonials__viewport {    display: flex;    align-items: center;    gap: 20px;    max-width: 760px;    margin: 0 auto;}.pf-testimonials__arrow {    display: inline-grid;    place-items: center;    width: 44px;    height: 44px;    flex: none;    border-radius: 50%;    border: 1px solid var(--pf-line);    background: var(--pf-surface);    color: var(--pf-ink);    cursor: pointer;    transition: background 0.25s, border-color 0.25s;}.pf-testimonials__arrow:hover {    background: var(--pf-purple);    border-color: var(--pf-purple);    color: #fff;}.pf-testimonials__arrow .pf-icon {    width: 18px;    height: 18px;}.pf-testimonials__arrow--prev .pf-icon {    transform: rotate(180deg);}.pf-testimonials__track {    position: relative;    flex: 1;    min-width: 0;    min-height: 200px;}.pf-testimonial {    display: none;    flex-direction: column;    align-items: center;    text-align: center;    padding: 8px 12px;    animation: pf-testimonial-in 0.5s var(--pf-ease);}.pf-testimonial.is-active {    display: flex;}@keyframes pf-testimonial-in {    from { opacity: 0; transform: translateY(10px); }    to { opacity: 1; transform: translateY(0); }}.pf-testimonial__quote-icon {    color: var(--pf-lavender-mid);    margin-bottom: 10px;}.pf-testimonial__quote-icon .pf-icon {    width: 26px;    height: 26px;}.pf-testimonial__quote {    font-family: var(--pf-font-display);    font-size: clamp(17px, 2vw, 21px);    font-weight: 500;    line-height: 1.5;    color: var(--pf-ink);    margin-bottom: 22px;}.pf-testimonial__author {    display: flex;    align-items: center;    gap: 12px;}.pf-testimonial__avatar {    width: 46px;    height: 46px;    border-radius: 50%;    object-fit: cover;}.pf-testimonial__avatar--fallback {    display: inline-grid;    place-items: center;    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    color: #fff;    font-family: var(--pf-font-display);    font-weight: 700;    font-size: 17px;}.pf-testimonial__name {    font-weight: 600;    font-size: 14.5px;    color: var(--pf-ink);}.pf-testimonial__role {    font-size: 12.5px;    color: var(--pf-ink-soft);}.pf-testimonials__dots {    display: flex;    justify-content: center;    gap: 8px;    margin-top: 28px;}.pf-testimonials__dot {    width: 8px;    height: 8px;    border-radius: 50%;    border: 0;    padding: 0;    background: var(--pf-line);    cursor: pointer;    transition: background 0.25s, transform 0.25s;}.pf-testimonials__dot.is-active {    background: var(--pf-purple);    transform: scale(1.3);}/* ==========================================================================   Contacto — CTA final   ========================================================================== *//* Resplandor propio: es la última pantalla antes de decidir, merece más   presencia visual que una sección oscura más. */.pf-contact {    position: relative;    overflow: hidden;}.pf-contact::before {    content: "";    position: absolute;    inset: -40% 20% auto -10%;    height: 130%;    background: radial-gradient(circle, rgba(111, 43, 220, 0.32), transparent 62%);    filter: blur(40px);    pointer-events: none;}.pf-contact__inner {    position: relative;    display: grid;    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);    gap: 56px;    align-items: center;}.pf-contact__title {    font-family: var(--pf-font-display);    font-size: clamp(32px, 4vw, 50px);    font-weight: 700;    line-height: 1.1;    letter-spacing: -0.02em;    color: #fff;    margin-bottom: 18px;}.pf-contact__text {    font-size: 18px;    max-width: 56ch;    margin-bottom: 36px;}.pf-contact__actions {    display: flex;    flex-wrap: wrap;    gap: 16px;    margin-bottom: 26px;}.pf-contact__email {    display: inline-flex;    align-items: center;    gap: 10px;    font-family: var(--pf-font-mono);    font-size: 15px;    color: var(--pf-lavender-mid);    transition: color 0.2s;}.pf-contact__email:hover {    color: #fff;}/* Panel "qué pasa después"   Sustituye a la terminal de desarrollador: en el cierre, el visitante no   duda de tu perfil técnico —ya leyó toda la página— sino de en qué se está   metiendo al escribir. Tres pasos y esa duda desaparece. */.pf-steps {    position: relative;    overflow: hidden;    padding: 30px 32px;    border-radius: 22px;    border: 1px solid var(--pf-line-dark);    background:        radial-gradient(120% 130% at 100% 0%, rgba(111, 43, 220, 0.34), transparent 62%),        rgba(12, 6, 26, 0.72);    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);}.pf-steps__title {    font-family: var(--pf-font-mono);    font-size: 11.5px;    letter-spacing: 0.14em;    text-transform: uppercase;    color: var(--pf-lavender-mid);    margin-bottom: 22px;}.pf-steps__list {    display: grid;    gap: 20px;    list-style: none;    counter-reset: pf-step;}.pf-step {    position: relative;    display: flex;    align-items: flex-start;    gap: 16px;}/* Línea que une los pasos: convierte tres puntos sueltos en un recorrido. */.pf-step:not(:last-child)::before {    content: "";    position: absolute;    left: 17px;    top: 38px;    bottom: -20px;    width: 1px;    background: linear-gradient(var(--pf-line-dark), transparent);}.pf-step__num {    display: grid;    place-items: center;    width: 35px;    height: 35px;    flex: none;    border-radius: 50%;    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    color: #fff;    font-family: var(--pf-font-display);    font-size: 15px;    font-weight: 700;    box-shadow: 0 8px 20px -8px rgba(111, 43, 220, 0.7);}.pf-step__body {    display: flex;    flex-direction: column;    gap: 3px;    min-width: 0;}.pf-step__label {    font-family: var(--pf-font-display);    font-size: 16.5px;    font-weight: 700;    letter-spacing: -0.01em;    color: #fff;}.pf-step__text {    font-size: 14px;    line-height: 1.5;    color: var(--pf-text-on-dark);}/* Reversión de riesgo, lo último que se lee antes de decidir. */.pf-steps__note {    display: flex;    align-items: center;    gap: 10px;    margin-top: 24px;    padding-top: 20px;    border-top: 1px solid var(--pf-line);    font-size: 13.5px;    font-weight: 600;    color: #6ee7a8;}.pf-steps__note .pf-icon {    width: 17px;    height: 17px;    flex: none;}@keyframes pf-blink {    50% { opacity: 0; }}/* ==========================================================================   Footer   ========================================================================== */.pf-footer {    position: relative;    background: var(--pf-deep);    border-top: 1px solid var(--pf-line-dark);    padding: 56px 0 26px;    color: var(--pf-text-on-dark);    font-size: 14px;}/* Mismo hilo de marca que bajo la barra superior: abre y cierra la página   con el mismo gesto. */.pf-footer::before {    content: "";    position: absolute;    left: 0;    right: 0;    top: -1px;    height: 1px;    background: linear-gradient(90deg, transparent, var(--pf-purple), var(--pf-magenta), transparent);    opacity: 0.6;}.pf-footer__top {    display: grid;    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);    gap: 40px;    padding-bottom: 36px;    border-bottom: 1px solid var(--pf-line);}.pf-footer__logo {    height: 38px;    width: auto;    margin-bottom: 14px;}.pf-footer__brand .pf-header__wordmark {    display: inline-block;    margin-bottom: 14px;}.pf-footer__pitch {    font-size: 14px;    line-height: 1.55;    color: var(--pf-ink-soft);    max-width: 40ch;    margin-bottom: 18px;}.pf-footer__social {    display: flex;    gap: 10px;}.pf-footer__social a {    display: inline-grid;    place-items: center;    width: 38px;    height: 38px;    border-radius: 11px;    border: 1px solid var(--pf-line);    color: var(--pf-ink-soft);    transition: border-color 0.25s, color 0.25s, background 0.25s, transform 0.25s var(--pf-ease);}.pf-footer__social a:hover {    color: #fff;    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    border-color: transparent;    transform: translateY(-3px);}.pf-footer__social .pf-icon {    width: 18px;    height: 18px;}.pf-footer__col {    display: flex;    flex-direction: column;    gap: 11px;    align-items: flex-start;}.pf-footer__col-title {    font-family: var(--pf-font-mono);    font-size: 11px;    letter-spacing: 0.14em;    text-transform: uppercase;    color: var(--pf-lavender-mid);    margin-bottom: 3px;}.pf-footer__col a {    display: inline-flex;    align-items: center;    gap: 9px;    font-size: 14.5px;    color: var(--pf-ink-soft);    transition: color 0.25s, gap 0.25s;}.pf-footer__col a:hover {    color: #fff;    gap: 12px;}.pf-footer__col .pf-icon {    width: 16px;    height: 16px;    flex: none;    color: var(--pf-lavender-mid);}/* Tarjeta de disponibilidad: la misma del sidebar, para que quien llegue al   final sin haber abierto el menú se encuentre igual la puerta abierta. */.pf-footer__cta {    position: relative;    padding: 22px 22px 24px;    border-radius: 18px;    border: 1px solid var(--pf-line-dark);    background:        radial-gradient(120% 130% at 100% 0%, rgba(111, 43, 220, 0.32), transparent 62%),        var(--pf-surface);}.pf-footer__cta-dot {    display: block;    width: 9px;    height: 9px;    border-radius: 50%;    background: #2fd48a;    margin-bottom: 12px;    box-shadow: 0 0 0 0 rgba(47, 212, 138, 0.6);    animation: pf-pulse-dot 2.4s ease-out infinite;}.pf-footer__cta-title {    font-family: var(--pf-font-display);    font-size: 16px;    font-weight: 700;    color: var(--pf-ink);    margin-bottom: 6px;}.pf-footer__cta-text {    font-size: 13px;    line-height: 1.45;    color: var(--pf-ink-soft);    margin-bottom: 16px;}.pf-footer__bottom {    display: flex;    align-items: center;    justify-content: space-between;    gap: 16px;    flex-wrap: wrap;    padding-top: 22px;    font-size: 13px;    color: var(--pf-ink-soft);}.pf-footer__made {    font-family: var(--pf-font-mono);    font-size: 12px;    color: rgba(171, 159, 201, 0.7);}/* ==========================================================================   Animación de entrada (reveal on scroll)   ========================================================================== */.pf-reveal {    opacity: 0;    transform: translateY(26px);    transition: opacity 0.7s var(--pf-ease), transform 0.7s var(--pf-ease);    transition-delay: var(--reveal-delay, 0ms);}.pf-reveal.is-visible {    opacity: 1;    transform: none;}@media (prefers-reduced-motion: reduce) {    .pf-reveal {        opacity: 1;        transform: none;        transition: none;    }    .pf-showcase__card,    .pf-hero__badge-dot,    .pf-clients__list {        animation: none;    }    /* La demo del hero se muestra en su estado final (todo marcado y       firmado) en vez de reproducir el recorrido. El JS además no rota       las escenas, así que se queda en la primera. */    .pf-phone__scene.is-active .pf-phone__item,    .pf-phone__item {        animation: none;        border-color: rgba(182, 156, 240, 0.45);        background: rgba(111, 43, 220, 0.2);    }    .pf-phone__scene.is-active .pf-phone__check,    .pf-phone__check {        animation: none;        background: var(--pf-purple);        border-color: var(--pf-purple);    }    .pf-phone__scene.is-active .pf-phone__check svg,    .pf-phone__check svg,    .pf-phone__scene.is-active .pf-phone__sign-by,    .pf-phone__sign-by,    .pf-phone__scene.is-active .pf-punch__result,    .pf-punch__result,    .pf-phone__scene.is-active .pf-punch__button .pf-icon {        animation: none;        opacity: 1;        transform: none;    }    .pf-phone__scene.is-active .pf-phone__sign-path path,    .pf-phone__sign-path path {        animation: none;        stroke-dashoffset: 0;    }    .pf-phone__scene.is-active .pf-punch__button,    .pf-punch__ripple {        animation: none;    }    .pf-punch__ripple {        opacity: 0;    }    .esaico-portfolio {        scroll-behavior: auto;    }    /* El cajón sigue deslizando (es lo que comunica de dónde sale), pero       los enlaces aparecen de golpe en vez de escalonarse. */    .pf-sidebar .pf-nav__link,    .pf-sidebar__card,    .pf-sidebar__cv,    .pf-sidebar__social {        opacity: 1 !important;        transform: none !important;        transition: none !important;    }    .pf-nav-toggle .pf-icon {        transition: none;    }}/* ==========================================================================   Responsive   ========================================================================== */@media (max-width: 1024px) {    /* Sidebar → cajón deslizante + barra superior */    .pf-main--framed,    .pf-main--framed ~ .pf-footer {        margin-left: 0;    }    .pf-topbar {        display: flex;    }    .esaico-portfolio section[id] {        scroll-margin-top: -24px;    }    .esaico-portfolio #inicio {        scroll-margin-top: 60px;    }    .pf-hero {        padding-top: 84px;    }    /* Cajón: algo más ancho que el sidebar de escritorio para que los       objetivos táctiles respiren, y con el borde interior redondeado. */    .pf-sidebar {        width: min(320px, 86vw);        transform: translateX(-100%);        border-right: 0;        border-radius: 0 22px 22px 0;        box-shadow: 40px 0 80px -30px rgba(0, 0, 0, 0.75);        transition: transform 0.42s var(--pf-ease);        padding-top: 78px;        z-index: 120;    }    .pf-sidebar.is-open {        transform: translateX(0);    }    .pf-sidebar__brand {        display: none;    }    .pf-nav-toggle {        display: block;    }    /* Entrada escalonada de los enlaces: el cajón deja de "aparecer" y pasa       a montarse solo, que es lo que hace que se sienta de app nativa. */    .pf-sidebar .pf-nav__link,    .pf-sidebar__card,    .pf-sidebar__cv,    .pf-sidebar__social {        opacity: 0;        transform: translateX(-16px);        transition: opacity 0.4s var(--pf-ease), transform 0.4s var(--pf-ease);    }    .pf-sidebar.is-open .pf-nav__link,    .pf-sidebar.is-open .pf-sidebar__card,    .pf-sidebar.is-open .pf-sidebar__cv,    .pf-sidebar.is-open .pf-sidebar__social {        opacity: 1;        transform: none;    }    .pf-sidebar.is-open .pf-nav__link:nth-child(1) { transition-delay: 0.10s; }    .pf-sidebar.is-open .pf-nav__link:nth-child(2) { transition-delay: 0.15s; }    .pf-sidebar.is-open .pf-nav__link:nth-child(3) { transition-delay: 0.20s; }    .pf-sidebar.is-open .pf-nav__link:nth-child(4) { transition-delay: 0.25s; }    .pf-sidebar.is-open .pf-nav__link:nth-child(5) { transition-delay: 0.30s; }    .pf-sidebar.is-open .pf-nav__link:nth-child(6) { transition-delay: 0.35s; }    .pf-sidebar.is-open .pf-nav__link:nth-child(7) { transition-delay: 0.40s; }    .pf-sidebar.is-open .pf-nav__link:nth-child(8) { transition-delay: 0.45s; }    .pf-sidebar.is-open .pf-nav__link:nth-child(9) { transition-delay: 0.50s; }    .pf-sidebar.is-open .pf-sidebar__card { transition-delay: 0.54s; }    .pf-sidebar.is-open .pf-sidebar__cv { transition-delay: 0.58s; }    .pf-sidebar.is-open .pf-sidebar__social { transition-delay: 0.62s; }    /* Objetivos táctiles cómodos: 46px de alto real. */    .pf-sidebar .pf-nav__link {        padding: 11px 16px 11px 10px;        font-size: 15.5px;    }    .pf-sidebar .pf-nav__link::before {        width: 38px;        height: 38px;        left: 10px;    }    .pf-sidebar .pf-nav__link .pf-icon {        width: 19px;        height: 19px;        margin: 9.5px;    }    .pf-sidebar-overlay {        display: none;        position: fixed;        inset: 0;        z-index: 105;        background: rgba(6, 3, 14, 0.66);        -webkit-backdrop-filter: blur(5px);        backdrop-filter: blur(5px);    }    .pf-sidebar-overlay:not([hidden]) {        display: block;        animation: pf-overlay-in 0.35s var(--pf-ease);    }    @keyframes pf-overlay-in {        from { opacity: 0; }        to { opacity: 1; }    }    .pf-services__grid {        grid-template-columns: repeat(2, minmax(0, 1fr));    }    .pf-service,    .pf-service--featured {        grid-column: span 1;    }    .pf-service--featured {        grid-column: span 2;    }    .pf-pricing__grid,    .pf-blog__grid,    .pf-videos__grid {        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);    }    .pf-authority {        grid-template-columns: minmax(0, 1fr);        gap: 26px;        padding: 30px 26px;    }    /* La tarjeta pasa arriba y se limita en ancho: a una sola columna, un       retrato 4:5 a todo lo ancho empujaría el texto fuera de la pantalla.       Y deja de ser sticky: pegada ocuparía media pantalla al leer. */    .pf-about__grid {        grid-template-columns: minmax(0, 1fr);        gap: 34px;    }    .pf-about__media {        position: static;        max-width: 380px;        margin-inline: auto;    }    .pf-contact__inner {        grid-template-columns: minmax(0, 1fr);        gap: 44px;    }    /* La marca ocupa la fila completa y las tres columnas útiles se reparten       debajo: a 1024px cuatro columnas dejaban los enlaces en una tira. */    .pf-footer__top {        grid-template-columns: repeat(3, minmax(0, 1fr));        gap: 32px;    }    .pf-footer__brand {        grid-column: 1 / -1;    }    .pf-footer__pitch {        max-width: 60ch;    }}@media (max-width: 860px) {    .pf-hero {        padding-top: 120px;    }    .pf-hero__inner {        grid-template-columns: minmax(0, 1fr);        gap: 56px;    }    /* En móvil el texto va primero: la promesa antes que la demo. */    .pf-hero__showcase {        order: 1;        margin-inline: auto;    }    .pf-showcase__card--pdf { right: -20px; bottom: -26px; }    .pf-showcase__card--offline { left: -44px; top: 56%; }    .pf-showcase__card--ai { left: -20px; top: -30px; max-width: 186px; }    .pf-projects-grid {        grid-template-columns: minmax(0, 1fr);    }    /* Marca centrada de verdad: absoluta respecto a la barra, no en el flujo.       Con flex quedaba centrada solo si el botón y el toggle midieran lo       mismo, que no es el caso. */    .pf-topbar {        justify-content: space-between;    }    .pf-topbar__brand {        position: absolute;        left: 50%;        transform: translateX(-50%);        margin-right: 0;        max-width: 46%;    }    .pf-topbar__brand .pf-header__wordmark {        font-size: 20px;    }    .pf-topbar__brand img {        height: 26px;    }    /* El botón conserva texto: un icono suelto no dice qué hace. Se queda la       primera palabra ("Cotizar") y cae el resto, que ya se sobreentiende. */    .pf-topbar .pf-btn .pf-btn__soft {        display: none;    }    .pf-topbar .pf-btn {        flex: none;        gap: 7px;        padding: 9px 15px;        font-size: 14px;        border-radius: 12px;    }    .pf-topbar .pf-btn .pf-icon {        width: 16px;        height: 16px;    }}@media (max-width: 640px) {    .pf-section {        padding: 72px 0;    }    .esaico-portfolio section[id] {        scroll-margin-top: 12px;    }    .pf-container {        width: calc(100% - 36px);    }    .pf-services__grid,    .pf-pricing__grid,    .pf-blog__grid,    .pf-videos__grid {        grid-template-columns: minmax(0, 1fr);    }    /* En móvil el modal aprieta el padding, y capturas de 420px de alto       dejan poco sitio para el resto de la ficha. */    .pf-project-detail__body {        padding: 24px 20px 28px;    }    .pf-shots {        margin-inline: -20px;        padding-inline: 20px;    }    .pf-shots__item img {        height: 320px;    }    /* En móvil el diálogo llena casi toda la pantalla; el padding se ajusta       en cada franja porque el diálogo ya no lo lleva. */    .pf-quote__dialog {        max-height: 92vh;    }    .pf-quote__head {        padding: 24px 18px 0;    }    .pf-quote__body {        padding: 18px 18px 4px;    }    .pf-quote__actions {        padding: 14px 18px 18px;    }    .pf-quote__done {        padding: 26px 18px;    }    .pf-quote__actions [data-quote-send] {        flex: 1;        justify-content: center;    }    .pf-service--featured {        grid-column: span 1;    }    /* Los dos botones se reparten la fila en vez de apilarse a ancho completo:       así mantienen la misma relación que en escritorio, solo que a escala. */    .pf-hero__actions .pf-btn,    .pf-cta-pair .pf-btn {        flex: 1 1 0;        min-width: 0;        padding-inline: 12px;        font-size: 14.5px;        justify-content: center;    }    .pf-hero__actions,    .pf-cta-pair {        gap: 9px;    }    .pf-hero__actions .pf-btn span,    .pf-cta-pair .pf-btn span {        overflow: hidden;        text-overflow: ellipsis;    }    /* Con nowrap activo, a 375px la frase más larga rozaba el borde.       Bajar 1.5px de fuente deja ~35px de holgura. */    .pf-typewriter {        font-size: 13px;        padding-left: 11px;    }    .pf-benefits,    .pf-tech__grid {        grid-template-columns: minmax(0, 1fr);    }    .pf-footer {        padding-top: 44px;    }    .pf-footer__top {        grid-template-columns: minmax(0, 1fr);        gap: 30px;    }    .pf-footer__bottom {        flex-direction: column;        align-items: flex-start;        gap: 8px;    }    /* Con el teléfono a ~76vw ya no queda margen lateral para tres tarjetas       flotantes: se quedan las dos que responden objeciones de compra       (el PDF firmado y el trabajo sin señal) y se meten sobre la pantalla. */    .pf-showcase__card {        max-width: 200px;        padding: 9px 12px;    }    .pf-showcase__card--pdf { right: -6px; bottom: -22px; }    .pf-showcase__card--offline { left: -6px; top: -26px; max-width: 190px; }    .pf-showcase__card--ai { display: none; }    .pf-hero__compliance {        gap: 10px;        padding: 14px 16px;    }    .pf-contact__minor {        gap: 12px;    }    .pf-plan--featured {        order: -1;    }    .pf-testimonials__arrow {        width: 36px;        height: 36px;    }    .pf-testimonials__viewport {        gap: 10px;    }}/* Por debajo de 430px "Prefiero WhatsApp" no cabe en media fila: se cae la   primera palabra y el botón sigue diciendo lo esencial. */@media (max-width: 430px) {    .pf-btn__soft {        display: none;    }}/* Fila menor de contacto: correo y, si existe, la agenda como tercera vía. */.pf-contact__minor {    display: flex;    flex-wrap: wrap;    gap: 22px;}/* Formulario incrustado en su propia página: mismo contenido que el modal,   presentado como tarjeta centrada en vez de diálogo flotante. */.pf-quote--page .pf-quote__sheet {    width: min(760px, 100%);    margin-inline: auto;    padding: 36px 36px 30px;    border-radius: 24px;    border: 1px solid var(--pf-line-dark);    background:        radial-gradient(120% 120% at 100% 0%, rgba(111, 43, 220, 0.22), transparent 60%),        var(--pf-surface);    box-shadow: var(--pf-shadow);}@media (max-width: 640px) {    .pf-quote--page .pf-quote__sheet {        padding: 26px 18px 22px;        border-radius: 18px;    }}/* ==========================================================================   Resumen previo al envío   ========================================================================== */.pf-summary {    display: grid;    gap: 8px;}/* Cada fila es un botón: al tocarla vuelve a su paso. Corregir sin retroceder   uno por uno es lo que hace que el resumen se sienta útil y no un trámite. */.pf-summary__row {    display: grid;    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) auto;    align-items: center;    gap: 14px;    width: 100%;    padding: 13px 15px;    border-radius: 13px;    border: 1px solid var(--pf-line);    background: rgba(255, 255, 255, 0.03);    font-family: inherit;    text-align: left;    cursor: pointer;    transition: border-color 0.25s, background 0.25s;}.pf-summary__row:hover {    border-color: var(--pf-lavender-mid);    background: rgba(111, 43, 220, 0.16);}.pf-summary__label {    font-size: 12.5px;    color: var(--pf-ink-soft);    line-height: 1.35;}.pf-summary__value {    font-size: 14.5px;    font-weight: 600;    color: var(--pf-ink);    line-height: 1.35;}.pf-summary__edit {    font-size: 12px;    font-weight: 600;    color: var(--pf-lavender-mid);    text-decoration: underline;    text-underline-offset: 3px;    white-space: nowrap;    opacity: 0;    transition: opacity 0.25s;}.pf-summary__row:hover .pf-summary__edit,.pf-summary__row:focus-visible .pf-summary__edit {    opacity: 1;}/* Tarjeta de datos personales: se separa del resto porque no es una   respuesta más, es a quién hay que contestarle. */.pf-summary__card {    margin-top: 6px;    padding: 18px 18px 16px;    border-radius: 15px;    border: 1px solid var(--pf-line-dark);    background:        radial-gradient(120% 130% at 100% 0%, rgba(111, 43, 220, 0.24), transparent 62%),        rgba(255, 255, 255, 0.03);}.pf-summary__who {    font-family: var(--pf-font-display);    font-size: 17px;    font-weight: 700;    color: var(--pf-ink);    margin-bottom: 3px;}.pf-summary__how {    font-family: var(--pf-font-mono);    font-size: 12.5px;    color: var(--pf-lavender-mid);}.pf-summary__msg {    margin-top: 12px;    padding-top: 12px;    border-top: 1px solid var(--pf-line);    font-size: 14px;    line-height: 1.55;    font-style: italic;    color: var(--pf-text-on-dark);}/* Los dos envíos van juntos a la derecha: correo manda, WhatsApp acompaña. */.pf-quote__send-group {    display: flex;    align-items: center;    gap: 10px;    margin-left: auto;}@media (max-width: 640px) {    .pf-summary__row {        grid-template-columns: minmax(0, 1fr) auto;        gap: 4px 12px;    }    .pf-summary__label {        grid-column: 1 / -1;    }    .pf-quote__send-group {        width: 100%;        margin-left: 0;    }    .pf-quote__send-group .pf-btn {        flex: 1 1 0;        min-width: 0;        padding-inline: 12px;        justify-content: center;    }}/* Insignia de contexto: qué plan o proyecto traía el visitante al abrir.   Cierra el circuito entre la sección de precios y el formulario. */.pf-quote__context {    display: inline-flex;    align-items: center;    gap: 9px;    margin-top: 16px;    padding: 8px 15px 8px 10px;    border-radius: 999px;    border: 1px solid rgba(47, 212, 138, 0.35);    background: rgba(47, 212, 138, 0.1);    font-size: 13.5px;    font-weight: 600;    color: #6ee7a8;}.pf-quote__context .pf-icon {    width: 15px;    height: 15px;    flex: none;}/* Misma modalidad, encabezando el resumen. */.pf-summary__pick {    display: flex;    align-items: center;    justify-content: space-between;    gap: 14px;    flex-wrap: wrap;    padding: 13px 16px;    margin-bottom: 4px;    border-radius: 13px;    border: 1px solid rgba(47, 212, 138, 0.3);    background: rgba(47, 212, 138, 0.09);}.pf-summary__pick span {    font-size: 12.5px;    color: var(--pf-ink-soft);}.pf-summary__pick b {    font-family: var(--pf-font-display);    font-size: 15.5px;    font-weight: 700;    color: #6ee7a8;}/* "Omitir" queda como texto discreto justo antes de Continuar: se ve, pero   no compite con la acción que de verdad importa. */.pf-quote__skip {    margin-left: auto;}.pf-quote__actions [data-quote-next],.pf-quote__actions [data-quote-review] {    margin-left: 0;}/* ==========================================================================   Banda "¿lo tuyo es otra cosa?" — puerta de salida bajo la tabla de precios   Deliberadamente distinta a las tarjetas de plan: no es una cuarta opción   que compare, es la salida para quien no se vio reflejado en las tres.   ========================================================================== */.pf-open {    display: grid;    grid-template-columns: auto minmax(0, 1fr) auto;    align-items: center;    gap: 24px;    margin-top: 34px;    padding: 26px 30px;    border-radius: 20px;    border: 1px dashed var(--pf-line-dark);    background: rgba(255, 255, 255, 0.03);}.pf-open__icon {    display: grid;    place-items: center;    width: 52px;    height: 52px;    flex: none;    border-radius: 15px;    background: rgba(111, 43, 220, 0.22);    border: 1px solid var(--pf-line-dark);    color: var(--pf-lavender-mid);}.pf-open__icon .pf-icon {    width: 24px;    height: 24px;}.pf-open__title {    font-family: var(--pf-font-display);    font-size: 20px;    font-weight: 700;    letter-spacing: -0.02em;    color: var(--pf-ink);    margin-bottom: 5px;}.pf-open__text {    font-size: 14.5px;    line-height: 1.55;    color: var(--pf-ink-soft);    max-width: 62ch;}.pf-open__btn {    white-space: nowrap;}@media (max-width: 860px) {    .pf-open {        grid-template-columns: auto minmax(0, 1fr);        gap: 18px;        padding: 22px 20px;    }    .pf-open__btn {        grid-column: 1 / -1;        justify-content: center;    }}/* ==========================================================================   Preguntas frecuentes   ========================================================================== */.pf-faq__list {    display: grid;    gap: 12px;    width: min(880px, 100%);    margin-inline: auto;}.pf-faq__item {    border-radius: 18px;    border: 1px solid var(--pf-line);    background: rgba(255, 255, 255, 0.03);    overflow: hidden;    transition: border-color 0.3s, background 0.3s;}.pf-faq__item:hover {    border-color: var(--pf-line-dark);}.pf-faq__item[open] {    border-color: var(--pf-lavender-mid);    background:        radial-gradient(120% 160% at 0% 0%, rgba(111, 43, 220, 0.24), transparent 62%),        var(--pf-surface);}/* El marcador nativo del navegador es un triángulo gris que no encaja con   nada; se retira en los dos motores y se dibuja el signo propio. */.pf-faq__q {    display: flex;    align-items: center;    gap: 16px;    padding: 20px 22px;    cursor: pointer;    list-style: none;    user-select: none;}.pf-faq__q::-webkit-details-marker {    display: none;}.pf-faq__q:focus-visible {    outline: 3px solid var(--pf-purple);    outline-offset: -3px;    border-radius: 18px;}.pf-faq__num {    font-family: var(--pf-font-mono);    font-size: 12px;    font-weight: 700;    color: var(--pf-lavender-mid);    flex: none;    opacity: 0.65;    transition: opacity 0.3s;}.pf-faq__item[open] .pf-faq__num {    opacity: 1;}.pf-faq__q-text {    flex: 1;    font-family: var(--pf-font-display);    font-size: 17px;    font-weight: 700;    letter-spacing: -0.015em;    line-height: 1.35;    color: var(--pf-ink);}/* Signo + que gira a − al abrir: dos barras y una rotación, sin iconos. */.pf-faq__sign {    position: relative;    width: 32px;    height: 32px;    flex: none;    border-radius: 10px;    border: 1px solid var(--pf-line-dark);    background: rgba(111, 43, 220, 0.18);    transition: background 0.3s, border-color 0.3s, transform 0.35s var(--pf-ease);}.pf-faq__sign::before,.pf-faq__sign::after {    content: "";    position: absolute;    top: 50%;    left: 50%;    width: 12px;    height: 2px;    border-radius: 2px;    background: var(--pf-lavender-mid);    transform: translate(-50%, -50%);    transition: transform 0.35s var(--pf-ease), background 0.3s;}.pf-faq__sign::after {    transform: translate(-50%, -50%) rotate(90deg);}.pf-faq__item[open] .pf-faq__sign {    background: linear-gradient(135deg, var(--pf-purple), var(--pf-magenta));    border-color: transparent;    transform: rotate(180deg);}.pf-faq__item[open] .pf-faq__sign::before,.pf-faq__item[open] .pf-faq__sign::after {    background: #fff;}/* La barra vertical desaparece al abrir: el + se convierte en −. */.pf-faq__item[open] .pf-faq__sign::after {    transform: translate(-50%, -50%) rotate(0deg);}.pf-faq__a {    padding: 0 22px 22px 62px;    animation: pf-faq-in 0.35s var(--pf-ease);}.pf-faq__a p {    font-size: 15px;    line-height: 1.65;    color: var(--pf-text-on-dark);    max-width: 68ch;}@keyframes pf-faq-in {    from { opacity: 0; transform: translateY(-6px); }    to { opacity: 1; transform: none; }}.pf-faq .pf-open {    width: min(880px, 100%);    margin-inline: auto;}@media (max-width: 640px) {    .pf-faq__q {        gap: 12px;        padding: 17px 16px;    }    .pf-faq__num {        display: none;    }    .pf-faq__q-text {        font-size: 15.5px;    }    .pf-faq__a {        padding: 0 16px 18px;    }}@media (prefers-reduced-motion: reduce) {    .pf-faq__a {        animation: none;    }}/* ==========================================================================   Modal de detalle de servicio   ========================================================================== *//* El diálogo es ligeramente más ancho que el de proyectos para que los   bullets y el texto quepan cómodos en desktop */.pf-service-modal__dialog {    width: min(700px, 100%);    max-height: min(90vh, 820px);    overflow-y: auto;    padding: 0;    display: flex;    flex-direction: column;}.pf-service-modal__content {    padding: 48px 48px 40px;}/* ---- Cabecera del modal ---- */.pf-svc-modal__header {    display: flex;    align-items: center;    gap: 12px;    margin-bottom: 20px;}.pf-svc-modal__icon {    display: flex;    align-items: center;    justify-content: center;    width: 48px;    height: 48px;    border-radius: 14px;    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(59, 130, 246, 0.15));    border: 1px solid rgba(139, 92, 246, 0.3);    color: var(--pf-purple);    flex-shrink: 0;}.pf-svc-modal__icon svg {    width: 24px;    height: 24px;}.pf-svc-modal__group {    font-size: 12px;    font-weight: 600;    letter-spacing: 0.08em;    text-transform: uppercase;    color: var(--pf-purple);    padding: 4px 10px;    border-radius: 20px;    background: rgba(139, 92, 246, 0.1);    border: 1px solid rgba(139, 92, 246, 0.2);}/* ---- Títulos y cuerpo ---- */.pf-svc-modal__title {    font-size: clamp(20px, 3vw, 26px);    font-weight: 700;    color: var(--pf-text);    line-height: 1.25;    margin-bottom: 12px;}.pf-svc-modal__headline {    font-size: 16px;    font-weight: 600;    color: var(--pf-purple-light, #c4b5fd);    line-height: 1.5;    margin-bottom: 16px;}.pf-svc-modal__body {    font-size: 15px;    color: var(--pf-text-muted);    line-height: 1.75;    margin-bottom: 28px;}/* ---- Bullets ---- */.pf-svc-modal__bullets {    list-style: none;    display: flex;    flex-direction: column;    gap: 10px;    margin-bottom: 36px;    padding: 20px 24px;    border-radius: 16px;    background: rgba(139, 92, 246, 0.06);    border: 1px solid rgba(139, 92, 246, 0.12);}.pf-svc-modal__bullets li {    display: flex;    align-items: flex-start;    gap: 10px;    font-size: 14.5px;    color: var(--pf-text-muted);    line-height: 1.55;}.pf-svc-modal__bullets li::before {    content: '';    flex-shrink: 0;    width: 18px;    height: 18px;    margin-top: 1px;    border-radius: 50%;    background: var(--pf-purple);    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");    background-repeat: no-repeat;    background-position: center;}/* ---- Pie del modal: CTAs ---- */.pf-svc-modal__foot {    display: flex;    flex-wrap: wrap;    gap: 12px;    padding-top: 4px;    border-top: 1px solid var(--pf-line-dark);}.pf-svc-modal__foot .pf-btn {    display: inline-flex;    align-items: center;    gap: 8px;    padding: 13px 24px;    border-radius: 12px;    font-size: 14px;    font-weight: 600;    cursor: pointer;    transition: background 0.22s, transform 0.18s, box-shadow 0.22s;    text-decoration: none;    border: none;}.pf-svc-modal__foot .pf-btn--primary {    background: var(--pf-purple);    color: #fff;    box-shadow: 0 4px 18px -4px rgba(139, 92, 246, 0.5);}.pf-svc-modal__foot .pf-btn--primary:hover {    background: var(--pf-purple-dark, #7c3aed);    transform: translateY(-1px);    box-shadow: 0 8px 24px -4px rgba(139, 92, 246, 0.6);}.pf-svc-modal__foot .pf-btn--ghost {    background: transparent;    color: var(--pf-text-muted);    border: 1px solid var(--pf-line-dark);}.pf-svc-modal__foot .pf-btn--ghost:hover {    border-color: var(--pf-purple);    color: var(--pf-purple);}.pf-svc-modal__foot .pf-btn svg {    width: 18px;    height: 18px;}/* ---- Responsive ---- */@media (max-width: 600px) {    .pf-service-modal__content {        padding: 32px 24px 28px;    }    .pf-svc-modal__foot {        flex-direction: column;    }    .pf-svc-modal__foot .pf-btn {        width: 100%;        justify-content: center;    }}/* ---- Vista de post del editor (AJAX) ---- */.pf-svc-post {    padding: 48px 48px 40px;}.pf-svc-post__date {    font-size: 13px;    font-weight: 500;    color: var(--pf-text-muted);    letter-spacing: 0.04em;    margin-bottom: 12px;    opacity: 0.7;}.pf-svc-post__title {    font-size: clamp(22px, 3.5vw, 30px);    font-weight: 800;    color: var(--pf-text);    line-height: 1.2;    margin-bottom: 28px;}/* Contenido del editor de bloques — hereda tipografía del tema pero con   colores y espaciado adaptados al fondo oscuro del modal */.pf-svc-post__content {    font-size: 15px;    color: var(--pf-text-muted);    line-height: 1.8;}.pf-svc-post__content p {    margin-bottom: 16px;}.pf-svc-post__content p:last-child {    margin-bottom: 0;}.pf-svc-post__content a {    color: var(--pf-purple-light, #c4b5fd);    text-decoration: underline;    text-underline-offset: 3px;}.pf-svc-post__content a:hover {    color: var(--pf-purple);}.pf-svc-post__content strong,.pf-svc-post__content b {    color: var(--pf-text);    font-weight: 700;}.pf-svc-post__content h2,.pf-svc-post__content h3,.pf-svc-post__content h4 {    color: var(--pf-text);    font-weight: 700;    line-height: 1.3;    margin-top: 28px;    margin-bottom: 10px;}.pf-svc-post__content h2 { font-size: 20px; }.pf-svc-post__content h3 { font-size: 17px; }.pf-svc-post__content h4 { font-size: 15px; }.pf-svc-post__content ul,.pf-svc-post__content ol {    padding-left: 0;    list-style: none;    display: flex;    flex-direction: column;    gap: 10px;    margin-bottom: 20px;    padding: 20px 24px;    border-radius: 14px;    background: rgba(139, 92, 246, 0.06);    border: 1px solid rgba(139, 92, 246, 0.12);}.pf-svc-post__content ul li,.pf-svc-post__content ol li {    display: flex;    align-items: flex-start;    gap: 10px;    font-size: 14.5px;    line-height: 1.55;}.pf-svc-post__content ul li::before {    content: '';    flex-shrink: 0;    width: 18px;    height: 18px;    margin-top: 1px;    border-radius: 50%;    background: var(--pf-purple);    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");    background-repeat: no-repeat;    background-position: center;}.pf-svc-post__content ol { counter-reset: svc-ol; }.pf-svc-post__content ol li::before {    content: counter(svc-ol);    counter-increment: svc-ol;    flex-shrink: 0;    width: 22px;    height: 22px;    border-radius: 50%;    background: var(--pf-purple);    color: #fff;    font-size: 11px;    font-weight: 700;    display: grid;    place-items: center;    margin-top: 1px;}@media (max-width: 600px) {    .pf-svc-post {        padding: 32px 24px 28px;    }}/* ---- Skeleton de carga ---- */.pf-svc-loading {    padding: 48px 48px 40px;    display: flex;    flex-direction: column;    gap: 14px;}.pf-svc-loading__bar {    border-radius: 8px;    background: linear-gradient(        90deg,        rgba(255, 255, 255, 0.05) 0%,        rgba(255, 255, 255, 0.12) 50%,        rgba(255, 255, 255, 0.05) 100%    );    background-size: 200% 100%;    animation: pf-shimmer 1.4s linear infinite;    height: 16px;}.pf-svc-loading__bar--sm  { width: 30%; height: 12px; }.pf-svc-loading__bar--md  { width: 60%; }.pf-svc-loading__bar--lg  { width: 90%; }@keyframes pf-shimmer {    from { background-position: 200% 0; }    to   { background-position: -200% 0; }}@media (max-width: 600px) {    .pf-svc-loading {        padding: 32px 24px 28px;    }}/* ==========================================================================   Red de seguridad responsive   ========================================================================== *//* En pantallas estrechas los botones parten en varias líneas en vez de   imponer su ancho. Con nowrap, una etiqueta larga desbordaba el contenedor   y sacaba scroll horizontal a TODA la página — y con él, la barra superior   fija se veía desplazada aunque ella misma cupiera de sobra. */@media (max-width: 720px) {    .pf-btn {        white-space: normal;        text-align: center;        line-height: 1.3;    }}/* Las imágenes ya llevan max-width:100% en el reset con :where() del inicio   del archivo. No se repite aquí a propósito: esta regla tendría más   especificidad y anularía el ancho a medida de la galería de capturas   (.pf-shots__item img), que sí necesita salirse para poder desplazarse. *//* Palabras muy largas (URLs, correos, códigos) parten en vez de estirar   su caja. */.esaico-portfolio p,.esaico-portfolio li,.esaico-portfolio h1,.esaico-portfolio h2,.esaico-portfolio h3 {    overflow-wrap: break-word;}/* A 320px la marca centrada y el botón quedaban a 2px de tocarse. Sin el   icono el botón libera ~23px y el respiro es cómodo. */@media (max-width: 380px) {    .pf-topbar .pf-btn .pf-icon {        display: none;    }    .pf-topbar .pf-btn {        padding: 9px 13px;    }}/* ==========================================================================   Hero de proyecto — responsive   ========================================================================== */@media (max-width: 600px) {    .pf-project-hero {        padding: 20px 16px 0;        border-radius: 20px 20px 0 0;    }    .pf-project-hero__screen {        max-height: 240px;    }    .pf-project-hero__bar-url {        max-width: 180px;    }}/* ==========================================================================   Lightbox — zoom de capturas de pantalla   Overlay full-screen que muestra la imagen a su tamaño natural con scroll   ========================================================================== */.pf-lightbox {    position: fixed;    inset: 0;    z-index: 9999;    display: grid;    place-items: center;    padding: 20px;    background: rgba(4, 1, 12, 0.94);    -webkit-backdrop-filter: blur(12px);    backdrop-filter: blur(12px);    cursor: zoom-out;    /* Variables locales por si el lightbox queda fuera de .esaico-portfolio */    --pf-purple: #6F2BDC;    --pf-ease: cubic-bezier(0.22, 1, 0.36, 1);    --pf-lavender-mid: #b69cf0;    animation: pf-lightbox-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);}.pf-lightbox[hidden] {    display: none;}@keyframes pf-lightbox-in {    from { opacity: 0; }    to   { opacity: 1; }}/* Imagen dentro del lightbox: se muestra a su tamaño real,   limitada por la ventana. En imágenes muy largas (capturas de página   completa) el propio lightbox hace scroll. */.pf-lightbox__img {    display: block;    max-width: 100%;    max-height: 92vh;    height: auto;    width: auto;    object-fit: contain;    border-radius: 12px;    box-shadow:        0 0 0 1px rgba(182, 156, 240, 0.2),        0 40px 80px -20px rgba(0, 0, 0, 0.95);    cursor: default;    animation: pf-lightbox-img-in 0.32s var(--pf-ease);}@keyframes pf-lightbox-img-in {    from { opacity: 0; transform: scale(0.94); }    to   { opacity: 1; transform: none; }}/* Botón de cierre */.pf-lightbox__close {    position: fixed;    top: 16px;    right: 16px;    z-index: 1;    display: grid;    place-items: center;    width: 42px;    height: 42px;    border-radius: 50%;    border: 1px solid rgba(255, 255, 255, 0.2);    background: rgba(20, 10, 40, 0.8);    -webkit-backdrop-filter: blur(8px);    backdrop-filter: blur(8px);    color: #fff;    cursor: pointer;    transition: background 0.2s, transform 0.2s;}.pf-lightbox__close:hover {    background: var(--pf-purple);    transform: rotate(90deg);}.pf-lightbox__close svg {    width: 18px;    height: 18px;    pointer-events: none;}/* Caption opcional */.pf-lightbox__caption {    position: fixed;    bottom: 16px;    left: 50%;    transform: translateX(-50%);    font-family: var(--pf-font-mono);    font-size: 11.5px;    color: rgba(255, 255, 255, 0.45);    white-space: nowrap;    letter-spacing: 0.06em;    pointer-events: none;}