﻿/* XTRAVEL INICIO - CSS ULTRA OPTIMIZADO */
:root{--t:0.25s cubic-bezier(0.4,0,0.2,1)}
#hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
@supports(width:100svw){#hero{width:100svw;margin-left:calc(50% - 50svw);margin-right:calc(50% - 50svw)}}
#hero-video{pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0;width:177.77vh!important;height:100vh!important;min-width:100vw;min-height:56.25vw;object-fit:cover}
#hero>div{overflow:hidden!important;background:#000}
#hero h1{text-shadow:0 2px 10px rgba(0,0,0,0.8),0 4px 20px rgba(0,0,0,0.6),0 0 30px rgba(0,0,0,0.5)}
#hero p,#hero #msg{text-shadow:0 1px 6px rgba(0,0,0,0.7),0 2px 12px rgba(0,0,0,0.5),0 0 20px rgba(0,0,0,0.4)}
#tw{display:inline-block;border-right:2px solid #fde047;animation:blink .7s step-end infinite}
@keyframes blink{from,to{border-color:transparent}50%{border-color:#fde047}}
#msg{transition:opacity .5s ease}
#hero .group{min-height:80px}
#hero .group>div{word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;white-space:normal!important;line-height:1.1;max-width:100%;padding:0 1px}
#hero .group:hover{transform:scale(1.08);box-shadow:0 14px 30px rgba(220,38,38,0.25)}
#hero .group:hover i{transform:scale(1.12) rotate(8deg)}
@media(max-width:640px){#hero .group{min-height:50px!important;max-height:52px!important;padding:4px!important;width:70px!important}#hero .group>div{line-height:1.05!important;padding:0!important;font-size:6px!important;letter-spacing:.01em!important}#hero .group i{font-size:12px!important;margin-bottom:2px!important}}
.xtravel-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
@supports(width:100svw){.xtravel-bleed{width:100svw;margin-left:calc(50% - 50svw);margin-right:calc(50% - 50svw)}}
#porque-xtravel{background:linear-gradient(135deg,#fef2f2 0%,#fff 100%)}
#porque-xtravel .why-stat{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:4px 8px;transition:all .2s ease;box-shadow:0 1px 2px rgba(0,0,0,0.03)}
#porque-xtravel .why-stat:hover{background:#fef2f2;border-color:#fecaca;transform:translateY(-1px);box-shadow:0 2px 4px rgba(220,38,38,0.1)}
#porque-xtravel .why-stat i{font-size:12px;color:#dc2626;flex-shrink:0}
#porque-xtravel .why-stat strong{font-size:9px;color:#1f2937;font-weight:700;white-space:nowrap}
#porque-xtravel .why-stat span{font-size:8px;color:#6b7280;white-space:nowrap}
@media(max-width:640px){#porque-xtravel .why-stat{padding:3px 6px;gap:3px}#porque-xtravel .why-stat i{font-size:10px!important}#porque-xtravel .why-stat strong{font-size:8px}#porque-xtravel .why-stat span{font-size:7px}}
#porque-xtravel .why-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 12px;transition:all .2s ease;position:relative;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
#porque-xtravel .why-card:hover{border-color:#d1d5db;box-shadow:0 4px 12px rgba(0,0,0,0.08);transform:translateY(-2px)}
#porque-xtravel .why-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--card-color,#dc2626);border-radius:12px 12px 0 0}
#porque-xtravel .why-badge{display:inline-block;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-radius:5px;background:var(--card-color,#dc2626);color:#fff}
#porque-xtravel .why-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:var(--card-bg,#fef2f2);color:var(--card-color,#dc2626);border:2px solid var(--card-color,#dc2626);transition:all .2s ease;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
#porque-xtravel .why-icon i{font-size:18px;font-weight:600}
#porque-xtravel .why-card:hover .why-icon{transform:scale(1.1) rotate(3deg);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
#porque-xtravel .why-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
#porque-xtravel .why-title{color:#1f2937;font-size:13px;font-weight:700;margin:0;line-height:1.3}
#porque-xtravel .why-text{color:#6b7280;font-size:11px;line-height:1.5;margin:8px 0 10px 0}
#porque-xtravel .why-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#porque-xtravel .chip{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;font-size:8px;font-weight:600;border-radius:5px;background:#f3f4f6;color:#4b5563;border:1px solid #e5e7eb;transition:all .2s ease}
#porque-xtravel .chip:hover{background:var(--card-bg,#fef2f2);color:var(--card-color,#dc2626);border-color:var(--card-color,#dc2626)}
#porque-xtravel .why-card:nth-child(1){--card-color:#dc2626;--card-bg:#fef2f2}
#porque-xtravel .why-card:nth-child(2){--card-color:#059669;--card-bg:#ecfdf5}
#porque-xtravel .why-card:nth-child(3){--card-color:#f59e0b;--card-bg:#fffbeb}
#porque-xtravel .why-card:nth-child(4){--card-color:#0d9488;--card-bg:#f0fdfa}
#porque-xtravel .why-card:nth-child(5){--card-color:#2563eb;--card-bg:#eff6ff}
#porque-xtravel .why-card:nth-child(6){--card-color:#7c3aed;--card-bg:#f5f3ff}
@media(max-width:640px){#porque-xtravel .why-card{padding:10px 8px}#porque-xtravel .why-icon{width:28px;height:28px}#porque-xtravel .why-icon i{font-size:14px}#porque-xtravel .why-badge{font-size:7px;padding:2px 5px}}
.xtravel-emoji-burst{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100;overflow:hidden}
.xtravel-emoji{position:absolute;font-size:24px;animation:emojiBurst 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;will-change:transform,opacity}
@keyframes emojiBurst{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rotate)) scale(0.5);opacity:0}}
@media(prefers-reduced-motion:reduce){#porque-xtravel .why-card,#porque-xtravel .why-icon,#hero .group{transition:none!important}#porque-xtravel .why-card:hover,#porque-xtravel .why-card:hover .why-icon,#hero .group:hover{transform:none!important}.xtravel-emoji{animation:none!important;display:none!important}#tw{animation:none!important;border-right:none!important}}
#porque-heading{background:linear-gradient(90deg,#dc2626,#991b1b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#dc2626}