/* Inspiración Eurodec — cargado en para evitar reflow tardío */ .euro-inspiracion { padding: 45px 15px 55px; background: #f7f7f7; } .euro-inspiracion-inner { max-width: 1180px; margin: 0 auto; } .euro-inspiracion-header { text-align: center; margin-bottom: 30px; } .euro-inspiracion-header h2.euro { margin: 0 auto 14px !important; padding: 12px 35px !important; font-size: 30px; line-height: 1.1; font-weight: 800; } .euro-inspiracion-header p { margin: 0; color: #666; font-size: 18px; line-height: 1.4; } .euro-inspiracion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .euro-insp-card { overflow: hidden; background: #fff; border-radius: 18px; box-shadow: 0 8px 28px rgba(0,0,0,.08); transition: transform .25s ease, box-shadow .25s ease; } .euro-insp-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.12); } .euro-insp-media { position: relative; display: block; width: 100%; padding: 0; border: 0; background-color: #eee; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; cursor: pointer; overflow: hidden; contain: paint; aspect-ratio: 4 / 3; } .euro-insp-play { position: absolute; left: 50%; top: 50%; display: flex; width: 68px; height: 68px; align-items: center; justify-content: center; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(255,255,255,.94); color: #444; font-size: 24px; padding-left: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .2s ease, background .2s ease; } .euro-insp-media:hover .euro-insp-play { transform: translate(-50%,-50%) scale(1.08); background: #fff; } .euro-insp-content { padding: 24px; text-align: left; } .euro-insp-line { display: block; width: 48px; height: 4px; margin-bottom: 15px; border-radius: 5px; background: var(--brand-red); } .euro-insp-content h3 { margin: 0 0 8px; color: #202020; font-size: 25px; line-height: 1.2; font-weight: 800; } .euro-insp-content p { min-height: 50px; margin: 0 0 20px; color: #666; font-size: 16px; line-height: 1.55; } .euro-insp-video-link { display: inline-flex; align-items: center; gap: 12px; padding: 11px 18px; border: 0; border-radius: 10px; background: #fff2f2; color: #d9252b; font-size: 15px; font-weight: 700; cursor: pointer; } .euro-insp-video-link span { font-size: 20px; } .euro-inspiracion-footer { text-align: center; margin-top: 30px; } .euro-insp-cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 310px; padding: 15px 30px; border-radius: 10px; background: var(--brand-red); color: #fff !important; text-decoration: none !important; font-size: 17px; font-weight: 700; box-shadow: 0 8px 20px rgba(236,50,55,.18); } .euro-insp-cta:hover { background: #d9272c; } .euro-insp-cta span { font-size: 23px; } .euro-insp-brand { margin-top: 25px; color: #777; font-size: 11px; letter-spacing: .34em; } .euro-insp-brand > span { display: block; width: 46px; height: 2px; margin: 0 auto 12px; background: var(--brand-red); } .euro-video-modal { position: fixed; inset: 0; z-index: 999999; display: none; align-items: center; justify-content: center; padding: 20px; } .euro-video-modal.is-open { display: flex; } .euro-video-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.82); } .euro-video-dialog { position: relative; z-index: 2; width: min(460px, 100%); padding: 20px; background: #111; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .euro-video-dialog h3 { margin: 0 45px 15px 0; color: #fff; font-size: 18px; } .euro-video-dialog video { display: block; width: 100%; max-height: 76vh; background: #000; border-radius: 12px; } .euro-video-close { position: absolute; right: 12px; top: 8px; width: 38px; height: 38px; border: 0; background: transparent; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; } @media (max-width: 767px) { .euro-inspiracion { position: relative !important; display: block !important; box-sizing: border-box !important; padding: 30px 14px 40px; width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden !important; contain: layout paint; } .euro-inspiracion-inner { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .euro-inspiracion-header { margin-bottom: 22px; } .euro-inspiracion-header h2.euro { width: 100%; max-width: 480px; padding: 13px 20px !important; font-size: 25px; } .euro-inspiracion-header p { padding: 0 10px; font-size: 16px; } .euro-inspiracion-grid { grid-template-columns: 1fr; gap: 17px; width: 100% !important; max-width: 100% !important; } .euro-insp-card { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; border-radius: 16px; transform: none !important; transition: none !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } .euro-insp-card:hover { transform: none !important; } .euro-insp-media { display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 220px !important; min-height: 220px !important; max-height: 220px !important; aspect-ratio: auto !important; transform: none !important; transition: none !important; background-attachment: scroll !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } .euro-insp-content { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 18px 20px 21px; } .euro-insp-line { width: 48px; height: 4px; margin-bottom: 15px; } .euro-insp-content h3 { margin-bottom: 8px; font-size: 21px; } .euro-insp-content p { min-height: 0; margin-bottom: 16px; font-size: 14px; line-height: 1.55; } .euro-insp-play { width: 58px; height: 58px; font-size: 21px; } .euro-insp-video-link { align-self: flex-start !important; width: auto !important; min-width: 0 !important; padding: 9px 12px; font-size: 14px; } .euro-insp-cta { width: 100%; min-width: 0; } } @media (max-width: 420px) { .euro-insp-media { height: 210px !important; min-height: 210px !important; max-height: 210px !important; } .euro-insp-content { padding: 18px 20px 21px; } }