/* ========================================================================== MOMENTO360 — HOME v4 | prefijo: hm- Sistema de color: navy #040c1c · cyan #22d3ee · orange #e63312 Cargado desde vía main.php (solo en site-home) ========================================================================== */ /* ── Variables globales del home ── */ .hm-main { --c-bg: #040c1c; --c-bg2: #060f24; --c-bg3: #071328; --c-cyan: #22d3ee; --c-cyan-dim: rgba(34,211,238,.12); --c-orange: #e63312; --c-text: #e2e8f0; --c-muted: rgba(226,232,240,.5); --c-border: rgba(255,255,255,.07); --c-card: rgba(255,255,255,.03); --radius: 14px; background: var(--c-bg); color: var(--c-text); } .hm-wrap { width: min(92vw,1240px); margin: 0 auto; } /* ── Tipografía de sección ── */ .hm-eyebrow { font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--c-cyan); margin:0 0 8px; display:block; } .hm-section-title { font-size:clamp(1.55rem,3.2vw,2.3rem); font-weight:900; color:var(--c-text); letter-spacing:-.03em; margin:0 0 4px; line-height:1.1; } .hm-section-sub { color:var(--c-muted); font-size:.95rem; max-width:48ch; } .hm-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; flex-wrap:wrap; } .hm-section-head--center { flex-direction:column; align-items:center; text-align:center; } /* ── Botones ── */ .hm-btn { display:inline-flex; align-items:center; gap:7px; padding:11px 22px; border-radius:10px; font-weight:700; font-size:.85rem; cursor:pointer; border:none; text-decoration:none; transition:all 200ms cubic-bezier(.4,0,.2,1); white-space:nowrap; position:relative; overflow:hidden; } .hm-btn--lg { padding:14px 30px; font-size:.95rem; border-radius:12px; } .hm-btn--sm { padding:8px 16px; font-size:.78rem; border-radius:8px; } .hm-btn--hero { padding:14px 28px; font-size:.95rem; border-radius:12px; } .hm-btn--primary { background:linear-gradient(135deg,#0891b2,#22d3ee); color:#040c1c; font-weight:800; box-shadow:0 4px 20px rgba(34,211,238,.25); } .hm-btn--primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(34,211,238,.4); color:#040c1c; } .hm-btn--outline { background:transparent; border:1.5px solid rgba(255,255,255,.15); color:rgba(226,232,240,.8); } .hm-btn--outline:hover { border-color:var(--c-cyan); color:var(--c-cyan); background:var(--c-cyan-dim); } .hm-btn--outline-light { background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.2); color:rgba(255,255,255,.9); backdrop-filter:blur(12px); } .hm-btn--outline-light:hover { background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.35); } .hm-btn--notify { background:rgba(230,51,18,.15); border:1.5px solid rgba(230,51,18,.35); color:#ff8a70; } .hm-btn--notify:hover { background:rgba(230,51,18,.25); border-color:var(--c-orange); color:#fff; transform:translateY(-1px); } @keyframes hm-pulse { 0%,100% { box-shadow:0 4px 20px rgba(34,211,238,.25); } 50% { box-shadow:0 4px 36px rgba(34,211,238,.55),0 0 0 8px rgba(34,211,238,.08); } } .hm-btn--pulse { animation:hm-pulse 2.6s ease-in-out infinite; } .hm-btn--pulse:hover { animation:none; } /* ── Chips y badges ── */ .hm-live-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(16px); padding:6px 16px; border-radius:99px; font-size:.75rem; font-weight:600; color:rgba(255,255,255,.8); } .hm-live-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; animation:hm-ping 1.6s ease-in-out infinite; } @keyframes hm-ping { 0%,100% { box-shadow:0 0 0 0 rgba(34,197,94,.6); } 50% { box-shadow:0 0 0 6px rgba(34,197,94,0); } } .hm-label-chip { display:inline-flex; align-items:center; gap:6px; background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.25); color:var(--c-cyan); padding:5px 14px; border-radius:99px; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .hm-chip { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13); backdrop-filter:blur(10px); padding:5px 12px; border-radius:99px; font-size:.78rem; color:rgba(255,255,255,.82); } .hm-chip svg { flex-shrink:0; } /* ══════════════════════════════════════════════════════════════ FASE 2 — HERO SPLIT PROFESIONAL ══════════════════════════════════════════════════════════════ */ .hm-hero { position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:hidden; background:#040c1c; } .hm-hero__vbg { position:absolute; inset:0; } .hm-hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity 1.4s ease; will-change: opacity; } /* Slight dim on active video so headline copy reads cleanly */ .hm-hero__video.is-active { opacity: .88; z-index: 1; } .hm-hero__video.is-ready { opacity: .88; } .hm-hero__video.is-active.is-ready { opacity: .88; } .hm-hero__video:not(.is-active) { opacity: 0; z-index: 0; } /* Subtle Ken Burns slow-zoom on the active slide */ @keyframes hm-hero-kenburns { 0% { transform: scale(1.04); } 100% { transform: scale(1.10); } } .hm-hero__video.is-active { animation: hm-hero-kenburns 14s ease-out forwards; } /* Hide redundant scroll arrow — pager is the bottom focal element now */ .hm-hero .hm-hero__scroll { display: none !important; } /* Pager (slide indicators) — clean compact design */ .hm-hero__pager { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; z-index: 5; padding: 10px 16px; border-radius: 999px; background: rgba(4,12,28,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 10px 28px rgba(0,0,0,.42); } .hm-hero__pager-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.32); border: 0; padding: 0; cursor: pointer; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; flex-shrink: 0; position: relative; } .hm-hero__pager-dot:hover { background: rgba(255,255,255,.65); transform: scale(1.1); } .hm-hero__pager-dot.is-active { background: #ff6b35; transform: scale(1.2); box-shadow: 0 0 0 4px rgba(255,107,53,.22); } @media (max-width: 540px) { .hm-hero__pager { bottom: 18px; padding: 8px 12px; gap: 8px; } .hm-hero__pager-dot { width: 7px; height: 7px; } } @media (prefers-reduced-motion: reduce) { .hm-hero__video.is-active { animation: none; transform: scale(1.02); } } .hm-hero__overlay { position:absolute; inset:0; background: linear-gradient(to right, rgba(4,12,28,.96) 0%, rgba(4,12,28,.86) 38%, rgba(4,12,28,.55) 64%, rgba(4,12,28,.30) 100%), linear-gradient(to bottom, rgba(4,12,28,.35) 0%, rgba(4,12,28,.0) 40%, rgba(4,12,28,.0) 60%, rgba(4,12,28,.85) 100%); } .hm-hero__grain { position:absolute; inset:0; opacity:.03; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); pointer-events:none; } /* Split layout — 2 columnas */ .hm-hero__split { position:relative; z-index:2; width:min(92vw,1280px); margin:0 auto; padding:110px 0 90px; display:grid; grid-template-columns:1.15fr 0.85fr; gap:52px; align-items:center; min-height:100svh; box-sizing:border-box; } /* ── Lado izquierdo: MARCA ── */ .hm-hero__brand { display:flex; flex-direction:column; gap:20px; } .hm-hero__brand-badges { display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .hm-hero__headline { font-size:clamp(2.4rem,4.4vw,4rem); font-weight:900; color:#fff; letter-spacing:-.035em; line-height:1.02; text-transform:uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.85), 0 4px 24px rgba(0,0,0,.7), 0 0 40px rgba(4,12,28,.55); margin:0; } .hm-hero__headline-em { font-style:normal; background:linear-gradient(135deg,#ff6b35 0%,#ffb15a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hm-hero__headline.is-typing::after { content: ''; display: inline-block; width: 4px; height: .82em; background: #ff6b35; margin-left: 6px; vertical-align: -2px; animation: hm-caret 0.7s steps(2) infinite; border-radius: 1px; box-shadow: 0 0 12px rgba(255,107,53,.5); } .hm-hero__headline.is-typing, .hm-hero__sub.is-typing { word-break: break-word; } .hm-hero__sub { font-size:1.05rem; color:rgba(255,255,255,.85); max-width:48ch; line-height:1.7; margin:0; min-height: calc(1.7em * 4); text-shadow: 0 1px 6px rgba(0,0,0,.75), 0 2px 16px rgba(0,0,0,.55); } .hm-hero__sub.is-typing::after { content: ''; display: inline-block; width: 2px; height: 1em; background: #ff6b35; margin-left: 3px; vertical-align: -2px; animation: hm-caret 0.75s steps(2) infinite; } @keyframes hm-caret { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hm-hero__sub.is-typing::after { animation: none; } } .hm-hero__trust-row { display:flex; flex-wrap:wrap; gap:8px; } .hm-trust-chip { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:5px 12px; border-radius:99px; font-size:.72rem; font-weight:600; color:rgba(226,232,240,.68); } .hm-trust-chip svg { color:var(--c-cyan); flex-shrink:0; } .hm-hero__brand .hm-hero__ctas { display:flex; gap:12px; flex-wrap:wrap; } /* ── Lado derecho: CARD EVENTO (flyer) ── */ .hm-hero__event-panel { display:flex; justify-content:flex-end; align-items:center; } .hm-hero__event-card { width:100%; max-width:440px; border-radius:24px; overflow:hidden; background:#0a1635; box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(34,211,238,.18), inset 0 1px 0 rgba(255,255,255,.07); transition:transform 320ms ease, box-shadow 320ms ease; display:flex; flex-direction:column; } .hm-hero__event-card:hover { transform:translateY(-6px); box-shadow: 0 44px 100px rgba(0,0,0,.7), 0 0 60px rgba(34,211,238,.20), 0 0 0 1px rgba(34,211,238,.32); } .hm-hero__event-card--empty { background:rgba(6,15,34,.82); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); } /* Franja superior con el chip Destacado */ .hm-hero__event-header { padding:12px 14px; background:#0a1635; border-bottom:1px solid rgba(34,211,238,.22); display:flex; align-items:center; } .hm-hero__event-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(34,211,238,.14); border:1px solid rgba(34,211,238,.35); color:var(--c-cyan); padding:6px 14px; border-radius:99px; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } /* Flyer: imagen retrato, sin overlay (la imagen se ve limpia) */ .hm-hero__event-img { position:relative; aspect-ratio:3/4; overflow:hidden; background:linear-gradient(135deg,#060f24,#071a3a); display:flex; align-items:center; justify-content:center; } .hm-hero__event-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 600ms ease; } .hm-hero__event-card:hover .hm-hero__event-img img { transform:scale(1.04); } /* Franja inferior con título + CTA */ .hm-hero__flyer-foot { padding:14px 16px; background:#0a1635; border-top:1px solid rgba(34,211,238,.22); display:flex; align-items:center; justify-content:space-between; gap:14px; } .hm-hero__flyer-name { flex:1; font-size:clamp(.9rem,1.6vw,1.05rem); font-weight:800; color:#fff; line-height:1.28; letter-spacing:-.02em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-shadow:0 2px 12px rgba(0,0,0,.5); } .hm-hero__flyer-foot .hm-btn { flex-shrink:0; } /* Scroll indicator */ .hm-hero__scroll { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:3; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); cursor:pointer; animation:hm-bob 2s ease-in-out infinite; transition:all 200ms; backdrop-filter:blur(12px); } .hm-hero__scroll:hover { color:#fff; background:rgba(255,255,255,.14); border-color:var(--c-cyan); } @keyframes hm-bob { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(7px); } } /* Countdown — usado dentro de la event card */ .hm-countdown { display:inline-flex; align-items:center; gap:4px; } .hm-cd-unit { display:flex; flex-direction:column; align-items:center; min-width:44px; } .hm-cd-num { font-size:1.55rem; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; line-height:1; } .hm-cd-lbl { font-size:.56rem; color:var(--c-cyan); text-transform:uppercase; letter-spacing:.1em; margin-top:2px; } .hm-cd-sep { font-size:1.3rem; font-weight:900; color:var(--c-cyan); margin:0 2px; padding-bottom:5px; } /* ══════════════════════════════════════════════════════════════ TRUST BAR ══════════════════════════════════════════════════════════════ */ .hm-trust-bar { background:rgba(34,211,238,.04); border-top:1px solid rgba(34,211,238,.1); border-bottom:1px solid rgba(34,211,238,.1); padding:14px 0; } .hm-trust-inner { display:grid; grid-template-columns:repeat(4,1fr); align-items:center; gap:0; } .hm-trust-item { display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 18px; font-size:.82rem; font-weight:600; color:rgba(226,232,240,.78); white-space:nowrap; border-right:1px solid rgba(255,255,255,.06); } .hm-trust-item:last-child { border-right:0; } .hm-trust-item svg { color:var(--c-cyan); flex-shrink:0; } .hm-trust-div { display:none; } @media (max-width:980px) { .hm-trust-inner { grid-template-columns:repeat(2,1fr); } .hm-trust-item:nth-child(odd) { border-right:1px solid rgba(255,255,255,.06); } .hm-trust-item:nth-child(even) { border-right:0; } .hm-trust-item:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.06); } .hm-trust-item { font-size:.76rem; padding:8px 12px; } } @media (max-width:540px) { .hm-trust-inner { grid-template-columns:1fr 1fr; gap:2px; } .hm-trust-item { font-size:.7rem; padding:6px 8px; } } /* ══════════════════════════════════════════════════════════════ BUSCADOR ══════════════════════════════════════════════════════════════ */ .hm-search-section { padding:18px 0; background:var(--c-bg2); border-bottom:1px solid var(--c-border); } .hm-search-form { display:grid; grid-template-columns: minmax(0,2.4fr) minmax(0,1.1fr) minmax(0,1.1fr) auto; align-items:stretch; gap:10px; padding:0; } .hm-sf { position:relative; display:flex; align-items:center; min-width:0; } .hm-sf__ico { position:absolute; left:14px; color:rgba(226,232,240,.45); pointer-events:none; z-index:1; flex-shrink:0; } .hm-sf input, .hm-sf select { width:100%; height:48px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:10px; padding:0 36px 0 42px; color:var(--c-text); font-size:.9rem; outline:none; transition:border-color 180ms, background 180ms; appearance:none; -webkit-appearance:none; text-overflow: ellipsis; } .hm-sf select { background-image: url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position: right 14px center; background-size: 14px; cursor:pointer; padding-right: 38px; } .hm-sf input::placeholder { color:rgba(226,232,240,.42); } .hm-sf input:focus, .hm-sf select:focus { border-color:rgba(34,211,238,.5); background:rgba(34,211,238,.04); } .hm-sf select option { background:#060f24; color:#e8f0fe; } .hm-sf__btn { height:48px; flex-shrink:0; border-radius:10px !important; padding:0 22px; font-size:.92rem; } /* Intermediate: search wide on first row, filters + button on second */ @media (max-width: 1100px) { .hm-search-form { grid-template-columns: 1fr 1fr auto; } .hm-sf:nth-child(1) { grid-column: 1 / -1; } } .hm-sf__btn[disabled] { opacity:.7; cursor:wait; pointer-events:none; } @keyframes hm-spin { to { transform:rotate(360deg); } } .hm-sf__spin { animation:hm-spin .7s linear infinite; flex-shrink:0; } /* Botón limpiar búsqueda */ .hm-sf { position:relative; } .hm-sf__clear { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.1); border:none; color:rgba(226,232,240,.6); font-size:1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 160ms, background 160ms, color 160ms; z-index:2; } .hm-sf__clear--visible { opacity:1; pointer-events:auto; } .hm-sf__clear:hover { background:rgba(34,211,238,.15); color:var(--c-cyan); } /* ══════════════════════════════════════════════════════════════ FASE 3 — SLIDER DE EVENTOS ══════════════════════════════════════════════════════════════ */ .hm-events { padding:80px 0; background:var(--c-bg); } /* ── Marquee (infinite auto-scroll) ── */ .hm-marquee-track { overflow:hidden; padding:8px 0 16px; -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%); } .hm-marquee-inner { display:flex; width:max-content; will-change:transform; } .hm-marquee-set { display:flex; gap:18px; padding-right:18px; } /* Tarjeta individual del marquee */ .hm-sl-card { flex-shrink:0; scroll-snap-align:unset; width:280px; background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color 280ms, box-shadow 280ms, transform 280ms; } .hm-sl-card:hover { border-color:rgba(34,211,238,.3); box-shadow:0 12px 48px rgba(34,211,238,.1),0 0 0 1px rgba(34,211,238,.08); transform:translateY(-4px); } .hm-sl-card__img { display:block; background:#060f24; position:relative; overflow:hidden; } .hm-sl-card__img img { width:100%; display:block; aspect-ratio:16/10; object-fit:cover; transition:transform 400ms ease; } .hm-sl-card:hover .hm-sl-card__img img { transform:scale(1.05); } .hm-sl-card__body { padding:14px 14px 16px; flex:1; display:flex; flex-direction:column; gap:7px; } .hm-sl-card__title { font-size:.9rem; font-weight:800; color:var(--c-text); line-height:1.3; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .hm-sl-card__title a { color:inherit; text-decoration:none; } .hm-sl-card__title a:hover { color:var(--c-cyan); } .hm-sl-card__meta { display:flex; flex-direction:column; gap:4px; } .hm-sl-card__meta span { display:flex; align-items:center; gap:5px; font-size:.72rem; color:var(--c-muted); } .hm-sl-card__meta svg { flex-shrink:0; } .hm-sl-card__price { font-size:.75rem; color:rgba(226,232,240,.45); margin-top:2px; } .hm-sl-card__price strong { color:var(--c-cyan); font-size:.88rem; } .hm-sl-card__foot { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:4px; } .hm-sl-card__link { display:inline-flex; align-items:center; gap:4px; font-size:.72rem; color:var(--c-muted); text-decoration:none; transition:color 180ms; } .hm-sl-card__link:hover { color:var(--c-cyan); } /* Reuso del badge de tipo en el slider */ .hm-ev-card__type-badge { display:inline-flex; align-self:flex-start; align-items:center; gap:5px; padding:4px 10px; border-radius:99px; font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:rgba(34,211,238,.15); border:1px solid rgba(34,211,238,.3); color:var(--c-cyan); backdrop-filter:blur(8px); } .hm-ev-card__type-badge--stream { background:rgba(99,102,241,.15); border-color:rgba(99,102,241,.3); color:#a5b4fc; } .hm-ev-card__type-badge--soon { background:rgba(230,51,18,.15); border-color:rgba(230,51,18,.3); color:#ff8a70; } .hm-ev-card__type-badge--finished { background:rgba(148,163,184,.15); border-color:rgba(148,163,184,.35); color:#cbd5e1; } /* ── Card "Éxito Total" — evento ya finalizado, no clickable ── */ .hm-sl-card--finished { cursor: default; pointer-events: none; opacity: .92; filter: saturate(.55); } .hm-sl-card--finished .hm-sl-card__title span, .hm-sl-card--finished .hm-sl-card__meta { color: #94a3b8; } .hm-sl-card__img--static { position: relative; display: block; overflow: hidden; cursor: default; } .hm-sl-card__img--static img { filter: grayscale(.45) brightness(.78); } .hm-sl-card__finished-banner { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; background: linear-gradient(90deg, rgba(51,65,85,.96), rgba(71,85,105,.96), rgba(51,65,85,.96)); color: #f1f5f9; font-weight: 900; font-size: .82rem; letter-spacing: .18em; text-align: center; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid rgba(255,255,255,.08); box-shadow: 0 -4px 18px rgba(0,0,0,.45); text-shadow: 0 1px 2px rgba(0,0,0,.4); } .hm-sl-card__finished-note { font-size: .78rem; color: #94a3b8; font-style: italic; } /* Empty state */ .hm-empty { padding:0; background:var(--c-bg); } /* More-events button */ .hm-events-more { text-align:center; margin-top:44px; } /* ══════════════════════════════════════════════════════════════ CIUDADES — directorio por ciudad ══════════════════════════════════════════════════════════════ */ .hm-cities { padding:80px 0; background:var(--c-bg); } .hm-city-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .hm-city-card { display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:12px; background:linear-gradient(135deg,var(--city-bg1,#060f24),var(--city-bg2,#071528)); border:1px solid rgba(255,255,255,.07); text-decoration:none; color:inherit; position:relative; overflow:hidden; transition:transform 240ms ease,border-color 240ms ease,box-shadow 240ms ease; } .hm-city-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 90% 0%,var(--city-accent,#22d3ee) 0%,transparent 70%); opacity:.06; pointer-events:none; } .hm-city-card:hover { transform:translateY(-3px); border-color:var(--city-accent,#22d3ee); box-shadow:0 8px 32px rgba(0,0,0,.35); } .hm-city-card__icon { flex-shrink:0; width:42px; height:42px; border-radius:10px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:var(--city-accent,#22d3ee); } .hm-city-card__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .hm-city-card__name { font-size:.95rem; font-weight:800; color:var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hm-city-card__count { font-size:.72rem; color:var(--c-muted); } .hm-city-card__arrow { flex-shrink:0; color:var(--city-accent,rgba(34,211,238,.5)); opacity:.4; transition:opacity 200ms,transform 200ms; } .hm-city-card:hover .hm-city-card__arrow { opacity:1; transform:translateX(4px); } /* ══════════════════════════════════════════════════════════════ AGENDA — calendario compacto por mes ══════════════════════════════════════════════════════════════ */ .hm-agenda { padding:80px 0; background:linear-gradient(180deg,rgba(34,211,238,.03) 0%,transparent 100%); border-top:1px solid var(--c-border); } .hm-agenda-cols { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden; } .hm-agenda-col { border-right:1px solid var(--c-border); } .hm-agenda-col:last-child { border-right:none; } .hm-agenda-col__header { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; background:rgba(255,255,255,.025); border-bottom:1px solid var(--c-border); } .hm-agenda-col__month { font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--c-cyan); } .hm-agenda-col__count { font-size:.65rem; font-weight:700; color:var(--c-muted); background:rgba(255,255,255,.06); padding:2px 8px; border-radius:99px; } .hm-agenda-list { list-style:none; margin:0; padding:0; } .hm-agenda-item { display:flex; align-items:center; gap:10px; padding:9px 16px; border-bottom:1px solid rgba(255,255,255,.035); transition:background 160ms; } .hm-agenda-item:last-child { border-bottom:none; } .hm-agenda-item:hover { background:rgba(255,255,255,.03); } .hm-agenda-item__day { flex-shrink:0; width:30px; height:30px; border-radius:7px; background:rgba(34,211,238,.07); border:1px solid rgba(34,211,238,.14); display:flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:900; color:var(--c-cyan); font-variant-numeric:tabular-nums; } .hm-agenda-item__info { flex:1; min-width:0; } .hm-agenda-item__title { display:block; font-size:.76rem; font-weight:700; color:var(--c-text); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color 160ms; } .hm-agenda-item__title:hover { color:var(--c-cyan); } .hm-agenda-item__meta { display:block; margin-top:1px; font-size:.64rem; color:var(--c-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hm-agenda-item__cta { flex-shrink:0; font-size:.64rem; font-weight:700; color:var(--c-cyan); text-decoration:none; opacity:0; transition:opacity 160ms; } .hm-agenda-item:hover .hm-agenda-item__cta { opacity:1; } /* ══════════════════════════════════════════════════════════════ MÉTRICAS (con contadores animados vía JS) ══════════════════════════════════════════════════════════════ */ .hm-proof { padding:60px 0; background:linear-gradient(135deg,rgba(34,211,238,.05) 0%,rgba(8,145,178,.04) 100%); border-top:1px solid rgba(34,211,238,.1); border-bottom:1px solid rgba(34,211,238,.1); } .hm-proof-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:0; } .hm-proof-item { display:flex; align-items:center; flex:1; min-width:160px; } .hm-proof-div { width:1px; height:52px; background:rgba(255,255,255,.07); flex-shrink:0; } .hm-proof-content { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 28px; text-align:center; } .hm-proof-num { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; color:var(--c-cyan); line-height:1; font-variant-numeric:tabular-nums; } .hm-proof-lbl { font-size:.78rem; color:var(--c-muted); font-weight:600; } /* ══════════════════════════════════════════════════════════════ PLATAFORMA ══════════════════════════════════════════════════════════════ */ .hm-platform { padding:72px 0; background:var(--c-bg2); position:relative; } .hm-platform .hm-section-head { margin-bottom: 32px; } /* Slider container con scroll horizontal + snap */ .hm-platform-grid { display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top:32px; padding: 4px 4px 18px; /* Edge fade hint */ mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); } .hm-platform-grid::-webkit-scrollbar { display: none; } .hm-platform-card { flex: 0 0 280px; scroll-snap-align: start; background:var(--c-card); border:1px solid var(--c-border); border-radius:14px; padding:22px 22px 20px; transition:border-color 250ms, transform 250ms, box-shadow 250ms; display:flex; flex-direction:column; gap:10px; } .hm-platform-card:hover { border-color:rgba(34,211,238,.32); transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.32); } .hm-platform-card__icon { width:42px; height:42px; border-radius:10px; background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.18); display:flex; align-items:center; justify-content:center; color:var(--c-cyan); transition:background 250ms; flex-shrink:0; } .hm-platform-card__icon svg { width:20px; height:20px; } .hm-platform-card:hover .hm-platform-card__icon { background:rgba(34,211,238,.16); } .hm-platform-card h3 { font-size:.96rem; font-weight:700; color:var(--c-text); margin:4px 0 0; line-height:1.25; letter-spacing:-.01em; } .hm-platform-card p { font-size:.82rem; color:var(--c-muted); line-height:1.55; margin:0; } /* Pager / nav controls */ .hm-platform__nav { display:flex; justify-content:space-between; align-items:center; margin-top:14px; gap:14px; } .hm-platform__dots { display:flex; gap:6px; flex:1; justify-content:center; } .hm-platform__dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.18); border:0; padding:0; cursor:pointer; transition: all .25s ease; } .hm-platform__dot:hover { background:rgba(255,255,255,.42); } .hm-platform__dot.is-active { width:22px; border-radius:3px; background:var(--c-cyan); } .hm-platform__arrows { display:flex; gap:8px; flex-shrink:0; } .hm-platform__arrow { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); color:rgba(226,232,240,.72); cursor:pointer; display:flex; align-items:center; justify-content:center; transition: all .2s ease; } .hm-platform__arrow:hover { background:rgba(34,211,238,.08); border-color:rgba(34,211,238,.4); color:var(--c-cyan); } .hm-platform__arrow:disabled { opacity:.35; cursor:not-allowed; } .hm-platform__arrow svg { width:14px; height:14px; } @media (max-width:768px) { .hm-platform { padding:52px 0; } .hm-platform-card { flex-basis: 250px; padding:18px 18px 16px; } .hm-platform-card h3 { font-size:.92rem; } .hm-platform-card p { font-size:.78rem; } .hm-platform__nav { margin-top:10px; } .hm-platform__arrow { width:34px; height:34px; } } @media (max-width:480px) { .hm-platform-card { flex-basis: 230px; } .hm-platform__arrows { display:none; } } /* ══════════════════════════════════════════════════════════════ EMBAJADORES360 ══════════════════════════════════════════════════════════════ */ @keyframes hm-emb-glow { 0%,100%{opacity:.55}50%{opacity:1} } .hm-emb { padding:88px 0; background:linear-gradient(135deg,#040c1c 0%,#07132a 55%,#040c1c 100%); position:relative; overflow:hidden; } .hm-emb::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 55% 55% at 78% 52%,rgba(34,211,238,.08) 0%,transparent 60%), radial-gradient(ellipse 40% 40% at 18% 65%,rgba(14,165,233,.04) 0%,transparent 60%); animation:hm-emb-glow 7s ease-in-out infinite; pointer-events:none; } .hm-emb-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1; } .hm-emb-copy { color:rgba(226,232,240,.6); font-size:.95rem; line-height:1.75; max-width:46ch; margin:0 0 32px; } .hm-emb-info > p[style*="max-width:46ch"] { display:none; } .hm-emb-stats { display:flex; align-items:stretch; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:14px; overflow:hidden; position:relative; } .hm-emb-stat { flex:1; display:flex; flex-direction:column; align-items:center; padding:20px 12px; text-align:center; transition:background 220ms; } .hm-emb-stat:hover { background:rgba(34,211,238,.05); } .hm-emb-stat__num { font-size:1.65rem; font-weight:900; color:var(--c-cyan); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .hm-emb-stat__lbl { font-size:.65rem; color:rgba(226,232,240,.42); margin-top:6px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; line-height:1.45; } .hm-emb-stat__div { width:1px; background:rgba(255,255,255,.07); flex-shrink:0; } .hm-emb-levels { display:flex; flex-direction:column; gap:8px; } .hm-emb-level { display:flex; align-items:center; gap:14px; padding:13px 18px; border-radius:12px; border:1px solid; position:relative; overflow:hidden; transition:transform 240ms cubic-bezier(.22,.68,0,1.2), border-color 240ms, box-shadow 240ms, background 240ms; } .hm-emb-level::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:currentColor; opacity:0; transition:opacity 240ms; border-radius:3px 0 0 3px; } .hm-emb-level:hover { transform:translateX(7px); } .hm-emb-level:hover::before { opacity:.65; } .hm-emb-level__icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid currentColor; opacity:.82; transition:opacity 220ms, box-shadow 220ms; } .hm-emb-level:hover .hm-emb-level__icon { opacity:1; box-shadow:0 0 14px currentColor; } .hm-emb-level__name { font-size:.88rem; font-weight:800; line-height:1.2; } .hm-emb-level__range { font-size:.70rem; color:rgba(226,232,240,.42); margin-top:3px; } .hm-emb-level--cta { background:rgba(34,211,238,.06); border-color:rgba(34,211,238,.2); color:var(--c-cyan); text-decoration:none; justify-content:center; font-weight:700; font-size:.85rem; gap:8px; margin-top:6px; } .hm-emb-level--cta::before { display:none; } .hm-emb-level--cta:hover { background:rgba(34,211,238,.12); border-color:var(--c-cyan); transform:none; box-shadow:0 0 28px rgba(34,211,238,.18); } /* ── Marquee infinito (solo mobile) ── */ .hm-emb-marquee { display: none; } .hm-emb-marquee-cta { display: none; } @keyframes hm-emb-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes hm-emb-icon-spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } @keyframes hm-emb-card-float { 0%, 100% { transform: translateY(0) rotateX(0); } 50% { transform: translateY(-4px) rotateX(2deg); } } @keyframes hm-emb-glow-pulse { 0%, 100% { opacity: .10; } 50% { opacity: .22; } } /* ══════════════════════════════════════════════════════════════ GALERÍA ══════════════════════════════════════════════════════════════ */ .hm-gallery { padding:80px 0; background:var(--c-bg2); } .hm-gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .hm-gallery-grid .hm-gallery-item:first-child { grid-column:span 2; grid-row:span 2; } .hm-gallery-item { position:relative; display:block; border-radius:12px; overflow:hidden; aspect-ratio:1; background:var(--c-bg3); } .hm-gallery-item:first-child { aspect-ratio:unset; min-height:240px; } .hm-gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 500ms ease; } .hm-gallery-item:hover img { transform:scale(1.06); } .hm-gallery-item__overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(4,12,28,.8) 0%,transparent 55%); display:flex; align-items:flex-end; padding:14px; opacity:0; transition:opacity 260ms; } .hm-gallery-item:hover .hm-gallery-item__overlay { opacity:1; } .hm-gallery-item__overlay span { color:#fff; font-weight:700; font-size:.84rem; } /* ══════════════════════════════════════════════════════════════ CÓMO FUNCIONA ══════════════════════════════════════════════════════════════ */ .hm-how { padding:80px 0; background:var(--c-bg); position:relative; overflow:hidden; } .hm-how::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(34,211,238,.03) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; } .hm-how-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; } .hm-how-item { position:relative; background:var(--c-card); border:1px solid var(--c-border); padding:32px 24px; text-align:center; transition:background 250ms, border-color 250ms; } .hm-how-item:not(:last-child) { border-right:none; } .hm-how-item:first-child { border-radius:var(--radius) 0 0 var(--radius); } .hm-how-item:last-child { border-radius:0 var(--radius) var(--radius) 0; border-right:1px solid var(--c-border); } .hm-how-item:hover { background:rgba(34,211,238,.05); border-color:rgba(34,211,238,.2); } .hm-how-item__num { font-size:2.8rem; font-weight:900; line-height:1; color:rgba(34,211,238,.18); margin-bottom:14px; font-variant-numeric:tabular-nums; } .hm-how-item:hover .hm-how-item__num { color:rgba(34,211,238,.4); } .hm-how-item__title { font-size:.85rem; font-weight:800; color:var(--c-text); margin-bottom:8px; } .hm-how-item__text { font-size:.78rem; color:var(--c-muted); line-height:1.65; } .hm-how-item__connector { display:none; } /* ══════════════════════════════════════════════════════════════ VIDEOS ══════════════════════════════════════════════════════════════ */ .hm-videos { padding:80px 0; background:var(--c-bg2); } .hm-videos-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; } .hm-video-card { background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden; } .hm-video-card__frame { aspect-ratio:16/9; } .hm-video-card__frame iframe, .hm-video-card__frame video { width:100%; height:100%; border:none; display:block; } .hm-video-card__title { padding:12px 16px; font-size:.85rem; font-weight:700; color:var(--c-text); } /* ══════════════════════════════════════════════════════════════ BANNERS ══════════════════════════════════════════════════════════════ */ .hm-banners { padding:48px 0; background:var(--c-bg); } .hm-banners-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .hm-banner-item { border-radius:12px; overflow:hidden; } .hm-banner-item img { width:100%; height:auto; display:block; } /* ══════════════════════════════════════════════════════════════ CTA VIDEO FINAL ══════════════════════════════════════════════════════════════ */ .hm-cta-video { position:relative; padding:120px 0; text-align:center; overflow:hidden; } .hm-cta-video__bg { position:absolute; inset:0; } .hm-cta-video__bg video { width:100%; height:100%; object-fit:cover; opacity:.72; } .hm-cta-video__overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(4,12,28,.62) 0%,rgba(6,15,36,.55) 100%); } .hm-cta-video__content { position:relative; z-index:2; } .hm-cta-video__tag { display:inline-flex; align-items:center; gap:7px; background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.2); color:var(--c-cyan); padding:5px 16px; border-radius:99px; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:22px; } .hm-cta-video__title { font-size:clamp(1.8rem,4vw,3rem); font-weight:900; color:#fff; letter-spacing:-.03em; margin-bottom:16px; } .hm-cta-video__body { font-size:1rem; color:rgba(226,232,240,.55); max-width:50ch; margin:0 auto 36px; line-height:1.65; } .hm-cta-video__actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } /* ══════════════════════════════════════════════════════════════ FASE 4 — ANIMACIONES DE ENTRADA ══════════════════════════════════════════════════════════════ */ .hm-anim [data-hm-fade] { opacity:0; transform:translateY(20px); transition:opacity 550ms ease, transform 550ms ease; } [data-hm-fade].hm-vis { opacity:1 !important; transform:none !important; } .hm-anim [data-hm-section] .hm-section-head { opacity:0; transform:translateY(18px); transition:opacity 580ms ease, transform 580ms ease; } [data-hm-section].hm-vis .hm-section-head { opacity:1; transform:none; } .hm-anim [data-hm-section] .hm-platform-card, .hm-anim [data-hm-section] .hm-how-item, .hm-anim [data-hm-section] .hm-gallery-item, .hm-anim [data-hm-section] .hm-video-card, .hm-anim [data-hm-section] .hm-banner-item, .hm-anim [data-hm-section] .hm-emb-level, .hm-anim [data-hm-section] .hm-emb-info, .hm-anim [data-hm-section] .hm-proof-content, .hm-anim [data-hm-section] .hm-city-card, .hm-anim [data-hm-section] .hm-agenda-col { opacity:0; transform:translateY(26px); transition:opacity 520ms ease var(--hm-d,0ms), transform 520ms ease var(--hm-d,0ms); } [data-hm-section].hm-vis .hm-platform-card, [data-hm-section].hm-vis .hm-how-item, [data-hm-section].hm-vis .hm-gallery-item, [data-hm-section].hm-vis .hm-video-card, [data-hm-section].hm-vis .hm-banner-item, [data-hm-section].hm-vis .hm-emb-level, [data-hm-section].hm-vis .hm-emb-info, [data-hm-section].hm-vis .hm-proof-content, [data-hm-section].hm-vis .hm-city-card, [data-hm-section].hm-vis .hm-agenda-col { opacity:1; transform:none; } /* Marquee cards are always visible — no per-card fade that would break the loop */ .hm-marquee-track .hm-sl-card { opacity:1 !important; transform:none !important; transition:border-color 280ms, box-shadow 280ms, transform 280ms !important; } /* ═══════════════════════════════════════════════════════════════════ TARJETAS — imagen completa, sin recorte Todos los contenedores de imágenes de eventos usan contain + fondo oscuro para mostrar el flyer/poster completo. ═══════════════════════════════════════════════════════════════════ */ /* ── Marquee slider (hm-sl-card) ── */ .hm-marquee-track { cursor:grab; user-select:none; -webkit-user-select:none; touch-action:pan-y; } .hm-marquee-track.is-dragging { cursor:grabbing; } .hm-marquee-track.is-dragging .hm-sl-card, .hm-marquee-track.is-dragging a, .hm-marquee-track.is-dragging button { pointer-events:none; } .hm-sl-card__img { aspect-ratio: 3 / 4 !important; /* portrait, igual para todos */ background: #06101e !important; } .hm-sl-card__img img { width: 100% !important; height: 100% !important; aspect-ratio: unset !important; /* quitar ratio forzado del img */ object-fit: cover !important; /* llenar contenedor uniforme — todas las cards igual altura */ object-position: center top !important; /* priorizar parte superior (título del flyer) */ transition: transform 400ms ease !important; } .hm-sl-card:hover .hm-sl-card__img img { transform: scale(1.03) !important; } /* ── Hero featured event card ── */ .hm-hero__event-img { background: linear-gradient(135deg, #060f24, #071a3a) !important; } .hm-hero__event-img img { object-fit: cover !important; object-position: center center !important; } /* CTA video */ .hm-anim .hm-cta-video[data-hm-section] .hm-cta-video__tag { opacity:0; transform:translateY(16px); transition:opacity 500ms ease,transform 500ms ease; } .hm-anim .hm-cta-video[data-hm-section] .hm-cta-video__title { opacity:0; transform:translateY(22px); transition:opacity 620ms ease 90ms,transform 620ms ease 90ms; } .hm-anim .hm-cta-video[data-hm-section] .hm-cta-video__body { opacity:0; transform:translateY(22px); transition:opacity 600ms ease 200ms,transform 600ms ease 200ms; } .hm-anim .hm-cta-video[data-hm-section] .hm-cta-video__actions { opacity:0; transform:translateY(18px); transition:opacity 560ms ease 330ms,transform 560ms ease 330ms; } .hm-anim .hm-cta-video.hm-vis .hm-cta-video__tag, .hm-anim .hm-cta-video.hm-vis .hm-cta-video__title, .hm-anim .hm-cta-video.hm-vis .hm-cta-video__body, .hm-anim .hm-cta-video.hm-vis .hm-cta-video__actions { opacity:1; transform:none; } /* ══════════════════════════════════════════════════════════════ FASE 5 — RESPONSIVE PROFESIONAL (MOBILE FIRST) ══════════════════════════════════════════════════════════════ */ /* ≤ 1100px — tablet landscape */ @media (max-width:1100px) { .hm-hero__split { grid-template-columns:1fr 1fr; gap:36px; } .hm-hero__headline { font-size:clamp(2.2rem,4vw,3.4rem); } .hm-sl-card { width:260px; } .hm-city-grid { grid-template-columns:repeat(3,1fr); } .hm-agenda-cols { grid-template-columns:repeat(2,1fr); } .hm-agenda-col:nth-child(2n) { border-right:none; } .hm-agenda-col:nth-child(n+3) { border-top:1px solid var(--c-border); } .hm-platform-grid { grid-template-columns:repeat(2,1fr); } .hm-how-grid { grid-template-columns:repeat(2,1fr); } .hm-how-item:first-child { border-radius:var(--radius) 0 0 0; } .hm-how-item:nth-child(2) { border-radius:0 var(--radius) 0 0; border-right:1px solid var(--c-border); } .hm-how-item:nth-child(3) { border-radius:0 0 0 var(--radius); } .hm-how-item:last-child { border-radius:0 0 var(--radius) 0; } .hm-gallery-grid { grid-template-columns:repeat(3,1fr); } } /* ≤ 980px — tablet portrait */ @media (max-width:980px) { .hm-hero__split { grid-template-columns:1fr; padding:90px 0 60px; min-height:auto; gap:28px; } .hm-hero__event-panel { justify-content:center; } .hm-hero__event-card { max-width:480px; } .hm-hero__event-img { aspect-ratio:3/4; } /* mantener portrait, nunca landscape */ .hm-hero__brand { max-width:unset; align-items:flex-start; } .hm-hero__headline { font-size:clamp(2.2rem,6vw,3.2rem); } .hm-emb-inner { grid-template-columns:1fr; gap:40px; } .hm-sl-card { width:240px; } } /* ≤ 800px — mobile landscape */ @media (max-width:800px) { .hm-city-grid { grid-template-columns:repeat(2,1fr); } .hm-section-head { flex-direction:column; align-items:flex-start; gap:14px; } .hm-trust-item { font-size:.74rem; padding:7px 14px; } .hm-gallery-grid { grid-template-columns:repeat(2,1fr); } .hm-gallery-grid .hm-gallery-item:first-child { grid-column:span 2; grid-row:span 1; } .hm-banners-grid { grid-template-columns:1fr; } .hm-proof-item { min-width:50%; } .hm-proof-div { display:none; } .hm-proof-content { border-bottom:1px solid var(--c-border); } } /* ≤ 768px — mobile */ @media (max-width:768px) { .hm-hero__split { padding:64px 0 36px; gap:20px; } .hm-hero__headline { font-size:clamp(2rem,8vw,2.8rem); } .hm-hero__sub { font-size:.92rem; } .hm-cta-video { padding:80px 0; } .hm-cta-video__tag, .hm-cta-video__title, .hm-cta-video__body, .hm-cta-video__actions { animation:hm-cta-mobile .55s ease both !important; transition:none !important; } .hm-cta-video__title { animation-delay:.15s !important; } .hm-cta-video__body { animation-delay:.3s !important; } .hm-cta-video__actions { animation-delay:.45s !important; } } @keyframes hm-cta-mobile { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} } /* ≤ 600px */ @media (max-width:600px) { .hm-section-head { margin-bottom:18px; } .hm-section-head--center { align-items:flex-start; text-align:left; } .hm-section-sub { font-size:.84rem; line-height:1.6; max-width:34ch; } .hm-hero__split { padding:52px 0 28px; gap:16px; } .hm-hero__trust-row { gap:5px; } .hm-hero__ctas { flex-direction:column; } .hm-hero__ctas .hm-btn { width:100%; justify-content:center; } /* Card: ocupa todo el ancho disponible */ .hm-hero__event-card { max-width:100%; border-radius:20px; } .hm-hero__event-img { aspect-ratio:3/4 !important; } .hm-hero__flyer-name { font-size:.88rem; } .hm-sl-card { width:210px; } .hm-platform { padding:40px 0 28px; } .hm-platform-grid { grid-template-columns:1fr; } .hm-platform-grid { gap:10px; margin-top:0; } .hm-platform-card { opacity:1 !important; transform:none !important; transition:border-color 250ms, box-shadow 250ms !important; } .hm-gallery-grid { grid-template-columns:1fr; } .hm-gallery-grid .hm-gallery-item:first-child { grid-column:span 1; } .hm-how-grid { grid-template-columns:1fr; gap:8px; } .hm-how-item { border-radius:var(--radius) !important; border-right:1px solid var(--c-border) !important; padding:14px 16px !important; display:flex; align-items:center; gap:14px; text-align:left; } .hm-how-item__num { font-size:1.6rem !important; margin-bottom:0 !important; flex-shrink:0; min-width:36px; } .hm-how-item__title { font-size:.82rem !important; margin-bottom:2px !important; } .hm-how-item__text { font-size:.73rem !important; line-height:1.45 !important; } .hm-hero__scroll { display:none; } /* Trust bar chips: más compactos */ .hm-trust-item { font-size:.7rem; padding:6px 12px; } } /* ≤ 480px */ @media (max-width:480px) { .hm-hero__split { padding:44px 0 24px; gap:14px; } .hm-hero__headline { font-size:clamp(1.8rem,9.5vw,2.4rem); } .hm-platform { padding:34px 0 24px; } .hm-emb-copy { font-size:.88rem; line-height:1.7; margin-bottom:24px; } .hm-hero__event-card { border-radius:16px; } .hm-hero__event-img { aspect-ratio:3/4 !important; } .hm-sl-card { width:190px; } .hm-city-grid { grid-template-columns:1fr 1fr; gap:10px; } .hm-agenda-cols { grid-template-columns:1fr; } .hm-agenda-col { border-right:none !important; border-top:1px solid var(--c-border); } .hm-agenda-col:first-child { border-top:none; } .hm-search-form { grid-template-columns: 1fr 1fr; gap:8px; padding:0; } .hm-sf:nth-child(1) { grid-column: 1 / -1; } .hm-sf__btn { grid-column: 1 / -1; width:100%; justify-content:center; } .hm-sf input, .hm-sf select { height:46px; font-size:.88rem; } .hm-cd-num { font-size:1.3rem; } .hm-cd-unit { min-width:36px; } .hm-trust-div { display:none; } .hm-trust-item { width:50%; justify-content:center; font-size:.72rem; padding:6px 8px; } /* ── Embajadores: layout móvil compacto ── */ .hm-emb { padding: 56px 0; } .hm-emb-inner { gap: 28px; } .hm-emb-info > h2 { font-size: 1.6rem !important; line-height: 1.15 !important; } .hm-emb-copy { font-size: .88rem; line-height: 1.6; margin-bottom: 20px; } /* Stats compactas en mobile */ .hm-emb-stats { flex-direction: row; } .hm-emb-stat { padding: 14px 8px; } .hm-emb-stat__num { font-size: 1.35rem; } .hm-emb-stat__lbl { font-size: .58rem; margin-top: 4px; line-height: 1.3; } .hm-emb-stat__div { width: 1px; height: auto; } /* CTAs lado a lado */ .hm-emb-info > div[style*="display:flex;gap:12px"] { margin-top: 22px !important; gap: 8px !important; } .hm-emb-info .hm-btn--lg { flex: 1; min-width: 0; font-size: .8rem !important; padding: 0 12px !important; height: 42px !important; } /* Lista vertical desktop oculta en móvil */ .hm-emb-levels--list { display: none; } /* Marquee infinito horizontal con efectos 3D */ .hm-emb-marquee { display: block; position: relative; overflow: hidden; margin: 0 -16px; padding: 14px 0; perspective: 1200px; mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); } .hm-emb-marquee__track { display: flex; gap: 14px; width: max-content; animation: hm-emb-marquee-scroll 26s linear infinite; will-change: transform; transform-style: preserve-3d; } .hm-emb-marquee:hover .hm-emb-marquee__track, .hm-emb-marquee:focus-within .hm-emb-marquee__track { animation-play-state: paused; } .hm-emb-marq { flex: 0 0 220px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid; position: relative; backdrop-filter: blur(4px); animation: hm-emb-card-float 4s ease-in-out infinite; box-shadow: 0 8px 24px rgba(0,0,0,.32); } /* Cada card flota con timing distinto para crear ola */ .hm-emb-marq:nth-child(2) { animation-delay: .4s; } .hm-emb-marq:nth-child(3) { animation-delay: .8s; } .hm-emb-marq:nth-child(4) { animation-delay: 1.2s; } .hm-emb-marq:nth-child(5) { animation-delay: 1.6s; } .hm-emb-marq:nth-child(6) { animation-delay: 2.0s; } .hm-emb-marq:nth-child(7) { animation-delay: 2.4s; } /* Glow aura pulsante en color del nivel */ .hm-emb-marq::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(ellipse at center, currentColor 0%, transparent 70%); opacity: .12; filter: blur(8px); animation: hm-emb-glow-pulse 3s ease-in-out infinite; pointer-events: none; z-index: -1; } .hm-emb-marq__icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid currentColor; opacity: .95; position: relative; animation: hm-emb-icon-spin 6s linear infinite; transform-style: preserve-3d; backface-visibility: visible; } .hm-emb-marq__icon::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; background: radial-gradient(circle, currentColor 0%, transparent 65%); opacity: .25; filter: blur(6px); z-index: -1; } .hm-emb-marq__icon svg { width: 18px; height: 18px; } .hm-emb-marq__txt { min-width: 0; } .hm-emb-marq__name { font-size: .85rem; font-weight: 800; line-height: 1.15; white-space: nowrap; } .hm-emb-marq__range { font-size: .68rem; color: rgba(226,232,240,.5); margin-top: 3px; white-space: nowrap; } /* CTA del marquee (full width abajo) */ .hm-emb-marquee-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 13px 18px; border-radius: 12px; background: rgba(34,211,238,.06); border: 1px solid rgba(34,211,238,.22); color: var(--c-cyan); text-decoration: none; font-weight: 700; font-size: .86rem; transition: background .25s ease, border-color .25s ease; } .hm-emb-marquee-cta:hover { background: rgba(34,211,238,.12); border-color: var(--c-cyan); } } /* Pausa marquee si el user prefiere reduce-motion → más lento, no detenido */ @media (prefers-reduced-motion: reduce) { .hm-emb-marquee__track { animation-duration: 60s; } } /* ≤ 390px — iPhone 14 Pro / mini */ @media (max-width:390px) { .hm-hero__split { padding:38px 0 20px; } .hm-hero__headline { font-size:clamp(1.65rem,9vw,2.1rem); } .hm-hero__sub { font-size:.82rem; } .hm-hero__ctas .hm-btn { font-size:.82rem; padding:0 14px; height:38px; } .hm-sl-card { width:170px; } .hm-trust-item { font-size:.68rem; padding:5px 7px; } .hm-emb-info > h2 { font-size: 1.4rem !important; } .hm-emb-copy { font-size: .82rem; } .hm-emb-stat__num { font-size: 1.2rem; } .hm-emb-info .hm-btn--lg { font-size: .74rem !important; height: 40px !important; } .hm-emb-level { padding: 9px 10px; gap: 8px; } .hm-emb-level__icon { width: 28px; height: 28px; } .hm-emb-level__name { font-size: .76rem; } .hm-emb-level__range { font-size: .6rem; } } /* touch: disable hover transforms that look broken on tap */ @media (hover:none) { .hm-hero__event-card:hover { transform:none; box-shadow:none; } .hm-sl-card:hover { transform:none; } .hm-city-card:hover { transform:none; } .hm-how-item:hover { transform:none; } .hm-platform-card:hover { transform:none; } .hm-gallery-item:hover { transform:none; } .hm-agenda-ev:hover { transform:none; } .hm-emb-level:hover { transform:none; } } /* ════════════════════════════════════════════════════════════════ NUEVAS SECCIONES — RESTRUCTURE 2026 Números · Para quién es · Confían · Final bifurcado ════════════════════════════════════════════════════════════════ */ /* ── Números ──────────────────────────────────────────────────── */ .hm-numbers { padding: 80px 0; background: radial-gradient(ellipse 60% 50% at 0% 0%, rgba(255,107,53,.05), transparent 65%), radial-gradient(ellipse 50% 50% at 100% 100%, rgba(34,211,238,.04), transparent 70%), var(--bg, #050b14); border-top: 1px solid var(--c-border, rgba(255,255,255,.07)); border-bottom: 1px solid var(--c-border, rgba(255,255,255,.07)); } .hm-numbers__head { text-align: center; max-width: 720px; margin: 0 auto 50px; } .hm-numbers__head .hm-eyebrow { color: #ff6b35; } .hm-numbers__head .hm-section-title { margin: 8px 0 14px; } .hm-numbers__head .hm-section-sub { color: rgba(255,255,255,.62); } .hm-numbers__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(11,22,40,.6) 0%, rgba(7,16,30,.6) 100%); backdrop-filter: blur(8px); } .hm-number { padding: 36px 28px; border-right: 1px solid rgba(255,255,255,.06); text-align: left; display: flex; flex-direction: column; gap: 6px; position: relative; transition: background .3s ease; } .hm-number:last-child { border-right: 0; } .hm-number:hover { background: rgba(255,107,53,.04); } .hm-number__icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,107,53,.10); border: 1px solid rgba(255,107,53,.24); color: #ff6b35; display: grid; place-items: center; margin-bottom: 16px; } .hm-number__icon svg { width: 20px; height: 20px; } .hm-number__num { font-size: clamp(2.4rem, 4vw, 3rem); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.03em; font-feature-settings: "tnum"; } .hm-number__pct { font-size: 1.6rem; color: #ff6b35; margin-left: 2px; } .hm-number__lbl { font-size: .85rem; font-weight: 700; color: #fff; margin-top: 4px; } .hm-number__hint { font-size: .76rem; color: rgba(255,255,255,.5); line-height: 1.5; margin-top: 4px; } @media (max-width: 1024px) { .hm-numbers__grid { grid-template-columns: repeat(2, 1fr); } .hm-number:nth-child(2) { border-right: 0; } .hm-number:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.06); } } @media (max-width: 768px) { .hm-numbers { padding: 52px 0; } .hm-numbers__head { margin-bottom: 28px; } .hm-numbers__head .hm-section-title { font-size: 1.45rem !important; line-height: 1.2 !important; margin: 6px 0 10px; } .hm-numbers__head .hm-section-sub { font-size: .88rem; line-height: 1.55; } .hm-numbers__grid { border-radius: 14px; } .hm-number { padding: 20px 18px; gap: 4px; display: flex; flex-direction: column; } .hm-number__icon { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 8px; } .hm-number__icon svg { width: 16px; height: 16px; } .hm-number__num { font-size: 1.85rem; line-height: 1; } .hm-number__pct { font-size: 1.1rem; } .hm-number__lbl { font-size: .8rem; margin-top: 4px; font-weight: 700; } .hm-number__hint { font-size: .72rem; line-height: 1.4; margin-top: 4px; color: rgba(255,255,255,.45); } } @media (max-width: 380px) { .hm-number { padding: 16px 14px; } .hm-number__icon { width: 28px; height: 28px; margin-bottom: 6px; } .hm-number__num { font-size: 1.55rem; } .hm-number__lbl { font-size: .76rem; } .hm-number__hint { font-size: .68rem; } } /* ── Para quién es (3 caminos) ──────────────────────────────── */ .hm-paths { padding: 90px 0; background: var(--bg, #050b14); } .hm-paths .hm-section-head { margin-bottom: 48px; } .hm-paths__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .hm-path { position: relative; padding: 32px 28px 28px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: linear-gradient(180deg, rgba(11,22,40,.6) 0%, rgba(7,16,30,.6) 100%); text-decoration: none; color: inherit; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease; display: flex; flex-direction: column; gap: 14px; overflow: hidden; } .hm-path::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--path-tone, transparent) 0%, transparent 60%); opacity: .14; pointer-events: none; transition: opacity .3s ease; } .hm-path:hover { transform: translateY(-4px); border-color: var(--path-border, rgba(255,255,255,.18)); box-shadow: 0 24px 60px rgba(0,0,0,.4); } .hm-path:hover::before { opacity: .22; } .hm-path--buyer { --path-tone: #ff6b35; --path-border: rgba(255,107,53,.45); } .hm-path--producer { --path-tone: #20c7e8; --path-border: rgba(32,199,232,.45); } .hm-path--ambassador { --path-tone: #a855f7; --path-border: rgba(168,85,247,.45); } .hm-path__badge { position: absolute; top: 16px; right: 16px; padding: 5px 11px; border-radius: 999px; background: linear-gradient(135deg, #20c7e8, #06b6d4); color: #04111e; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .hm-path__icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(var(--path-rgb, 255, 107, 53), .10); border: 1px solid var(--path-border); color: var(--path-tone); display: grid; place-items: center; } .hm-path__icon svg { width: 26px; height: 26px; } .hm-path--buyer .hm-path__icon { background: rgba(255,107,53,.10); } .hm-path--producer .hm-path__icon { background: rgba(32,199,232,.10); } .hm-path--ambassador .hm-path__icon { background: rgba(168,85,247,.10); } .hm-path__title { font-size: 1.45rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: -.02em; } .hm-path__desc { font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.65); margin: 0; } .hm-path__bullets { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; } .hm-path__bullets li { font-size: .84rem; color: rgba(255,255,255,.78); padding-left: 22px; position: relative; } .hm-path__bullets li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--path-tone); opacity: .25; } .hm-path__bullets li::after { content: ''; position: absolute; left: 3px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--path-tone); } .hm-path__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--path-tone); font-size: .92rem; font-weight: 700; transition: gap .25s ease; } .hm-path:hover .hm-path__cta { gap: 12px; } @media (max-width: 1024px) { .hm-paths { padding: 64px 0; } .hm-paths__grid { grid-template-columns: 1fr; gap: 14px; } .hm-path { padding: 26px 24px 24px; } } /* Mobile: cards horizontales compactos para evitar scroll infinito */ @media (max-width: 768px) { .hm-paths { padding: 52px 0; } .hm-paths .hm-section-head { margin-bottom: 30px; } .hm-paths__grid { gap: 12px; } .hm-path { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto auto; column-gap: 14px; row-gap: 8px; padding: 18px 18px 16px; border-radius: 14px; align-items: start; } .hm-path__icon { width: 56px; height: 56px; grid-column: 1; grid-row: 1 / 3; margin: 0; } .hm-path__icon svg { width: 24px; height: 24px; } .hm-path__title { grid-column: 2; grid-row: 1; font-size: 1.2rem; margin: 2px 0 0; } .hm-path__desc { grid-column: 2; grid-row: 2; font-size: .82rem; line-height: 1.5; margin: 0; } .hm-path__bullets { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 6px 0 4px; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.06); } .hm-path__bullets li { font-size: .76rem; line-height: 1.35; padding-left: 18px; } .hm-path__bullets li::before { top: 5px; width: 10px; height: 10px; } .hm-path__bullets li::after { top: 8px; left: 2px; width: 6px; height: 6px; } .hm-path__cta { grid-column: 1 / -1; grid-row: 4; font-size: .85rem; padding-top: 4px; } .hm-path__badge { top: 12px; right: 12px; font-size: .58rem; padding: 4px 9px; } } @media (max-width: 380px) { .hm-path { grid-template-columns: 48px 1fr; column-gap: 12px; padding: 16px 16px 14px; } .hm-path__icon { width: 48px; height: 48px; } .hm-path__icon svg { width: 22px; height: 22px; } .hm-path__title { font-size: 1.1rem; } .hm-path__desc { font-size: .8rem; } .hm-path__bullets { grid-template-columns: 1fr; gap: 4px; } .hm-path__bullets li { font-size: .74rem; } } /* ── Confían en Momento360 ─────────────────────────────────── */ .hm-trust-block { padding: 90px 0; background: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(34,211,238,.05), transparent 65%), var(--bg, #050b14); border-top: 1px solid rgba(255,255,255,.05); } .hm-trust-block .hm-section-head { margin-bottom: 48px; } .hm-trust-block__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 56px; } .hm-tcase { padding: 28px 26px 26px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: linear-gradient(180deg, rgba(11,22,40,.6) 0%, rgba(7,16,30,.6) 100%); transition: border-color .25s ease, transform .25s ease; display: flex; flex-direction: column; gap: 18px; } .hm-tcase:hover { border-color: rgba(255,255,255,.18); transform: translateY(-3px); } .hm-tcase__head { display: flex; align-items: center; gap: 14px; } .hm-tcase__avatar { position: relative; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #ff6b35, #e63312); overflow: hidden; flex-shrink: 0; box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06) inset; } .hm-tcase__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; } .hm-tcase__avatar-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: .98rem; letter-spacing: .04em; z-index: 1; } .hm-tcase__avatar--cyan { background: linear-gradient(135deg, #20c7e8, #06b6d4); } .hm-tcase__avatar--cyan .hm-tcase__avatar-fallback { color: #04111e; } .hm-tcase__avatar--purple { background: linear-gradient(135deg, #a855f7, #7c3aed); } .hm-tcase__head strong { display: block; font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.2; } .hm-tcase__head span { display: block; margin-top: 2px; font-size: .76rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; } .hm-tcase__quote { font-size: .92rem; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0; quotes: '"' '"'; } .hm-tcase__metric { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: baseline; gap: 8px; } .hm-tcase__metric-num { font-size: 1.5rem; font-weight: 800; color: #ff6b35; letter-spacing: -.02em; line-height: 1; } .hm-tcase__metric-lbl { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.5); font-weight: 600; } .hm-partners { text-align: center; padding: 32px 24px; background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; } .hm-partners__label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 22px; } .hm-partners__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 40px; } .hm-partner { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0; border: 0; background: transparent; transition: opacity .25s ease, filter .25s ease, transform .25s ease; opacity: .65; filter: grayscale(1) brightness(1.5); } .hm-partner img { height: 100%; width: auto; max-width: 140px; display: block; object-fit: contain; } .hm-partner:hover { opacity: 1; filter: grayscale(0) brightness(1); transform: translateY(-2px); } @media (max-width: 768px) { .hm-partners { padding: 24px 16px; } .hm-partners__row { gap: 14px 24px; } .hm-partner { height: 28px; } .hm-partner img { max-width: 110px; } } @media (max-width: 1024px) { .hm-trust-block { padding: 70px 0; } .hm-trust-block__grid { grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 768px) { .hm-trust-block { padding: 56px 0; } .hm-trust-block .hm-section-head { margin-bottom: 30px; } .hm-trust-block__grid { gap: 12px; margin-bottom: 36px; } .hm-tcase { padding: 18px 18px 16px; gap: 14px; border-radius: 14px; } .hm-tcase__head { gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.06); } .hm-tcase__avatar { width: 48px; height: 48px; border-radius: 12px; } .hm-tcase__head strong { font-size: .94rem; } .hm-tcase__head span { font-size: .68rem; } .hm-tcase__quote { font-size: .85rem; line-height: 1.55; margin: -2px 0 0; } .hm-tcase__metric { padding-top: 12px; gap: 6px; align-items: baseline; } .hm-tcase__metric-num { font-size: 1.3rem; } .hm-tcase__metric-lbl { font-size: .68rem; } .hm-partners { padding: 22px 16px; } .hm-partners__label { font-size: .64rem; margin-bottom: 16px; } } @media (max-width: 380px) { .hm-tcase { padding: 16px 14px 14px; } .hm-tcase__avatar { width: 44px; height: 44px; } .hm-tcase__quote { font-size: .82rem; } .hm-tcase__metric-num { font-size: 1.2rem; } } /* ── Final bifurcado ───────────────────────────────────────── */ .hm-final { position: relative; padding: 100px 0 110px; overflow: hidden; color: #fff; isolation: isolate; } .hm-final__bg { position: absolute; inset: 0; z-index: -1; } .hm-final__bg video { width: 100%; height: 100%; object-fit: cover; } .hm-final__overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(5,11,20,.55), rgba(5,11,20,.92) 80%), linear-gradient(180deg, rgba(5,11,20,.7) 0%, rgba(5,11,20,.92) 100%); } .hm-final__head { text-align: center; max-width: 760px; margin: 0 auto 50px; } .hm-eyebrow--light { color: #ff6b35; } .hm-final__title { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.1; color: #fff; margin: 14px 0 14px; letter-spacing: -.025em; } .hm-final__sub { font-size: 1.02rem; color: rgba(255,255,255,.7); line-height: 1.65; margin: 0; } .hm-final__split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; max-width: 980px; margin: 0 auto; } .hm-final__card { padding: 36px 32px 34px; border: 1px solid rgba(255,255,255,.10); border-radius: 20px; background: linear-gradient(180deg, rgba(11,22,40,.78) 0%, rgba(7,16,30,.82) 100%); backdrop-filter: blur(10px); text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; transition: border-color .25s ease, transform .25s ease; } .hm-final__card:hover { transform: translateY(-3px); } .hm-final__card--buyer:hover { border-color: rgba(255,107,53,.4); } .hm-final__card--producer:hover { border-color: rgba(32,199,232,.4); } .hm-final__card-icon { width: 60px; height: 60px; border-radius: 14px; background: rgba(255,107,53,.10); border: 1px solid rgba(255,107,53,.28); color: #ff6b35; display: grid; place-items: center; margin-bottom: 6px; } .hm-final__card-icon--cyan { background: rgba(32,199,232,.10); border-color: rgba(32,199,232,.28); color: #20c7e8; } .hm-final__card-icon svg { width: 26px; height: 26px; } .hm-final__card h3 { font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: -.02em; } .hm-final__card p { font-size: .92rem; color: rgba(255,255,255,.62); line-height: 1.6; margin: 0 0 10px; } .hm-final__card .hm-btn { margin-top: auto; align-self: stretch; } .hm-final__divider { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; position: relative; } .hm-final__divider span { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(11,22,40,.6); display: grid; place-items: center; backdrop-filter: blur(6px); } .hm-btn--cyan { background: linear-gradient(135deg, #20c7e8 0%, #06b6d4 100%); color: #04111e; border: 0; box-shadow: 0 14px 36px rgba(32,199,232,.32); } .hm-btn--cyan:hover { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); transform: translateY(-2px); box-shadow: 0 18px 44px rgba(32,199,232,.42); } @media (max-width: 768px) { .hm-final { padding: 56px 0 64px; } .hm-final__head { margin-bottom: 26px; } .hm-final__title { font-size: 1.5rem; line-height: 1.2; margin: 10px 0 10px; } .hm-final__sub { font-size: .9rem; line-height: 1.55; } .hm-final__split { grid-template-columns: 1fr; gap: 10px; } .hm-final__divider { padding: 0; } .hm-final__divider span { width: 28px; height: 28px; font-size: .68rem; } /* Card compacto: layout horizontal con icono pequeño + texto + botón */ .hm-final__card { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 4px; padding: 16px 16px 14px; text-align: left; border-radius: 14px; align-items: center; } .hm-final__card-icon { width: 44px; height: 44px; border-radius: 10px; margin: 0; grid-column: 1; grid-row: 1 / 3; } .hm-final__card-icon svg { width: 20px; height: 20px; } .hm-final__card h3 { grid-column: 2; grid-row: 1; font-size: 1.05rem; margin: 0; } .hm-final__card p { grid-column: 2; grid-row: 2; font-size: .8rem; line-height: 1.45; margin: 0; } .hm-final__card .hm-btn { grid-column: 1 / -1; grid-row: 3; height: 40px !important; font-size: .82rem !important; margin-top: 8px; padding: 0 14px !important; } } @media (max-width: 380px) { .hm-final__title { font-size: 1.3rem; } .hm-final__sub { font-size: .84rem; } .hm-final__card { padding: 14px 14px 12px; } .hm-final__card-icon { width: 40px; height: 40px; } .hm-final__card h3 { font-size: .98rem; } .hm-final__card p { font-size: .76rem; } } /* ── Hide scroll button on mobile (less clutter) ─────────────── */ @media (max-width: 540px) { .hm-hero__scroll { display: none; } } /* ══════════════════════════════════════════════════════════════ PROMO CARDS (admin-controlled top section) ══════════════════════════════════════════════════════════════ */ .hm-promo-cards { padding: 28px 24px 12px; background: #040c1c; } .hm-promo-cards__grid { max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; } .hm-promo-card { position: relative; flex: 0 1 240px; max-width: 240px; background: #0f1728; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .hm-promo-card--link { cursor: pointer; } .hm-promo-card--link:hover { transform: translateY(-3px); border-color: rgba(34, 211, 238, 0.4); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } .hm-promo-card__img { aspect-ratio: 16 / 9; background: #000; overflow: hidden; } .hm-promo-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 380ms ease; } .hm-promo-card--link:hover .hm-promo-card__img img { transform: scale(1.04); } .hm-promo-card__body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 4px; } .hm-promo-card__title { color: #ffffff; font-size: 0.98rem; font-weight: 700; line-height: 1.3; margin: 0; } .hm-promo-card__subtitle { color: rgba(226, 232, 240, 0.62); font-size: 0.82rem; line-height: 1.5; margin: 0; } @media (max-width: 720px) { .hm-promo-cards { padding: 18px 16px 6px; } .hm-promo-cards__grid { gap: 12px; } .hm-promo-card { flex: 0 1 calc(50% - 6px); max-width: calc(50% - 6px); } .hm-promo-card__body { padding: 10px 12px 12px; } .hm-promo-card__title { font-size: 0.88rem; } .hm-promo-card__subtitle { font-size: 0.74rem; } } @media (max-width: 400px) { .hm-promo-card { flex: 0 1 100%; max-width: 100%; } } /* Hero sin modificación de altura — mantiene su diseño original */