/* * Prefixed by https://autoprefixer.github.io * PostCSS: v8.4.14, * Autoprefixer: v10.4.7 * Browsers: last 4 version */ /* ================================================================= LIVIT PIANTINI — Estilos base (mobile-first) Paleta: Teal profundo #09434E Carbón #1D1918 Tan / beige #E2C8B1 · #D6C6AF Naranja #DF631E Terracota #C1713E Dorado sello #C9A876 ================================================================= */ /* Los colores son parte del diseño: opta fuera del "auto dark mode" de Chromium (Edge/Chrome en Windows, Samsung Internet), que recolorea fondos y textos por su cuenta. Va también como en el head. */ :root { color-scheme: only light; } /* Reset extra */ body * { -webkit-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: none; color: inherit; } li { list-style: none; } p { padding: 0; margin: 0; } ul { padding: 0; margin: 0; } img { max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; } html { font-size: 1em; scroll-behavior: smooth; } body { font-family: "IBM Plex Mono", monospace; font-weight: 400; color: #fff; background: #09434E; line-height: 1.6; overflow-x: hidden; } /* Contenedor interior */ .inwrap { width: 100%; margin: 0 auto; padding: 0 1.5em; } /* Tipografía de títulos */ .main-title, .hero-banner__title, .conecta__title, .wizard__title, .footer__wordmark, .preloader__logo { font-family: "Marcellus", serif; font-weight: 400; } /* Botón CTA */ .cta-btn { display: inline-block; background: #DF631E; color: #fff; font-size: 0.85em; letter-spacing: 0.03em; padding: 0.95em 1.8em; border-radius: 0.3em; -webkit-transition: background 0.25s ease, -webkit-transform 0.25s ease; transition: background 0.25s ease, -webkit-transform 0.25s ease; -o-transition: background 0.25s ease, transform 0.25s ease; transition: background 0.25s ease, transform 0.25s ease; transition: background 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease; } .cta-btn:hover { background: #c4541592; background: #C45415; -webkit-transform: translateY(-2px); -ms-transform: translateY(-2px); transform: translateY(-2px); } /* Marca "Un Proyecto de" + logo Suburbia (hero y Respaldo) */ .project-brand__label { display: block; font-size: 0.9em; color: rgba(255, 255, 255, 0.85); margin-bottom: 0.9em; } .project-brand__link { display: inline-block; } .project-brand__logo { display: block; width: 13em; height: auto; } /* Link subrayado */ .link-underline { color: #fff; font-size: 0.85em; text-decoration: underline; text-underline-offset: 0.35em; opacity: 0.85; -webkit-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .link-underline:hover { opacity: 1; } /* Marca de sección (sello + label) */ .section-brand { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.9em; margin-bottom: 1.6em; } .section-brand__seal { width: 2.8em; height: auto; display: block; } .section-brand__label { font-family: "Marcellus", serif; font-size: 1.35em; letter-spacing: 0.04em; text-transform: uppercase; } /* ================================================================= PRELOADER ================================================================= */ /* Los estilos del preloader viven INLINE en el de index.html (ver comentario ahí): deben pintar ANTES de que cargue esta hoja. No re-declararlos aquí para no tener dos fuentes de verdad. (#page-content{visibility:hidden} también va inline; main.js lo hace visible en window.load.) */ /* ================================================================= HEADER principal ================================================================= */ #main-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; } /* Fijo mientras se recorre el hero; al final se "aparca" (JS pone top) y se va con el scroll */ #main-header.is-fixed { position: fixed; } .header__inwrap { width: 100%; margin: 0 auto; padding: 1.2em 1.5em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header__logo img { width: 6.5em; height: auto; display: block; } .header__nav { display: none; } .header__nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1.8em; } .header__nav a { font-family: "Marcellus", serif; font-size: 1.05em; letter-spacing: 0.02em; opacity: 0.9; -webkit-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .header__nav a:hover { opacity: 1; } .header__cta { display: none; } /* Hamburguesa */ .header__toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 5px; width: 2em; height: 2em; } .header__toggle span { display: block; width: 100%; height: 2px; background: #fff; -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; } .header__toggle.is-open span:nth-child(1) { -webkit-transform: translateY(7px) rotate(45deg); -ms-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg); } .header__toggle.is-open span:nth-child(2) { opacity: 0; } .header__toggle.is-open span:nth-child(3) { -webkit-transform: translateY(-7px) rotate(-45deg); -ms-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); } /* Menú móvil desplegable */ .header__nav.is-open { display: block; position: absolute; top: 100%; left: 0; width: 100%; background: #09434E; padding: 1.5em; -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3); } .header__nav.is-open ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.2em; } /* ================================================================= HERO ================================================================= */ /* Sección alta: la altura extra da el recorrido de scroll para la animación. El estado por defecto de los hijos = estado FINAL (fallback sin JS / reduced-motion). */ #hero-banner { position: relative; height: 220vh; background-color: #09434E; } .hero__sticky { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #09434E; background-image: url('./img/hero-bg-pattern.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; } /* Recuadro del render que crece con el scroll (por defecto = pantalla completa) */ .hero__frame { position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden; background-image: url('./img/hero-image-full-render.jpg'); background-size: cover; background-position: center; } /* Degradado para legibilidad del texto (se desvanece dentro al final) */ .hero__gradient { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: -webkit-gradient(linear, left bottom, left top, from(rgba(9, 67, 78, 0.96)), color-stop(0.35, rgba(9, 67, 78, 0.6)), color-stop(0.62, rgba(9, 67, 78, 0.18)), to(rgba(9, 67, 78, 0))); background: -o-linear-gradient(bottom, rgba(9, 67, 78, 0.96) 0%, rgba(9, 67, 78, 0.6) 35%, rgba(9, 67, 78, 0.18) 62%, rgba(9, 67, 78, 0) 88%); background: linear-gradient(0deg, rgba(9, 67, 78, 0.96) 0%, rgba(9, 67, 78, 0.6) 35%, rgba(9, 67, 78, 0.18) 62%, rgba(9, 67, 78, 0) 88%); } /* Collage de imágenes flotantes que sube de abajo hacia arriba */ .hero__floating { position: absolute; left: 50%; bottom: 0; z-index: 2; width: 100%; max-width: 100em; height: auto; opacity: 0; pointer-events: none; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } /* Texto del hero (abajo a la izquierda, como el diseño) */ .hero__content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding-bottom: 3.5em; color: #fff; } .hero__content .inwrap { margin: 0 auto; } .hero-banner__title { font-size: 2.6em; line-height: 1.08; text-transform: uppercase; margin: 0 0 0.3em; } .hero-banner__title span { color: #DF631E; } .hero-banner__text { font-size: 0.9em; line-height: 1.9; color: rgba(255, 255, 255, 0.85); margin-bottom: 2em; } .hero__content .project-brand { margin-bottom: 1.6em; } /* CTA + logos de afiliados al pie del hero */ .hero__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 1.8em; } .hero__affiliates { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.2em; } .hero__affiliates img { height: 2.4em; width: auto; } .hero__affiliates-divider { width: 1px; height: 2.4em; background: rgba(255, 255, 255, 0.55); } /* ================================================================= RESPALDO ================================================================= */ #respaldo { background: #1D1918; padding: 4.5em 0 5em; } #respaldo .cols { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.5em; } /* Marca de sección más grande en El Respaldo */ #respaldo .section-brand { gap: 1.1em; margin-bottom: 2em; } #respaldo .section-brand__seal { width: 4.2em; } #respaldo .section-brand__label { font-size: 1.9em; } .respaldo__lead { font-size: 0.9em; color: rgba(255, 255, 255, 0.75); margin-bottom: 1.8em; max-width: 18em; } .respaldo__body { font-size: 0.9em; color: rgba(255, 255, 255, 0.7); margin-bottom: 2.5em; } #respaldo .main-title { font-size: 2em; line-height: 1.15; text-transform: uppercase; margin: 0 0 1em; } /* Estadísticas */ .stats { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1.8em 2.5em; margin-bottom: 2.5em; } .stats__num { display: block; font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 2.6em; line-height: 1; } .stats__num i { color: #DF631E; font-style: normal; } .stats__label { display: block; font-size: 0.75em; color: rgba(255, 255, 255, 0.7); margin-top: 0.5em; } .respaldo__affiliates p { font-size: 0.95em; line-height: 1.5; color: rgba(255, 255, 255, 0.75); margin-bottom: 1.2em; } .respaldo__logos { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1.5em; } .respaldo__logos img { height: 3em; width: auto; max-width: 100%; -o-object-fit: contain; object-fit: contain; } .respaldo__logos-divider { width: 1px; height: 3em; background: rgba(255, 255, 255, 0.55); } /* "Un Proyecto de Suburbia" en la columna izquierda */ .respaldo__project { margin-top: 3em; } .respaldo__project .project-brand__label { font-size: 1em; color: #fff; margin-bottom: 1em; } .respaldo__project .project-brand__logo { width: 15em; } /* Imagen destacada con play */ .respaldo__feature { position: relative; margin: 3.5em 0 0; } /* Sombra (imagen) por debajo del pill */ .respaldo__feature-shadow { position: absolute; left: 50%; bottom: -2.5em; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 102%; max-width: none; z-index: 0; pointer-events: none; } /* Imagen principal (pill) */ .respaldo__feature-img { position: relative; z-index: 1; display: block; width: 100%; border-radius: 17.5em; } .respaldo__feature figcaption { position: absolute; left: 0; bottom: -0.5em; width: 100%; z-index: 2; text-align: center; line-height: 1; font-family: "Marcellus", serif; font-size: 1.8em; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); } .play-btn { position: absolute; top: 42%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; width: 10em; height: 10em; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; /* background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.5); */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* backdrop-filter: blur(4px); */ -webkit-transition: background 0.25s ease, -webkit-transform 0.25s ease; transition: background 0.25s ease, -webkit-transform 0.25s ease; -o-transition: background 0.25s ease, transform 0.25s ease; transition: background 0.25s ease, transform 0.25s ease; transition: background 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease; } .play-btn:hover { background: rgba(255, 255, 255, 0.3); -webkit-transform: translate(-50%, -50%) scale(1.08); -ms-transform: translate(-50%, -50%) scale(1.08); transform: translate(-50%, -50%) scale(1.08); } .play-btn img { width: 5.3em; } /* ================================================================= EL PROYECTO ================================================================= */ #proyecto { position: relative; background-color: #0B444D; background-repeat: no-repeat; background-position: top center; background-size: cover; padding: 4.5em 0; } .proyecto__head { margin-bottom: 2.5em; } /* Marca de sección al mismo tamaño que El Respaldo */ #proyecto .section-brand { gap: 1.1em; } #proyecto .section-brand__seal { width: 4.2em; } #proyecto .section-brand__label { font-size: 1.9em; } .proyecto__intro { font-size: 0.9em; color: rgba(255, 255, 255, 0.8); line-height: 1.9; margin-top: 1.5em; } .proyecto__slider { -webkit-clip-path: url(#proyecto-clip); clip-path: url(#proyecto-clip); overflow: hidden; } .proyecto__slider img { display: block; width: 100%; aspect-ratio: 16 / 10; -o-object-fit: cover; object-fit: cover; } .proyecto__foot { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 1.8em; margin-top: 2em; } .slider-nav { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1em; } .slider-nav button { width: 3.2em; height: 3.2em; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: border-color 0.25s ease, background 0.25s ease; -o-transition: border-color 0.25s ease, background 0.25s ease; transition: border-color 0.25s ease, background 0.25s ease; } .slider-nav button:hover { border: 1px solid #DF631E; } /* Flechas: blancas en reposo, naranja solo en hover (máscara recoloreable) */ .slider-nav__icon { width: 1.1em; height: 1.1em; background-color: #fff; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; -webkit-transition: background-color 0.25s ease; -o-transition: background-color 0.25s ease; transition: background-color 0.25s ease; } .slider-nav__prev .slider-nav__icon { -webkit-mask-image: url('./img/icon-arrow-left-white.svg'); mask-image: url('./img/icon-arrow-left-white.svg'); } .slider-nav__next .slider-nav__icon { -webkit-mask-image: url('./img/icon-arrow-right-orange.svg'); mask-image: url('./img/icon-arrow-right-orange.svg'); } .slider-nav button:hover .slider-nav__icon { background-color: #DF631E; } /* ================================================================= TIPOLOGÍAS ================================================================= */ #tipologias { position: relative; background-color: #D6C6AF; background-repeat: no-repeat; background-size: cover; color: #1D1918; padding: 4.5em 0; /* Los watermarks (texto nowrap gigante) se salen de su caja en anchos intermedios y ensanchaban la página: recortar al borde de la sección */ overflow: hidden; } #tipologias .main-title { font-size: 2.2em; line-height: 1.1; margin: 0 0 0.8em; text-transform: uppercase; } .tipologias__body { font-size: 0.9em; color: rgba(29, 25, 24, 0.8); max-width: 30em; margin-bottom: 2.5em; } .tipologias__watermark { display: none; } /* Antetítulo */ .tipologias__eyebrow { display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.7em; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(29, 25, 24, 0.55); margin-bottom: 1.2em; } /* Tarjeta de especificaciones */ .spec-card { position: relative; background: #1D1918; color: #fff; border-radius: 1.1em; padding: 1.8em; } .spec-card__rule { display: block; width: 2.4em; height: 2px; background: #C9A876; margin-bottom: 1.2em; } .spec-card h3 { font-family: "Marcellus", serif; font-weight: 400; font-size: 1.2em; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 1.6em; } .spec-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3em 1.5em; } .spec-card__full { grid-column: 1 / -1; } .spec-card__key { display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.6em; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 0.6em; } .spec-card__val { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 0.9em; } .spec-card__plan { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8em; margin-top: 1.8em; padding-top: 1.5em; border-top: 1px solid rgba(255, 255, 255, 0.12); width: 100%; background: none; color: #fff; font-family: "IBM Plex Mono", monospace; font-size: 0.65em; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; } .spec-card__plan-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 2em; height: 2em; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; font-size: 1.1em; -webkit-transition: background 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease; transition: background 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease; -o-transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease; } .spec-card__plan:hover .spec-card__plan-icon { background: #DF631E; border-color: #DF631E; -webkit-transform: translateX(0.15em); -ms-transform: translateX(0.15em); transform: translateX(0.15em); } /* Selector de tipologías: pestañas + tarjetas */ .tipologias__selector { position: relative; z-index: 1; margin-top: 3.5em; } .tipo-tabs { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2.5em; border-bottom: 1px solid rgba(29, 25, 24, 0.18); margin-bottom: 2.2em; } .tipo-tab { position: relative; background: none; padding: 0 0 1em; font-family: "IBM Plex Mono", monospace; font-size: 1.15em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(29, 25, 24, 0.45); cursor: pointer; -webkit-transition: color 0.25s ease; -o-transition: color 0.25s ease; transition: color 0.25s ease; } .tipo-tab::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: #1D1918; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .tipo-tab.is-active { color: #1D1918; } .tipo-tab.is-active::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } /* Grupos de tarjetas: scroll horizontal en móvil */ .tipo-cards { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1em; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 0.6em; margin: 0 -1.2em; padding-left: 1.2em; padding-right: 1.2em; } .tipo-cards[hidden] { display: none; } /* Tarjeta de tipología */ .tipo-card { position: relative; overflow: hidden; -webkit-box-flex: 0; -ms-flex: 0 0 13.5em; flex: 0 0 13.5em; scroll-snap-align: start; min-height: 16.5em; padding: 1.3em; text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: rgba(255, 255, 255, 0.35); border: 1px solid rgba(29, 25, 24, 0.12); border-radius: 0.9em; color: #1D1918; cursor: pointer; -webkit-transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease; -o-transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease; transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease; } /* Sin imagen de fondo: la tarjeta activa es negra sólida */ .tipo-card__bg { display: none; } .tipo-card.is-active { background: #1D1918; border-color: #1D1918; color: #fff; } .tipo-card>*:not(.tipo-card__bg) { position: relative; z-index: 1; } .tipo-card__tag { display: inline-block; -ms-flex-item-align: start; align-self: flex-start; padding: 0.35em 0.7em; background: rgba(29, 25, 24, 0.08); border-radius: 0.4em; font-family: "IBM Plex Mono", monospace; font-size: 0.55em; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(29, 25, 24, 0.6); margin-bottom: 1.4em; -webkit-transition: background 0.4s ease, color 0.4s ease; -o-transition: background 0.4s ease, color 0.4s ease; transition: background 0.4s ease, color 0.4s ease; } .tipo-card.is-active .tipo-card__tag { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.8); } /* Etiqueta de opción (encima del nombre, en B y C) */ .tipo-card__option { display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.62em; letter-spacing: 0.03em; color: rgba(29, 25, 24, 0.55); margin-bottom: 0.5em; -webkit-transition: color 0.4s ease; -o-transition: color 0.4s ease; transition: color 0.4s ease; } .tipo-card.is-active .tipo-card__option { color: rgba(255, 255, 255, 0.6); } .tipo-card__name { font-family: "Marcellus", serif; font-weight: 400; font-size: 1.5em; line-height: 1.1; margin: 0; } /* "Costo adicional" debajo del nombre (solo en variantes con sobrecosto) */ .tipo-card__extra { display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.5em; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(29, 25, 24, 0.4); margin-top: 0.7em; -webkit-transition: color 0.4s ease; -o-transition: color 0.4s ease; transition: color 0.4s ease; } .tipo-card.is-active .tipo-card__extra { color: rgba(255, 255, 255, 0.45); } .tipo-card__foot { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1.5em; margin-top: auto; padding-top: 1.4em; } .tipo-card__stat-key { display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.55em; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.5; margin-bottom: 0.4em; } .tipo-card__stat-val { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 0.85em; } .tipo-card__levels { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 1em; margin-top: 1.1em; padding-top: 1.1em; border-top: 1px solid currentColor; font-family: "IBM Plex Mono", monospace; font-size: 0.6em; letter-spacing: 0.08em; color: inherit; } .tipo-card__levels>span:first-child { opacity: 0.65; } .tipo-card__arrow { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 2.2em; height: 2.2em; border: 1px solid currentColor; border-radius: 50%; font-size: 1.2em; opacity: 0.7; } /* Lightbox del plano */ .plan-lightbox { position: fixed; inset: 0; z-index: 1000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 1.2em; background: rgba(13, 11, 10, 0.8); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s ease, visibility 0.3s ease; -o-transition: opacity 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease; } .plan-lightbox.is-open { opacity: 1; visibility: visible; } .plan-lightbox__panel { width: 100%; max-width: 56em; max-height: 92vh; background: #fff; border-radius: 1em; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transform: translateY(1.5em); -ms-transform: translateY(1.5em); transform: translateY(1.5em); -webkit-transition: -webkit-transform 0.35s ease; transition: -webkit-transform 0.35s ease; -o-transition: transform 0.35s ease; transition: transform 0.35s ease; transition: transform 0.35s ease, -webkit-transform 0.35s ease; } .plan-lightbox.is-open .plan-lightbox__panel { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .plan-lightbox__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 1em; padding: 1.4em 1.6em; border-bottom: 1px solid rgba(29, 25, 24, 0.1); } .plan-lightbox__tag { display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.6em; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(29, 25, 24, 0.5); margin-bottom: 0.5em; } .plan-lightbox__name { font-family: "Marcellus", serif; font-weight: 400; font-size: 1.4em; margin: 0; color: #1D1918; } .plan-lightbox__close { -ms-flex-negative: 0; flex-shrink: 0; width: 2.6em; height: 2.6em; border-radius: 50%; background: #1D1918; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; -webkit-transition: background 0.25s ease; -o-transition: background 0.25s ease; transition: background 0.25s ease; } .plan-lightbox__close:hover { background: #DF631E; } .plan-lightbox__close svg { width: 1.1em; height: 1.1em; } .plan-lightbox__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: auto; background: #fff; padding: 1em; } .plan-lightbox__img { display: block; width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } /* Lightbox del video (Respaldo) */ .video-lightbox { position: fixed; inset: 0; z-index: 1000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 1.2em; background: rgba(9, 8, 7, 0.9); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s ease, visibility 0.3s ease; -o-transition: opacity 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease; } .video-lightbox.is-open { opacity: 1; visibility: visible; } .video-lightbox__frame { width: 100%; max-width: 64em; -webkit-transform: translateY(1.5em); -ms-transform: translateY(1.5em); transform: translateY(1.5em); -webkit-transition: -webkit-transform 0.35s ease; transition: -webkit-transform 0.35s ease; -o-transition: transform 0.35s ease; transition: transform 0.35s ease; transition: transform 0.35s ease, -webkit-transform 0.35s ease; } .video-lightbox.is-open .video-lightbox__frame { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .video-lightbox__video { display: block; width: 100%; max-height: 85vh; aspect-ratio: 16 / 9; border-radius: 0.8em; background: #000; -webkit-box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.5); box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.5); } .video-lightbox__close { position: absolute; top: 1.2em; right: 1.2em; width: 2.8em; height: 2.8em; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; -webkit-transition: background 0.25s ease; -o-transition: background 0.25s ease; transition: background 0.25s ease; } .video-lightbox__close:hover { background: #DF631E; } .video-lightbox__close svg { width: 1.2em; height: 1.2em; } /* ================================================================= AMENIDADES ================================================================= */ #amenidades { position: relative; background: #09434E; padding: 4.5em 0; overflow: hidden; } #amenidades::before { content: ""; position: absolute; inset: 0; background-image: -o-repeating-linear-gradient(left, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 7em); background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 7em); pointer-events: none; } #amenidades .inwrap { position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.8em; } /* Orden en móvil: marca · intro · tarjetas · slider · paginación. (.amenidades__main es display:contents, así que intro y stage suben aquí) */ #amenidades .section-brand { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .amenidades__intro { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .amenidades__groups { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .amenidades__stage { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .amen-pagination { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } /* Marca de sección al mismo tamaño que las demás */ #amenidades .section-brand { gap: 1.1em; margin-bottom: 0; } #amenidades .section-brand__seal { width: 4.2em; } #amenidades .section-brand__label { font-size: 1.9em; } /* ----- Layout principal ----- display:contents disuelve el contenedor: intro y stage pasan a ser hijos directos de .inwrap, lo que permite reordenarlos (móvil) y maquetar con grid (desktop) junto a la paginación y las tarjetas. */ .amenidades__main { display: contents; } /* Intro */ .amen-pill { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 2em; padding: 0.55em 1.4em; margin-bottom: 1.4em; } #amenidades .main-title { font-size: 2.2em; line-height: 1.1; text-transform: uppercase; margin: 0 0 0.7em; } .amenidades__body { font-size: 0.9em; line-height: 1.7; color: rgba(255, 255, 255, 0.8); max-width: 24em; margin-bottom: 2em; } /* Paginación (contador + dots). En móvil va centrada bajo el slider. */ .amen-pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .amen-counter { font-family: "Marcellus", serif; color: #fff; line-height: 1; } .amen-counter__current { font-size: 2.6em; } .amen-counter__total { font-size: 1em; color: rgba(255, 255, 255, 0.55); margin-left: 0.3em; } .amen-dots { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5em; margin-top: 1.3em; } .amen-dots span { width: 0.5em; height: 0.5em; border-radius: 1em; background: rgba(255, 255, 255, 0.28); -webkit-transition: width 0.25s ease, background 0.25s ease; -o-transition: width 0.25s ease, background 0.25s ease; transition: width 0.25s ease, background 0.25s ease; } .amen-dots span.is-active { width: 1.6em; background: #DF631E; } /* ----- Escenario (círculo) ----- */ .amenidades__stage { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .amen-circle { position: relative; margin: 0 auto; width: 100%; max-width: 19em; } /* Círculo "ghost" detrás: muestra difuminada la imagen de la siguiente amenidad, asomando por la derecha para dar profundidad. */ .amen-circle__ghost { position: absolute; z-index: 0; top: -19%; left: 26%; width: 85%; aspect-ratio: 1; -o-object-fit: cover; object-fit: cover; border-radius: 50%; opacity: 0.4; -webkit-filter: blur(7px); filter: blur(3px); pointer-events: none; } .amen-circle__img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 1; -o-object-fit: cover; object-fit: cover; border-radius: 50%; cursor: -webkit-zoom-in; cursor: zoom-in; -webkit-box-shadow: 0 1em 2.2em rgba(0, 0, 0, 0.28); box-shadow: 0 1em 2.2em rgba(0, 0, 0, 0.28); -webkit-transition: opacity 0.35s ease; -o-transition: opacity 0.35s ease; transition: opacity 0.35s ease; } .amen-circle.is-changing .amen-circle__img { opacity: 0; } /* Degradado inferior (recortado al círculo) para legibilidad del icono y el texto */ .amen-circle__shade { position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; pointer-events: none; background: -o-linear-gradient(bottom, rgba(9, 67, 78, 0.95) 0%, rgba(9, 67, 78, 0.6) 15%, rgba(9, 67, 78, 0.3) 40%, rgba(9, 67, 78, 0) 46%); background: linear-gradient(0deg, rgba(9, 67, 78, 0.95) 0%, rgba(9, 67, 78, 0.6) 15%, rgba(9, 67, 78, 0.3) 40%, rgba(9, 67, 78, 0) 46%); } .amen-circle__badge { position: absolute; left: 50%; bottom: 21%; z-index: 3; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 4.8em; height: 4.8em; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2); -webkit-box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.35); box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.35); color: #fff; pointer-events: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .amen-circle__badge img { display: block; width: 2.5em; height: 2.5em; } /* Nombre dentro del círculo, debajo del icono */ .amen-circle__name { position: absolute; z-index: 3; pointer-events: none; left: 50%; bottom: 12%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 80%; margin: 0; font-family: "Marcellus", serif; font-size: 1.3em; line-height: 1.15; color: #fff; text-align: center; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); } .amen-nav { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 3.4em; height: 3.4em; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; z-index: 4; -webkit-transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; -o-transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .amen-nav svg { width: 1.05em; height: 1.05em; } /* Flecha izquierda: oscura translúcida con borde sutil (en móvil el círculo casi llena el ancho, así que van pegadas al borde) */ .amen-nav--prev { left: -0.8em; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(9, 67, 78, 0.65); color: rgba(255, 255, 255, 0.9); } .amen-nav--prev:hover { background: rgba(9, 67, 78, 0.9); border-color: rgba(255, 255, 255, 0.5); } /* Flecha derecha: naranja sólida */ .amen-nav--next { right: -0.8em; border: 1px solid #DF631E; background: #DF631E; color: #fff; } .amen-nav--next:hover { background: #C85413; } /* ----- Bloques de amenidades ----- */ .amenidades__groups { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2em; } .amen-group__label { display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.5); margin-bottom: 1em; } .amen-group__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8em; } .amen-card { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.85em; text-align: left; padding: 0.85em 1em; border-radius: 0.7em; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); color: #fff; cursor: pointer; -webkit-transition: border-color 0.25s ease, background 0.25s ease; -o-transition: border-color 0.25s ease, background 0.25s ease; transition: border-color 0.25s ease, background 0.25s ease; } .amen-card:hover, .amen-card.is-active { border-color: #DF631E; background: rgba(223, 99, 30, 0.23); border-left-width: 3px; } /* Puntito naranja en la esquina de la tarjeta activa */ .amen-card.is-active::after { content: ""; position: absolute; top: 0.7em; right: 0.7em; width: 0.45em; height: 0.45em; border-radius: 50%; background: #DF631E; } /* Icono dentro de un círculo "frosted" gris suave; el glifo (SVG) queda blanco */ .amen-card__icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 2.7em; height: 2.7em; border-radius: 50%; background: rgba(255, 255, 255, 0.13); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0.6em; border: 1px solid #858585; } .amen-card__icon img { display: block; width: 2.7em; height: 2.7em; } .amen-card__label { font-family: "Marcellus", serif; font-size: 0.74em; line-height: 1.25; color: rgba(255, 255, 255, 0.82); } /* CTA con flecha (mismo botón naranja, con chevron) */ .cta-btn--arrow { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5em; } .cta-btn--arrow svg { width: 1em; height: 1em; } /* ================================================================= CONECTA / UBICACIÓN ================================================================= */ #conecta { background: #1D1918; padding: 4.5em 0; text-align: center; } .conecta__title { font-size: 2.4em; line-height: 1.1; text-transform: uppercase; margin: 0 0 0.4em; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c9c2bb)); background: -o-linear-gradient(top, #ffffff, #c9c2bb); background: linear-gradient(to bottom, #ffffff, #c9c2bb); -webkit-background-clip: text; background-clip: text; color: transparent; } .conecta__title span { display: block; background: -webkit-gradient(linear, left top, left bottom, from(#8a7d6f), to(#6b6055)); background: -o-linear-gradient(top, #8a7d6f, #6b6055); background: linear-gradient(to bottom, #8a7d6f, #6b6055); -webkit-background-clip: text; background-clip: text; color: transparent; } .conecta__intro { font-size: 0.9em; line-height: 1.7; color: rgba(255, 255, 255, 0.78); margin: 0 auto; max-width: 34em; } /* ---------- Mapa de Google ---------- */ .conecta__map { position: relative; width: 100%; margin: 2.5em 0 0; border-radius: 1.4em; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); } .conecta__map iframe { display: block; width: 100%; height: 16em; border: 0; /* leve atenuación para integrar con el fondo oscuro */ -webkit-filter: grayscale(0.1) contrast(1.05); filter: grayscale(0.1) contrast(1.05); } /* ---------- Barra resumen ---------- */ .conecta__bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1em; margin: 1.6em 0 0.8em; } .conecta__total { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.6em; font-size: 0.78em; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.6); } .conecta__total i { width: 0.5em; height: 0.5em; border-radius: 50%; background: #DF631E; } .conecta__toggle-all { background: none; border: 0; color: rgba(255, 255, 255, 0.55); font-family: inherit; font-size: 0.75em; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.3em; cursor: pointer; -webkit-transition: color 0.25s ease; -o-transition: color 0.25s ease; transition: color 0.25s ease; line-height: 2; } .conecta__toggle-all:hover { color: #fff; } /* ---------- Acordeón de categorías ---------- */ .conecta__cats { list-style: none; margin: 0; padding: 0; text-align: left; } .conecta__cat { border-left: 3px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .conecta__cat-head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.9em; width: 100%; padding: 1em 0.4em 1em 1.1em; background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); font-family: inherit; text-align: left; cursor: pointer; } .conecta__cat-icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 2.4em; height: 2.4em; } .conecta__cat-icon img { display: block; width: 100%; height: 100%; } .conecta__cat-titles { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; padding-left: 0.9em; border-left: 1px solid rgba(255, 255, 255, 0.15); } .conecta__cat-name { display: block; font-family: 'Marcellus', serif; font-size: 1.15em; color: #fff; line-height: 1.2; } .conecta__cat-sub { display: block; font-size: 0.72em; letter-spacing: 0.02em; margin-top: 0.25em; color: rgba(255, 255, 255, 0.55); } .conecta__cat-count { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; min-width: 2.6em; text-align: center; font-size: 0.8em; font-weight: 700; padding: 0.45em 1em; border-radius: 1.5em; color: #fff; background: rgba(255, 255, 255, 0.08); } .conecta__cat-chev { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; width: 2.2em; height: 2.2em; border-radius: 0.5em; background: rgba(255, 255, 255, 0.06); } /* signo +/- dibujado con pseudo-elementos */ .conecta__cat-chev::before, .conecta__cat-chev::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.85em; height: 2px; background: rgba(255, 255, 255, 0.8); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: -webkit-transform 0.25s ease, opacity 0.25s ease; transition: -webkit-transform 0.25s ease, opacity 0.25s ease; -o-transition: transform 0.25s ease, opacity 0.25s ease; transition: transform 0.25s ease, opacity 0.25s ease; } /* barra vertical: visible solo cuando está cerrado (signo +) */ .conecta__cat-chev::after { -webkit-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .conecta__cat.is-open .conecta__cat-chev::after { opacity: 0; } /* cuerpo colapsable */ .conecta__cat-body { overflow: hidden; max-height: 0; -webkit-transition: max-height 0.35s ease; -o-transition: max-height 0.35s ease; transition: max-height 0.35s ease; } .conecta__cat.is-open .conecta__cat-body { max-height: 60em; } .conecta__places { list-style: none; margin: 0; padding: 0 0.4em 0.8em 4.4em; display: grid; grid-template-columns: 1fr; } .conecta__places li { font-family: 'Marcellus', serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.9em; padding: 0.8em 0; font-size: 0.88em; color: rgba(255, 255, 255, 0.85); border-top: 1px solid rgba(255, 255, 255, 0.06); } .conecta__num { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 0.78em; font-weight: 700; color: rgba(255, 255, 255, 0.4); padding-right: 0.9em; border-right: 1px solid rgba(255, 255, 255, 0.12); } /* ---- Acentos por categoría ---- El header lleva un degradado teñido con el color de la categoría (de izquierda, donde está la barra de acento, desvaneciéndose hacia la derecha) para diferenciarlo del listado de sitios. */ .conecta__cat--rest { border-left-color: #DF631E; } .conecta__cat--rest .conecta__cat-sub, .conecta__cat--rest .conecta__num { color: #DF631E; } .conecta__cat--rest .conecta__cat-count { background: rgba(223, 99, 30, 0.18); color: #DF631E; } .conecta__cat--rest .conecta__cat-head { background: -webkit-gradient(linear, left top, right top, from(rgba(223, 99, 30, 0.22)), color-stop(55%, rgba(223, 99, 30, 0.05)), to(rgba(223, 99, 30, 0))); background: -o-linear-gradient(left, rgba(223, 99, 30, 0.22), rgba(223, 99, 30, 0.05) 55%, rgba(223, 99, 30, 0)); background: linear-gradient(to right, rgba(223, 99, 30, 0.22), rgba(223, 99, 30, 0.05) 55%, rgba(223, 99, 30, 0)); } .conecta__cat--serv { border-left-color: #C9A96E; } .conecta__cat--serv .conecta__cat-sub, .conecta__cat--serv .conecta__num { color: #C9A96E; } .conecta__cat--serv .conecta__cat-count { background: rgba(201, 169, 110, 0.18); color: #C9A96E; } .conecta__cat--serv .conecta__cat-head { background: -webkit-gradient(linear, left top, right top, from(rgba(201, 169, 110, 0.22)), color-stop(55%, rgba(201, 169, 110, 0.05)), to(rgba(201, 169, 110, 0))); background: -o-linear-gradient(left, rgba(201, 169, 110, 0.22), rgba(201, 169, 110, 0.05) 55%, rgba(201, 169, 110, 0)); background: linear-gradient(to right, rgba(201, 169, 110, 0.22), rgba(201, 169, 110, 0.05) 55%, rgba(201, 169, 110, 0)); } .conecta__cat--esc { border-left-color: #6AAD7E; } .conecta__cat--esc .conecta__cat-sub, .conecta__cat--esc .conecta__num { color: #6AAD7E; } .conecta__cat--esc .conecta__cat-count { background: rgba(106, 173, 126, 0.18); color: #6AAD7E; } .conecta__cat--esc .conecta__cat-head { background: -webkit-gradient(linear, left top, right top, from(rgba(106, 173, 126, 0.22)), color-stop(55%, rgba(106, 173, 126, 0.05)), to(rgba(106, 173, 126, 0))); background: -o-linear-gradient(left, rgba(106, 173, 126, 0.22), rgba(106, 173, 126, 0.05) 55%, rgba(106, 173, 126, 0)); background: linear-gradient(to right, rgba(106, 173, 126, 0.22), rgba(106, 173, 126, 0.05) 55%, rgba(106, 173, 126, 0)); } .conecta__cat--hosp { border-left-color: #C46A6A; } .conecta__cat--hosp .conecta__cat-sub, .conecta__cat--hosp .conecta__num { color: #C46A6A; } .conecta__cat--hosp .conecta__cat-count { background: rgba(196, 106, 106, 0.18); color: #C46A6A; } .conecta__cat--hosp .conecta__cat-head { background: -webkit-gradient(linear, left top, right top, from(rgba(196, 106, 106, 0.22)), color-stop(55%, rgba(196, 106, 106, 0.05)), to(rgba(196, 106, 106, 0))); background: -o-linear-gradient(left, rgba(196, 106, 106, 0.22), rgba(196, 106, 106, 0.05) 55%, rgba(196, 106, 106, 0)); background: linear-gradient(to right, rgba(196, 106, 106, 0.22), rgba(196, 106, 106, 0.05) 55%, rgba(196, 106, 106, 0)); } .conecta__cat--otros { border-left-color: #8A7FC0; } .conecta__cat--otros .conecta__cat-sub, .conecta__cat--otros .conecta__num { color: #8A7FC0; } .conecta__cat--otros .conecta__cat-count { background: rgba(138, 127, 192, 0.18); color: #8A7FC0; } .conecta__cat--otros .conecta__cat-head { background: -webkit-gradient(linear, left top, right top, from(rgba(138, 127, 192, 0.22)), color-stop(55%, rgba(138, 127, 192, 0.05)), to(rgba(138, 127, 192, 0))); background: -o-linear-gradient(left, rgba(138, 127, 192, 0.22), rgba(138, 127, 192, 0.05) 55%, rgba(138, 127, 192, 0)); background: linear-gradient(to right, rgba(138, 127, 192, 0.22), rgba(138, 127, 192, 0.05) 55%, rgba(138, 127, 192, 0)); } /* ---------- Pie ---------- */ .conecta__foot { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.4em; margin-top: 2.2em; } .conecta__hint { font-size: 0.8em; color: rgba(255, 255, 255, 0.45); } .conecta__tour-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.7em; padding: 0.95em 1.8em; border: 1px solid #DF631E; border-radius: 2em; color: #DF631E; font-size: 0.85em; letter-spacing: 0.02em; -webkit-transition: background 0.25s ease, color 0.25s ease; -o-transition: background 0.25s ease, color 0.25s ease; transition: background 0.25s ease, color 0.25s ease; } .conecta__tour-btn span { font-size: 1.2em; line-height: 1; } .conecta__tour-btn:hover { background: #DF631E; color: #fff; } /* ================================================================= FORMULARIO / CONTACTO ================================================================= */ #contacto { background: #09434E; padding: 4.5em 0; } .wizard { background: #E2C8B1; color: #09434E; border-radius: 1.5em; padding: 2.5em 1.8em; max-width: 38em; margin: 0 auto; -webkit-box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25); } .wizard__step { display: none; } .wizard__step.is-active { display: block; -webkit-animation: fadeIn 0.4s ease; animation: fadeIn 0.4s ease; } @-webkit-keyframes fadeIn { from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .wizard__counter { font-size: 0.75em; letter-spacing: 0.1em; color: rgba(9, 67, 78, 0.6); } .wizard__title { font-size: 1.9em; text-transform: uppercase; margin: 0.6em 0 1.2em; } .wizard__question { font-size: 0.9em; margin-bottom: 1.5em; } .wizard__fields { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.4em; } .wizard__input { font-family: inherit; font-size: 0.95em; color: #09434E; background: transparent; border: none; border-bottom: 1px solid rgba(9, 67, 78, 0.4); border-radius: 0; padding: 0.7em 0.1em; width: 100%; } .wizard__input::-webkit-input-placeholder { color: rgba(9, 67, 78, 0.55); } .wizard__input::-moz-placeholder { color: rgba(9, 67, 78, 0.55); } .wizard__input:-ms-input-placeholder { color: rgba(9, 67, 78, 0.55); } .wizard__input::-ms-input-placeholder { color: rgba(9, 67, 78, 0.55); } .wizard__input::placeholder { color: rgba(9, 67, 78, 0.55); } .wizard__input:focus { outline: none; border-bottom-color: #09434E; } .wizard__options { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1em; } .wizard__option { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 1em; font-family: inherit; font-size: 0.9em; text-align: left; color: #09434E; border: 1px solid rgba(9, 67, 78, 0.45); border-radius: 0.6em; padding: 1.3em 1.4em; -webkit-transition: background 0.2s ease, border-color 0.2s ease; -o-transition: background 0.2s ease, border-color 0.2s ease; transition: background 0.2s ease, border-color 0.2s ease; } .wizard__option-title { font-weight: 500; } .wizard__option-price { font-family: "IBM Plex Mono", monospace; font-size: 0.82em; letter-spacing: 0.02em; opacity: 0.7; } .wizard__option:hover { border-color: #09434E; } .wizard__option.is-selected { background: #09434E; color: #E2C8B1; border-color: #09434E; } .wizard__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.2em; margin-top: 2.2em; } .wizard__actions .link-underline { color: #09434E; } /* Botón "Volver" del wizard */ .wizard__back { background: none; font-family: "IBM Plex Mono", monospace; font-size: 0.8em; letter-spacing: 0.04em; color: rgba(9, 67, 78, 0.7); cursor: pointer; padding: 0.3em 0.2em; margin-top: 1.6em; -webkit-transition: color 0.2s ease; -o-transition: color 0.2s ease; transition: color 0.2s ease; } .wizard__back span { margin-right: 0.4em; } .wizard__back:hover { color: #09434E; } /* En el paso final el "Volver" va dentro de .wizard__actions (sin margen extra) */ .wizard__actions .wizard__back { margin-top: 0; } /* Botón CTA a todo el ancho (pill) — paso final */ .cta-btn--block { width: 100%; text-align: center; border-radius: 3em; padding: 1.25em 1.8em; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.08em; } .cta-btn--block span { margin-left: 0.4em; } /* ================================================================= FOOTER ================================================================= */ #main-footer { position: relative; background: #C1713E; color: #1D1918; padding: 3.5em 0 0; overflow: hidden; } .footer__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.5em; } /* Columna 1: logo Suburbia + datos de contacto */ .footer__logo-link { display: inline-block; margin-bottom: 2em; } .footer__logo-suburbia { display: block; width: 14em; height: auto; } .footer__contact-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.2em; } .footer__contact-list li { font-size: 0.9em; line-height: 1.5; } .footer__contact-list b { font-weight: 700; } /* Columna 2: logos de afiliados en negro */ .footer__affiliates { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 1.6em; } .footer__affiliates-label { display: block; font-size: 0.85em; line-height: 1.4; opacity: 0.75; margin-bottom: 0.4em; } .footer__affiliates img { height: 3em; width: auto; } .footer__heading { display: block; font-size: 0.85em; margin-bottom: 1em; opacity: 0.85; } .footer__nav-cols { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2.5em; } .footer__nav-cols ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.7em; } .footer__nav a, .footer__contact-list a { -webkit-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .footer__nav a { font-size: 1em; } .footer__nav a:hover, .footer__contact-list a:hover { opacity: 0.6; } /* Fila media: copyright · email · redes */ .footer__meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2em; margin-top: 3em; } .footer__copy { font-size: 0.85em; margin: 0; } .footer__social a { text-decoration: none; } .footer__wordmark { font-size: 22vw; line-height: 0.8; text-transform: uppercase; white-space: nowrap; color: #1D1918; margin-bottom: -0.08em; background: -webkit-gradient(linear, left top, right top, color-stop(55%, #1D1918), to(rgba(29, 25, 24, 0.15))); background: -o-linear-gradient(left, #1D1918 55%, rgba(29, 25, 24, 0.15)); background: linear-gradient(to right, #1D1918 55%, rgba(29, 25, 24, 0.15)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ================================================================= LIGHTBOX (imagen de amenidad a tamaño completo) ================================================================= */ .lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background: rgba(9, 67, 78, 0.94); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 2em; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s ease, visibility 0.3s ease; -o-transition: opacity 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 100%; margin: 0; } .lightbox__img { max-width: 86vw; max-height: 76vh; -o-object-fit: contain; object-fit: contain; border-radius: 0.5em; -webkit-box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.5); box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.5); -webkit-transform: scale(0.96); -ms-transform: scale(0.96); transform: scale(0.96); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .lightbox.is-open .lightbox__img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* Pie del lightbox: icono + nombre de la amenidad */ .lightbox__caption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8em; margin-top: 1.3em; color: #fff; } .lightbox__icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 2.9em; height: 2.9em; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .lightbox__icon img { display: block; width: 1.5em; height: 1.5em; } .lightbox__name { font-family: "Marcellus", serif; font-size: 1.5em; letter-spacing: 0.02em; } /* Flechas de navegación del lightbox */ .lightbox__nav { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 3.2em; height: 3.2em; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 2; -webkit-transition: background 0.25s ease; -o-transition: background 0.25s ease; transition: background 0.25s ease; } .lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); } .lightbox__nav svg { width: 1.1em; height: 1.1em; } .lightbox__nav--prev { left: 1.5em; } .lightbox__nav--next { right: 1.5em; } .lightbox__close { position: absolute; top: 1.2em; right: 1.2em; width: 2.8em; height: 2.8em; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: background 0.25s ease; -o-transition: background 0.25s ease; transition: background 0.25s ease; } .lightbox__close:hover { background: rgba(255, 255, 255, 0.25); } .lightbox__close svg { width: 1.3em; height: 1.3em; }