@font-face {
  font-family: "Outfit";
  src: url("./outfit-latin.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --background: #f4f9f3;
  --green: #028f2a;
  --green-dark: #016c25;
  --green-soft: #e3f2e2;
  --gold: #ed9602;
  --gold-text: #b06f00;
  --ink: #12261a;
  --muted: #4f6357;
  --card: #ffffff;
  --line: #0b7a2a26;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--background); overflow-x: hidden; }
body {
  position: relative;
  min-height: 100svh;
  padding: max(26px, env(safe-area-inset-top)) 22px max(26px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Outfit", system-ui, sans-serif;
  background:
    radial-gradient(ellipse 80% 42% at 50% 16%, #d8eed6 0, transparent 70%),
    radial-gradient(ellipse 60% 30% at 50% 100%, #fbefd8 0, transparent 70%),
    var(--background);
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: "";
  position: fixed;
  inset: 12px;
  border: 1px solid #028f2a22;
  border-radius: 24px;
  pointer-events: none;
}

/* Circuitos de fondo */
.circuits { position: fixed; top: 0; height: 100%; width: auto; aspect-ratio: 120 / 900; max-width: 34vw; pointer-events: none; z-index: 0; overflow: visible; }
@media (max-width: 699px) { .circuits { max-width: 19vw; } }
.circuits-left { left: 0; }
.circuits-right { right: 0; }
.circuits .track path { fill: none; stroke: #028f2a; stroke-opacity: .17; stroke-width: 1.6; stroke-linejoin: round; }
.circuits .pulse path { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 12 88; stroke-dashoffset: 12; opacity: 0; animation: pulse var(--t, 7s) var(--d, 0s) ease-in-out infinite; }
.circuits .nodes circle { fill: var(--background); stroke: #028f2a; stroke-opacity: .45; stroke-width: 1.6; animation: node 6.5s var(--d, 0s) ease-in-out infinite; }

.wrap { position: relative; z-index: 1; width: 100%; max-width: 430px; text-align: center; }
.page-top { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: var(--muted); }
.page-top span:first-child { display: flex; align-items: center; gap: 7px; color: var(--green-dark); }
.page-top i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px #ed960226; }

/* Mascota en capas: base fija, mano que saluda y puño de la manga delante */
.mascot {
  position: relative;
  width: clamp(220px, min(76vw, 37svh), 318px);
  aspect-ratio: 1;
  margin: 10px auto 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: mascot-in .8s cubic-bezier(.2,.8,.25,1) both, float 6s 1s ease-in-out infinite;
}
.layer { position: absolute; display: block; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.layer-base { inset: 0; width: 100%; filter: drop-shadow(0 14px 22px #0b4a1e26); }
.layer-hand {
  left: 81.898%;
  top: 22.329%;
  width: 18.102%;
  transform-origin: 40.09% 92.66%;
  animation: hello 1.7s .45s ease-in-out both, wave 3.6s 2.15s ease-in-out infinite;
}
.layer-cuff { left: 82.137%; top: 32.616%; width: 14.514%; }
.badge-glow {
  position: absolute;
  left: 38.6%; top: 64.75%;
  width: 84%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #28b44a40 0, #28b44a14 55%, transparent 70%);
  animation: glow 5s ease-in-out infinite;
  pointer-events: none;
}
.badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.badge-ring circle { fill: none; }
.ring-base { stroke: #028f2a; stroke-opacity: .18; stroke-width: 4; stroke-dasharray: 2 12; }
.ring-trace { stroke: var(--gold); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 12 88; animation: orbit 12s linear infinite; filter: drop-shadow(0 0 6px #ed9602aa); }
.ring-trace-2 { stroke: #28b44a; stroke-width: 6; stroke-dasharray: 5 95; animation-duration: 18s; animation-direction: reverse; opacity: .7; filter: none; }

/* Texto */
.intro h1 { font-size: clamp(25px, 7vw, 31px); font-weight: 700; line-height: 1.18; letter-spacing: -.8px; color: var(--ink); }
.intro h1 span { color: var(--gold-text); }
.intro p { margin: 9px 0 20px; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* Botones */
.actions { display: flex; flex-direction: column; gap: 10px; }
.button { position: relative; text-decoration: none; color: inherit; border-radius: 16px; -webkit-tap-highlight-color: transparent; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.button:focus-visible, .social:focus-visible, footer a:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.button:active { transform: scale(.98); }
.button svg { flex: none; }

.button-whatsapp {
  display: flex; align-items: center; gap: 13px;
  min-height: 70px; padding: 14px 16px;
  overflow: hidden; isolation: isolate;
  text-align: left; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(120deg, #029130 0%, var(--green-dark) 100%);
  box-shadow: inset 0 1px 0 #ffffff40, 0 10px 24px #016c2533;
}
.button-whatsapp small { display: block; margin-top: 2px; color: #e3f6e6; font-size: 12px; font-weight: 500; }
.wa-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #ffffff1f; box-shadow: inset 0 0 0 1px #ffffff40; }
.wa-icon svg { width: 22px; height: 22px; }
.button-whatsapp .arrow { width: 32px; height: 32px; padding: 8px; margin-left: auto; border-radius: 50%; color: #3b2600; background: var(--gold); transition: transform .2s ease; }
.button-whatsapp::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: 14px 14px; }
.button-whatsapp::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 35%, #ffd27a55 50%, transparent 65%); transform: translateX(-120%); animation: shine 6.5s 1.2s ease-in-out infinite; }

.quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.button-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  min-height: 112px; padding: 14px 15px;
  text-align: left; font-size: 15px; font-weight: 700;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px #0b4a1e0d;
}
.button-card small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; line-height: 1.35; color: var(--muted); }
.card-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--green); background: var(--green-soft); }
.card-icon svg { width: 21px; height: 21px; }
.link-corner { position: absolute; top: 13px; right: 14px; font-size: 16px; line-height: 1; color: var(--gold-text); transition: transform .2s ease; }

.button-review { display: flex; flex-direction: column; gap: 11px; padding: 15px 16px; background: var(--card); border: 1px solid #ed960240; box-shadow: 0 6px 18px #7a4c000d; }
.review-top { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; text-align: left; }
.review-top .google-logo { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #00000014; }
.review-top .link-corner { position: static; margin-left: auto; }
.review-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.review-bottom small { color: var(--muted); font-size: 12px; }
.stars { display: flex; gap: 3px; }
.stars svg { width: 16px; height: 16px; fill: var(--gold); animation: star .55s cubic-bezier(.2,.9,.3,1.3) both, twinkle 5s 1.5s ease-in-out infinite; }
.stars svg:nth-child(2) { animation-delay: .1s, 1.75s; }
.stars svg:nth-child(3) { animation-delay: .2s, 2s; }
.stars svg:nth-child(4) { animation-delay: .3s, 2.25s; }
.stars svg:nth-child(5) { animation-delay: .4s, 2.5s; }

/* Redes */
.socials { display: flex; justify-content: center; gap: 30px; padding-top: 22px; }
.social { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: none; border-radius: 10px; }
.social-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--green); border: 1px solid var(--line); background: var(--card); border-radius: 50%; box-shadow: 0 4px 12px #0b4a1e0f; transition: color .2s ease, transform .2s ease, border-color .2s ease; }
.social svg { width: 21px; height: 21px; }

footer { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 24px; color: var(--muted); font-size: 11px; }
footer a { color: var(--green-dark); text-decoration: none; font-weight: 700; }
.footer-line { width: 14px; height: 2px; margin-right: 5px; border-radius: 2px; background: var(--gold); }

@media (hover: hover) {
  .button:hover { transform: translateY(-2px); }
  .button-card:hover, .button-review:hover { border-color: #028f2a66; box-shadow: 0 10px 24px #0b4a1e17; }
  .button-whatsapp:hover { box-shadow: inset 0 1px 0 #ffffff40, 0 14px 30px #016c2540; }
  .button:hover .arrow, .button:hover .link-corner { transform: translate(2px, -2px); }
  .social:hover .social-icon { color: var(--gold-text); border-color: #ed960280; transform: translateY(-3px); }
  footer a:hover { color: var(--gold-text); }
}
@media (min-width: 700px) {
  body { align-items: center; padding-top: 40px; padding-bottom: 40px; }
  .circuits { max-width: 22vw; }
}
@media (max-width: 359px) {
  body { padding-right: 18px; padding-left: 18px; }
  .page-top { font-size: 9px; letter-spacing: .9px; }
  .button-whatsapp { gap: 9px; padding: 12px; font-size: 13.5px; }
  .wa-icon { width: 36px; height: 36px; }
  .button-card { padding: 13px; font-size: 14px; }
  .review-top { font-size: 12.5px; gap: 8px; }
  .review-bottom { flex-wrap: wrap; }
  .socials { gap: 22px; }
}

@keyframes mascot-in { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
/* Saludo inicial: tres movimientos amplios; termina en la pose de inicio del bucle */
@keyframes hello {
  0% { transform: rotate(0deg); }
  14% { transform: rotate(-14deg); }
  30% { transform: rotate(9deg); }
  46% { transform: rotate(-14deg); }
  62% { transform: rotate(9deg); }
  80% { transform: rotate(-11deg); }
  100% { transform: rotate(4deg); }
}
/* Bucle: «hola, hola» y una pausa breve */
@keyframes wave {
  0%, 62%, 100% { transform: rotate(4deg); }
  16% { transform: rotate(-10deg); }
  32% { transform: rotate(5deg); }
  48% { transform: rotate(-10deg); }
}
@keyframes glow { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(.97); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); } }
@keyframes orbit { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes pulse { 0% { stroke-dashoffset: 12; opacity: 0; } 8% { opacity: .9; } 60% { opacity: .9; } 70%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes node { 0%, 70%, 100% { fill: var(--background); stroke-opacity: .45; } 80% { fill: var(--gold); stroke-opacity: .9; } }
@keyframes shine { 0%, 62% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }
@keyframes star { from { transform: translateY(3px) scale(.7); } to { transform: none; } }
@keyframes twinkle { 0%, 80%, 100% { filter: none; } 88% { filter: drop-shadow(0 0 4px #ed9602cc); } }

/* Movimiento reducido: un solo saludo suave y el resto estático */
@media (prefers-reduced-motion: reduce) {
  .mascot { animation: none; }
  .layer-hand { animation: hello-soft 1.6s .4s ease-in-out both; }
  .badge-glow, .ring-trace, .circuits .pulse path, .circuits .nodes circle, .button-whatsapp::after, .stars svg { animation: none; }
  .ring-trace { stroke-dashoffset: -20; }
  .ring-trace-2 { display: none; }
  .button, .social-icon, .arrow, .link-corner { transition: none; }
}
@keyframes hello-soft { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-6deg); } 65% { transform: rotate(3deg); } }