/* ============================================================ CATALOGO.CSS — Steal This Psycho Estilos para las fichas individuales de acompañantes. Depende de main.css (variables y componentes base). ============================================================ */ /* --- ESTRUCTURA GENERAL ----------------------------------- */ /* Fondo por capas (no en directo): permite blur sin afectar contenido. --bg-fondo/--c-neon se inyectan inline por JS por consultor. */ body { background-color: var(--bg-dark); position: relative; isolation: isolate; /* Fallback para --c-neon antes de que JS inyecte el color del consultor. acc-melon-clr (#f7cba3) sobre bg-dark (#190808) = 10.7:1 (AAA) */ --c-neon: var(--acc-melon-clr); } /* ::before = fondo blureado del consultor; ::after = overlay oscuro (--bg-dark en gradiente, no negro arbitrario) */ body::before { content: ""; position: fixed; inset: -24px; /* evita bordes nítidos por el recorte del blur */ z-index: -2; background-image: var(--bg-fondo, none); background-size: cover; background-position: center top; filter: blur(var(--bg-sblur, 16px)); transition: background-image var(--transition-speed, 0.4s) ease; } body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient( color-mix(in srgb, var(--bg-dark) 80%, transparent), color-mix(in srgb, var(--bg-dark) 92%, transparent) ); } /* Cada sección con fondo propio + blur */ .catalogo-section { position: relative; margin: 0 auto; max-width: 860px; padding: 1.85rem 2rem; margin-bottom: 1.1rem; /* CAMBIO: 16px → var(--card-radius), unifica con dir-card-activa/bitacora-card (main.css/telas.css) */ border-radius: var(--card-radius, 20px); /* [FIX] Borde perimetral eliminado — MARCO ÚNICO (main.css) pinta top+bottom con --marco-grosor; el border: 1px sobreescribía con un rectángulo de 1px que no coincidía con el ancho del marcador. */ /* Transparente: se funde con el fondo blureado del consultor (body::before). --tinta-color resuelve a melón (superficie sigue siendo "vino" conceptualmente). */ background: transparent; box-shadow: 0 10px 40px color-mix(in srgb, var(--tinta-negra) 35%, transparent); /* sombra difusa, esquinas difuminadas */ } /* Borde superior con el color del consultor */ /* CAMBIO: Syne para etiquetas de sección; JetBrains Mono para el código de identificación */ .catalogo-section h3 { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: var(--text-xs, 0.72rem); text-transform: uppercase; letter-spacing: 2px; color: var(--c-neon); margin-bottom: 1.25rem; font-weight: 700; } .catalogo-section p { font-family: var(--font-body, 'Inter', sans-serif); /* CAMBIO: --text-dim fijo → --texto-cuerpo (adaptativo, main.css Tarea 1) — mismo criterio que bitacora-card p, ahora que la card es transparente. */ color: var(--texto-cuerpo); line-height: 1.65; font-size: var(--text-base, 0.9rem); margin-bottom: 0.85rem; } .catalogo-section p:last-child { margin-bottom: 0; } /* --- WRAPPER GENERAL -------------------------------------- */ /* ============================================================ OPTIMIZACIÓN DE LIENZO (catalogo.css) Expande el contenedor principal y ajusta grids internos. ============================================================ */ /* 1. Contenedor principal — ancho generoso en pantallas anchas */ .catalogo-consultor { width: 100%; max-width: 1400px; margin: 0 auto; padding: 1.75rem 2.5rem; box-sizing: border-box; } /* 2. Grids internos — override intencional del .pdf-shelf compacto de main.css (minmax 130px, pensado para el estante horizontal de la card unificada); en la ficha de consultor completo se quiere una grilla más ancha. max-height/overflow-y/scrollbar-color se heredan sin cambios de main.css. */ .pdf-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; width: 100%; } /* 3. Iframe de agenda — definición base en main.css (--- CALENDAR EMBED ---). Aquí solo se hereda; no se redeclara para evitar valores duplicados de height/width divergentes entre archivos. */ /* ============================================================ RESPONSIVE: Ajustes para pantallas portátiles/pequeñas (< 768px) ============================================================ */ @media (max-width: 768px) { .catalogo-consultor { padding: 1rem 1.5rem; /* Margen mínimo de seguridad en móviles */ } } /* --- CABECERA DEL CONSULTOR ------------------------------- */ .catalogo-head { position: relative; max-width: 860px; margin: 0 auto 1.1rem; padding: 2rem 2rem; /* CAMBIO: 16px → var(--card-radius), mismo criterio de unificación */ border-radius: var(--card-radius, 20px); /* [FIX] Borde perimetral eliminado — MARCO ÚNICO (main.css) pinta top+bottom con --marco-grosor; el border: 1px sobreescribía con un rectángulo de 1px que no coincidía con el ancho del marcador. */ background: transparent; /* mismo criterio que .catalogo-section */ display: flex; gap: 2rem; align-items: center; box-shadow: 0 10px 40px color-mix(in srgb, var(--tinta-negra) 38%, transparent); } .catalogo-head .avatar { width: 100px; height: 100px; flex-shrink: 0; } /* CAMBIO: Syne para el nombre del consultor (display); mono para el subtítulo técnico */ .catalogo-head h1 { font-family: var(--font-display, 'Syne', sans-serif); font-size: var(--text-xl, 1.6rem); color: var(--c-neon); margin-bottom: 0.3rem; letter-spacing: -0.02em; } .catalogo-head .sub { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: var(--text-xs, 0.7rem); text-transform: uppercase; letter-spacing: 1.2px; color: var(--c-neon); margin-bottom: 0.6rem; line-height: 1.4; } /* --- FRASE DESTACADA -------------------------------------- */ /* [CAMBIO] forma/relleno/borde (antes border-left sólido) se movieron al componente compartido "mancha de cita" en main.css — aquí solo queda la tipografía propia de esta página. */ .frase { font-style: italic; color: var(--text-dim); margin-top: 1.25rem; font-size: 0.88rem; line-height: 1.55; } /* --- REDES JUNTO AL HEADER (avatar + nombre + subtítulo) --- */ .catalogo-head-redes { justify-content: flex-start; margin-top: 0.75rem; margin-bottom: 0; } .catalogo-head-redes .social-icon { width: 34px; height: 34px; padding: 0.5rem; } .catalogo-head-redes .social-icon svg { width: 15px; height: 15px; } /* --- GRID DE PUBLICACIONES -------------------------------- */ .publicaciones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 0.5rem; } .publicacion-card { background: transparent; /* mismo criterio de transparencia del resto de cards */ /* [FIX] Borde perimetral eliminado — MARCO ÚNICO (main.css) pinta top+bottom con --marco-grosor; el border: 1px sobreescribía con un rectángulo de 1px que no coincidía con el ancho del marcador. */ border-radius: var(--card-radius, 20px); padding: 1.25rem; transition: transform 0.2s; } .publicacion-card:hover { transform: translateY(-2px); } .publicacion-card:hover .pub-tipo { color: var(--acc-melon-clr); } .publicacion-card:hover h4 { color: var(--acc-melon-clr); } .publicacion-card .pub-tipo { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; color: var(--c-neon); margin-bottom: 0.5rem; font-weight: 700; } .publicacion-card h4 { font-size: 0.92rem; color: var(--c-neon); margin-bottom: 0.35rem; line-height: 1.3; } .publicacion-card p { font-size: 0.78rem !important; color: var(--texto-heading); /* [CAMBIO] --texto-cuerpo → --texto-heading: melón legible */ line-height: 1.5; margin-bottom: 0 !important; } /* --- FOOTER CON LOGO -------------------------------------- */ .catalogo-footer { text-align: center; padding: 2.25rem 1rem 1.5rem; border-top: 1px solid var(--border-detail-soft); margin-top: 2rem; } .catalogo-footer-logo { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-detail-soft); display: inline-block; transition: border-color 0.2s, transform 0.2s; } .catalogo-footer-logo:hover { border-color: var(--c-neon); transform: scale(1.06); } .catalogo-footer p { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.75rem; letter-spacing: 0.5px; } /* --- BOTÓN WA FLOTANTE (FAB) ------------------------------ */ /* * CAMBIO: rediseño completo del mecanismo de expansión. * Estrategia: el botón es un flex-row con icono + span. * — Estado colapsado: width fijo (60px), overflow hidden, span con opacity 0 * — Estado hover: width se expande a auto con max-width, span aparece * Se elimina el position:absolute del span que causaba layout roto. * transform mantiene translateY(-50%) en TODOS los estados para no saltar. */ .btn-wa-fab { position: fixed; top: 50%; right: 1.5rem; /* CRÍTICO: translateY siempre presente; hover solo añade translateX */ transform: translateY(-50%); z-index: 200; display: inline-flex; align-items: center; justify-content: center; gap: 0; /* gap se activa solo en hover */ background: color-mix(in srgb, var(--bg-dark) 90%, transparent); /* near-black derivado de la paleta */ border: 1.5px solid var(--c-neon); color: var(--text-light); width: 60px; height: 60px; padding: 0; overflow: hidden; border-radius: 50px; font-size: 0.85rem; font-weight: 700; font-family: var(--font-body, inherit); text-decoration: none; box-shadow: 0 4px 24px color-mix(in srgb, var(--tinta-negra) 50%, transparent); /* CAMBIO: transición en width + gap + padding; transform separado para no interferir con el centrado vertical */ transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding 0.28s cubic-bezier(0.4, 0, 0.2, 1), gap 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; cursor: pointer; letter-spacing: 0.3px; white-space: nowrap; will-change: width; } .btn-wa-fab svg { width: 28px; height: 28px; /* CAMBIO: --color-wa en lugar de #25D366 */ fill: var(--color-wa, #25D366); flex-shrink: 0; /* CAMBIO: sin transición de tamaño en el svg; evita "baile" al expandir */ } /* CAMBIO: span siempre en el flujo normal, controlado por opacity + max-width. Esto evita el salto de posición del mecanismo anterior (position:absolute). */ .btn-wa-fab span { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; pointer-events: none; } /* HOVER: expande el contenedor y revela el texto */ .btn-wa-fab:hover { width: auto; /* deja que el contenido dicte el ancho */ padding: 0 1.25rem 0 1rem; gap: 0.6rem; justify-content: flex-start; background: color-mix(in srgb, var(--bg-dark) 97%, transparent); /* mismo criterio que el fondo base */ box-shadow: 0 8px 32px color-mix(in srgb, var(--tinta-negra) 65%, transparent); border-color: var(--brand-ladrillo); /* CRÍTICO: preservar translateY para no perder centrado al expandir */ transform: translateY(-50%) translateX(-4px); color: var(--text-light); } .btn-wa-fab:hover span { max-width: 140px; /* suficiente para "Escríbeme" / "Agendar cita" */ opacity: 1; pointer-events: auto; } /* Móvil: solo icono, sin expansión (evita tapar contenido en pantallas pequeñas) */ @media (max-width: 720px) { .btn-wa-fab { right: 1rem; width: 50px; height: 50px; } .btn-wa-fab:hover { width: 50px; padding: 0; gap: 0; justify-content: center; transform: translateY(-50%); /* sin desplazamiento lateral en móvil */ } .btn-wa-fab:hover span { max-width: 0; opacity: 0; } } /* --- LOGO COMO BOTÓN "VOLVER" ------------------------------ */ /* Reemplaza al antiguo .back-link de texto. Usa el mismo tamaño que .site-header-logo / .menu-logo (58px) para mantener consistencia visual en todo el sitio (index, directorio, bitácora, fichas). */ .back-logo { display: inline-block; margin: 1.25rem auto 0; width: 100px; height: 100px; } .back-logo-img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--brand-neon); box-shadow: none; display: block; transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s; } .back-logo-img:hover { transform: scale(1.1) rotate(-4deg); border-color: var(--brand-ladrillo); box-shadow: none; } .back-logo-row { max-width: 860px; margin: 0 auto; padding: 0 2rem; } /* --- LINK "VER TODA LA BITÁCORA" --- */ .bitacora-link { display: inline-block; margin-top: 1rem; font-size: 0.8rem; color: var(--c-neon); text-decoration: underline; }