/* YACHTSMX — Hero «Film + Panel» v1 (oct 2026). 100 % bajo #ymx-hero. */
#ymx-hero{position:relative;display:block;background:#f5f1e8;font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;color:#152637;-webkit-font-smoothing:antialiased;overflow:hidden;isolation:isolate}
#ymx-hero *,#ymx-hero *::before,#ymx-hero *::after{box-sizing:border-box}

/* ---------- foto / video ---------- */
#ymx-hero .ymxh-media{position:relative;display:block;width:100%;height:300px;margin:0;padding:0;border:0;border-radius:0;background:#08131c;overflow:hidden;color:inherit;font:inherit;text-align:left}
#ymx-hero .ymxh-media--btn{cursor:zoom-in}
#ymx-hero .ymxh-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;border-radius:0;transform-origin:50% 60%;animation:ymxhKB 18s cubic-bezier(.22,1,.36,1) both}
#ymx-hero .ymxh-film{position:absolute;left:0;top:0;z-index:2;background:#08131c;color:#f8f5ee;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;padding:12px 16px;display:flex;align-items:center;gap:14px}
#ymx-hero .ymxh-film b{display:inline-flex;align-items:center;gap:8px;font-weight:700}
#ymx-hero .ymxh-film b::before{content:"";width:6px;height:6px;border-radius:50%;background:#f3c459;box-shadow:0 0 0 0 rgba(243,196,89,.6);animation:ymxhRec 2.8s ease-in-out infinite}
#ymx-hero .ymxh-film span{color:#f3c459}

/* ---------- cuerpo ---------- */
#ymx-hero .ymxh-body{position:relative;z-index:3;padding:0 16px 28px;display:grid;gap:40px}

/* ---------- panel navy ---------- */
#ymx-hero .ymxh-panel{position:relative;margin-top:-56px;background:#152637;color:#f8f5ee;padding:34px 24px 32px;border-radius:20px;box-shadow:0 30px 60px -28px rgba(8,19,28,.6),inset 0 1px 0 rgba(255,255,255,.08);animation:ymxhUp .9s cubic-bezier(.16,1,.3,1) .12s both}
#ymx-hero .ymxh-panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 80% at 0% 0%,rgba(243,196,89,.08),transparent 55%)}
#ymx-hero .ymxh-eyebrow{display:flex;align-items:center;gap:12px;margin:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#f3c459;line-height:1.7}
#ymx-hero .ymxh-eyebrow::before{content:"";flex:none;width:24px;height:1px;background:#f3c459;opacity:.7}
#ymx-hero .ymxh-h1{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:50px;line-height:1.02;letter-spacing:-.01em;font-variant-numeric:lining-nums;margin:20px 0 0;padding:0;color:#f8f5ee;text-transform:none;text-wrap:balance}
#ymx-hero .ymxh-h1--l{font-size:42px;line-height:1.04}
#ymx-hero .ymxh-h1--xl{font-size:34px;line-height:1.06}
#ymx-hero .ymxh-h1 em{font-family:'Newsreader',Georgia,serif;font-weight:300;font-style:italic;color:#f3c459;letter-spacing:-.01em}
#ymx-hero .ymxh-lead{font-size:16px;line-height:1.6;color:rgba(248,245,238,.72);margin:20px 0 0;padding:0;max-width:none;text-wrap:pretty}

/* ---------- botones ---------- */
#ymx-hero .ymxh-ctas{display:flex;flex-direction:column;gap:12px;margin-top:28px}
#ymx-hero .ymxh-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:0;border-radius:999px;font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:700;font-size:13px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;transition:transform .24s cubic-bezier(.16,1,.3,1),box-shadow .24s}
#ymx-hero .ymxh-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);mix-blend-mode:overlay;pointer-events:none;transition:left .85s cubic-bezier(.16,1,.3,1)}
#ymx-hero .ymxh-btn:hover{transform:translateY(-3px)}
#ymx-hero .ymxh-btn:hover::after{left:120%}
#ymx-hero .ymxh-btn:active{transform:scale(.98)}
#ymx-hero .ymxh-btn:focus-visible,#ymx-hero .ymxh-link:focus-visible,#ymx-hero .ymxh-media--btn:focus-visible{outline:2px solid #2bb7b3;outline-offset:2px}
#ymx-hero .ymxh-btn svg{flex:none}
@media (max-width:420px){#ymx-hero .ymxh-btn{font-size:12.5px;letter-spacing:.1em;padding:0 18px}}
#ymx-hero .ymxh-amber,#ymx-hero .ymxh-amber:hover,#ymx-hero .ymxh-amber:focus{background:linear-gradient(180deg,#f3c459,#e8ab36);color:#152637;box-shadow:0 14px 30px -12px rgba(232,171,54,.55),inset 0 1px 0 rgba(255,255,255,.45);animation:ymxhPulse 3.5s infinite}
#ymx-hero .ymxh-wa,#ymx-hero .ymxh-wa:hover,#ymx-hero .ymxh-wa:focus{background:#25D366;color:#08131c;box-shadow:0 14px 30px -14px rgba(37,211,102,.5),inset 0 1px 0 rgba(255,255,255,.45)}
#ymx-hero .ymxh-btn span{color:inherit}

/* ---------- columna lateral (solo desktop) ---------- */
#ymx-hero .ymxh-aside{display:none}

@keyframes ymxhPulse{0%,100%{box-shadow:0 14px 30px -12px rgba(232,171,54,.55),0 0 0 0 rgba(232,171,54,.45),inset 0 1px 0 rgba(255,255,255,.45)}50%{box-shadow:0 14px 30px -12px rgba(232,171,54,.55),0 0 0 10px rgba(232,171,54,0),inset 0 1px 0 rgba(255,255,255,.45)}}
@keyframes ymxhKB{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes ymxhUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ymxhRec{0%,100%{box-shadow:0 0 0 0 rgba(243,196,89,.6)}50%{box-shadow:0 0 0 6px rgba(243,196,89,0)}}

@media (min-width:640px){
  #ymx-hero .ymxh-media{height:440px}
  #ymx-hero .ymxh-body{padding:0 32px 48px}
  #ymx-hero .ymxh-panel{margin-top:-120px;padding:44px 40px;border-radius:24px}
  #ymx-hero .ymxh-h1{font-size:64px}
  #ymx-hero .ymxh-h1--l{font-size:56px}
  #ymx-hero .ymxh-h1--xl{font-size:48px}
  #ymx-hero .ymxh-lead{font-size:17px}
  #ymx-hero .ymxh-ctas{flex-direction:row;flex-wrap:wrap}
}
@media (min-width:900px){
  #ymx-hero .ymxh-media{height:600px}
  #ymx-hero .ymxh-film{font-size:12px;padding:16px 24px;gap:20px}
  #ymx-hero .ymxh-body{padding:0 56px 72px;grid-template-columns:minmax(0,760px) minmax(0,1fr);gap:64px;align-items:end;max-width:1440px;margin:0 auto}
  #ymx-hero .ymxh-panel{margin-top:-220px;padding:56px 56px 52px;border-radius:28px}
  #ymx-hero .ymxh-h1{font-size:84px;line-height:1}
  #ymx-hero .ymxh-h1--l{font-size:72px;line-height:1.02}
  #ymx-hero .ymxh-h1--xl{font-size:60px;line-height:1.04}
  #ymx-hero .ymxh-lead{font-size:18px;line-height:1.7;max-width:560px}
  #ymx-hero .ymxh-ctas{margin-top:36px}
  #ymx-hero .ymxh-btn{min-height:56px}
  #ymx-hero .ymxh-aside{display:flex;flex-direction:column;gap:22px;padding-bottom:8px;animation:ymxhUp .9s cubic-bezier(.16,1,.3,1) .3s both}
  #ymx-hero .ymxh-trust{border-top:1px solid rgba(21,38,55,.24);padding-top:18px;display:flex;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#152637}
  #ymx-hero .ymxh-mut{color:#5a6b7a;font-size:15px;line-height:1.6;margin:0}
  #ymx-hero .ymxh-trust .ymxh-mut{font-size:12px;text-align:right}
  #ymx-hero .ymxh-link{align-self:flex-start;display:inline-block;background:none;border:0;border-bottom:1px solid #152637;border-radius:0;padding:0 0 3px;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#152637;text-decoration:none;cursor:pointer;transition:color .2s,border-color .2s}
  #ymx-hero .ymxh-link:hover{color:#c8902a;border-color:#c8902a}
}
@media (prefers-reduced-motion:reduce){
  #ymx-hero .ymxh-amber,#ymx-hero .ymxh-img,#ymx-hero .ymxh-panel,#ymx-hero .ymxh-aside,#ymx-hero .ymxh-film b::before{animation:none}
  #ymx-hero .ymxh-btn,#ymx-hero .ymxh-btn::after{transition:none}
}

/* ===== v2 · Liquid glass + móvil editorial (oct 2026) ===== */
#ymx-hero .ymxh-panel{--r:20px;isolation:isolate;border-radius:var(--r);background:transparent;border:0;box-shadow:0 40px 80px -36px rgba(8,19,28,.75)}
/* aro de cristal alrededor del marco navy */
#ymx-hero .ymxh-panel::before{content:"";position:absolute;inset:-8px;z-index:-2;border-radius:calc(var(--r) + 8px);pointer-events:none;background:linear-gradient(140deg,rgba(255,255,255,.4),rgba(255,255,255,.1) 30%,rgba(255,255,255,.05) 62%,rgba(255,255,255,.28));-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.24)}
#ymx-hero .ymxh-panel::after{z-index:-1;background:radial-gradient(120% 80% at 0% 0%,rgba(243,196,89,.09),transparent 55%),linear-gradient(180deg,rgba(255,255,255,.06),transparent 28%),#152637;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.06)}
#ymx-hero .ymxh-eyebrow,#ymx-hero .ymxh-h1,#ymx-hero .ymxh-lead,#ymx-hero .ymxh-ctas{position:relative;z-index:1}
/* botones: cristal */
#ymx-hero .ymxh-btn{border-radius:14px}
#ymx-hero .ymxh-amber,#ymx-hero .ymxh-amber:hover,#ymx-hero .ymxh-amber:focus{background:linear-gradient(180deg,#f6cf6e 0%,#f3c459 45%,#e3a431 100%)}
#ymx-hero .ymxh-wa,#ymx-hero .ymxh-wa:hover,#ymx-hero .ymxh-wa:focus{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));color:#f8f5ee;border:1px solid rgba(37,211,102,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px -18px rgba(37,211,102,.55)}
#ymx-hero .ymxh-wa svg{color:#25D366;fill:#25D366}
#ymx-hero .ymxh-wa:hover{border-color:#25D366;background:linear-gradient(180deg,rgba(37,211,102,.16),rgba(37,211,102,.05))}
#ymx-hero .ymxh-film{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:rgba(8,19,28,.82);border-bottom-right-radius:12px}

/* móvil: proporciones editoriales */
@media (max-width:639px){
  #ymx-hero .ymxh-media{height:250px}
  #ymx-hero .ymxh-film{font-size:10px;letter-spacing:.22em;padding:10px 14px;gap:12px}
  #ymx-hero .ymxh-body{padding:0 18px 30px;gap:28px}
  #ymx-hero .ymxh-panel{--r:18px;margin-top:-44px;padding:30px 22px 24px}
  #ymx-hero .ymxh-eyebrow{font-size:10.5px;letter-spacing:.26em;gap:10px}
  #ymx-hero .ymxh-eyebrow::before{width:18px}
  #ymx-hero .ymxh-h1{font-size:40px;line-height:1.04;margin-top:16px;letter-spacing:-.005em}
  #ymx-hero .ymxh-h1--l{font-size:35px;line-height:1.06}
  #ymx-hero .ymxh-h1--xl{font-size:30px;line-height:1.1}
  #ymx-hero .ymxh-lead{font-size:15.5px;line-height:1.68;margin-top:16px;color:rgba(248,245,238,.76)}
  #ymx-hero .ymxh-ctas{gap:10px;margin-top:24px}
  #ymx-hero .ymxh-btn{min-height:50px;font-size:12px;letter-spacing:.18em;padding:0 18px;border-radius:12px}
}
@media (max-width:360px){
  #ymx-hero .ymxh-h1{font-size:35px}
  #ymx-hero .ymxh-h1--l{font-size:31px}
  #ymx-hero .ymxh-h1--xl{font-size:27px}
  #ymx-hero .ymxh-btn{letter-spacing:.12em}
}
@media (min-width:640px){#ymx-hero .ymxh-panel{--r:24px}}
@media (min-width:900px){#ymx-hero .ymxh-panel{--r:28px}#ymx-hero .ymxh-film{border-bottom-right-radius:14px}}

#ymx-hero .ymxh-amber,#ymx-hero .ymxh-amber:hover,#ymx-hero .ymxh-amber:focus{animation:none;box-shadow:0 16px 34px -14px rgba(232,171,54,.6),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(150,95,10,.25)}
/* 1.30.4: algunos clips del reel traen franjas oscuras en los bordes → el video siempre va un poco más grande que el marco */
#ymx-hero video.ymxh-img{animation-name:ymxhKBv}
@keyframes ymxhKBv{from{transform:scale(1.1)}to{transform:scale(1.045)}}
@media (prefers-reduced-motion:reduce){#ymx-hero video.ymxh-img{transform:scale(1.045)}}

/* ===== 1.30.5 · la foto/video llena TODO el hero (sin franja crema detrás del panel) ===== */
#ymx-hero{background:#08131c}
#ymx-hero .ymxh-media{position:absolute;inset:0;height:auto;z-index:0}
#ymx-hero .ymxh-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,19,28,.18) 0%,rgba(8,19,28,0) 22%,rgba(8,19,28,0) 45%,rgba(8,19,28,.55) 100%)}
#ymx-hero .ymxh-film{z-index:3}
#ymx-hero .ymxh-body{padding-top:206px}
#ymx-hero .ymxh-panel{margin-top:0}
@media (min-width:640px){#ymx-hero .ymxh-body{padding-top:320px}}
@media (min-width:900px){
  #ymx-hero .ymxh-body{padding-top:380px;padding-bottom:80px}
  #ymx-hero .ymxh-aside{position:relative;padding:26px 28px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 30px 60px -30px rgba(8,19,28,.6)}
  #ymx-hero .ymxh-trust{color:#f8f5ee;border-top:0;padding-top:0}
  #ymx-hero .ymxh-mut{color:rgba(248,245,238,.82)}
  #ymx-hero .ymxh-link{color:#f8f5ee;border-color:rgba(248,245,238,.7)}
  #ymx-hero .ymxh-link:hover{color:#f3c459;border-color:#f3c459}
}