:root{ --bh-bg: #070707; --bh-card: rgba(255,255,255,0.04); --bh-glass: rgba(255,255,255,0.06); --bh-border: rgba(255,255,255,0.08); --bh-text: #f4f6ff; --bh-subtext: #b9bdd1; --bh-pink: #ff6ec7; /* rosa fofi */ --bh-blue: #7ec8ff; /* azul celeste */ --bh-purple: #8a7dff; /* morado */ --bh-accent: linear-gradient(135deg, var(--bh-pink), var(--bh-purple)); --bh-nav: rgba(5,5,8,0.7); --radius: 14px; --radius-sm: 10px; --shadow: 0 12px 40px rgba(0,0,0,0.4); --focus-ring: 3px solid #66bce0; /* azul */ --shadow1: 0 10px 35px rgb(251 247 247 / 7%); --dur: 260ms; --ease: cubic-bezier(.2,.7,.2,1); } :focus { outline: var(--focus-ring); outline-offset: 2px; } /* ===== Accesibilidad: respeta prefers-reduced-motion ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } body::before { --line: hsl(0 0% 95% / 0.25); content: ""; height: 100%; width: 100%; position: fixed; background: linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin, linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin; mask: linear-gradient(-15deg, transparent 30%, white); top: 0; z-index: -1; opacity: 0.3; } *{ box-sizing: border-box } html,body{ height:100% } body.bh-dark{ margin:0; background: var(--bh-bg); color: var(--bh-text); font-family: "Dosis", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } html, body { overflow-x: hidden; /* evita scroll horizontal global */ } a { all: unset; cursor: pointer; display: inline; } /* Barra scroll transparente */ * { scrollbar-width: none; scrollbar-color: transparent transparent; } *::-webkit-scrollbar { width: 0; height: 0; background: transparent; } *::-webkit-scrollbar-thumb, *::-webkit-scrollbar-track { background: transparent; border: none; } html, body { overscroll-behavior: none; -webkit-overflow-scrolling: touch; } /* iOS/Safari: no auto-zoom al enfocar (mínimo 16px) */ @supports (-webkit-touch-callout: none) { input, textarea, select, button { font-size: 16px !important; } } :focus { outline: transparent; outline-offset: 0px; } /* ===== COTILLEA (sección scroll horizontal) ===== */ .cotillea { position: relative; margin-block: clamp(16px, 3.5vh, 36px); } /* Carril horizontal con snap */ .cotillea-carril { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(68%, 72vw, 320px); gap: 15px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-inline: clamp(0px, 4vw, 0px); padding-block: 8px; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable both-edges; } /* En pantallas medianas/grandes mostramos más ancho por tarjeta */ @media (min-width: 700px){ .cotillea-carril { grid-auto-columns: clamp(260px, 28vw, 360px); } } /* Pista visual de “hay más” con un degradado sutil a la derecha */ .cotillea::after { content: ""; position: absolute; inset: 0 0 0 auto; width: clamp(28px, 8vw, 60px); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.35)); } /* Tarjeta clicable */ .cotillea-tarjeta { display: block; position: relative; border-radius: var(--radius, 16px); overflow: hidden; border: 0.1px solid #ffffff36; aspect-ratio: 8 / 12; scroll-snap-align: start; scroll-margin-inline: clamp(10px, 4vw, 24px); transition: transform var(--dur, 260ms) var(--ease, cubic-bezier(.2,.7,.2,1)); } .cotillea-tarjeta:focus-visible { outline: 2px solid var(--focus-ring-c, #66bce0); outline-offset: 2px; } /* Medio (img o video) ocupa todo */ .cotillea-media { width: 100%; height: 100%; object-fit: cover; /* recorta sin deformar */ display: block; transform: scale(1); transition: transform var(--dur, 260ms) var(--ease, cubic-bezier(.2,.7,.2,1)); will-change: transform; backface-visibility: hidden; } /* Hover/focus: zoom SOLO si es imagen */ .cotillea-tarjeta:hover .cotillea-media:is(img), .cotillea-tarjeta:focus-visible .cotillea-media:is(img){ transform: scale(1.05); } /* Reduce motion: sin zoom */ @media (prefers-reduced-motion: reduce){ .cotillea-tarjeta, .cotillea-media { transition: none !important; } } /* Scrollbar (opcional, sutil) */ .cotillea-carril::-webkit-scrollbar { height: 10px; } .cotillea-carril::-webkit-scrollbar-track { background: transparent; } .cotillea-carril::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; border: 2px solid transparent; } /* Utilidad screen-reader-only local */ .cotillea-sronly { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Contenedor del pie: alineado a la derecha, en la base */ .cotillea-pie { position: absolute; inset: auto 8px 8px; max-width: 100%; border-radius: 10px; background: rgb(0 0 0 / 39%); backdrop-filter: blur(2px) saturate(120%); padding: 8px 10px; z-index: 2; pointer-events: none; } /* Texto del pie */ .cotillea-pie__texto { color: #fff; font-size: clamp(30px, 4.5vw, 55px); line-height: 1; text-align: left; display: block; text-wrap: balance; text-shadow: 0 1px 2px rgba(0,0,0,0.4); font-weight: bold; line-height: 55px; } /* En pantallas muy pequeñas: un poco más de ancho y padding */ @media (max-width: 380px){ .cotillea-pie { max-width: 92%; padding: 7px 9px; } } /* Si hay reducción de movimiento, evita blur costoso */ @media (prefers-reduced-motion: reduce){ .cotillea-pie { backdrop-filter: none; } } /* NO RESPONSIVE ------------------------------------------------------------------------------------------------------- */ .bh-topbar__right { gap: 15px; display: flex; justify-content: flex-end; align-items: center; width: 50%; } .bh-content h1 { font-size: clamp(25px, 1.4vw, 29px); } .bh-content p { font-weight: 100; margin: 0; color: inherit; padding: 0px 12px 10px; } .bh-section-header0 p{ font-weight: 100; padding: 0; } .bh-section-header h3 {font-size: clamp(24px, 4.2vw, 40px);} /* Topbar */ .bh-topbar{ position: sticky; top: 0; z-index: 20; display:flex; align-items:center; justify-content:space-between; padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: linear-gradient(to bottom, rgba(11,11,15,0.9), rgba(11,11,15,0)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .bh-logo { height: auto; display: block; width: 55%; } .bh-topbar__left { width: auto; } .bh-icon-btn { appearance: none; background: transparent; color: var(--bh-text); font-size: 1.1rem; margin-left: 10px; padding: 5px 15px; border-radius: 5px; border: solid 1px white; } .bh-icon-btn:hover{ background: #9d7bf5 } /* Content wrapper */ .bh-content{ padding: 10px 14px 90px; width: 100%; } /* Video cards grid (mobile-first) */ .bh-video-list{ display:grid; grid-template-columns: 1fr; gap: 14px; } .bh-video-card{ background: radial-gradient(1200px 600px at 80% 10%, color-mix(in oklab, var(--bh-pink) 12%, transparent), transparent 60%), radial-gradient(800px 400px at 10% 0%, color-mix(in oklab, var(--bh-blue) 10%, transparent), transparent 50%), var(--bh-bg); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); border: 0.1px solid #ffffff36; } .bh-video-thumb{ position: relative; display:block; aspect-ratio: 16/9; overflow:hidden; } .bh-video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s ease; } .bh-video-thumb:hover img{ transform:scale(1.08) } .bh-video-thumb__overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.05)); } .bh-meta { position: absolute; left: 10px; bottom: 10px; border: 1px solid var(--bh-border); padding: 3px 12px; border-radius: 5px; display: flex; align-items: center; gap: 8px; font-weight: 100; color: white; background: linear-gradient(to bottom, rgb(11 11 15 / 45%), rgba(11, 11, 15, 0)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .bh-meta i{ opacity:.9 } .bh-sep{ opacity:.6 } .bh-title{ font-size: clamp(18px, 1.2vw, 22px); line-height: 1.2; padding: 10px 12px 4px; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .bh-subtitle { padding: 2rem 0 0; margin: 0; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .bh-btn{ display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid rgb(230 230 234); border-radius: 5px; background: linear-gradient(135deg, #ff6ec775, #8a7dff3b); cursor: pointer; font-weight: 100; color: white; text-decoration: none; font-size: clamp(15px, 1vw, 17px); font-family: 'Dosis'; transition: transform 220ms cubic-bezier(.2,.6,.2,1); transform: translateZ(0); } .bh-btn:hover, .bh-btn:focus-visible{ transform: scale(1.06); } .bh-btn:active{ transform: scale(0.98); transition-duration: 90ms; } /* MiniBlog horizontal con scroll-snap */ .bh-miniblog{ margin-top: 24px; margin-bottom: 5rem; } .bh-section-header{ display:flex; align-items:center; justify-content:space-between; margin: 4rem 2px 2rem } .bh-section-header0 { display: flex; margin: 2rem 2px 2rem; flex-wrap: wrap; flex-direction: column; } .bh-link{ color: var(--bh-blue); text-decoration:none } .bh-miniblog-scroll{ display:flex; gap:12px; overflow-x:auto; padding-bottom: 6px; scroll-snap-type: x mandatory; } .bh-mini-card{ flex: 0 0 82%; max-width: 82%; background: var(--bh-card); border:1px solid var(--bh-border); border-radius: var(--radius-sm); overflow:hidden; text-decoration:none; color: var(--bh-text); scroll-snap-align: start; transition: transform .16s ease, box-shadow .22s ease, border-color .2s ease; } .bh-mini-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(0,0,0,.12) } .bh-mini-card img{ width:100%; height:140px; object-fit:cover; display:block } .bh-mini-text{ padding: 10px 12px } .bh-mini-title{ font-weight:700; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; font-size: clamp(16px, 1.2vw, 22px); } .bh-mini-excerpt { color: var(--bh-subtext); font-weight: 100; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: clamp(15px, 1.2vw, 18px); padding-top: 10px; } /* Bottom nav fijo “vidrializado” */ .bh-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: var(--bh-nav); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--bh-border); height: 90px; } .bh-nav-item{ flex: 1 1 0; min-width: 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color: var(--bh-subtext); text-decoration:none; font-weight:600; transition: transform .25s ease, color .25s ease; } .bh-nav-item i{ font-size: 1.2rem; color: white; transition: transform .25s ease, color .25s ease; } .bh-nav-item.is-active{ color: var(--bh-text) } /* --- Hover efectos para TODOS excepto .bh-nav-cta --- */ .bh-nav-item:not(.bh-nav-cta):hover { color: #fff; transform: translateY(-4px); } .bh-nav-item:not(.bh-nav-cta):hover i { transform: scale(1.2); color: #66bce0; /* azul eléctrico al hover */ } /* --- Glow radial detrás del icono --- */ .bh-nav-item:not(.bh-nav-cta):hover::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(102,188,224,0.35) 0%, transparent 70%); z-index: -1; animation: bh-glow 0.6s ease forwards; } @keyframes bh-glow { from { opacity: 0; transform: translateX(-50%) scale(0.7); } to { opacity: 1; transform: translateX(-50%) scale(1); } } .bh-nav-cta{ flex: 1 1 0; display:flex; align-items:center; justify-content:center; transform: translateY(-15px); } .bh-nav-cta-btn { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; color: #111; background: var(--bh-accent); box-shadow: 0 10px 30px rgb(255 110 199 / 49%); cursor: pointer; overflow: visible; will-change: transform; animation: bh-float 3.2s ease-in-out infinite; } /* flotación */ @keyframes bh-float{ 0% { transform: translateY(-2px) } 50% { transform: translateY(-6px) } 100% { transform: translateY(-2px) } } /* aura/pulse alrededor */ .bh-nav-cta-btn::before { content:""; position:absolute; inset:-8px; border-radius:inherit; box-shadow: 0 0 0 0 rgba(255,56,92,.25); animation: bh-cta-pulse 2.2s ease-out infinite; } @keyframes bh-cta-pulse{ 0% { box-shadow: 0 0 0 0 rgba(255,56,92,.28) } 70% { box-shadow: 0 0 0 20px rgba(255,56,92,0) } 100% { box-shadow: 0 0 0 0 rgba(255,56,92,0) } } .bh-nav-cta-btn:hover::after, .bh-nav-cta-btn:focus-visible::after { opacity: .95; transform: translateX(-50%) scale(1); } /* icono dentro */ .bh-nav-cta-btn i { transition: transform .2s cubic-bezier(.18,.9,.22,1), filter .25s ease; } .bh-nav-cta-btn:hover i, .bh-nav-cta-btn:focus-visible i { transform: translateY(-2px) rotate(317deg) scale(1.12); filter: drop-shadow(0 10px 20px rgba(205, 56, 255, 0.45)); } /* Tap feedback en móviles */ @media (hover:none) { .bh-nav-cta-btn:active i { transform: rotate(-2deg) scale(.92); } } .bh-nav-cta-btn:active{ transform: scale(.96) } /* Detalle video */ .bh-video-detail { background: url(/assets/img/fondo0.png) center center no-repeat; background-size: cover; } .bh-back { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 12px; z-index: 40; border-radius: 50%; padding: 7px 14px; color: #fff; background: rgb(8 7 7 / 59%); border: 1px solid var(--bh-border); font-size: 20px; } .bh-player-shell{ position: relative; width: 100%; aspect-ratio: 16/9; background: #000 } .bh-player-poster{ position:absolute; inset:0; background-size:cover; background-position:center; display:grid; place-items:center; } .bh-big-play{ width:88px; height:88px; border-radius: 999px; border:0; cursor:pointer; color:#111; background: var(--bh-accent); box-shadow: var(--shadow); } .bh-progress{ position:absolute; left:0; right:0; bottom:0; height: 6px; background: rgba(255,255,255,0.1) } .bh-progress__bar{ height:100%; background: var(--bh-accent); width:0% } .bh-info { padding: 1rem 1.5rem 4rem; background: linear-gradient(to bottom, rgb(10 10 11 / 14%), rgba(11, 11, 15, 0)); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); } .bh-cta { margin: 0; padding-bottom: 1rem; } .bh-cta span { text-transform: uppercase; color: white; font-weight: bold; font-size: clamp(17px, 1vw, 21px); } .bh-meta-line { display: flex; gap: 15px; align-items: center; max-width: 560px; padding: 10px 0px; text-align: center; flex-direction: row; flex-wrap: wrap; } /* Quitar los separadores • */ .bh-sep { display: none; } /* Estilo de botón compartir (suave, heredando colores) */ .bh-share { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid rgb(230 230 234); border-radius: 5px; background: transparent; cursor: pointer; font-weight: 100; color: white; text-decoration: none; font-size: clamp(15px, 1vw, 17px); font-family: 'Dosis'; } .bh-share:hover { background: #df72d6; color: black; border: transparent; } .bh-share i { font-size: 0.95rem; } .bh-empty{ padding: 40px 0; text-align:center; color: var(--bh-subtext) } /* Player YouTube + overlay */ /* Base */ .bh-player-embed{ position: relative; width: 100%; background: #000; box-shadow: var(--shadow); } /* Caso VIDEO (iframe): 16:9 a tope */ .bh-player-embed:has(.bh-yt-iframe){ aspect-ratio: 16/9; } .bh-yt-iframe, .bh-player-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Caso IMAGEN: no estirar. Centrada, width:auto y contenida */ .bh-player-embed:has(img){ /* sin aspect-ratio fijo; damos altura fluida según viewport */ aspect-ratio: auto; min-height: clamp(220px, 56vw, 520px); /* 16:9 aprox, pero adaptable */ display: grid; place-items: center; width: auto; } .bh-player-embed:has(img) > img{ position: relative; /* NO absolute, para que “auto” funcione */ max-width: 100%; max-height: 100%; width: auto; /* clave: no estirar ancho */ height: auto; object-fit: contain; /* que no recorte */ border: 0; } /* Overlay (contador, botón audio) cubre ambos casos */ .bh-player-overlay{ position: absolute; inset: 0; pointer-events: none; /* no bloquea clicks del player */ } .bh-player-overlay .bh-audio-toggle{ pointer-events: auto; /* este sí recibe click */ } .bh-player-overlay{ position:absolute; left:0; right:0; bottom:0; z-index: 2; display:flex; align-items:center; justify-content:space-between; padding: 10px; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); pointer-events: none; } .bh-views-pill{ pointer-events:auto; font-size: clamp(.85rem, 1.5vw, .95rem); color:#fff; background: rgba(0,0,0,.55); border: 1px solid var(--bh-border); border-radius:5px; padding: 6px 10px; box-shadow: 0 8px 18px rgba(0,0,0,.35); position: absolute; bottom: 10px; } .bh-audio-toggle{ pointer-events:auto; appearance:none; border:0; cursor:pointer; color:#fff; background: rgba(0,0,0,.55); border:1px solid var(--bh-border); width:38px; height:38px; border-radius:5px; display:grid; place-items:center; transition: transform .15s ease; position: absolute; bottom: 5px; right: 6px; } .bh-audio-toggle:active{ transform: scale(.96); } .bh-play-pulse{ pointer-events:none; border:0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.25), rgba(255,255,255,0) 60%); width:96px; height:96px; border-radius:50%; display:grid; place-items:center; animation: pulse 1.8s infinite; filter: drop-shadow(0 10px 30px rgba(0,0,0,.35)); } .bh-play-pulse i { font-size: 28px; width: 70px; height: 70px; border-radius: 999px; display: grid; place-items: center; color: black; background: linear-gradient(to bottom, rgb(247 247 250 / 90%), rgb(244 244 249 / 70%)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* Player en detalle sin bordes redondeados */ .bh-video-detail .bh-player-embed{ border-radius: 0 !important; } /* Usuarios del Blog */ .bh-blog-users{ margin-top: 22px } .bh-users-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(90px, 0fr); gap: 5px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x mandatory; margin-bottom: 4rem; } .bh-user{ text-align:center; scroll-snap-align: start } .bh-avatar { position: relative; width: 75px; height: 75px; margin: 0 auto 6px; border: solid 2px #b577eb; border-radius: 50%; } .bh-avatar img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid var(--bh-border); } .bh-dot { position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px; border-radius: 50%; border: 0px solid var(--bh-bg); } .bh-dot.on{ background: #22c55e; } /* verde */ .bh-dot.off{ background: #ef4444; } /* rojo */ .bh-uname{ font-size: .85rem; color: var(--bh-subtext); max-width: 80px; margin: 0 auto; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .bh-overlay-cta { display: flex; align-items: center; justify-content: center; gap: 12px; transition: transform .16s ease, background .2s ease; } /* Botón play con “pulse” */ .bh-play-pulse { --d: 78px; width: var(--d); height: var(--d); display: grid; place-items: center; border-radius: 999px; background: radial-gradient(60% 60% at 50% 50%, #ffffff 0%, #c7d2fe 100%); color: #0b1220; border: none; box-shadow: 0 10px 30px rgba(102,188,224,.45), inset 0 0 0 2px rgba(11,18,32,.25); position: relative; transition: transform .18s ease; } .bh-play-pulse i { font-size: 1.4rem; margin-left: .15rem; } .bh-play-pulse::before, .bh-play-pulse::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(102,188,224,.45); animation: bh-pulse 1.8s ease-out infinite; } .bh-play-pulse::after { animation-delay: .6s; } @keyframes bh-pulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } } /* Botón “Saber más” oculto por defecto */ .bh-more-btn { display: none; box-shadow: var(--shadow); border: none; padding: 5px 20px; border-radius: 20px; align-items: center; gap: 8px; font-weight: 100; color: white; background: linear-gradient(to bottom, rgb(239 239 243 / 45%), rgba(11, 11, 15, 0)); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); } /* Por defecto: mostrar Play, ocultar "Saber más" */ .bh-play-icon { display: grid; } .bh-more-btn { display: none; } /* Si es imagen: ocultar Play, mostrar "Saber más" */ .bh-video-card[data-provider="image"] .bh-play-icon { display: none; } .bh-video-card[data-provider="image"] .bh-more-btn { display: inline-flex; } .bh-desc { padding: 0.7rem 0 0; margin-bottom: 20px; } /* utilidad: oculto visual pero accesible */ .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ======================= CTA Row + Buttons (Buhonea) Requiere variables :root --bh-* ======================= */ .cta-row { display: flex; flex-wrap: wrap; gap: clamp(.6rem,2vw,1rem); margin-block: 3rem 2rem; container-type: inline-size; } /* Botón base (apto para ,