/* =========================================================
   TIPOGRAFÍAS
   ========================================================= */

@font-face {
  font-family:Blauer;
  src:url('assets/fonts/BlauerNue-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Blauer;
  src:url('assets/fonts/BlauerNue-SemiBold.woff2') format('woff2');
  font-weight:600;
  font-display:swap
}

@font-face {
  font-family:Blauer;
  src:url('assets/fonts/BlauerNue-Bold.woff2') format('woff2');
  font-weight:700;
  font-display:swap
}

@font-face {
  font-family:Brother;
  src:url('assets/fonts/BROTHER-Bold.otf') format('opentype');
  font-weight:700;
  font-display:swap
}

/* =========================================================
   VARIABLES Y BASE
   ========================================================= */

:root {
  --navy:#03283a;
  --mist:#9bb8ba;
  --lime:#e5e494;
  --sun:#ffd166;
  --sand:#f3ece2;
  --wa:#25d366;
  --ink:#082b39;
  --white:#fffdf8;
  --line:rgba(3,40,58,.13)
}

* {
  box-sizing:border-box
}

html {
  min-height:100%;
  scroll-behavior:smooth;
  background:#03283a
}

body {
  min-height:100%;
  margin:0;
  color:var(--navy);
  background:var(--sand);
  font-family:Blauer,Arial,sans-serif
}


body.modal-open-v4 {
  overflow:hidden
}

a {
  color:inherit
}

img {
  max-width:100%;
  height: auto;
}

.skip-link {
  position:absolute;
  z-index:99;
  left:12px;
  top:-50px;
  padding:10px 14px;
  background:#fff;
  border-radius:8px
}

.skip-link:focus {
  top:12px
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  top:0;
  max-width:1440px;
  height:104px;
  margin:auto;
  padding:0 clamp(24px,5vw,72px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  color:#fff
}

.brand {
  width:160px
}

.brand img {
  display:block;
  width:100% !important;
  height: auto;
  filter:brightness(0) invert(1)
}

.site-header nav {
  display:flex;
  gap:32px
}

.site-header nav a {
  text-decoration:none;
  font-size:14px;
  font-weight:600
}

.mini-wa {
  justify-self:end;
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 17px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  background:rgba(3,40,58,.32);
  backdrop-filter:blur(10px)
}

.wa-icon {
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--navy);
  background:var(--wa);
  font-size:12px
}

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

.hero {
  position:relative;
  min-height:820px;
  padding:170px max(6vw,calc((100vw - 1280px)/2)) 90px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:clamp(45px,7vw,110px);
  overflow:hidden;
  color:#fff;
  background:var(--navy)
}

.hero:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(3,40,58,.98) 0 43%,rgba(3,40,58,.62) 68%,rgba(3,40,58,.12)),url('assets/v4/patron-olas.png') center/cover;
  opacity:.48
}

.hero-copy,.hero-visual {
  position:relative;
  z-index:2
}

.kicker {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 22px;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.7px;
  text-transform:uppercase
}

.kicker span {
  width:32px;
  height:3px;
  border-radius:3px;
  background:var(--sun)
}

h1,h2 {
  font-family:Brother,Blauer,sans-serif;
  font-weight:700;
  text-transform:uppercase
}

h1 {
  max-width:680px;
  margin:0;
  font-size:clamp(50px,6.1vw,94px);
  line-height:1;
  letter-spacing:-1.2px
}

h1 em,h2 em {
  color:var(--lime);
  font-style:normal
}

.hero-intro {
  max-width:570px;
  margin:30px 0;
  color:rgba(255,255,255,.82);
  font-size:clamp(17px,1.45vw,21px);
  line-height:1.6
}

.wa-button {
  width:fit-content;
  min-width:310px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px 12px 17px;
  border-radius:18px;
  color:#fff;
  background:var(--wa);
  box-shadow:0 18px 44px rgba(0,0,0,.24);
  text-decoration:none;
  transition:.2s ease
}

.wa-button:hover {
  transform:translateY(-3px);
  box-shadow:0 22px 50px rgba(0,0,0,.32)
}

.wa-button svg {
  width:29px;
  fill:#fff
}

.wa-button span {
  display:flex;
  flex:1;
  flex-direction:column;
  font-size:17px;
  font-weight:700
}

.wa-button small {
  margin-bottom:2px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase
}

.wa-button b {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(3,40,58,.15);
  font-size:20px
}

.wa-number {
  margin:17px 0 0;
  font-size:12px;
  font-weight:600
}

.wa-number span {
  color:var(--wa)
}

.hero-visual {
  min-height:560px
}

.hero-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:160px 24px 24px 24px;
  filter:saturate(.9);
  box-shadow:0 30px 90px rgba(0,0,0,.35)
}

.phone-store {
  position:absolute;
  left:-34px;
  bottom:-58px;
  width:min(390px,78%);
  overflow:hidden;
  border:9px solid #071d2a;
  border-radius:48px;
  color:var(--navy);
  background:#fff;
  box-shadow:0 35px 80px rgba(0,0,0,.42);
  transform:rotate(-2deg)
}

.phone-island {
  position:absolute;
  z-index:4;
  left:50%;
  top:8px;
  width:88px;
  height:22px;
  border-radius:999px;
  background:#071d2a;
  transform:translateX(-50%)
}

.phone-status {
  height:42px;
  padding:13px 20px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#f7f7f7;
  font-size:9px
}

.phone-status span {
  font-size:7px;
  letter-spacing:1px
}

.phone-browser {
  height:50px;
  padding:4px 15px;
  display:grid;
  grid-template-columns:30px 1fr 30px;
  align-items:center;
  border-bottom:1px solid var(--line);
  background:#f7f7f7
}

.phone-browser>span {
  font-size:29px
}

.phone-browser div {
  display:flex;
  flex-direction:column;
  text-align:center
}

.phone-browser strong {
  font-size:12px
}

.phone-browser small {
  margin-top:1px;
  color:#75858d;
  font-size:8px
}

.phone-browser>b {
  font-size:10px;
  letter-spacing:1px
}

.store-brandbar {
  height:58px;
  padding:7px 12px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#fff;
  background:#075e54
}

.store-brandbar>img {
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover
}

.store-brandbar>span {
  display:flex;
  flex:1;
  flex-direction:column
}

.store-brandbar strong {
  font-size:13px
}

.store-brandbar small {
  opacity:.78;
  font-size:9px
}

.store-cart {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  font-style:normal
}

.store-cart img {
  width:54px;
  height:54px;
  object-fit:contain;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.2))
}

.store-screen {
  padding:0 14px 10px;
  color:var(--navy);
  background:#fff
}

.store-title {
  height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.store-title div {
  display:flex;
  flex-direction:column
}

.store-title strong {
  font-size:15px
}

.store-title small {
  margin-top:2px;
  color:#75858d;
  font-size:8px
}

.store-title>span {
  letter-spacing:2px
}

.store-list {
  margin:0;
  padding:4px 0;
  list-style:none
}

.store-list li {
  min-height:62px;
  padding:6px 0;
  display:grid;
  grid-template-columns:50px 1fr auto;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(3,40,58,.08)
}

.store-thumb {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:12px;
  background:linear-gradient(145deg,#f5efe6,#fff)
}

.store-thumb img {
  width:46px;
  height:46px;
  display:block;
  object-fit:contain
}

.store-list li>div {
  display:flex;
  min-width:0;
  flex-direction:column
}

.store-list strong {
  font-size:11px;
  white-space:nowrap
}

.store-list small {
  margin-top:3px;
  color:#74858c;
  font-size:8px;
  line-height:1.3
}

.store-qty {
  display:flex;
  gap:4px
}

.store-qty button {
  width:27px;
  height:27px;
  padding:0;
  border:0;
  border-radius:8px;
  color:var(--navy);
  background:#f1f2f2;
  font:700 18px/1 Blauer,Arial,sans-serif;
  cursor:default
}

.store-qty button:last-child {
  color:#fff;
  background:#00a884
}

.store-balance {
  margin-top:5px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:9px;
  border-radius:13px;
  background:#d9f3e9
}

.store-balance>span {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:2px solid #00a884;
  border-radius:50%;
  color:#00a884;
  font-weight:700
}

.store-balance div {
  display:flex;
  flex-direction:column
}

.store-balance strong {
  font-size:10px
}

.store-balance small {
  margin-top:2px;
  font-size:8px
}

.phone-home {
  height:25px;
  display:grid;
  place-items:center;
  background:#fff
}

.phone-home span {
  width:100px;
  height:4px;
  border-radius:99px;
  background:#071d2a
}

.hero-sticker {
  position:absolute;
  right:-20px;
  top:48px;
  width:132px;
  height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:50%;
  color:var(--navy);
  background:var(--sun);
  box-shadow:0 14px 40px rgba(0,0,0,.24);
  transform:rotate(9deg)
}

.hero-sticker strong {
  font-family:Brother;
  font-size:30px
}

.hero-sticker span {
  font-size:10px;
  font-weight:700;
  line-height:1.05;
  text-transform:uppercase
}

/* =========================================================
   FRANJA RÁPIDA
   ========================================================= */

.quick-strip {
  max-width:1160px;
  margin:-32px auto 0;
  position:relative;
  z-index:5;
  padding:25px 35px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-radius:22px;
  background:var(--lime);
  box-shadow:0 20px 50px rgba(3,40,58,.14)
}

.quick-strip p {
  margin:0;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  padding:4px 24px;
  border-right:1px solid rgba(3,40,58,.16)
}

.quick-strip p:last-child {
  border:0
}

.quick-strip strong {
  grid-row:1/3;
  color:rgba(3,40,58,.28);
  font-family:Brother;
  font-size:34px
}

.quick-strip span {
  font-weight:700
}

.quick-strip small {
  font-size:11px
}

/* =========================================================
   SECCIONES PRINCIPALES
   ========================================================= */

.how,.plans,.final-cta {
  max-width:1280px;
  margin:auto;
  padding:120px 40px
}

.how {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:100px;
  align-items:start;
  background:var(--sand)
}

.section-copy h2,.section-heading h2,.shop h2,.final-cta h2 {
  margin:0;
  font-size:clamp(45px,5.4vw,74px);
  line-height:.92
}

.section-copy>p:last-child {
  max-width:430px;
  color:#496573;
  font-size:17px;
  line-height:1.65
}

.steps {
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line)
}

.steps li {
  display:grid;
  grid-template-columns:62px 1fr;
  gap:22px;
  padding:28px 4px;
  border-bottom:1px solid var(--line)
}

.steps li>b {
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--navy);
  background:var(--sun);
  font-family:Brother;
  font-size:25px
}

.steps h3 {
  margin:2px 0 6px;
  font-size:20px
}

.steps p {
  margin:0;
  color:#54707c;
  line-height:1.5
}

.plans {
  max-width:none;
  color:#fff;
  background:var(--navy);
  padding-left:max(6vw,calc((100vw - 1280px)/2));
  padding-right:max(6vw,calc((100vw - 1280px)/2))
}

.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:50px
}

.section-heading>p {
  max-width:480px;
  color:rgba(255,255,255,.63);
  line-height:1.6
}

.plan-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}

.plan-card {
  position:relative;
  overflow:hidden;
  border-radius:22px;
  color:var(--navy);
  background:var(--white);
  box-shadow:0 18px 45px rgba(0,0,0,.16)
}

.plan-card>img {
  display:block;
  width:calc(100% - 20px);
  height:auto;
  aspect-ratio:3/2;
  margin:10px;
  object-fit:contain;
  border:2px solid rgba(155,184,186,.72);
  border-radius:14px;
  background:#e5f0f0
}

.plan-body {
  padding:25px
}

.plan-body small {
  font-size:10px;
  letter-spacing:1.8px;
  text-transform:uppercase
}

.plan-body h3 {
  margin:2px 0 10px;
  font-family:Brother;
  font-size:42px;
  text-transform:uppercase
}

.plan-body p {
  min-height:40px;
  color:#61747d;
  font-size:14px
}

.plan-body ul {
  padding:0;
  list-style:none
}

.plan-body li {
  margin:8px 0;
  font-size:13px
}

.plan-body li:before {
  content:"✓";
  margin-right:8px;
  color:#00a884
}

.plan-body a {
  display:block;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
  text-decoration:none;
  font-weight:700
}

.featured {
  outline:3px solid var(--sun);
  transform:translateY(-10px)
}

.recommended {
  position:absolute;
  z-index:2;
  right:15px;
  top:15px;
  padding:8px 12px;
  border-radius:999px;
  color:var(--navy);
  background:var(--sun);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase
}

.shop {
  position:relative;
  min-height:760px;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  color:#fff;
  background:var(--mist)
}

.shop-photo {
  min-height:760px
}

.shop-photo img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}

.shop-copy {
  padding:110px max(7vw,80px);
  align-self:center;
  color:var(--navy)
}

.shop-copy>p:not(.kicker) {
  max-width:530px;
  font-size:17px;
  line-height:1.65
}

.categories {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:28px 0
}

.categories span {
  padding:10px 13px;
  border:1px solid rgba(3,40,58,.16);
  border-radius:999px;
  background:rgba(255,255,255,.26);
  font-size:12px;
  font-weight:600
}

.text-wa {
  display:inline-block;
  margin-top:16px;
  font-weight:700
}

.shop-emoji {
  position:absolute;
  right:-70px;
  bottom:-75px;
  width:260px;
  filter:drop-shadow(0 20px 25px rgba(3,40,58,.22));
  transform:rotate(-10deg)
}

.instagram {
  padding:110px max(6vw,calc((100vw - 1180px)/2));
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  align-items:center;
  gap:80px;
  color:#fff;
  background:var(--navy)
}

.instagram-copy>p:not(.kicker) {
  max-width:500px;
  color:rgba(255,255,255,.72);
  font-size:17px;
  line-height:1.65
}

.instagram-copy>a {
  display:inline-block;
  margin-top:18px;
  padding:13px 18px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-weight:700
}

.instagram-card {
  min-height:360px;
  padding:46px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:34px;
  color:#fff;
  background:radial-gradient(circle at 25% 100%,#ffd166 0 12%,transparent 38%),radial-gradient(circle at 90% 0,#8b5cf6 0 14%,transparent 42%),linear-gradient(145deg,#e1306c,#833ab4 58%,#405de6);
  box-shadow:0 30px 70px rgba(0,0,0,.34);
  text-align:center;
  text-decoration:none
}

.instagram-card img {
  width:96px;
  height:96px;
  margin-bottom:24px;
  border-radius:28px;
  filter:brightness(0) invert(1)
}

.instagram-card span {
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase
}

.instagram-card strong {
  margin:7px 0 22px;
  font-family:Brother;
  font-size:42px
}

.instagram-card small {
  padding:9px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.14)
}

.sponsors {
  padding:110px max(6vw,calc((100vw - 1180px)/2));
  background:var(--white)
}

.sponsors[hidden] {
  display:none
}

.sponsors-head {
  max-width:720px;
  margin-bottom:55px
}

.sponsors-head h2 {
  margin:0;
  font-size:clamp(45px,5.4vw,74px);
  line-height:.92
}

.sponsors-head>p:last-child {
  color:#5b727c;
  line-height:1.6
}

.sponsor-tier+ .sponsor-tier {
  margin-top:95px
}

.tier-label {
  margin-bottom:18px;
  display:flex;
  align-items:baseline;
  gap:14px
}

.tier-label span {
  font-family:Brother;
  font-size:34px;
  text-transform:uppercase
}

.tier-label small {
  color:#6c828b
}

.sponsor-grid {
  display:grid;
  gap:18px
}

.sponsor-gold .sponsor-grid {
  grid-template-columns:repeat(3,1fr)
}

.sponsor-silver .sponsor-grid {
  grid-template-columns:repeat(5,1fr)
}

.sponsor-silver .sponsor-card {
  min-height:135px;
  padding:20px
}

.sponsor-card {
  min-height:150px;
  padding:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 30px rgba(3,40,58,.07);
  text-decoration:none
}

.sponsor-card img {
  display:block;
  width:auto;
  max-width:75%;
  max-height:105px
}

.sponsor-gold .sponsor-card {
  min-height:180px
}

.sponsor-gold .sponsor-card img {
  max-height:125px
}

.sponsor-placeholder {
  color:#8da0a7;
  border-style:dashed;
  box-shadow:none;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px
}

.sponsors-business-cta {
  margin-top:48px;
  padding-top:22px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  border-top:1px solid rgba(3,40,58,.1)
}

.sponsors-business-cta p {
  margin:0;
  color:#83949b;
  font-size:13px
}

.sponsors-business-cta a {
  color:var(--navy);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(3,40,58,.35);
  transition:color .2s ease,border-color .2s ease
}

.sponsors-business-cta a:hover {
  color:#08748c;
  border-color:#08748c
}

.final-cta {
  display:grid;
  grid-template-columns:260px 1fr auto;
  gap:55px;
  align-items:center;
  background:var(--sand)
}

.final-cta>img {
  filter:drop-shadow(0 20px 22px rgba(3,40,58,.16))
}

.final-cta .wa-button {
  color:#fff
}

.final-cta>div>p:last-child {
  font-size:17px
}

.final-cta h2 {
  font-size:clamp(42px,5vw,68px)
}

.site-footer {
  padding:72px max(6vw,calc((100vw - 1280px)/2)) 30px;
  display:grid;
  grid-template-columns:.9fr repeat(3,1fr);
  align-items:start;
  gap:52px 70px;
  color:var(--sand);
  background:var(--navy)
}

.footer-brand {
  display:flex;
  align-items:flex-start
}

.footer-brand img {
  width:145px;
  height: auto;

}

.site-footer p {
  margin:0;
  color:rgba(255,255,255,.45);
  font-size:11px
}

.footer-column {
  display:flex;
  flex-direction:column;
  gap:16px
}

.footer-column strong {
  margin-bottom:5px;
  color:#fff;
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase
}

.site-footer a {
  width:fit-content;
  color:rgba(255,255,255,.68);
  font-size:12px;
  text-decoration:none
}

.site-footer a:hover {
  color:#fff
}

.footer-bottom {
  grid-column:1/-1;
  padding-top:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.12)
}

.footer-bottom a {
  color:var(--sand);
  font-size:inherit
}

.floating-wa {
  display:none
}

/* =========================================================
   WHATSAPP / MODAL
   ========================================================= */

.whatsapp-modal-v4 {
  width:min(420px,calc(100vw - 28px));
  max-width:none;
  margin:auto;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:24px;
  color:var(--navy);
  background:transparent
}

.whatsapp-modal-v4::backdrop {
  background:rgba(3,18,29,.68);
  backdrop-filter:blur(7px)
}

.whatsapp-modal-v4-card {
  position:relative;
  padding:34px;
  border-radius:24px;
  text-align:center;
  background:var(--sand);
  box-shadow:0 32px 90px rgba(0,0,0,.34)
}

.whatsapp-modal-v4-close {
  position:absolute;
  right:14px;
  top:14px;
  width:36px;
  height:36px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--navy);
  background:#fff;
  font:300 24px/1 Blauer,Arial,sans-serif;
  cursor:pointer
}

.whatsapp-modal-v4-icon {
  width:54px;
  height:54px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border-radius:17px;
  color:#fff;
  background:var(--wa);
  font-size:26px;
  box-shadow:0 12px 25px rgba(37,211,102,.28)
}

.whatsapp-modal-v4 .kicker {
  justify-content:center;
  margin-bottom:10px
}

.whatsapp-modal-v4 h2 {
  margin:0;
  font-size:34px;
  line-height:1
}

.whatsapp-modal-v4-card>p:not(.kicker) {
  max-width:300px;
  margin:14px auto 18px;
  color:#526b76;
  font-size:13px;
  line-height:1.55
}

.whatsapp-qr-v4 {
  width:176px;
  min-height:176px;
  margin:0 auto 12px;
  padding:10px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line)
}

.whatsapp-qr-v4 img {
  display:block;
  max-width:100%
}

.whatsapp-modal-v4-card>strong {
  display:block;
  margin-bottom:16px;
  font-size:14px
}

.whatsapp-modal-v4-card>a {
  min-height:52px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  color:#fff;
  background:var(--wa);
  text-decoration:none;
  font-size:13px;
  font-weight:700
}

.whatsapp-copy-v4 {
  margin-top:9px;
  padding:9px 14px;
  border:0;
  color:var(--navy);
  background:transparent;
  font:700 11px Blauer,Arial,sans-serif;
  cursor:pointer
}

.whatsapp-copy-status-v4 {
  min-height:16px;
  display:block;
  color:#078b3a;
  font-size:10px
}

a:focus-visible {
  outline:3px solid var(--sun);
  outline-offset:4px
}

/* =========================================================
   RESPONSIVE BASE
   ========================================================= */

@media(max-width:980px) {
  .site-header {
    grid-template-columns:1fr auto
  }
  .site-header nav {
    display:none
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:135px
  }
  .hero-copy {
    text-align:center
  }
  .hero-copy .kicker,.hero-copy .wa-button {
    margin-left:auto;
    margin-right:auto
  }
  .hero-intro {
    margin-left:auto;
    margin-right:auto
  }
  .hero-visual {
    width:min(680px,100%);
    margin:auto
  }
  .quick-strip {
    margin:0;
    border-radius:0
  }
  .how {
    grid-template-columns:1fr;
    gap:35px
  }
  .plan-grid {
    grid-template-columns:1fr;
    max-width:650px;
    margin:auto
  }
  .featured {
    transform:none
  }
  .shop {
    grid-template-columns:1fr
  }
  .shop-photo {
    min-height:600px
  }
  .shop-copy {
    padding:80px 40px
  }
  .instagram {
    grid-template-columns:1fr;
    text-align:center
  }
  .instagram .kicker {
    justify-content:center
  }
  .instagram-card {
    width:min(430px,100%);
    margin:auto
  }
  .sponsor-gold .sponsor-grid,.sponsor-silver .sponsor-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .final-cta {
    grid-template-columns:190px 1fr
  }
  .final-cta .wa-button {
    grid-column:1/-1;
    justify-self:center
  }
  .site-footer {
    grid-template-columns:1fr 1fr;
    text-align:left
  }
  .footer-brand {
    grid-column:1/-1
  }
  .footer-brand img {
    margin:0
  }
  .footer-bottom {
    align-items:flex-start;
    gap:12px
  }
}

@media(max-width:620px) {
  .sponsor-grid .sponsor-placeholder ~ .sponsor-placeholder {
    display:none
  }

  .site-header {
    height:82px;
    padding:0 18px
  }
  .brand {
    width:128px
  }
  .mini-wa {
    padding:10px 12px
  }
  .mini-wa .wa-icon {
    display:none
  }
  .hero {
    min-height:auto;
    padding:125px 20px 0px
  }
  .hero:before {
    background:linear-gradient(rgba(3,40,58,.9),rgba(3,40,58,.76)),url('assets/v4/patron-olas.png') center/cover
  }
  h1 {
    font-size:52px
  }
  .hero-visual {
    min-height:650px
  }
  .hero-photo {
    border-radius:90px 18px 18px
  }
  .phone-store {
    left:50%;
    bottom:-58px;
    width:min(350px,94%);
    transform:translateX(-50%) rotate(-1deg)
  }
  .hero-sticker {
    right:-5px;
    top:28px;
    width:105px;
    height:105px
  }
  .hero-sticker strong {
    font-size:23px
  }
  .quick-strip {
    grid-template-columns:1fr 1fr;
    padding:22px 14px
  }
  .quick-strip p {
    padding:12px;
    border-right:0;
    border-bottom:1px solid rgba(3,40,58,.14)
  }
  .quick-strip p:nth-last-child(-n+2) {
    border-bottom:0
  }
  .how,.plans,.final-cta,.instagram,.sponsors {
    padding:82px 22px
  }
  .section-copy h2,.section-heading h2,.shop h2,.final-cta h2 {
    font-size:44px
  }
  .section-heading {
    display:block
  }
  .plan-grid {
    gap:18px
  }
  .shop-photo {
    min-height:520px
  }
  .shop-copy {
    padding:70px 22px 110px
  }
  .shop-emoji {
    width:190px
  }
  .instagram-card {
    min-height:300px;
    padding:32px 20px
  }
  .sponsor-gold .sponsor-grid,.sponsor-silver .sponsor-grid {
    grid-template-columns:1fr
  }

  .sponsor-silver_ {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .sponsors-business-cta {
    margin-top:38px;
    padding-top:20px;
    align-items:center;
    flex-direction:column;
    gap:9px;
    text-align:center
  }
  .sponsors-business-cta a {
    width:auto
  }
  .final-cta {
    grid-template-columns:1fr;
    text-align:center
  }
  .final-cta>img {
    width:220px;
    margin:auto;
    height: auto;
  }
  .final-cta .kicker {
    justify-content:center
  }
  .wa-button {
    min-width:0;
    width:100%
  }
  .site-footer {
    padding:60px 22px 100px;
    grid-template-columns:1fr;
    gap:38px
  }
  .footer-brand,.footer-column,.footer-bottom {
    grid-column:auto
  }
  .footer-column {
    gap:13px
  }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    text-align:left
  }
  .floating-wa {
    position:fixed;
    z-index:30;
    left:14px;
    right:14px;
    bottom:12px;
    height:54px;
    padding:0 17px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:16px;
    color:#fff;
    background:var(--wa);
    box-shadow:0 12px 35px rgba(3,40,58,.32);
    text-decoration:none
  }
  .floating-wa span {
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(0,0,0,.12)
  }
}

/* V4 · acceso comercial visible sin competir con el contenido principal */
.business-shortcut {
  max-width:1160px;
  margin:22px auto 0;
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  color:rgba(3,40,58,.58);
  font-size:12px
}

.business-shortcut span {
  letter-spacing:.08em;
  text-transform:uppercase
}

.business-shortcut a {
  padding:8px 13px;
  color:var(--navy);
  border:1px solid rgba(3,40,58,.18);
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  transition:color .2s ease,border-color .2s ease,background .2s ease
}

.business-shortcut a:hover,
.business-shortcut a:focus-visible {
  color:#fff;
  border-color:var(--navy);
  background:var(--navy)
}

@media(max-width:620px) {
  .business-shortcut {
    margin:18px 18px 0;
    padding:0;
    justify-content:center;
    flex-wrap:wrap;
    gap:7px;
    text-align:center
  }

  .business-shortcut span {
    width:100%;
    font-size:10px
  }

  .business-shortcut a {
    padding:7px 12px;
    font-size:12px
  }

  .floating-business.is-scroll-controlled {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(18px);
    transition:opacity .24s ease,transform .24s ease,visibility .24s ease
  }

  .floating-business.is-scroll-controlled.is-visible {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0)
  }
}

@media(prefers-reduced-motion:reduce) {
  .floating-business.is-scroll-controlled {
    transition:none
  }
}

/* V4 · acceso comercial flotante durante la preventa de temporada */
.floating-business {
  display:none
}

@media(max-width:620px) {
  .floating-wa {
    display:none !important
  }

  .floating-business {
    position:fixed;
    z-index:30;
    right:16px;
    bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px));
    min-height:58px;
    padding:8px 10px 8px 9px;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--navy);
    background:rgba(255,253,248,.96);
    border:1px solid rgba(3,40,58,.13);
    border-radius:18px;
    box-shadow:0 8px 24px rgba(3,25,38,.22);
    text-decoration:none;
    backdrop-filter:blur(10px)
  }

  .floating-business > span {
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    color:var(--navy);
    background:var(--sun);
    border-radius:13px;
    font-size:18px
  }

  .floating-business > span img {
    width:27px;
    height:27px;
    display:block;
    object-fit:contain
  }

  .floating-business b {
    display:grid;
    gap:2px;
    font-size:13px;
    line-height:1.05
  }

  .floating-business small {
    color:#607986;
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase
  }

  .floating-business i {
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:#fff;
    background:var(--navy);
    font-style:normal
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .wa-button {
    transition:none
  }
}

/* V4 · categorías ilustradas y espacios de sponsors sutiles */
.hero-visual {
  min-height:650px
}

.store-title {
  height:48px
}

.store-list {
  padding:3px 0
}

.store-list li {
  min-height:51px;
  padding:4px 0;
  grid-template-columns:43px 1fr auto;
  gap:8px
}

.store-thumb {
  width:41px;
  height:41px;
  border:1px solid rgba(3,40,58,.08);
  border-radius:11px
}

.store-thumb img {
  width:39px;
  height:39px
}

.store-list strong {
  font-size:10px
}

.store-list small {
  margin-top:2px;
  font-size:7px;
  line-height:1.25
}

.store-qty button {
  width:24px;
  height:24px;
  border-radius:7px;
  font-size:16px
}

.store-balance {
  padding:8px
}

.sponsor-placeholder {
  color:transparent;
  border-color:rgba(3,40,58,.17);
  border-style:dashed;
  background:linear-gradient(rgba(3,40,58,.08),rgba(3,40,58,.08)) center calc(50% + 28px)/76px 7px no-repeat,radial-gradient(circle,rgba(3,40,58,.08) 0 24px,transparent 25px) center calc(50% - 15px)/52px 52px no-repeat,rgba(3,40,58,.012);
  box-shadow:none;
  opacity:.32
}

@media(max-width:620px) {
  .hero-visual {
    min-height:720px
  }
}

/* V4 · hero editorial: póster oficial + tienda compacta */
.hero-visual {
  min-height:570px
}

.hero-poster {
  left:auto;
  right:0;
  width:66%;
  height:100%;
  object-fit:contain;
  object-position:right center;
  border-radius:24px;
  filter:none;
  background:var(--navy)
}

.phone-store {
  left:0;
  bottom:18px;
  width:min(320px,62%);
  border-width:7px;
  border-radius:38px;
  transform:rotate(-2deg)
}

.phone-store .store-brandbar {
  height:52px
}

.phone-store .store-title {
  height:45px
}

.phone-store .store-list li {
  min-height:49px
}

.hero-sticker {
  right:-8px;
  top:28px;
  width:112px;
  height:112px
}

@media(max-width:620px) {
  .hero-visual {
    min-height:560px
  }
  .hero-poster {
    right:50%;
    width:72%;
    height:100%;
    transform:translateX(50%);
    opacity:.82
  }
  .phone-store {
    left:50%;
    bottom:-30px;
    width:min(285px,78%);
    transform:translateX(-50%) rotate(-1deg)
  }
  .hero-sticker {
    right:0;
    top:18px
  }
}

/* V4 · QR oficial de Instagram */
.instagram-card .instagram-qr {
  width:min(260px,72%);
  height:auto;
  margin:0 0 24px;
  border-radius:22px;
  object-fit:contain;
  filter:none;
  box-shadow:0 18px 42px rgba(24,16,68,.25)
}

.instagram-card:has(.instagram-qr) {
  padding:32px;
  min-height:500px
}

.instagram-card:has(.instagram-qr) strong {
  margin-bottom:14px
}

@media(max-width:620px) {
  .instagram-card .instagram-qr {
    width:min(220px,82%)
  }
  .instagram-card:has(.instagram-qr) {
    min-height:440px;
    padding:26px 16px
  }
}

/* V4 · foto oficial restaurada, póster dentro de la tienda y marca del pie */
.phone-store {
  width:min(300px,59%)
}

.store-poster {
  position:relative;
  min-height:92px;
  margin:0 -14px;
  padding:15px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  color:var(--lime);
  background:var(--navy) url('assets/v4/patron-olas.png') center/cover
}

.store-poster:after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(3,40,58,.42)
}

.store-poster span,.store-poster strong {
  position:relative;
  z-index:1
}

.store-poster span {
  width:fit-content;
  margin-bottom:5px;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:6px;
  color:#fff;
  font-size:8px;
  font-weight:600
}

.store-poster strong {
  font-family:Brother,Blauer,sans-serif;
  font-size:17px;
  line-height:.92;
  text-transform:uppercase
}

.footer-brand {
  position:relative;
  width:220px;
  height:120px;
  overflow:hidden;
  align-self:start
}

.footer-brand img {
  position:absolute;
  left:-67px;
  top:-117px;
  width:353px;
  max-width:none;
  height: auto;
  
}

@media(max-width:620px) {
  .phone-store {
    width:min(276px,78%)
  }
  .store-poster {
    min-height:82px
  }
  .footer-brand {
    width:200px;
    height:110px
  }
  .footer-brand img {
    left:-61px;
    top:-107px;
    width:321px;
    height: auto;
  }
}

/* V4 · seguimiento de entrega en la playa */
.hero-photo {
  object-position:68% 22%
}

.phone-tracking {
  left:-72px;
  bottom:8px;
  width:min(250px,48%);
  border-width:7px;
  border-radius:34px;
  transform:rotate(-3deg)
}

.tracking-head {
  height:58px;
  padding:8px 12px;
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:8px;
  color:#fff;
  background:#087061
}

.tracking-head>img {
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover
}

.tracking-head>div {
  display:flex;
  flex-direction:column
}

.tracking-head small {
  font-size:8px;
  opacity:.78
}

.tracking-head strong {
  font-size:12px
}

.tracking-head>span {
  font-size:9px;
  letter-spacing:1px
}

.tracking-map {
  position:relative;
  height:330px;
  overflow:hidden;
  background:linear-gradient(18deg,#bfeef1 0 23%,transparent 23.4%),radial-gradient(circle at 72% 22%,rgba(229,228,148,.62) 0 4px,transparent 5px),linear-gradient(28deg,transparent 0 46%,rgba(3,40,58,.08) 46.5% 48%,transparent 48.5%),repeating-linear-gradient(68deg,rgba(3,40,58,.06) 0 1px,transparent 1px 34px),repeating-linear-gradient(-20deg,rgba(3,40,58,.05) 0 1px,transparent 1px 38px),#f5f1e9
}

.map-water {
  position:absolute;
  left:-12%;
  right:-12%;
  bottom:-42px;
  height:126px;
  border-radius:46% 54% 0 0;
  background:#8bdbe5
}

.map-route {
  position:absolute;
  left:30%;
  top:39%;
  width:45%;
  height:33%;
  border-top:3px dashed var(--sun);
  border-right:3px dashed var(--sun);
  border-radius:0 55% 0 0;
  transform:rotate(13deg)
}

.beach-marker {
  position:absolute;
  left:25%;
  bottom:72px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:3px solid #fff;
  border-radius:50% 50% 50% 0;
  background:var(--navy);
  box-shadow:0 8px 18px rgba(3,40,58,.25);
  transform:rotate(-45deg)
}

.beach-marker i {
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--sand)
}

.courier-marker {
  position:absolute;
  right:4px;
  top:112px;
  width:108px;
  filter:drop-shadow(0 9px 9px rgba(3,40,58,.2))
}

.tracking-card {
  position:absolute;
  left:10px;
  right:10px;
  top:12px;
  padding:12px;
  border-radius:14px;
  color:var(--navy);
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 25px rgba(3,40,58,.13)
}

.tracking-card small,.tracking-card span {
  display:block
}

.tracking-card small {
  color:#16846a;
  font-size:7px;
  font-weight:700;
  text-transform:uppercase
}

.tracking-card strong {
  display:block;
  margin:4px 0 7px;
  font-family:Brother,Blauer,sans-serif;
  font-size:19px
}

.tracking-card span {
  font-size:8px;
  font-weight:600
}

.hero-sticker {
  top:104px;
  right:0
}

@media(max-width:620px) {
  .hero-photo {
    object-position:60% 20%
  }
  .phone-tracking {
    left:10px;
    bottom:-18px;
    width:min(226px,66%);
    transform:rotate(-2deg)
  }
  .tracking-map {
    height:300px
  }
  .courier-marker {
    width:94px;
    top:110px
  }
  .hero-sticker {
    top:84px;
    right:2px
  }
}

/* V4 · costa de Playa Mansa y proporciones finales del hero */
.hero-photo {
  inset:4%;
  width:92%;
  height:92%;
  object-position:62% 78%;
  border-radius:125px 22px 22px 22px
}

.tracking-map {
  background:repeating-linear-gradient(64deg,rgba(92,119,130,.11) 0 2px,transparent 2px 46px),repeating-linear-gradient(-18deg,rgba(92,119,130,.09) 0 2px,transparent 2px 58px),#f5f4f1
}

.map-water {
  left:-18%;
  right:-18%;
  bottom:-38px;
  height:108px;
  border-radius:45% 55% 0 0;
  background:#76d1e3;
  transform:rotate(7deg)
}

.map-sand {
  position:absolute;
  left:-15%;
  right:-15%;
  bottom:42px;
  height:52px;
  border-radius:48% 52% 0 0;
  background:#f2dfae;
  transform:rotate(7deg)
}

.map-rambla {
  position:absolute;
  z-index:1;
  left:-12%;
  right:-12%;
  bottom:84px;
  height:28px;
  padding-left:70px;
  display:flex;
  align-items:center;
  border-top:5px solid rgba(0,168,132,.75);
  border-bottom:2px solid #b8c7cd;
  color:#55717d;
  background:#dce4e7;
  font-size:7px;
  font-weight:700;
  white-space:nowrap;
  transform:rotate(7deg)
}

.map-street {
  position:absolute;
  color:#758991;
  font-size:7px;
  font-weight:600
}

.street-one {
  left:15px;
  top:145px;
  transform:rotate(65deg)
}

.street-two {
  left:77px;
  bottom:48px;
  color:#0d8d73;
  transform:rotate(7deg)
}

.map-route {
  left:33%;
  top:49%;
  width:48%;
  height:25%;
  border-color:#00a884;
  transform:rotate(9deg)
}

.beach-marker {
  left:22%;
  bottom:46px
}

.courier-marker {
  right:5px;
  top:auto;
  bottom:80px;
  width:98px
}

.hero-sticker {
  top:118px;
  right:2px;
  width:124px;
  height:124px;
  padding:17px;
  gap:4px;
  text-align:center
}

.hero-sticker strong {
  font-size:27px
}

.hero-sticker span {
  font-size:9px
}

@media(max-width:620px) {
  .hero-photo {
    inset:5%;
    width:90%;
    height:90%;
    object-position:61% 16%;
    border-radius:78px 18px 18px
  }
  .hero-sticker {
    top:98px;
    right:4px;
    width:112px;
    height:112px;
    padding:15px
  }
  .hero-sticker strong {
    font-size:24px
  }
  .courier-marker {
    bottom:76px;
    width:88px
  }
}

/* V4 · seguimiento como banner y tienda breve */
.phone-tracking {
  width:min(270px,51%)
}

.phone-tracking .tracking-map {
  height:178px
}

.phone-tracking .tracking-card {
  left:8px;
  right:8px;
  top:8px;
  padding:8px 10px;
  border-radius:11px
}

.phone-tracking .tracking-card small {
  font-size:6px
}

.phone-tracking .tracking-card strong {
  margin:2px 0 3px;
  font-size:14px
}

.phone-tracking .tracking-card span {
  font-size:7px
}

.phone-tracking .map-water {
  bottom:-54px;
  height:90px
}

.phone-tracking .map-sand {
  bottom:19px;
  height:34px
}

.phone-tracking .map-rambla {
  bottom:48px;
  height:20px;
  padding-left:58px;
  border-top-width:3px;
  font-size:5px
}

.phone-tracking .street-one {
  top:105px;
  font-size:5px
}

.phone-tracking .street-two {
  bottom:23px;
  left:74px;
  font-size:5px
}

.phone-tracking .map-route {
  top:52%;
  height:19%;
  border-width:2px
}

.phone-tracking .beach-marker {
  left:22%;
  bottom:24px;
  width:25px;
  height:25px;
  border-width:2px
}

.phone-tracking .beach-marker i {
  width:8px;
  height:8px
}

.phone-tracking .courier-marker {
  right:7px;
  bottom:44px;
  width:58px;
  max-height:92px;
  object-fit:contain;
  object-position:center bottom
}

.tracking-shop {
  padding:0 12px 8px;
  background:#fff
}

.tracking-shop-title {
  height:43px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.tracking-shop-title>div {
  display:flex;
  flex-direction:column
}

.tracking-shop-title strong {
  font-size:13px
}

.tracking-shop-title small {
  margin-top:1px;
  color:#75858d;
  font-size:7px
}

.tracking-shop-title>span {
  font-size:9px;
  letter-spacing:1px
}

.tracking-products>div {
  min-height:49px;
  display:grid;
  grid-template-columns:40px 1fr 25px;
  align-items:center;
  gap:7px;
  border-bottom:1px solid rgba(3,40,58,.08)
}

.tracking-products .store-thumb {
  width:38px;
  height:38px
}

.tracking-products .store-thumb img {
  width:36px;
  height:36px
}

.tracking-products p {
  margin:0;
  display:flex;
  flex-direction:column
}

.tracking-products strong {
  font-size:9px
}

.tracking-products small {
  margin-top:2px;
  color:#75858d;
  font-size:7px
}

.tracking-products b {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:7px;
  color:#fff;
  background:#00a884;
  font-size:15px
}

@media(max-width:620px) {
  .phone-tracking {
    width:min(238px,68%)
  }
  .phone-tracking .tracking-map {
    height:164px
  }
  .phone-tracking .courier-marker {
    width:52px;
    max-height:82px
  }
  .tracking-products>div {
    min-height:46px
  }
}

/* V4 · teléfono ilustrado final con sombrilla y marca oficial */
.hero-phone-render {
  position:absolute;
  z-index:3;
  left:-5%;
  bottom:-8%;
  width:min(380px,58%);
  height:auto;
  display:block;
  filter:drop-shadow(0 28px 42px rgba(0,0,0,.38));
  transform:rotate(-2deg)
}

/*.sponsor-card[href*="unikms.com"] img {
  filter:grayscale(1) brightness(0);
  opacity:1
}*/

@media(max-width:980px) {
  .hero-phone-render {
    left:2%;
    bottom:-10%;
    width:min(370px,57%)
  }
}

@media(max-width:620px) {
  .hero-phone-render {
    left:50%;
    bottom:-7%;
    width:min(290px,66%);
    transform:translateX(-50%) rotate(-1deg)
  }
}

/* V4 · pantalla limpia dentro de un smartphone compacto construido con CSS */
.hero-phone-render {
  display:none
}

.hero-phone-css {
  position:absolute;
  z-index:3;
  left:1%;
  bottom:4%;
  width:min(285px,44%);
  aspect-ratio:2/3;
  overflow:hidden;
  border:8px solid #021f30;
  border-radius:38px;
  background:#fff;
  box-shadow:0 28px 55px rgba(0,0,0,.42);
  transform:rotate(-2deg)
}

.hero-phone-css:before {
  content:"";
  position:absolute;
  z-index:4;
  left:50%;
  top:7px;
  width:72px;
  height:17px;
  border-radius:999px;
  background:#021f30;
  box-shadow:0 1px 0 rgba(255,255,255,.08);
  transform:translateX(-50%)
}

.hero-phone-css img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}

@media(max-width:980px) {
  .hero-phone-css {
    left:5%;
    bottom:2%;
    width:min(275px,42%)
  }
}

@media(max-width:620px) {
  .hero-phone-css {
    left:50%;
    bottom:2%;
    width:min(235px,55%);
    border-width:7px;
    border-radius:32px;
    transform:translateX(-50%) rotate(-1deg)
  }
  .hero-phone-css:before {
    top:6px;
    width:62px;
    height:15px
  }
}

/* V4 · hero más luminoso, fotografía protagonista y recorrido de entrega */
.hero-visual {
  isolation:isolate
}

.hero-photo {
  inset:5% 1% 3% 7%;
  width:92%;
  height:92%;
  border:5px solid rgba(255,255,255,.92);
  filter:saturate(1.04) brightness(1.16);
  box-shadow:0 28px 70px rgba(0,0,0,.25),0 0 0 1px rgba(255,209,102,.24)
}

.hero-phone-css {
  left:3%;
  bottom:0;
  width:min(248px,38%);
  border:6px solid #fff;
  outline:7px solid #021f30;
  border-radius:34px;
  box-shadow:0 24px 48px rgba(0,0,0,.34);
  transform:rotate(-1.5deg)
}

.hero-phone-css:before {
  top:5px;
  width:64px;
  height:15px
}

.hero-delivery-route {
  position:absolute;
  z-index:4;
  left:30%;
  top:7%;
  width:48%;
  height:20%;
  pointer-events:none;
  border-top:4px dashed var(--sun);
  border-right:4px dashed var(--sun);
  border-radius:0 76px 0 0;
  transform:rotate(4deg);
  filter:drop-shadow(0 2px 2px rgba(3,40,58,.45))
}

.hero-delivery-route:before,.hero-delivery-route:after {
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  border:4px solid #fff;
  border-radius:50%;
  background:var(--sun);
  box-shadow:0 4px 10px rgba(3,40,58,.3)
}

.hero-delivery-route:before {
  left:-7px;
  top:-9px
}

.hero-delivery-route:after {
  right:-9px;
  bottom:-8px
}

.hero-delivery-route i {
  position:absolute;
  right:-8px;
  bottom:-23px;
  width:3px;
  height:18px;
  background:var(--sun);
  transform:rotate(-38deg);
  transform-origin:top
}

.hero-delivery-route b {
  position:absolute;
  right:-13px;
  bottom:-27px;
  width:10px;
  height:10px;
  border-right:3px solid var(--sun);
  border-bottom:3px solid var(--sun);
  transform:rotate(7deg)
}

.hero-sticker {
  z-index:5;
  top:50px;
  right:-44px;
  box-shadow:0 14px 32px rgba(3,40,58,.25)
}

@media(max-width:980px) {
  .hero-phone-css {
    left:6%;
    bottom:0;
    width:min(240px,37%)
  }
  .hero-delivery-route {
    left:29%;
    top:8%;
    width:49%
  }
}

@media(max-width:620px) {
  .hero-photo {
    inset:4% 2% 4% 4%;
    width:94%;
    height:62%;
    border-width:4px;
    filter:saturate(1.04) brightness(1.12)
  }
  .hero-phone-css {
    left:46%;
    bottom:-1%;
    width:min(205px,48%);
    border-width:5px;
    outline-width:5px;
    border-radius:29px;
    transform:translateX(-50%) rotate(-1deg)
  }
  .hero-phone-css:before {
    top:4px;
    width:54px;
    height:13px
  }
  .hero-delivery-route {
    left:13%;
    top:9%;
    width:59%;
    height:17%;
    border-width:3px;
    border-radius:0 54px 0 0
  }
  .hero-delivery-route:before,.hero-delivery-route:after {
    width:10px;
    height:10px;
    border-width:3px
  }
  .hero-sticker {
    top:31px;
    right:-10px
  }
}

/* V4 · composición final: teléfono fuera de la foto y ruta continua */
.hero-phone-css {
  left:-14%;
  bottom:-5%;
  width:min(235px,36%);
  transform:rotate(-15deg)
}

.hero-delivery-route {
  left:16%;
  top:-1%;
  width:65%;
  height:22%;
  border:0;
  border-top:4px dashed var(--sun);
  border-radius:50% 50% 0 0;
  transform:rotate(-3deg);
  filter:drop-shadow(0 2px 2px rgba(3,40,58,.36))
}

.hero-delivery-route:before {
  left:-5px;
  top:-10px
}

.hero-delivery-route:after {
  right:-5px;
  top:-10px;
  bottom:auto
}

.hero-delivery-route i {
  right:-7px;
  top:-1px;
  bottom:auto;
  width:3px;
  height:18px;
  transform:rotate(-47deg)
}

.hero-delivery-route b {
  right:-13px;
  top:9px;
  bottom:auto;
  transform:rotate(2deg)
}

@media(max-width:980px) {
  .hero-phone-css {
    left:-1%;
    bottom:-2%;
    width:min(228px,35%);
    transform:rotate(-4deg)
  }
  .hero-delivery-route {
    left:14%;
    top:0;
    width:67%;
    height:20%
  }
}

@media(max-width:620px) {
  .hero-phone-css {
    left:21%;
    bottom:12%;
    width:min(190px,40%);
    transform:translateX(-50%) rotate(-4deg)
  }
  .hero-delivery-route {
    left:7%;
    top:0;
    width:70%;
    height:16%;
    border-top-width:3px
  }
  .hero-delivery-route:before,.hero-delivery-route:after {
    width:10px;
    height:10px;
    border-width:3px
  }
  .hero-delivery-route:before {
    top:-8px
  }
  .hero-delivery-route:after {
    top:-8px
  }
}

/* V4 · recorrido irregular y marca consistente de WhatsApp */
.hero-delivery-route {
  left:13%;
  top:-1%;
  width:70%;
  height:25%;
  border:0;
  transform:none;
  filter:drop-shadow(0 2px 2px rgba(3,40,58,.32))
}

.hero-delivery-route span,.hero-delivery-route i,.hero-delivery-route b {
  position:absolute;
  right:auto;
  bottom:auto;
  height:0;
  border:0;
  border-top:4px dashed var(--sun);
  background:none;
  transform-origin:left center
}

.hero-delivery-route span {
  left:1%;
  top:58%;
  width:33%;
  transform:rotate(-16deg)
}

.hero-delivery-route i {
  left:31%;
  top:37%;
  width:34%;
  transform:rotate(9deg)
}

.hero-delivery-route b {
  left:63%;
  top:51%;
  width:35%;
  transform:rotate(-13deg)
}

.hero-delivery-route:before {
  left:-2px;
  top:52%
}

.hero-delivery-route:after {
  right:-2px;
  top:35%;
  bottom:auto
}

.hero-delivery-route b:after {
  content:"";
  position:absolute;
  right:-3px;
  top:-7px;
  width:11px;
  height:11px;
  border-right:3px solid var(--sun);
  border-bottom:3px solid var(--sun);
  transform:rotate(-28deg)
}

.wa-icon svg,.whatsapp-modal-v4-icon svg,.floating-wa svg {
  width:17px;
  height:17px;
  display:block;
  fill:currentColor
}

.whatsapp-modal-v4-icon svg {
  width:28px;
  height:28px
}

.floating-wa svg {
  width:19px;
  height:19px
}

@media(max-width:620px) {
  .hero-delivery-route {
    left:6%;
    top:0;
    width:76%;
    height:20%
  }
  .hero-delivery-route span,.hero-delivery-route i,.hero-delivery-route b {
    border-top-width:3px
  }
  .hero-delivery-route:before,.hero-delivery-route:after {
    width:10px;
    height:10px;
    border-width:3px
  }
}

/* V4 · hero humano sin ruta y acceso de WhatsApp más claro */
.hero-delivery-route {
  display:none
}

.wa-icon {
  width:34px;
  height:34px;
  padding:8px;
  color:var(--wa);
  background:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.12)
}

.wa-icon svg {
  width:18px;
  height:18px
}

.mini-wa {
  padding:8px 18px 8px 9px;
  gap:11px;
  background:rgba(3,40,58,.24)
}

/* V4: interacción de planes y QR compacto de Instagram */
.plan-card {
  transition:transform .3s ease,box-shadow .3s ease,outline-color .3s ease;
  transform-origin:center
}

@media(hover:hover) and (pointer:fine) {
  .plan-card:hover,.plan-card:focus-within {
    z-index:4;
    transform:translateY(-10px) scale(1.035);
    outline:3px solid var(--sun);
    box-shadow:0 26px 60px rgba(0,0,0,.24)
  }
}

.instagram-card.instagram-qr-card,
.instagram-card.instagram-qr-card:has(.instagram-qr) {
  width:min(360px,100%);
  min-height:0;
  padding:18px;
  justify-self:center;
  border:0;
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 45px rgba(0,0,0,.2)
}

.instagram-card.instagram-qr-card .instagram-qr {
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  margin:0;
  border-radius:14px;
  box-shadow:none;
  filter:none
}

@media(max-width:620px) {
  .instagram-card.instagram-qr-card,
  .instagram-card.instagram-qr-card:has(.instagram-qr) {
    width:min(300px,100%);
    min-height:0;
    padding:14px;
    border-radius:20px
  }
}

/* V4: Instagram sin marco vertical, sólo la tarjeta blanca del QR */
.instagram-copy h2 {
  margin:0 0 24px;
  font-size:clamp(58px,6.4vw,72px);
  line-height:1.1;
  letter-spacing:-1px
}

.instagram-card.instagram-qr-card,
.instagram-card.instagram-qr-card:has(.instagram-qr) {
  position:relative;
  width:min(390px,100%);
  aspect-ratio:1;
  min-height:0;
  padding:0;
  overflow:hidden;
  border-radius:28px;
  background:#fff
}

.instagram-card.instagram-qr-card .instagram-qr {
  position:absolute;
  left:-11.45%;
  top:-42.45%;
  width:122.86%;
  height:auto;
  max-width:none;
  border-radius:0
}

@media(max-width:620px) {
  .instagram-copy h2 {
    font-size:clamp(52px,16vw,72px)
  }

  .instagram-card.instagram-qr-card,
  .instagram-card.instagram-qr-card:has(.instagram-qr) {
    width:min(310px,100%);
    padding:0
  }
}

/* V4: información ampliada de PlayaGo */
.about-playago-button {
  margin-top:24px;
  padding:13px 19px;
  border:1px solid var(--navy);
  border-radius:999px;
  color:var(--navy);
  background:transparent;
  font:700 14px/1 Blauer,Arial,sans-serif;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease
}

.about-playago-button:hover {
  color:#fff;
  background:var(--navy);
  transform:translateY(-2px)
}

.about-playago-modal {
  width:min(720px,calc(100% - 32px));
  max-height:calc(100dvh - 32px);
  padding:0;
  overflow:auto;
  border:0;
  border-radius:28px;
  color:var(--navy);
  background:transparent
}

.about-playago-modal::backdrop {
  background:rgba(3,18,29,.72);
  backdrop-filter:blur(8px)
}

.about-playago-card {
  position:relative;
  padding:clamp(30px,5vw,58px);
  background:#fff;
}

.about-playago-close {
  position:absolute;
  top:18px;
  right:18px;
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--navy);
  background:#fff;
  font:300 26px/1 Blauer,Arial,sans-serif;
  cursor:pointer
}

.about-playago-card .kicker {
  margin:0 52px 20px 0
}

.about-playago-card h2 {
  margin:0 0 30px;
  font-size:clamp(46px,7vw,76px);
  line-height:.9
}

.about-playago-content {
  display:grid;
  gap:18px;
  color:#496573;
  font-size:16px;
  line-height:1.65
}

.about-playago-content p {
  margin:0
}

.about-playago-content strong {
  color:var(--navy)
}

.about-playago-content a {
  color:var(--navy);
  font-weight:700;
  text-underline-offset:3px
}

@media(max-width:620px) {
  .about-playago-modal {
    width:calc(100% - 20px);
    max-height:calc(100dvh - 20px);
    border-radius:22px
  }

  .about-playago-card {
    padding:32px 24px
  }

  .about-playago-card h2 {
    font-size:clamp(42px,14vw,58px)
  }

  .about-playago-content {
    font-size:15px
  }
}

/* V4: composición móvil consolidada del hero */
@media(max-width:620px) {
  .site-header {
    height:104px;
    padding:18px 24px 0;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center
  }

  .site-header .brand {
    width:152px;
    margin-top:0
  }

  .site-header .mini-wa {
    min-height:44px;
    padding:10px 16px;
    gap:0;
    border-color:rgba(255,255,255,.45);
    background:rgba(3,40,58,.2);
    font-size:13px;
    white-space:nowrap
  }

  .site-header .mini-wa .wa-icon {
    display:none
  }

  .hero {
    min-height:0;
    padding:150px 20px 0;
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    align-items:start
  }

  .hero-copy {
    width:100%;
    text-align:center
  }

  .hero-copy .kicker {
    justify-content:center;
    gap:10px;
    margin:0 auto 26px;
    font-size:10px;
    line-height:1.35;
    letter-spacing:1.25px;
    white-space:nowrap
  }

  .hero-copy .kicker span {
    width:28px
  }

  .hero h1 {
    max-width:100%;
    margin:0 auto;
    font-size:clamp(49px,14vw,64px);
    line-height:.94;
    letter-spacing:-.5px
  }

  .hero-intro {
    max-width:600px;
    margin:34px auto 30px;
    font-size:17px;
    line-height:1.55
  }

  .hero-copy .wa-button {
    width:100%;
    max-width:560px;
    min-width:0;
    margin:0 auto;
    padding:13px 14px 13px 18px;
    border-radius:20px
  }

  .hero-copy .wa-button svg {
    width:34px;
    flex:0 0 34px
  }

  .hero-copy .wa-button span {
    font-size:18px
  }

  .hero-copy .wa-button small {
    font-size:9px
  }

  .wa-number {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;
    margin:17px 0 0;
    font-size:12px
  }

  .hero-visual {
    width:calc(100% + 40px);
    min-height:460px;
    margin:30px -20px 0;
    overflow:hidden
  }

  .hero-photo {
    inset:36px -6% 0 26%;
    width:82%;
    height:432px;
    border-width:4px;
    border-radius:90px 18px 0 0;
    object-position:40% center
  }

  .hero-phone-css {
    left:-3%;
    bottom:-48px;
    width:min(214px,49%);
    aspect-ratio:2/3;
    border-width:5px;
    outline-width:5px;
    border-radius:30px;
    transform:rotate(-9deg)
  }

  .hero-phone-css::before {
    top:4px;
    width:58px;
    height:14px
  }

  .hero-sticker {
    top:0;
    right:2px;
    width:128px;
    height:128px;
    padding:20px
  }

  .quick-strip {
    width:100%;
    margin:0;
    padding:22px 20px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-radius:0;
    box-shadow:none
  }

  .quick-strip p {
    min-height:82px;
    padding:10px 12px;
    column-gap:10px;
    border-right:0;
    border-bottom:1px solid rgba(3,40,58,.15)
  }

  .quick-strip p:nth-child(odd) {
    border-right:1px solid rgba(3,40,58,.15)
  }

  .quick-strip p:nth-child(n+3) {
    border-bottom:0
  }

  .quick-strip strong {
    font-size:31px
  }

  .quick-strip span {
    font-size:16px
  }

  .quick-strip small {
    font-size:11px
  }
}