/*!
 * Ocean Pulse — Promotion Engine Styles
 * Pata y Aleta
 * Scope: .ocean-pulse only
 * No modifica branding, hero, fotografías ni tipografía global.
 */

:root {
  --ocean-pulse-navy: #061826;
  --ocean-pulse-deep: #020b13;
  --ocean-pulse-cyan: #19d9ff;
  --ocean-pulse-aqua: #63f0ed;
  --ocean-pulse-white: #f4fbff;
  --ocean-pulse-text: #c5d8e4;
}

body.ocean-pulse-open {
  overflow: hidden;
}

.ocean-pulse,
.ocean-pulse * {
  box-sizing: border-box;
}

.ocean-pulse {
  position: relative;
  z-index: 60;
  color: var(--ocean-pulse-white);
  font-family: inherit;
}

.ocean-pulse__bar{

position:relative;

z-index:80;

right:auto;

bottom:auto;

width:100%;

max-width:none;

opacity:0;

transform:translateY(18px);

pointer-events:none;

transition:
opacity .45s ease,
transform .45s cubic-bezier(.2,.8,.2,1);

}

#ocean-pulse.is-ready .ocean-pulse__bar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ocean-pulse__bar-main{

position:relative;

display:flex;

align-items:center;

gap:18px;

width:100%;

min-height:82px;

padding:16px 24px;

overflow:hidden;

border-radius:24px;

border:1px solid rgba(99,240,237,.28);

background:
linear-gradient(
135deg,
rgba(5,28,45,.96),
rgba(3,15,28,.93)
);

backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);

box-shadow:
0 20px 55px rgba(0,0,0,.45),
0 0 35px rgba(25,217,255,.08),
inset 0 1px 0 rgba(255,255,255,.08);

cursor:pointer;

transition:.35s;

}

.ocean-pulse__bar-main::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(36, 225, 255, .1), transparent);
  transform: translateX(-130%);
  animation: ocean-pulse-sweep 5.5s ease-in-out infinite;
  content: "";
}

.ocean-pulse__bar-main:hover{

transform:translateY(-3px);

border-color:#63f0ed;

box-shadow:

0 24px 65px rgba(0,0,0,.50),

0 0 45px rgba(25,217,255,.18),

inset 0 1px 0 rgba(255,255,255,.10);

}

.ocean-pulse__bar-main:focus-visible,
.ocean-pulse button:focus-visible,
.ocean-pulse a:focus-visible {
  outline: 2px solid var(--ocean-pulse-aqua);
  outline-offset: 3px;
}

.ocean-pulse__ripple {
  position: absolute;
  z-index: -1;
  width: 72px;
  height: 72px;
  left: -18px;
  top: -8px;
  border: 1px solid rgba(99, 240, 237, .24);
  border-radius: 50%;
  animation: ocean-pulse-ripple 3.7s ease-out infinite;
}

.ocean-pulse__mini-icon,
.ocean-pulse__card-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
}

.ocean-pulse__mini-icon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(98, 241, 237, .35);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(30, 233, 255, .2), rgba(0, 83, 126, .1));
  color: var(--ocean-pulse-aqua);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 0 18px rgba(25,217,255,.14);
}

.ocean-pulse svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.ocean-pulse__mini-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke-width: 1.2;
}

.ocean-pulse__copy{

display:flex;

flex-direction:column;

justify-content:center;

flex:1;

min-width:0;

gap:2px;

}

.ocean-pulse__eyebrow {
  color: var(--ocean-pulse-cyan);
  font-size:11px;
  font-weight: 800;
  letter-spacing: .17em;
  line-height: 1.2;
  opacity:.75;
}

.ocean-pulse__bar-message{

font-size:22px;

font-weight:800;

color:#ffffff;

letter-spacing:-.4px;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.ocean-pulse__live{

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

min-width:max-content;

gap:8px;

padding:8px 14px;

border-radius:999px;

background:linear-gradient(
180deg,
rgba(60,8,8,.82),
rgba(32,5,5,.90)
);

border:1px solid rgba(255,75,75,.28);

box-shadow:
0 0 20px rgba(255,60,60,.08),
inset 0 1px 0 rgba(255,255,255,.08);

color:#ffe7e7;

font-size:11px;

font-weight:800;

letter-spacing:.18em;

text-transform:uppercase;

white-space:nowrap;

}

.ocean-pulse__live i{

display:block;

visibility:visible;    

width:10px;

height:10px;

border-radius:50%;

background:#ff3b30;

box-shadow:

0 0 10px rgba(255,59,48,.95),

0 0 24px rgba(255,59,48,.75);

animation:

ocean-pulse-live 2s ease-in-out infinite;

flex-shrink:0;

}

.ocean-pulse__arrow {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--ocean-pulse-aqua);
  transition: transform .25s ease;
  margin-left:auto;
}

.ocean-pulse__arrow svg {
  width: 18px;
  height: 18px;
}

#ocean-pulse.is-open .ocean-pulse__arrow {
  transform: rotate(180deg);
}

/* Modal glass */
.ocean-pulse__panel {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 22px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}

#ocean-pulse.is-open .ocean-pulse__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ocean-pulse__veil {
  position: absolute;
  inset: 0;
  background: rgba(1, 9, 16, .56);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ocean-pulse__glass {
  position: relative;
  width: min(1020px, 100%);
  max-height: min(720px, calc(100vh - 44px));
  padding: 27px;
  overflow: hidden;
  border: 1px solid rgba(105, 239, 255, .4);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 213, 242, .15), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(27, 108, 180, .2), transparent 29%),
    linear-gradient(135deg, rgba(5, 30, 48, .95), rgba(1, 12, 23, .97));
  box-shadow:
    0 32px 90px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 0 42px rgba(25, 217, 255, .14);
  transform: translateY(26px) scale(.985);
  transition: transform .38s cubic-bezier(.2,.8,.2,1);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

#ocean-pulse.is-open .ocean-pulse__glass {
  transform: translateY(0) scale(1);
}

.ocean-pulse__glass::before,
.ocean-pulse__glass::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.ocean-pulse__glass::before {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(255,255,255,.08), transparent 21%, transparent 78%, rgba(99,240,237,.06));
}

.ocean-pulse__glass::after {
  width: 340px;
  height: 340px;
  top: -240px;
  left: 19%;
  border: 1px solid rgba(87, 233, 255, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(87, 233, 255, .025), 0 0 0 96px rgba(87, 233, 255, .018);
}

.ocean-pulse__waterline {
  position: absolute;
  z-index: 0;
  top: 0;
  left: -8%;
  width: 116%;
  height: 4px;
  background: linear-gradient(90deg, transparent, #6df8ff 13%, #b1ffff 49%, #6df8ff 86%, transparent);
  box-shadow: 0 0 14px rgba(76, 242, 255, .78);
  opacity: .75;
  animation: ocean-pulse-waterline 7s ease-in-out infinite;
}

.ocean-pulse__rays {
  position: absolute;
  z-index: 0;
  inset: -20% -5% auto auto;
  width: 56%;
  height: 125%;
  pointer-events: none;
  opacity: .42;
  background:
    linear-gradient(121deg, transparent 14%, rgba(89, 246, 255, .09) 15%, transparent 28%),
    linear-gradient(112deg, transparent 31%, rgba(145, 253, 255, .07) 32%, transparent 43%),
    linear-gradient(105deg, transparent 52%, rgba(111, 239, 255, .06) 53%, transparent 64%);
  transform: rotate(4deg);
  animation: ocean-pulse-rays 12s ease-in-out infinite alternate;
}

.ocean-pulse__bubbles {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ocean-pulse__bubbles i {
  position: absolute;
  bottom: -28px;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(136, 246, 255, .35);
  border-radius: 50%;
  box-shadow: inset 1px 1px 3px rgba(255,255,255,.24);
  opacity: .46;
  animation: ocean-pulse-bubble 10s linear infinite;
}

.ocean-pulse__bubbles i:nth-child(1) { left: 7%; animation-delay: -1s; animation-duration: 9s; }
.ocean-pulse__bubbles i:nth-child(2) { left: 21%; width: 5px; height: 5px; animation-delay: -6s; animation-duration: 12s; }
.ocean-pulse__bubbles i:nth-child(3) { left: 45%; width: 11px; height: 11px; animation-delay: -3s; animation-duration: 14s; }
.ocean-pulse__bubbles i:nth-child(4) { left: 65%; width: 6px; height: 6px; animation-delay: -8s; animation-duration: 10s; }
.ocean-pulse__bubbles i:nth-child(5) { left: 82%; width: 12px; height: 12px; animation-delay: -4s; animation-duration: 13s; }
.ocean-pulse__bubbles i:nth-child(6) { left: 94%; width: 5px; height: 5px; animation-delay: -10s; animation-duration: 11s; }

.ocean-pulse__panel-head,
.ocean-pulse__carousel,
.ocean-pulse__panel-foot {
  position: relative;
  z-index: 1;
}

.ocean-pulse__panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 23px;
}

.ocean-pulse__panel-head h2 {
  max-width: 560px;
  margin: 5px 0 0;
  color: #f2fcff;
  font: inherit;
  font-size: clamp(21px, 2.55vw, 34px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.12;
}

.ocean-pulse__close,
.ocean-pulse__nav,
.ocean-pulse__dot {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.ocean-pulse__close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(149, 241, 255, .22);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  color: #dffcff;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.ocean-pulse__close:hover {
  background: rgba(25,217,255,.16);
  color: var(--ocean-pulse-aqua);
  transform: rotate(90deg);
}

.ocean-pulse__carousel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 14px;
  align-items: center;
}

.ocean-pulse__viewport {
  min-height: 245px;
}

.ocean-pulse__track {
  position: relative;
  min-height: 245px;
}

.ocean-pulse__card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(131, 240, 255, .16);
  border-radius: 21px;
  background: linear-gradient(120deg, rgba(8, 47, 70, .58), rgba(3, 20, 34, .46));
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px) scale(.985);
  transition: opacity .35s ease, transform .42s cubic-bezier(.2,.75,.2,1);
}

.ocean-pulse__card.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.ocean-pulse__card-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  right: -108px;
  bottom: -160px;
  border-radius: 50%;
  background: rgba(24, 218, 255, .13);
  filter: blur(24px);
}

.ocean-pulse__card-icon {
  position: relative;
  z-index: 1;
  width: 94px;
  height: 94px;
  border: 1px solid rgba(107, 245, 255, .34);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(25,217,255,.23), rgba(8,98,149,.07));
  color: var(--ocean-pulse-aqua);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 28px rgba(25,217,255,.12);
}

.ocean-pulse__card-icon svg {
  width: 43px;
  height: 43px;
}

.ocean-pulse__card-content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.ocean-pulse__badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 9px;
  border: 1px solid rgba(99, 240, 237, .3);
  border-radius: 999px;
  background: rgba(19, 217, 255, .1);
  color: #88f7f2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.ocean-pulse__card h3 {
  margin: 11px 0 7px;
  color: #f5fdff;
  font: inherit;
  font-size: clamp(20px, 2.3vw, 31px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
}

.ocean-pulse__card p {
  max-width: 630px;
  margin: 0;
  color: var(--ocean-pulse-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
}

.ocean-pulse__card-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 17px;
  color: var(--ocean-pulse-aqua);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: gap .2s ease, color .2s ease;
}

.ocean-pulse__card-link:hover {
  gap: 13px;
  color: #d6ffff;
}

.ocean-pulse__card-link svg {
  width: 18px;
  height: 18px;
}

.ocean-pulse__nav {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(108, 237, 255, .23);
  border-radius: 14px;
  background: rgba(6, 39, 58, .62);
  color: var(--ocean-pulse-aqua);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.ocean-pulse__nav:hover {
  border-color: rgba(108, 237, 255, .65);
  background: rgba(24, 199, 225, .17);
  transform: translateY(-2px);
}

.ocean-pulse__nav--prev svg {
  transform: rotate(180deg);
}

.ocean-pulse__panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 21px;
}

.ocean-pulse__dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ocean-pulse__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 999px;
  background: rgba(164, 213, 224, .32);
  transition: width .25s ease, background .25s ease, box-shadow .25s ease;
}

.ocean-pulse__dot.is-active {
  width: 25px;
  background: var(--ocean-pulse-aqua);
  box-shadow: 0 0 11px rgba(99, 240, 237, .58);
}

.ocean-pulse__signature {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #87aebb;
}

.ocean-pulse__signature span {
  width: 20px;
  height: 1px;
  background: var(--ocean-pulse-cyan);
  box-shadow: 0 0 8px rgba(25,217,255,.5);
}

.ocean-pulse__signature small {
  font: inherit;
  font-size: 10px;
  line-height: 1.3;
}

/* Accent types */
.ocean-pulse__card--rescue .ocean-pulse__badge,
.ocean-pulse__card--service .ocean-pulse__badge {
  border-color: rgba(255, 210, 105, .38);
  background: rgba(255, 191, 49, .13);
  color: #ffe099;
}

.ocean-pulse__card--rescue .ocean-pulse__card-icon,
.ocean-pulse__card--service .ocean-pulse__card-icon {
  border-color: rgba(255, 213, 100, .38);
  background: linear-gradient(145deg, rgba(255,190,47,.21), rgba(125,73,0,.06));
  color: #ffd76d;
  box-shadow: 0 0 28px rgba(255,190,47,.12);
}

.ocean-pulse__card--promo .ocean-pulse__badge {
  border-color: rgba(220, 148, 255, .38);
  background: rgba(183, 90, 244, .14);
  color: #e5b2ff;
}

.ocean-pulse__card--promo .ocean-pulse__card-icon {
  border-color: rgba(220, 148, 255, .38);
  background: linear-gradient(145deg, rgba(183,90,244,.21), rgba(89,28,137,.06));
  color: #e4b3ff;
  box-shadow: 0 0 28px rgba(183,90,244,.13);
}

.ocean-pulse__card--maintenance .ocean-pulse__badge {
  border-color: rgba(112, 241, 183, .38);
  background: rgba(59, 204, 130, .13);
  color: #a5f6ca;
}

.ocean-pulse__card--maintenance .ocean-pulse__card-icon {
  border-color: rgba(112, 241, 183, .38);
  background: linear-gradient(145deg, rgba(59,204,130,.2), rgba(15,111,66,.05));
  color: #9bf7c6;
  box-shadow: 0 0 28px rgba(59,204,130,.12);
}

.ocean-pulse__card--event .ocean-pulse__badge {
  border-color: rgba(255, 156, 199, .36);
  background: rgba(244, 91, 157, .13);
  color: #ffc0da;
}

.ocean-pulse__card--event .ocean-pulse__card-icon {
  border-color: rgba(255, 156, 199, .35);
  background: linear-gradient(145deg, rgba(244,91,157,.2), rgba(121,19,70,.05));
  color: #ffb8d8;
}

@keyframes ocean-pulse-sweep {
  0%, 65% { transform: translateX(-130%); }
  84%, 100% { transform: translateX(130%); }
}

@keyframes ocean-pulse-ripple {
  0% { transform: scale(.75); opacity: .65; }
  75%, 100% { transform: scale(1.35); opacity: 0; }
}

@keyframes ocean-pulse-live{

0%{

transform:scale(.8);

opacity:.75;

box-shadow:

0 0 0 0 rgba(255,59,48,.70),

0 0 8px rgba(255,59,48,.95);

}

50%{

transform:scale(1.3);

opacity:1;

box-shadow:

0 0 0 10px rgba(255,59,48,0),

0 0 22px rgba(255,59,48,1);

}

100%{

transform:scale(.8);

opacity:.75;

box-shadow:

0 0 0 0 rgba(255,59,48,0),

0 0 8px rgba(255,59,48,.90);

}

}

@keyframes ocean-pulse-waterline {
  0%, 100% { transform: translateX(-1%) scaleX(.98); }
  50% { transform: translateX(1%) scaleX(1.02); }
}

@keyframes ocean-pulse-rays {
  from { transform: rotate(2deg) translateX(0); opacity: .27; }
  to { transform: rotate(7deg) translateX(20px); opacity: .54; }
}

@keyframes ocean-pulse-bubble {
  0% { transform: translateY(0) scale(.75); opacity: 0; }
  12% { opacity: .44; }
  92% { opacity: .22; }
  100% { transform: translateY(-590px) translateX(22px) scale(1.3); opacity: 0; }
}

@media (max-width: 720px) {
  .ocean-pulse__bar{

position:relative;

left:auto;

right:auto;

bottom:auto;

width:100%;

max-width:none;

transform:none;

 }

  .ocean-pulse__live {
    display: none;
  }

  .ocean-pulse__panel {
    place-items: end stretch;
    padding: 10px;
  }

  .ocean-pulse__glass {
    max-height: calc(100vh - 20px);
    padding: 20px 16px 16px;
    border-radius: 23px;
  }

  .ocean-pulse__panel-head {
    margin-bottom: 18px;
  }

  .ocean-pulse__panel-head h2 {
    font-size: 23px;
  }

  .ocean-pulse__carousel {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .ocean-pulse__viewport,
  .ocean-pulse__track {
    min-height: 292px;
  }

  .ocean-pulse__card {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 22px;
  }

  .ocean-pulse__card-icon {
    width: 63px;
    height: 63px;
    border-radius: 18px;
  }

  .ocean-pulse__card-icon svg {
    width: 31px;
    height: 31px;
  }

  .ocean-pulse__card h3 {
    font-size: 25px;
  }

  .ocean-pulse__card p {
    font-size: 13px;
  }

  .ocean-pulse__nav {
    position: absolute;
    z-index: 3;
    top: 101px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .ocean-pulse__nav--prev {
    left: 9px;
  }

  .ocean-pulse__nav--next {
    right: 9px;
  }

  .ocean-pulse__panel-foot {
    margin-top: 14px;
  }

  .ocean-pulse__signature {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ocean-pulse *,
  .ocean-pulse *::before,
  .ocean-pulse *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.ocean-pulse__promo-title{

display:flex;

align-items:center;

gap:10px;

font-size:22px;

font-weight:800;

color:#fff;

}

.ocean-pulse__promo-title svg{

width:22px;

height:22px;

color:#63f0ed;

flex-shrink:0;

}

.promo-emoji{

font-size:26px;

display:flex;

align-items:center;

justify-content:center;

width:34px;

flex-shrink:0;

}

.ocean-pulse__promo{

display:flex;

flex-direction:column;

justify-content:center;

flex:1;

min-width:0;

}

.ocean-pulse__promo-title{

display:flex;

align-items:center;

gap:10px;

font-size:18px;

font-weight:800;

color:#ffffff;

line-height:1.2;

}

.ocean-pulse__promo-subtitle{

margin-top:4px;

font-size:13px;

font-weight:500;

color:rgba(255,255,255,.72);

line-height:1.35;

}

.promo-emoji{

display:flex;

align-items:center;

justify-content:center;

width:30px;

flex-shrink:0;

font-size:24px;

}

/******************************************************************
OCEAN DRAWER V2
******************************************************************/

.ocean-drawer{

width:100%;

overflow:hidden;

max-height:0;

opacity:0;

transition:

max-height .45s ease,

opacity .35s ease;

}

.ocean-drawer.is-open{

max-height:0;

opacity:1;

}

.ocean-drawer__surface{

margin-top:12px;

border-radius:22px;

border:1px solid rgba(99,240,237,.18);

background:

linear-gradient(

180deg,

rgba(7,25,39,.96),

rgba(2,10,18,.96)

);

backdrop-filter:blur(22px);

padding:24px;

box-shadow:

0 20px 50px rgba(0,0,0,.35);

}

.ocean-drawer__header{

font-size:18px;

font-weight:700;

color:#63f0ed;

margin-bottom:20px;

}

.ocean-drawer__body{

min-height:180px;

border-radius:16px;

border:1px dashed rgba(99,240,237,.25);

display:flex;

align-items:center;

justify-content:center;

color:rgba(255,255,255,.55);

font-size:14px;

}

.ocean-drawer__tabs{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-bottom:18px;

}

.ocean-drawer__content{

min-height:180px;

border-radius:18px;

background:rgba(255,255,255,.02);

border:1px solid rgba(99,240,237,.08);

}

.ocean-drawer__footer{

margin-top:18px;

display:flex;

justify-content:flex-end;

}

.ocean-chip{

display:inline-flex;

align-items:center;

justify-content:center;

padding:10px 18px;

border-radius:999px;

background:rgba(255,255,255,.04);

border:1px solid rgba(99,240,237,.14);

color:#dffcff;

font-size:13px;

font-weight:600;

cursor:pointer;

transition:.30s;

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

}

.ocean-chip:hover{

transform:translateY(-2px);

border-color:rgba(99,240,237,.35);

box-shadow:

0 8px 24px rgba(0,213,255,.12);

}

.ocean-chip.active{

background:linear-gradient(
135deg,
rgba(0,213,255,.18),
rgba(25,217,255,.08)
);

border-color:#63f0ed;

box-shadow:

0 0 22px rgba(99,240,237,.18);

}

.ocean-pulse-panel__chips{

display:flex;

gap:10px;

margin-top:18px;

flex-wrap:wrap;

}

/*==================================================
OCEAN PANEL V1
==================================================*/

.ocean-pulse-panel{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

padding:40px;

background:rgba(2,10,18,.72);

backdrop-filter:blur(14px);

opacity:0;

visibility:hidden;

pointer-events:none;

transition:
opacity .35s ease,
visibility .35s ease;

z-index:9999;

backdrop-filter:blur(22px);

-webkit-backdrop-filter:blur(22px);

border:1px solid rgba(255,255,255,.08);

box-shadow:

0 30px 80px rgba(0,0,0,.45),

inset 0 1px 0 rgba(255,255,255,.08),

0 0 40px rgba(56,189,248,.08);

overflow:hidden;

}

.ocean-pulse-panel::before{

content:"";

position:absolute;

left:0;

right:0;

top:0;

height:1px;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);

opacity:.55;

pointer-events:none;

}

.ocean-pulse-panel.is-open{

opacity:1;

visibility:visible;

pointer-events:auto;

}

.ocean-pulse-panel__glass{

position:relative;
overflow:hidden;

width:min(1200px,94vw);

height:min(88vh,820px);

border-radius:28px;

background:

linear-gradient(
180deg,
rgba(8,28,44,.98),
rgba(3,14,22,.98)
);

border:1px solid rgba(0,213,255,.18);

box-shadow:

0 40px 120px rgba(0,0,0,.45),

0 0 80px rgba(0,213,255,.06);

overflow:hidden;

display:flex;

flex-direction:column;

position:relative;

}

/*==================================================
OCEAN HERO V1
==================================================*/

.ocean-pulse-panel__hero{

position:relative;

z-index:15;

display:grid;

grid-template-columns:1.4fr .9fr;

align-items:center;

gap:40px;

padding:60px;

min-height:560px;

}

.ocean-pulse-panel__hero-info{

position:absolute;

left:72px;

top:130px;

width:560px;

z-index:70;

display:flex;

flex-direction:column;

align-items:flex-start;

}

.ocean-hero-badge{

display:inline-flex;

align-items:center;

padding:8px 18px;

border-radius:999px;

background:rgba(0,213,255,.12);

color:#63d8ff;

font-weight:700;

width:max-content;

}

.ocean-hero-title{

font-size:42px;

font-weight:800;

color:#fff;

}

.ocean-hero-description{

position:relative;

z-index:35;    

font-size:18px;

line-height:1.7;

color:#b7cad7;

max-width:640px;

}

.ocean-hero-buttons{

display:flex;

gap:16px;

}

.ocean-btn-primary{

padding:14px 28px;

border:none;

border-radius:14px;

background:#00d5ff;

font-weight:700;

cursor:pointer;

box-shadow:

0 0 35px rgba(0,214,255,.35),

0 12px 40px rgba(0,0,0,.30);

transition:.35s;

}

.ocean-btn-primary:hover{

transform:translateY(-3px);

box-shadow:

0 0 60px rgba(0,214,255,.60),

0 20px 50px rgba(0,0,0,.45);

}

.ocean-btn-secondary{

padding:14px 28px;

border-radius:14px;

background:transparent;

border:1px solid rgba(255,255,255,.15);

color:white;

cursor:pointer;

}

.ocean-pulse-panel__hero-media{

position:absolute;

inset:0;

z-index:0;

overflow:hidden;

background-image:

linear-gradient(
rgba(2,12,24,.30),
rgba(2,12,24,.58)
),

url('./ocean-reef-premium.jpg');

background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}

/*==========================================
OCEAN HERO IMAGE
==========================================*/

.ocean-hero-image{

position:relative;

width:100%;

height:340px;

border-radius:28px;

overflow:hidden;

background-image: url("/img/ocean-pulse-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #071824;

box-shadow:

0 20px 60px rgba(0,0,0,.35);

display:flex;

align-items:flex-end;

justify-content:center;

}

.ocean-hero-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

transition:

transform .6s ease,

opacity .35s ease;

}

.ocean-hero-image:hover img{

transform:scale(1.04);

}

/*==================================================
OCEAN SCENE V1
==================================================*/

.ocean-pulse-panel__hero-media{

position:relative;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

border-radius:32px;

background:
radial-gradient(circle at 50% 0%,
rgba(83,214,255,.20),
transparent 45%),

linear-gradient(
180deg,
#0d2940 0%,
#081c2d 40%,
#061521 100%
);

box-shadow:
inset 0 0 80px rgba(0,220,255,.08),
0 20px 60px rgba(0,0,0,.35);

}

/* Luz superior */

.ocean-pulse-panel__hero-media::before{

content:"";

position:absolute;

top:-25%;

left:50%;

transform:translateX(-50%);

width:140%;

height:90%;

background:

radial-gradient(circle,
rgba(120,235,255,.35),
transparent 70%);

filter:blur(35px);

opacity:.7;

animation:
oceanLight 8s ease-in-out infinite;

}

/* Brillo cristal */

.ocean-pulse-panel__hero-media::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,.05) 40%,
transparent 70%
);

mix-blend-mode:screen;

pointer-events:none;

}

@keyframes oceanLight{

0%{

transform:
translateX(-50%)
translateY(0);

opacity:.55;

}

50%{

transform:
translateX(-50%)
translateY(8px);

opacity:.9;

}

100%{

transform:
translateX(-50%)
translateY(0);

opacity:.55;

}

}

/*==========================================
OCEAN SCENE LAYERS V1
==========================================*/

.ocean-hero-image{

position:relative;

overflow:hidden;

}

/* Rayos de luz */

.ocean-hero-image::before{

content:"";

position:absolute;

inset:-20%;

background:

radial-gradient(circle at 50% -10%,
rgba(120,230,255,.22),
transparent 45%),

linear-gradient(
180deg,
rgba(120,220,255,.12),
transparent 55%
);

filter:blur(35px);

animation:
oceanGlow 9s ease-in-out infinite;

}

/* Fondo profundo */

.ocean-hero-image::after{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at bottom,
rgba(0,180,255,.08),
transparent 55%),

radial-gradient(circle at top,
rgba(255,255,255,.03),
transparent 60%);

mix-blend-mode:screen;

}

@keyframes oceanGlow{

0%{

opacity:.45;

transform:translateY(0);

}

50%{

opacity:.8;

transform:translateY(8px);

}

100%{

opacity:.45;

transform:translateY(0);

}
}

/*==========================================
OCEAN BUBBLES
==========================================*/

.ocean-bubble{

position:absolute;

bottom:-60px;

border-radius:50%;

background:

radial-gradient(circle at 30% 30%,
rgba(255,255,255,.75),
rgba(150,240,255,.18));

backdrop-filter:blur(4px);

box-shadow:

0 0 18px rgba(120,220,255,.18);

animation:

bubbleRise linear infinite;

opacity:.75;

}

.bubble-1{

left:12%;
width:10px;
height:10px;
animation-duration:9s;
animation-delay:0s;

}

.bubble-2{

left:22%;
width:18px;
height:18px;
animation-duration:12s;
animation-delay:2s;

}

.bubble-3{

left:36%;
width:8px;
height:8px;
animation-duration:8s;
animation-delay:1s;

}

.bubble-4{

left:52%;
width:16px;
height:16px;
animation-duration:10s;
animation-delay:3s;

}

.bubble-5{

left:68%;
width:12px;
height:12px;
animation-duration:11s;
animation-delay:4s;

}

.bubble-6{

left:80%;
width:20px;
height:20px;
animation-duration:13s;
animation-delay:2s;

}

.bubble-7{

left:60%;
width:7px;
height:7px;
animation-duration:9s;
animation-delay:5s;

}

.bubble-8{

left:88%;
width:11px;
height:11px;
animation-duration:10s;
animation-delay:1s;

}

@keyframes bubbleRise{

0%{

transform:

translateY(0)
translateX(0);

opacity:0;

}

10%{

opacity:.75;

}

50%{

transform:

translateY(-180px)
translateX(10px);

}

100%{

transform:

translateY(-420px)
translateX(-12px);

opacity:0;

}

}

/*==========================================
OCEAN FOUNDATION
==========================================*/

.ocean-light{

position:absolute;

inset:0;

opacity:.55;

background:

radial-gradient(circle at 50% -15%,
rgba(120,240,255,.22),
transparent 60%);

filter:blur(30px);

animation:

oceanLightMove 9s ease-in-out infinite;

}

.ocean-caustics{

position:absolute;

inset:0;

background:

repeating-linear-gradient(
115deg,
transparent 0px,
rgba(255,255,255,.03) 6px,
transparent 12px
);

mix-blend-mode:screen;

opacity:.12;

animation:

causticsMove 18s linear infinite;

}

.ocean-particles{

position:absolute;

inset:0;

background-image:

radial-gradient(circle,
rgba(255,255,255,.18) 1px,
transparent 2px);

background-size:120px 120px;

opacity:.25;

animation:

particlesFloat 20s linear infinite;

animation:

oceanFloat 14s ease-in-out infinite;

}

.ocean-coral{

position:absolute;

bottom:-20px;

width:170px;

height:180px;

filter:blur(.2px);

opacity:.92;

}

.op-coral-left{

left:-20px;

background:

radial-gradient(circle at bottom,
#5eead4,
transparent 72%),

radial-gradient(circle at 40% 70%,
#7c3aed,
transparent 60%),

radial-gradient(circle at 60% 30%,
#0ea5e9,
transparent 70%);

}

.op-coral-right{

right:-30px;

background: transparent;

}

@keyframes oceanLightMove{

0%{

opacity:.5;

transform:translateY(0);

}

50%{

opacity:.9;

transform:translateY(12px);

}

100%{

opacity:.5;

transform:translateY(0);

}

}

@keyframes causticsMove{

from{

transform:translateX(0);

}

to{

transform:translateX(-120px);

}

}

@keyframes particlesFloat{

from{

background-position:0 0;

}

to{

background-position:0 -220px;

}

}

/*==========================================
OCEAN CURRENT
==========================================*/

.ocean-water-flow{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

opacity:.10;

}

.ocean-water-flow::before{

content:"";

position:absolute;

left:-40%;

top:0;

width:180%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(120,240,255,.08),
transparent
);

animation:

waterCurrent 14s linear infinite;

filter:blur(18px);

}

@keyframes waterCurrent{

from{

transform:translateX(-25%);

}

to{

transform:translateX(25%);

}

}

/*==========================================
FISH ENGINE V1
==========================================*/

.ocean-fish-layer{

position:absolute;

inset:0;

pointer-events:none;

overflow:hidden;

z-index:8;

}

.ocean-fish,
.fish-blue{

display:none !important;

}

.ocean-fish{

position:absolute;

width:135px;

height:34px;

left:-90px;

top:46%;

border:

1px solid rgba(255,255,255,.08);

filter:
drop-shadow(0 0 22px rgba(56,189,248,.75));

transform:scaleX(-1);

border-radius:60% 45% 45% 60%;

background:
linear-gradient(
90deg,
#39d5ff 0%,
#2ea6ff 35%,
#2563eb 75%,
#1d4ed8 100%
);

box-shadow:

0 0 18px rgba(45,212,255,.35);

animation:

fishSwim 20s linear infinite,

fishFloat 4s ease-in-out infinite;

bottom:28%;

z-index:12;

}

/* cola */

.ocean-fish::before{

content:"";

position:absolute;

right:-14px;

top:7px;

width:18px;

height:20px;

background:

linear-gradient(
180deg,
#ffe066,
#facc15
);

clip-path:polygon(
0 50%,
100% 0,
100% 100%
);

transform-origin:left center;

animation:tailMove .45s ease-in-out infinite;

}

/* ojo */

.ocean-fish::after{

content:"";

position:absolute;

left:12px;

top:11px;

width:5px;

height:5px;

background:white;

border-radius:50%;

}

@keyframes fishSwim{

0%{

left:-90px;

}

100%{

left:110%;

}

}

@keyframes fishFloat{

0%,100%{

transform:
scaleX(-1)
translateY(0);

}

50%{

transform:
scaleX(-1)
translateY(-10px);

}

}

@keyframes tailMove{

0%,100%{

transform:rotate(0deg);

}

50%{

transform:rotate(16deg);

}

}

/*==========================================
GLASS AQUARIUM
==========================================*/

.ocean-glass-image{

position:absolute;

inset:0;

z-index:1;

overflow:hidden;

border-radius:28px;

}

.ocean-glass-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

opacity:1;

transform:scale(1.03);

filter:

saturate(1.35)

contrast(1.08)

brightness(1)

}

.ocean-glass-image::after{

display:none;

}

@keyframes glassDrift{

0%{

transform:
scale(1.08)
translateX(0);

}

100%{

transform:
scale(1.12)
translateX(-2%);

}

}

/*==========================================
OCEAN LIVE PANEL V1
==========================================*/

.ocean-live-panel{

position:absolute;

left:24px;

right:24px;

bottom:18px;

display:flex;

flex-direction:column;

gap:14px;

z-index:20;

pointer-events:auto;

}

.live-card{

position:relative;

display:flex;

align-items:center;

gap:18px;

padding:14px 22px;

border-radius:22px;

backdrop-filter:blur(18px);

overflow:hidden;

background:
linear-gradient(
180deg,
rgba(22,40,56,.92),
rgba(10,23,35,.96)
);

border:1px solid rgba(92,205,255,.10);

transition:
transform .35s,
border-color .35s,
box-shadow .35s,
background .35s;

cursor:pointer;

}

.live-card::after{

content:"";

position:absolute;

left:0;

right:0;

top:0;

height:1px;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);

opacity:.6;

}


.live-card::before{

content:"";

position:absolute;

left:0;

top:0;

bottom:0;

width:5px;

background:#35d7ff;

opacity:.85;

transition:.35s;

}

.live-card:hover{

transform:
translateY(-4px)
scale(1.015);

border-color:#44dcff;

box-shadow:

0 18px 45px rgba(0,170,255,.22);

}

.live-card:hover::before{

width:8px;

}

.live-card-icon{

width:34px;

height:34px;

border-radius:10px;

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

gap:14px;

background:

linear-gradient(
135deg,
rgba(39,191,255,.25),
rgba(0,86,160,.22)
);

box-shadow:

0 0 22px rgba(43,202,255,.18);

flex-shrink:0;

}

.live-card h4{

font-size:20px;

font-weight:700;

color:#ffffff;

letter-spacing:.2px;

margin-bottom:4px;

}

.live-card p{

font-size:15px;

color:#b9c7d3;

line-height:1.45;

opacity:.78;

}

.live-card strong{

display:block;

font-size:15px;

font-weight:700;

color:#ffffff;

letter-spacing:.5px;

}

.live-card small{

display:block;

margin-top:4px;

font-size:12px;

color:rgba(255,255,255,.72);

}

.live-card-content{

display:flex;

flex-direction:column;

justify-content:center;

gap:4px;

flex:1;

}

/*==========================================
OCEAN CLOSE BUTTON
==========================================*/

.ocean-panel-close{

position:absolute;

top:18px;

right:18px;

width:42px;

height:42px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:rgba(8,24,38,.70);

backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,.08);

color:#9fe9ff;

font-size:18px;

font-weight:600;

pointer-events:auto;

z-index:999;

cursor:pointer;

transition:.25s;


}

.ocean-panel-close:hover{

background:rgba(20,80,120,.85);

border-color:#41d7ff;

transform:scale(1.06);

box-shadow:

0 0 18px rgba(65,215,255,.30);

}

/* ===== Ocean Live Background ===== */

.ocean-live-wrapper{

position:absolute;

right:48px;

top:145px;

width:470px;

z-index:60;

}

.ocean-live-panel{

display:flex;

flex-direction:column;

gap:18px;

width:100%;

pointer-events:auto;

}

.ocean-live-wrapper::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
180deg,
rgba(5,18,32,.28),
rgba(5,18,32,.78)
);

backdrop-filter:blur(2px);

z-index:1;

}

.ocean-live-panel{

position:absolute;

left:22px;

right:22px;

bottom:22px;

z-index:2;

}

/*======================================
OCEAN REEF PREMIUM
======================================*/

.ocean-pulse-panel__hero-media{

position:relative;

overflow:hidden;

border-radius:28px;

box-shadow:

0 30px 80px rgba(0,0,0,.45),

0 0 80px rgba(0,180,255,.10);

}

.ocean-pulse-panel__hero-media::before{

display:none;

}

.ocean-pulse-panel__hero-media::after{

display:none;

}

@keyframes oceanSunLight{

0%{

transform:

translateX(-8%)

translateY(0)

rotate(-18deg);

opacity:.35;

}

50%{

transform:

translateX(6%)

translateY(2%)

rotate(-14deg);

opacity:.85;

}

100%{

transform:

translateX(-8%)

translateY(0)

rotate(-18deg);

opacity:.35;

}

}

/*======================================
BUBBLES
======================================*/

.ocean-pulse-panel__hero-media .reef-bubble{

position:absolute;

bottom:-80px;

width:12px;

height:12px;

border-radius:50%;

background:

rgba(255,255,255,.18);

border:

1px solid rgba(255,255,255,.35);

backdrop-filter:blur(2px);

box-shadow:

0 0 14px rgba(255,255,255,.25);

animation:

reefBubble linear infinite;

pointer-events:none;

}

.ocean-pulse-panel__hero-media .reef-bubble::after{

content:"";

position:absolute;

left:2px;

top:2px;

width:3px;

height:3px;

border-radius:50%;

background:white;

opacity:.9;

}

@keyframes reefBubble{

0%{

transform:

translateY(0) scale(.5);

opacity:0;

}

10%{

opacity:.75;

}

90%{

opacity:.75;

}

100%{

transform:

translateY(-900px) scale(1.3);

opacity:0;

}

}

.ocean-pulse-panel__hero-media .reef-bubble:nth-child(1){

left:6%;

animation-duration:10s;

animation-delay:0s;

}

.ocean-pulse-panel__hero-media .reef-bubble:nth-child(2){

left:15%;

animation-duration:8s;

animation-delay:2s;

}

.ocean-pulse-panel__hero-media .reef-bubble:nth-child(3){

left:27%;

animation-duration:11s;

animation-delay:1s;

}

.ocean-pulse-panel__hero-media .reef-bubble:nth-child(4){

left:45%;

animation-duration:9s;

animation-delay:4s;

}

.ocean-pulse-panel__hero-media .reef-bubble:nth-child(5){

left:63%;

animation-duration:13s;

animation-delay:1s;

}

.ocean-pulse-panel__hero-media .reef-bubble:nth-child(6){

left:78%;

animation-duration:10s;

animation-delay:3s;

}

.ocean-pulse-panel__hero-media .reef-bubble:nth-child(7){

left:91%;

animation-duration:8s;

animation-delay:2s;

}

/*======================================
LIVE FISH
======================================*/

.reef-fish{

position:absolute;

pointer-events:none;

z-index:8;

filter:

drop-shadow(0 10px 18px rgba(0,0,0,.35));

animation-timing-function:linear;

animation-iteration-count:infinite;

will-change:transform;

}



/*======================================
PECES PREMIUM
======================================*/



/*======================================
CAPAS OCEAN PULSE
======================================*/

.ocean-pulse-panel__glass{

position:relative;

overflow:hidden;

}

.ocean-pulse-panel__content{

position:relative;

z-index:20;

}

.ocean-pulse-panel__header,

.ocean-pulse-panel__hero,

.ocean-pulse-panel__live,

.ocean-pulse-panel__actions{

position:relative;

z-index:20;

}

/*==================================================
OCEAN PULSE FINAL OVERRIDE
==================================================*/

.ocean-pulse-panel__glass{

background:#02111d !important;

}

.ocean-pulse-panel__hero{

position:relative !important;

min-height:620px !important;

padding:0 !important;

overflow:hidden;

}

.ocean-pulse-panel__hero-media{

position:absolute !important;

inset:0 !important;

border-radius:0 !important;

background-image:

linear-gradient(

180deg,

rgba(0,18,34,.18),

rgba(0,18,34,.58)

),

url('./ocean-reef-premium.jpg') !important;

background-size:cover !important;

background-position:center center !important;

background-repeat:no-repeat !important;

filter:

saturate(1.35)

contrast(1.08)

brightness(1.02);

animation:

oceanBackgroundMove

28s ease-in-out infinite;

z-index:1 !important;

}

.ocean-pulse-panel__hero-info,

.ocean-live-panel,

.ocean-glass-image,

.ocean-pulse-panel__chips{

position:relative !important;

z-index:20 !important;

}

.ocean-hero-title{

font-size:54px !important;

font-weight:900 !important;

color:#ffffff !important;

text-shadow:

0 4px 18px rgba(0,0,0,.65),

0 0 30px rgba(0,213,255,.28);

}

.ocean-hero-description{

font-size:19px !important;

color:#eefcff !important;

text-shadow:

0 2px 12px rgba(0,0,0,.55);

}

.ocean-hero-badge{

background:rgba(0,213,255,.22) !important;

border:1px solid rgba(99,240,237,.45);

box-shadow:

0 0 24px rgba(0,213,255,.20);

}

.ocean-btn-primary{

box-shadow:

0 15px 40px rgba(0,213,255,.35);

}

.ocean-live-wrapper::before{

background:

linear-gradient(

180deg,

rgba(2,18,35,.15),

rgba(2,18,35,.45)

) !important;

}

@keyframes oceanBackgroundMove{

0%{

background-position:center center;

}

50%{

background-position:center 47%;

}

100%{

background-position:center center;

}

}

/*==================================================
OCEAN PULSE CINEMATIC FINAL
NO BORRAR
==================================================*/

/*=========================
BARRA SUPERIOR
=========================*/

.ocean-pulse-panel__glass{

display:grid !important;

grid-template-rows:60px 1fr !important;

overflow:hidden;

background:#02111d !important;

}

/*=========================
TOP BAR
=========================*/

.ocean-pulse-panel__header{

position:relative;

display:flex;

align-items:center;

justify-content:center;

padding:12px 24px;

height:60px;

background:

linear-gradient(

180deg,

rgba(2,18,35,.94),

rgba(2,18,35,.82)

);

backdrop-filter:blur(18px);

border-bottom:

1px solid rgba(75,214,255,.15);

z-index:50;

}

/*=========================
TIMER
=========================*/

.ocean-pulse-panel__header::after{

content:"⏳ 06 DÍAS 18 HRS 42 MIN";

position:absolute;

right:24px;

top:50%;

transform:translateY(-50%);

font-size:18px;

font-weight:800;

letter-spacing:1px;

color:#69ecff;

animation:pulseTimer 2s infinite;

}

/*=========================
FORMAS DE PAGO
=========================*/

.ocean-pulse-panel__header::before{

content:"💳 VISA   •   MC   •   AMEX   •   MERCADO PAGO";

position:absolute;

left:24px;

top:50%;

transform:translateY(-50%);

font-size:12px;

font-weight:600;

opacity:.75;

color:#dff9ff;

}

/*=========================
HERO
=========================*/

.ocean-pulse-panel__hero{

padding:0 !important;

margin-top:-50px;

min-height:700px !important;

display:grid;

grid-template-columns:1.45fr .82fr;

align-items:flex-start;

}

/*=========================
ARRECIFE
=========================*/

.ocean-pulse-panel__hero-media{

filter:

brightness(1.05)

contrast(1.10)

saturate(1.45);

animation:

reefMove

32s ease-in-out infinite;

}

/*=========================
PANEL DERECHO
=========================*/

.ocean-live-panel{
    
backdrop-filter:blur(24px);

margin-top:-80px;

position:relative;

z-index:40;

background:

rgba(3,21,40,.36);

border:

1px solid

rgba(97,237,255,.18);

box-shadow:

0 35px 70px

rgba(0,0,0,.38);

}

/*=========================
TARJETAS
=========================*/

.ocean-live-card{

height:108px;

border-radius:24px;

transition:.45s;

}

.ocean-live-card:hover{

transform:

translateY(-3px)

scale(1.02);

}

/*=========================
TITULO
=========================*/

.ocean-hero-title{

font-size:66px;

font-weight:900;

line-height:1;

color:#fff;

text-shadow:

0 8px 26px rgba(0,0,0,.65),

0 0 30px rgba(0,213,255,.18);

}

/*=========================
DESCRIPCION
=========================*/

.ocean-hero-description{

font-size:22px;

line-height:1.8;

color:#edfaff;

}

/*=========================
BOTONES
=========================*/

.ocean-btn-primary{

border-radius:18px;

padding:18px 34px;

font-weight:700;

box-shadow:

0 18px 45px

rgba(0,213,255,.35);

box-shadow:

0 0 35px rgba(0,220,255,.28),

0 18px 40px rgba(0,0,0,.30);

}


/*=========================
BADGE
=========================*/

.ocean-hero-badge{

display:inline-flex;

margin-bottom:22px;

transform:translateY(-8px);

}

/*=========================
PARTICULAS
=========================*/

.ocean-pulse-panel__hero::before{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background-image:

radial-gradient(

rgba(255,255,255,.35) 1px,

transparent 1px

);

background-size:70px 70px;

opacity:.14;

animation:

particlesFloat

40s linear infinite;

}

/*=========================
RAYOS
=========================*/

.ocean-pulse-panel__hero::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:

linear-gradient(

110deg,

transparent,

rgba(155,240,255,.12),

transparent

);

mix-blend-mode:screen;

animation:

sunMove

16s ease-in-out infinite;

}

/*=========================
ANIMACIONES
=========================*/

@keyframes reefMove{

0%{

background-position:center top;

}

50%{

background-position:center 47%;

}

100%{

background-position:center top;

}

}

@keyframes particlesFloat{

from{

transform:translateY(0);

}

to{

transform:translateY(-120px);

}

}

@keyframes sunMove{

0%{

transform:translateX(-25%);

}

50%{

transform:translateX(10%);

}

100%{

transform:translateX(-25%);

}

}

@keyframes badgeGlow{

0%,100%{

box-shadow:

0 0 18px rgba(0,213,255,.25);

}

50%{

box-shadow:

0 0 34px rgba(0,213,255,.50);

}

}

@keyframes pulseTimer{

0%,100%{

opacity:1;

}

50%{

opacity:.55;

}

}

/*==========================================
OCEAN PULSE FINAL ALIGN V1
==========================================*/

.ocean-live-wrapper{

position:absolute;

right:48px;

top:52%;

transform:translateY(-50%);

width:430px;

z-index:40;

display:flex;

justify-content:flex-end;

align-items:center;

}

.ocean-live-panel{

display:flex;

flex-direction:column;

gap:18px;

width:100%;

}

.live-card{

position:relative;

display:flex;

align-items:center;

gap:18px;

padding:22px 26px;

border-radius:24px;

background:rgba(5,18,31,.78);

backdrop-filter:blur(24px);

-webkit-backdrop-filter:blur(24px);

border:1px solid rgba(80,220,255,.14);

box-shadow:

0 20px 45px rgba(0,0,0,.30),

inset 0 1px 0 rgba(255,255,255,.05);

transition:.35s;

}

.live-card:hover{

transform:translateX(-6px);

border-color:#52ddff;

box-shadow:

0 0 35px rgba(82,221,255,.22);

}

.live-card::before{

content:"";

position:absolute;

left:0;

top:12%;

bottom:12%;

width:5px;

border-radius:20px;

background:#42d8ff;

box-shadow:

0 0 18px rgba(66,216,255,.75);

}

.live-card-content{

flex:1;

}

.live-card-content h4{

margin:0;

font-size:18px;

font-weight:800;

color:#fff;

}

.live-card-content p{

margin-top:6px;

font-size:14px;

color:#b9d3df;

}

.live-card-icon{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

background:linear-gradient(135deg,#143b63,#1a567f);

font-size:22px;

flex-shrink:0;

}

.ocean-pulse-panel__hero{

padding:70px 60px 60px;

}

.ocean-hero-title{

max-width:560px;

line-height:1.05;

}

.ocean-hero-description{

max-width:520px;

}

/*==========================================
OCEAN PULSE CINEMATIC TUNE V2
==========================================*/

/* Elimina overlays que ensucian el arrecife */

.ocean-pulse-panel__hero::before,
.ocean-pulse-panel__hero::after,
.ocean-water-flow,
.ocean-caustics{

display:none !important;

opacity:0 !important;

}

/*==================================================
OCEAN HERO V2
==================================================*/

.ocean-pulse-panel__hero{

position:relative;

display:grid;

grid-template-columns:minmax(0,1fr) 400px;

align-items:center;

column-gap:56px;

min-height:660px;

padding:0 70px;

overflow:hidden;

border-radius:28px;

}

.ocean-pulse-panel__hero-media{

position:absolute;

inset:0;

z-index:1;

}

.ocean-pulse-panel__hero-info{

position:absolute;

left:72px;

top:130px;

width:560px;

z-index:70;

display:flex;

flex-direction:column;

align-items:flex-start;

}

.ocean-hero-title{

font-size:74px;

line-height:.95;

font-weight:900;

letter-spacing:-2px;

margin:18px 0 20px;

max-width:560px;

text-shadow:

0 12px 40px rgba(0,0,0,.45);

}

.ocean-hero-description{

font-size:22px;

line-height:1.45;

margin:0 0 34px;

max-width:480px;

color:rgba(255,255,255,.95);

}

.ocean-hero-buttons{

display:flex;

align-items:center;

gap:18px;

margin-top:0;

}

.ocean-live-wrapper{

position:absolute;

right:48px;

top:50%;

transform:translateY(-56%);

width:400px;

z-index:60;

}

.ocean-live-panel{

display:flex;

flex-direction:column;

gap:22px;

width:100%;

}

.live-card{

min-height:110px;

padding:24px;

border-radius:24px;

background:rgba(8,20,42,.84);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

box-shadow:

0 20px 55px rgba(0,0,0,.38);

}

.live-card:hover{

transform:translateX(-8px);

}

.ocean-pulse-panel__eyebrow{

display:none;

}

.ocean-chip{

transform:scale(.92);

}

@keyframes oceanFloat{

0%{transform:translateY(0)}

50%{transform:translateY(-10px)}

100%{transform:translateY(0)}

}