/* Arkadia Navidad 2026 · "La magia de estar juntos" Tokens: build/tokens.json (plan §5). Todo bajo body.ark-navidad. */ /* ---------- Fuentes (autoalojadas, OFL) ---------- */ @font-face { font-family: "Ark Poppins"; src: url(../fonts/poppins-200.woff2) format("woff2"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Ark Poppins"; src: url(../fonts/poppins-300.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Ark Poppins"; src: url(../fonts/poppins-300i.woff2) format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Ark Poppins"; src: url(../fonts/poppins-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Ark Poppins"; src: url(../fonts/poppins-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Ark Poppins"; src: url(../fonts/poppins-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Ark Poppins"; src: url(../fonts/poppins-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Ark Poppins"; src: url(../fonts/poppins-800.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Ark Poppins"; src: url(../fonts/poppins-500i.woff2) format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Ark Poppins"; src: url(../fonts/poppins-700i.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Ark Script"; src: url(../fonts/pinyon-script.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Ark Script Alt"; src: url(../fonts/great-vibes.woff2) format("woff2"); font-weight: 400; font-display: swap; } /* ---------- Tokens ---------- */ :root { --ark-bg: #3A0510; --ark-bg-deep: #220209; --ark-burgundy: #842D2D; --ark-red: #872C2C; --ark-green: #3C574B; --ark-gold: #9F885F; --ark-gold-light: #D1AB64; --ark-gold-glow: #F2D28F; --ark-bronze: #936B47; --ark-white: #FFFFFF; --ark-gold-grad: linear-gradient(100deg, #F2D28F 0%, #D1AB64 45%, #9F885F 100%); --ark-font: "Ark Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --ark-script: "Ark Script", "Ark Script Alt", cursive; --ark-fs-h1: clamp(2.6rem, 6vw, 5.5rem); --ark-fs-h2: clamp(2rem, 4vw, 3.5rem); --ark-fs-h3: 1.5rem; --ark-fs-body: 1.0625rem; --ark-fs-label: .8125rem; --ark-s1: 4px; --ark-s2: 8px; --ark-s3: 16px; --ark-s4: 24px; --ark-s5: 40px; --ark-s6: 64px; --ark-s7: 96px; --ark-s8: 128px; --ark-radius: 16px; --ark-pill: 999px; --ark-max: 1240px; --ark-gutter: clamp(16px, 4vw, 40px); --ark-header-h: 72px; --ark-ease-in: cubic-bezier(.2, .7, .2, 1); --ark-ease: cubic-bezier(.4, 0, .2, 1); --ark-t-micro: 200ms; --ark-t-std: 500ms; } /* ---------- Base y aislamiento de Elementor/tema ---------- */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ark-header-h) + 8px); } body.ark-navidad { margin: 0; background: var(--ark-bg); color: var(--ark-white); font: 400 var(--ark-fs-body)/1.65 var(--ark-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } .ark-navidad *, .ark-navidad *::before, .ark-navidad *::after { box-sizing: border-box; } .ark-navidad img { max-width: 100%; height: auto; display: block; } .ark-navidad a { color: var(--ark-gold-light); } .ark-navidad .elementor-widget, .ark-navidad .elementor-widget-text-editor { font-family: var(--ark-font); color: inherit; } body.ark-navidad .elementor-widget .elementor-heading-title { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; margin: 0; } .ark-navidad .elementor-widget-text-editor p { margin: 0 0 .75em; } .ark-navidad .elementor-widget-text-editor p:last-child { margin-bottom: 0; } .ark-navidad :focus-visible { outline: 3px solid var(--ark-gold-light); outline-offset: 3px; border-radius: 6px; } .ark-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ark-skip { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 12px 20px; background: var(--ark-gold-light); color: var(--ark-bg) !important; border-radius: var(--ark-pill); font-weight: 600; text-decoration: none; transition: top var(--ark-t-micro); } .ark-skip:focus { top: 16px; } /* Marcador visible de dato pendiente (plan §12). */ .ark-pending { background: #FFE45C; color: #3A0510 !important; font-weight: 600; padding: 0 .3em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* ---------- Tipografía ---------- */ .ark-navidad .ark-h1 { font-size: var(--ark-fs-h1); font-weight: 800; line-height: .95; letter-spacing: -.01em; } .ark-navidad .ark-h2 { font-size: var(--ark-fs-h2); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; margin-bottom: var(--ark-s4); } /* El degradado va en cada palabra del H1: las palabras se animan con transform y background-clip:text del padre no alcanza a hijos transformados. */ body.ark-navidad .elementor-widget.ark-h2 .elementor-heading-title, body.ark-navidad .elementor-widget.ark-h1 .elementor-heading-title > span { background: var(--ark-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; } .ark-navidad .ark-h3 { font-size: var(--ark-fs-h3); font-weight: 700; line-height: 1.2; color: var(--ark-gold-light); margin-bottom: var(--ark-s2); } .ark-navidad .ark-eyebrow { font-size: var(--ark-fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ark-gold); margin-bottom: var(--ark-s3); } .ark-navidad .ark-lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); max-width: 60ch; } .ark-navidad .ark-small { font-size: .875rem; color: rgba(255, 255, 255, .78); } .ark-script { font-family: var(--ark-script); font-weight: 400; font-size: 1.15em; letter-spacing: 0; padding: 0 .06em; } /* Patrón del KV: palabra pequeña + palabra gigante. */ .ark-t-sm { display: inline-block; font-size: .42em; font-weight: 500; letter-spacing: .02em; vertical-align: .55em; } .ark-t-xl { display: inline-block; } .ark-navidad .ark-h2 .ark-t-sm { display: block; font-size: .5em; vertical-align: baseline; margin-bottom: .15em; } .ark-hero__title .ark-t-sm { display: block; font-size: .36em; margin: 0 0 .1em .08em; vertical-align: baseline; } .ark-hero__title .ark-t-xl { display: block; } /* ---------- Botones ---------- */ .ark-navidad :is(a.ark-btn, .ark-btn .elementor-button) { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 12px 26px; border-radius: var(--ark-pill); font: 600 1rem/1.2 var(--ark-font); letter-spacing: .01em; text-decoration: none; white-space: nowrap; border: 1.5px solid var(--ark-gold-light); color: var(--ark-gold-light); background: transparent; transition: transform var(--ark-t-micro) var(--ark-ease), box-shadow var(--ark-t-micro) var(--ark-ease), background-color var(--ark-t-micro); position: relative; overflow: hidden; cursor: pointer; } .ark-navidad :is(a.ark-btn--primary, .ark-btn--primary .elementor-button) { background: var(--ark-gold-grad); color: var(--ark-bg); border-color: transparent; box-shadow: 0 6px 24px -8px rgba(242, 210, 143, .55); } .ark-navidad :is(a.ark-btn, .ark-btn .elementor-button):hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(242, 210, 143, .6); } .ark-navidad :is(a.ark-btn--ghost, .ark-btn--ghost .elementor-button):hover { background: rgba(209, 171, 100, .12); } .ark-navidad :is(a.ark-btn--sm, .ark-btn--sm .elementor-button) { min-height: 44px; padding: 10px 18px; font-size: .9375rem; } .ark-navidad :is(a.ark-btn--lg, .ark-btn--lg .elementor-button) { min-height: 56px; padding: 16px 34px; font-size: 1.0625rem; } /* Brillo que cruza (A14). */ .ark-navidad .ark-btn--shine .elementor-button::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); animation: ark-shine 4.5s var(--ark-ease) 2s infinite; } @keyframes ark-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .ark-navidad .elementor-button-text { font: inherit; } /* ---------- Layout de secciones ---------- */ /* Elementor pone flex-wrap: wrap en móvil; en columnas eso colapsa bloques con aspect-ratio. */ .ark-navidad .e-con { flex-wrap: nowrap; } .ark-navidad .e-con.ark-btnrow { flex-wrap: wrap; } .ark-navidad .e-con.ark-section { position: relative; padding: clamp(64px, 10vw, 128px) 0; } .ark-navidad .e-con.ark-wrap { width: 100%; max-width: var(--ark-max); margin: 0 auto; padding: 0 var(--ark-gutter); display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .ark-navidad .e-con.ark-wrap > :is(.elementor-widget-html, .elementor-widget-accordion) { width: 100%; } .ark-navidad .e-con.ark-btnrow { display: flex; flex-flow: row wrap; gap: 12px 16px; margin-top: var(--ark-s5); width: auto; } .ark-navidad .ark-btnrow > .elementor-widget { width: auto; margin: 0; } .ark-navidad .ark-section:nth-of-type(even) { background: var(--ark-bg-deep); } .ark-navidad .ark-section + .ark-section::before { content: ""; position: absolute; top: 0; left: 50%; width: min(560px, 70%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(209, 171, 100, .45), transparent); } /* ---------- 9 · Visítanos / FAQ ---------- */ .ark-navidad .ark-visit .ark-facts--grid { margin-bottom: var(--ark-s6); } .ark-navidad .ark-faq { width: 100%; max-width: 860px; } .ark-navidad .ark-faq :is(.elementor-accordion-item, .elementor-toggle-item) { border: 0; border-bottom: 1px solid rgba(209, 171, 100, .3); } .ark-navidad .ark-faq .elementor-tab-title { padding: 20px 0; font: 600 1.0625rem/1.4 var(--ark-font); color: var(--ark-white); border: 0; } .ark-navidad .ark-faq .elementor-tab-title a { color: inherit; text-decoration: none; } .ark-navidad .ark-faq .elementor-tab-title.elementor-active, .ark-navidad .ark-faq .elementor-tab-title:hover { color: var(--ark-gold-glow); } .ark-navidad .ark-faq :is(.elementor-accordion-icon, .elementor-toggle-icon) { color: var(--ark-gold-light); } .ark-navidad .ark-faq .elementor-tab-content { padding: 0 0 20px; border: 0; color: rgba(255, 255, 255, .88); } /* ---------- Barra móvil (A16) ---------- */ .ark-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(34, 2, 9, .96) 60%, rgba(34, 2, 9, 0)); transform: translateY(110%); transition: transform var(--ark-t-std) var(--ark-ease-in); } .ark-mobilebar .ark-btn { width: 100%; } .ark-mobilebar.is-visible { transform: none; } @media (min-width: 768px) { .ark-mobilebar { display: none; } } /* ---------- Revelados (A5, A10) ---------- */ .ark-js .ark-anim .ark-reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ark-ease-in), transform 700ms var(--ark-ease-in); transition-delay: var(--ark-delay, 0ms); } .ark-js .ark-anim .ark-reveal.is-in { opacity: 1; transform: none; } /* ---------- Medios, progreso y polvo ---------- */ .ark-media { position: absolute; inset: 0; overflow: hidden; background: var(--ark-bg-deep); } .ark-media__still, .ark-media__still img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .ark-media__still img { transform-origin: var(--ark-origin, 50% 50%); will-change: transform; } .ark-media__seq { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; } .ark-media.has-seq .ark-media__seq { opacity: 1; } .ark-media.has-seq .ark-media__still { visibility: hidden; } .ark-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; } /* ===================================================================== v1.13 · Landing realista. Solo el hero avanza con el scroll (video cinematográfico); su titular, datos y botones están siempre visibles. ===================================================================== */ /* ---------- Fondos fotográficos de sección ---------- */ .ark-navidad .ark-bgw { position: absolute !important; inset: 0; z-index: -1; margin: 0; width: auto !important; max-width: none !important; } .ark-navidad .ark-bgw > * { height: 100%; } .ark-navidad .ark-bgw img { width: 100%; height: 100%; max-width: none; object-fit: cover; } .ark-navidad .e-con.ark-section > .e-con.ark-wrap { position: relative; } /* ---------- Estela sutil del cursor (A19) ---------- */ .ark-cursor-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 150; mix-blend-mode: screen; } /* ---------- Barra de navegación: fija arriba, a todo el ancho (como el sitio de Arkadia) ---------- */ .ark-header { position: fixed; inset: 0 0 auto; z-index: 100; padding: 0; transition: background-color 500ms var(--ark-ease), box-shadow 500ms var(--ark-ease); } .ark-header__hours { display: flex; align-items: center; gap: 6px; width: max-content; margin: 10px max(var(--ark-gutter), calc((100vw - 1440px) / 2 + var(--ark-gutter))) 0 auto; padding: 5px 12px; border-radius: 2px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: .75rem; color: rgba(255, 255, 255, .88); transition: opacity 300ms var(--ark-ease), margin 400ms var(--ark-ease), max-height 400ms var(--ark-ease); max-height: 40px; overflow: hidden; } .ark-header__hours b { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .ark-header__clock { width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; position: relative; flex: none; } .ark-header__clock::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 3px; height: 4px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; } .ark-header__bar { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); max-width: 1440px; margin: 0 auto; height: 72px; padding: 0 var(--ark-gutter); transition: height 400ms var(--ark-ease); } /* Con scroll: vidrio de borde a borde, una sola fila. */ .ark-header.is-scrolled { background: rgba(26, 2, 8, .62); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 1px 0 rgba(242, 210, 143, .18), 0 14px 40px -24px rgba(0, 0, 0, .8); } .ark-header.is-scrolled .ark-header__hours { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } .ark-header.is-scrolled .ark-header__bar { height: 64px; } .ark-header__logo { display: block; width: 168px; flex: none; color: var(--ark-gold-light); } .ark-header__logo svg { display: block; width: 100%; height: auto; } .ark-nav { margin-left: auto; } .ark-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 1.8vw, 28px); } .ark-nav a { position: relative; display: block; padding: 8px 0; color: var(--ark-white) !important; text-decoration: none; font-size: .9375rem; font-weight: 400; transition: color var(--ark-t-micro); } .ark-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--ark-gold-light); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ark-ease); } .ark-nav a:hover, .ark-nav a.is-current { color: var(--ark-gold-glow) !important; } .ark-nav a:hover::after, .ark-nav a.is-current::after { transform: scaleX(1); } .ark-navidad a.ark-header__cta { flex: none; min-height: 44px; padding: 10px 20px; font-size: .875rem; } .ark-burger { display: none; } .ark-menu { position: fixed; inset: 0; z-index: -1; display: grid; place-items: center; background: rgba(18, 1, 5, .96); opacity: 0; visibility: hidden; transition: opacity 500ms var(--ark-ease), visibility 0s linear 500ms; } .ark-menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; } .ark-menu ul { list-style: none; margin: 0; padding: 0; text-align: center; display: grid; gap: 6px; } .ark-menu a { display: block; padding: 10px 20px; font-size: clamp(1.5rem, 6vw, 2.25rem); font-weight: 300; color: var(--ark-white); text-decoration: none; letter-spacing: .02em; } .ark-menu a:hover { color: var(--ark-gold-glow); } @media (max-width: 1100px) { .ark-nav { display: none; } .ark-navidad a.ark-header__cta { margin-left: auto; } .ark-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .1); cursor: pointer; } .ark-burger::before, .ark-burger::after { content: ""; display: block; height: 1.5px; background: var(--ark-white); transition: transform var(--ark-t-micro); } .ark-burger span:first-child { display: none; } .ark-burger[aria-expanded="true"]::before { transform: translateY(3.75px) rotate(45deg); } .ark-burger[aria-expanded="true"]::after { transform: translateY(-3.75px) rotate(-45deg); } } @media (max-width: 600px) { .ark-navidad .ark-header a.ark-header__cta { display: none; } .ark-burger { margin-left: auto; } .ark-header__logo { width: 132px; } .ark-header__bar, .ark-header.is-scrolled .ark-header__bar { height: 58px; } .ark-header__hours { font-size: .6875rem; } } /* ---------- Desde el día siguiente al encendido ---------- La clase la pone el (con la fecha del visitante) o el servidor: desaparece todo lo del encendido y aparece lo que lo reemplaza (franja del Mundo Secreto en el hero). */ .ark-tras-encendido .ark-hasta-enc { display: none !important; } html:not(.ark-tras-encendido) body:not(.ark-tras-encendido) .ark-desde-enc { display: none !important; } /* ---------- Etiquetas: Poppins + trazo ---------- Arkadia pidió la tipografía de la campaña (Poppins, la de "La magia de estar juntos") en lugar de la cursiva, como los rótulos de sus piezas: mayúsculas espaciadas en dorado. La cursiva queda solo en la firma de Santa. */ .ark-navidad .ark-kicker, .ark-label { font-family: var(--ark-font); font-size: .8125rem; font-weight: 600; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--ark-gold-glow); } .ark-label { display: flex; align-items: center; gap: 14px; margin: 0; } .ark-label::before { content: ""; flex: none; width: 56px; height: 1px; background: linear-gradient(90deg, rgba(242, 210, 143, 0), var(--ark-gold-light)); } /* ---------- Intro: "Santa llega a Arkadia" controlada por scroll ---------- El video avanza con la rueda, el dedo o las flechas (también hacia atrás); no avanza solo. Al terminar se funde con el hero. */ .ark-intro { display: none; } .ark-intro-on .ark-intro { display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: #0a1222; cursor: ns-resize; transition: opacity 900ms var(--ark-ease); } .ark-intro-on body { overflow: hidden; } .ark-intro.is-out { opacity: 0; pointer-events: none; } .ark-navidad .ark-intro__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .ark-intro__ui { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--ark-gutter) max(28px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; color: var(--ark-white); } .ark-intro__hint { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); transition: opacity 500ms var(--ark-ease); } .ark-intro__mouse { width: 20px; height: 32px; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 12px; position: relative; } .ark-intro__mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px; border-radius: 2px; background: var(--ark-gold-glow); animation: ark-hint 1.8s var(--ark-ease) infinite; } @keyframes ark-hint { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } } .ark-intro__bar { position: absolute; left: var(--ark-gutter); right: var(--ark-gutter); bottom: 0; height: 2px; background: rgba(255, 255, 255, .15); } .ark-intro__bar span { display: block; height: 100%; background: var(--ark-gold-glow); transform-origin: 0 50%; transform: scaleX(0); } .ark-intro__skip { grid-column: 3; justify-self: end; height: 36px; padding: 0 16px; border: 0; border-radius: 6px; background: rgba(10, 8, 20, .35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ark-white); font: 500 .8125rem var(--ark-font); letter-spacing: .03em; cursor: pointer; } .ark-intro__skip:hover { background: rgba(242, 210, 143, .3); } @media (max-width: 767px) { .ark-intro__ui { grid-template-columns: 1fr auto; } .ark-intro__hint { grid-column: 1; align-items: flex-start; } .ark-intro__skip { grid-column: 2; } } /* ---------- Capítulo "La magia": fondo fijo (KV → bokeh) ---------- */ .ark-navidad .e-con.ark-chap { position: relative; padding: 0; background: var(--ark-bg-deep); } .ark-navidad .ark-chap__bgw { position: sticky !important; top: 0; z-index: 0; width: 100% !important; max-width: none !important; height: 100vh; height: 100svh; margin: 0 0 -100vh !important; margin-bottom: -100svh !important; } .ark-chap__bg { position: absolute; inset: 0; overflow: hidden; } .ark-chap__sharp, .ark-chap__lente, .ark-navidad .ark-chap__sharp img, .ark-navidad .ark-chap__lente img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .ark-chap__sharp { will-change: transform; } /* KV fuera de foco (mismo encuadre que el nítido). */ .ark-chap__lente { opacity: 0; will-change: opacity; } /* Escenario de Encendamos: empieza a la altura del hero (detrás de él) y la sección queda fija mientras aparece desde atrás; al terminar el escenario sigue el scroll normal. */ .ark-navidad .e-con.ark-chap__stage { padding: 0; } html.ark-chap-on .ark-navidad .e-con.ark-chap__stage { position: relative; z-index: 0; margin-top: -100vh; margin-top: -100svh; height: 250vh; height: 250svh; } html.ark-chap-on .ark-navidad .ark-chap__stage > .e-con.ark-enc { position: sticky; top: 0; } html.ark-chap-on .ark-navidad .ark-enc__photow { transform-origin: 0% 50%; will-change: transform, opacity; } /* crece desde el borde: nunca se ve su borde izquierdo */ @media (max-width: 900px) { html.ark-chap-on .ark-navidad .ark-enc__photow { transform-origin: 50% 15%; } } html.ark-chap-on .ark-navidad .e-con.ark-enc__body { transform-origin: 50% 50%; will-change: transform, opacity, filter; } .ark-chap__ancla { position: absolute; left: 0; top: calc(145vh + 72px); width: 1px; height: 100vh; pointer-events: none; } /* La foto fuera de foco va encima de todo y se desvanece: la foto "se enfoca". */ .ark-navidad .ark-enc__lente { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; opacity: 0; } /* La foto de Encendamos entra con el borde de arriba más largo y suave (sube desde el fondo oscuro). */ @media (min-width: 901px) { .ark-bleed.ark-enc__photo { -webkit-mask-image: linear-gradient(90deg, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 28%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 28%, #000 86%, transparent 100%); } } @media (max-width: 900px) { /* Bordes laterales suaves: mientras la foto crece desde atrás, sus lados no se ven como un recuadro. */ html.ark-chap-on .ark-bleed.ark-enc__photo { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 55%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 55%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } } /* Con la transición activa, Encendamos la Navidad no tiene fondo propio: usa el del capítulo (ya fundido a su color). */ html.ark-chap-on .ark-navidad .e-con.ark-enc { background: transparent; } /* Video del hero (KV animado): aparece sobre la imagen cuando ya puede reproducirse. */ .ark-navidad .ark-chap__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms var(--ark-ease); will-change: transform; } .ark-chap__bg.has-video .ark-chap__sharp { visibility: hidden; transition: visibility 0s 900ms; } .ark-navidad .ark-chap__video.is-ready { opacity: 1; } @media (min-width: 768px) { .ark-navidad .ark-chap__video { object-position: 38% 45%; right: 30% !important; width: 70% !important; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, #000 70%, transparent 100%); } } .ark-chap__veil { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(18, 1, 5, .82) 0%, rgba(18, 1, 5, .45) 30%, rgba(18, 1, 5, 0) 56%), linear-gradient(0deg, rgba(18, 1, 5, .85) 0%, rgba(18, 1, 5, 0) 32%), linear-gradient(180deg, rgba(18, 1, 5, .55) 0%, rgba(18, 1, 5, 0) 16%); } /* Fundido a oscuro: termina en el mismo color de fondo de las secciones (sin corte con la siguiente). */ .ark-chap__veil::after { content: ""; position: absolute; inset: 0; background: var(--ark-bg-deep); opacity: var(--ark-dim, 0); } .ark-bokeh { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; } /* Hero */ .ark-navidad .e-con.ark-hero { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--ark-header-h) + 24px) 0 clamp(48px, 8vh, 96px); } .ark-navidad .e-con.ark-hero__content { position: relative; width: 100%; max-width: var(--ark-max); margin: 0 auto; padding: 0 var(--ark-gutter); display: flex; flex-direction: column; align-items: flex-end; } .ark-navidad .ark-hero__content > * { width: min(560px, 100%); } .ark-navidad .ark-hero__content .ark-kicker { padding: 0 0 clamp(14px, 2.2vh, 24px) .12em; } .ark-navidad .ark-hero__title { font-size: clamp(3.6rem, 8vw, 8.25rem); line-height: .9; margin: 0; filter: drop-shadow(0 6px 34px rgba(18, 1, 5, .7)); } .ark-navidad .ark-hero__title .ark-t-sm { display: block; font-size: .3em; font-weight: 400; margin: 0 0 .12em .06em; } .ark-navidad .ark-hero__title .ark-t-xl { display: block; } .ark-navidad .ark-hero__sub { margin-top: var(--ark-s4); font-size: clamp(1rem, 1.3vw, 1.125rem); font-weight: 300; color: rgba(255, 255, 255, .9); max-width: 44ch; } .ark-hero__chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; width: auto !important; margin: var(--ark-s4) 0 0; padding: 10px 16px; border-radius: 6px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: .8125rem; font-weight: 400; } .ark-hero__chip b { color: var(--ark-gold-glow); font-weight: 600; } .ark-hero__chip i { font-style: normal; color: var(--ark-gold); } .ark-navidad .ark-hero .ark-btnrow { margin-top: var(--ark-s5); } .ark-navidad .ark-hero__scrollw { position: absolute !important; left: var(--ark-gutter); bottom: clamp(48px, 8vh, 96px); margin: 0; width: auto !important; } .ark-hero__scroll { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); } .ark-hero__scroll::before { content: ""; width: 1px; height: 44px; background: linear-gradient(var(--ark-gold-light), transparent); animation: ark-drop 2.2s var(--ark-ease) infinite; transform-origin: top; } @keyframes ark-drop { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* Manifiesto (como "The Last Continent" + texto que se ilumina) */ .ark-navidad .e-con.ark-manifiesto { position: relative; z-index: 1; min-height: 120vh; display: flex; flex-direction: column; justify-content: center; padding: 18vh 0; } .ark-navidad .e-con.ark-manifiesto__inner { width: 100%; max-width: var(--ark-max); margin: 0 auto; padding: 0 var(--ark-gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } .ark-navidad .ark-manifiesto__inner > .elementor-widget-html { grid-column: 4 / span 6; margin-bottom: 28px; } .ark-navidad .ark-statement { grid-column: 4 / span 8; font-size: clamp(1.75rem, 3.3vw, 3.35rem); font-weight: 300; line-height: 1.16; letter-spacing: .005em; text-transform: uppercase; color: var(--ark-white); text-wrap: balance; } .ark-w { opacity: var(--o, .38); transition: opacity 200ms linear; } .ark-navidad .e-con.ark-cols { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(56px, 9vh, 104px); } .ark-navidad .e-con.ark-col { border-top: 1px solid rgba(242, 210, 143, .35); padding-top: 18px; } .ark-navidad .ark-col__title { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ark-gold-glow); margin-bottom: 10px; } .ark-navidad .ark-col__text { font-size: .9375rem; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, .82); } @media (max-width: 900px) { .ark-navidad .ark-manifiesto__inner > *, .ark-navidad .ark-statement, .ark-navidad .e-con.ark-cols { grid-column: 1 / -1 !important; } .ark-navidad .e-con.ark-cols { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 767px) { .ark-chap__veil { background: linear-gradient(0deg, rgba(18, 1, 5, .96) 0%, rgba(18, 1, 5, .78) 38%, rgba(18, 1, 5, 0) 66%), linear-gradient(180deg, rgba(18, 1, 5, .55) 0%, rgba(18, 1, 5, 0) 18%); } .ark-navidad .e-con.ark-hero__content { align-items: flex-start; } .ark-navidad .ark-hero .ark-btnrow > .elementor-widget, .ark-navidad .ark-hero .ark-btnrow .elementor-button { width: 100%; } .ark-navidad .ark-hero__scrollw { display: none; } } /* ---------- Botones al estilo del sitio de Arkadia (rectángulo sólido + texto con flecha) ---------- */ .ark-navidad :is(a.ark-btn, .ark-btn .elementor-button) { border-radius: 2px; min-height: 52px; padding: 14px 28px; } .ark-navidad :is(a.ark-btn--primary, .ark-btn--primary .elementor-button) { background: var(--ark-gold-light); box-shadow: none; } .ark-navidad :is(a.ark-btn--primary, .ark-btn--primary .elementor-button):hover { background: var(--ark-gold-glow); transform: none; box-shadow: none; } .ark-navidad :is(a.ark-btn--ghost, .ark-btn--ghost .elementor-button) { background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 10px 6px 10px 2px; min-height: 52px; color: var(--ark-white); } .ark-navidad .ark-btn--ghost .elementor-button-content-wrapper::after, .ark-navidad a.ark-btn--ghost::after { content: "→"; margin-left: 14px; transition: transform var(--ark-t-std) var(--ark-ease); } .ark-navidad :is(a.ark-btn--ghost, .ark-btn--ghost .elementor-button):hover { background: transparent; transform: none; box-shadow: none; color: var(--ark-gold-glow); } .ark-navidad .ark-btn--ghost .elementor-button:hover .elementor-button-content-wrapper::after { transform: translateX(6px); } .ark-burger, .ark-intro__skip { border-radius: 2px; } /* ---------- 3 · Encendamos la Navidad: imagen a media pantalla difuminada ---------- */ .ark-navidad .e-con.ark-enc { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; padding: 0; display: flex; flex-direction: column; justify-content: center; background: var(--ark-bg-deep); } .ark-enc__bg { position: relative; } .ark-navidad .ark-enc__bg img { opacity: .6; } .ark-enc__bg::before { content: ""; position: absolute; inset: 0 0 auto; height: 40%; z-index: 1; background: linear-gradient(180deg, var(--ark-bg-deep), rgba(34, 2, 9, 0)); } .ark-navidad .ark-manifiesto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28vh; z-index: -1; background: linear-gradient(180deg, rgba(34, 2, 9, 0), var(--ark-bg-deep)); pointer-events: none; } .ark-navidad .e-con.ark-enc__inner { position: relative; z-index: 1; width: 100%; max-width: var(--ark-max); margin: 0 auto; padding: calc(var(--ark-header-h) + 40px) var(--ark-gutter) 64px; display: flex; flex-direction: column; align-items: flex-end; } .ark-navidad .e-con.ark-enc__body { width: min(560px, 46%); display: flex; flex-direction: column; align-items: stretch; } .ark-navidad .e-con.ark-enc__body > .elementor-widget { width: 100%; } .ark-navidad .e-con.ark-enc__body > .ark-btnrow { width: auto; } .ark-navidad .ark-enc__body > .elementor-widget-html:first-child { padding-bottom: 18px; } .ark-navidad .ark-enc__title { padding-bottom: 22px; } .ark-navidad .ark-enc__text { font-weight: 300; font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, .86); padding-bottom: 32px; } .ark-rows { margin: 0 0 44px; width: 100%; } .ark-rows div { display: grid; grid-template-columns: 120px 1fr; padding: 14px 0; border-top: 1px solid rgba(242, 210, 143, .28); } .ark-rows div:last-child { border-bottom: 1px solid rgba(242, 210, 143, .28); } .ark-rows dt { font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ark-gold); align-self: center; } .ark-rows dd { margin: 0; font-size: 1.0625rem; font-weight: 400; color: var(--ark-white); } /* Cuenta regresiva: una línea tipográfica, sin cajas. */ .ark-count { display: flex; align-items: stretch; width: 100%; margin-bottom: 40px; } .ark-count div { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 0 0 0 clamp(12px, 1.6vw, 22px); border-left: 1px solid rgba(242, 210, 143, .35); min-width: 0; } .ark-count div:first-child { padding-left: 0; border-left: 0; } .ark-count b { font-size: clamp(2.6rem, 4.6vw, 4.5rem); font-weight: 200; line-height: 1; letter-spacing: -.02em; color: var(--ark-white); font-variant-numeric: tabular-nums; } .ark-count span { font-size: .5625rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ark-gold); } @media (max-width: 900px) { .ark-count div { padding-left: 12px; } .ark-navidad .e-con.ark-enc__body { width: 100%; } .ark-navidad .e-con.ark-enc__inner { padding-top: 52vh; } } /* ---------- 4 · Experiencias: franjas que se expanden (referencia "Our Trips") ---------- */ .ark-navidad .e-con.ark-exps { position: relative; isolation: isolate; overflow: hidden; padding: clamp(96px, 15vh, 170px) 0; background: var(--ark-bg-deep); } .ark-exps__bg { position: relative; } .ark-exps__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; } .ark-exps__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ark-bg-deep) 0%, rgba(34, 2, 9, .35) 30%, rgba(34, 2, 9, .35) 70%, var(--ark-bg-deep) 100%); } .ark-navidad .e-con.ark-exps__inner { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--ark-gutter); display: flex; flex-direction: column; align-items: center; } .ark-label--center { justify-content: center; } .ark-label--center::after { content: ""; width: 56px; height: 1px; background: linear-gradient(90deg, var(--ark-gold-light), rgba(242, 210, 143, 0)); } .ark-navidad .ark-exps__labelw { padding-bottom: 20px; } .ark-navidad .ark-exps__title { text-align: center; padding-bottom: 36px; } .ark-navidad .ark-exps__tabsw { padding-bottom: clamp(40px, 6vh, 64px); } .ark-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; } .ark-tabs__b { position: relative; padding: 8px 2px; border: 0; background: none; color: rgba(255, 255, 255, .6); font: 500 .8125rem var(--ark-font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color var(--ark-t-micro); } .ark-tabs__b::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ark-gold-light); transform: scaleX(0); transform-origin: left; transition: transform var(--ark-t-std) var(--ark-ease); } .ark-tabs__b:hover, .ark-tabs__b[aria-pressed="true"] { color: var(--ark-white); } .ark-tabs__b[aria-pressed="true"]::after { transform: scaleX(1); } .ark-navidad .e-con.ark-acc { display: flex; flex-direction: row; gap: 6px; width: 100%; height: clamp(460px, 64vh, 660px); } .ark-navidad .e-con.ark-acc__item { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 2px; cursor: pointer; isolation: isolate; transition: flex-grow 900ms cubic-bezier(.7, 0, .2, 1), opacity 500ms var(--ark-ease); outline-offset: 4px; } .ark-navidad .e-con.ark-acc__item.is-active { flex-grow: 7.5; cursor: default; } .ark-navidad .e-con.ark-acc__item.is-dimmed { opacity: .28; } .ark-navidad .ark-acc__mediaw { position: absolute !important; inset: 0; margin: 0; width: auto !important; z-index: -1; } .ark-acc__media { position: absolute; inset: 0; } .ark-navidad .ark-acc__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.18); filter: blur(5px) saturate(.9) brightness(.62); transition: transform 1200ms cubic-bezier(.7, 0, .2, 1), filter 900ms var(--ark-ease); } .ark-acc__item.is-active .ark-acc__media img { transform: scale(1); filter: none; } .ark-acc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18, 1, 5, .88) 0%, rgba(18, 1, 5, .25) 45%, rgba(18, 1, 5, 0) 70%); opacity: 0; transition: opacity 700ms var(--ark-ease); } .ark-acc__item.is-active .ark-acc__media::after { opacity: 1; } .ark-acc__v { position: absolute; left: 50%; bottom: 28px; margin: 0; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; display: flex; gap: 14px; align-items: center; white-space: nowrap; font-size: .8125rem; font-weight: 500; letter-spacing: .06em; color: var(--ark-white); transition: opacity 400ms var(--ark-ease); } .ark-acc__v span { font-size: .625rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ark-gold-glow); } .ark-acc__item.is-active .ark-acc__v { opacity: 0; } .ark-navidad .e-con.ark-acc__body { position: absolute; left: 0; bottom: 0; width: min(560px, 100%); padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; align-items: flex-start; opacity: 0; transform: translateY(18px); transition: opacity 500ms var(--ark-ease), transform 700ms var(--ark-ease); pointer-events: none; } .ark-acc__item.is-active .ark-acc__body { opacity: 1; transform: none; transition-delay: 380ms; pointer-events: auto; } .ark-acc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 14px; font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ark-gold-glow); } .ark-acc__meta span:first-child { color: rgba(255, 255, 255, .6); font-weight: 400; } .ark-acc__tag { padding: 3px 10px; background: var(--ark-gold-light); color: var(--ark-bg); } .ark-navidad .ark-acc__title { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 300; line-height: 1.08; text-transform: uppercase; color: var(--ark-white); padding-bottom: 12px; } .ark-navidad .ark-acc__text { font-size: 1rem; font-weight: 300; color: rgba(255, 255, 255, .88); max-width: 40ch; } .ark-navidad .ark-acc__body .elementor-widget-button { padding-top: 10px; } @media (max-width: 900px) { /* Celular y tableta vertical: tarjetas deslizables, todas abiertas. */ .ark-navidad .e-con.ark-acc { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--ark-gutter)); padding: 0 var(--ark-gutter) 8px; width: calc(100% + 2 * var(--ark-gutter)); scrollbar-width: none; } .ark-navidad .e-con.ark-acc__item, .ark-navidad .e-con.ark-acc__item.is-active { flex: 0 0 min(84vw, 420px); height: min(118vw, 560px); scroll-snap-align: center; } .ark-navidad .ark-acc__media img { transform: none; filter: none; } .ark-acc__media::after { opacity: 1; } .ark-acc__v { display: none; } .ark-navidad .e-con.ark-acc__body { opacity: 1; transform: none; pointer-events: auto; } } /* ---------- Lamas con la textura del regalo (entrada de Experiencias) ---------- */ .ark-lvl__slat { position: absolute; top: 0; bottom: 0; left: calc(var(--k) * 100% / 6); width: calc(100% / 6 + 1px); overflow: hidden; will-change: transform; } .ark-navidad .ark-lvl__slat img { position: absolute; top: 0; left: calc(var(--k) * -100%); width: 600%; height: 100%; max-width: none; object-fit: cover; } /* ---------- 6 · Carta de Santa (en la estampilla de la Oficina Postal) ---------- */ .ark-navidad .e-con.ark-carta { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 14vh 0 18vh; background: #1a0207; } .ark-carta__bg img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 900px) { .ark-navidad .e-con.ark-carta { min-height: 56.25vw; padding: 8vw 0 11vw; } } .ark-navidad .e-con.ark-carta__inner { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 calc(var(--ark-gutter) + 16px); display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ark-bg); } .ark-carta__from { margin: 0 0 22px; font-size: .6875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ark-bronze); } .ark-navidad .ark-carta__quote { font-size: clamp(1.35rem, 2.4vw, 2.25rem); font-weight: 300; font-style: italic; line-height: 1.38; color: var(--ark-bg); text-wrap: balance; } .ark-carta__firma { margin: 18px 0 0; font-family: var(--ark-script); font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1; color: var(--ark-burgundy); } .ark-carta__logo { margin: clamp(20px, 3vw, 36px) 0 0; width: min(190px, 44vw); color: var(--ark-gold); } .ark-carta__logo svg { display: block; width: 100%; height: auto; } /* ---------- 7 · Del Polo Norte a Arkadia (referencia: mapa de ruta de White Desert) ---------- */ .ark-navidad .e-con.ark-ruta { position: relative; padding: 0; background: #120105; } html.ark-ruta-pin .ark-navidad .e-con.ark-ruta { height: 280vh; } .ark-navidad .e-con.ark-ruta__stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: calc(var(--ark-header-h) + 40px) 0 40px; } html.ark-ruta-pin .ark-navidad .e-con.ark-ruta__stage { position: sticky; top: 0; height: 100vh; height: 100svh; } .ark-navidad .ark-ruta__globew { position: absolute !important; inset: 0; margin: 0; width: auto !important; max-width: none !important; z-index: 0; } .ark-ruta__globe { position: absolute; left: 50%; top: 50%; width: min(96vw, 112vh); aspect-ratio: 1; transform: translate(-50%, -50%); } html.ark-ruta-pin .ark-ruta__globe { top: 0; width: var(--gd, 185vh); transform: translate(-50%, var(--gy, 0px)); will-change: transform; } .ark-navidad .ark-ruta__globe img { width: 100%; height: 100%; max-width: none; display: block; } .ark-ruta__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ark-ruta__track { fill: none; stroke: rgba(242, 210, 143, .22); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; } .ark-ruta__line { fill: none; stroke: var(--ark-gold-glow); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(242, 210, 143, .8)); } .ark-ruta__pin { fill: var(--ark-white); opacity: .85; } .ark-ruta__pin--end { fill: var(--ark-gold-glow); } .ark-ruta__dot { fill: #FFF6DD; filter: drop-shadow(0 0 14px rgba(242, 210, 143, 1)); opacity: 0; } html.ark-ruta-pin .ark-ruta__dot { opacity: 1; } .ark-ruta__tag { position: absolute; left: var(--x); top: var(--y); margin: 0; transform: translate(26px, -50%); display: flex; flex-direction: column; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ark-white); white-space: nowrap; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); } .ark-ruta__tag i { font-style: normal; font-size: .8333em; font-weight: 500; color: var(--ark-gold-glow); } .ark-navidad .e-con.ark-ruta__head { position: relative; z-index: 2; width: 100%; max-width: var(--ark-max); margin: 0 auto; padding: 0 var(--ark-gutter); } .ark-navidad .ark-ruta__head > * { max-width: 480px; } .ark-navidad .ark-ruta__head .elementor-widget-html { padding-bottom: 14px; } .ark-navidad .ark-ruta__title { padding-bottom: 14px; } .ark-navidad .ark-ruta__text { font-weight: 300; color: rgba(255, 255, 255, .82); } .ark-navidad .ark-ruta__statsw { position: absolute !important; left: max(var(--ark-gutter), calc((100vw - var(--ark-max)) / 2 + var(--ark-gutter))); bottom: 40px; z-index: 2; margin: 0; width: auto !important; } .ark-ruta__stats { margin: 0; width: 340px; padding: 6px 22px; background: rgba(18, 1, 5, .58); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); border: 1px solid rgba(242, 210, 143, .2); } .ark-ruta__stats div { padding: 14px 0; border-bottom: 1px solid rgba(242, 210, 143, .18); } .ark-ruta__stats div:last-child { border-bottom: 0; } .ark-ruta__stats dt { font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ark-gold-glow); } .ark-ruta__stats dd { margin: 4px 0 0; font-size: 1.3rem; white-space: nowrap; font-weight: 300; color: var(--ark-white); } .ark-ruta__credit { position: absolute; right: calc(100% - 340px); bottom: -24px; margin: 0; font-size: .625rem; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 6px rgba(0, 0, 0, .9); white-space: nowrap; } .ark-navidad .ark-ruta__mistw { z-index: 3; pointer-events: none; } /* Velo oscuro arriba: el título siempre se lee sobre el globo. */ .ark-navidad .e-con.ark-ruta__stage::before { content: ""; position: absolute; inset: 0 0 auto; height: min(52vh, 460px); z-index: 1; pointer-events: none; background: linear-gradient(180deg, #120105 0%, rgba(18, 1, 5, .92) 38%, rgba(18, 1, 5, .55) 70%, rgba(18, 1, 5, 0) 100%); } .ark-ruta__mist { position: absolute; inset: 0; background: radial-gradient(130% 75% at 50% 115%, rgba(242, 210, 143, .42) 0%, rgba(132, 45, 45, .35) 38%, rgba(34, 2, 9, 0) 72%), linear-gradient(0deg, rgba(34, 2, 9, .9), rgba(34, 2, 9, 0) 55%); opacity: 0; } @media (max-width: 767px) { .ark-navidad .e-con.ark-ruta__stage { padding-bottom: 32px; } .ark-navidad .ark-ruta__globew { position: relative !important; inset: auto; order: 2; margin: 24px calc(-1 * var(--ark-gutter)) 0; } .ark-ruta__globe { position: relative; left: auto; top: auto; transform: none; width: 100vw; } .ark-navidad .ark-ruta__statsw { position: relative !important; left: auto; bottom: auto; order: 3; margin: 24px var(--ark-gutter) 0; } .ark-ruta__stats { width: 100%; } .ark-ruta__credit { position: static; margin-top: 10px; } .ark-ruta__tag { font-size: .625rem; transform: translate(12px, -50%); } } /* ---------- 8 · Desayunos con Santa (referencia: The Bend Club) ---------- */ .ark-navidad .e-con.ark-des { position: relative; padding: 0; background: var(--ark-bg-deep); } .ark-navidad .e-con.ark-des__stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 110px); align-items: center; width: 100%; padding: calc(var(--ark-header-h) + 32px) max(var(--ark-gutter), calc((100vw - var(--ark-max)) / 2 + var(--ark-gutter))) 48px; } html.ark-des-pin .ark-navidad .e-con.ark-des__stage { position: sticky; top: 0; height: 100vh; height: 100svh; } .ark-des__bg { position: relative; } .ark-navidad .ark-des__bg img { opacity: .5; } .ark-des__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ark-bg-deep) 0%, rgba(34, 2, 9, .35) 25%, rgba(34, 2, 9, .5) 100%); } .ark-navidad .e-con.ark-des__body { display: flex; flex-direction: column; align-items: flex-start; } .ark-navidad .ark-des__body > .elementor-widget-html:first-child { padding-bottom: 22px; } .ark-des__progress { width: 100%; height: 1px; margin: -18px 0 30px; background: rgba(242, 210, 143, .2); } .ark-des__progress span { display: block; height: 100%; background: var(--ark-gold-light); transform: scaleX(0); transform-origin: left; } html:not(.ark-des-pin) .ark-des__progress { display: none; } .ark-des__nav { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; } .ark-des__nav button { position: relative; padding: 6px 0; border: 0; background: none; color: rgba(255, 255, 255, .55); font: 500 .75rem var(--ark-font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; } .ark-des__nav button span { margin-right: 8px; color: var(--ark-gold); } .ark-des__nav button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ark-gold-light); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ark-ease); } .ark-des__nav button[aria-current="step"] { color: var(--ark-white); } .ark-des__nav button[aria-current="step"]::after { transform: scaleX(1); } .ark-navidad .e-con.ark-des__steps { display: grid; width: 100%; } .ark-navidad .e-con.ark-des__step { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 600ms var(--ark-ease), transform 700ms var(--ark-ease), visibility 0s linear 600ms; } .ark-navidad .e-con.ark-des__step.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 150ms, 150ms, 0s; } .ark-navidad .ark-des__title { font-size: clamp(1.9rem, 3.6vw, 3.4rem); font-weight: 300; line-height: 1.08; text-transform: uppercase; color: var(--ark-white); padding-bottom: 18px; } .ark-navidad .ark-des__title .ark-t-sm { display: block; font-size: .42em; font-weight: 400; text-transform: none; color: var(--ark-gold-glow); margin-bottom: 8px; } .ark-navidad .ark-des__text { font-size: 1.0625rem; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, .86); max-width: 46ch; } .ark-rows--sm div { grid-template-columns: 130px 1fr; padding: 11px 0; } .ark-rows--sm dd { font-size: .9375rem; } .ark-navidad .ark-des__body .ark-btnrow { margin-top: 32px; } .ark-navidad .ark-des__note { margin-top: 16px; font-size: .75rem; color: rgba(255, 255, 255, .55); max-width: 52ch; } /* Sin fijar (celular, sin JS o movimiento reducido): los tres momentos en orden. */ html:not(.ark-des-pin) .ark-des__nav { display: none; } html:not(.ark-des-pin) .ark-navidad .e-con.ark-des__steps { display: flex; flex-direction: column; gap: 36px; } html:not(.ark-des-pin) .ark-navidad .e-con.ark-des__step { grid-area: auto; opacity: 1; visibility: visible; transform: none; } @media (max-width: 899px) { .ark-navidad .e-con.ark-des__stage { grid-template-columns: 1fr; padding-top: 96px; } } /* ---------- 12 · Visítanos + FAQ ---------- */ .ark-navidad .e-con.ark-vis { padding: clamp(96px, 14vh, 160px) 0; background: #1a0207; } .ark-navidad .e-con.ark-vis__inner { width: 100%; max-width: var(--ark-max); margin: 0 auto; padding: 0 var(--ark-gutter); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 120px); align-items: start; } .ark-navidad .ark-vis__col > .elementor-widget-html:first-child { padding-bottom: 14px; } .ark-navidad .ark-vis__title { padding-bottom: 28px; } .ark-vis__note { margin: 16px 0 0; font-size: .8125rem; font-weight: 300; color: rgba(255, 255, 255, .6); } .ark-navidad .ark-vis__faqtitle { font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ark-gold); padding: 14px 0 18px; } .ark-navidad .ark-faq :is(.elementor-accordion-item, .elementor-toggle-item) { border-top: 1px solid rgba(242, 210, 143, .3) !important; } .ark-navidad .ark-faq .elementor-tab-title { font-weight: 400 !important; } @media (max-width: 900px) { .ark-navidad .e-con.ark-vis__inner { grid-template-columns: 1fr; } } /* ---------- 13 · Cierre: la foto se abre a pantalla completa ---------- */ .ark-navidad .e-con.ark-fin { position: relative; min-height: 100vh; min-height: 100svh; padding: 0 0 clamp(56px, 10vh, 110px); display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; overflow: hidden; background: var(--ark-bg-deep); } .ark-navidad .ark-fin__framew { position: absolute !important; inset: 0; margin: 0; width: auto !important; z-index: -1; } .ark-fin__frame { position: absolute; inset: 0; clip-path: inset(var(--ark-open-y, 0%) var(--ark-open-x, 0%) round 2px); } /* Cierre: la mesa servida; el texto va abajo a la izquierda, sobre las sillas en sombra. */ .ark-fin__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(20deg, rgba(18, 1, 5, .9) 0%, rgba(18, 1, 5, .62) 34%, rgba(18, 1, 5, 0) 62%), linear-gradient(180deg, rgba(18, 1, 5, .45) 0%, rgba(18, 1, 5, 0) 22%); } .ark-navidad .ark-fin__frame img { object-position: 60% 50%; } .ark-navidad .ark-fin__frame img, .ark-fin__frame picture { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .ark-navidad .e-con.ark-fin__copy { width: 100%; max-width: var(--ark-max); margin: 0 auto; padding: 0 var(--ark-gutter); display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .ark-navidad .ark-fin__copy > .elementor-widget { max-width: 620px; } .ark-navidad .ark-fin__copy .ark-label--center { justify-content: flex-start; } .ark-navidad .ark-fin__copy .ark-label--center::after { display: none; } .ark-navidad .ark-fin__copy > .elementor-widget-html:first-child { padding-bottom: 16px; } .ark-navidad .ark-fin__title { font-size: clamp(2.2rem, 5vw, 4.6rem); padding-bottom: 8px; } .ark-navidad .ark-fin__copy .ark-btnrow { justify-content: flex-start; } /* ---------- Footer: marca gigante ---------- */ /* Footer: misma estructura que el del sitio de Arkadia (cuatro columnas, línea y derechos), con los colores de la campaña. */ .ark-footer { position: relative; background: var(--ark-bg); border-top: 1px solid rgba(242, 210, 143, .2); padding: clamp(56px, 9vh, 80px) 0 0; font-weight: 300; color: var(--ark-white); } .ark-footer__inner { max-width: var(--ark-max); margin: 0 auto; padding: 0 var(--ark-gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items: start; } .ark-footer__h { margin: 0 0 18px; font-size: 1.125rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ark-gold-light); } .ark-footer__h--pqrs { margin: 28px 0 14px; } .ark-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: .875rem; line-height: 1.5; } .ark-footer a { color: var(--ark-white); text-decoration: none; transition: color var(--ark-t-micro); } .ark-footer a:hover { color: var(--ark-gold-glow); } .ark-navidad .ark-footer__cimento { display: block; width: 160px; height: auto; margin: 0 0 30px; } .ark-footer__about { margin: 0 0 32px; font-size: .875rem; line-height: 1.7; max-width: 30ch; } .ark-footer ul.ark-footer__social { display: flex; gap: 8px; } .ark-footer__social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(209, 171, 100, .2); color: var(--ark-white); transition: background-color var(--ark-t-micro), color var(--ark-t-micro); } .ark-footer__social a:hover { background: var(--ark-gold-light); color: var(--ark-bg); } .ark-footer__social svg { width: 18px; height: 18px; } .ark-footer__pqrs { margin: 0; font-size: .875rem; line-height: 1.7; } .ark-footer__pqrs a { text-decoration: underline; text-underline-offset: 2px; } .ark-footer__logo { display: flex; flex-direction: column; align-items: flex-end; color: var(--ark-gold-light); margin-bottom: 28px; } .ark-footer__logo svg { display: block; width: 100%; max-width: 272px; height: auto; } .ark-footer__logo span { margin-top: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .ark-footer ul.ark-footer__contacto { gap: 12px; } .ark-footer__contacto li { display: flex; align-items: center; gap: 30px; } .ark-footer__contacto svg { flex: none; width: 18px; height: 18px; color: var(--ark-gold-light); } .ark-footer__ciudad { margin: 14px 0 0; font-size: .875rem; } .ark-footer__copy { position: relative; max-width: var(--ark-max); margin: 40px auto 0; padding: 30px var(--ark-gutter) calc(30px + 72px); font-size: .75rem; text-align: center; color: rgba(255, 255, 255, .8); } .ark-footer__copy::before { content: ""; position: absolute; top: 0; left: var(--ark-gutter); right: var(--ark-gutter); height: 1px; background: rgba(242, 210, 143, .3); } .ark-footer__copy span { color: rgba(255, 255, 255, .45); } @media (min-width: 768px) { .ark-footer__copy { padding-bottom: 30px; } } @media (max-width: 1000px) { .ark-footer__inner { grid-template-columns: 1fr 1fr; } .ark-footer__logo { align-items: flex-start; } } @media (max-width: 600px) { .ark-footer { padding-top: 0; } .ark-footer__inner { grid-template-columns: 1fr; gap: 36px; padding: 0; } .ark-footer__inner > .ark-footer__col { padding: 0 var(--ark-gutter); } /* Como en el sitio de Arkadia: en el celular, el bloque de Cimento va en una franja de otro tono. */ .ark-footer__inner > .ark-footer__col--cimento { padding-top: 48px; padding-bottom: 40px; background: var(--ark-burgundy); } } /* ===================================================================== v3 · Ajustes de la revisión del usuario ===================================================================== */ /* ---------- Imagen a media pantalla con bordes difuminados ---------- A sangre por el lateral de la página; se disuelve hacia el texto, arriba y abajo. */ .ark-navidad .ark-bleedw { position: absolute !important; top: 0; bottom: 0; width: 58% !important; max-width: none !important; margin: 0; z-index: 0; } .ark-navidad .ark-bleedw--l { left: 0; } .ark-navidad .ark-bleedw--r { right: 0; } .ark-bleed { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(var(--ark-bleed-dir), #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(var(--ark-bleed-dir), #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .ark-bleed--l { --ark-bleed-dir: 90deg; } .ark-bleed--r { --ark-bleed-dir: 270deg; } .ark-navidad .ark-bleed > img, .ark-bleed figure, .ark-navidad .ark-bleed figure img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; } @media (max-width: 900px) { /* Celular: la imagen arriba, a todo el ancho, difuminada hacia el texto de abajo. */ .ark-navidad .ark-bleedw { top: 0; bottom: auto; width: 100% !important; height: 62vh; } .ark-bleed { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; } } /* ---------- Hero: la foto corrida a la izquierda (no se tapa la cara del papá) ---------- */ @media (min-width: 768px) { .ark-chap__sharp, .ark-chap__lente { right: 30% !important; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, #000 70%, transparent 100%); } .ark-navidad :is(.ark-chap__sharp, .ark-chap__lente) img { object-position: 38% 45%; } .ark-chap__veil { background: linear-gradient(0deg, rgba(18, 1, 5, .8) 0%, rgba(18, 1, 5, 0) 30%), linear-gradient(180deg, rgba(18, 1, 5, .5) 0%, rgba(18, 1, 5, 0) 16%) !important; } .ark-navidad .ark-hero__content > * { width: min(440px, 30vw); } .ark-navidad .ark-hero__title { font-size: clamp(3.2rem, 6.4vw, 7rem); } } @media (max-width: 767px) { .ark-chap__sharp, .ark-chap__lente { bottom: 40% !important; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); } .ark-navidad :is(.ark-chap__sharp, .ark-chap__lente) img { object-position: 50% 20%; } .ark-navidad .ark-hero__title { font-size: clamp(2.8rem, 13vw, 3.6rem); } } /* ---------- Experiencias: las lamas del regalo arman el fondo ---------- */ .ark-exps__bg { position: relative; overflow: hidden; } .ark-exps__veil { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ark-bg-deep) 0%, rgba(18, 1, 5, .42) 22%, rgba(18, 1, 5, .5) 78%, var(--ark-bg-deep) 100%); } /* ---------- Desayunos: fotos a media pantalla difuminada ---------- */ @media (min-width: 900px) { .ark-navidad .e-con.ark-des__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ark-navidad .e-con.ark-des__body { grid-column: 2; max-width: 560px; } } .ark-des__photos .ark-des__photo { opacity: 0; transition: opacity 1100ms var(--ark-ease); } .ark-navidad .ark-des__photo img { transition: transform 1600ms cubic-bezier(.2, .7, .2, 1); } .ark-des__photos .ark-des__photo.is-on { opacity: 1; } /* Paso 3: el póster oficial completo sobre la mesa desenfocada. */ .ark-navidad .ark-des__photo--poster img:first-child { filter: blur(2px) brightness(.55); transform: scale(1.06); } .ark-navidad .ark-des__photo--poster .ark-des__poster { inset: auto; left: 50%; top: 50%; width: auto; height: min(82%, calc((100vw * .56 - 80px) * 1.37)); aspect-ratio: 1321 / 1810; object-fit: contain; transform: translate(-50%, -46%) !important; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 210, 143, .25); border-radius: 2px; } .ark-des__photo--poster.is-on .ark-des__poster { animation: ark-poster-in 900ms var(--ark-ease-in) both; } @keyframes ark-poster-in { from { opacity: 0; transform: translate(-50%, -40%) scale(.96); } to { opacity: 1; transform: translate(-50%, -46%) scale(1); } } @media (max-width: 899px) { .ark-navidad .e-con.ark-des__body { grid-column: 1; padding-top: 50vh; } .ark-des__photos .ark-des__photo:not(:first-child) { display: none; } .ark-des__photos .ark-des__photo:first-child { opacity: 1; } } /* ---------- Misiones: pestañas a pantalla completa ---------- */ .ark-navidad .e-con.ark-mis2 { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; padding: 0; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(90deg, var(--ark-bg-deep), #2a040d); } .ark-mis2__photo { opacity: 0; transition: opacity 900ms var(--ark-ease); } .ark-mis2__photo.is-on { opacity: 1; } .ark-navidad .e-con.ark-mis2__inner { position: relative; z-index: 1; width: 100%; max-width: var(--ark-max); margin: 0 auto; padding: calc(var(--ark-header-h) + 40px) var(--ark-gutter) 48px; } .ark-navidad .e-con.ark-mis2__body { width: min(600px, 50%); display: flex; flex-direction: column; align-items: flex-start; } .ark-navidad .ark-mis2__body > .elementor-widget-html:first-child { padding-bottom: 16px; } .ark-navidad .ark-mis2__title { padding-bottom: 14px; } .ark-navidad .ark-mis2__lead { font-weight: 300; color: rgba(255, 255, 255, .8); padding-bottom: 28px; max-width: 52ch; } .ark-mis2__tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(242, 210, 143, .25); margin-bottom: 28px; } .ark-mis2__tabs button { position: relative; padding: 12px 22px 14px 0; margin-right: 18px; border: 0; background: none; color: rgba(255, 255, 255, .55); font: 500 1rem var(--ark-font); cursor: pointer; text-align: left; transition: color var(--ark-t-micro); } .ark-mis2__tabs button span { display: block; font-size: .625rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ark-gold); margin-bottom: 2px; } .ark-mis2__tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ark-gold-light); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ark-ease); } .ark-mis2__tabs button[aria-selected="true"] { color: var(--ark-white); } .ark-mis2__tabs button[aria-selected="true"]::after { transform: scaleX(1); } .ark-navidad .e-con.ark-mis2__panels { display: grid; width: 100%; } .ark-navidad .e-con.ark-mis2__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 500ms var(--ark-ease), transform 600ms var(--ark-ease), visibility 0s linear 500ms; } .ark-navidad .e-con.ark-mis2__panel.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 120ms, 120ms, 0s; } .ark-navidad .ark-mis2__name { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 300; text-transform: uppercase; line-height: 1.1; color: var(--ark-white); padding-bottom: 10px; } .ark-navidad .ark-mis2__text { font-weight: 300; color: rgba(255, 255, 255, .82); padding-bottom: 18px; } @keyframes ark-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ark-navidad .ark-mis2__body .ark-btnrow { margin-top: 24px; } .ark-navidad .ark-mis2__note { margin-top: 14px; font-size: .75rem; } /* Sin JS: todas las misiones y sub-misiones visibles en orden. */ html:not(.ark-mis-on) .ark-mis2__tabs { display: none; } html:not(.ark-mis-on) .ark-navidad .e-con.ark-mis2__panels { display: flex; flex-direction: column; gap: 28px; } html:not(.ark-mis-on) .ark-navidad .e-con.ark-mis2__panel { grid-area: auto; opacity: 1; visibility: visible; transform: none; } html:not(.ark-mis-on) html:not(.ark-mis-on) @media (max-width: 900px) { .ark-navidad .e-con.ark-mis2__body { width: 100%; } .ark-navidad .e-con.ark-mis2__inner { padding-top: 54vh; } .ark-mis2__tabs button { padding-right: 10px; margin-right: 8px; font-size: .875rem; } } /* ---------- 5 · Fábrica de Peluches y 10 · Market navideño: KV a media pantalla + texto ---------- */ .ark-navidad .e-con:is(.ark-fab, .ark-mkt) { position: relative; padding: 0; background: var(--ark-bg-deep); } .ark-navidad .e-con.ark-mkt { background: #1a0207; } /* Market en escritorio: la foto a la izquierda (58 %) y el texto con la vitrina en la mitad derecha, centrados en la pantalla y con el margen del header (misma regla que Desayunos). */ .ark-navidad .e-con.ark-mkt__stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: calc(var(--ark-header-h) + 56px) max(var(--ark-gutter), calc((100vw - var(--ark-max)) / 2 + var(--ark-gutter))) 64px; } .ark-navidad .e-con.ark-mkt__copy { width: min(600px, 50%); display: flex; flex-direction: column; align-items: flex-start; } .ark-navidad .e-con.ark-mkt__copy > .elementor-widget { width: 100%; } .ark-navidad .ark-mkt__copy > .elementor-widget-html:first-child { padding-bottom: 18px; } .ark-navidad .ark-mkt__title { padding-bottom: 14px; } .ark-mkt__facts { margin: 0; font-size: 1.0625rem; font-weight: 400; color: var(--ark-white); } .ark-mkt__facts i { font-style: normal; margin: 0 10px; color: var(--ark-gold); } .ark-mkt__horario { margin: 6px 0 0; font-size: .875rem; font-weight: 300; color: rgba(255, 255, 255, .7); } .ark-navidad .ark-mkt__text { margin-top: 14px; font-size: 1.0625rem; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, .86); max-width: 46ch; } /* Celular: la foto arriba (62 % de la pantalla, difuminada hacia abajo) y el texto con la vitrina debajo. */ @media (max-width: 900px) { .ark-navidad .e-con.ark-mkt__stage { min-height: 0; padding: 0 var(--ark-gutter) 72px; justify-content: flex-start; align-items: stretch; } .ark-navidad .e-con.ark-mkt__copy { width: 100%; margin-top: 46vh; margin-top: 46svh; } .ark-mkt__facts { font-size: .9375rem; } .ark-navidad .ark-mkt__text { font-size: .9375rem; line-height: 1.55; } } /* Fábrica en escritorio: el escenario queda fijo mientras el taller recorre sus pasos (sección de 200 vh). */ html.ark-fab-pin .ark-navidad .e-con.ark-fab { height: 260vh; height: 260svh; } html.ark-fab-pin .ark-navidad .e-con.ark-fab__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; } /* Escritorio: el texto a la izquierda, centrado en la pantalla y con espacio para el header (como Desayunos). */ .ark-navidad .e-con.ark-fab__stage { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; grid-template-columns: none; padding: calc(var(--ark-header-h) + 56px) max(var(--ark-gutter), calc((100vw - var(--ark-max)) / 2 + var(--ark-gutter))) 64px; } .ark-navidad .e-con.ark-fab__body { flex: none; } /* Precio y aliado: una línea bajo los pasos, con jerarquía y sin competir con el título. */ .ark-fab__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(242, 210, 143, .22); font-size: .875rem; font-weight: 300; color: rgba(255, 255, 255, .7); } .ark-cert { margin-top: 18px; } .ark-fab__meta b { font-weight: 600; color: var(--ark-gold-glow); } .ark-fab__meta i { font-style: normal; color: var(--ark-gold); } /* Fábrica: la foto del paso ocupa la mitad derecha, difuminada hacia el texto (misma regla que Encendamos, Desayunos y Market); las capas se funden al cambiar de paso y la activa hace un zoom lento. El conejo queda centrado en esa mitad. */ .ark-navidad .ark-fab__bgw { position: absolute !important; top: 0; bottom: 0; right: 0; left: auto; width: 56% !important; max-width: none !important; margin: 0; z-index: 0; } .ark-fab__bg { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(270deg, #000 55%, rgba(0, 0, 0, .55) 76%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(270deg, #000 55%, rgba(0, 0, 0, .55) 76%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .ark-fab__capa { position: absolute; inset: 0; opacity: 0; transition: opacity 1100ms var(--ark-ease); } .ark-navidad .ark-fab__capa img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; transform: scale(1.06); transition: transform 9000ms linear; } .ark-fab__capa.is-on { opacity: 1; } .ark-fab__capa.is-on img { transform: scale(1); } /* Ambiente: la misma foto del paso, muy desenfocada y tenue, detrás de toda la sección. */ .ark-navidad .ark-fab__ambw { z-index: -1; } .ark-fab__amb { position: absolute; inset: 0; overflow: hidden; background: var(--ark-bg-deep); } .ark-fab__amb .ark-fab__capa img { filter: blur(28px) saturate(1.1) brightness(.55); transform: scale(1.2); transition: none; object-position: 50% 50%; } .ark-fab__amb .ark-fab__capa { opacity: 0; transition: opacity 1400ms var(--ark-ease); } .ark-fab__amb .ark-fab__capa.is-on { opacity: .55; } .ark-fab__amb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 1, 5, .55) 0%, rgba(18, 1, 5, .35) 40%, rgba(18, 1, 5, .15) 100%), linear-gradient(180deg, rgba(18, 1, 5, .6) 0%, rgba(18, 1, 5, 0) 25%, rgba(18, 1, 5, 0) 75%, var(--ark-bg-deep) 100%); } .ark-navidad .e-con.ark-fab__body { max-width: 520px; } .ark-fab__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; z-index: 2; } /* Celular: la foto arriba (42 % de la pantalla, difuminada hacia abajo) y el taller compacto debajo, en una pantalla. */ @media (max-width: 900px) { html.ark-fab-pin .ark-navidad .e-con.ark-fab { height: 300vh; height: 300svh; } /* 0.6.3: con seis pasos (Arkadia, 27-oct) la foto baja a 36 % para que el certificado no quede bajo la barra inferior. */ .ark-navidad .ark-fab__bgw { left: 0; width: 100% !important; height: 36vh; height: 36svh; bottom: auto; } .ark-fab__bg { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; } .ark-navidad .ark-fab__capa img { object-position: 50% 42%; } .ark-navidad .e-con.ark-fab__stage { padding: 0 var(--ark-gutter) 104px; justify-content: flex-start; } .ark-navidad .e-con:is(.ark-fab__body, .ark-mkt__copy).ark-fab__body { padding-top: 0; margin-top: 30vh; margin-top: 30svh; } .ark-navidad .ark-fab__text { display: none; } .ark-navidad .ark-fab__body > .elementor-widget-html:first-child { padding-bottom: 2px; } .ark-navidad .ark-fab__title { padding-bottom: 2px; font-size: 1.25rem; } .ark-navidad .ark-taller { margin-top: 6px; } .ark-taller { gap: 0; } .ark-navidad .ark-taller__btn { grid-template-columns: 36px 1fr; gap: 10px; padding: 2px 6px 2px 0; min-height: 0; } .ark-navidad .ark-taller__icon { width: 36px; height: 36px; } .ark-navidad .ark-taller__icon svg { width: 26px; height: 26px; } .ark-taller__paso::before { left: 17px; top: 38px; } .ark-taller__txt b { font-size: .875rem; line-height: 1.2; } .ark-taller__txt small { font-size: .75rem; line-height: 1.35; } .ark-taller__paso.is-on .ark-taller__txt small { max-height: 34px; } .ark-cert { position: static; margin: 6px 0 0; padding: 6px 12px 6px; max-width: none; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; transform-origin: 50% 0; } .ark-cert:not(.is-on) { display: none; } .ark-cert__h { grid-column: 1 / -1; font-size: .5625rem; } .ark-cert__name { margin: 2px 0 0; font-size: 1.1rem; } .ark-cert__txt { font-size: .6875rem; line-height: 1.3; } .ark-cert__sello { display: none; } .ark-fab__meta { margin-top: 8px; padding-top: 8px; font-size: .6875rem; gap: 2px 6px; white-space: nowrap; } .ark-fab__amb .ark-fab__capa.is-on { opacity: .4; } .ark-fab__fx { height: 36vh; height: 36svh; } } /* Celulares bajos (≤ 780 px de alto): foto más baja y pasos más juntos para que el certificado no quede bajo la barra. */ @media (max-width: 900px) and (max-height: 780px) { .ark-navidad .ark-fab__bgw, .ark-fab__fx { height: 28vh; height: 28svh; } .ark-navidad .e-con:is(.ark-fab__body, .ark-mkt__copy).ark-fab__body { margin-top: 22vh; margin-top: 22svh; } .ark-navidad .ark-taller__btn { grid-template-columns: 32px 1fr; padding: 1px 6px 1px 0; } .ark-navidad .ark-taller__icon { width: 32px; height: 32px; } .ark-navidad .ark-taller__icon svg { width: 23px; height: 23px; } .ark-taller__paso::before { left: 15px; top: 34px; } .ark-navidad .ark-fab__title { font-size: 1.125rem; } } /* ---------- Agenda: calendario de temporada ---------- */ .ark-navidad .e-con.ark-cal { min-height: 100vh; min-height: 100svh; padding: calc(var(--ark-header-h) + 32px) 0 56px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(80% 60% at 70% 40%, #2a040d, var(--ark-bg-deep) 70%); } .ark-navidad .e-con.ark-cal__inner { width: 100%; max-width: var(--ark-max); margin: 0 auto; padding: 0 var(--ark-gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 100px); align-items: center; } .ark-navidad .ark-cal__head > .elementor-widget-html:first-child { padding-bottom: 16px; } .ark-navidad .ark-cal__title { padding-bottom: 28px; } .ark-cal__detail { display: grid; } .ark-cal__event { grid-area: 1 / 1; padding: 22px 0; border-top: 1px solid rgba(242, 210, 143, .3); border-bottom: 1px solid rgba(242, 210, 143, .3); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 400ms var(--ark-ease), transform 500ms var(--ark-ease), visibility 0s linear 400ms; } .ark-cal__event.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .ark-cal__date { margin: 0 0 8px; font-size: .75rem; font-weight: 600; letter-spacing: .18em; line-height: 1.3; text-transform: uppercase; color: var(--ark-gold-glow); } .ark-cal__event h3 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 500; color: var(--ark-white); } .ark-cal__event p { margin: 0; font-weight: 300; color: rgba(255, 255, 255, .82); } .ark-cal__event .ark-btn { margin-top: 12px; } .ark-cal__pending { margin: 18px 0 0; font-size: .75rem; } @media (max-width: 900px) { .ark-navidad .e-con.ark-cal__inner { grid-template-columns: 1fr; } } /* ---------- Botones: vida sutil sin hover, más notoria con hover ---------- */ /* Principal: un brillo cruza cada ~7 s; con hover el brillo se queda y el botón se ilumina. */ .ark-navidad :is(a.ark-btn--primary, .ark-btn--primary .elementor-button) { position: relative; overflow: hidden; isolation: isolate; } .ark-navidad :is(a.ark-btn--primary, .ark-btn--primary .elementor-button)::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 250, 235, .7), transparent); transform: skewX(-18deg); animation: ark-sheen 7s var(--ark-ease) infinite; animation-delay: var(--ark-sheen-delay, 2s); } @keyframes ark-sheen { 0%, 82% { left: -60%; } 100% { left: 130%; } } .ark-navidad :is(a.ark-btn--primary, .ark-btn--primary .elementor-button):hover { background: var(--ark-gold-glow) !important; box-shadow: 0 0 0 1px rgba(242, 210, 143, .6), 0 10px 34px -8px rgba(242, 210, 143, .65) !important; } .ark-navidad :is(a.ark-btn--primary, .ark-btn--primary .elementor-button):hover::before { animation: ark-sheen-hover 1.1s var(--ark-ease) infinite; } @keyframes ark-sheen-hover { 0% { left: -60%; } 100% { left: 130%; } } /* Texto con flecha: la flecha "respira"; con hover avanza y la línea se llena de dorado. */ .ark-navidad .ark-btn--ghost .elementor-button-content-wrapper::after, .ark-navidad a.ark-btn--ghost::after { display: inline-block; animation: ark-arrow 3.2s var(--ark-ease) infinite; } @keyframes ark-arrow { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(4px); } 90% { transform: translateX(0); } } .ark-navidad :is(a.ark-btn--ghost, .ark-btn--ghost .elementor-button) { background-image: linear-gradient(var(--ark-gold-light), var(--ark-gold-light)) !important; background-repeat: no-repeat !important; background-position: 0 100% !important; background-size: 0% 2px !important; transition: background-size 500ms var(--ark-ease), color var(--ark-t-micro) !important; } .ark-navidad :is(a.ark-btn--ghost, .ark-btn--ghost .elementor-button):hover { background-size: 100% 2px !important; } .ark-navidad .ark-btn--ghost .elementor-button:hover .elementor-button-content-wrapper::after, .ark-navidad a.ark-btn--ghost:hover::after { animation: none; transform: translateX(8px); } .ark-spark-fx { position: fixed; inset: 0; pointer-events: none; z-index: 160; } /* ---------- "Enciende tu luz": destello dorado sobre el árbol de la foto ---------- */ .ark-enc__lights { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; } .ark-navidad .ark-enc__photo img.is-lit { animation: ark-lit 1.6s var(--ark-ease); } @keyframes ark-lit { 30% { filter: brightness(1.22) saturate(1.12); } } .ark-glow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: -8px 0 32px; } .ark-glow__btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 12px; border: 1px solid rgba(242, 210, 143, .5); border-radius: 2px; background: rgba(242, 210, 143, .08); color: var(--ark-gold-glow); font: 600 .8125rem var(--ark-font); letter-spacing: .04em; cursor: pointer; transition: background-color var(--ark-t-micro), border-color var(--ark-t-micro), box-shadow var(--ark-t-std); } .ark-glow__btn:hover { background: rgba(242, 210, 143, .18); border-color: var(--ark-gold-glow); box-shadow: 0 0 24px -4px rgba(242, 210, 143, .55); } .ark-glow__bulb { width: 10px; height: 10px; border-radius: 50%; background: var(--ark-gold-glow); box-shadow: 0 0 10px 2px rgba(242, 210, 143, .8); animation: ark-pulse 2.4s var(--ark-ease) infinite; } @keyframes ark-pulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } } .ark-glow__status { flex: 1 1 220px; margin: 0; font-size: .8125rem; font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, .78); } .ark-glow__status b { font-weight: 600; color: var(--ark-gold-glow); } /* ---------- Cursor editorial sobre elementos que se abren ---------- */ .ark-cursor { position: fixed; left: 0; top: 0; z-index: 170; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; background: rgba(209, 171, 100, .9); color: var(--ark-bg); font: 600 .75rem var(--ark-font); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; transform: translate3d(var(--x, -200px), var(--y, -200px), 0) scale(var(--s, 0)); transition: transform 0s, opacity 300ms var(--ark-ease); opacity: 0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ark-cursor.is-on { opacity: 1; } .ark-has-cursor [data-ark-cursor] { cursor: none; } /* ---------- Movimiento con el teléfono (giroscopio) ---------- */ .ark-motion { position: fixed; left: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 95; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid rgba(242, 210, 143, .45); border-radius: 2px; background: rgba(18, 1, 5, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ark-gold-glow); font: 600 .6875rem var(--ark-font); letter-spacing: .06em; cursor: pointer; } .ark-motion::before { content: ""; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px; transform: rotate(-12deg); } .ark-motion[aria-pressed="true"]::before { animation: ark-tilt-icon 2.4s var(--ark-ease) infinite; } @keyframes ark-tilt-icon { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } } .ark-debug { position: fixed; right: 8px; top: 90px; z-index: 300; width: 230px; padding: 10px 12px; background: rgba(0, 0, 0, .85); color: #9f9; font: 11px/1.5 ui-monospace, Menlo, monospace; border-radius: 4px; white-space: pre-wrap; pointer-events: none; } .ark-bleed, .ark-chap__sharp { will-change: transform; } /* ---------- Encendido: datos en una sola franja ---------- */ .ark-strip { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; margin: 0 0 clamp(18px, 3vh, 32px); width: 100%; border-top: 1px solid rgba(242, 210, 143, .28); border-bottom: 1px solid rgba(242, 210, 143, .28); } .ark-strip div { padding: 12px 22px 12px 0; margin-right: 22px; border-right: 1px solid rgba(242, 210, 143, .22); } .ark-strip div:last-child { border-right: 0; margin-right: 0; } .ark-strip dt { font-size: .625rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ark-gold); } .ark-strip dd { margin: 4px 0 0; font-size: 1rem; font-weight: 400; color: var(--ark-white); white-space: nowrap; } .ark-navidad .ark-count { margin-bottom: clamp(18px, 3vh, 32px); } .ark-navidad .e-con.ark-enc__actions { margin-top: 0; align-items: center; } .ark-navidad .ark-enc__actions > .elementor-widget-html { width: auto; } .ark-glow__btn { height: 52px; } .ark-navidad .ark-glow__status { margin-top: 14px; max-width: 46ch; } /* ---------- Misiones: qué es + cómo participas ---------- */ .ark-mis2__how { margin: 0 0 8px; font-size: .625rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ark-gold); } .ark-mis2__list { list-style: none; margin: 0 0 14px; padding: 0; } .ark-mis2__list li { padding: 9px 0 9px 18px; position: relative; border-top: 1px solid rgba(242, 210, 143, .16); font-size: .9375rem; line-height: 1.5; } .ark-mis2__list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 6px; height: 6px; border-radius: 50%; background: var(--ark-gold-light); box-shadow: 0 0 8px rgba(242, 210, 143, .8); } .ark-mis2__list strong { font-weight: 600; color: var(--ark-gold-light); } .ark-mis2__list strong::after { content: " — "; color: rgba(255, 255, 255, .5); font-weight: 300; } .ark-mis2__list span { font-weight: 300; color: rgba(255, 255, 255, .86); } .ark-navidad .ark-mis2__panel .ark-btnrow { margin-top: 6px; } .ark-navidad .ark-mis2__lead { padding-bottom: clamp(16px, 3vh, 28px); } .ark-mis2__tabs { margin-bottom: clamp(16px, 3vh, 28px); } /* ---------- Desayunos: el paso 3 en dos columnas, sin huecos ---------- */ .ark-navidad .ark-des__step .ark-rows--sm { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin-bottom: 0; } .ark-navidad .ark-des__step .ark-rows--sm div { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; } .ark-navidad .ark-des__step .ark-rows--sm div:last-child { border-bottom: 0; } .ark-navidad .ark-des__body .ark-btnrow { margin-top: clamp(18px, 3vh, 32px); } .ark-navidad .ark-des__body > .elementor-widget-html:first-child { padding-bottom: 16px; } .ark-navidad .ark-des__info { margin-top: 14px; font-size: .875rem; font-weight: 500; color: var(--ark-gold-glow); } /* ---------- Experiencias: las franjas se ajustan al alto disponible ---------- */ .ark-navidad .e-con.ark-acc { height: clamp(280px, calc(100svh - 290px), 660px); } .ark-navidad .e-con.ark-exps { padding: clamp(72px, 11vh, 150px) 0 clamp(48px, 8vh, 110px); } /* ---------- Ajuste por alto de pantalla (laptops y ventanas bajas) ---------- */ .ark-navidad .ark-statement { font-size: clamp(1.6rem, min(3.3vw, 6.2vh), 3.35rem); } @media (min-width: 901px) and (max-height: 820px) { .ark-navidad .ark-enc__text, .ark-navidad .ark-mis2__lead, .ark-navidad .ark-des__text, .ark-navidad .ark-elev__text { font-size: .9375rem; line-height: 1.55; } .ark-navidad .ark-enc__title, .ark-navidad .ark-mis2__title, .ark-navidad .ark-elev__title, .ark-navidad .ark-cal__title { padding-bottom: 12px; } .ark-navidad .ark-enc__text { padding-bottom: 18px; } .ark-navidad .ark-count b { font-size: clamp(2.2rem, 7vh, 3.6rem); } .ark-navidad .ark-mis2__name { font-size: clamp(1.4rem, 4.4vh, 2.2rem); } .ark-navidad .ark-des__title { font-size: clamp(1.6rem, 5.6vh, 3rem); padding-bottom: 10px; } .ark-des__nav { margin-bottom: 18px; } .ark-des__progress { margin-bottom: 18px; } .ark-navidad .ark-body-tight .elementor-widget-html:first-child { padding-bottom: 10px; } .ark-navidad .e-con.ark-enc__inner, .ark-navidad .e-con.ark-mis2__inner { padding-top: calc(var(--ark-header-h) + 20px); padding-bottom: 28px; } .ark-navidad .e-con.ark-des__stage { padding-top: calc(var(--ark-header-h) + 20px); padding-bottom: 24px; } .ark-navidad .e-con.ark-cal { padding-top: calc(var(--ark-header-h) + 16px); padding-bottom: 24px; } .ark-mis2__list li { padding: 6px 0 6px 18px; font-size: .875rem; } } @media (min-width: 901px) and (max-height: 820px) { .ark-navidad .e-con.ark-exps { padding-top: calc(var(--ark-header-h) + 16px); padding-bottom: 28px; } .ark-navidad .ark-exps__labelw { padding-bottom: 8px; } .ark-navidad .ark-exps__title { padding-bottom: 14px; } .ark-navidad .ark-exps__tabsw { padding-bottom: 18px; } .ark-navidad .e-con.ark-mis2__body { width: min(640px, 56%); } .ark-navidad .ark-mis2__body > .elementor-widget-html:first-child { padding-bottom: 8px; } .ark-mis2__tabs button { padding-top: 6px; padding-bottom: 8px; } .ark-navidad .ark-mis2__text { padding-bottom: 10px; } .ark-navidad .ark-mis2__note { margin-top: 8px; } } /* Visítanos: datos en dos columnas, preguntas cerradas. */ .ark-navidad .ark-faq .elementor-toggle .elementor-tab-title { display: flex; align-items: center; gap: 12px; font: 400 1.0625rem/1.4 var(--ark-font) !important; color: var(--ark-white); border: 0; cursor: pointer; } .ark-navidad .ark-faq .elementor-toggle-title { color: inherit !important; font: inherit !important; text-decoration: none; } .ark-navidad .ark-faq .elementor-toggle .elementor-tab-title:hover, .ark-navidad .ark-faq .elementor-toggle .elementor-tab-title.elementor-active { color: var(--ark-gold-glow); } .ark-navidad .ark-faq .elementor-toggle-icon { width: 12px; flex: none; color: var(--ark-gold-light); } .ark-navidad .ark-faq .elementor-toggle-icon svg { width: 12px; height: 12px; fill: var(--ark-gold-light); } .ark-navidad .ark-faq .elementor-toggle .elementor-tab-content { padding: 0 0 16px 24px; border: 0; color: rgba(255, 255, 255, .86); font: 300 .9375rem/1.6 var(--ark-font); } .ark-navidad .ark-vis__col .ark-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; } .ark-navidad .ark-vis__col .ark-rows div { grid-template-columns: 1fr; gap: 3px; padding: 10px 0; } .ark-navidad .ark-vis__col .ark-rows dd { font-size: .9375rem; line-height: 1.45; } .ark-navidad .ark-vis__col .ark-rows .ark-rows__ancho { grid-column: 1 / -1; } .ark-rows dd small { display: block; margin-top: 4px; font-size: .75rem; color: rgba(255, 255, 255, .6); } .ark-navidad .ark-faq .elementor-toggle-item { border-bottom: 1px solid rgba(242, 210, 143, .3); } .ark-navidad .ark-faq .elementor-toggle .elementor-tab-title { padding: 16px 0; } .ark-navidad .e-con.ark-vis { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--ark-header-h) + 32px) 0 40px; } @media (max-width: 560px) { .ark-navidad .ark-vis__col .ark-rows { grid-template-columns: 1fr; } } @media (min-width: 768px) and (max-height: 760px) { .ark-navidad .ark-hero__title { font-size: clamp(2.6rem, min(6.4vw, 10.8vh), 7rem); } .ark-navidad .ark-hero__content .ark-kicker { padding-bottom: 10px; } .ark-navidad .ark-hero__sub { margin-top: 12px; font-size: .9375rem; } .ark-hero__chip { margin-top: 12px; } .ark-navidad .ark-hero .ark-btnrow { margin-top: 18px; } .ark-navidad .e-con.ark-hero { padding-bottom: 28px; padding-top: calc(var(--ark-header-h) + 12px); } } @media (min-width: 901px) and (max-height: 820px) { .ark-navidad .ark-des__step .ark-rows--sm { grid-template-columns: 1fr 1fr 1fr; } .ark-navidad .ark-vis__title { padding-bottom: 14px; } .ark-navidad .ark-vis__col .ark-rows div { padding: 7px 0; } .ark-navidad .ark-vis__col .ark-rows dd { font-size: .875rem; } .ark-navidad .ark-faq .elementor-toggle .elementor-tab-title { padding: 11px 0; font-size: .9375rem !important; } .ark-navidad .e-con.ark-vis { padding-top: calc(var(--ark-header-h) + 16px); padding-bottom: 20px; } .ark-vis__note { margin-top: 8px; } } @media (min-width: 901px) and (max-height: 700px) { .ark-navidad .e-con.ark-mis2__body { width: min(680px, 62%); } .ark-mis2__list li { padding: 5px 0 5px 18px; font-size: .8125rem; line-height: 1.45; } .ark-navidad .ark-mis2__name { font-size: 1.35rem; padding-bottom: 6px; } .ark-navidad .ark-mis2__text { font-size: .875rem; padding-bottom: 8px; } .ark-mis2__how { margin-bottom: 4px; } .ark-navidad .ark-mis2__panel .ark-btnrow { margin-top: 2px; } .ark-navidad .ark-mis2__panel :is(a.ark-btn, .ark-btn .elementor-button) { min-height: 40px; padding-top: 6px; padding-bottom: 6px; } .ark-navidad .ark-des__note { margin-top: 8px; } } @media (min-width: 901px) and (max-height: 640px) { .ark-header__hours { display: none; } .ark-navidad .ark-enc__text, .ark-navidad .ark-mis2__lead { display: none; } .ark-navidad .ark-glow__status, .ark-navidad .ark-des__note, .ark-navidad .ark-mis2__note { font-size: .6875rem; } .ark-strip div { padding: 8px 16px 8px 0; margin-right: 16px; } .ark-navidad :is(a.ark-btn, .ark-btn .elementor-button) { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } .ark-glow__btn { height: 44px; } } /* ===================================================================== v6 · Más simple y fácil de leer: menos líneas, tamaños más contenidos ===================================================================== */ /* ---------- Manifiesto: fotos dentro de la frase ---------- */ .ark-cap { display: inline-block; position: relative; width: 1.9em; height: .78em; margin: 0 .14em; vertical-align: -.04em; border-radius: 999px; overflow: hidden; clip-path: inset(0 calc(50% - var(--k, 0) * 50%) round 999px); transition: clip-path 120ms linear; } .ark-navidad .ark-cap img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(calc(1.35 - var(--k, 0) * .35)); } html:not(.ark-js) .ark-cap, .ark-no-anim .ark-cap { --k: 1; } /* ---------- Tamaños más contenidos en todo el sitio ---------- */ .ark-navidad .ark-statement { font-size: clamp(1.5rem, min(2.7vw, 5.2vh), 2.6rem); line-height: 1.18; } .ark-navidad .ark-statement--caps { font-size: clamp(1.6rem, min(3vw, 5.6vh), 2.9rem); line-height: 1.3; } .ark-navidad .ark-hero__title { font-size: clamp(3rem, min(6vw, 11vh), 6.25rem); } .ark-navidad .ark-des__title { font-size: clamp(1.5rem, min(2.6vw, 5vh), 2.4rem); } .ark-navidad .ark-mis2__name { font-size: clamp(1.25rem, min(2vw, 4vh), 1.75rem); } .ark-navidad .ark-acc__title { font-size: clamp(1.5rem, 2.4vw, 2.2rem); } .ark-navidad .ark-fin__title { font-size: clamp(1.8rem, 3.6vw, 3.4rem); } /* ---------- Menos líneas divisorias ---------- */ .ark-rows div, .ark-rows div:last-child { border: 0 !important; } .ark-navidad .ark-vis__col .ark-rows div, .ark-navidad .ark-des__step .ark-rows--sm div { padding: 8px 0; } .ark-mis2__list li { border-top: 0; padding-top: 6px; padding-bottom: 6px; } .ark-mis2__tabs { border-bottom: 0; } .ark-mis2__tabs button::after { bottom: 2px; } .ark-des__progress { display: none; } .ark-label::before { width: 40px; } /* ---------- Encendido minimalista ---------- */ .ark-enc__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 clamp(18px, 3vh, 28px); font-size: 1.0625rem; font-weight: 400; color: var(--ark-white); } .ark-enc__facts i { font-style: normal; color: var(--ark-gold); } .ark-navidad .ark-count { display: flex; gap: clamp(18px, 2.4vw, 32px); width: auto; margin-bottom: clamp(20px, 3.4vh, 32px); } .ark-navidad .ark-count div { flex: none; flex-direction: row; align-items: baseline; gap: 6px; padding: 0; border: 0; } .ark-navidad .ark-count b { font-size: clamp(1.8rem, min(3vw, 5.6vh), 2.6rem); font-weight: 200; } .ark-navidad .ark-count span { font-size: .6875rem; letter-spacing: .14em; } .ark-glow__btn { height: auto; padding: 8px 0; border: 0; background: none; color: rgba(255, 255, 255, .8); font-weight: 500; } .ark-glow__btn:hover { background: none; box-shadow: none; color: var(--ark-gold-glow); } .ark-glow__btn[aria-pressed="true"] { color: var(--ark-gold-glow); } .ark-navidad .e-con.ark-enc__actions { gap: 10px 24px; } /* ---------- 4 · Experiencias: carrusel horizontal minimalista ---------- */ .ark-navidad .e-con.ark-car { position: relative; padding: 0; background: var(--ark-bg-deep); } .ark-navidad .e-con.ark-car__stage { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 4vh, 44px); padding: calc(var(--ark-header-h) + 28px) 0 clamp(32px, 6vh, 64px); min-height: 100vh; min-height: 100svh; } html.ark-car-pin .ark-navidad .e-con.ark-car__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; } .ark-navidad .e-con.ark-car__head { width: 100%; max-width: var(--ark-max); margin: 0 auto; padding: 0 var(--ark-gutter); } .ark-navidad .ark-car__head .elementor-widget-html { padding-bottom: 10px; } .ark-navidad .e-con.ark-car__track { display: flex; flex-direction: row; flex-wrap: nowrap; gap: clamp(16px, 2vw, 28px); width: max-content; padding: 0 max(var(--ark-gutter), calc((100vw - var(--ark-max)) / 2 + var(--ark-gutter))); will-change: transform; } /* Alto fijo (--ark-card-h) y ancho según la proporción de cada foto (--r): los personajes nunca se recortan. */ .ark-navidad .e-con.ark-car__card { --ark-card-h: min(24vw, calc(100vh - 360px), 360px); flex: none; width: auto; display: flex; flex-direction: column; align-items: flex-start; } .ark-navidad .ark-car__card > .elementor-widget { width: auto; } .ark-car__box { width: calc(var(--ark-card-h) * var(--r, 1.25)); } .ark-car__photo { margin: 0 0 14px; height: var(--ark-card-h); overflow: hidden; border-radius: 2px; } .ark-navidad .ark-car__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ark-ease-in); } .ark-car__card:hover .ark-car__photo img { transform: scale(1.05); } .ark-navidad .ark-car__name { margin: 0; font: 500 clamp(1rem, 1.3vw, 1.25rem)/1.25 var(--ark-font); color: var(--ark-white); padding-bottom: 4px; } .ark-car__meta { margin: 0; font-size: .8125rem; font-weight: 400; color: var(--ark-gold-light); } .ark-car__meta i { font-style: normal; margin: 0 8px; color: var(--ark-gold); } .ark-car__nota { margin: 4px 0 0; font-size: .75rem; font-weight: 300; color: rgba(255, 255, 255, .7); } .ark-navidad .ark-car__card .elementor-widget-button { width: auto !important; padding-top: 4px; } .ark-navidad .ark-car__card :is(a.ark-btn--ghost, .ark-btn--ghost .elementor-button) { min-height: 0; padding-top: 6px; padding-bottom: 6px; font-size: .875rem; } @media (max-width: 899px) { .ark-navidad .e-con.ark-car__track { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--ark-gutter) 8px; } .ark-navidad .e-con.ark-car__track::-webkit-scrollbar { display: none; } .ark-navidad .e-con.ark-car__card { --ark-card-h: min(62vw, 300px); scroll-snap-align: start; scroll-margin-left: var(--ark-gutter); } .ark-navidad .e-con.ark-car__stage { min-height: 0; padding-bottom: 56px; } } /* ---------- Carta de Santa: el texto se escribe ---------- */ .ark-type-w { white-space: nowrap; } .ark-type-c { opacity: 0; transition: opacity 220ms ease-out; } .ark-type-c.is-on { opacity: 1; } .ark-pen { display: inline-block; width: 2px; height: .95em; margin-left: 1px; vertical-align: -.1em; background: var(--ark-gold); animation: ark-caret 900ms steps(2) infinite; } @keyframes ark-caret { 50% { opacity: 0; } } .ark-typing .ark-carta__firma { clip-path: inset(0 100% 0 0); transition: clip-path 1500ms cubic-bezier(.6, .1, .3, 1); } .ark-typing .ark-carta__firma.is-on { clip-path: inset(0 -10% 0 0); } /* ---------- 9 · Redes: historias tipo Instagram, una por experiencia ---------- Historias verticales (3:5) en una fila que se desliza; caben unas tres y la siguiente se asoma. Ancho --ark-sw: lo que quepa junto al texto, sin pasar del alto de la pantalla ni de 340 px. Letra en negrita y más grande que en el resto del sitio. */ .ark-navidad .e-con.ark-stories { position: relative; padding: 0; background: radial-gradient(90% 80% at 72% 50%, #3d0914 0%, var(--ark-bg-deep) 62%); overflow: hidden; } .ark-navidad .e-con.ark-stories__inner { --ark-scw: calc(min(100vw, 1360px) - 2 * var(--ark-gutter)); --ark-shead: 270px; --ark-scol: 40px; --ark-sgap: 14px; --ark-sw: min(calc((var(--ark-scw) - var(--ark-shead) - var(--ark-scol) - 3 * var(--ark-sgap)) / 3.4), calc((100vh - var(--ark-header-h) - 84px) * .6), 340px); width: 100%; max-width: 1360px; min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: calc(var(--ark-header-h) + 28px) var(--ark-gutter) 40px; display: flex; flex-direction: row; align-items: center; gap: var(--ark-scol); } @supports (height: 100svh) { .ark-navidad .e-con.ark-stories__inner { --ark-sw: min(calc((var(--ark-scw) - var(--ark-shead) - var(--ark-scol) - 3 * var(--ark-sgap)) / 3.4), calc((100svh - var(--ark-header-h) - 84px) * .6), 340px); } } .ark-navidad .e-con.ark-stories__head { flex: 1 1 0; min-width: 0; max-width: 420px; } .ark-navidad .ark-stories__head > .elementor-widget-html:first-child { padding-bottom: 14px; } .ark-navidad .ark-stories__title, .ark-navidad .ark-stories__title .elementor-heading-title { font-size: clamp(1.75rem, min(2.6vw, 5.4vh), 2.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; color: var(--ark-white); text-wrap: balance; } .ark-navidad .ark-stories__lead { padding-top: 14px; font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: 400; line-height: 1.45; color: rgba(255, 255, 255, .9); } .ark-navidad .ark-stories__lead p, .ark-navidad .ark-stories__note p { margin: 0; } .ark-navidad .ark-stories__note { padding-top: 14px; font-size: .75rem; color: rgba(255, 255, 255, .6); } .ark-navidad .ark-stories__roww { flex: 1 1 0; min-width: 0; width: auto; } .ark-stories__row { position: relative; display: flex; align-items: flex-start; gap: var(--ark-sgap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 10px 2px 14px; } .ark-stories__row::-webkit-scrollbar { display: none; } .ark-story { scroll-snap-align: center; } .ark-stories__redes { list-style: none; display: flex; gap: 8px; margin: 22px 0 0; padding: 0; } .ark-stories__redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(209, 171, 100, .2); color: var(--ark-white); transition: background-color var(--ark-t-micro), color var(--ark-t-micro); } .ark-stories__redes a:hover { background: var(--ark-gold-light); color: var(--ark-bg); } .ark-stories__redes svg { width: 18px; height: 18px; } .ark-story { position: relative; flex: 0 0 auto; width: var(--ark-sw); height: calc(var(--ark-sw) / .6); border-radius: 14px; overflow: hidden; isolation: isolate; color: #fff; background: #1a0207; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9); transform: scale(.93); transition: transform 700ms var(--ark-ease), box-shadow 700ms var(--ark-ease); } .ark-story.is-active { transform: none; box-shadow: 0 40px 80px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(242, 210, 143, .4); } .ark-story__media { position: absolute; inset: 0; z-index: -1; } .ark-navidad .ark-story__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; opacity: 0; transform: scale(1.1); transition: opacity 700ms var(--ark-ease), transform 7000ms linear, filter 700ms var(--ark-ease); } /* Cada pantalla tiene su propia imagen: entra con un acercamiento lento, como una historia. */ .ark-navidad .ark-story__img.is-on { opacity: 1; transform: scale(1.02); } .ark-story__img--falta { display: grid; place-items: center; padding: 24px; background: radial-gradient(80% 60% at 50% 35%, #5a0f1e, #1a0207); font-size: .75rem; text-align: center; } .ark-story:not(.is-active) .ark-story__img { filter: brightness(.62) saturate(.85); } /* Velo: arriba para las barras y el nombre; abajo, firme, para que el texto se lea sobre cualquier foto. */ .ark-story__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 0, 4, .6) 0%, rgba(14, 0, 4, 0) 18%, rgba(14, 0, 4, 0) 38%, rgba(14, 0, 4, .78) 64%, rgba(14, 0, 4, .95) 100%); } .ark-story__bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; } .ark-story__bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .34); overflow: hidden; } .ark-story__bars i { display: block; height: 100%; background: #fff; transform-origin: left center; transform: scaleX(0); } .ark-story__top { position: absolute; top: 22px; left: 12px; right: 6px; z-index: 3; display: flex; align-items: center; gap: 9px; font: 600 .875rem/1 var(--ark-font); white-space: nowrap; pointer-events: none; } .ark-story__top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ark-story__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ark-bg); box-shadow: 0 0 0 2px var(--ark-gold-light); color: var(--ark-gold-light); } .ark-story__avatar svg { width: 16px; height: 16px; } .ark-story__pause { position: relative; margin-left: auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; pointer-events: auto; } .ark-story__pause::before, .ark-story__pause::after { content: ""; position: absolute; top: 12px; width: 3px; height: 12px; border-radius: 1px; background: currentColor; } .ark-story__pause::before { left: 13px; } .ark-story__pause::after { left: 20px; } .ark-story__pause[aria-pressed="true"]::before { left: 14px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; } .ark-story__pause[aria-pressed="true"]::after { display: none; } .ark-stories.is-manual .ark-story__pause { display: none; } /* Portada de las historias que no están activas: el verbo, grande. */ .ark-story__cover { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 18px 22px; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; transition: opacity 500ms var(--ark-ease), visibility 500ms; } .ark-story__verb { font: 800 clamp(1.3rem, calc(var(--ark-sw) * .09), 1.9rem)/1.05 var(--ark-font); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; } .ark-story__rest { margin-top: 8px; font: 600 .75rem/1.2 var(--ark-font); letter-spacing: .18em; text-transform: uppercase; color: var(--ark-gold-glow); } .ark-story__cover:hover .ark-story__verb { color: var(--ark-gold-glow); } .ark-story.is-active .ark-story__cover { opacity: 0; visibility: hidden; } .ark-story:not(.is-active) :is(.ark-story__bars, .ark-story__top, .ark-story__body, .ark-story__tap) { opacity: 0; visibility: hidden; } /* Historia activa: misión, acción grande, texto y botón. Tocar la foto avanza o vuelve. */ .ark-story__body { position: absolute; left: 18px; right: 18px; bottom: 20px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; transition: opacity 500ms var(--ark-ease); } .ark-story__mission { margin: 0 0 10px; font: 700 .75rem/1.2 var(--ark-font); letter-spacing: .14em; text-transform: uppercase; color: var(--ark-gold-glow); } .ark-story__slides { display: grid; width: 100%; } .ark-story__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 450ms var(--ark-ease), transform 600ms var(--ark-ease), visibility 450ms; } .ark-story__slide.is-on { opacity: 1; visibility: visible; transform: none; } .ark-navidad .ark-story__slide h3 { margin: 0 0 8px; font: 700 clamp(1.25rem, calc(var(--ark-sw) * .085), 1.75rem)/1.12 var(--ark-font); letter-spacing: -.005em; color: #fff; text-wrap: balance; } .ark-story__slide p { margin: 0; font: 400 clamp(.9375rem, calc(var(--ark-sw) * .052), 1.0625rem)/1.42 var(--ark-font); color: rgba(255, 255, 255, .94); } .ark-navidad a.ark-story__cta { pointer-events: auto; margin-top: 16px; display: inline-flex; align-items: center; gap: .45em; min-height: 42px; padding: 10px 18px; border-radius: var(--ark-pill); background: var(--ark-gold-light); color: var(--ark-bg); font: 600 .875rem/1.2 var(--ark-font); white-space: nowrap; text-decoration: none; transition: background-color var(--ark-t-micro), transform var(--ark-t-micro) var(--ark-ease); } .ark-navidad a.ark-story__cta::after { content: "→"; transition: transform 300ms var(--ark-ease); } .ark-navidad a.ark-story__cta:hover { background: var(--ark-gold-glow); } .ark-navidad a.ark-story__cta:hover::after { transform: translateX(3px); } .ark-story__tap { position: absolute; top: 64px; bottom: 0; z-index: 1; padding: 0; border: 0; background: none; cursor: pointer; } .ark-story__tap--prev { left: 0; width: 32%; cursor: w-resize; } .ark-story__tap--next { right: 0; width: 68%; cursor: e-resize; } .ark-story :is(.ark-story__tap, .ark-story__cover, .ark-story__pause):focus-visible { outline: 2px solid var(--ark-gold-glow); outline-offset: -4px; } /* Sin JavaScript: cada historia muestra todas sus acciones. */ html:not(.ark-stories-on) .ark-story { transform: none; height: auto; min-height: calc(var(--ark-sw) / .6); } html:not(.ark-stories-on) .ark-story :is(.ark-story__body, .ark-story__top) { opacity: 1; visibility: visible; } html:not(.ark-stories-on) .ark-story :is(.ark-story__cover, .ark-story__tap, .ark-story__bars, .ark-story__pause) { display: none; } html:not(.ark-stories-on) .ark-story__slide { grid-area: auto; opacity: 1; visibility: visible; transform: none; margin-bottom: 12px; } @media (max-width: 900px) and (min-width: 768px) { .ark-navidad .e-con.ark-stories__inner { --ark-shead: 0px; --ark-scol: 0px; --ark-sw: min(calc((var(--ark-scw) - 3 * var(--ark-sgap)) / 3.4), calc((100svh - var(--ark-header-h) - 300px) * .6), 300px); flex-direction: column; align-items: stretch; justify-content: center; gap: 28px; } .ark-navidad .e-con.ark-stories__head { flex: none; max-width: 600px; } } /* Celular: una historia a la vez, se desliza de lado a lado; la vecina se asoma. La historia ocupa el alto que queda libre entre el título y la barra inferior (unidades de contenedor). */ @media (max-width: 767px) { .ark-navidad .e-con.ark-stories__inner { --ark-sgap: 12px; height: 100vh; height: 100svh; min-height: 600px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 18px; padding: calc(var(--ark-header-h) + 16px) 0 116px; } .ark-navidad .e-con.ark-stories__head { flex: none; max-width: none; padding: 0 var(--ark-gutter); } .ark-navidad .ark-stories__head > .elementor-widget-html:first-child { padding-bottom: 6px; } .ark-navidad .ark-stories__title, .ark-navidad .ark-stories__title .elementor-heading-title { font-size: 1.75rem; } .ark-navidad .ark-stories__lead { padding-top: 8px; font-size: .9375rem; line-height: 1.4; } .ark-navidad .ark-stories__note { padding-top: 6px; } .ark-navidad .ark-stories__roww { flex: 1 1 0; min-height: 0; width: 100%; display: flex; } .ark-stories__row { flex: 1; height: 100%; container-type: size; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 10vw; overscroll-behavior-x: contain; } .ark-stories__row::-webkit-scrollbar { display: none; } .ark-story { --ark-sh: min(100cqh, calc(80vw / .6)); --ark-sw: min(80vw, calc(var(--ark-sh) * .74)); height: var(--ark-sh); scroll-snap-align: center; transform: scale(.94); } .ark-story__verb { font-size: 1.6rem; } } @media (min-width: 901px) and (max-width: 1100px) { .ark-navidad .e-con.ark-stories__inner { --ark-shead: 220px; --ark-scol: 28px; } .ark-story__mission { letter-spacing: .08em; font-size: .6875rem; } } @media (min-width: 901px) and (max-height: 700px) { .ark-navidad .e-con.ark-stories__inner { padding-top: calc(var(--ark-header-h) + 16px); padding-bottom: 20px; } .ark-story__body { left: 14px; right: 14px; bottom: 14px; } .ark-story__mission { margin-bottom: 6px; } .ark-navidad a.ark-story__cta { margin-top: 10px; min-height: 38px; padding: 8px 14px; font-size: .8125rem; } } /* ---------- Agenda: calendario de papel (versión B) ---------- */ .ark-navidad .ark-cal__paperw { justify-self: end; width: min(100%, calc((100svh - 230px) * 1.12)) !important; } .ark-paper { position: relative; padding: clamp(22px, 3.4vh, 34px) clamp(22px, 2.6vw, 34px) clamp(16px, 2.4vh, 24px); background: #FBF4E4; color: var(--ark-bg); border-radius: 3px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); perspective: 1200px; } .ark-paper::before { content: ""; position: absolute; left: 12px; right: 12px; top: -12px; height: 22px; background: radial-gradient(circle at 50% 45%, #b9a27a 0 4px, transparent 5px) 0 0 / 40px 22px repeat-x; } .ark-paper__nav { position: absolute; top: clamp(18px, 3vh, 28px); left: clamp(18px, 2.4vw, 30px); right: clamp(18px, 2.4vw, 30px); display: flex; justify-content: space-between; z-index: 2; pointer-events: none; } .ark-paper__nav button { width: 34px; height: 34px; border: 1px solid rgba(132, 45, 45, .4); border-radius: 50%; background: none; color: var(--ark-burgundy); font-size: 1rem; cursor: pointer; pointer-events: auto; } .ark-paper__nav button:disabled { opacity: .25; cursor: default; } .ark-paper__page { display: none; transform-origin: 50% 0; } .ark-paper__page.is-on { display: block; } .ark-paper__page.is-flip { animation: ark-paper-flip 700ms cubic-bezier(.4, 0, .2, 1); } @keyframes ark-paper-flip { 0% { transform: rotateX(-80deg); opacity: .2; } 100% { transform: none; opacity: 1; } } .ark-paper__month { margin: 4px 0 clamp(10px, 2vh, 18px); text-align: center; font-size: .875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ark-burgundy); } .ark-paper__dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; text-align: center; font-size: .625rem; font-weight: 600; letter-spacing: .12em; color: rgba(58, 5, 16, .5); } .ark-paper__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .ark-pday { position: relative; display: grid; place-items: center; height: clamp(34px, 6.2vh, 54px); border: 0; background: none; font: 300 clamp(.9375rem, 1.2vw, 1.0625rem) var(--ark-font); color: rgba(58, 5, 16, .75); } .ark-pday.is-event { cursor: pointer; color: var(--ark-bg); font-weight: 600; } .ark-pday.is-event::before { content: ""; position: absolute; width: clamp(30px, 5.4vh, 44px); aspect-ratio: 1; border: 1.5px solid var(--ark-gold-light); border-radius: 50%; transform: rotate(-8deg) scale(1.06); transition: background-color var(--ark-t-micro), border-color var(--ark-t-micro); } .ark-pday.is-event::after { content: "✦"; position: absolute; top: 2px; right: 22%; font-size: .625rem; color: var(--ark-gold); } .ark-pday.is-event span { position: relative; z-index: 1; } .ark-pday.is-event:hover, .ark-pday.is-event[aria-pressed="true"] { color: #fff; } .ark-pday.is-event:hover::before, .ark-pday.is-event[aria-pressed="true"]::before { background: var(--ark-burgundy); border-color: var(--ark-burgundy); } .ark-pday.is-range { cursor: pointer; background: linear-gradient(transparent 28%, rgba(209, 171, 100, .24) 28% 72%, transparent 72%); } .ark-pday.is-range-start { background: linear-gradient(transparent 28%, rgba(209, 171, 100, .24) 28% 72%, transparent 72%) right / 50% 100% no-repeat; } .ark-pday.is-range-end { background-position: left; background-size: 50% 100%; background-repeat: no-repeat; } .ark-pday.is-range:not(.is-event):is(:hover, [aria-pressed="true"]) { color: var(--ark-burgundy); font-weight: 600; } .ark-paper__note { margin: clamp(8px, 1.6vh, 14px) 0 0; font-size: .75rem; color: rgba(58, 5, 16, .55); } /* Sin JS: los dos meses visibles, uno debajo del otro. */ html:not(.ark-paper-on) .ark-paper__page { display: block; } html:not(.ark-paper-on) .ark-paper__page + .ark-paper__page { margin-top: 24px; } html:not(.ark-paper-on) .ark-paper__nav { display: none; } @media (max-width: 900px) { .ark-navidad .ark-cal__paperw { justify-self: stretch; width: 100% !important; } } /* ---------- Desayunos: vapor, chispas y tarjeta "Reservado" ---------- */ .ark-des__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .ark-des__card { position: absolute; left: var(--cx, 70%); top: var(--cy, 80%); z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 10px 18px 9px; background: #FBF4E4; color: var(--ark-bg); border-radius: 2px; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(209, 171, 100, .7), inset 0 0 0 4px #FBF4E4, inset 0 0 0 5px rgba(209, 171, 100, .7); transform-origin: 50% 100%; transform: translate(-50%, -100%) perspective(500px) rotateX(80deg); opacity: 0; transition: transform 700ms cubic-bezier(.3, 1.3, .4, 1), opacity 300ms var(--ark-ease); pointer-events: none; } .ark-des__card span { font-size: 1.25rem; font-weight: 600; line-height: 1.1; letter-spacing: .01em; color: var(--ark-burgundy); } .ark-des__card small { margin-top: 2px; font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ark-gold); } .ark-des.is-reserving .ark-des__card { opacity: 1; transform: translate(-50%, -100%) perspective(500px) rotateX(0); } /* ---------- Fábrica de Peluches: taller paso a paso ---------- Lista de pasos con dibujo de línea dorada; el paso activo se abre y se ilumina. El recorrido avanza con el scroll (JS) y también al tocar. Sin JS o con movimiento reducido: todos los pasos abiertos. */ .ark-taller { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: paso; } .ark-taller__paso { position: relative; } .ark-taller__paso::before { content: ""; position: absolute; left: 27px; top: 54px; bottom: -6px; width: 1px; background: linear-gradient(rgba(242, 210, 143, .45), rgba(242, 210, 143, .12)); } .ark-taller__paso:last-child::before { display: none; } .ark-taller__btn { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 14px; width: 100%; padding: 8px 10px 8px 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; border-radius: 4px; transition: background-color var(--ark-t-micro); } .ark-taller__btn:hover { background: rgba(242, 210, 143, .05); } .ark-taller__icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(242, 210, 143, .35); background: rgba(34, 2, 9, .6); color: rgba(242, 210, 143, .55); transition: color 500ms var(--ark-ease), border-color 500ms var(--ark-ease), box-shadow 600ms var(--ark-ease), transform 500ms var(--ark-ease); } .ark-taller__icon svg { width: 40px; height: 40px; } .ark-taller__txt { display: flex; flex-direction: column; gap: 2px; } .ark-taller__txt b { font-size: 1rem; font-weight: 500; color: rgba(255, 255, 255, .78); transition: color 400ms var(--ark-ease); } .ark-taller__txt small { display: block; max-height: 0; overflow: hidden; font-size: .875rem; font-weight: 300; line-height: 1.45; color: rgba(255, 255, 255, .72); opacity: 0; transition: max-height 500ms var(--ark-ease), opacity 400ms var(--ark-ease) 100ms; } .ark-taller__paso.is-on .ark-taller__icon { color: var(--ark-gold-glow); border-color: var(--ark-gold-glow); box-shadow: 0 0 0 4px rgba(242, 210, 143, .08), 0 0 28px -4px rgba(242, 210, 143, .6); transform: scale(1.06); } .ark-taller__paso.is-on .ark-taller__txt b { color: var(--ark-white); } .ark-taller__paso.is-on .ark-taller__txt small { max-height: 60px; opacity: 1; } .ark-taller__paso.is-done .ark-taller__icon { color: var(--ark-gold-light); border-color: rgba(242, 210, 143, .6); } /* Dibujos: el cuerpo del conejo se "llena" (trazo punteado que aparece), el corazón late. */ .ark-fab__fill { opacity: 0; transition: opacity 600ms var(--ark-ease) 200ms; } .is-on .ark-fab__fill, .is-done .ark-fab__fill { opacity: 1; } .ark-fab__heart { transform-origin: 60px 84px; transform: scale(0); transition: transform 500ms cubic-bezier(.3, 1.4, .5, 1); } .is-on .ark-fab__heart, .is-done .ark-fab__heart { transform: scale(1); } .is-on .ark-fab__heart { animation: ark-latido 1.3s ease-in-out infinite; } @keyframes ark-latido { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.18); } 28% { transform: scale(1); } 42% { transform: scale(1.12); } } .ark-fab__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; z-index: 2; } /* Certificado de adopción: tarjeta crema que aparece al llegar al último paso; el nombre se escribe solo. */ .ark-cert { position: relative; margin: 18px 0 0 70px; max-width: 360px; padding: 16px 20px 14px; background: #FBF4E4; color: var(--ark-bg); border-radius: 2px; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(209, 171, 100, .7), inset 0 0 0 4px #FBF4E4, inset 0 0 0 5px rgba(209, 171, 100, .7); transform-origin: 20% 0; transform: perspective(600px) rotateX(-70deg); opacity: 0; transition: transform 800ms cubic-bezier(.3, 1.2, .4, 1), opacity 400ms var(--ark-ease); } .ark-cert.is-on { transform: none; opacity: 1; } .ark-cert__h { margin: 0; font-size: .625rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ark-bronze); } .ark-cert__name { margin: 6px 0 2px; min-height: 1.1em; font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: .01em; color: var(--ark-burgundy); } .ark-cert__name span::after { content: ""; display: inline-block; width: 2px; height: .8em; margin-left: 2px; vertical-align: -.05em; background: var(--ark-gold); animation: ark-caret 900ms steps(2) infinite; } .ark-cert.is-written .ark-cert__name span::after { display: none; } .ark-cert__txt { margin: 0; font-size: .8125rem; line-height: 1.45; color: rgba(58, 5, 16, .8); } .ark-cert__sello { margin: 10px 0 0; font-size: .5625rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ark-gold); } html:not(.ark-js) .ark-taller__txt small, .ark-no-anim .ark-taller__txt small { max-height: none; opacity: 1; } html:not(.ark-js) .ark-cert { transform: none; opacity: 1; } @media (max-width: 600px) { .ark-cert { margin-left: 0; } .ark-taller__btn { grid-template-columns: 48px 1fr; } .ark-taller__icon { width: 48px; height: 48px; } .ark-taller__icon svg { width: 34px; height: 34px; } .ark-taller__paso::before { left: 23px; top: 50px; } } /* ---------- Market navideño: vitrina de puestos ---------- Fila de puestos (toldo rojo con festón, bombillo colgando de un cable y letrero). Los bombillos se encienden uno a uno al entrar (JS pone is-lit con retardo --i); el puesto activo brilla y muestra su frase. */ .ark-vitrina { position: relative; margin: 20px 0 0; padding-top: 18px; } .ark-vitrina__cable { position: absolute; left: 0; right: 0; top: 10px; height: 14px; border-top: 1.5px solid rgba(242, 210, 143, .45); border-radius: 50% 50% 0 0 / 100% 100% 0 0; } .ark-vitrina__fila { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 12px; } /* 0.6.5: cuatro categorías (Arkadia, 30-oct), una fila en escritorio y 2×2 en celular */ .ark-puesto__btn { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } .ark-puesto__bulb { position: relative; width: 12px; height: 17px; margin: -2px 0 2px; border-radius: 5px 5px 6px 6px; background: rgba(242, 210, 143, .18); box-shadow: 0 0 0 rgba(242, 210, 143, 0); transition: background-color 500ms var(--ark-ease), box-shadow 700ms var(--ark-ease); } .ark-puesto__bulb::before { content: ""; position: absolute; left: 3px; top: -5px; width: 4px; height: 5px; background: rgba(242, 210, 143, .45); } .ark-puesto.is-lit .ark-puesto__bulb { background: #FFF1C9; box-shadow: 0 0 10px 3px rgba(255, 236, 190, .7), 0 0 26px 8px rgba(242, 210, 143, .35); } .ark-puesto__toldo { position: relative; display: flex; width: 100%; height: 30px; background: linear-gradient(180deg, var(--ark-red), var(--ark-burgundy)); border-radius: 3px 3px 0 0; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); transition: filter 400ms var(--ark-ease); } .ark-puesto__toldo i { flex: 1; height: 100%; position: relative; } .ark-puesto__toldo i::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 10px; background: var(--ark-burgundy); clip-path: ellipse(50% 70% at 50% 30%); } .ark-puesto__toldo i:nth-child(even)::after, .ark-puesto__toldo i:nth-child(even) { background: #F6EBD6; } .ark-puesto__toldo i:nth-child(even) { background: rgba(246, 235, 214, .9); } .ark-puesto__sign { display: block; width: 100%; margin-top: 14px; padding: 12px 6px 11px; background: rgba(34, 2, 9, .7); border: 1px solid rgba(242, 210, 143, .35); border-top: 0; font-size: .9375rem; font-weight: 600; letter-spacing: .04em; color: var(--ark-gold-glow); text-align: center; transition: background-color 400ms var(--ark-ease), border-color 400ms var(--ark-ease); } .ark-puesto__frase { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 6px 4px 0; font-size: .8125rem; font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, .8); text-align: center; opacity: 0; transform: translateY(-4px); transition: opacity 350ms var(--ark-ease), transform 350ms var(--ark-ease); pointer-events: none; } .ark-puesto.is-open .ark-puesto__frase { opacity: 1; transform: none; } .ark-puesto { position: relative; padding-bottom: 34px; } .ark-puesto.is-open .ark-puesto__sign { background: rgba(242, 210, 143, .14); border-color: var(--ark-gold-glow); } .ark-puesto.is-open .ark-puesto__bulb { background: #FFFFFF; box-shadow: 0 0 14px 5px rgba(255, 240, 200, .85), 0 0 40px 14px rgba(242, 210, 143, .45); } .ark-puesto__btn:focus-visible { outline: 2px solid var(--ark-gold-glow); outline-offset: 4px; } html:not(.ark-js) .ark-puesto__frase { position: static; opacity: 1; transform: none; } html:not(.ark-js) .ark-puesto__bulb { background: #FFF1C9; } @media (max-width: 600px) { .ark-vitrina__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ark-puesto { padding-bottom: 48px; } /* la frase ocupa dos líneas y no debe tocar la fila de abajo */ } /* ---------- Formulario de Desayunos dentro de la landing ---------- */ .ark-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; } .ark-modal[hidden] { display: none; } .ark-modal__veil { position: absolute; inset: 0; background: rgba(18, 1, 5, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ark-modal__box { position: relative; display: flex; flex-direction: column; width: min(960px, 100%); height: min(92vh, 92svh); background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 210, 143, .35); animation: ark-modal-in 400ms var(--ark-ease-in); } @keyframes ark-modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } } .ark-modal__bar { display: flex; align-items: center; gap: 16px; padding: 0 8px 0 18px; height: 52px; background: var(--ark-bg-deep); color: var(--ark-white); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .ark-modal__bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ark-modal__ext { font-size: .75rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ark-gold-light); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .ark-modal__close { position: relative; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ark-white); cursor: pointer; } .ark-modal__close::before, .ark-modal__close::after { content: ""; position: absolute; left: 12px; top: 19px; width: 16px; height: 1.5px; background: currentColor; transform: rotate(45deg); } .ark-modal__close::after { transform: rotate(-45deg); } .ark-modal__close:hover { background: rgba(242, 210, 143, .2); } .ark-modal__frame { flex: 1; width: 100%; border: 0; background: #fff; } html.ark-modal-open, html.ark-modal-open body { overflow: hidden; } @media (max-width: 600px) { .ark-modal { padding: 0; } .ark-modal__box { height: 100%; border-radius: 0; } .ark-modal__ext { display: none; } } /* ---------- Movimiento reducido ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ark-navidad *, .ark-navidad *::before, .ark-navidad *::after { animation: none !important; transition-duration: 1ms !important; } .ark-js .ark-anim .ark-reveal { opacity: 1; transform: none; } .ark-dust, .ark-cursor-fx, .ark-bokeh, .ark-cursor, .ark-des__fx { display: none; } .ark-w { opacity: 1 !important; } .ark-cap { --k: 1 !important; } .ark-tilt { transform: none !important; } } /* ---------- 0.6.8 · Revisión en celular (usuario, 30-oct) ---------- Menos aire entre secciones (en celular ya no ocupan una pantalla completa: el alto lo da el contenido), la Fábrica con el escenario bajo el header y a la altura real del teléfono (dvh), historias altas y legibles con la foto activa como ambiente, la agenda con el detalle debajo de las fechas, y Desayunos y el cierre con la foto y el texto a la vista a la vez. */ .ark-navidad .ark-stories__ambw { display: none; position: absolute !important; inset: 0; z-index: 0; margin: 0; width: 100% !important; max-width: none !important; } .ark-stories__amb { position: absolute; inset: 0; overflow: hidden; } .ark-navidad .ark-stories__amb img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 35%; filter: blur(30px) saturate(1.1) brightness(.5); transform: scale(1.25); opacity: 0; transition: opacity 1400ms var(--ark-ease); } .ark-navidad .ark-stories__amb img.is-on { opacity: .5; } .ark-stories__amb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ark-bg-deep) 0%, rgba(18, 1, 5, .25) 22%, rgba(18, 1, 5, .3) 78%, var(--ark-bg-deep) 100%); } @media (max-width: 900px) { /* Secciones sin alto mínimo de pantalla. */ .ark-navidad .e-con.ark-car__stage { min-height: 0; justify-content: flex-start; padding: 36px 0 44px; } .ark-navidad .e-con.ark-carta { min-height: 0; padding: 72px 0 80px; } .ark-navidad .e-con.ark-des__stage { min-height: 0; padding-bottom: 40px; } .ark-navidad .ark-bleedw.ark-des__photosw { height: 48vh; height: 48svh; } .ark-navidad .e-con.ark-des__body { padding-top: 40vh; padding-top: 40svh; } .ark-navidad .e-con.ark-mkt__stage { padding-bottom: 40px; } .ark-navidad .e-con.ark-cal { min-height: 0; padding: 40px 0 48px; } .ark-navidad .e-con.ark-vis { min-height: 0; padding: 40px 0 56px; } html.ark-chap-on .ark-navidad .e-con.ark-chap__stage { height: 232vh; height: 232svh; } /* Agenda: etiqueta, título, calendario y debajo el detalle del día tocado. */ .ark-navidad .e-con.ark-cal__inner { row-gap: 0; } .ark-navidad .e-con.ark-cal__head { display: contents; } .ark-navidad .ark-cal__paperw { order: 1; margin-top: 4px; } .ark-navidad .ark-cal__head > .elementor-widget:last-child { order: 2; margin-top: 18px; } .ark-navidad .ark-cal__title { padding-bottom: 16px; } /* Fábrica: el escenario empieza bajo el header (la foto no queda tapada) y mide lo que se ve de verdad. */ html.ark-fab-pin .ark-navidad .e-con.ark-fab { height: 240vh; height: 240svh; } html.ark-fab-pin .ark-navidad .e-con.ark-fab__stage { top: var(--ark-header-h); height: calc(100vh - var(--ark-header-h)); height: calc(100dvh - var(--ark-header-h)); } .ark-navidad .ark-fab__bgw, .ark-fab__fx { height: 34vh; height: 34svh; } .ark-navidad .e-con:is(.ark-fab__body, .ark-mkt__copy).ark-fab__body { margin-top: 27vh; margin-top: 27svh; } .ark-navidad .e-con.ark-fab__stage { padding-bottom: 92px; } .ark-navidad .ark-stories__ambw { display: block; } } @media (max-width: 900px) and (max-height: 780px) { .ark-navidad .ark-fab__bgw, .ark-fab__fx { height: 28vh; height: 28svh; } .ark-navidad .e-con:is(.ark-fab__body, .ark-mkt__copy).ark-fab__body { margin-top: 21vh; margin-top: 21svh; } } @media (max-width: 767px) { /* Historias: altas (82 % del ancho, proporción 3:5), una a la vez, con letra grande y velo firme abajo. */ .ark-navidad .e-con.ark-stories__inner { position: relative; z-index: 1; height: auto; min-height: 0; gap: 14px; padding: calc(var(--ark-header-h) + 10px) 0 44px; } .ark-navidad .ark-stories__title, .ark-navidad .ark-stories__title .elementor-heading-title { font-size: 1.5rem; } .ark-navidad .ark-stories__lead { padding-top: 6px; font-size: .9375rem; } .ark-stories__redes { margin-top: 14px; } .ark-navidad .ark-stories__roww { flex: none; display: block; min-height: 0; } .ark-stories__row { height: auto; container-type: normal; padding: 6px 9vw 12px; } .ark-story { --ark-sw: 82vw; --ark-sh: calc(82vw / .6); width: var(--ark-sw); height: var(--ark-sh); transform: scale(.96); } html:not(.ark-stories-on) .ark-story { min-height: var(--ark-sh); } .ark-story__media::after { background: linear-gradient(180deg, rgba(14, 0, 4, .6) 0%, rgba(14, 0, 4, 0) 18%, rgba(14, 0, 4, 0) 34%, rgba(14, 0, 4, .82) 60%, rgba(14, 0, 4, .97) 100%); } .ark-story__body { left: 16px; right: 16px; bottom: 22px; } .ark-story__mission { margin-bottom: 10px; font-size: .8125rem; } .ark-navidad .ark-story__slide h3 { font-size: 1.6rem; line-height: 1.1; } .ark-story__slide p { font-size: 1.0625rem; line-height: 1.42; } .ark-navidad a.ark-story__cta { min-height: 46px; padding: 12px 20px; font-size: .9375rem; } .ark-story__verb { font-size: 1.85rem; } .ark-story__top { font-size: .9375rem; } /* Cierre: la foto arriba (Santa y el niño enteros, recorte 840×900) y el texto debajo. */ .ark-navidad .e-con.ark-fin { min-height: 0; justify-content: flex-start; padding: calc(min(107vw, 58svh) - 24px) 0 56px; } .ark-navidad .ark-fin__framew { bottom: auto; height: min(107vw, 58svh); } .ark-fin__frame { clip-path: none !important; -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 68%, transparent 100%); } .ark-navidad .ark-fin__frame img { object-position: 50% 0; } .ark-fin__frame::after { background: linear-gradient(180deg, rgba(18, 1, 5, .4) 0%, rgba(18, 1, 5, 0) 22%); } }