:root{
  --bg: #ffffff;
  --text: #0b1220;
  --muted: rgba(11, 18, 32, .72);
  --border: rgba(11, 18, 32, .10);
  --card: rgba(255,255,255,.86);
  --soft: #f3fbff;
  --primary: #0b6b8a;
  --primary2: #0aa1c0;
  --accent: #ff6b2c;
  --shadow: 0 18px 50px rgba(11,18,32,.10);
  --radius: 18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.container{width:min(1120px, calc(100% - 40px)); margin-inline:auto}

.skip{position:absolute; left:-999px; top:8px; padding:10px 14px; background:#fff; border:1px solid var(--border); border-radius:12px; z-index:999}
.skip:focus{left:12px}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}

.brand{display:flex; align-items:center; gap:10px}
.brand__logo{height:85px; width:auto; object-fit:contain}

.nav{position:relative}
.nav__toggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
}
.nav__bars{
  display:block;
  width:18px; height:2px; background: var(--text);
  margin:0 auto;
  box-shadow: 0 -6px 0 var(--text), 0 6px 0 var(--text);
  border-radius:2px;
}

.nav__menu{display:flex; align-items:center; gap:14px}
.nav__link{font-weight:600; font-size:14px; color: rgba(11,18,32,.82); padding:10px 10px; border-radius:12px}
.nav__link:hover{background: rgba(11,18,32,.05)}

.lang{display:flex; align-items:center; gap:8px; padding:6px; border:1px solid var(--border); border-radius:14px; background:#fff}
.lang__btn{
  border:0; background:transparent; font-weight:700; font-size:12px;
  padding:8px 10px; border-radius:12px; cursor:pointer;
  color: rgba(11,18,32,.70);
}
.lang__btn[aria-pressed="true"]{background: rgba(11,107,138,.10); color: var(--primary)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius: 14px;
  border:1px solid var(--border);
  font-weight:700;
  font-size:14px;
  letter-spacing: .1px;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
  user-select:none;
}
.btn:active{transform: translateY(1px)}
.btn--primary{background: linear-gradient(135deg, var(--primary), var(--primary2)); color:#fff; border-color: transparent; box-shadow: 0 16px 28px rgba(11,107,138,.18)}
.btn--ghost{background:#fff}
.btn--block{width:100%}

.section{padding:72px 0}
.section--soft{background: var(--soft)}
.section__head{display:grid; gap:10px; margin-bottom:26px}

.h2{font-family:"Playfair Display", serif; font-size: clamp(26px, 3vw, 38px); line-height:1.15; margin:0}
.h3{margin:0; font-size:18px}
.muted{margin:0; color: var(--muted)}
.fine{margin:12px 0 0; color: rgba(11,18,32,.62); font-size:13px}

.hero{
  position:relative;
  overflow:hidden;
  padding:84px 0 54px;
  background:
    radial-gradient(900px 380px at 15% 10%, rgba(10,161,192,.18), transparent 60%),
    radial-gradient(700px 340px at 85% 20%, rgba(255,107,44,.12), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f7fdff 65%, #ffffff 100%);
}
.hero__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:34px; align-items:center}

.eyebrow{margin:0 0 10px; font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color: rgba(11,107,138,.86)}
.hero__title{margin:0; font-family:"Playfair Display", serif; font-size: clamp(34px, 4vw, 56px); line-height:1.05}
.hero__lead{margin:14px 0 0; color: var(--muted); font-size:16px; max-width: 46ch}
.hero__actions{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap}

.trust{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap}
.trust__item{padding:10px 12px; border:1px solid var(--border); border-radius:16px; background: rgba(255,255,255,.72)}
.trust__kpi{display:block; font-weight:900}
.trust__label{display:block; color: rgba(11,18,32,.66); font-size:12px; margin-top:2px}

.hero__visual{position:relative; min-height: 430px}
.heroCard{
  position:relative;
  border-radius: 26px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(11,18,32,.08);
  background:#fff;
}
.heroCard__img{width:100%; height: 430px; object-fit:cover}
.heroCard__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.12) 50%, rgba(255,255,255,.55));
}

.floatShrimp{
  position:absolute;
  top:-28px;
  left:-22px;
  width: 210px;
  transform: rotate(-10deg);
  filter: drop-shadow(0 22px 28px rgba(11,18,32,.18));
  opacity: .96;
  animation: floaty 6.8s ease-in-out infinite;
  pointer-events:none;
}

.stickerShrimp{
  position:absolute;
  right:-56px;
  bottom:-70px;
  width: 270px;
  transform: rotate(18deg);
  filter: blur(2.6px) drop-shadow(0 22px 34px rgba(11,18,32,.14));
  opacity: .78;
  pointer-events:none;
}

.heroBadge{
  position:absolute;
  left:14px;
  bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  border:1px solid var(--border);
  box-shadow: 0 12px 24px rgba(11,18,32,.08);
  font-weight:800;
  color: rgba(11,18,32,.82);
}
.heroBadge__dot{width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg, var(--primary), var(--primary2))}

@keyframes floaty{
  0%,100%{transform: translateY(0) rotate(-10deg)}
  50%{transform: translateY(10px) rotate(-7deg)}
}

.hero__wave{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:54px;
  background: radial-gradient(120px 40px at 20% 10%, rgba(10,161,192,.25), transparent 60%),
              radial-gradient(120px 40px at 60% 30%, rgba(10,161,192,.20), transparent 60%),
              radial-gradient(120px 40px at 85% 10%, rgba(10,161,192,.18), transparent 60%),
              linear-gradient(180deg, rgba(10,161,192,.05), rgba(10,161,192,.0));
}

.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.card{
  padding:18px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(11,18,32,.06);
}

.split{display:grid; grid-template-columns: 1.05fr .95fr; gap:22px; align-items:start}
.checklist{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.checklist li{position:relative; padding-left:30px; font-weight:600; color: rgba(11,18,32,.84)}
.checklist li::before{content:""; position:absolute; left:0; top:7px; width:18px; height:18px; border-radius:6px; background: rgba(11,107,138,.12); border:1px solid rgba(11,107,138,.25)}
.checklist li::after{content:""; position:absolute; left:6px; top:12px; width:8px; height:4px; border-left:2px solid var(--primary); border-bottom:2px solid var(--primary); transform: rotate(-45deg)}

.ctaBox{margin-top:18px; padding:18px; border-radius: 22px; border:1px solid rgba(11,107,138,.18); background: linear-gradient(180deg, rgba(10,161,192,.10), rgba(255,255,255,.75)); display:flex; align-items:center; justify-content:space-between; gap:14px; box-shadow: 0 18px 40px rgba(11,18,32,.08)}

.grid3{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.tile{border-radius: 22px; overflow:hidden; border:1px solid var(--border); background:#fff; box-shadow: 0 14px 28px rgba(11,18,32,.08)}
.tile img{width:100%; height: 220px; object-fit:cover}
.tile--logo{grid-column: 1 / -1; display:flex; align-items:center; justify-content:center; padding:18px}
.tile--logo img{height: 130px; width:auto; object-fit:contain}

.steps{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.step{padding:18px; border:1px solid var(--border); border-radius: var(--radius); background:#fff; box-shadow: 0 12px 26px rgba(11,18,32,.06)}
.step__n{display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:12px; padding:6px 10px; border-radius: 999px; background: rgba(10,161,192,.10); border:1px solid rgba(10,161,192,.22); color: rgba(11,107,138,.95)}

.masonry{display:grid; grid-template-columns: 1.2fr .8fr 1fr; gap:12px}
.masonry__item{border-radius: 22px; overflow:hidden; border:1px solid var(--border); background:#fff; box-shadow: 0 14px 28px rgba(11,18,32,.08)}
.masonry__item img{width:100%; height: 280px; object-fit:cover}
.masonry__item:nth-child(2) img{height: 280px}

.contact{display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start}
.contact__cards{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:16px}
.mini{padding:14px; border:1px solid var(--border); border-radius: 18px; background:#fff; box-shadow: 0 12px 24px rgba(11,18,32,.06)}
.mini__label{display:block; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color: rgba(11,107,138,.90)}
.mini__value{display:block; margin-top:6px; font-weight:700; color: rgba(11,18,32,.86)}

.form{padding:18px; border:1px solid var(--border); border-radius: 26px; background:#fff; box-shadow: var(--shadow)}
.form__row{display:grid; gap:8px; margin-bottom:12px}
.label{font-weight:800; font-size:13px; color: rgba(11,18,32,.82)}
.input,.textarea{
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(11,18,32,.16);
  padding:12px 12px;
  font: inherit;
  outline: none;
}
.input:focus,.textarea:focus{border-color: rgba(10,161,192,.55); box-shadow: 0 0 0 4px rgba(10,161,192,.14)}

.footer{border-top:1px solid var(--border); background:#fff; padding:18px 0}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.footer__logo{height:34px; width:auto}
.footer__link{font-weight:800; font-size:14px; color: rgba(11,107,138,.92)}
.footer__link:hover{text-decoration:underline}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr;}
  .hero__visual{min-height: 390px}
  .heroCard__img{height: 390px}
  .split{grid-template-columns: 1fr}
  .cards{grid-template-columns: 1fr}
  .steps{grid-template-columns: 1fr}
  .masonry{grid-template-columns: 1fr}
  .masonry__item img{height: 260px}
  .contact{grid-template-columns: 1fr}
}

@media (max-width: 820px){
  .nav__toggle{display:inline-flex; align-items:center; justify-content:center}
  .nav__menu{
    position:absolute;
    right:0;
    top:56px;
    width:min(320px, calc(100vw - 24px));
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:12px;
    background: rgba(255,255,255,.96);
    border:1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }
  .nav__menu.is-open{display:flex}
  .nav__link{padding:12px 12px}
  .lang{justify-content:space-between}
}

@media (max-width: 520px){
  .brand__logo{height:38px}
  .hero{padding:70px 0 44px}
  .floatShrimp{width:170px; left:-16px; top:-24px}
  .stickerShrimp{width:220px; right:-52px; bottom:-66px}
}
//ZOOM
/* LIGHTBOX flotante */
.lightbox{
  position: fixed;
  inset: 0; /* top/right/bottom/left:0 */
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 99999;
}

.lightbox.active{
  opacity: 1;
  pointer-events: auto;
}

.lightbox img{
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.masonry__item{ overflow:hidden; border-radius:14px; }
.masonry__item img{ transition:transform .35s ease; display:block; width:100%; }
.masonry__item:hover img{ transform:scale(1.08); }
/* ===== Lightbox estilo MercadoLibre ===== */
.pa-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 99999;
}

.pa-lightbox.is-open{
  opacity: 1;
  pointer-events: auto;
}

.pa-lightbox__img{
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  background: #fff;
}

.pa-lightbox__close{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.2);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}