/* ============ FONT ============ Montserrat via Google Fonts (loaded in index.html ) */ /* ============ TOKENS ============ */ :root{ --purple: #5C139C; /* Mood Agency accent / brand primary */ --amber: #F6B249; /* Mood Creative accent */ --paper: #F1F1F1; /* page background / light text on dark */ --charcoal: #2E2D2D; /* body text / hero background */ --font-main: 'Montserrat', 'Segoe UI', Tahoma, Arial, sans-serif; --header-h: 116px; --edge: clamp(20px, 5vw, 64px); } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--paper); color:var(--charcoal); font-family:var(--font-main); line-height:1.5; overflow-x:hidden; } a{ color:inherit; text-decoration:none; touch-action:manipulation; } button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; touch-action:manipulation; } :focus-visible{ outline:2px solid var(--purple); outline-offset:3px; } /* ============ HEADER ============ */ .site-header{ position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 var(--edge) 0 clamp(16px, 3vw, 32px); background:transparent; color:var(--paper); transition:background-color .4s ease, backdrop-filter .4s ease, border-color .4s ease, color .4s ease; border-bottom:1px solid transparent; } .site-header.is-scrolled{ background-color:rgba(241,241,241,0.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(46,45,45,0.08); color:var(--charcoal); } .brand{ display:flex; align-items:center; gap:.6rem; height:100%; } /* The logo PNG has some transparent padding baked in (a bit more empty space on the left than the right), so at larger sizes the visible mark can look like it's drifting from the edge. Instead of clipping the image (which risks cutting real artwork), this just nudges the whole image left by roughly that empty margin — nothing is cropped, it's just repositioned. */ .brand img{ height:90px; width:auto; display:block; margin-left:-22px; } @media (max-width:760px){ .brand img{ height:64px; margin-left:-16px; } } .brand .wordmark{ font-family:var(--font-main); font-weight:700; font-size:1.5rem; letter-spacing:.01em; } /* ---- Menu (right side) ---- */ .nav{ position:relative; height:100%; display:flex; align-items:center; } .nav-toggle{ display:flex; align-items:center; gap:.55rem; padding:.55rem .3rem; font-family:var(--font-main); font-weight:400; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; } .nav-toggle .bars{ display:flex; flex-direction:column; gap:4px; width:22px; } .nav-toggle .bars span{ display:block; height:2px; width:100%; background:currentColor; transition:transform .3s ease, opacity .3s ease; } .nav[data-open="true"] .nav-toggle .bars span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .nav[data-open="true"] .nav-toggle .bars span:nth-child(2){ opacity:0; } .nav[data-open="true"] .nav-toggle .bars span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* ============ NAV OVERLAY ============ */ .nav-overlay{ position:fixed; top:-10vw; right:-10vw; width:clamp(320px, 55vw, 560px); height:clamp(320px, 55vw, 560px); border-radius:50%; z-index:99999; background:rgba(92,19,156,0.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:none; align-items:flex-end; justify-content:flex-start; padding:0 0 clamp(60px,12vw,120px) clamp(40px,10vw,100px); opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s ease; transform:scale(0.85); } .nav-overlay.is-open{ display:flex; opacity:1; pointer-events:all; transform:scale(1); } .nav-overlay-close{ position:absolute; top:clamp(36px, 8vw, 72px); right:clamp(36px, 8vw, 72px); font-size:1.6rem; color:#fff; opacity:.7; transition:opacity .2s; line-height:1; } .nav-overlay-close:hover{ opacity:1; } .nav-overlay-links{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(.6rem, 1.5vw, 1.1rem); } .nav-overlay-link{ font-family:var(--font-main); font-weight:700; font-size:clamp(1rem, 2.2vw, 1.5rem); color:#fff; text-decoration:underline; text-underline-offset:.15em; letter-spacing:.02em; animation:link-in .5s ease both; } .nav-overlay-links a:nth-child(1){ animation-delay:.08s; } .nav-overlay-links a:nth-child(2){ animation-delay:.16s; } .nav-overlay-links a:nth-child(3){ animation-delay:.24s; } .nav-overlay-links a:nth-child(4){ animation-delay:.32s; } @keyframes link-in{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } } .nav-overlay-link:hover{ color:var(--amber); } /* ============ HERO ============ */ .hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding:0 var(--edge) clamp(48px, 8vh, 96px); background:var(--charcoal); color:var(--paper); } /* ---- Hero video background ---- */ .hero-video{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:hidden; /* iOS fix: clip-path realmente recorta iframes donde overflow:hidden falla */ -webkit-clip-path:inset(0); clip-path:inset(0); } .hero-yt-wrap{ background:#000; pointer-events:none; } .hero-yt-iframe{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); /* 16:9 ratio — siempre cubre todo el contenedor */ width:calc(100vh * 16 / 9); height:calc(100vw * 9 / 16); min-width:100%; min-height:100%; border:none; pointer-events:none; } /* Si no hay vídeo (archivo ausente) el mood-field actúa de fallback visual */ /* Mood-field: layered blurred gradients that drift and slowly shift hue — a literal, restrained take on the brand name in place of stock footage. */ .mood-field{ position:absolute; inset:-10%; z-index:0; filter:blur(60px); animation:hue-drift 24s linear infinite; } .mood-field span{ position:absolute; border-radius:50%; opacity:.55; mix-blend-mode:screen; } .mood-field span:nth-child(1){ width:52vw; height:52vw; top:-12%; left:-8%; background:radial-gradient(circle at 30% 30%, var(--purple), transparent 70%); animation:drift-a 18s ease-in-out infinite alternate; } .mood-field span:nth-child(2){ width:46vw; height:46vw; bottom:-14%; right:-6%; background:radial-gradient(circle at 70% 70%, var(--amber), transparent 70%); animation:drift-b 22s ease-in-out infinite alternate; } .mood-field span:nth-child(3){ width:38vw; height:38vw; top:30%; left:38%; background:radial-gradient(circle at 50% 50%, #8A3FC9, transparent 70%); animation:drift-c 26s ease-in-out infinite alternate; } @keyframes drift-a{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(6vw,8vh) scale(1.12); } } @keyframes drift-b{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-7vw,-6vh) scale(1.08); } } @keyframes drift-c{ from{ transform:translate(-3vw,-4vh) scale(1); } to{ transform:translate(4vw,5vh) scale(1.15); } } @keyframes hue-drift{ from{ filter:blur(60px) hue-rotate(0deg); } to{ filter:blur(60px) hue-rotate(360deg); } } .hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(46,45,45,.15) 0%, rgba(46,45,45,.6) 78%, rgba(46,45,45,.94) 100%); z-index:1; } .hero-content{ position:relative; z-index:2; max-width:960px; } .hero-eyebrow{ display:block; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:1.1rem; } .hero-phrase{ font-family:var(--font-main); font-weight:700; font-size:clamp(2.1rem, 5.4vw, 4.6rem); line-height:1.06; letter-spacing:-.01em; max-width:16ch; color:var(--paper); } /* ---- Indicador de scroll ---- */ .hero-scroll{ position:absolute; bottom:clamp(16px, 2.5vh, 26px); left:50%; translate:-50% 0; z-index:2; display:flex; flex-direction:column; align-items:center; gap:.55rem; pointer-events:none; transition:opacity .45s ease; } /* El header ya lleva .is-scrolled al bajar 40px; se reaprovecha como señal para esconder el indicador sin añadir otro listener de scroll. */ .site-header.is-scrolled ~ .hero .hero-scroll{ opacity:0; } .hero-scroll-label{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(241,241,241,0.45); } .hero-scroll-line{ position:relative; width:1px; height:44px; overflow:hidden; background:rgba(241,241,241,0.2); } /* Un segmento ámbar recorre la línea hacia abajo, con una pausa al final */ .hero-scroll-line::after{ content:''; position:absolute; inset:0 0 auto 0; height:42%; background:var(--amber); animation:hero-scroll-travel 2.4s cubic-bezier(.7,0,.3,1) infinite; } @keyframes hero-scroll-travel{ 0% { transform:translateY(-100%); } 55%,100%{ transform:translateY(240%); } } @media (max-width:480px){ .hero-scroll-label{ display:none; } .hero-scroll-line{ height:32px; } } /* ============ GRUPO MOOD ============ */ .grupo-section{ background:url('img/fondo_inicio.png') center/cover no-repeat; padding:clamp(48px,8vh,80px) var(--edge); display:flex; flex-direction:column; align-items:center; gap:clamp(32px,5vh,56px); } .grupo-title{ font-family:var(--font-main); font-weight:700; font-size:clamp(2.2rem,6vw,5rem); letter-spacing:-.01em; color:var(--charcoal); text-align:center; } .grupo-title span{ opacity:1; color:var(--charcoal); } .grupo-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,24px); width:100%; max-width:900px; } .grupo-card{ border-radius:18px; padding:clamp(20px,3vw,28px); display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:1; transition:transform .3s ease, box-shadow .3s ease; overflow:hidden; position:relative; } .grupo-card:hover{ transform:translateY(-6px); box-shadow:0 20px 48px rgba(0,0,0,0.18); } /* El logo acompaña el hover con un zoom mínimo. Va por `scale` (propiedad independiente) para no tocar el `transform` de la tarjeta. */ .grupo-card-bg-img{ transition:scale .45s cubic-bezier(.25,.46,.45,.94); } .grupo-card:hover .grupo-card-bg-img{ scale:1.045; } .grupo-card-top{ display:flex; flex-direction:column; gap:.2rem; } .grupo-card-super{ font-size:.78rem; letter-spacing:.06em; font-style:italic; opacity:.75; } .grupo-card-name{ font-family:var(--font-main); font-weight:700; font-style:italic; font-size:clamp(1.4rem,2.8vw,2rem); line-height:1.05; } .grupo-card-sub{ font-size:.82rem; font-style:italic; margin-top:.15rem; } .grupo-card-btn{ display:inline-block; text-align:center; font-size:.6rem; font-weight:700; letter-spacing:.1em; text-decoration:none; border:1.5px solid currentColor; border-radius:99px; padding:.3rem .9rem; transition:opacity .25s ease; } .grupo-card:hover .grupo-card-btn{ opacity:.7; } /* Agency — fondo morado con logo */ .grupo-card--agency{ background:var(--purple); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; } .grupo-card--agency .grupo-card-btn{ color:#fff; } .grupo-card--agency .grupo-card-bg-img{ display:block; width:clamp(210px,95%,340px); margin:0 auto clamp(12px,2vh,20px); object-fit:contain; } /* Creative — logo centrado */ .grupo-card--creative{ background:#fff; color:var(--charcoal); border:2px solid rgba(46,45,45,0.1); display:flex; flex-direction:column; align-items:center; justify-content:center; } .grupo-card--creative .grupo-card-btn{ color:var(--purple); } .grupo-card--creative .grupo-card-bg-img{ display:block; width:clamp(200px,95%,340px); margin:0 auto clamp(12px,2vh,20px); object-fit:contain; } .grupo-card--events .grupo-card-bg-img{ display:block; width:clamp(120px,62%,200px); margin:0 auto clamp(12px,2vh,20px); object-fit:contain; } /* Eventos — ámbar con logo */ .grupo-card--events{ background:var(--amber); color:var(--charcoal); display:flex; flex-direction:column; align-items:center; justify-content:center; } .grupo-card--events .grupo-card-btn{ color:var(--charcoal); } /* Tagline debajo */ .grupo-tagline{ text-align:center; max-width:480px; display:flex; flex-direction:column; gap:.8rem; } .grupo-tagline h3{ font-family:var(--font-main); font-weight:700; font-size:clamp(1.3rem,3vw,2rem); color:var(--charcoal); } .grupo-tagline p{ font-size:.92rem; line-height:1.65; color:var(--charcoal); } @media(max-width:640px){ .grupo-cards{ grid-template-columns:1fr; } .grupo-card{ aspect-ratio:auto; min-height:180px; } } /* ============ CTA BLOCK ============ */ .cta-block{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:2px; background:rgba(46,45,45,0.08); } .cta{ position:relative; display:flex; flex-direction:column; justify-content:center; gap:.4rem; padding:clamp(28px, 5vh, 56px) var(--edge); background:var(--paper); overflow:hidden; transition:background-color .35s ease; } .cta-icon{ width:56px; height:56px; display:block; margin-bottom:6px; fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s ease, color .35s ease; } .cta-icon.cta-icon--fill{ fill:currentColor; stroke:none; } .cta:hover .cta-icon, .cta:focus-visible .cta-icon{ transform:scale(1.08) rotate(-4deg); } .cta-label{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(46,45,45,0.55); transition:color .35s ease; } .cta-title{ font-family:var(--font-main); font-weight:700; font-size:clamp(1.5rem, 3vw, 2.1rem); color:var(--charcoal); } .cta-desc{ font-size:.88rem; line-height:1.5; color:rgba(46,45,45,0.55); max-width:32ch; transition:color .35s ease; } .cta-arrow{ position:absolute; right:var(--edge); top:50%; transform:translateY(-50%); font-size:1.6rem; opacity:0; transition:opacity .3s ease, transform .3s ease; } .cta:hover .cta-arrow, .cta:focus-visible .cta-arrow{ opacity:1; transform:translate(6px,-50%); } .cta--agency:hover, .cta--agency:focus-visible{ background:#EFE3FA; } .cta--agency:hover .cta-label, .cta--agency:focus-visible .cta-label{ color:var(--purple); } .cta--agency:hover .cta-desc, .cta--agency:focus-visible .cta-desc{ color:rgba(92,19,156,0.6); } .cta--agency .cta-title{ color:var(--purple); } .cta--agency .cta-arrow{ color:var(--purple); } .cta--agency .cta-icon{ color:var(--purple); } .cta--creative:hover, .cta--creative:focus-visible{ background:#FDECD1; } .cta--creative:hover .cta-label, .cta--creative:focus-visible .cta-label{ color:#B97314; } .cta--creative:hover .cta-desc, .cta--creative:focus-visible .cta-desc{ color:rgba(185,115,20,0.6); } .cta--creative .cta-title{ color:#B97314; } .cta--creative .cta-arrow{ color:#B97314; } .cta--creative .cta-icon{ color:#B97314; } .cta--events{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; padding-top:clamp(22px, 3.5vh, 40px); padding-bottom:clamp(22px, 3.5vh, 40px); background:var(--paper); } .cta-events-main{ display:flex; align-items:center; gap:20px; } .cta-events-text{ display:flex; flex-direction:column; gap:.25rem; } .cta--events .cta-label{ color:rgba(46,45,45,0.55); } .cta--events .cta-icon{ width:42px; height:42px; flex-shrink:0; margin-bottom:0; color:var(--charcoal); } .cta--events:hover .cta-icon, .cta--events:focus-visible .cta-icon{ transform:scale(1.12) rotate(8deg); } .cta--events .cta-title{ font-size:clamp(1.3rem, 2.5vw, 1.8rem); color:var(--charcoal); } .cta--events .cta-desc{ color:rgba(46,45,45,0.55); } .cta--events:hover, .cta--events:focus-visible{ background:linear-gradient(120deg, #EFE3FA 0%, #FDECD1 100%); } .cta--events:hover .cta-label, .cta--events:focus-visible .cta-label{ color:var(--purple); } .cta--events:hover .cta-desc, .cta--events:focus-visible .cta-desc{ color:rgba(92,19,156,0.5); } .cta--events .cta-arrow{ position:static; transform:none; opacity:.5; color:var(--charcoal); font-size:1.6rem; transition:opacity .3s ease, transform .3s ease; } .cta--events:hover .cta-arrow, .cta--events:focus-visible .cta-arrow{ opacity:1; transform:translateX(6px); color:var(--purple); } /* ============ WHATSAPP WIDGET ============ */ /* El popup cerrado sigue ocupando su caja en el layout (se oculta con opacity, no con display:none, para conservar la transición), así que el contenedor mide ~340x478px esté abierto o cerrado. Sin esto, ese rectángulo invisible intercepta todos los taps de la esquina inferior derecha: en escritorio son 340px sobre ~1600 (cae fuera del contenido centrado y no se nota), pero en un móvil de 390px es el 87% del ancho y bloquea media pantalla. El contenedor deja pasar los eventos; solo el botón y el popup abierto los reciben. */ .wa-widget{ position:fixed; bottom:28px; right:28px; z-index:300; display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none; } .wa-btn{ width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(0,0,0,0.35); transition:transform .3s ease, box-shadow .3s ease; border:none; cursor:pointer; position:relative; flex-shrink:0; pointer-events:auto; } .wa-btn:hover{ transform:scale(1.1); box-shadow:0 8px 28px rgba(0,0,0,0.45); } .wa-btn svg{ width:28px; height:28px; } /* El puntito de "en línea" late suavemente: señala que hay alguien al otro lado sin robarle atención al resto de la página. */ .wa-dot{ position:absolute; top:4px; right:4px; width:11px; height:11px; border-radius:50%; background:#4ade80; border:2px solid #fff; animation:wa-dot-ping 2.6s ease-out infinite; } @keyframes wa-dot-ping{ 0% { box-shadow:0 0 0 0 rgba(74,222,128,0.55); } 60%,100%{ box-shadow:0 0 0 8px rgba(74,222,128,0); } } /* popup */ .wa-popup{ background:#fff; border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,0.18); width:min(340px, 90vw); overflow:hidden; opacity:0; pointer-events:none; transform:translateY(12px) scale(0.96); transition:opacity .3s ease, transform .3s ease; transform-origin:bottom right; } .wa-popup.is-open{ opacity:1; pointer-events:all; transform:translateY(0) scale(1); } .wa-popup-header{ background:#075E54; color:#fff; display:flex; align-items:center; gap:16px; padding:18px 22px; } .wa-popup-avatar{ width:80px; height:80px; border-radius:50%; background:#fff; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:3px; } .wa-popup-avatar img{ width:90%; height:90%; object-fit:contain; display:block; margin:auto; position:relative; top:-5px; } .wa-popup-info{ flex:1; } .wa-popup-info strong{ display:block; font-size:1.1rem; } .wa-popup-info span{ font-size:.9rem; opacity:.8; } .wa-popup-close{ background:none; border:none; color:#fff; font-size:1.1rem; cursor:pointer; opacity:.7; padding:4px; line-height:1; } .wa-popup-close:hover{ opacity:1; } .wa-popup-body{ background:#e5ddd5; padding:22px; } .wa-popup-bubble{ background:#fff; border-radius:0 14px 14px 14px; padding:16px 20px; max-width:90%; box-shadow:0 1px 3px rgba(0,0,0,0.1); } .wa-popup-bubble strong{ display:block; font-size:1rem; color:#075E54; margin-bottom:6px; } .wa-popup-bubble p{ font-size:1.05rem; color:#333; margin:0; line-height:1.5; } .wa-popup-footer{ padding:16px 22px; } .wa-popup-cta{ display:flex; align-items:center; justify-content:center; gap:10px; background:#25D366; color:#fff; font-weight:700; font-size:1.1rem; border-radius:10px; padding:.85rem 1.2rem; text-decoration:none; transition:background .2s; } .wa-popup-cta:hover{ background:#1da851; } /* ============ BRANDING DJS ============ */ .branding-djs{ background:var(--paper); position:relative; overflow:hidden; padding:clamp(48px,8vh,80px) var(--edge); display:flex; flex-direction:column; align-items:center; gap:clamp(28px,4vh,44px); text-align:center; } .branding-djs-blob{ position:absolute; width:clamp(180px,28vw,320px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(92,19,156,0.25) 0%, transparent 70%); pointer-events:none; animation:blob-drift 7s ease-in-out infinite alternate; } .branding-djs-blob--tl{ top:-80px; left:-80px; } .branding-djs-blob--br{ bottom:-80px; right:-80px; animation-delay:-3.5s; } @keyframes blob-drift{ 0% { transform:translate(0,0) scale(1); } 100%{ transform:translate(18px,14px) scale(1.08); } } .branding-star{ animation:star-spin 6s linear infinite; transform-origin:center; } .branding-star--br{ animation-direction:reverse; } @keyframes star-spin{ 0% { transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } .branding-djs-title{ display:flex; align-items:flex-start; gap:clamp(8px,1.5vw,16px); position:relative; } .branding-h2{ font-size:clamp(2.2rem,5vw,4rem); line-height:1.05; margin:0; } .branding-h2--black{ color:var(--charcoal); font-weight:900; font-style:normal; } .branding-h2--amber{ color:var(--amber); font-weight:700; font-size:0.85em; } .branding-star{ width:clamp(22px,3vw,36px); height:auto; flex-shrink:0; } .branding-star--tl{ margin-top:4px; } .branding-star--br{ align-self:flex-end; margin-bottom:4px; } .branding-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.5vw,16px); width:100%; max-width:700px; } .branding-tag{ background:var(--amber); color:var(--charcoal); font-weight:700; font-style:italic; font-size:clamp(.85rem,1.3vw,1.05rem); border-radius:10px; padding:clamp(10px,1.5vh,16px) clamp(10px,1.5vw,18px); text-align:center; line-height:1.3; opacity:0; transform:translateY(16px) scale(0.92); transition:opacity .4s ease, transform .4s ease, box-shadow .25s ease; } .branding-tag:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 8px 24px rgba(246,178,73,0.45); } .branding-djs.is-visible .branding-tag{ opacity:1; transform:translateY(0) scale(1); } .branding-djs.is-visible .branding-tag:nth-child(1){ transition-delay:.05s; } .branding-djs.is-visible .branding-tag:nth-child(2){ transition-delay:.12s; } .branding-djs.is-visible .branding-tag:nth-child(3){ transition-delay:.19s; } .branding-djs.is-visible .branding-tag:nth-child(4){ transition-delay:.26s; } .branding-djs.is-visible .branding-tag:nth-child(5){ transition-delay:.33s; } .branding-djs.is-visible .branding-tag:nth-child(6){ transition-delay:.40s; } .branding-djs.is-visible .branding-tag:nth-child(7){ transition-delay:.47s; } .branding-djs.is-visible .branding-tag:nth-child(8){ transition-delay:.54s; } .branding-djs.is-visible .branding-tag:nth-child(9){ transition-delay:.61s; } .branding-desc{ font-size:clamp(.9rem,1.3vw,1.05rem); color:var(--charcoal); max-width:380px; line-height:1.5; } .branding-cta{ display:inline-block; background:var(--purple); color:#fff; font-weight:700; font-size:clamp(.95rem,1.4vw,1.1rem); padding:.7rem 2.2rem; border-radius:99px; text-decoration:none; transition:opacity .2s; } .branding-cta:hover{ opacity:.85; } @media(max-width:600px){ .branding-grid{ grid-template-columns:repeat(2,1fr); } } /* ============ MOOD CREATIVE SECTION ============ */ .creative-section{ background:var(--purple); overflow:hidden; } .creative-header{ padding:clamp(20px,3vh,36px) var(--edge) clamp(12px,2vh,20px); } .creative-heading{ font-family:var(--font-main); font-weight:700; font-size:clamp(1.2rem,2.8vw,2.2rem); color:#fff; line-height:1.1; display:flex; align-items:flex-start; gap:clamp(10px,1.5vw,18px); flex-wrap:wrap; } .creative-heading-logo{ height:calc(2.6em + 7px); width:auto; object-fit:contain; display:inline-block; vertical-align:top; margin-top:calc(0.12em - 3px); margin-left:-12px; } .creative-brand{ font-style:italic; } .creative-brand--yellow{ color:var(--amber); } /* ---- Marquee ---- */ .creative-marquee-wrap{ width:100%; overflow:hidden; background:var(--purple); padding:clamp(14px,2.5vh,22px) 0; border-top:1px solid rgba(255,255,255,0.15); border-bottom:1px solid rgba(255,255,255,0.15); } .creative-marquee-track{ display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.4rem); width:max-content; animation:creative-scroll 22s linear infinite; white-space:nowrap; font-family:var(--font-main); font-weight:700; font-size:clamp(1rem,2vw,1.5rem); color:#fff; letter-spacing:.04em; } .creative-dot{ color:var(--amber); font-size:1.4em; line-height:1; } @keyframes creative-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* ---- Servicios detalle ---- */ .creative-services{ background:var(--paper); } .creative-service{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; border-bottom:1px solid rgba(46,45,45,0.08); overflow:hidden; } .creative-service-text{ padding:clamp(56px,10vh,96px) var(--edge); } .creative-service--alt{ direction:rtl; } .creative-service--alt > *{ direction:ltr; } .creative-service-title{ font-family:var(--font-main); font-weight:700; font-size:clamp(2rem,4vw,3.4rem); color:var(--charcoal); text-transform:uppercase; letter-spacing:.04em; margin-bottom:1rem; } .creative-service-desc{ font-size:clamp(.95rem,1.5vw,1.1rem); color:rgba(46,45,45,0.7); line-height:1.7; margin-bottom:2rem; max-width:480px; } .creative-stats{ list-style:none; display:flex; flex-direction:column; gap:0; } .creative-stats li{ display:flex; align-items:center; justify-content:space-between; padding:.7rem 0; border-bottom:1px solid rgba(46,45,45,0.09); font-size:.95rem; opacity:0; translate:0 10px; transition:opacity .5s ease, translate .5s cubic-bezier(.25,.46,.45,.94); } /* Entran en cascada cuando el bloque ya es visible, a la vez que los contadores del JS empiezan a subir. */ .creative-service.is-visible .creative-stats li{ opacity:1; translate:0 0; } .creative-service.is-visible .creative-stats li:nth-child(1){ transition-delay:.10s; } .creative-service.is-visible .creative-stats li:nth-child(2){ transition-delay:.18s; } .creative-service.is-visible .creative-stats li:nth-child(3){ transition-delay:.26s; } .creative-service.is-visible .creative-stats li:nth-child(4){ transition-delay:.34s; } .creative-stat-label{ color:var(--charcoal); } /* tabular-nums fija el ancho de cada dígito: sin esto el número "baila" de izquierda a derecha mientras el contador sube. */ .creative-stat-value{ font-weight:600; color:var(--charcoal); font-variant-numeric:tabular-nums; } .creative-stat-value--up{ color:#16a34a; } /* Visuals */ .creative-service-visual{ display:flex; align-items:center; justify-content:center; } .creative-phone-wrap{ position:relative; width:100%; height:100%; min-height:360px; } /* Círculo morado grande */ .cpw-circle{ position:absolute; width:75%; aspect-ratio:1; background:var(--purple); border-radius:50%; top:-20%; right:-15%; z-index:0; } /* Teléfono encima del círculo, rotado */ .cpw-phone{ position:absolute; top:5px; right:26%; width:clamp(235px,30vw,350px); transform:rotate(-20deg); z-index:2; filter:drop-shadow(0 20px 40px rgba(0,0,0,0.45)); } /* Iconos flotando */ .cpw-icon{ position:absolute; z-index:2; } .cpw-icon--1{ top:60px; right:11%; } /* TikTok */ .cpw-icon--2{ top:170px; right:3%; } /* YouTube */ .cpw-icon--3{ top:285px; right:7%; } /* Facebook */ .cpi{ width:clamp(66px,8vw,96px); height:clamp(66px,8vw,96px); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.22); } .cpi svg{ width:55%; height:55%; } .cpi--tiktok{ background:#000; } .cpi--youtube{ background:#FF0000; } .cpi--facebook{ background:#1877F2; } /* ---- Desarrollo web service ---- */ .creative-service--web{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:0; background:var(--amber); overflow:hidden; border-bottom:1px solid rgba(46,45,45,0.08); } .creative-service--web .creative-service-text{ grid-column:1; grid-row:1; padding:clamp(48px,8vh,80px) var(--edge) clamp(24px,4vh,40px); } .csw-title{ color:var(--charcoal) !important; font-size:clamp(2.4rem,6vw,4.8rem) !important; margin-bottom:1.2rem; line-height:1 !important; } .creative-service--web .creative-service-desc{ max-width:460px; color:rgba(46,45,45,0.75); } .csw-screenshots{ grid-column:2; grid-row:1 / 3; position:relative; min-height:500px; } .csw-img{ position:absolute; border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,0.22); object-fit:cover; transition:transform .3s ease, box-shadow .3s ease; } .csw-img:hover{ transform:scale(1.04) translateY(-4px) !important; box-shadow:0 24px 56px rgba(0,0,0,0.3); z-index:10 !important; } .csw-img--1{ width:clamp(240px,30vw,380px); left:2%; top:3%; transform:rotate(-4deg); z-index:1; } .csw-img--2{ width:clamp(240px,30vw,380px); left:8%; top:46%; transform:rotate(3deg); z-index:2; } .csw-img--3{ width:clamp(190px,22vw,270px); right:2%; top:12%; transform:rotate(-2deg); z-index:3; } .csw-cta{ grid-column:1; grid-row:2; padding:0 var(--edge) clamp(48px,8vh,80px); display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; } .csw-cta-btn{ display:inline-block; border:2px solid var(--charcoal); border-radius:99px; padding:.8rem 2rem; font-family:var(--font-main); font-weight:700; font-size:1rem; color:var(--charcoal); text-decoration:underline; text-underline-offset:.2em; transition:background .2s, color .2s; } .csw-cta-btn:hover{ background:var(--charcoal); color:var(--amber); text-decoration:none; } .csw-cta-sub{ font-size:.85rem; font-style:italic; color:rgba(46,45,45,0.6); padding-left:.3rem; } @media(max-width:760px){ .creative-service--web{ grid-template-columns:1fr; grid-template-rows:auto auto auto; } .csw-screenshots{ grid-column:1; grid-row:2; min-height:300px; margin:0 var(--edge); } .csw-cta{ grid-row:3; } } /* ---- Diseño gráfico section ---- */ .csg-section{ display:grid !important; grid-template-columns:1fr 1fr; grid-template-rows:1fr; background:var(--purple); padding:clamp(40px,6vh,72px) var(--edge); color:#fff; gap:clamp(32px,5vw,72px); align-items:center; } .csg-top{ display:flex; flex-direction:column; gap:clamp(16px,2.5vh,28px); } .csg-title{ color:#fff !important; font-size:clamp(2.2rem,4.5vw,3.8rem) !important; line-height:1 !important; margin:0 !important; } .csg-intro{ display:block; } .csg-desc{ font-size:clamp(.95rem,1.3vw,1.1rem); color:rgba(255,255,255,0.88); line-height:1.75; max-width:480px; margin:0; } .csg-carousels-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,24px); align-items:flex-start; } .csg-carousel{ display:flex; flex-direction:column; align-items:center; gap:clamp(12px,2vh,20px); width:100%; } .csg-carousel-track{ position:relative; width:100%; aspect-ratio:3/4; border-radius:16px; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,0.4); } .csg-carousel-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; } .csg-carousel-slide.active{ opacity:1; } .csg-carousel-slide img{ width:100%; height:100%; object-fit:cover; display:block; } .csg-carousel-dots{ display:flex; gap:8px; } .csg-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.35); cursor:pointer; transition:background .3s; } .csg-dot.active{ background:#fff; } .csg-placeholder span{ display:none; } .csg-portfolio-item span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.4); font-size:.85rem; letter-spacing:.1em; } @media(max-width:760px){ .csg-section{ grid-template-columns:1fr !important; } .csg-intro{ grid-template-columns:1fr; } .csg-portfolio{ grid-template-columns:repeat(2,1fr); } } /* ---- Precios web ---- */ .cpr-section{ display:block !important; background:url('img/footer-bg.png') center/cover no-repeat; padding:clamp(40px,6vh,64px) var(--edge); position:relative; overflow:hidden; } .cpr-section::before{ content:''; position:absolute; inset:0; background:rgba(30,0,55,0.62); pointer-events:none; } .cpr-logo{ position:absolute; top:clamp(16px,2.5vh,28px); right:var(--edge); width:clamp(56px,6vw,78px); object-fit:contain; z-index:1; opacity:.9; } .cpr-cards{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); max-width:960px; margin:0 auto; } .cpr-card{ border-radius:16px; padding:clamp(28px,3.5vw,44px) clamp(22px,2.5vw,32px); display:flex; flex-direction:column; gap:clamp(16px,2vh,22px); position:relative; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15); backdrop-filter:blur(6px); opacity:0; translate:0 22px; transition:transform .25s ease, box-shadow .25s ease, opacity .6s ease, translate .6s cubic-bezier(.25,.46,.45,.94); } .cpr-card:hover{ transform:translateY(-4px); box-shadow:0 20px 48px rgba(0,0,0,0.35); } .cpr-card--pro{ background:rgba(255,255,255,0.13); border:2px solid var(--amber); transform:scale(1.04); } .cpr-card--pro:hover{ transform:scale(1.04) translateY(-4px); } /* Las tres tarjetas entran escalonadas. `opacity` + `translate` son independientes del `transform`, así que ni el hover ni el scale(1.04) del plan PRO se ven afectados. */ .cpr-section.is-visible .cpr-card{ opacity:1; translate:0 0; } .cpr-section.is-visible .cpr-card:nth-child(1){ transition-delay:0s, 0s, .08s, .08s; } .cpr-section.is-visible .cpr-card:nth-child(2){ transition-delay:0s, 0s, .20s, .20s; } .cpr-section.is-visible .cpr-card:nth-child(3){ transition-delay:0s, 0s, .32s, .32s; } .cpr-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--amber); color:var(--charcoal); font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.3rem 1.1rem; border-radius:99px; white-space:nowrap; } .cpr-card-title{ font-size:clamp(1.2rem,2vw,1.6rem); font-weight:800; color:#fff; line-height:1.15; text-align:left; margin:0; text-transform:uppercase; letter-spacing:.04em; padding-bottom:clamp(10px,1.5vh,16px); border-bottom:1px solid rgba(255,255,255,0.2); } .cpr-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem; flex:1; } .cpr-list li{ font-size:clamp(.82rem,1.1vw,.94rem); color:rgba(255,255,255,0.88); font-weight:500; text-align:left; line-height:1.45; padding-left:.2rem; } .cpr-no{ color:#ff7b7b !important; font-weight:600 !important; } .cpr-price{ background:var(--amber); color:var(--charcoal); font-size:clamp(1.8rem,2.8vw,2.4rem); font-weight:900; text-align:center; border-radius:10px; padding:.55rem 1rem; letter-spacing:.02em; } @media(max-width:760px){ .cpr-cards{ grid-template-columns:1fr; } } /* ---- Planes de mantenimiento ---- */ /* ---- Chat IA strip ---- */ .chatia-strip{ position:relative; display:flex; align-items:center; justify-content:center; gap:clamp(12px,2.5vw,32px); background:linear-gradient(100deg, #1a0035 0%, #3b0a6e 40%, #1a0035 100%); background-size:200% 100%; animation:chatia-shimmer 6s ease infinite; padding:clamp(18px,3vh,28px) var(--edge); flex-wrap:wrap; overflow:hidden; border-top:1px solid rgba(246,178,73,0.25); border-bottom:1px solid rgba(246,178,73,0.25); } @keyframes chatia-shimmer{ 0% { background-position:100% 0; } 50% { background-position:0% 0; } 100%{ background-position:100% 0; } } .chatia-glow{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, rgba(246,178,73,0.12) 0%, transparent 70%); pointer-events:none; } .chatia-tag{ background:var(--amber); color:var(--charcoal); font-size:.72rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; padding:5px 14px; border-radius:99px; flex-shrink:0; box-shadow:0 0 18px rgba(246,178,73,0.5); } .chatia-text{ color:rgba(255,255,255,0.92); font-weight:500; font-size:clamp(.95rem,1.5vw,1.1rem); margin:0; text-align:center; letter-spacing:.01em; } .chatia-text strong{ color:#fff; font-weight:800; } .chatia-price{ color:var(--amber); font-weight:900; font-size:clamp(1.3rem,2.5vw,1.8rem); flex-shrink:0; letter-spacing:-.01em; } .chatia-btn{ background:transparent; color:rgba(255,255,255,0.85); border:1px solid rgba(255,255,255,0.3); font-size:.85rem; font-weight:600; padding:.45rem 1.2rem; border-radius:99px; text-decoration:none; flex-shrink:0; transition:border-color .2s, color .2s, background .2s; white-space:nowrap; } .chatia-btn:hover{ border-color:var(--amber); color:var(--amber); background:rgba(246,178,73,0.08); } .cmt-section{ display:flex !important; flex-direction:column; gap:clamp(10px,1.5vh,16px); background:url('img/footer-bg.png') center/cover no-repeat; padding:clamp(32px,5vh,56px) var(--edge); position:relative; } .cmt-section::before{ content:''; position:absolute; inset:0; background:rgba(30,0,55,0.62); pointer-events:none; } .cmt-row{ display:grid; grid-template-columns:1fr 2fr auto; align-items:center; gap:0; border-radius:12px; padding:clamp(20px,3vh,32px) clamp(20px,3vw,36px); overflow:hidden; position:relative; z-index:1; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15); color:#fff; opacity:0; translate:-20px 0; transition:transform .2s ease, box-shadow .2s ease, opacity .55s ease, translate .55s cubic-bezier(.25,.46,.45,.94); } .cmt-row:hover{ transform:translateX(4px); box-shadow:0 8px 28px rgba(0,0,0,0.3); } /* Las filas entran deslizando desde la izquierda, una detrás de otra. El retardo se aplica solo a opacity/translate para que el hover (transform/box-shadow) siga respondiendo al instante. */ .cmt-section.is-visible .cmt-row{ opacity:1; translate:0 0; } .cmt-section.is-visible .cmt-row:nth-child(1){ transition-delay:0s, 0s, .06s, .06s; } .cmt-section.is-visible .cmt-row:nth-child(2){ transition-delay:0s, 0s, .16s, .16s; } .cmt-section.is-visible .cmt-row:nth-child(3){ transition-delay:0s, 0s, .26s, .26s; } .cmt-row--essential{ background:rgba(255,255,255,0.07); } .cmt-row--bussines{ background:rgba(255,255,255,0.11); } .cmt-row--plus{ background:rgba(255,255,255,0.13); border:2px solid var(--amber); } .cmt-left{ display:flex; flex-direction:column; gap:.2rem; padding-right:clamp(16px,2vw,28px); border-right:1px solid rgba(255,255,255,0.15); } .cmt-name{ font-size:clamp(1.1rem,2vw,1.5rem); font-weight:900; color:var(--amber); text-transform:uppercase; letter-spacing:.04em; } .cmt-months{ font-size:clamp(1.3rem,2.5vw,2rem); font-weight:900; line-height:1; } .cmt-sub{ font-size:clamp(.8rem,1vw,.9rem); font-weight:500; opacity:.7; } .cmt-mid{ padding:0 clamp(20px,3vw,40px); font-size:clamp(.9rem,1.3vw,1.05rem); font-weight:400; line-height:1.6; border-right:1px solid rgba(255,255,255,0.15); } .cmt-right{ display:flex; flex-direction:column; align-items:center; gap:.5rem; padding-left:clamp(20px,3vw,36px); } .cmt-price{ background:var(--amber); color:var(--charcoal); font-size:clamp(1.4rem,2.5vw,2rem); font-weight:900; border-radius:8px; padding:.4rem 1.2rem; white-space:nowrap; } .cmt-save{ background:#22c55e; color:#fff; font-size:.72rem; font-weight:800; border-radius:99px; padding:.25rem .8rem; white-space:nowrap; } @media(max-width:640px){ .cmt-row{ grid-template-columns:1fr; gap:1rem; } .cmt-left, .cmt-mid{ border:none; padding:0; } } /* ---- Opciones de mantenimiento ---- */ .com-section{ display:flex !important; align-items:center; justify-content:center; background:#1a1a1a; padding:clamp(40px,7vh,80px) var(--edge); } .com-title{ font-size:clamp(2.2rem,6vw,5rem) !important; font-weight:900 !important; color:#fff !important; text-align:center; text-transform:uppercase; letter-spacing:-.01em; line-height:1.1; margin:0 !important; } /* ---- Páginas web hero block ---- */ .cpw-section{ display:block !important; background:#fff; color:var(--charcoal); padding:clamp(40px,6vh,72px) var(--edge); position:relative; min-height:clamp(280px,35vw,420px); } .cpw-logo{ position:absolute; top:clamp(20px,3vh,36px); right:var(--edge); width:clamp(160px,18vw,260px); object-fit:contain; } .cpw-heading{ display:flex; flex-direction:column; gap:.4rem; margin-top:clamp(32px,5vh,56px); } .cpw-pre{ font-size:clamp(1.2rem,2.5vw,2rem); font-weight:400; color:var(--charcoal); } .cpw-h3{ font-size:clamp(3rem,8vw,7rem) !important; font-weight:900 !important; color:var(--charcoal) !important; line-height:.95 !important; margin:0 !important; text-transform:uppercase; letter-spacing:-.02em; } .cpw-icon-bottom{ position:absolute; bottom:clamp(20px,3vh,36px); right:var(--edge); width:clamp(48px,5vw,72px); object-fit:contain; opacity:.7; } /* ---- Fotografía y video ---- */ .cfv-section{ display:grid !important; grid-template-columns:1fr 1fr; background:var(--paper); color:var(--charcoal); padding:clamp(40px,6vh,72px) var(--edge); gap:clamp(32px,5vw,64px); align-items:start; } .cfv-left{ display:flex; flex-direction:column; gap:clamp(20px,3vh,32px); } .cfv-title{ color:var(--charcoal) !important; font-size:clamp(2.2rem,4.5vw,3.8rem) !important; line-height:1 !important; margin:0 !important; } .cfv-camera-wrap{ border:4px solid var(--purple); border-radius:16px; overflow:hidden; width:clamp(200px,45%,340px); aspect-ratio:4/3; background:rgba(92,19,156,0.08); } .cfv-camera-wrap img{ width:100%; height:100%; object-fit:cover; display:block; } .cfv-desc{ font-size:clamp(.9rem,1.2vw,1.05rem); line-height:1.75; color:var(--charcoal); max-width:480px; } .cfv-gallery{ display:flex; flex-direction:row; align-items:center; gap:clamp(12px,2vw,24px); flex-wrap:nowrap; } /* Las fotos se levantan al pasar por encima. El desplazamiento va por `translate` para conservar el `rotate()` propio de cada una. */ .cfv-img{ border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,0.18); flex-shrink:0; display:block; height:clamp(140px,18vw,220px); width:auto; object-fit:cover; transition:translate .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s ease; } .cfv-img:hover{ translate:0 -8px; box-shadow:0 20px 44px rgba(0,0,0,0.28); } .cfv-img--1{ transform:rotate(-3deg); align-self:flex-end; margin-bottom:20px; } .cfv-img--2{ transform:rotate(2deg); align-self:center; } .cfv-img--3{ transform:rotate(-2deg); align-self:flex-start; margin-top:20px; } .cfv-img--4{ transform:rotate(3deg); align-self:flex-end; margin-bottom:10px; } .cfv-placeholder{ background:rgba(92,19,156,0.12); } @media(max-width:760px){ .cfv-section{ grid-template-columns:1fr !important; } .cfv-title{ font-size:clamp(1.8rem,7vw,2.8rem) !important; } .cfv-gallery{ min-height:unset; overflow-x:auto; padding-bottom:8px; gap:12px; } .cfv-img{ height:clamp(120px,32vw,180px); } .cfv-camera-wrap{ width:100%; max-width:100%; } } /* CTA */ .creative-cta{ background:var(--purple); padding:clamp(48px,8vh,72px) var(--edge); display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; } .creative-cta-text{ font-family:var(--font-main); font-weight:700; font-size:clamp(1.4rem,3vw,2.4rem); color:#fff; } .creative-cta-btn{ display:inline-block; background:#fff; color:var(--purple); font-family:var(--font-main); font-weight:700; font-size:1.1rem; padding:.85rem 2.2rem; border-radius:99px; transition:background .2s, color .2s; } .creative-cta-btn:hover{ background:var(--amber); color:var(--charcoal); } @media(max-width:760px){ .creative-service{ grid-template-columns:1fr; } .creative-service--alt{ direction:ltr; } .creative-service-visual{ order:-1; } .creative-cta{ flex-direction:column; text-align:center; } } /* ============ MOOD EXPERIENCE ============ */ .experience-section{ overflow:hidden; position:relative; } /* --- espacio superior --- */ .exp-space{ background:#050510; position:relative; min-height:clamp(340px,55vw,580px); display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; padding:clamp(40px,6vh,70px) var(--edge); } .exp-stars{ position:absolute; inset:0; pointer-events:none; } @keyframes star-twinkle{ 0%,100%{ opacity:.2; transform:scale(1); } 50%{ opacity:1; transform:scale(1.4); } } .exp-title{ font-family:'Source Sans 3', var(--font-main); font-size:clamp(2rem,5vw,4rem); font-weight:900; color:#fff; text-align:center; margin:0 0 clamp(20px,3vh,36px); font-style:italic; position:relative; z-index:1; } .exp-title em{ font-style:italic; color:#fff; } .exp-title--teal{ color:#5bcfcf; text-shadow: 1px 1px 0 rgba(255,255,255,0.6), 2px 2px 0 rgba(255,255,255,0.4), 3px 3px 0 rgba(255,255,255,0.2); } /* cohetes */ .exp-rocket{ position:absolute; z-index:5; pointer-events:none; } .exp-rocket svg{ display:block; } .exp-rocket img{ display:block; width:100%; height:auto; } .exp-rocket--left{ width:clamp(70px,8vw,110px); left:8%; bottom:-100px; transform-origin:center center; animation:rocket-up-l 7s ease-out infinite; } .exp-rocket--right{ width:clamp(60px,7vw,95px); right:8%; top:-100px; transform-origin:center center; animation:rocket-down-r 8s ease-in infinite; animation-delay:-4s; } /* izquierdo: sube desde abajo */ @keyframes rocket-up-l{ 0% { transform:translate(0, 0) rotate(15deg); opacity:0; } 10% { opacity:1; } 85% { opacity:1; } 100%{ transform:translate(15vw, -130vh) rotate(15deg); opacity:0; } } /* derecho: baja desde arriba (girado 180°) */ @keyframes rocket-down-r{ 0% { transform:translate(0, 0) rotate(195deg); opacity:0; } 10% { opacity:1; } 85% { opacity:1; } 100%{ transform:translate(-15vw, 130vh) rotate(195deg); opacity:0; } } .exp-center{ display:flex; flex-direction:column; align-items:center; gap:clamp(16px,2.5vh,28px); position:relative; z-index:1; text-align:center; } .exp-claim{ color:#fff; margin:0; display:flex; flex-direction:column; align-items:center; gap:.3rem; } .exp-claim-title{ font-family:var(--font-main); font-size:clamp(1.2rem,2.5vw,2rem); font-weight:900; letter-spacing:.04em; text-transform:uppercase; display:block; } .exp-claim-sub{ font-family:var(--font-main); font-size:clamp(.95rem,1.8vw,1.3rem); font-weight:400; display:block; line-height:1.4; } .exp-logo-text{ display:flex; align-items:center; justify-content:center; } .exp-logo-img{ width:clamp(120px, 16vw, 200px); height:auto; display:block; margin-top:2.2rem; } /* --- parte teal --- */ .exp-teal{ background:linear-gradient(to bottom, #050510 0%, #007a7a 25%, #00b4b4 55%); display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:clamp(40px,6vh,72px) var(--edge); gap:clamp(24px,4vw,56px); } .exp-desc{ font-size:clamp(1.2rem,2.5vw,2rem); font-weight:700; color:#fff; line-height:1.4; margin:0; } .exp-glasses img{ width:100%; max-width:320px; display:block; margin:0 auto; object-fit:contain; } @media(max-width:640px){ .exp-teal{ grid-template-columns:1fr; } .exp-glasses{ display:none; } } /* --- marquee + CTA --- */ .exp-bottom{ background:#00b4b4; padding:clamp(24px,4vh,48px) var(--edge) clamp(40px,6vh,72px); position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:clamp(20px,3vh,36px); } .exp-marquee-wrap{ width:100%; overflow:hidden; } .exp-marquee-track{ display:flex; gap:clamp(24px,4vw,56px); white-space:nowrap; font-size:clamp(1rem,2vw,1.4rem); font-weight:700; color:#fff; animation:exp-scroll 18s linear infinite; } .exp-marquee-track span{ flex-shrink:0; } @keyframes exp-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .exp-cta-wrap{ position:relative; z-index:1; } .exp-cta-btn{ display:inline-flex; align-items:center; gap:.6rem; border:2.5px solid var(--amber); border-radius:99px; padding:.8rem 2.2rem; font-size:clamp(.95rem,1.5vw,1.15rem); font-weight:700; color:#fff; text-decoration:none; transition:background .2s, color .2s; } .exp-cta-btn:hover{ background:var(--amber); color:var(--charcoal); } /* ---- Micro-lift compartido de los CTA ---- Hasta ahora los botones solo cambiaban de color al pasar por encima. Un desplazamiento de 2px basta para que respondan al cursor. Va en longhand y después de cada definición para ampliar la lista de propiedades animadas sin reescribir los `transition` originales. */ .branding-cta, .csw-cta-btn, .chatia-btn, .exp-cta-btn, .wa-popup-cta, .grupo-card-btn{ transition-property:background-color, color, border-color, opacity, translate, box-shadow; transition-duration:.25s; transition-timing-function:ease; } .branding-cta:hover, .csw-cta-btn:hover, .chatia-btn:hover, .exp-cta-btn:hover, .wa-popup-cta:hover{ translate:0 -2px; } .branding-cta:hover{ box-shadow:0 10px 26px rgba(92,19,156,0.35); } .exp-cta-btn:hover{ box-shadow:0 10px 26px rgba(246,178,73,0.3); } .exp-circle{ position:absolute; width:clamp(140px,16vw,210px); aspect-ratio:1; background:var(--amber); border-radius:50%; bottom:-30%; right:-4%; pointer-events:none; } /* ============ FOOTER ============ */ .site-footer{ position:relative; overflow:hidden; color:var(--paper); } .footer-bg{ position:absolute; inset:0; background-size:cover; background-position:center; background-color:var(--charcoal); z-index:0; } .footer-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,18,0.45) 0%, rgba(20,18,18,0.75) 100%); z-index:1; } .footer-inner{ position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:clamp(56px,10vh,100px) var(--edge) clamp(28px,4vh,40px); display:flex; flex-direction:column; gap:clamp(40px,7vh,72px); } .footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start; } .footer-brand{ display:flex; flex-direction:column; gap:1.2rem; } .footer-logo{ height:90px; width:auto; max-width:200px; object-fit:contain; margin-left:-22px; filter:brightness(0) invert(1); opacity:.9; } .footer-tagline{ font-size:.92rem; line-height:1.6; color:rgba(241,241,241,0.5); max-width:28ch; } .footer-nav{ display:flex; flex-direction:column; gap:.6rem; } .footer-nav-title{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:.4rem; } .footer-nav a{ font-size:.95rem; color:rgba(241,241,241,0.6); transition:color .25s ease, padding-left .25s ease; } .footer-nav a:hover{ color:var(--paper); padding-left:6px; } .footer-contact{ display:flex; flex-direction:column; gap:.6rem; } .footer-email{ font-size:.95rem; color:rgba(241,241,241,0.6); transition:color .25s ease; word-break:break-all; } .footer-email:hover{ color:var(--amber); } .footer-socials{ display:flex; flex-direction:column; gap:.5rem; margin-top:.4rem; } .footer-social{ display:flex; align-items:center; gap:.55rem; font-size:.88rem; color:rgba(241,241,241,0.55); transition:color .25s ease; } .footer-social svg{ width:18px; height:18px; flex-shrink:0; } .footer-social:hover{ color:var(--paper); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:clamp(20px,3vh,32px); border-top:1px solid rgba(241,241,241,0.1); font-size:.78rem; color:rgba(241,241,241,0.3); flex-wrap:wrap; gap:.5rem; } .footer-made{ font-style:italic; } @media(max-width:760px){ .footer-top{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; text-align:center; } } /* ============ DJS WRAPPER ============ */ .djs-wrapper{ background:url('img/footer-bg.png') center/cover no-repeat; position:relative; overflow:hidden; } .djs-wrapper::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:rgba(30, 0, 55, 0.62); } /* ============ DJS SECTION ============ */ .djs-section{ padding:clamp(56px, 10vh, 100px) 0; position:relative; overflow:hidden; } .djs-section--colabs{ border-top:1px solid rgba(255,255,255,0.12); padding-top:clamp(32px, 5vh, 56px); } .djs-header{ padding:0 var(--edge); margin-bottom:clamp(32px, 5vh, 52px); position:relative; z-index:1; } .section-eyebrow{ display:block; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,0.6); margin-bottom:.6rem; } .section-title{ font-family:var(--font-main); font-weight:700; font-size:clamp(1.8rem, 4vw, 3rem); color:#fff; line-height:1.1; } /* ---- Roster circular ---- */ .djs-roster{ position:relative; z-index:1; display:flex; justify-content:center; align-items:center; gap:clamp(16px, 3vw, 48px); padding:clamp(24px, 5vh, 60px) var(--edge); flex-wrap:wrap; } .dj-spot{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1rem; cursor:pointer; flex:0 0 auto; transition:opacity .45s ease, transform .45s ease, filter .45s ease; } /* Glow solo detrás, no tapa la foto */ .dj-spot-glow{ position:absolute; bottom:-10%; left:50%; translate:-50% 0; width:clamp(200px, 28vw, 320px); height:clamp(200px, 28vw, 320px); border-radius:50%; background:radial-gradient(circle, rgba(92,19,156,0.5) 0%, transparent 72%); z-index:0; opacity:0; transition:opacity .45s ease, transform .45s ease; pointer-events:none; } .dj-spot:hover .dj-spot-glow{ opacity:1; transform:translate(-50%, -8px) scale(1.1); } /* Círculo con foto */ .dj-spot-circle{ position:relative; z-index:2; width:clamp(180px, 24vw, 300px); height:clamp(180px, 24vw, 300px); border-radius:50%; overflow:hidden; border:2px solid rgba(255,255,255,0.14); background:linear-gradient(150deg, #6B1DB5 0%, #3d0a66 55%, #1a0030 100%); transition:transform .45s cubic-bezier(.25,.46,.45,.94), border-color .4s ease, box-shadow .4s ease; } /* Marquee de nombre dentro del círculo — dos filas */ .dj-circle-marquee{ position:absolute; top:10%; left:0; z-index:0; pointer-events:none; user-select:none; display:flex; flex-direction:column; gap:.3rem; width:100%; } .dj-marquee-row{ display:flex; width:max-content; animation:circle-marquee 26s linear infinite; } .dj-marquee-row--offset{ animation-duration:32s; animation-delay:-2s; } .dj-circle-marquee span{ display:block; white-space:nowrap; flex-shrink:0; font-family:var(--font-main); font-weight:700; font-size:clamp(2rem, 4.5vw, 3.4rem); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,0.22); line-height:1.1; } @keyframes circle-marquee{ from{ transform:translateX(0); } to { transform:translateX(-50%); } } /* Sibling dimming — los otros se encogen y oscurecen */ .djs-roster:has(.dj-spot:hover) .dj-spot:not(:hover){ opacity:.4; transform:scale(0.88); filter:blur(1px); } .dj-spot:hover .dj-spot-circle{ transform:translateY(-14px) scale(1.08); border-color:rgba(92,19,156,0.9); box-shadow:0 0 0 8px rgba(92,19,156,0.15), 0 0 0 16px rgba(92,19,156,0.07), 0 24px 60px rgba(0,0,0,0.3); animation:pulse-ring 1.6s ease-out infinite; } @keyframes pulse-ring{ 0% { box-shadow:0 0 0 8px rgba(92,19,156,0.22), 0 0 0 16px rgba(92,19,156,0.08), 0 24px 60px rgba(0,0,0,0.3); } 50% { box-shadow:0 0 0 14px rgba(92,19,156,0.12), 0 0 0 28px rgba(92,19,156,0.04), 0 24px 60px rgba(0,0,0,0.3); } 100%{ box-shadow:0 0 0 8px rgba(92,19,156,0.22), 0 0 0 16px rgba(92,19,156,0.08), 0 24px 60px rgba(0,0,0,0.3); } } .dj-spot-circle img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:bottom center; display:block; transition:transform .5s ease; } .dj-spot:hover .dj-spot-circle img{ transform:scale(1.05); } /* Ajuste individual por foto — modifica el scale según necesites */ .dj-spot:nth-child(2) .dj-spot-circle img{ transform:scale(1.4); object-position:center 20%; } .dj-spot:nth-child(2):hover .dj-spot-circle img{ transform:scale(1.45); } /* Pie: género + botón */ .dj-spot-foot{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:.45rem; } .dj-spot-foot .dj-genre{ color:rgba(241,241,241,0.5); transition:color .3s ease; } .dj-spot:hover .dj-spot-foot .dj-genre{ color:var(--amber); } .dj-spot-btn{ font-family:var(--font-main); font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal); background:var(--paper); padding:.45rem 1.1rem; border-radius:99px; opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease, background .25s ease; pointer-events:none; } .dj-spot:hover .dj-spot-btn{ opacity:1; transform:translateY(0); pointer-events:auto; } .dj-spot-btn:hover{ background:var(--amber); } /* En cualquier dispositivo sin hover el botón se muestra siempre. La regla de ≤640px de abajo solo cubría móviles: una tablet táctil de 700-1024px entraba en el rango "escritorio" y el botón quedaba invisible y sin pointer-events. */ @media (hover:none){ .dj-spot-btn{ opacity:1; transform:translateY(0); pointer-events:auto; } } @media (max-width:640px){ .djs-roster{ gap:24px; } .dj-spot-name-bg{ font-size:2.2rem; } /* Botón siempre visible en móvil */ .dj-spot-btn{ opacity:1; transform:translateY(0); pointer-events:auto; } } .dj-genre{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:.3rem; } .dj-name{ font-family:var(--font-main); font-weight:700; font-size:clamp(2.2rem, 3.8vw, 3.2rem); line-height:1.1; color:#fff; } /* ============ DJ MODAL ============ */ .dj-modal{ position:fixed; inset:0; z-index:200; display:none; /* display:none when closed — fixes iOS backdrop-filter touch interception */ align-items:center; justify-content:center; padding:clamp(16px, 4vw, 48px); pointer-events:none; opacity:0; transition:opacity .3s ease; } .dj-modal.is-open{ display:flex; opacity:1; pointer-events:auto; } .dj-modal-backdrop{ position:absolute; inset:0; background:rgba(20,18,18,0.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .dj-modal-box{ position:relative; z-index:1; background:var(--paper); border-radius:20px; overflow:hidden; display:grid; grid-template-columns:1fr 1.2fr; max-width:820px; width:100%; max-height:90vh; box-shadow:0 32px 80px rgba(0,0,0,0.35); transform:translateY(20px) scale(.97); transition:transform .35s ease; } .dj-modal.is-open .dj-modal-box{ transform:translateY(0) scale(1); } .dj-modal-photo{ min-height:320px; background-size:cover; background-position:center top; background-position:center; } .dj-modal-content{ padding:clamp(28px, 5vh, 48px) clamp(24px, 4vw, 40px); overflow-y:auto; display:flex; flex-direction:column; gap:.8rem; } .dj-modal-close{ position:absolute; top:16px; right:16px; z-index:2; width:36px; height:36px; border-radius:50%; background:rgba(46,45,45,0.7); color:var(--paper); font-size:.9rem; display:flex; align-items:center; justify-content:center; transition:background .2s ease; } .dj-modal-close:hover{ background:var(--charcoal); } .dj-modal-name{ font-family:var(--font-main); font-weight:700; font-size:clamp(2rem, 3.5vw, 2.8rem); line-height:1.1; color:var(--charcoal); } .dj-modal-bio{ font-size:1rem; line-height:1.75; color:rgba(46,45,45,0.75); } .dj-modal-ig{ display:inline-flex; align-items:center; gap:7px; font-size:.88rem; font-weight:600; letter-spacing:.04em; padding:.5rem 1.1rem; border-radius:8px; border:1.5px solid rgba(46,45,45,0.18); color:var(--charcoal); text-decoration:none; transition:border-color .2s, color .2s, background .2s; align-self:flex-start; } .dj-modal-ig:hover{ border-color:var(--purple); color:var(--purple); background:rgba(92,19,156,0.06); } .dj-modal-booking:hover{ background:#4a0f7e; transform:translateY(-2px); } @media (max-width:640px){ .dj-modal-box{ grid-template-columns:1fr; } .dj-modal-photo{ min-height:220px; } .djs-nav{ display:none; } } /* ============ SCROLL REVEAL ============ */ .reveal{ opacity:0; transform:translateY(48px); filter:blur(4px); pointer-events:none; transition:opacity .7s cubic-bezier(.25,.46,.45,.94), transform .7s cubic-bezier(.25,.46,.45,.94), filter .7s ease; } .reveal.is-visible{ opacity:1; transform:translateY(0); filter:blur(0); pointer-events:auto; } .reveal--delay { transition-delay:.15s; } .reveal--delay-2{ transition-delay:.28s; } .reveal--delay-3{ transition-delay:.42s; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; filter:none; transition:none; } } /* ============ RESPONSIVE ============ */ @media (max-width:760px){ .brand .wordmark{ font-size:1.25rem; } .nav-toggle span.label{ display:none; } .cta-block{ grid-template-columns:1fr; } .cta--events{ flex-direction:row; } .hero{ align-items:flex-end; padding-bottom:40px; } /* Experiencia: cohetes más pequeños */ .exp-rocket--left{ width:55px; } .exp-rocket--right{ width:48px; } /* Creative heading: logo en línea propia */ .creative-heading{ flex-direction:column; align-items:flex-start; gap:6px; } .creative-heading-logo{ height:2.4rem; margin-left:0; margin-top:0; } /* DJ modal foto más pequeña */ .dj-modal-photo{ min-height:260px; } } /* ---- Móviles medianos (≤ 480px) ---- */ @media (max-width:480px){ /* Nav */ .brand img{ height:52px; } /* Hero */ .hero-eyebrow{ font-size:.72rem; } /* Grupo cards */ .grupo-card{ min-height:160px; } /* CTA events: columna en pantallas pequeñas */ .cta--events{ flex-direction:column; align-items:flex-start; gap:1rem; } .cta-events-main{ flex-direction:column; align-items:flex-start; gap:.5rem; } /* DJ circles: más pequeños */ .dj-spot-circle{ width:clamp(130px, 38vw, 170px); height:clamp(130px, 38vw, 170px); } .dj-spot-glow{ width:clamp(140px, 40vw, 180px); height:clamp(140px, 40vw, 180px); } .dj-spot-name-bg{ font-size:1.8rem; } .dj-name{ font-size:1.8rem; } /* Branding DJs */ .branding-h2{ font-size:2rem; } .branding-grid{ grid-template-columns:1fr 1fr; } /* Creative heading: logo baja a nueva línea */ .creative-heading{ font-size:1.1rem; flex-direction:column; align-items:flex-start; gap:6px; } .creative-heading-logo{ height:2rem; margin-left:0; margin-top:0; } /* Diseño gráfico carruseles: apila en pantallas muy pequeñas */ .csg-carousels-wrap{ grid-template-columns:1fr; } /* Precios: padding */ .cpr-card{ padding:clamp(18px,4vw,28px); } /* Experience */ .exp-title{ font-size:1.8rem; } .exp-logo-img{ width:130px; } .exp-rocket--left, .exp-rocket--right{ width:42px; } /* Footer */ .footer-logo img{ height:52px; } /* WhatsApp popup */ .wa-widget{ bottom:16px; right:16px; } } /* ---- Móviles pequeños (≤ 380px) ---- */ @media (max-width:380px){ .dj-spot-circle{ width:120px; height:120px; } .djs-roster{ gap:12px; padding-left:12px; padding-right:12px; } .branding-grid{ grid-template-columns:1fr; } .csg-carousels-wrap{ grid-template-columns:1fr; } .exp-title{ font-size:1.5rem; } .cpr-card-title{ font-size:1.1rem; } } @media (prefers-reduced-motion: reduce){ .mood-field, .mood-field span{ animation:none !important; } /* Animaciones en bucle: se detienen, el elemento queda en su estado final */ .hero-scroll-line::after, .wa-dot{ animation:none !important; } /* Entradas escalonadas: el contenido se muestra directamente. Sin esto quedaría en opacity:0 de forma permanente. */ .cpr-card, .cmt-row, .creative-stats li{ opacity:1 !important; translate:none !important; transition:none !important; } }