/* ===================== Reset básico ===================== */ *, *::before, *::after { box-sizing: border-box; } /* ===================== Variables & Tema ===================== */ :root{ /* Paleta base (Azul noche + Dorado) */ --bg: #17233C; --bg-2: #0b1020; --fg: #b4acac; --dots: #B68742; --muted: #b8bdc7; --brand: #B68742; --brand-600: #a77933; --brand-700: #825b25; --ink: #0b1020; --card: #0f172a; --ring: rgba(182, 135, 66, .28); --shadow: 0 14px 28px rgba(0,0,0,.28); --header-h: 72px; --social: #000000da; /* offsets / timings usados por bloques del CSS 2 */ --nav-offset: 88px; --veo-interval: 5000ms; /* Alturas usadas por iframes/widgets */ --widget-h-compact: 360px; --widget-h-normal: 560px; --widget-h-tall: 680px; --widget-h-compact-sm: 420px; --widget-h-normal-sm: 640px; --widget-h-tall-sm: 760px; --mag-h-compact: 520px; --mag-h-normal: 680px; --mag-h-tall: 860px; --mag-h-compact-sm: 420px; --mag-h-normal-sm: 520px; --mag-h-tall-sm: 640px; --success:#10b981; --warn:#f59e0b; --error:#ef4444; } html[data-theme="dark"]{ --bg: #0f1115; --bg-2: #0b0d11; --fg: #f4f6f8; --muted: #aab0b6; --ink: #f8f9fa; --card: #12151b; --shadow: 0 10px 20px rgba(0,0,0,.35); } /* (Opcional) Si quieres “skin rojo” del CSS 2, activa: */ html[data-skin="red"]{ --brand:#e51e2a; --brand-600:#c71822; --brand-700:#99131a; --dots: var(--brand); --ring: rgba(229, 30, 42, .28); } /* ==== View Transitions: raíz y centro del círculo ==== */ html{ view-transition-name: root; --vt-cx: 50%; --vt-cy: 50%; } /* ===================== Base ===================== */ body{ margin:0; font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; color: var(--fg); background-color: var(--bg); background-image: radial-gradient(#b6884227 1px, transparent 1px); background-size: 16px 16px; background-attachment: fixed; } html[data-theme="dark"] body{ background-image: radial-gradient(#2a2f36 1px, transparent 1px); } /* Para modales / menú móvil */ body.no-scroll, body.no-scroll-modal{ overflow:hidden; } .container{ width:min(1140px, 92%); margin-inline:auto; } .center{ text-align:center; } .section{ padding:64px 0; } .section--tight{ padding:48px 0 72px; } .section__head h2{ font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); margin:0 0 6px; color: var(--dots); } .section__head p{ color:var(--muted); margin:0; } .muted{ color:var(--muted); } .gold-gradient-text{ background: linear-gradient(to top, #b6771f 0%, #f3c978 40%, #fff3cf 55%, #f0b655 100% ); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ===================== Header ===================== */ .site-header{ position: sticky; top:0; z-index:30; backdrop-filter: saturate(180%) blur(8px); background: color-mix(in oklab, var(--bg), transparent 10%); border-bottom: 1px solid color-mix(in oklab, var(--fg), transparent 92%); } .header__inner{ display:flex; flex-direction: column; /* logo arriba + menú debajo (desktop) */ align-items:center; justify-content:center; gap:10px; padding:10px 0 12px; min-height: var(--header-h); position: relative; } .brand{ display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; color: inherit; margin:0; } .brand__logo{ height:84px; width:auto; } /* ===== Navegación desktop ===== */ .nav{ margin:0; display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:center; } .nav a{ color: var(--fg); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:10px; transition: background .2s, color .2s; } .nav a:hover{ background: color-mix(in oklab, var(--brand), transparent 92%); color: var(--brand); } /* ===== Botón tema ===== */ .theme-btn{ margin-left:8px; width:40px; height:40px; display:grid; place-items:center; border-radius:999px; border:1px solid color-mix(in oklab, var(--fg), transparent 85%); background: var(--card); color: var(--fg); transition: background .2s, border-color .2s, transform .05s; position: relative; } .theme-btn:active{ transform: translateY(1px); } .theme-btn .icon{ position:absolute; width:22px; height:22px; transition: opacity .22s, transform .25s; } .theme-btn .sun{ opacity:1; transform: scale(1) rotate(0deg); } .theme-btn .moon{ opacity:0; transform: scale(.85) rotate(-20deg); } html[data-theme="dark"] .theme-btn .sun{ opacity:0; transform: scale(.85) rotate(20deg); } html[data-theme="dark"] .theme-btn .moon{ opacity:1; transform: scale(1) rotate(0); } /* ===================== Botón hamburguesa ===================== */ .nav-toggle{ margin-left:auto; width:44px; height:44px; border-radius:12px; border:1px solid color-mix(in oklab, var(--fg), transparent 85%); background: var(--card); color: var(--fg); display:none; /* desktop oculto */ flex-direction: column; align-items:center; justify-content:center; gap:5px; line-height:0; cursor:pointer; transition: background .2s, border-color .2s, transform .05s; } .nav-toggle:active{ transform: translateY(1px); } .nav-toggle .bar{ width:22px; height:2px; background: currentColor; border-radius:2px; display:block; transition: transform .2s, opacity .2s; } .nav-open .nav-toggle .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav-open .nav-toggle .bar:nth-child(2){ opacity:0; } .nav-open .nav-toggle .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* ===================== Overlay ===================== */ .nav-overlay{ position: fixed; inset:0; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); z-index:25; opacity:0; pointer-events:none; transition: opacity .2s ease; } .nav-overlay.is-visible{ opacity:1; pointer-events:auto; } /* ===================== Navegación móvil ===================== */ @media (max-width:980px){ :root{ --header-h:64px; } /* Header móvil: logo centrado + botones a la derecha */ .header__inner{ flex-direction: row; justify-content: flex-end; align-items: center; gap:12px; padding:10px 0; } .brand{ position:absolute; left:50%; transform: translateX(-50%); } .brand__logo{ height:66px; } .nav-toggle{ display:flex; } .nav{ position: fixed; left:0; right:0; top: var(--header-h); z-index:26; display:flex; flex-direction: column; align-items: stretch; gap:6px; padding:12px; background: var(--card); border-top: 1px solid color-mix(in oklab, var(--fg), transparent 88%); box-shadow: 0 12px 24px rgba(0,0,0,.10); transform: translateY(-8px); opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; } .nav a{ display:block; padding:12px 10px; border-radius:10px; } .nav a:active{ background: color-mix(in oklab, var(--brand), transparent 92%); } .nav.is-open{ transform: translateY(0); opacity:1; pointer-events:auto; } } /* ===================== HERO (imagen/video) ===================== */ .hero{ position: relative; padding:72px 0 56px; min-height:460px; display:flex; align-items:center; background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.35)); } .hero__inner{ text-align:center; position: relative; z-index:2; } .hero h1{ margin:.2rem 0 .5rem; /* FIX clamp (antes estaba invertido) */ font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem); } /* Texto principal tipo "premium" */ .grad{ color:#ffffff; background:none; font-family:"Pacifico", cursive; font-weight:400; font-style:normal; } /* Variante opcional (del CSS 2) si un día quieres gradiente marca */ .grad--brand{ background: linear-gradient(90deg, var(--ink), var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero p{ color:#ffffff; margin:0 auto 18px; font-family:"Pacifico", cursive; font-weight:400; font-style:normal; /* FIX clamp (antes estaba invertido) */ font-size: clamp(1rem, .9rem + 1.2vw, 2rem); } .hero__actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } /* ===== VIDEO en hero ===== */ .hero-video{ position:absolute; inset:0; overflow:hidden; z-index:-2; display:none; } .hero-video video{ width:100%; height:100%; object-fit:cover; } .hero-overlay{ position:absolute; inset:0; background: linear-gradient(120deg, rgba(0,0,0,.55), rgba(0,0,0,.12)); z-index:-1; } .hero.hero--video{ background:none; } .hero.hero--video .hero-video{ display:block; } /* ===== Botón sonido hero ===== */ .sound-toggle{ position:absolute; right:1rem; bottom:1rem; z-index:3; padding:.4rem .9rem; border-radius:999px; border:1px solid color-mix(in oklab, var(--fg), transparent 80%); background: rgba(0,0,0,.55); color:#fff; font-size:.9rem; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; } .sound-toggle:hover{ background: rgba(0,0,0,.8); } /* ===================== Botones ===================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 16px; border-radius:12px; font-weight:600; text-decoration:none; cursor:pointer; transition: transform .06s, background .2s, border-color .2s; border:1px solid transparent; user-select:none; } .btn:active{ transform: translateY(1px); } .btn--primary{ background: var(--brand); color: var(--ink); } html[data-skin="red"] .btn--primary{ color:#fff; } .btn--primary:hover{ background: var(--brand-600); } .btn--ghost{ background: transparent; color: var(--fg); border: 1px solid color-mix(in oklab, var(--fg), transparent 82%); } .btn--ghost:hover{ background: color-mix(in oklab, var(--brand), transparent 92%); } .btn--outline{ background: transparent; color: var(--brand); border: 1px solid var(--brand); } .btn--outline:hover{ background: color-mix(in oklab, var(--brand), transparent 92%); } .btn--small{ height:34px; padding:0 12px; font-size:.85rem; } /* ===================== Redes Sociales flotantes ===================== */ .redesSociales{ position: fixed; top:50%; left:24px; transform: translateY(-50%); z-index:9999; } .redesSociales ul{ list-style:none; margin:0; padding:0; } .redesSociales li{ margin-bottom:14px; } .redesSociales a{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:999px; text-decoration:none; color: var(--social); background: linear-gradient(to top, #b6771f 0%, #f3c978 40%, #fff3cf 55%, #f0b655 100%); box-shadow: var(--shadow); border:1px solid transparent; transition: transform .15s, background .2s, color .2s, border-color .2s; } .redesSociales a:hover{ transform: translateY(-2px) scale(1.05); background: color-mix(in oklab, var(--bg), transparent 16%); color: var(--brand); } .redesSociales ion-icon{ font-size:22px; } /* Solo lectores de pantalla */ .sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip: rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } /* Colores por red */ .redesSociales a[aria-label="Facebook"]:is(:hover,:focus-visible){ color:#1877F2; } .redesSociales a[aria-label="Instagram"]:is(:hover,:focus-visible){ color:#E1306C; } .redesSociales a[aria-label="TikTok"]:is(:hover,:focus-visible){ color:#ffffff; } .redesSociales a[aria-label="X"]:is(:hover,:focus-visible), .redesSociales a[aria-label="Twitter"]:is(:hover,:focus-visible){ color:#1DA1F2; } .redesSociales a[aria-label="YouTube"]:is(:hover,:focus-visible){ color:#FF0000; } .redesSociales a[aria-label="WhatsApp"]:is(:hover,:focus-visible){ color:#25D366; } /* ===================== Buscador (iframe) ===================== */ .widget-wrap{ margin:22px auto 10px; padding:0; max-width:1100px; display:flex; justify-content:center; } .widget-frame{ display:block; width:100%; max-width:1100px; border:0; border-radius:14px; background:transparent; } .widget--compact .widget-frame{ height: var(--widget-h-compact); } .widget--normal .widget-frame{ height: var(--widget-h-normal); } .widget--tall .widget-frame{ height: var(--widget-h-tall); } @media (max-width:992px){ .widget--compact .widget-frame{ height: var(--widget-h-compact-sm); } .widget--normal .widget-frame{ height: var(--widget-h-normal-sm); } .widget--tall .widget-frame{ height: var(--widget-h-tall-sm); } } .section#buscador h2{ margin-bottom:10px; } /* ===================== Revista Digital ===================== */ .magazine-wrap{ margin:18px auto 0; max-width:1100px; display:grid; gap:12px; } .magazine-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background: var(--card); padding:10px; border-radius:14px; border:1px solid color-mix(in oklab, var(--fg), transparent 90%); box-shadow: var(--shadow); } .magazine-size{ display:flex; gap:8px; flex-wrap:wrap; } .pill{ border:1px solid color-mix(in oklab, var(--fg), transparent 82%); color: var(--fg); border-radius:999px; padding:.32rem .75rem; font-size:.85rem; background:transparent; cursor:pointer; transition: background .2s, color .2s, border-color .2s; } .pill:hover{ background: color-mix(in oklab, var(--fg), transparent 92%); } .pill.is-active{ border-color: var(--brand); color:#fff; background: var(--brand); } .device-frame{ position:relative; border-radius:16px; padding:6px; background: radial-gradient(1200px 600px at 0% 0%, color-mix(in oklab, var(--brand), transparent 86%), transparent 60% ), color-mix(in oklab, var(--bg), #000 6%); border:1px solid color-mix(in oklab, var(--fg), transparent 88%); box-shadow: var(--shadow); } .magazine-frame{ display:block; width:100%; border:0; border-radius:12px; background:#0000; } .magazine--compact .magazine-frame{ height: var(--mag-h-compact); } .magazine--normal .magazine-frame{ height: var(--mag-h-normal); } .magazine--tall .magazine-frame{ height: var(--mag-h-tall); } .magazine-note{ color: var(--muted); margin:0 2px; font-size:.95rem; } @media (max-width:992px){ .magazine--compact .magazine-frame{ height: var(--mag-h-compact-sm); } .magazine--normal .magazine-frame{ height: var(--mag-h-normal-sm); } .magazine--tall .magazine-frame{ height: var(--mag-h-tall-sm); } } /* ===================== Contacto ===================== */ .section--contact{ padding-bottom:84px; } .contact-cards{ margin:12px 0 22px; } .contact-cards--center{ display:flex !important; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:16px; max-width:920px; margin-left:auto; margin-right:auto; } .contact-cards--center .contact-card{ flex: 0 1 440px; max-width:440px; min-width:320px; height:100%; } @media (max-width:980px){ .contact-cards--center .contact-card{ flex-basis:100%; max-width:680px; } } .contact-card{ display:flex; gap:14px; background: var(--card); border-radius:14px; padding:14px; border:1px solid color-mix(in oklab, var(--fg), transparent 90%); box-shadow: var(--shadow); align-items:flex-start; } .contact-card__icon{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background: linear-gradient(135deg, color-mix(in oklab, var(--brand), #fff 22%), var(--brand)); color: var(--ink); } html[data-theme="dark"] .contact-card__icon{ background: color-mix(in oklab, var(--bg), #fff 6%); } .contact-card__icon ion-icon{ font-size:22px; } .contact-card__body{ flex:1; } .contact-card__body h3{ margin:0 0 6px; font-size:1.05rem; } .contact-card__body p{ margin:0 0 10px; color: var(--muted); } .contact-card__actions{ display:flex; gap:10px; flex-wrap:wrap; } .contact-card__actions .btn{ min-width:148px; } .contact__grid{ display:grid; gap:20px; grid-template-columns: 1.2fr 1fr; align-items:start; } @media (max-width:1000px){ .contact__grid{ grid-template-columns:1fr; } } .contact-info{ display:grid; gap:12px; } .info-block{ background: var(--card); border:1px solid color-mix(in oklab, var(--fg), transparent 90%); border-radius:14px; padding:14px; box-shadow: var(--shadow); } .info-block h4{ display:flex; align-items:center; gap:8px; margin:0 0 6px; } .info-block h4 ion-icon{ font-size:18px; color: var(--brand); } /* Form bonito con labels flotantes */ .form{ display:grid; gap:12px; background: var(--card); padding:16px; border-radius:16px; box-shadow: var(--shadow); border:1px solid color-mix(in oklab, var(--fg), transparent 90%); } .form--pretty .field{ position:relative; display:block; } .form--pretty .field input, .form--pretty .field textarea{ width:100%; padding:14px 42px 14px 14px; border-radius:12px; border:1px solid color-mix(in oklab, var(--fg), transparent 82%); background: color-mix(in oklab, var(--bg), #fff 6%); color: var(--fg); outline:none; transition: border-color .18s, box-shadow .18s, background .18s; } .form--pretty .field textarea{ min-height:120px; resize:vertical; } .form--pretty .field input:focus, .form--pretty .field textarea:focus{ border-color: var(--brand); box-shadow: 0 0 0 6px var(--ring); } .form--pretty .field input::placeholder, .form--pretty .field textarea::placeholder{ color:transparent; } .form--pretty .field label{ position:absolute; left:12px; top:11px; pointer-events:none; color: color-mix(in oklab, var(--fg), transparent 40%); transition: transform .18s, color .18s, top .18s, font-size .18s, background .18s, padding .18s; padding:0 6px; background:transparent; } .form--pretty .field input:focus + label, .form--pretty .field textarea:focus + label, .form--pretty .field input:not(:placeholder-shown) + label, .form--pretty .field textarea:not(:placeholder-shown) + label{ top:-8px; font-size:.78rem; background: var(--card); color: var(--brand); } .form--pretty .field .fi{ position:absolute; right:12px; top:50%; transform: translateY(-50%); font-size:18px; pointer-events:none; color: color-mix(in oklab, var(--fg), transparent 35%); } .form--pretty .field:has(input:focus) .fi, .form--pretty .field:has(textarea:focus) .fi{ color: var(--brand); transform: translateY(-50%) scale(1.05); } .form--pretty .field small.error{ display:block; min-height:16px; margin-top:6px; color: var(--error); font-size:.84rem; } .form__actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .policy{ margin:6px 2px 0; font-size:.9rem; } .field.field--hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; } .form--pretty .field--checkbox{ display:flex; align-items:flex-start; gap:8px; font-size:.9rem; } .form--pretty .field--checkbox input[type="checkbox"]{ width:16px; height:16px; margin-top:3px; } .form--pretty .field--checkbox label{ position:static; transform:none; padding:0; background:transparent; color: color-mix(in oklab, var(--fg), transparent 25%); } .form--pretty .field--checkbox input:focus + label{ color: var(--brand); } .form--pretty .field--checkbox small.error{ margin-top:2px; } /* ===================== Mega Conexión v2 (mt-mega) ===================== */ .mt-mega__grid{ display:grid; grid-template-columns: 240px 1fr; gap:18px; align-items:start; } @media (max-width:900px){ .mt-mega__grid{ grid-template-columns:1fr; } } .mt-mega__menu{ position: sticky; top: var(--nav-offset, 88px); display:grid; gap:8px; padding:12px; background: var(--card); border: 1px solid color-mix(in oklab, var(--fg), transparent 90%); border-radius:12px; box-shadow: var(--shadow); } .mt-mega__link{ appearance:none; display:block; width:100%; text-align:left; background: color-mix(in oklab, var(--bg), #fff 6%); border:1px solid color-mix(in oklab, var(--fg), transparent 88%); color: var(--fg); font: inherit; font-size:14px; padding:10px 12px; border-radius:10px; cursor:pointer; transition: background .2s, color .2s, transform .08s; } .mt-mega__link:hover{ background: color-mix(in oklab, var(--bg), #fff 10%); transform: translateY(-1px); } .mt-mega__link.is-active{ outline:2px solid var(--brand); color: var(--brand); background: color-mix(in oklab, var(--brand), transparent 92%); } .mt-mega__viewer{ background: var(--card); border:1px solid color-mix(in oklab, var(--fg), transparent 90%); border-radius:14px; padding:12px; box-shadow: var(--shadow); } .mt-mega__title{ margin: 4px 6px 10px; font-size:16px; color: var(--fg); } .mt-mega__frameWrap{ border-radius:10px; overflow:hidden; } .mt-mega__frame{ display:block; width:100%; min-height:72vh; border:0; background: var(--bg-2); } .mt-mega__fallback{ margin:10px 6px 0; color: var(--muted); font-size:14px; } /* ===================== VEO Slider (pulido) ===================== */ .veo-slider .container{ position:relative; } .veo-slider__viewport{ position: relative; background: var(--card); border: 1px solid color-mix(in oklab, var(--fg), transparent 90%); border-radius:16px; box-shadow: var(--shadow); overflow:hidden; user-select:none; } .veo-slider__track{ display:grid; grid-auto-flow: column; grid-auto-columns: 100%; will-change: transform; transform: translate3d(0,0,0); transition: transform .55s cubic-bezier(.22,.61,.36,1); } .veo-slide{ position:relative; aspect-ratio: 16 / 9; display:grid; overflow:hidden; background: color-mix(in oklab, var(--bg), #000 8%); place-items:center; } .veo-slide__img{ width:100%; height:100%; object-fit: contain; object-position:center center; display:block; filter: saturate(1.02) contrast(1.02); background: transparent; } .veo-slide__caption{ position:absolute; inset:auto 0 0 0; padding: clamp(14px, 2.4vw, 28px); color:#fff; background: linear-gradient(to top, rgba(0,0,0,.58), rgba(0,0,0,0) 55%); backdrop-filter: saturate(120%); } .veo-slide__title{ margin:0 0 4px; font-size: clamp(1.1rem, .9rem + 1vw, 1.7rem); line-height:1.15; letter-spacing:.2px; } .veo-slide__text{ margin:0 0 10px; color:#f2f2f2; font-size: clamp(.9rem, .85rem + .4vw, 1rem); } .veo-slide__cta{ height:38px; padding:0 14px; border-radius:10px; } /* Flechas (glass) */ .veo-slider__arrow{ position:absolute; top:50%; transform: translateY(-50%); z-index:2; width:44px; height:44px; border-radius:999px; border:1px solid color-mix(in oklab, #fff, transparent 65%); background: color-mix(in oklab, #000, transparent 35%); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter: blur(6px) saturate(120%); transition: background .2s ease, transform .08s ease, box-shadow .2s ease; box-shadow: 0 10px 20px rgba(0,0,0,.25); } .veo-slider__arrow:hover{ background: color-mix(in oklab, #000, transparent 15%); } .veo-slider__arrow:active{ transform: translateY(-50%) scale(.98); } .veo-slider__arrow--prev{ left:12px; } .veo-slider__arrow--next{ right:12px; } /* Dots */ .veo-slider__dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; gap:10px; justify-content:center; align-items:center; z-index:2; } .veo-slider__dots button{ width:8px; height:8px; border-radius:999px; border:0; background: color-mix(in oklab, #fff, transparent 55%); cursor:pointer; transition: transform .15s ease, background .2s ease, width .2s ease; } .veo-slider__dots button.is-active{ width:26px; background:#fff; } /* Barra de progreso */ .veo-slider__progress{ position:absolute; left:0; right:0; bottom:0; height:3px; background: color-mix(in oklab, #fff, transparent 85%); z-index:2; overflow:hidden; } .veo-slider__progress span{ display:block; width:0%; height:100%; background: linear-gradient(90deg, #fff, color-mix(in oklab, var(--brand), #fff 40%)); } .veo-slider__progress.is-playing span{ /* FIX: antes decía var(var(--veo-interval...)) */ animation: veo-progress var(--veo-interval, 5000ms) linear forwards; } @keyframes veo-progress{ from{ width:0%; } to{ width:100%; } } /* Vignette */ .veo-slider__vignette{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 100% at 50% 0%, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 55%), radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 40%); } /* Motion */ @media (prefers-reduced-motion: reduce){ .veo-slider__track{ transition:none !important; } .veo-slider__arrow{ transition:none !important; } .veo-slider__dots button{ transition:none !important; } .veo-slider__progress.is-playing span{ animation:none !important; width:100%; } } /* ===================== Footer ===================== */ .site-footer{ border-top:1px solid color-mix(in oklab, var(--fg), transparent 90%); padding:18px 0; background: color-mix(in oklab, var(--bg), #ffffff 4%); } .footer__inner{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; text-align:left; } .footer__brand{ max-width:420px; font-size:.9rem; } .footer__tagline{ margin:.2rem 0 0; color:var(--muted); font-size:.9rem; } .footer__links{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; font-size:.88rem; } .link-legal, .footer-link{ background:none; border:none; padding:0; margin:0; font:inherit; color: var(--brand); cursor:pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .link-legal:hover, .link-legal:focus-visible, .footer-link:hover, .footer-link:focus-visible{ opacity:.85; } @media (max-width:768px){ .footer__inner{ flex-direction:column; align-items:flex-start; text-align:left; } } /* ===================== Banner de cookies ===================== */ .cookie-banner{ position: fixed; z-index:50; left:0; right:0; bottom:0; padding:10px 0; background:transparent; pointer-events:none; opacity:0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; } .cookie-banner.is-active{ opacity:1; transform: translateY(0); pointer-events:auto; } .cookie-banner__inner{ width: min(960px, 94%); margin-inline:auto; border-radius:16px 16px 0 0; background: color-mix(in oklab, var(--bg), #000 8%); border:1px solid color-mix(in oklab, var(--fg), transparent 88%); box-shadow: 0 18px 44px rgba(0,0,0,.55); padding:12px 14px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .cookie-banner__inner p{ flex: 1 1 220px; margin:0; font-size:.88rem; } .cookie-banner__actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; } /* ===================== Modales legales ===================== */ .legal-modals{ position: fixed; inset:0; z-index:60; pointer-events:none; } .legal-modal{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity .25s ease; } .legal-modal.is-open{ opacity:1; pointer-events:auto; } .legal-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); } .legal-modal__dialog{ position:relative; z-index:1; width: min(960px, 92%); max-height:80vh; background: var(--card); border-radius:18px; box-shadow: 0 24px 60px rgba(0,0,0,.6); padding:16px 18px 14px; display:flex; flex-direction:column; } .legal-modal__header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; } .legal-modal__header h2{ margin:0; font-size:1.1rem; } .legal-modal__close{ border-radius:999px; border:1px solid color-mix(in oklab, var(--fg), transparent 80%); background:transparent; width:32px; height:32px; display:grid; place-items:center; cursor:pointer; } .legal-modal__close ion-icon{ font-size:18px; } .legal-modal__body{ overflow:auto; padding-right:4px; font-size:.9rem; } .legal-modal__body h3{ margin:12px 0 4px; font-size:.98rem; } .legal-modal__body p{ margin:0 0 8px; } .legal-modal__body ul{ margin:0 0 8px 1rem; padding:0; } .legal-modal__body li{ margin-bottom:4px; } @media (max-width:600px){ .legal-modal__dialog{ max-height:88vh; padding:12px 12px 10px; } } /* ===================== Reveal ===================== */ [data-animate="up"]{ opacity:0; translate: 0 10px; } .revealed{ opacity:1 !important; translate: 0 0 !important; transition: opacity .5s, translate .5s; } /* ===================== Redes móviles (barra inferior) ===================== */ @media (max-width:768px){ .redesSociales{ left:0; right:0; bottom:14px; top:auto; transform:none; display:flex; justify-content:center; z-index:20; } .redesSociales ul{ display:flex; gap:12px; background: rgba(0,0,0,.35); backdrop-filter: blur(4px); border-radius:999px; padding:8px 12px; } .redesSociales li{ margin-bottom:0; } .redesSociales a{ width:40px; height:40px; } } /* ===================== View Transitions (circular) ===================== */ ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.55s; animation-timing-function:ease-out; animation-fill-mode:forwards; } ::view-transition-old(root){ animation-name: vt-fade-out; } ::view-transition-new(root){ animation-name: vt-circle-reveal; clip-path: circle(0 at var(--vt-cx) var(--vt-cy)); } @keyframes vt-fade-out{ to{ opacity:0; } } @keyframes vt-circle-reveal{ from{ clip-path: circle(0 at var(--vt-cx) var(--vt-cy)); } to{ clip-path: circle(140vmax at var(--vt-cx) var(--vt-cy)); } } @media (prefers-reduced-motion: reduce){ ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; } }