@charset "UTF-8"; /*! * Hyundai UI v2 — Master stylesheet * Build: Dart Sass + PostCSS (autoprefixer) * * Orden de importación (de menor a mayor especificidad/CSS cascade): * 01) Settings → design tokens * 02) Tools → mixins, funciones * 03) Generic → reset/normalizaciones * 04) Base → tipografía, elementos (h1…h6, p, a, lists) * 05) Layout → contenedores, helpers de grilla * 06) Components → piezas reutilizables (agrupadas por tipo) * 07) Pages → estilos específicos de página (mínimos) * 08) Utilities → helpers atómicos (si sobreescriben, van al final) * * Notas: * - Mantener esta estructura ayuda a ubicar rápido cada pieza y a evitar * cascadas inesperadas. * - Cuando archive/parks componentes, sacarlos de aquí para que no entren * al bundle. AUDITORIA CON RIPGREP # Buscar clases “raíz” de componentes en las vistas rg -n --glob '!sass/**' --glob '!node_modules/**' \ -e 'ui-hero|hero--cover|model-subnav|sec-heading|cta-slab|media-duo|breadcrumb' \ protected/ themes/ views/ # Verificar si algo del _archive de componentes todavía aparece rg -n --glob '!sass/**' --glob '!node_modules/**' \ -e 'overlap-grid|link-cards|media-block|tabs' \ protected/ themes/ views/ */ /*! * @component tokens * @title Design Tokens (UI v2) * @since 2.0 * @status stable * @description * Variables globales en CSS Custom Properties (espaciados, radios, z-index, * colores de marca/semánticos, tipografías y breakpoints). Estas variables son * la fuente de verdad para todos los componentes UI v2. * * @cssvars * --ui-space-1..12 Espaciados escala 4/8 * --ui-radius-0..4 Radios por defecto * --ui-z-* Capas comunes (header, overlay, modal) * --ui-color-* Paleta (texto, fondos, bordes, info/success/warn/error) * --ui-bp-sm/md/lg/xl Breakpoints de referencia * * @notes * - No sobrescribir aquí para páginas concretas. Hacerlo en la hoja de página o el componente. */.ui-v2{--ui-color-primary:#002c5f;--ui-color-accent:#00aad2;--ui-color-text:#111;--ui-color-bg:#fff;--ui-color-muted:#f5f7f9;--ui-radius-2:8px;--ui-radius-3:12px;--ui-space-2:8px;--ui-space-4:16px;--ui-space-6:24px;--ui-space-8:32px;--ui-space-10:40px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /*! * @component reset * @title Reset & Normalización (UI v2) * @since 2.0 * @status stable * @description * Reset de márgenes, box-sizing, inputs y elementos HTML nativos para partir * de una base homogénea. */.ui-v2,.ui-v2 *{box-sizing:border-box}.ui-v2 img{display:block;height:auto;max-width:100%}.ui-v2 h1,.ui-v2 h2,.ui-v2 h3{line-height:1.2;margin:0 0 .5em}.ui-v2 p{margin:0 0 1em}.ui-v2 :where(h1,h2,h3,h4,h5,h6){text-align:inherit} /*! * @component typography * @title Tipografía (UI v2) * @since 2.0 * @status stable * @description * Reglas base tipográficas (familias Hyundai Head/Hyundai Text con fallbacks), * escalas fluidas, pesos y utilidades de título/subtítulo/parrafo. * * @requires tokens * @classes * .font-head-medium, .font-head-regular * .font-text-regular * @notes * - Asegurar que las @font-face existan en /font y que las rutas sean relativas al CSS final. */@font-face{font-display:swap;font-family:Hyundai Head;font-style:normal;font-weight:400;src:local("Hyundai Sans Head Regular"),local("HyundaiSansHead-Regular"),url(../../css/fonts/hyundai/HyundaiSansHead-Regular.woff2) format("woff2"),url(../../css/fonts/hyundai/HyundaiSansHead-Regular.woff) format("woff")}@font-face{font-display:swap;font-family:Hyundai Head;font-style:normal;font-weight:500;src:local("Hyundai Sans Head Medium"),local("HyundaiSansHead-Medium"),url(../../css/fonts/hyundai/HyundaiSansHead-Medium.woff2) format("woff2"),url(../../css/fonts/hyundai/HyundaiSansHead-Medium.woff) format("woff")}@font-face{font-display:swap;font-family:Hyundai Head;font-style:normal;font-weight:700;src:local("Hyundai Sans Head Bold"),local("HyundaiSansHead-Bold"),url(../../css/fonts/hyundai/HyundaiSansHead-Bold.woff2) format("woff2"),url(../../css/fonts/hyundai/HyundaiSansHead-Bold.woff) format("woff")}@font-face{font-display:swap;font-family:Hyundai Text;font-style:normal;font-weight:400;src:local("Hyundai Sans Text Regular"),local("HyundaiSansText-Regular"),url(../../css/fonts/hyundai/HyundaiSansText-Regular.woff2) format("woff2"),url(../../css/fonts/hyundai/HyundaiSansText-Regular.woff) format("woff")}.ui-v2{--font-text:"Hyundai Text",-apple-system,system-ui,"Segoe UI",Roboto,Arial,sans-serif;--font-head:"Hyundai Head",-apple-system,system-ui,"Segoe UI",Roboto,Arial,sans-serif;--font-head-medium:"Hyundai Head",-apple-system,system-ui,"Segoe UI",Roboto,Arial,sans-serif;--fs-body:16px;--lh-body:1.55;--lh-head:1.2;background:var(--sf-color-bg);color:var(--sf-color-text);font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-body)}.ui-v2 h1,.ui-v2 h2,.ui-v2 h3,.ui-v2 h4{font-family:var(--font-head);letter-spacing:.2px;line-height:var(--lh-head);margin:0 0 .5em}.ui-v2 h1{font-size:clamp(28px,5vw,52px);font-weight:700}.ui-v2 h2{font-size:clamp(22px,3.5vw,36px);font-weight:600}.ui-v2 h3{font-size:clamp(18px,2.8vw,28px);font-weight:600}.ui-v2 h4{font-size:clamp(16px,2.2vw,22px);font-weight:500}.ui-v2 .font-head-medium{font-family:Hyundai Head!important;font-synthesis-weight:none;font-weight:500!important}.ui-v2 .font-head-bold{font-family:Hyundai Head!important;font-synthesis-weight:none;font-weight:700!important}.ui-v2 :focus-visible{outline:2px solid var(--sf-color-accent);outline-offset:2px} /*! * @component utilities * @title Utilidades (helpers) * @since 2.0 * @status stable * @description * Clases de ayuda: espaciados, alineaciones, visibilidades y z-index. * * @notes * - Usar con moderación. Si un patrón se repite, convertirlo en componente. */.ui-v2 .u-hidden{display:none!important}.ui-v2 .u-center{align-items:center;display:flex;justify-content:center}.ui-v2 .u-text-center{text-align:center}.ui-v2 .u-mt-6{margin-top:var(--ui-space-6)}.ui-v2 .img-fluid{display:block;height:auto;width:100%}.ui-v2 .is-fullbleed{inline-size:100vw;left:auto;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-inline-size:100vw;padding-inline:0;position:relative;right:auto}@supports (width:100dvw){.ui-v2 .is-fullbleed{inline-size:100dvw;margin-left:calc(50% - 50dvw);margin-right:calc(50% - 50dvw);max-inline-size:100dvw}} /*! * @component layout * @title Layout & Container * @since 2.0 * @status stable * @description * Contenedor responsivo (.ui-container), límites de contenido y helpers de * ancho máximo. Base para la grilla de los componentes. * * @cssvars * --ui-container-max Ancho máximo del contenido */.ui-v2{--page-bottom:clamp(64px,8vw,120px);padding-bottom:var(--page-bottom)}@media (max-width:991.98px){.ui-v2{--page-bottom:clamp(48px,10vw,80px)}}.ui-v2 .ui-container{margin-inline:auto;width:min(1180px,100% - 32px)}.ui-v2 .ui-grid{display:grid;gap:var(--ui-space-6)} /*! @name: Breadcrumbs @id: ui-breadcrumb @category: navigation @status: ready @variants: default @notes: - Barra de breadcrumbs para indicar jerarquía de navegación. - Usa `
    ` con `itemscope` / `itemtype="https://schema.org/BreadcrumbList"` para SEO. - El ítem actual se marca con `.is-current` y `aria-current="page"`. - Knobs disponibles (CSS vars): --ui-bc-link, --ui-bc-current, --ui-bc-separator, --ui-bc-border. - Soporta scroll horizontal en mobile (overflow-x:auto). @markup: @end */.ui-v2{--ui-bc-current:rgba(0,0,0,.7);--ui-bc-separator:rgba(0,0,0,.35);--ui-bc-border:rgba(0,0,0,.08)}.ui-v2 .ui-breadcrumb-bar{background:#fff;border-bottom:1px solid var(--ui-bc-border)}.ui-v2 .ui-breadcrumb{align-items:center;display:flex;gap:8px;list-style:none;margin:0;overflow-x:auto;padding:15px 0;-webkit-overflow-scrolling:touch;color:var(--ui-bc-current);font-size:14px;line-height:1.4;white-space:nowrap}.ui-v2 .ui-breadcrumb__item{align-items:center;display:inline-flex}.ui-v2 .ui-breadcrumb__item+.ui-breadcrumb__item:before{color:var(--ui-bc-separator);content:"/";margin:0 8px}.ui-v2 .ui-breadcrumb a{color:var(--ui-bc-link);font-weight:600;text-decoration:none}.ui-v2 .ui-breadcrumb a:focus,.ui-v2 .ui-breadcrumb a:hover{text-decoration:underline}.ui-v2 .ui-breadcrumb__item.is-current>span{color:var(--ui-bc-current);font-weight:400} /*! @name: Model Subnav @id: model-subnav @category: navigation @status: ready @notes: Barra de navegación por secciones del modelo. Sticky por JS: agregar/quitar `.is-stuck` en el wrapper cuando cruza el offset del header. Altura del header via `--ui-header-h-mobile` y `--ui-header-h-desktop`. La sombra aparece sólo con `.is-stuck`. @markup: @end */.ui-v2{--ui-ms-text:rgba(0,0,0,.85);--ui-bc-link:#00aad2;--ui-ms-hover:#0089a8;--ui-sticky-offset:64px;--ui-header-z:1000}.ui-v2 .ui-model-subnav{background:#fff;border-bottom:0;box-shadow:none}.ui-v2 .model-subnav__inner{align-items:center;display:flex;gap:clamp(16px,2vw,28px);overflow:hidden;padding:12px 0 14px}.ui-v2 .model-subnav__label{color:var(--ui-ms-text);font-family:var(--font-head);font-weight:800;letter-spacing:.2px;margin-right:clamp(8px,2vw,20px);text-transform:uppercase;white-space:nowrap}.ui-v2 .model-subnav__list{align-items:center;display:flex;gap:clamp(18px,3vw,36px);list-style:none;margin:0;overflow-x:auto;padding:0;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.ui-v2 .model-subnav__link{color:var(--ui-ms-text);display:inline-block;font-weight:600;padding:4px 0 8px;position:relative;text-decoration:none;white-space:nowrap}.ui-v2 .model-subnav__link:hover{color:var(--ui-bc-link)}.ui-v2 .model-subnav__link:focus-visible{outline:2px solid var(--ui-bc-link);outline-offset:2px}.ui-v2 .model-subnav__link.is-active{color:var(--ui-bc-link)}.ui-v2 .model-subnav__link.is-active:after{background:var(--ui-bc-link);border-radius:3px 3px 0 0;bottom:0;content:"";height:3px;left:0;position:absolute;right:0}.ui-v2 .model-subnav__link.is-disabled{color:rgba(0,0,0,.35);cursor:not-allowed;pointer-events:none}.ui-v2 .ui-model-subnav.is-sticky{border-bottom:0;box-shadow:none;position:sticky;top:var(--ui-sticky-offset,64px);transition:box-shadow .15s ease;z-index:calc(var(--ui-header-z, 1000) - 1)}.ui-v2 .ui-model-subnav.is-sticky.is-stuck{box-shadow:0 8px 18px rgba(0,0,0,.06)}.ui-v2 .ui-model-subnav-sentinel{height:1px;pointer-events:none}.ui-v2 .page-model,.ui-v2 main{overflow:visible} /*! @name: Button @id: button @category: controls @status: ready @variants: primary, secondary, ghost, link, outline-fill @notes: - El botón `ui-btn--primary` tiene un overlay deslizante (izq→der) con color `#003c78`. Durante el hover el texto se oculta, aparece un overlay azul y en el centro se anima una flecha SVG blanca. - El botón `ui-btn--outline-fill` se comporta igual que el primary, pero parte de un estilo “outline” (borde y texto azul). En hover, el borde se llena de azul, el texto desaparece y aparece la flecha blanca. - Ambas variantes usan `--btn-slide-dur` para controlar la velocidad de la animación (default: .55s). Reducir ese valor acelera el slide + flecha de forma sincronizada. - El resto de variantes (`secondary`, `ghost`, `link`) mantienen estilos clásicos sin overlay. @markup: Conocer más Conocer más Conocer más Conocer más Conocer más @end */.ui-v2 .ui-btn{--btn-bg:#0b2a57;--btn-fg:#fff;--btn-bd:transparent;--btn-radius:0px;--btn-pad-y:18px;--btn-pad-x:28px;--btn-min:0;--btn-gap:10px;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--btn-bg);border:1px solid var(--btn-bd);border-radius:var(--btn-radius);color:var(--btn-fg);cursor:pointer;display:inline-flex;font-weight:600;gap:var(--btn-gap);justify-content:center;line-height:1.2;min-inline-size:var(--btn-min);overflow:hidden;padding:var(--btn-pad-y) var(--btn-pad-x);position:relative;text-decoration:none;transition:transform .14s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ui-v2 .ui-btn:focus-visible{box-shadow:0 0 0 3px hsla(0,0%,100%,.9),0 0 0 6px rgba(11,42,87,.55);outline:0}.ui-v2 .ui-btn.is-disabled,.ui-v2 .ui-btn[disabled]{box-shadow:none;cursor:not-allowed;opacity:.55;pointer-events:none}.ui-v2 .ui-btn--primary{--btn-bg:#002c5f;--btn-fg:#fff;--btn-bd:transparent;--btn-slide-bg:#003c78;--btn-slide-dur:.35s;--btn-arrow-w:36px;--btn-arrow-h:14px;--btn-arrow-shift:20px;--btn-arrow-uri:url("data:image/svg+xml;utf8, ")}.ui-v2 .ui-btn--primary:before{background:var(--btn-slide-bg);content:"";inset:0;position:absolute;transform:translateX(-100%);transition:transform var(--btn-slide-dur) ease;z-index:1}.ui-v2 .ui-btn--primary:after{background:var(--btn-arrow-uri) center/contain no-repeat;content:"";height:var(--btn-arrow-h);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) translateX(calc(var(--btn-arrow-shift)*-1));transition:opacity .22s ease,transform .22s ease;width:var(--btn-arrow-w);z-index:2}.ui-v2 .ui-btn--primary:hover{color:transparent}.ui-v2 .ui-btn--primary:hover:before{transform:translateX(0)}.ui-v2 .ui-btn--primary:hover:after{opacity:1;transform:translate(-50%,-50%) translateX(0);transition-delay:calc(var(--btn-slide-dur)*.5),calc(var(--btn-slide-dur)*.5)}.ui-v2 .ui-btn--primary:not(:hover):after{opacity:0;transform:translate(-50%,-50%) translateX(calc(var(--btn-arrow-shift)*-1));transition-delay:0s}.ui-v2 .ui-btn--outline-fill{--btn-of-color:#0b2a57;--btn-of-fill:#003c78;--btn-slide-dur:.35s;--btn-arrow-w:36px;--btn-arrow-h:14px;--btn-arrow-shift:20px;--btn-arrow-uri:url("data:image/svg+xml;utf8, ");background:transparent;border-color:var(--btn-of-color);color:var(--btn-of-color);overflow:hidden;position:relative}.ui-v2 .ui-btn--outline-fill:before{background:var(--btn-of-fill);content:"";inset:0;position:absolute;transform:translateX(-100%);transition:transform var(--btn-slide-dur) ease;z-index:1}.ui-v2 .ui-btn--outline-fill:after{background:var(--btn-arrow-uri) center/contain no-repeat;content:"";height:var(--btn-arrow-h);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) translateX(calc(var(--btn-arrow-shift)*-1));transition:opacity .22s ease,transform .22s ease;width:var(--btn-arrow-w);z-index:2}.ui-v2 .ui-btn--outline-fill:hover{border-color:var(--btn-of-fill);color:transparent}.ui-v2 .ui-btn--outline-fill:hover:before{transform:translateX(0)}.ui-v2 .ui-btn--outline-fill:hover:after{opacity:1;transform:translate(-50%,-50%) translateX(0);transition-delay:calc(var(--btn-slide-dur)*.5),calc(var(--btn-slide-dur)*.5)}.ui-v2 .ui-btn--outline-fill:not(:hover):after{opacity:0;transform:translate(-50%,-50%) translateX(calc(var(--btn-arrow-shift)*-1));transition-delay:0s}.ui-v2 .ui-btn--secondary{--btn-bg:#f2f5f8;--btn-fg:#0b2a57;--btn-bd:#d6dde6}.ui-v2 .ui-btn--ghost{--btn-bg:transparent;--btn-fg:#0b2a57;--btn-bd:#0b2a57}.ui-v2 .ui-btn--link{--btn-bg:transparent;--btn-fg:#0b2a57;--btn-bd:transparent;border-radius:0;box-shadow:none;min-inline-size:0;padding:0;text-decoration:underline}.ui-v2 .ui-btn--link:hover{text-decoration:none;transform:none}.ui-v2 .ui-btn--sm{--btn-pad-y:12px;--btn-pad-x:20px;font-size:.95rem}.ui-v2 .ui-btn--md{--btn-pad-y:16px;--btn-pad-x:26px;font-size:1rem}.ui-v2 .ui-btn--lg{--btn-pad-y:20px;--btn-pad-x:34px;font-size:1.0625rem}.ui-v2 .ui-btn.is-block{display:flex;inline-size:100%;min-inline-size:0}@media (prefers-reduced-motion:reduce){.ui-v2 .ui-btn,.ui-v2 .ui-btn--outline-fill:after,.ui-v2 .ui-btn--primary:after,.ui-v2 .ui-btn--primary:before{transition:none!important}}.ui-v2 .ui-explore-links{--gap:clamp(16px,2vw,28px);--max:960px;--title-mb:clamp(28px,4vw,48px);--label-fs:clamp(17px,1.2vw,20px);--mb-mobile:20px;margin-inline:auto;max-width:var(--max);padding-block:clamp(56px,8vw,120px) 0;text-align:center}.ui-v2 .ui-explore-links__title{font-weight:500;margin:0 0 var(--title-mb)}.ui-v2 .ui-explore-links__grid{align-items:start;display:grid;gap:var(--gap);justify-items:center}.ui-v2 .ui-explore-links__grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-v2 .ui-explore-links__grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.ui-v2 .ui-explore-links__item{align-items:center;color:inherit;cursor:pointer;display:flex;flex-direction:column;gap:clamp(10px,1.6vw,16px);text-decoration:none}.ui-v2 .ui-explore-links__media{overflow:hidden;width:100%}.ui-v2 .ui-explore-links__media img{display:block;height:auto;transition:filter .25s ease,opacity .25s ease;width:100%}.ui-v2 .ui-explore-links__item:hover .ui-explore-links__media img{filter:blur(2px);-webkit-filter:blur(2px);opacity:1}.ui-v2 .ui-explore-links__label{font-size:var(--label-fs);font-weight:700}@media (max-width:767.98px){.ui-v2 .ui-explore-links__grid,.ui-v2 .ui-explore-links__grid[data-cols="2"],.ui-v2 .ui-explore-links__grid[data-cols="3"]{grid-template-columns:1fr;row-gap:0}.ui-v2 .ui-explore-links__item{margin-bottom:var(--mb-mobile)}.ui-v2 .ui-explore-links__item:last-child{margin-bottom:0}} /*! @name: Anchor Links @id: ui-anchor-links @category: navigation @status: ready @variants: cols-2, cols-3, cols-4 @notes: - Grupo de links de anclaje interno con ícono de flecha + texto. - Distribución controlada por data-attr `data-cols="2|3|4"`. - Knobs disponibles (CSS vars): --anchors-mt, --anchors-mb, --icon-size, --gap-x, --gap-y. - En mobile, el grid se adapta automáticamente (2 cols → 1 fila, 3 cols → 1 fila, 4 cols → 2x2). - Usar placeholders de texto genéricos en Cookbook (Link 1, Link 2...). @markup:
    Link 1 Link 2 Link 3
    @end */@supports (property:--anchors-mt){@property --anchors-mt{syntax:"";inherits:true;initial-value:64px}@property --anchors-mb{syntax:"";inherits:true;initial-value:64px}@property --icon-size{syntax:"";inherits:true;initial-value:28px}}.ui-v2 .ui-anchor-links{--anchors-mt:clamp(56px,6vw,96px);--anchors-mb:clamp(56px,6vw,96px);--icon-size:28px;--gap-x:clamp(16px,3vw,40px);--gap-y:6px;align-items:center;display:grid;gap:var(--gap-x);grid-auto-columns:max-content;grid-auto-flow:column;justify-content:center;margin-block:var(--anchors-mt) var(--anchors-mb)}.ui-v2 .ui-anchor-links[data-cols="2"]{grid-template-columns:repeat(2,max-content)}.ui-v2 .ui-anchor-links[data-cols="3"]{grid-template-columns:repeat(3,max-content)}.ui-v2 .ui-anchor-links[data-cols="4"]{grid-template-columns:repeat(4,max-content)}.ui-v2 .ui-anchor-links .ui-anchor{align-items:center;color:rgba(0,0,0,.8);cursor:pointer;display:inline-flex;font-size:clamp(1.05rem,1.1vw,1.25rem);font-weight:600;gap:var(--gap-y);line-height:1.2;padding:6px 2px;text-decoration:none}.ui-v2 .ui-anchor-links .ui-anchor:hover{color:#000}.ui-v2 .ui-anchor-links .ui-anchor svg{height:var(--icon-size);width:auto;stroke:currentColor;stroke-width:2.25;stroke-linecap:butt;stroke-linejoin:miter;fill:none;display:block}@media (max-width:991.98px){.ui-v2 .ui-anchor-links{align-content:center;gap:8px 16px;grid-auto-flow:row;inline-size:min(100%,-moz-max-content);inline-size:min(100%,max-content);justify-content:center;justify-items:center;margin-inline:auto}.ui-v2 .ui-anchor-links[data-cols="2"]{grid-template-columns:repeat(2,max-content)}.ui-v2 .ui-anchor-links[data-cols="3"]{grid-template-columns:repeat(3,max-content)}.ui-v2 .ui-anchor-links[data-cols="4"]{grid-template-columns:repeat(2,max-content)}.ui-v2 .ui-anchor-links .ui-anchor{padding:8px 4px}}@supports (property:--title-lift){@property --title-lift{.ui-v2{syntax:"";inherits:true;initial-value:-.25em}}}@supports (property:--mt){@property --mt{.ui-v2{syntax:"";inherits:true;initial-value:4rem}}}.ui-v2 .ui-subsection-sep{--mt:8rem;--mb:4rem;--label-size:clamp(3.5rem,8vw,7rem);--label-color:#e5e5e5;--title-size:clamp(1.25rem,2.3vw,2rem);--title-weight:500;--title-lift:-1.3em;--text-max:64ch;--gap:0.25rem;display:grid;justify-items:center;margin-bottom:var(--mb);margin-top:var(--mt);text-align:center}.ui-v2 .ui-subsection-sep__label{color:var(--label-color);font-size:var(--label-size);font-weight:800;letter-spacing:.01em;line-height:1;margin:0;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ui-v2 .ui-subsection-sep__title{color:#000;font-size:var(--title-size);font-weight:var(--title-weight);line-height:1.2;margin:0;transform:translateY(var(--title-lift))}.ui-v2 .ui-subsection-sep__text{color:#111;font-size:clamp(14px,2vw,16px);line-height:1.6;margin:var(--gap) 0 0;max-width:var(--text-max);text-align:center}@media (max-width:991.98px){.ui-v2 .ui-subsection-sep{--label-size:clamp(2.5rem,14vw,4.5rem);--title-size:clamp(1.125rem,4.2vw,1.375rem);--title-lift:-1.2em;--gap:0.5rem;--text-max:60ch;--mt:4rem;--mb:2rem}.ui-v2 .ui-subsection-sep__title{transform:translateY(var(--title-lift))}} /*! @name: Sec Heading @id: sec-heading @category: content @status: ready @variants: default @notes: Encabezado de sección con título y subtítulo. Limitar ancho con `--heading-max`. @markup:

    De la ciudad a la naturaleza.

    Ya sea en calles urbanas o caminos rurales, la Nueva SANTA FE te da la libertad…

    @end */.ui-v2 .ui-sec-heading{--heading-max:760px;--heading-gap:clamp(12px,1.8vw,16px);margin:80px auto clamp(28px,4vw,100px);max-width:var(--heading-max);text-align:center}.ui-v2 .ui-sec-heading__title{font-family:var(--font-head);font-size:clamp(26px,4.2vw,40px);font-weight:500;letter-spacing:0;line-height:1.1;margin:0 0 var(--heading-gap)}.ui-v2 .ui-sec-heading__subtitle{--subtitle-max:760px;color:#000;font-size:clamp(14px,2vw,16px);line-height:1.45;margin:0 auto;max-width:var(--subtitle-max);text-align:center}.ui-v2 .ui-sec-heading.--narrow{--heading-max:640px} /*! @name: Copy Block @id: ui-copy-block @category: content @status: ready @variants: align-left, align-center, is-narrow, is-wide, gap-sm, gap-lg, tone-strong @notes: - Bloque de texto compuesto por un **intertítulo + párrafo**. - Knobs (CSS vars): • --copy-max → ancho máximo de lectura. • --copy-gap → separación entre título y texto. • --copy-title-size / --copy-title-weight. • --copy-text-size / --copy-text-weight / --copy-text-lh. • --cb-mt / --cb-mb → márgenes verticales (se pueden sobrescribir inline o por data-attr). - Modificadores: • `[data-align="left"]` → alinear a la izquierda. • `.is-narrow` / `.is-wide` → ajustar ancho. • `.gap-sm` / `.gap-lg` → ajustar espaciado. • `.tone-strong` → mayor peso tipográfico. - Buenas prácticas: • Usar `font-head` para títulos y mantener `max-width` en texto. • En mobile se mantiene centrado salvo que se fuerce `[data-align="left"]`. @markup:

    Título del bloque de copy

    Texto descriptivo: breve párrafo explicando las características principales. Usar frases cortas y claras para mejorar la legibilidad.

    Otro subtítulo destacado

    Este párrafo está alineado a la izquierda y utiliza la variante "wide" para ampliar el ancho de lectura en desktop.

    @end */@supports (property:--cb-mb){@property --cb-mb{syntax:"";inherits:true;initial-value:0}}.ui-v2 .ui-copy-block{--copy-max:750px;--copy-gap:clamp(12px,1.8vw,16px);--copy-title-size:clamp(28px,3.2vw,44px);--copy-title-weight:500;--copy-text-size:clamp(14px,2vw,16px);--copy-text-weight:500;--copy-text-lh:1.6;--cb-mt:clamp(80px,4vw,80px);--cb-mb:clamp(80px,4vw,80px);margin:clamp(80px,4vw,80px) auto;margin:var(--cb-mt) auto var(--cb-mb);max-width:var(--copy-max);padding-left:0;padding-right:0;text-align:center}.ui-v2 .ui-copy-block[data-align=left]{margin-left:0;margin-right:0;text-align:left}.ui-v2 .ui-copy-block.is-narrow{--copy-max:790px}.ui-v2 .ui-copy-block.is-wide{--copy-max:900px}.ui-v2 .ui-copy-block.gap-sm{--copy-gap:8px}.ui-v2 .ui-copy-block.gap-lg{--copy-gap:24px}.ui-v2 .ui-copy-block.tone-strong{--copy-title-weight:900;--copy-text-weight:600}.ui-v2 .ui-copy-block__title{font-family:var(--font-head);font-size:var(--copy-title-size);font-weight:var(--copy-title-weight);letter-spacing:0;line-height:1.15;margin:0 0 var(--copy-gap)}.ui-v2 .ui-copy-block__text{font-size:var(--copy-text-size);font-weight:var(--copy-text-weight);line-height:var(--copy-text-lh);margin:0 auto;max-width:var(--copy-max);text-align:center} /*! @name: Hero @id: hero @category: media @status: ready @variants: cover, align-left, align-right, gradient @notes: NO eliminar `.hero--cover` (es parte del componente). Alineación por `.is-align-left|.is-align-right`. Gradiente por `.has-gradient`. Usar y setear width/height en la . @markup:
    Hyundai — vista exterior

    Nueva SANTA FE

    Sobrepasá lo ordinario.

    @end */.ui-v2 .ui-hero{border:0;box-shadow:none;position:relative;width:100%;--hero-min-h:clamp(280px,50vw,620px);--hero-pad-y:clamp(24px,5vw,56px);--hero-grad-from:transparent;--hero-grad-to:rgba(0,0,0,.55);--hero-grad-stop:70%;--hero-text:#fff;--hero-grad-on:1}.ui-v2 .ui-hero__title{color:inherit;font-family:var(--font-head);font-size:clamp(28px,6vw,64px);font-synthesis-weight:none;font-weight:500;line-height:1.05;margin:0 0 8px;text-align:left}.ui-v2 .ui-hero__subtitle{color:inherit;font-size:clamp(16px,2.5vw,22px);font-weight:600;margin:0}.ui-v2 .ui-hero.hero--plain{background:var(--ui-color-muted,var(--sf-color-muted));color:var(--ui-color-text,var(--sf-color-text));padding-block:var(--hero-pad-y)}.ui-v2 .ui-hero.hero--plain .ui-hero__subtitle,.ui-v2 .ui-hero.hero--plain .ui-hero__title{color:inherit;text-shadow:none}.ui-v2 .ui-hero.hero--cover{color:var(--hero-text);min-height:var(--hero-min-h)}.ui-v2 .ui-hero.hero--cover .ui-hero__img,.ui-v2 .ui-hero.hero--cover picture{height:100%;inset:0;-o-object-fit:cover;object-fit:cover;-o-object-position:75% center;object-position:75% center;position:absolute;width:100%;z-index:0}.ui-v2 .ui-hero.is-align-right .ui-hero__img{-o-object-position:75% center;object-position:75% center}.ui-v2 .ui-hero.is-align-left .ui-hero__img{-o-object-position:20% center;object-position:20% center}.ui-v2 .ui-hero.is-align-center .ui-hero__img{-o-object-position:50% center;object-position:50% center}.ui-v2 .ui-hero.hero--cover:after{background:linear-gradient(180deg,var(--hero-grad-from) 0,var(--hero-grad-from) var(--hero-grad-stop),var(--hero-grad-to) 100%);bottom:1px;content:"";left:0;opacity:var(--hero-grad-on);pointer-events:none;position:absolute;right:0;top:0;z-index:1}.ui-v2 .ui-hero.hero--cover.has-gradient{--hero-grad-on:1}.ui-v2 .ui-hero.hero--cover .ui-hero__body{bottom:clamp(16px,3vw,32px);color:var(--hero-text);left:0;position:absolute;right:0;z-index:2}@media (max-width:767.98px){.ui-v2 .ui-hero.hero--cover{--hero-min-h:clamp(260px,62vw,520px)}.ui-v2 .ui-hero.hero--cover .ui-hero__img{-o-object-position:60% center;object-position:60% center}} /*! @name: Media Duo @id: media-duo @category: media @status: ready @variants: tl-br, tr-bl, mirror, stack @notes: Componente para componer 2 imágenes con cruce controlado. Los items comparten la misma celda del grid y se desplazan verticalmente con `--shift`. El contenedor compensa automáticamente el “bleed” (padding arriba/abajo) y expone `--media-duo-mt` para el aire superior (evita margin-collapsing). API (atributos): - `data-variant`: `tl-br` (default) | `tr-bl` | `mirror` | `stack` (controla si A queda a la izq/der sin tocar el DOM). - `data-shape`: `flat` (default) | `diag` | `diag-inv` | `stack` (`diag` sube A y baja B; `diag-inv` al revés; `flat/stack` sin offsets). - `data-front`: `a` | `b` → quién queda por encima (z-index). Default: `b`. - `data-scale`: `sm` | `md` (default) | `lg` → define anchos base (`--a-w`, `--b-w`). Knobs (custom props por instancia): - `--shift`: magnitud del cruce vertical. Default: `clamp(12px, 3vw, 40px)`. - `--a-w`, `--b-w`: anchos relativos de A/B (%, ch, etc.). `md` = 42%/66%. - `--media-duo-mt`: margen superior del bloque (se aplica como `padding-top`). - `--radius`: borde común para ambos medios. Default: `0`. - `--gap`: separación lateral entre A y B. Solo tiene efecto si `--a-w + --b-w + márgenes ≤ 100%` (el cruce principal es vertical). Responsive: - ≤992px se apila 100%, se limpian offsets (`--a-ty/--b-ty`) y z-index. Accesibilidad: - Usar `
    ` + `` por cada medio. Mantener `width`/`height` en `` para evitar CLS. @end @markup:
    Imagen A
    Imagen B
    @end */@supports (property:--a-ty){@property --a-ty{syntax:"";inherits:true;initial-value:0}@property --b-ty{syntax:"";inherits:true;initial-value:0}@property --a-w{syntax:"";inherits:true;initial-value:42%}@property --b-w{syntax:"";inherits:true;initial-value:66%}}.ui-v2 .ui-media-duo{--a-w:42%;--b-w:66%;--a-ty:0px;--b-ty:0px;--gap:12px;--radius:0;--z-a:1;--z-b:2;--shift:clamp(12px,3vw,40px);--media-duo-mt:clamp(40px,5vw,80px);display:grid;grid-template-columns:1fr;isolation:isolate;overflow:visible;position:relative;--_upA:max(0px,calc(0px - var(--a-ty)));--_upB:max(0px,calc(0px - var(--b-ty)));--_up:max(var(--_upA),var(--_upB));padding-top:calc(var(--media-duo-mt) + var(--_up));--_downA:max(0px,var(--a-ty));--_downB:max(0px,var(--b-ty));--_down:max(var(--_downA),var(--_downB));padding-bottom:var(--_down)}.ui-v2 .ui-media-duo__item{border-radius:var(--radius);grid-column:1;grid-row:1;overflow:hidden;position:relative;will-change:transform}.ui-v2 .ui-media-duo__item img{border-radius:inherit;display:block;height:auto;width:100%}.ui-v2 .ui-media-duo .ui-media-duo__item.is-a{justify-self:start;margin-right:calc(var(--gap)/2);transform:translateY(var(--a-ty));width:var(--a-w);z-index:var(--z-a)}.ui-v2 .ui-media-duo .ui-media-duo__item.is-b{justify-self:end;margin-left:calc(var(--gap)/2);transform:translateY(var(--b-ty));width:var(--b-w);z-index:var(--z-b)}.ui-v2 .ui-media-duo[data-variant=tr-bl] .ui-media-duo__item.is-a{justify-self:end;margin-left:calc(var(--gap)/2);margin-right:0}.ui-v2 .ui-media-duo[data-variant=tr-bl] .ui-media-duo__item.is-b{justify-self:start;margin-left:0;margin-right:calc(var(--gap)/2)}.ui-v2 .ui-media-duo[data-variant=mirror] .ui-media-duo__item.is-a{justify-self:end;margin-left:calc(var(--gap)/2);margin-right:0}.ui-v2 .ui-media-duo[data-variant=mirror] .ui-media-duo__item.is-b{justify-self:start;margin-left:0;margin-right:calc(var(--gap)/2)}.ui-v2 .ui-media-duo[data-shape=stack],.ui-v2 .ui-media-duo[data-variant=stack]{margin-bottom:0;padding-bottom:0}.ui-v2 .ui-media-duo[data-shape=stack] .ui-media-duo__item,.ui-v2 .ui-media-duo[data-variant=stack] .ui-media-duo__item{justify-self:stretch;margin:0;transform:none;width:100%}.ui-v2 .ui-media-duo[data-shape=stack] .ui-media-duo__item.is-b,.ui-v2 .ui-media-duo[data-variant=stack] .ui-media-duo__item.is-b{margin-top:var(--gap)}.ui-v2 .ui-media-duo[data-shape=flat]{--a-ty:0px;--b-ty:0px}.ui-v2 .ui-media-duo[data-shape=diag]{--a-ty:calc(var(--shift)*-1);--b-ty:var(--shift)}.ui-v2 .ui-media-duo[data-shape=diag-inv]{--a-ty:var(--shift);--b-ty:calc(var(--shift)*-1)}.ui-v2 .ui-media-duo[data-front=a]{--z-a:3;--z-b:2}.ui-v2 .ui-media-duo[data-front=b]{--z-a:2;--z-b:3}.ui-v2 .ui-media-duo[data-scale=sm]{--a-w:36%;--b-w:60%}.ui-v2 .ui-media-duo[data-scale=md]{--a-w:42%;--b-w:66%}.ui-v2 .ui-media-duo[data-scale=lg]{--a-w:48%;--b-w:72%}@media (max-width:991.98px){.ui-v2 .ui-media-duo{grid-template-columns:1fr;--a-ty:0px;--b-ty:0px;--z-a:1;--z-b:1;margin-bottom:0;padding-bottom:0}.ui-v2 .ui-media-duo .ui-media-duo__item{grid-row:auto}.ui-v2 .ui-media-duo .ui-media-duo__item.is-a,.ui-v2 .ui-media-duo .ui-media-duo__item.is-b{justify-self:stretch;margin:0;transform:none;width:100%;z-index:1}.ui-v2 .ui-media-duo .ui-media-duo__item.is-b{margin-top:var(--gap)}}@supports (property:--copy-ty){@property --copy-ty{syntax:"";inherits:true;initial-value:0px}@property --media-ty{syntax:"";inherits:true;initial-value:0px}@property --col-a{syntax:"";inherits:true;initial-value:48%}@property --col-b{syntax:"";inherits:true;initial-value:52%}@property --pair-ty{syntax:"";inherits:true;initial-value:0}}@supports (property:--copy-pl){@property --copy-pl{syntax:"";inherits:true;initial-value:0}}@supports (property:--copy-pr){@property --copy-pr{syntax:"";inherits:true;initial-value:0}}.ui-v2 .ui-media-pair{--col-a:48%;--col-b:52%;--gap:clamp(16px,2.5vw,32px);--pair-mt:clamp(40px,5vw,80px);--copy-ty:0px;--media-ty:0px;--pair-ty:0px;--radius:0;--pair-max:1120px;--pair-z:auto;--copy-pl:0px;--copy-pr:0px;--_upCopy:max(0px,calc(0px - var(--copy-ty)));--_upMedia:max(0px,calc(0px - var(--media-ty)));--_up:max(var(--_upCopy),var(--_upMedia));--_downCopy:max(0px,var(--copy-ty));--_downMedia:max(0px,var(--media-ty));--_down:max(var(--_downCopy),var(--_downMedia));--_pairUp:max(0px,calc(0px - var(--pair-ty)));--_pairDown:max(0px,var(--pair-ty));align-items:center;display:grid;gap:var(--gap);grid-template-areas:"media copy";grid-template-columns:var(--col-a) var(--col-b);margin-inline:auto;margin-top:var(--pair-ty);max-inline-size:var(--pair-max);overflow:visible;padding-bottom:var(--_down);padding-top:calc(var(--pair-mt) + var(--_up));position:relative;z-index:var(--pair-z)}.ui-v2 .ui-media-pair__media{border-radius:var(--radius);grid-area:media;grid-column:1;grid-row:1;overflow:hidden;transform:translateY(var(--media-ty))}.ui-v2 .ui-media-pair__media img{border-radius:inherit;display:block;height:auto;width:100%}.ui-v2 .ui-media-pair .ui-media-pair__title{font-weight:500}.ui-v2 .ui-media-pair .ui-media-pair__text{font-size:clamp(14px,2vw,16px)}.ui-v2 .ui-media-pair__copy{display:flex;flex-direction:column;gap:12px;grid-area:copy;grid-column:2;grid-row:1;padding-left:var(--copy-pl);padding-right:var(--copy-pr);text-align:left;transform:translateY(var(--copy-ty))}.ui-v2 .ui-media-pair[data-variant=text-img]{grid-template-areas:"copy media";grid-template-columns:var(--col-b) var(--col-a)}.ui-v2 .ui-media-pair[data-variant=text-img] .ui-media-pair__media{grid-column:2}.ui-v2 .ui-media-pair[data-variant=text-img] .ui-media-pair__copy{grid-column:1}.ui-v2 .ui-media-pair[data-variant=stack]{grid-template-columns:1fr}.ui-v2 .ui-media-pair[data-variant=stack] .ui-media-pair__copy,.ui-v2 .ui-media-pair[data-variant=stack] .ui-media-pair__media{grid-column:1;grid-row:auto;transform:none}.ui-v2 .ui-media-pair[data-align=start] .ui-media-pair__copy{align-items:flex-start;text-align:left}.ui-v2 .ui-media-pair[data-align=center] .ui-media-pair__copy{align-items:center;text-align:center}.ui-v2 .ui-media-pair[data-align=end] .ui-media-pair__copy{align-items:flex-end;text-align:right}.ui-v2 .ui-media-pair[data-align=start] .ui-media-pair__text,.ui-v2 .ui-media-pair[data-align=start] .ui-media-pair__title{text-align:left}.ui-v2 .ui-media-pair[data-align=center] .ui-media-pair__text,.ui-v2 .ui-media-pair[data-align=center] .ui-media-pair__title{text-align:center}.ui-v2 .ui-media-pair[data-align=end] .ui-media-pair__text,.ui-v2 .ui-media-pair[data-align=end] .ui-media-pair__title{text-align:right}.ui-v2 .ui-media-pair[data-scale=sm]{--pair-max:960px}.ui-v2 .ui-media-pair[data-scale=md]{--pair-max:1120px}.ui-v2 .ui-media-pair[data-scale=lg]{--pair-max:1280px}.ui-v2 .ui-media-pair.pair--up-sm{--pair-ty:-48px}.ui-v2 .ui-media-pair.pair--up-md{--pair-ty:-96px}.ui-v2 .ui-media-pair.pair--up-lg{--pair-ty:-144px}.ui-v2 .ui-media-pair.pair--down-sm{--pair-ty:48px}.ui-v2 .ui-media-pair.pair--down-md{--pair-ty:96px}.ui-v2 .ui-media-pair.pair--down-lg{--pair-ty:144px}.ui-v2 .ui-media-pair.is-front{--pair-z:3}.ui-v2 .ui-media-pair.is-back{--pair-z:1}@media (max-width:991.98px){.ui-v2 .ui-media-pair{display:grid;grid-auto-flow:row;grid-template-areas:"media" "copy";grid-template-columns:minmax(0,1fr)!important;--copy-ty:0px;--media-ty:0px;--pair-ty:0px!important;--copy-pl:0px;--copy-pr:0px}.ui-v2 .ui-media-pair>.ui-media-pair__copy,.ui-v2 .ui-media-pair>.ui-media-pair__media{grid-column:1!important;grid-row:auto!important}.ui-v2 .ui-media-pair>.ui-media-pair__media{grid-area:media}.ui-v2 .ui-media-pair>.ui-media-pair__copy{grid-area:copy}.ui-v2 .ui-media-pair[data-variant=text-img]{grid-template-areas:"copy" "media"}}.ui-v2 .ui-feature-grid{--gap:clamp(16px,4vw,45px);--radius:0;--grid-max:1120px;--grid-mt:clamp(48px,5vw,96px);--grid-mb:clamp(48px,5vw,96px);--cols:3;--stack-item-mb:0;--item-align:left;--fg-title-min:20px;--fg-title-max:22px;--fg-text-min:15px;--fg-text-max:15px;display:grid;gap:var(--gap);grid-template-columns:repeat(var(--cols),minmax(0,1fr));margin-block:var(--grid-mt) var(--grid-mb);margin-inline:auto;max-inline-size:var(--grid-max)}.ui-v2 .ui-feature-grid__item{display:grid;gap:clamp(8px,1.2vw,14px);grid-template-rows:auto auto 1fr}.ui-v2 .ui-feature-grid__media{border-radius:var(--radius);margin:0;overflow:hidden}.ui-v2 .ui-feature-grid__media img{border-radius:inherit;display:block;height:auto;width:100%}.ui-v2 .ui-feature-grid__title{font-size:clamp(var(--fg-title-min),1rem + .8vw,var(--fg-title-max));font-weight:700;line-height:1.2;margin:0}.ui-v2 .ui-feature-grid__title:empty{display:none}.ui-v2 .ui-feature-grid__text{font-size:clamp(14px,2vw,16px);line-height:1.6;margin:0}.ui-v2 .ui-feature-grid[data-align=center]{--item-align:center}.ui-v2 .ui-feature-grid__text,.ui-v2 .ui-feature-grid__title{text-align:var(--item-align)}.ui-v2 .ui-feature-grid[data-cols="2"]{--cols:2}.ui-v2 .ui-feature-grid[data-cols="3"]{--cols:3}.ui-v2 .ui-feature-grid[data-cols="4"]{--cols:4}.ui-v2 .ui-feature-grid[data-scale=sm]{--grid-max:960px}.ui-v2 .ui-feature-grid[data-scale=md]{--grid-max:1120px}.ui-v2 .ui-feature-grid[data-scale=lg]{--grid-max:1280px}@media (max-width:1199.98px){.ui-v2 .ui-feature-grid[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:991.98px){.ui-v2 .ui-feature-grid,.ui-v2 .ui-feature-grid[data-cols="2"],.ui-v2 .ui-feature-grid[data-cols="3"],.ui-v2 .ui-feature-grid[data-cols="4"]{grid-template-columns:1fr!important;--stack-item-mb:clamp(16px,4vw,32px)}.ui-v2 .ui-feature-grid__item{margin-bottom:var(--stack-item-mb)}.ui-v2 .ui-feature-grid__item:last-child{margin-bottom:0}}@supports (property:--gap){@property --gap{.ui-v2{syntax:"";inherits:true;initial-value:2rem}}}@supports (property:--video-col){@property --video-col{.ui-v2{syntax:"";inherits:true;initial-value:55%}}}@supports (property:--list-col){@property --list-col{.ui-v2{syntax:"";inherits:true;initial-value:45%}}}.ui-v2 .ui-video-accordion{--mt:3rem;--mb:3rem;--gap:2rem;--video-col:55%;--list-col:45%;--sep-color:#e0e0e0;--px:1rem;--py:1rem;--title-size:1.125rem;--desc-size:clamp(13px,2vw,15px);align-items:start;display:grid;gap:var(--gap);grid-template-columns:var(--video-col) var(--list-col);margin:var(--mt) 0 var(--mb)}.ui-v2 .ui-video-accordion__media{position:relative}.ui-v2 .ui-video-accordion__video{aspect-ratio:16/9;background:#e9eef3;border:0;display:block;-o-object-fit:cover;object-fit:cover;outline:none;width:100%}.ui-v2 .ui-video-accordion__list{border-top:1px solid var(--sep-color)}.ui-v2 .ui-video-accordion__item{border-bottom:1px solid var(--sep-color)}.ui-v2 .ui-video-accordion__btn{align-items:center;background:none;border:0;color:#111;cursor:pointer;display:flex;font:inherit;font-size:var(--title-size);font-weight:700;gap:.75rem;padding:var(--py) var(--px);text-align:left;width:100%}.ui-v2 .ui-video-accordion__btn:before{content:"↓";display:inline-block;font-weight:700;transform:translateY(-1px);transition:transform .2s ease}.ui-v2 .ui-video-accordion__item.is-open .ui-video-accordion__btn:before{transform:rotate(180deg)}.ui-v2 .ui-video-accordion__panel{max-height:0;overflow:hidden;transition:max-height .28s ease}.ui-v2 .ui-video-accordion__panel-inner{color:#333;font-size:var(--desc-size);line-height:1.6;padding:0 var(--px) var(--py)}@media (max-width:991.98px){.ui-v2 .ui-video-accordion{grid-template-columns:1fr;--gap:1.25rem}}.ui-v2 .ui-video-coverplay{--mt:3rem;--mb:3rem;--max:1200px;--ratio:16/9;--play-size:72px;--play-bg:rgba(0,0,0,.7);--tri-w:calc(var(--play-size)*0.46);--tri-h:calc(var(--play-size)*0.54);aspect-ratio:var(--ratio);background:#e9eef3;isolation:isolate;margin:var(--mt) auto var(--mb);max-width:var(--max);position:relative;width:100%;--overlay-z:10000001}.ui-v2 .ui-video-coverplay__video{background:transparent;display:block;height:100%;inset:0;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%;z-index:0}.ui-v2 .ui-video-coverplay__cover{background:none;border:0;cursor:pointer;display:block;height:100%;inset:0;padding:0;pointer-events:auto;position:absolute;width:100%;z-index:var(--overlay-z)}.ui-v2 .ui-video-coverplay__cover:before{background:var(--play-bg);border-radius:50%;content:"";height:var(--play-size);left:50%;opacity:.7;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .2s ease,transform .2s ease;width:var(--play-size)}.ui-v2 .ui-video-coverplay__cover:after{background:#fff;content:"";height:var(--tri-h);left:50%;-webkit-mask:url('data:image/svg+xml;utf8, ') center/contain no-repeat;mask:url('data:image/svg+xml;utf8, ') center/contain no-repeat;position:absolute;top:50%;transform:translate(calc(-50% + 2px),-50%);width:var(--tri-w)}.ui-v2 .ui-video-coverplay:not(.is-playing):hover .ui-video-coverplay__cover:before{opacity:1}.ui-v2 .ui-video-coverplay.is-playing .ui-video-coverplay__cover:after,.ui-v2 .ui-video-coverplay.is-playing .ui-video-coverplay__cover:before{opacity:0}.ui-v2 .ui-video-coverplay__cover:focus-visible{outline:2px solid #fff;outline-offset:3px}@supports not (((-webkit-mask:url(#)) or (mask:url(#))) or (-webkit-mask:url(#))){.ui-v2 .ui-video-coverplay__cover:after{background:none;border-bottom:calc(var(--play-size)*.27) solid transparent;border-left:calc(var(--play-size)*.46) solid #fff;border-top:calc(var(--play-size)*.27) solid transparent;height:0;transform:translate(calc(-50% + 2px),-50%);width:0}}@media (max-width:991.98px){.ui-v2 .ui-video-coverplay{--play-size:64px}} /*! @name: 360 Viewer @id: ui-360-viewer @category: media @status: ready @variants: exterior, interior, swatches @js: - js/dist/v2/360-viewer.min.js - js/dist/v2/vendor/three.min.js - js/dist/v2/vendor/uevent.min.js - js/dist/v2/vendor/photo-sphere-viewer.min.js - js/dist/v2/vr360-viewer.min.js @notes: - Este componente requiere JS para funcionar: • Exterior (frames 360): `js/dist/v2/360-viewer.min.js` • Interior (pano 360): `js/dist/v2/vendor/three.min.js` → `js/dist/v2/vendor/uevent.min.js` → `js/dist/v2/vendor/photo-sphere-viewer.min.js` → `js/dist/v2/vr360-viewer.min.js` • CSS de Photo Sphere Viewer: `/css/v2/vendor/photo-sphere-viewer.min.css` (solo interior) - Orden de carga recomendado (interior): THREE → uEvent → Photo Sphere Viewer → vr360-viewer. - Ejemplo (Yii): $cs->registerCssFile(Yii::app()->baseUrl . '/css/v2/vendor/photo-sphere-viewer.min.css'); $cs->registerScriptFile(Yii::app()->baseUrl . '/js/dist/v2/vendor/three.min.js', CClientScript::POS_END); $cs->registerScriptFile(Yii::app()->baseUrl . '/js/dist/v2/vendor/uevent.min.js', CClientScript::POS_END); $cs->registerScriptFile(Yii::app()->baseUrl . '/js/dist/v2/vendor/photo-sphere-viewer.min.js', CClientScript::POS_END); $cs->registerScriptFile(Yii::app()->baseUrl . '/js/dist/v2/vr360-viewer.min.js', CClientScript::POS_END); $cs->registerScriptFile(Yii::app()->baseUrl . '/js/dist/v2/360-viewer.min.js', CClientScript::POS_END); - Ejemplo (HTML plano): - Knobs (CSS vars): --max, --mt, --mb, --gap, --swatch, --badge-size, --accent, --vrbtn-border. - Para el Cookbook los placeholders [[PH(w,h,'Texto')]] se reemplazan por data URI, no depende de PHP. @markup:
    Vista 360° del vehículo
    Cargando 0%
    Colores exteriores
    —
    Rodado
    —
    Colores interiores
    —
    @end */@supports (property:--max){@property --max{.ui-v2{syntax:"";inherits:true;initial-value:100%}}}@supports (property:--mt){@property --mt{.ui-v2{syntax:"";inherits:true;initial-value:3rem}}}@supports (property:--mb){@property --mb{.ui-v2{syntax:"";inherits:true;initial-value:3rem}}}.ui-v2 .ui-360-viewer{--max:1100px;--mt:3rem;--mb:3rem;--gap:1.25rem;--swatch:70px;--badge-size:22px;--accent:#16b4ff;--vrbtn-border:#d7dde4;isolation:isolate;margin:var(--mt) auto var(--mb);max-width:var(--max);position:relative;width:100%;--overlay-z:2147483647}.ui-v2 .ui-360-viewer__stage{aspect-ratio:16/9;background:#f1f3f5;cursor:default;overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:0}.ui-v2 .ui-360-viewer.is-ready .ui-360-viewer__stage{cursor:ew-resize}.ui-v2 .ui-360-viewer__img{background:#fff;display:block;height:100%;inset:0;-o-object-fit:contain;object-fit:contain;position:absolute;width:100%}.ui-v2 .ui-360-viewer__overlay{cursor:pointer;display:grid;inset:0;place-items:center;position:absolute;z-index:var(--overlay-z)}.ui-v2 .ui-360-viewer__vrbtn{background:rgba(0,0,0,.65);border:1px solid var(--vrbtn-border);border-radius:50%;box-shadow:none;color:#fff;cursor:pointer;display:inline-grid;font-size:.95rem;font-weight:700;gap:.25rem;height:84px;place-items:center;pointer-events:auto;text-shadow:none;transition:background-color .18s ease,transform .18s ease,opacity .18s ease;width:84px}.ui-v2 .ui-360-viewer__overlay:hover .ui-360-viewer__vrbtn,.ui-v2 .ui-360-viewer__vrbtn:focus-visible,.ui-v2 .ui-360-viewer__vrbtn:hover{background:var(--accent);opacity:.8;outline:0;transform:scale(1.02)}.ui-v2 .ui-360-viewer__vrbtn:after{content:"↔";font-size:1.2rem;line-height:1;opacity:.9}.ui-v2 .ui-360-viewer__loading{background:rgba(0,0,0,.65);border-radius:999px;bottom:.75rem;color:#fff;font-size:.85rem;left:50%;opacity:0;padding:.35rem .6rem;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .2s ease}.ui-v2 .ui-360-viewer.is-loading .ui-360-viewer__loading{opacity:1}.ui-v2 .ui-360-viewer.is-ready .ui-360-viewer__vrbtn{display:none}.ui-v2 .ui-360-viewer .vsc-controller,.ui-v2 .ui-360-viewer [class*=" vsc-"],.ui-v2 .ui-360-viewer [class^=vsc-],.ui-v2 .ui-360-viewer vsc-controller{display:none!important}.ui-v2 .ui-360-viewer__controls{display:grid;gap:var(--gap);margin-top:var(--gap)}.ui-v2 .ui-360-viewer__tabs{border:1px solid #cfd6dd;border-radius:4px;display:inline-grid;gap:0;grid-auto-flow:column;max-width:600px;overflow:hidden}.ui-v2 .ui-360-viewer__tab{background:#fff;border:0;cursor:pointer;font-weight:600;min-width:120px;padding:.65rem 1rem}.ui-v2 .ui-360-viewer__tab[aria-selected=true]{background:#002c5f;color:#fff}.ui-v2 .ui-360-viewer__group{align-items:start;border-top:1px solid #edf1f5;display:grid;gap:12px 24px;grid-template-columns:240px 1fr;padding:12px 0}.ui-v2 .ui-360-viewer__group:first-of-type{border-top:0}.ui-v2 .ui-360-viewer__meta{display:grid;gap:6px}.ui-v2 .ui-360-viewer__title{color:#222;font-size:.95rem;font-weight:600}.ui-v2 .ui-360-viewer__value{color:#546171;font-size:.9rem}.ui-v2 .ui-360-viewer__swatches{align-items:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}.ui-v2 .ui-360-viewer__swatch{background:#fff;border:0;border-radius:4px;cursor:pointer;display:grid;height:var(--swatch);overflow:visible;padding:0;place-items:center;position:relative;width:var(--swatch)}.ui-v2 .ui-360-viewer__swatch img{border-radius:4px;display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.ui-v2 .ui-360-viewer__swatch.is-selected:after{--badge-size:24px;background:url('data:image/svg+xml;utf8, ') 50%/contain no-repeat;content:"";height:var(--badge-size);pointer-events:none;position:absolute;right:calc(var(--badge-size)*-.5);top:calc(var(--badge-size)*-.5);width:var(--badge-size);z-index:2}@media (max-width:767.98px){.ui-v2 .ui-360-viewer__group{grid-template-columns:1fr}.ui-v2 .ui-360-viewer__swatches{display:grid;gap:8px;grid-template-columns:repeat(3,var(--swatch));justify-content:start}}.ui-v2.page-model.is-santafe .lead-block{margin:var(--ui-space-8) 0;max-width:75ch}.ui-v2.page-model.is-santafe .hero__title{letter-spacing:.2px} /*# sourceMappingURL=bundle.min.css.map */