/****************************************************************** Template Name: DJoz Description: DJoz Music HTML Template Author: Colorlib Author URI: https://colorlib.com Version: 1.0 Created: Colorlib ******************************************************************/ /*------------------------------------------------------------------ [Table of contents] 1. Template default CSS 1.1 Variables 1.2 Mixins 1.3 Flexbox 1.4 Reset 2. Helper Css 3. Header Section 4. Hero Section 5. Services Section 6. Track Section 7. Countdown Section 8. Team Section 9. Contact 10. Footer Style -------------------------------------------------------------------*/ /*----------------------------------------*/ /* Template default CSS /*----------------------------------------*/ /*----------------------------------------*/ /* Design System / CSS Variables (djmilobentancor - dark club/electronica theme) /*----------------------------------------*/ :root { /* Brand accent colors */ --accent-primary: #ff007f; --accent-secondary: #00bcd4; --accent-success: #4caf50; --accent-highlight: #e91e63; /* Dark backgrounds */ --bg-dark-900: #05050b; --bg-dark-800: #0f0f1c; --bg-dark-700: #111116; --bg-overlay-dark: rgba(10, 10, 22, 0.95); --bg-panel: rgba(255, 255, 255, 0.05); --bg-panel-solid: rgba(0, 0, 0, 0.3); /* Text */ --text-light: #ffffff; --text-muted: #b7b7b7; --text-dim: #888888; /* Typography */ --font-heading: 'Rajdhani', sans-serif; --font-display: 'Rockville Solid Regular'; /* Motion */ --transition-base: all 0.3s ease; } html, body { height: 100%; font-family: "Now Regular"; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; } /* Páginas secundarias (contacto.html, pack-detalle.html): fondo oscuro profundo aplicado directamente al , no solo a las secciones. Sin esto, el header--normal semitransparente (rgba(10,10,22,0.85) + blur) queda flotando sobre el blanco por defecto del body y el blend da un gris/violeta lavado en vez del negro azulado real - ese era el "fondo gris" del header. Con el body ya oscuro debajo, el glassmorphism del header se ve consistente con index.html. */ body.page-dark { background: #0a0a16; } h1, h2, h3, h4, h5, h6 { margin: 0; color: #111111; font-weight: 400; font-family: "Rajdhani", sans-serif; } h1 { font-size: 70px; } h2 { font-size: 36px; } h3 { font-size: 30px; } h4 { font-size: 24px; } h5 { font-size: 18px; } h6 { font-size: 16px; } p { font-size: 15px; font-family: "Now Regular"; color: #444444; font-weight: 400; line-height: 26px; margin: 0 0 15px 0; } img { max-width: 100%; } input:focus, select:focus, button:focus, textarea:focus { outline: none; } a:hover, a:focus { text-decoration: none; outline: none; color: #ffffff; } ul, ol { padding: 0; margin: 0; } /*--------------------- Helper CSS -----------------------*/ .section-title { margin-bottom: 40px; position: relative; z-index: 1; } .section-title.center-title { text-align: center; } .section-title h2 { font-size: 42px; color: #111111; font-weight: 700; text-transform: uppercase; } .section-title h1 { font-size: 100px; color: #0e0d0d; font-family: "Rockville Solid Regular"; position: absolute; left: 0; top: -45px; width: 100%; z-index: -1; } .set-bg { background-repeat: no-repeat; background-size: cover; background-position: top center; } .spad { padding-top: 100px; padding-bottom: 100px; } .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white p, .text-white span, .text-white li, .text-white a { color: #fff; } /* buttons */ .primary-btn { display: inline-block; font-size: 15px; text-transform: uppercase; padding: 14px 25px 12px; color: #ffffff; background: var(--accent-primary); letter-spacing: 2px; transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; } .primary-btn.border-btn { background: transparent; border: 2px solid var(--accent-primary); color: #111111; } .primary-btn:hover, .btn-payment:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 0, 127, 0.35); opacity: 0.95; } .primary-btn:active, .btn-payment:active { transform: translateY(0); box-shadow: none; opacity: 1; } .primary-btn:focus-visible, .btn-payment:focus-visible, .radar-nav-btn:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 3px; } .site-btn { font-size: 15px; color: #ffffff; background: var(--accent-primary); font-weight: 700; letter-spacing: 2px; border: none; text-transform: uppercase; display: inline-block; padding: 14px 30px; width: 100%; } /* Preloder */ #preloder { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999999; background: #000; } .loader { width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; margin-top: -13px; margin-left: -13px; border-radius: 60px; animation: loader 0.8s linear infinite; -webkit-animation: loader 0.8s linear infinite; } @keyframes loader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); border: 4px solid #f44336; border-left-color: transparent; } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); border: 4px solid #673ab7; border-left-color: transparent; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); border: 4px solid #f44336; border-left-color: transparent; } } @-webkit-keyframes loader { 0% { -webkit-transform: rotate(0deg); border: 4px solid #f44336; border-left-color: transparent; } 50% { -webkit-transform: rotate(180deg); border: 4px solid #673ab7; border-left-color: transparent; } 100% { -webkit-transform: rotate(360deg); border: 4px solid #f44336; border-left-color: transparent; } } /*--------------------- Header -----------------------*/ .header { background: rgba(42, 1, 74, 0.5); position: absolute; left: 0; top: 0; width: 100%; z-index: 9; } /* La usan contacto.html y pack-detalle.html: header en flujo normal (no flotando sobre un video como en el home) con vidrio oscuro semitransparente, para que combine sin corte de color con el breadcrumb y el resto de la página (mismo #0a0a16 de fondo - ver body.page-dark arriba). !important porque esta regla necesita ganar siempre sobre `.header` base (fondo violeta pensado para flotar sobre el video del home), sin depender de orden de carga del CSS. */ .header.header--normal { position: relative; background: rgba(10, 10, 22, 0.85) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .header__logo { padding: 20px 0 25px; } .header__logo a { display: inline-block; } .header__nav { text-align: right; background: transparent; } .header__menu { padding: 31px 0 27px; display: inline-block; margin-right: 45px; } .header__menu ul li { list-style: none; display: inline-block; margin-right: 45px; position: relative; } .header__menu ul li.active a:after { opacity: 1; } .header__menu ul li:hover a:after { opacity: 1; } .header__menu ul li:hover .dropdown { top: 34px; opacity: 1; visibility: visible; } .header__menu ul li:last-child { margin-right: 0; } .header__menu ul li .dropdown { position: absolute; left: 0; top: 56px; width: 150px; background: #111111; text-align: left; padding: 2px 0; z-index: 9; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .header__menu ul li .dropdown li { display: block; margin-right: 0; } .header__menu ul li .dropdown li a { font-size: 14px; color: #ffffff; font-weight: 400; padding: 8px 20px; text-transform: capitalize; } .header__menu ul li .dropdown li a:after { display: none; } .header__menu ul li a { font-size: 15px; text-transform: uppercase; color: #ffffff; display: block; padding: 6px 0; position: relative; } .header__menu ul li a:after { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent-primary); content: ""; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; } .header__right__social { display: inline-block; } .header__right__social a { display: inline-block; font-size: 16px; color: #ffffff; margin-right: 16px; transition: color 0.3s ease, transform 0.3s ease; } .header__right__social a:hover { color: var(--accent-primary); transform: translateY(-2px); } .header__right__social a:last-child { margin-right: 0; } .slicknav_menu { display: none; } /*--------------------- Hero -----------------------*/ .hero { padding-top: 400px; padding-bottom: 295px; position: relative; } .hero__text { text-align: center; } .hero__text span { color: #ffffff; text-transform: uppercase; letter-spacing: 6px; } .hero__text h1 { font-size: 110px; font-family: "Rockville Solid Regular"; color: #ffffff; margin-bottom: 20px; margin-top: 22px; } .hero__text p { color: #ffffff; margin-bottom: 20px; } .hero__text .play-btn { font-size: 26px; color: var(--accent-primary); height: 90px; width: 90px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); display: inline-block; line-height: 90px; text-align: center; position: relative; z-index: 1; } /* Shared play-btn micro-interaction: applies on top of the size/color rules above (hero, youtube, skills), since it targets the bare class. */ .play-btn { transition: transform 0.3s ease, box-shadow 0.3s ease; } .play-btn:hover { transform: scale(1.12); box-shadow: 0 0 25px rgba(255, 0, 127, 0.6); } .play-btn:active { transform: scale(1.02); } .play-btn:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 4px; } .hero__text .play-btn i { position: relative; top: 2px; left: 2px; } .hero__text .play-btn:after { position: absolute; left: 15px; top: 15px; height: 60px; width: 60px; background: #ffffff; border-radius: 50%; content: ""; z-index: -1; } .linear__icon { position: absolute; left: 50%; bottom: 0; margin-left: -16px; -webkit-animation: mymove 0.5s infinite alternate; animation: mymove 0.5s infinite alternate; } .linear__icon i { font-size: 50px; color: var(--accent-primary); } @-webkit-keyframes mymove { 0% { bottom: 0; } 100% { bottom: -10px; } } @keyframes mymove { 0% { bottom: 0; } 100% { bottom: -10px; } } /*--------------------- Events -----------------------*/ .event { padding-bottom: 60px; } .event .section-title { margin-bottom: 10px; position: relative; } .event .section-title:after { position: absolute; right: 46px; top: 25px; height: 2px; width: 775px; background: rgba(225, 225, 225, 0.3); content: ""; z-index: -1; } .event__slider .col-lg-4 { max-width: 100%; } .event__slider.owl-carousel .owl-stage-outer { padding-top: 30px; padding-bottom: 40px; } .event__slider.owl-carousel .owl-nav { position: absolute; right: 15px; top: -50px; } .event__slider.owl-carousel .owl-nav button { font-size: 22px; color: #111111; opacity: 0.5; margin-right: 10px; } .event__slider.owl-carousel .owl-nav button:last-child { margin-right: 0; } .event__item { -webkit-box-shadow: 0px 3px 15px rgba(22, 41, 124, 0.1); box-shadow: 0px 3px 15px rgba(22, 41, 124, 0.1); } .event__item__pic { height: 360px; position: relative; } .event__item__pic .tag-date { position: absolute; left: 0; bottom: -21px; width: 100%; text-align: center; } .event__item__pic .tag-date span { font-size: 15px; color: #ffffff; display: inline-block; background: var(--accent-primary); padding: 12px 8px 9px 20px; } .event__item__text { text-align: center; padding: 45px 10px 25px; } .event__item__text h4 { font-size: 26px; font-weight: 700; color: #111111; margin-bottom: 10px; } .event__item__text p { color: #888888; margin-bottom: 0; } .event__item__text p i { color: var(--accent-primary); margin-right: 8px; font-size: 17px; } /*--------------------- Track -----------------------*/ .track { padding-top: 120px; padding-bottom: 40px; overflow: hidden; } .track .section-title { margin-bottom: 105px; } .track__content { height: 502px; overflow-y: auto; } .track__all { text-align: right; margin-bottom: 100px; } .jp-play { position: relative; height: 50px; width: 50px; background: transparent; border: 2px solid #e1e1e1; border-radius: 50%; } .jp-play:after { position: absolute; display: block; left: 17px; top: 12px; width: 16px; height: 20px; background: url(../img/play-default.png); content: ""; } .jp-state-playing .jp-play { background: var(--accent-primary) !important; border-color: var(--accent-primary) !important; } .jp-state-playing .jp-play:after { background: url(../img/pause.png) !important; left: 15px; top: 12px; } .jp-audio .jp-play:focus { background: var(--accent-primary) !important; border-color: var(--accent-primary) !important; } .jp-audio .jp-play:focus:after { background: url(../img/play.png); } .jp-seek-bar>div { height: 5px; background: #e1e1e1; cursor: pointer; width: 245px; } .player_bars { width: 350px; display: table; padding-left: 50px; position: relative; padding-top: 25px; float: left; margin-right: 30px; } .jp-play-bar { position: relative; height: 100%; background: var(--accent-primary); overflow: visible !important; } .jp-current-time { font-size: 15px; color: #111111; position: absolute; left: -50px; top: -9px; } .jp-duration { font-size: 15px; color: #111111; position: absolute; right: 0; top: 16px; } .player_controls_box { width: 50px; float: left; margin-right: 20px; } .jp-mute { font-size: 18px; border: none; background: none; color: #111111; position: absolute; left: 0; top: 13px; } .jp-volume-bar { height: 5px; width: 70px; background: #e1e1e1; cursor: pointer; } .jp-volume-bar-value { background: var(--accent-primary); height: 100%; } .jp-volume-controls { position: relative; width: 95px; float: left; padding-left: 30px; padding-top: 25px; } .single_player_container { overflow: hidden; margin-bottom: 40px; } .single_player_container:last-child { margin-bottom: 0; } .single_player_container h4 { font-size: 26px; color: #111111; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; } .track__pic { position: relative; z-index: 1; } .track__pic:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #f5f5f5; content: ""; z-index: -1; } .track__pic img { position: relative; top: -50px; width: calc(100% - 40px); margin-left: 40px; height: 502px; } /*--------------------- Youtube -----------------------*/ .youtube { padding-bottom: 50px; } .youtube .section-title { text-align: center; } .youtube-title-wrap { margin-bottom: 80px; padding-top: 20px; } /* Grilla fluida: no depende de una cantidad fija de columnas de Bootstrap, así que 1, 4, 6, 8 (o cualquier cantidad de) videos siempre se acomodan bien. Cada tarjeta ocupa un mínimo de 280px y crece para llenar el espacio disponible; sin media queries. */ .youtube-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; } .youtube-empty-state-wrap { grid-column: 1 / -1; text-align: center; } .youtube-card { position: relative; border-radius: 16px; overflow: hidden; background: #ffffff; cursor: pointer; box-shadow: 0 8px 25px rgba(17, 17, 17, 0.12); -webkit-transition: transform 0.35s ease, box-shadow 0.35s ease; -o-transition: transform 0.35s ease, box-shadow 0.35s ease; transition: transform 0.35s ease, box-shadow 0.35s ease; } .youtube-card:hover, .youtube-card:focus-visible { transform: translateY(-6px); box-shadow: 0 0 18px rgba(255, 0, 127, 0.35), 0 0 34px rgba(0, 188, 212, 0.22), 0 18px 35px rgba(17, 17, 17, 0.2); outline: none; } .youtube-card__pic { position: relative; height: 220px; overflow: hidden; } .youtube-card__thumb { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.45s ease; } .youtube-card:hover .youtube-card__thumb, .youtube-card:focus-visible .youtube-card__thumb { transform: scale(1.04); } .youtube-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%); opacity: 0; transition: opacity 0.35s ease; } .youtube-card:hover .youtube-card__overlay, .youtube-card:focus-visible .youtube-card__overlay { opacity: 1; } .youtube-card__badge { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-block; background: rgba(5, 5, 11, 0.65); color: var(--accent-secondary); border: 1px solid var(--accent-secondary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 4px 10px; border-radius: 20px; text-shadow: 0 0 8px rgba(0, 188, 212, 0.9); box-shadow: 0 0 10px rgba(0, 188, 212, 0.45); } .youtube-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 62px; height: 62px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.2); color: #ffffff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s ease; } .youtube-card__play i { position: relative; left: 2px; } .youtube-card:hover .youtube-card__play, .youtube-card:focus-visible .youtube-card__play { background: var(--accent-primary); animation: youtubePlayPulse 1.6s ease-in-out infinite; } @keyframes youtubePlayPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 0, 127, 0.55); } 70% { box-shadow: 0 0 0 16px rgba(255, 0, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 0, 127, 0); } } .youtube-card__text { padding: 20px 22px 24px; } .youtube-card__text h4 { font-size: 22px; color: #111111; line-height: 1.35; font-weight: 700; margin: 0; } /* Descripción de las tarjetas dinámicas de Videos Recomendados (ver js/recommended-videos.js). Solo se muestra si el video cargado en /admin trae ese campo completo. La categoría ahora vive como badge fluorescente sobre la miniatura (.youtube-card__badge). */ .youtube-item-description { color: #888888; font-size: 14px; line-height: 1.6; margin: 8px 0 0; } /*--------------------- Video Lightbox (modal de Videos Recomendados) -----------------------*/ body.video-lightbox-open { overflow: hidden; } .video-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .video-lightbox.is-active { opacity: 1; visibility: visible; } .video-lightbox__backdrop { position: absolute; inset: 0; background: rgba(5, 5, 11, 0.9); } .video-lightbox__dialog { position: relative; width: 100%; max-width: 960px; transform: scale(0.96); transition: transform 0.3s ease; } .video-lightbox.is-active .video-lightbox__dialog { transform: scale(1); } .video-lightbox__iframe-wrap { position: relative; width: 100%; padding-top: 56.25%; /* proporción 16:9 */ border-radius: 12px; overflow: hidden; box-shadow: 0 0 40px rgba(255, 0, 127, 0.3), 0 0 70px rgba(0, 188, 212, 0.2); } .video-lightbox__iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-lightbox__close { position: absolute; top: -46px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.1); color: #ffffff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease; } .video-lightbox__close:hover { background: var(--accent-primary); transform: rotate(90deg); } @media (max-width: 767px) { .video-lightbox__close { top: -42px; right: 0; } } /*--------------------- Countdown -----------------------*/ .countdown { padding-bottom: 560px; } .countdown.countdown--page { padding-top: 150px; padding-bottom: 150px; } .countdown__text { text-align: center; margin-bottom: 36px; } .countdown__text h1 { font-size: 90px; color: #ffffff; font-family: "Rockville Solid Regular"; color: #ffffff; margin-bottom: 25px; } .countdown__text h4 { font-size: 26px; font-family: "Now Regular"; color: #ffffff; text-transform: uppercase; letter-spacing: 4px; } .countdown__timer { text-align: center; margin-bottom: 30px; } .countdown__item { display: inline-block; margin-right: 80px; margin-bottom: 30px; } .countdown__item:last-child { margin-right: 0; } .countdown__item span { font-size: 90px; font-family: "Rajdhani", sans-serif; font-weight: 700; color: #ffffff; display: block; line-height: 100px; } .countdown__item p { color: #ffffff; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 0; } .buy__tickets { text-align: center; } /*--------------------- Discography -----------------------*/ .discography { padding-bottom: 40px; padding-top: 120px; overflow: hidden; } .discography .section-title { margin-bottom: 90px; } .discography__item { margin-bottom: 45px; -webkit-box-shadow: 0px 5px 10px rgba(22, 41, 124, 0.1); box-shadow: 0px 5px 10px rgba(22, 41, 124, 0.1); } .discography__item__pic img { min-width: 100%; } .discography__item__text { padding: 25px 30px 35px; text-align: center; } .discography__item__text span { font-size: 18px; color: var(--accent-primary); font-weight: 700; } .discography__item__text h4 { font-size: 22px; text-transform: uppercase; color: #111111; margin-top: 10px; margin-bottom: 25px; } .discography__item__text a { display: inline-block; margin-right: 10px; } .discography__item__text a:last-child { margin-right: 0; } .pagination__links { text-align: center; padding-top: 10px; } .pagination__links.blog__pagination { text-align: left; } .pagination__links a { display: inline-block; font-size: 15px; color: #111111; text-transform: uppercase; letter-spacing: 2px; background: #f2f2f2; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; margin-right: 6px; margin-bottom: 5px; padding: 14px 22px 12px; } .pagination__links a:last-child { margin-right: 0; } .pagination__links a:hover { background: #290849; color: #ffffff; } /*--------------------- Footer -----------------------*/ .footer { padding-top: 300px; padding-bottom: 60px; margin-top: -547px; height: 549px; } /* Solo la usa contacto.html: sin la imagen de fondo decorativa (ver HTML, ya no lleva set-bg/data-setbg) hace falta un fondo sólido propio + un padding-top normal, porque los valores base de .footer (padding-top:300px, height:549px) están pensados para dejar lugar a esa imagen y quedarían como un hueco vacío enorme sin ella. */ .footer.footer--normal { margin-top: 0; padding-top: 70px; height: auto; background: #0a0a16; } .footer__address { margin-bottom: 50px; } .footer__address ul li { list-style: none; padding-left: 70px; position: relative; margin-bottom: 30px; } .footer__address ul li:last-child { margin-bottom: 0; } .footer__address ul li i { font-size: 18px; color: var(--accent-primary); height: 50px; width: 50px; background: #ffffff; border-radius: 50%; line-height: 50px; text-align: center; position: absolute; left: 0; top: 0; } .footer__address ul li p { color: #ffffff; opacity: 0.7; margin-bottom: 8px; } .footer__address ul li h6 { font-size: 15px; font-weight: 700; color: #ffffff; } .footer__social { text-align: center; position: relative; margin-bottom: 50px; } .footer__social::before { position: absolute; left: -46px; top: 3px; width: 1px; height: 130px; background: rgba(255, 255, 255, 0.2); content: ""; } .footer__social::after { position: absolute; right: -50px; top: 3px; width: 1px; height: 130px; background: rgba(255, 255, 255, 0.2); content: ""; } .footer__social h2 { color: #ffffff; font-weight: 700; margin-bottom: 25px; } .footer__social .footer__social__links a { font-size: 18px; color: var(--accent-primary); height: 50px; width: 50px; background: #ffffff; border-radius: 50%; line-height: 50px; text-align: center; display: inline-block; margin-right: 10px; } .footer__social .footer__social__links a:last-child { margin-right: 0; } .footer__newslatter { margin-bottom: 50px; } .footer__newslatter h4 { font-size: 26px; color: #ffffff; font-weight: 700; margin-bottom: 30px; } .footer__newslatter form { position: relative; } .footer__newslatter form input { height: 50px; font-size: 15px; color: #ffffff; width: 100%; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); padding-left: 20px; } .footer__newslatter form input::-webkit-input-placeholder { color: #ffffff; } .footer__newslatter form input::-moz-placeholder { color: #ffffff; } .footer__newslatter form input:-ms-input-placeholder { color: #ffffff; } .footer__newslatter form input::-ms-input-placeholder { color: #ffffff; } .footer__newslatter form input::placeholder { color: #ffffff; } /* Solo la usa contacto.html: foco con glow cian, en línea con el resto de la paleta neón de la página. */ .footer.footer--normal .footer__newslatter form input:focus { outline: none; border-color: var(--accent-secondary); box-shadow: 0 0 10px rgba(0, 188, 212, 0.4); } .footer__newslatter form button { font-size: 16px; color: #ffffff; position: absolute; right: 0; top: 0; height: 100%; padding: 0 18px; background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); border: none; transition: box-shadow 0.3s ease; } .footer.footer--normal .footer__newslatter form button:hover, .footer.footer--normal .footer__newslatter form button:focus-visible { box-shadow: 0 0 14px rgba(255, 0, 127, 0.45); } .footer__copyright__text { text-align: center; } .footer__copyright__text p { color: #999999; } .footer__copyright__text a { color: #999999; text-decoration: underline; } .footer__copyright__text a:hover { color: var(--accent-primary); } .footer__copyright__text i { color: #c11; } /*--------------------- Breadcrumb -----------------------*/ /* Solo la usa contacto.html (Glassmorphism Dark Studio): fondo oscuro unificado con la sección de contacto, sin el bloque blanco que quedaba antes por no tener background propio. */ .breadcrumb-option { padding-top: 35px; padding-bottom: 20px; background: #0a0a16; } .breadcrumb__links a { font-size: 15px; color: #b7b7b7; margin-right: 18px; display: inline-block; position: relative; transition: color 0.3s ease; } .breadcrumb__links a:hover { color: var(--accent-primary); } .breadcrumb__links a:after { position: absolute; right: -14px; top: 0; content: "|"; color: #444455; } .breadcrumb__links a i { margin-right: 5px; } /* Sección activa (texto plano, no es link) con acento magenta. */ .breadcrumb__links span { font-size: 15px; color: var(--accent-primary); font-weight: 600; display: inline-block; text-shadow: 0 0 10px rgba(255, 0, 127, 0.45); } /*--------------------- About -----------------------*/ .about { padding-top: 0; } .about.about--page { padding-top: 80px; padding-bottom: 80px; } .about.about--page .section-title { margin-bottom: 28px; } .about.about--page .section-title h2 { line-height: 55px; } .about.about--page .about__text { padding-top: 15px; } .about.about--page .about__text p { color: #111111; } .about__text { padding-top: 110px; } .about__text p { margin-bottom: 35px; } /*--------------------- Skills -----------------------*/ .skills { padding-bottom: 0; padding-top: 80px; } .skills__content { background: var(--accent-primary); height: 500px; padding: 100px 70px 60px; } .skills__content .section-title h2 { color: #ffffff; } .skills__content .section-title h1 { color: #ffffff; opacity: 0.1; text-align: center; } .skills__content p { color: #ffffff; margin-bottom: 32px; } .skill__bar__item { margin-bottom: 20px; } .skill__bar__item p { font-size: 15px; font-weight: 500; color: #ffffff; margin-bottom: 10px; } .skill__bar__item .barfiller { width: 100%; height: 5px; background: rgba(255, 255, 255, 0.2); border: none; margin-bottom: 0; -webkit-box-shadow: none; box-shadow: none; } .skill__bar__item .barfiller .tip { margin-top: -32px; padding: 0; font-size: 15px; color: #fff; background: transparent; } .skill__bar__item .barfiller .tip:after { display: none; } .skills__video { height: 500px; 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; } .skills__video .play-btn { font-size: 26px; color: var(--accent-primary); height: 90px; width: 90px; border-radius: 50%; background: rgba(117, 31, 221, 0.3); display: inline-block; line-height: 90px; text-align: center; position: relative; z-index: 1; } .skills__video .play-btn i { position: relative; top: 2px; left: 2px; } .skills__video .play-btn:after { position: absolute; left: 15px; top: 15px; height: 60px; width: 60px; background: #ffffff; border-radius: 50%; content: ""; z-index: -1; } /*--------------------- About Pic -----------------------*/ .about-pic { overflow: hidden; } .about-pic .container-fluid { padding-right: 0; } .about-pic img { min-width: 100%; margin-bottom: 10px; padding-right: 10px; } /*--------------------- About Services -----------------------*/ .about-services { padding-bottom: 50px; } .about-services .section-title { margin-bottom: 60px; } .about__services__item { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .about__services__item:hover { -webkit-box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1); box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1); } .about__services__item__pic { height: 240px; position: relative; } .about__services__item__pic .icon { height: 50px; width: 50px; background: var(--accent-primary); border-radius: 50%; line-height: 50px; text-align: center; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -25px; } .about__services__item__text { text-align: center; padding: 50px 10px 30px; } .about__services__item__text h4 { font-size: 26px; color: #111111; font-weight: 700; margin-bottom: 12px; } .about__services__item__text p { margin-bottom: 0; } /*--------------------- Feature -----------------------*/ .feature { padding-bottom: 70px; } .feature.feature--about .section-title span { color: #0071e4; } .feature.feature--about .feature__item { background: #f5f5f5; } .feature.feature--about .feature__item h5 { color: #111111; } .feature__text { padding-top: 80px; } .feature__text .section-title { margin-bottom: 20px; } .feature__text p { margin-bottom: 26px; } .feature__item { background: #0c2b4b; text-align: center; padding: 40px 10px 35px; margin-bottom: 30px; } .feature__item.right-column { margin-top: 120px; } .feature__item h5 { font-weight: 700; text-transform: uppercase; color: #ffffff; margin-top: 25px; } /*--------------------- Services -----------------------*/ .services { overflow: hidden; } .services__left { height: 640px; 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; } .services__left .play-btn { font-size: 26px; color: #ffffff; height: 90px; width: 90px; border-radius: 50%; background: -webkit-gradient(linear, left top, right top, from(rgba(127, 0, 173, 0.3)), to(rgba(93, 0, 206, 0.3))); background: -o-linear-gradient(left, rgba(127, 0, 173, 0.3), rgba(93, 0, 206, 0.3)); background: linear-gradient(to right, rgba(127, 0, 173, 0.3), rgba(93, 0, 206, 0.3)); display: inline-block; line-height: 90px; text-align: center; position: relative; z-index: 1; } .services__left .play-btn i { position: relative; top: 2px; left: 2px; } .services__left .play-btn:after { position: absolute; left: 15px; top: 15px; height: 60px; width: 60px; background: -webkit-gradient(linear, left top, right top, from(#7E00AD), to(#5C00CE)); background: -o-linear-gradient(left, #7E00AD, #5C00CE); background: linear-gradient(to right, #7E00AD, #5C00CE); border-radius: 50%; content: ""; z-index: -1; } .services__list { margin: 0; } .service__item { background: var(--accent-primary); height: 320px; padding: 70px 40px 40px 70px; } .service__item.deep-bg { background: #5400BC; } .service__item h4 { font-size: 26px; color: #ffffff; font-weight: 700; margin-top: 25px; margin-bottom: 10px; } .service__item p { color: #ffffff; margin-bottom: 0; } /*--------------------- Tours -----------------------*/ .tours { padding-top: 150px; padding-bottom: 60px; } .tours__item__text { padding-right: 30px; margin-bottom: 100px; } .tours__item__text.tours__item__text--right { padding-left: 30px; padding-right: 0; } .tours__item__text h2 { font-size: 42px; color: #111111; text-transform: uppercase; margin-bottom: 24px; } .tours__item__text .tours__text__widget { overflow: hidden; border-bottom: 2px solid #f2f2f2; padding-bottom: 38px; } .tours__item__text .tours__text__widget ul { float: left; } .tours__item__text .tours__text__widget ul li { list-style: none; font-size: 15px; color: #111111; padding-left: 35px; position: relative; margin-bottom: 10px; } .tours__item__text .tours__text__widget ul li:last-child { margin-bottom: 0; } .tours__item__text .tours__text__widget ul li i { color: var(--accent-primary); position: absolute; left: 0; top: 3px; } .tours__item__text .tours__text__widget ul li span { display: inline-block; padding-right: 8px; position: relative; margin-right: 5px; } .tours__item__text .tours__text__widget ul li span:last-child { padding-right: 0; margin-right: 0; } .tours__item__text .tours__text__widget ul li span:last-child:after { display: none; } .tours__item__text .tours__text__widget ul li span:after { position: absolute; right: 0; top: 0; content: "|"; } .tours__item__text .tours__text__widget .price { font-size: 18px; color: #ffffff; font-weight: 700; display: inline-block; padding: 14px 25px 12px 30px; background: var(--accent-primary); float: right; } .tours__item__text .tours__text__desc { padding-top: 40px; margin-bottom: 65px; } .tours__item__text .tours__text__desc p { color: #111111; margin-bottom: 20px; } .tours__item__text .tours__text__desc p:last-child { margin-bottom: 0; } .tours__item__pic { position: relative; z-index: 1; padding-right: 50px; margin-bottom: 110px; padding-left: 30px; } .tours__item__pic.tours__item__pic--left { padding-left: 50px; padding-right: 0; } .tours__item__pic.tours__item__pic--left:after { left: 0; } .tours__item__pic.tours__item__pic--last { margin-bottom: 0; } .tours__item__pic:after { position: absolute; left: 50px; top: -50px; width: calc(100% - 50px); height: 100%; border: 20px solid rgba(9, 53, 247, 0.1); content: ""; z-index: -1; } .tours__item__pic img { min-width: 100%; } /*--------------------- Videos -----------------------*/ .videos { padding-bottom: 90px; } .videos .section-title { margin-bottom: 70px; } .videos__large__item { height: 585px; position: relative; 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; margin-bottom: 30px; } .videos__large__item .play-btn { height: 50px; width: 50px; background: var(--accent-primary); border-radius: 50%; font-size: 18px; line-height: 50px; text-align: center; display: inline-block; color: #ffffff; } .videos__large__item__text { background: rgba(7, 14, 38, 0.7); padding: 25px 30px 25px; position: absolute; left: 0; bottom: 0; width: 100%; } .videos__large__item__text h4 { color: #ffffff; font-weight: 700; } .videos__large__item__text ul li { font-size: 13px; list-style: none; display: inline-block; margin-right: 18px; color: #ffffff; position: relative; } .videos__large__item__text ul li:after { position: absolute; right: -12px; top: 2px; height: 17px; width: 1px; background: #ffffff; content: ""; } .videos__large__item__text ul li:last-child { margin-right: 0; } .videos__large__item__text ul li:last-child:after { display: none; } .videos__item__pic { height: 180px; 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; } .videos__item__pic .play-btn { height: 40px; width: 40px; background: var(--accent-primary); border-radius: 50%; font-size: 16px; line-height: 40px; text-align: center; display: inline-block; color: #ffffff; } .videos__item__text { padding-top: 20px; } .videos__item__text h5 { color: #111111; font-weight: 700; line-height: 26px; margin-bottom: 5px; } .videos__item__text ul li { font-size: 13px; list-style: none; display: inline-block; margin-right: 18px; color: var(--accent-primary); position: relative; } .videos__item__text ul li:after { position: absolute; right: -12px; top: 2px; height: 17px; width: 1px; background: #888888; content: ""; } .videos__item__text ul li:last-child { margin-right: 0; color: #888888; } .videos__item__text ul li:last-child:after { display: none; } .videos__slider .col-lg-3 { max-width: 100%; } .videos__slider.owl-carousel .owl-nav button { font-size: 18px; color: #888888; height: 50px; width: 25px; background: #ffffff; line-height: 50px; position: absolute; left: 15px; top: 22%; } .videos__slider.owl-carousel .owl-nav button.owl-next { left: auto; right: 15px; } /*--------------------- Blog -----------------------*/ .blog { padding-bottom: 60px; } .blog .section-title { margin-bottom: 80px; } .blog__large { margin-bottom: 45px; -webkit-box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1); box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1); margin-bottom: 50px; } .blog__large__pic { height: 370px; position: relative; } .blog__large__pic a { font-size: 16px; height: 40px; width: 40px; background: rgba(245, 245, 245, 0.3); border-radius: 50%; color: #ffffff; line-height: 40px; text-align: center; display: inline-block; position: absolute; right: 12px; bottom: 12px; } .blog__large__text { background: #ffffff; text-align: center; padding: 30px 40px 0; } .blog__large__text span { font-size: 13px; text-transform: uppercase; color: var(--accent-primary); } .blog__large__text h4 { color: #111111; font-weight: 700; line-height: 31px; margin-top: 5px; margin-bottom: 15px; } .blog__large__text p { margin-bottom: 40px; } .blog__large__widget { border-top: 1px solid #f2f2f2; padding: 15px 0 20px; text-align: left; margin: 0 30px; } .blog__large__widget .right__widget { text-align: right; } .blog__large__widget ul li { font-size: 13px; color: #888888; display: inline-block; list-style: none; margin-right: 20px; position: relative; } .blog__large__widget ul li span { color: #111111; } .blog__large__widget ul li:after { position: absolute; right: -14px; top: -2px; content: "|"; } .blog__large__widget ul li:last-child { margin-right: 0; } .blog__large__widget ul li:last-child:after { display: none; } .blog__item { -webkit-box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1); box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1); margin-bottom: 50px; } .blog__item__pic img { min-width: 100%; } .blog__item__text { text-align: center; background: #ffffff; padding: 20px 20px 25px; } .blog__item__text span { font-size: 13px; text-transform: uppercase; color: var(--accent-primary); } .blog__item__text h5 { color: #111111; font-weight: 700; line-height: 26px; font-size: 20px; margin-top: 10px; margin-bottom: 12px; } .blog__item__text ul li { font-size: 13px; color: #888888; display: inline-block; list-style: none; margin-right: 20px; position: relative; } .blog__item__text ul li span { color: #111111; } .blog__item__text ul li:after { position: absolute; right: -14px; top: -2px; content: "|"; } .blog__item__text ul li:last-child { margin-right: 0; } .blog__item__text ul li:last-child:after { display: none; } /*--------------------- Blog Sidebar -----------------------*/ .blog__sidebar__item { text-align: center; margin-bottom: 65px; } .blog__sidebar__item:last-child { margin-bottom: 0; } .blog__sidebar__item form input { height: 50px; font-size: 15px; color: #444444; padding-left: 20px; border: 1px solid #e1e1e1; width: 100%; margin-bottom: 20px; } .blog__sidebar__item form input::-webkit-input-placeholder { color: #444444; } .blog__sidebar__item form input::-moz-placeholder { color: #444444; } .blog__sidebar__item form input:-ms-input-placeholder { color: #444444; } .blog__sidebar__item form input::-ms-input-placeholder { color: #444444; } .blog__sidebar__item form input::placeholder { color: #444444; } .blog__sidebar__title { text-align: center; margin-bottom: 35px; } .blog__sidebar__title h4 { color: #111111; font-weight: 700; position: relative; padding-bottom: 20px; } .blog__sidebar__title h4::before { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; width: 70px; background: #e1e1e1; content: ""; margin: 0 auto; } .blog__sidebar__social a { display: inline-block; font-size: 18px; color: #111111; width: 50px; height: 50px; background: #f2f2f2; border-radius: 50%; line-height: 50px; text-align: center; margin-right: 6px; margin-bottom: 5px; } .blog__sidebar__social a:last-child { margin-right: 6px; } .recent__item { display: block; overflow: hidden; margin-bottom: 25px; text-align: left; } .recent__item__pic { float: left; margin-right: 25px; } .recent__item__text { overflow: hidden; } .recent__item__text h6 { color: #111111; line-height: 21px; font-weight: 700; } .recent__item__text span { font-size: 13px; color: #888888; } /*--------------------- Blog Details -----------------------*/ .blog-details { padding-bottom: 60px; padding-top: 70px; } .blog__details__item { margin-bottom: 32px; } .blog__details__item__pic { height: 385px; position: relative; } .blog__details__item__pic a { font-size: 16px; height: 40px; width: 40px; background: rgba(245, 245, 245, 0.3); border-radius: 50%; color: #ffffff; line-height: 40px; text-align: center; display: inline-block; position: absolute; right: 12px; bottom: 12px; } .blog__details__item__text { background: #ffffff; padding-top: 30px; } .blog__details__item__text span { font-size: 13px; text-transform: uppercase; color: var(--accent-primary); } .blog__details__item__text h3 { color: #111111; font-weight: 700; line-height: 31px; margin-top: 5px; margin-bottom: 15px; } .blog__details__item__text p { margin-bottom: 40px; } .blog__details__item__widget { border-top: 1px solid #f2f2f2; padding-top: 15px; text-align: left; } .blog__details__item__widget ul li { font-size: 13px; color: #888888; display: inline-block; list-style: none; margin-right: 20px; position: relative; } .blog__details__item__widget ul li span { color: #111111; } .blog__details__item__widget ul li:after { position: absolute; right: -14px; top: -2px; content: "|"; } .blog__details__item__widget ul li:last-child { margin-right: 0; } .blog__details__item__widget ul li:last-child:after { display: none; } .blog__details__desc { margin-bottom: 54px; } .blog__details__desc p { margin-bottom: 20px; } .blog__details__desc p:last-child { margin-bottom: 0; } .blog__details__quote { border: 1px solid #e1e1e1; padding: 35px 40px 35px 40px; position: relative; margin-bottom: 35px; } .blog__details__quote p { font-size: 18px; color: #111111; line-height: 31px; } .blog__details__quote h6 { font-size: 15px; color: #888888; text-transform: uppercase; } .blog__details__quote i { font-size: 36px; color: var(--accent-primary); position: absolute; right: 40px; bottom: 35px; } .blog__details__tags { padding-top: 20px; margin-bottom: 60px; } .blog__details__tags a { display: inline-block; font-size: 15px; color: #444444; padding: 12px 20px 10px; background: #f5f5f5; margin-right: 10px; } .blog__details__tags a:last-child { margin-right: 0; } .blog__details__option { margin-bottom: 60px; } .blog__option__btn { display: block; overflow: hidden; } .blog__option__btn.blog__option__btn--next { text-align: right; } .blog__option__btn.blog__option__btn--next .option__btn__name i { margin-right: 0; margin-left: 6px; } .blog__option__btn.blog__option__btn--next .blog__option__btn__item { overflow: hidden; } .blog__option__btn.blog__option__btn--next .blog__option__btn__item .blog__option__btn__pic { float: right; margin-right: 0; margin-left: 30px; } .blog__option__btn .option__btn__name { font-size: 15px; color: #444444; font-weight: 700; text-transform: uppercase; margin-bottom: 25px; } .blog__option__btn .option__btn__name i { font-size: 18px; font-weight: 700; margin-right: 6px; } .blog__option__btn__pic { float: left; margin-right: 26px; } .blog__option__btn__text { overflow: hidden; } .blog__option__btn__text h6 { color: #111111; font-weight: 700; line-height: 21px; } .blog__option__btn__text span { color: #888888; font-size: 13px; } .blog__details__services { margin-bottom: 30px; } .blog__details__services__title, .blog__details__form__title { text-align: center; margin-bottom: 30px; } .blog__details__services__title h4, .blog__details__form__title h4 { color: #111111; font-weight: 700; position: relative; padding-bottom: 20px; font-size: 26px; } .blog__details__services__title h4::before, .blog__details__form__title h4::before { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; width: 70px; background: #e1e1e1; content: ""; margin: 0 auto; } .blog__details__services__item { -webkit-box-shadow: 0px 5px 15px rgba(0, 61, 85, 0.07); box-shadow: 0px 5px 15px rgba(0, 61, 85, 0.07); margin-bottom: 30px; } .blog__details__services__item__pic img { min-width: 100%; } .blog__details__services__item__text { padding: 15px 20px 10px; } .blog__details__services__item__text h6 a { font-size: 17px; color: #111111; font-weight: 700; line-height: 22px; } .blog__details__services__item__text span { color: #888888; font-size: 13px; } .blog__details__form form .input__list, .contact__form form .input__list { margin-right: -20px; overflow: hidden; } .blog__details__form form .input__list input, .contact__form form .input__list input { height: 50px; font-size: 13px; color: #666666; padding-left: 20px; border: 1px solid #e1e1e1; width: calc(33.33% - 20px); margin-bottom: 20px; margin-right: 16px; } .blog__details__form form .input__list input::-webkit-input-placeholder, .contact__form form .input__list input::-webkit-input-placeholder { color: #666666; } .blog__details__form form .input__list input::-moz-placeholder, .contact__form form .input__list input::-moz-placeholder { color: #666666; } .blog__details__form form .input__list input:-ms-input-placeholder, .contact__form form .input__list input:-ms-input-placeholder { color: #666666; } .blog__details__form form .input__list input::-ms-input-placeholder, .contact__form form .input__list input::-ms-input-placeholder { color: #666666; } .blog__details__form form .input__list input::placeholder, .contact__form form .input__list input::placeholder { color: #666666; } .blog__details__form form textarea, .contact__form form textarea { height: 120px; font-size: 13px; color: #666666; padding-left: 20px; padding-top: 12px; border: 1px solid #e1e1e1; width: 100%; margin-bottom: 14px; resize: none; } .blog__details__form form textarea::-webkit-input-placeholder, .contact__form form textarea::-webkit-input-placeholder { color: #666666; } .blog__details__form form textarea::-moz-placeholder, .contact__form form textarea::-moz-placeholder { color: #666666; } .blog__details__form form textarea:-ms-input-placeholder, .contact__form form textarea:-ms-input-placeholder { color: #666666; } .blog__details__form form textarea::-ms-input-placeholder, .contact__form form textarea::-ms-input-placeholder { color: #666666; } .blog__details__form form textarea::placeholder, .contact__form form textarea::placeholder { color: #666666; } /*--------------------- Map -----------------------*/ .map { height: 585px; margin-top: 60px; } .map iframe { width: 100%; } /*--------------------- Contact -----------------------*/ /* Glassmorphism Dark Studio: toda la sección de contacto vive sobre un fondo oscuro unificado (ver también .breadcrumb-option arriba, que comparte el mismo color para que no quede un salto/corte visual). */ .contact { padding-top: 80px; padding-bottom: 50px; background: #0a0a16; color: #ffffff; } .contact__address .section-title { margin-bottom: 20px; } .contact__address .section-title h2 { text-transform: none; font-family: 'Rock Salt', cursive; font-size: 30px; color: #ffffff; line-height: 1.5; text-shadow: 0 0 16px rgba(255, 0, 127, 0.5), 0 0 30px rgba(255, 0, 127, 0.2); } .contact__address p { margin-bottom: 34px; color: #b7b7b7; } .contact__address ul li { list-style: none; padding-left: 100px; position: relative; margin-bottom: 30px; } .contact__address ul li:last-child { margin-bottom: 0; } /* Círculos de ícono: antes eran círculos blancos sólidos; ahora son contenedores oscuros translúcidos con borde sutil y un resplandor (glow) del color de la marca al pasar el mouse. */ .contact__address ul li i { font-size: 26px; height: 64px; width: 64px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; line-height: 62px; text-align: center; position: absolute; left: 0; top: -4px; transition: var(--transition-base); } .contact__address ul li:nth-child(1) i { color: var(--accent-primary); } .contact__address ul li:nth-child(2) i { color: var(--accent-secondary); } .contact__address ul li:hover i { background: rgba(255, 255, 255, 0.08); border-color: currentColor; box-shadow: 0 0 18px currentColor; } .contact__address ul li h5 { font-size: 20px; color: #ffffff; font-weight: 700; margin-bottom: 10px; } .contact__address ul li p { margin-bottom: 0; color: #b7b7b7; } .contact__address ul li span { font-size: 15px; color: #ffffff; display: inline-block; margin-right: 25px; position: relative; } .contact__address ul li span:after { position: absolute; right: -20px; top: -1px; content: "."; font-size: 39px; line-height: 0; border-radius: 50%; } .contact__address ul li span:last-child { margin-right: 0; } .contact__address ul li span:last-child:after { display: none; } .contact__form .section-title { margin-bottom: 30px; } .contact__form .section-title h2 { text-transform: none; font-family: 'Rock Salt', cursive; font-size: 35px; color: var(--accent-primary); display: inline-block; text-shadow: 0 0 16px rgba(255, 0, 127, 0.55), 0 0 32px rgba(0, 188, 212, 0.35); } .contact__form p { margin-bottom: 34px; color: #b7b7b7; } /* Tarjeta glassmorphism que envuelve la columna de información de contacto (izquierda). */ .contact-info-card { background: rgba(255, 255, 255, 0.03); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 30px; } /* Botón de contacto rápido por WhatsApp, dentro de la tarjeta de información. Abre un chat directo con mensaje prellenado. */ .contact__whatsapp-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 30px; padding: 16px 20px; background: #25d366; color: #ffffff; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; border-radius: 10px; text-decoration: none; box-shadow: 0 0 20px rgba(37, 211, 102, 0.35); transition: transform 0.3s ease, box-shadow 0.3s ease; } .contact__whatsapp-btn:hover, .contact__whatsapp-btn:focus-visible { transform: translateY(-3px); box-shadow: 0 0 30px rgba(37, 211, 102, 0.55); color: #ffffff; } .contact__whatsapp-btn i { font-size: 20px; } /* Mapa de Google Maps embebido en la tarjeta de contacto. El filtro es el truco estándar para aproximar un tema oscuro sin depender de un estilo de mapa vía API key. */ .contact-map-frame { border-radius: 12px; filter: invert(90%) hue-rotate(180deg) contrast(100%); margin-top: 15px; width: 100%; height: 180px; border: 0; display: block; } /* Botón chico bajo el textarea de ubicación del evento (formulario), para que el cliente pueda verificar la dirección que escribió antes de enviar. Abre Google Maps en una pestaña nueva, no depende del iframe de arriba. */ .quote-map-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; background: transparent; border: none; padding: 0; color: var(--accent-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: color 0.3s ease; } .quote-map-link:hover, .quote-map-link:focus-visible { color: var(--accent-primary); } .quote-submit-btn:disabled { opacity: 0.75; cursor: not-allowed; transform: none; animation: none; } /* Alerta de resultado del envío (éxito o error), inyectada por JS en #quote-alert al terminar de intentar el envío por EmailJS. */ .quote-alert { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 18px 20px; border-radius: 10px; font-size: 14px; line-height: 1.6; color: #ffffff; } .quote-alert i { font-size: 20px; margin-top: 2px; flex-shrink: 0; } .quote-alert--success { background: rgba(76, 175, 80, 0.1); border: 1px solid rgba(76, 175, 80, 0.4); } .quote-alert--success i { color: var(--accent-success); } .quote-alert--error { background: rgba(255, 77, 77, 0.08); border: 1px solid rgba(255, 77, 77, 0.4); } .quote-alert--error i { color: #ff4d4d; } .quote-alert__whatsapp-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 16px; background: #25d366; color: #ffffff; font-weight: 700; font-size: 13px; border-radius: 8px; text-decoration: none; box-shadow: 0 0 12px rgba(37, 211, 102, 0.35); transition: transform 0.3s ease; } .quote-alert__whatsapp-btn:hover, .quote-alert__whatsapp-btn:focus-visible { transform: translateY(-2px); color: #ffffff; } /* Dropdown de sugerencias de Google Places Autocomplete (#ubicacion_evento). Google lo inserta directo en , fuera de #booking-form, así que hay que temizarlo aparte para que no rompa el tema oscuro. */ .pac-container { background: #14141f; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; margin-top: 4px; font-family: "Now Regular"; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .pac-item { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.06); color: #b7b7b7; padding: 8px 12px; cursor: pointer; } .pac-item:hover, .pac-item-selected { background: rgba(255, 255, 255, 0.06); } .pac-item-query { color: #ffffff; } .pac-matched { color: var(--accent-secondary); } .pac-icon { filter: invert(1); } /* Link de contingencia "Ver directo en YouTube" dentro del modal del video del hero (.video-popup, ver index.html). El CSS del plugin no declara position:relative en el scaler, así que lo forzamos acá para que el link se ancle correctamente debajo del video. */ .mfp-iframe-scaler { position: relative; } .video-popup-fallback-link { position: absolute; bottom: -46px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; background: #ff0000; color: #ffffff; font-size: 13px; font-weight: 700; border-radius: 20px; text-decoration: none; white-space: nowrap; box-shadow: 0 0 14px rgba(255, 0, 0, 0.4); transition: transform 0.3s ease; } .video-popup-fallback-link:hover, .video-popup-fallback-link:focus-visible { transform: translateX(-50%) translateY(-2px); color: #ffffff; } @media (max-width: 767px) { .video-popup-fallback-link { bottom: -42px; font-size: 12px; padding: 7px 14px; } } /* Formulario de presupuesto (#booking-form). Selectores con el ID del formulario para que ganen limpio sin pisar los estilos legacy de ".contact__form form textarea" / ".input__list" (esas reglas son de un layout viejo que este formulario ya no usa). */ #booking-form label { display: block; color: var(--accent-secondary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } #booking-form input, #booking-form select, #booking-form textarea { width: 100%; height: 50px; padding: 0 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: #ffffff; font-size: 14px; font-family: "Now Regular"; /* Íconos nativos del navegador (calendario/reloj) en blanco. */ color-scheme: dark; transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } #booking-form textarea { height: 130px; padding: 15px 18px; resize: none; } #booking-form input::-webkit-input-placeholder, #booking-form textarea::-webkit-input-placeholder { color: #7d7d8a; } #booking-form input::placeholder, #booking-form textarea::placeholder { color: #7d7d8a; } #booking-form input:focus, #booking-form select:focus, #booking-form textarea:focus { outline: none; background: rgba(255, 255, 255, 0.07); border-color: var(--accent-primary); box-shadow: 0 0 12px rgba(255, 0, 127, 0.4); } /* Validación básica: se agrega esta clase por JS a los campos requeridos que quedaron vacíos al intentar enviar. */ #booking-form input.field-invalid, #booking-form select.field-invalid, #booking-form textarea.field-invalid { border-color: #ff4d4d; box-shadow: 0 0 10px rgba(255, 77, 77, 0.5); } .quote-send-options { display: flex; gap: 15px; flex-wrap: wrap; } .quote-send-options .quote-submit-btn, .quote-send-options .quote-email-btn { flex: 1 1 220px; } .quote-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 20px; border: none; border-radius: 8px; background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); color: #ffffff; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 0 20px rgba(255, 0, 127, 0.25); } .quote-submit-btn:hover, .quote-submit-btn:focus-visible { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 22px rgba(255, 0, 127, 0.5), 0 0 36px rgba(0, 188, 212, 0.35); } .quote-email-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 20px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: #ffffff; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: var(--transition-base); } .quote-email-btn:hover, .quote-email-btn:focus-visible { background: rgba(255, 255, 255, 0.09); border-color: var(--accent-secondary); box-shadow: 0 0 12px rgba(0, 188, 212, 0.35); } @media only screen and (max-width: 767px) { .contact-info-card { padding: 24px; } } /*----------------------------------------*/ /* Selecta - Video Hero Showcase (Premium) /*----------------------------------------*/ .video-hero-container { background: linear-gradient(135deg, var(--bg-dark-800) 0%, var(--bg-dark-900) 100%); border: 2px solid var(--accent-primary); border-radius: 15px; overflow: hidden; margin-bottom: 80px; margin-left: 0; margin-right: 0; box-shadow: 0px 10px 30px rgba(255, 0, 127, 0.2); } /* No align-items-center here on purpose: with default (stretch) cross-axis alignment, the video column receives a definite height equal to the row's height, which lets height:100% on the