/* ================= Base ================= */
:root {
  --site-header-h: 72px; /* fallback, se actualizará por JS */
  --bg: #ffffff;
  --ink: #0b0f12;
  --muted: #6b7280;
  --line: #e5e7eb;
  --acc: #16a34a;
  /* verde Pango */
  --wa: #25D366;
  /* verde WhatsApp */
  --glass: rgba(255, 255, 255, .6);
  --shadow-strong: 0 26px 70px rgba(2, 6, 23, .16);

  /* iPhone */
  --iphone-w: min(92vw, 430px);
  --iphone-ar: 9 / 19.5;
  --bezel: 4px;
  --radius: 35px;
  --island-w: 65px;   /* antes 88px */
  --island-h: 22px;   /* antes 26px */
  --island-r: 12px;   /* antes 14px */
  --safe-notch: 0px;

  /* empuja contenido bajo el notch */
  --screen-pad-top: 0px;
  --safe-notch: calc(var(--island-h) + 6px); /* antes +10/+12px */


  /* Layout */
  --header-pad: calc(12px + env(safe-area-inset-top));
  --hero-offset: 2vh;
  --iphone-maxvh: 85vh;

  /* Tipo */
  --fs-h1: clamp(30px, 7.2vw, 52px);
  --fs-sub: clamp(16px, 3.8vw, 20px);
  --fs-body: clamp(15px, 3.6vw, 18px);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

h2 {
  margin-bottom: 1vh;
}
p {
  margin-top: 1vh;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  padding-top: var(--site-header-h);
}

/* ====== Botón hamburguesa ====== */
.menu-toggle,
.menu-close{
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(2,6,23,.04);
}
.menu-toggle{ margin-left: auto; } /* empuja a la derecha si hace falta */

@media (min-width: 900px){
  .menu-toggle{ display: none; }
}

/* ====== Drawer móvil ====== */
/* ===== Backdrop ===== */
.nav-backdrop{
  position: fixed; inset: 0;
  background: rgba(2,6,23,.45);
  backdrop-filter: blur(2px);
  z-index: 999; /* debajo del drawer */
  opacity: 0;
  transition: opacity .2s ease;
}
.nav-backdrop.is-open{ opacity: 1; }

/* ===== Drawer móvil ===== */
.mobile-menu{
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(65vw, 380px);       /* antes 86vw */
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(2,6,23,.16);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.2,.6,.2,1);
  display: grid;
  grid-template-rows: auto 1fr;
}
.mobile-menu.is-open{ transform: translateX(0); }

.mobile-menu__head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  background: #fff;
}
.mobile-menu__body{
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px 20px;
  overflow: auto;
}

/* ===== Links dentro del menú ===== */
.mobile-link{
  display: block;
  padding: 12px 10px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  color: var(--ink);             /* negro */
  border: 1px solid #eef2f6;
}
.mobile-link:hover{
  background: #f8fafc;
  color: var(--acc);             /* verde Pango al hover */
  border-color: var(--acc);
}
.mobile-link:visited{ color: var(--ink); }

/* ===== Botón hamburguesa y cerrar ===== */
.menu-toggle,
.menu-close{
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(2,6,23,.04);
  color: var(--ink);             /* negro por defecto */
}

.menu-toggle:hover,
.menu-close:hover{
  background: #eafff2;
  color: var(--acc);             /* verde al hover */
  border-color: var(--acc);
}

/* Íconos SVG toman currentColor */
.menu-toggle svg path,
.menu-close svg path{ stroke: currentColor; }

/* En escritorio se oculta el botón */
@media (min-width: 900px){
  .menu-toggle{ display: none; }
}


.mobile-cta{ margin-top: 8px; text-align: center; }

/* Evitar scroll del body cuando el menú está abierto */
body.menu-open{ overflow: hidden; }

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .mobile-menu{ transition: none; }
  .nav-backdrop{ transition: none; }
}


/* ============== Contacto ============== */
.contact-section{ padding: 24px 0 90px; }

.contact-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.contact-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}

.contact-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(2, 6, 23, .06);
  border-color: #dbeafe; /* ligero realce */
}

.contact-icon{
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 22px;
  margin-bottom: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.contact-card h3{
  font-weight: 800;
  margin: 2px 0 6px;
}

.contact-text{
  color: var(--muted);
  font-size: var(--fs-body);
  margin: 0 0 12px;
}

.contact-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Dos columnas en escritorio, igual que otras secciones */
@media (min-width: 900px){
  .contact-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

.wrap {
  max-width: clamp(1000px, 92vw, 1280px);
  margin-inline: auto;
  padding-inline: 15px;
}
@media (min-width: 1440px) {
  .wrap { max-width: min(92vw, 1400px); }
}
@media (min-width: 1720px) {
  .wrap { max-width: 1560px; }
}

/* En pantallas grandes, que el copy no quede centrado flotando */
@media (min-width: 980px) {
  .hero-title, .hero-sub { text-align: left; }
  .hero-actions { justify-content: flex-start; }
  .hero-copy { max-width: 640px; } /* limita ancho de línea agradable */
  .iphone-frame{
    margin-top: 5vh;
  }
}

/* Fondo suave */
.backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.blob {
  position: absolute;
  filter: blur(70px);
  opacity: .24;
  transform: translateZ(0);
}

.blob.b1 {
  width: 80vw;
  height: 80vw;
  background: #34d399;
  top: -18%;
  left: -20%;
}

.blob.b2 {
  width: 70vw;
  height: 70vw;
  background: #93c5fd;
  bottom: -22%;
  right: -26%;
}

/* ================= Header ================= */
.site-header {
  position: fixed;       /* antes: sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;         /* asegura que nada lo tape */
  backdrop-filter: saturate(160%) blur(10px);
  background: var(--glass);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  padding-top: env(safe-area-inset-top);
  transition: transform .3s ease; /* por si quisieras ocultarlo con clase en el futuro */
}
.site-header.is-hidden { transform: translateY(-100%); } /* opcional */

/* si alguna vez quieres ocultarlo por clase: */
.site-header.is-hidden { transform: translateY(-100%); }


.site-header .wrap {
  padding-block: var(--header-pad) 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
}

/* logo un poco más grande */
.brand-text {
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1.14rem;
}

.main-nav {
  display: none;
  gap: 18px;
}

.nav-link {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  padding: 6px 2px;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--acc);
  transition: right .25s ease;
}

.nav-link:hover {
  color: var(--ink);
}

.nav-link:hover::after {
  right: 0;
}

.cta {
  background: var(--acc);
  color: #fff;
  font-weight: 800;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(22, 163, 74, .35);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(22, 163, 74, .45);
  background: #17b24f;
}

.cta:active {
  transform: translateY(0);
}

@media (min-width: 900px) {
  .main-nav {
    display: flex;
  }
}

/* ================= Hero ================= */
.hero-section {
  padding: 0 0 14px;
}

.hero-grid {
  display: grid;
  gap: 22px;
  align-items: center;
}

@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 28px;
  }
}

.hero-copy {
  padding-block: 6px;
}

.hero-title {
  text-align: center;
  font-size: var(--fs-h1);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.02em;
}

.hero-title .and {
  color: inherit;
}

/* "y" negro */
.hero-title .accent {
  background: linear-gradient(90deg, #0f172a, #0ea5a0 30%, #14b8a6 60%, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-title .wa {
  color: var(--wa);
  font-weight: 800;
}

.hero-sub {
  text-align: center;
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--fs-sub);
  padding-inline: 6px;
}

.hero-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ================= iPhone frame ================= */
.iphone-frame {
  width: var(--iphone-w);
  aspect-ratio: var(--iphone-ar);
  height: auto;

  /* Nunca más grande que la pantalla */
  max-height: calc(var(--iphone-maxvh) - var(--hero-offset));
  max-width: calc((var(--iphone-maxvh) - var(--hero-offset)) * (var(--iphone-ar)));

  border: var(--bezel) solid #000;
  border-radius: calc(var(--radius) + var(--bezel));
  background: #000;
  box-shadow: var(--shadow-strong);
  position: relative;
  overflow: hidden;
}

.island {
  position: absolute;
  top: calc(var(--bezel) + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: var(--island-w);
  height: var(--island-h);
  background: #000000;
  border-radius: var(--island-r);
  box-shadow: inset 0 0 6px rgba(255,255,255,.04);
  z-index: 30;
  pointer-events: none;
}

.iphone-screen {
  z-index: 1; 
  position: absolute;
  inset: var(--bezel);
  background: #0f0f10;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: var(--screen-pad-top);  /* quita el espacio bajo la island */
}

.screen-content {
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ================= WhatsApp mock ================= */
.wa-app {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* sin status bar */
  font-size: 14px;
  color: #111;
  font-weight: 500;
}

/* Header WA (limpio) */
.wa-header{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:#f6f6f6; border-bottom:1px solid rgba(0,0,0,.06);
}


.wa-header .avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #e2e8f0;
  object-fit: cover;
  box-shadow: 0 0 0 2px #fff;
}

.wa-header .title {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.wa-header .name {
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wa-header .sub {
  font-size: 12px;
  color: #64748b;
}

/* Chat */
.wa-chat{
  position:relative;
  background:
    linear-gradient(0deg, rgba(255,255,255,.40), rgba(255,255,255,.65)),
    url('images/wa-wallpaper.png') center/420px repeat,
    #f3f5f7;
  padding:12px 14px 18px; /* un pelín más de aire en los bordes */
  overflow-y:auto;
}


.wa-chat .day {
  margin: 8px auto 12px;
  width: max-content;
  background: #fff;
  color: #475569;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, .06);
  font-weight: 700;
  font-size: 12px;
}

/* Mensajes */
.msg {
  display: flex;
  margin: 6px 0;
}

.msg .bubble {
  white-space: pre-line;
  max-width: 78%;
  padding: 8px 10px;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
}

.msg.bot {
  justify-content: flex-start;
}

.msg.user {
  justify-content: flex-end;
}

.bubble.bot {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-top-left-radius: 4px;
}

.bubble.user {
  background: #DCF8C6;
  border-top-right-radius: 4px;
}

.meta {
  margin-left: 8px;
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  align-self: flex-end;
}

.bubble.bot::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 0;
  width: 8px;
  height: 8px;
  background: #fff;
  border-left: 1px solid rgba(0, 0, 0, .06);
  border-top: 1px solid rgba(0, 0, 0, .06);
  transform: rotate(-45deg);
  border-bottom-right-radius: 2px;
}

.bubble.user::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 0;
  width: 8px;
  height: 8px;
  background: #DCF8C6;
  transform: rotate(45deg);
  border-bottom-left-radius: 2px;
}

.card-title {
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: 8px;
}

.card .list,
.card .balances {
  list-style: none;
  padding: 0;
  margin: 0;
}

.card .list li,
.card .balances li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed #e5e7eb;
}

.card .list li:last-child {
  border-bottom: 0;
}

.card .list li.total {
  border-top: 1px solid #e2e8f0;
  border-bottom: 0;
  padding-top: 8px;
  margin-top: 2px;
}

.card .balances .pos {
  color: #16a34a;
  font-weight: 800;
}

.card .balances .neg {
  color: #ef4444;
  font-weight: 800;
}

.card .mt {
  margin-top: 8px;
}

/* Typing (tres puntitos) */
.typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  padding: 8px 10px;
  border-radius: 12px;
  border-top-left-radius: 4px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #94a3b8;
  opacity: .6;
  animation: blink 1.2s infinite;
}

.dot:nth-child(2) {
  animation-delay: .2s;
}

.dot:nth-child(3) {
  animation-delay: .4s;
}

@keyframes blink {

  0%,
  80%,
  100% {
    opacity: .2;
  }

  40% {
    opacity: 1;
  }
}

/* Composer (sin mic) */
.wa-composer{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:#f6f6f6; border-top:1px solid rgba(0,0,0,.06);
}


.wa-composer .plus {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.wa-composer .input {
  flex: 1;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 10px 12px;
  color: #94a3b8;
}

/* Scroll sutil */
.wa-chat::-webkit-scrollbar {
  width: 6px;
}

.wa-chat::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 99px;
}

/* ================= Paneles de tarjetas ================= */
.cards-panel {
  margin-top: 14px;
  background: #f6f7f9;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* Scrollers */
.steps-scroller,
.features-scroller {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 16px;
}

.steps-scroller::-webkit-scrollbar,
.features-scroller::-webkit-scrollbar {
  display: none;
}

.step,
.feature-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}

.step:active,
.feature-card:active {
  transform: scale(.995);
}

.step .step-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  margin-bottom: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.step h3,
.feature-card h3 {
  font-weight: 800;
  margin-bottom: 6px;
}

.step p,
.feature-card p {
  color: var(--muted);
  font-size: var(--fs-body);
}

.chip {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #bae6fd;
}

.feature-card .icon {
  font-size: 28px;
  margin-bottom: 8px;
}

@media (min-width: 900px) {
  .cards-panel { padding: 20px; }

  .steps-scroller,
  .features-scroller {
    overflow: visible;
    display: grid;
    /* se auto-llenan, cada card no baja de 260px ni crece absurda */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
  }

  .step, .feature-card { flex: 0 0 auto; }
}


/* ================= CTA ================= */
.mid-cta {
  padding: 24px 0 80px;
}

.cta-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  background: radial-gradient(90% 180% at 10% 10%, rgba(203, 248, 226, .35), rgba(255, 255, 255, .8) 40%, rgba(226, 241, 255, .6) 100%);
  box-shadow: var(--shadow-strong);
  text-align: center;
}

.cta-card .cta-lg {
  margin-top: 18px;
  display: inline-block;
}

/* más espacio */
.cta-lg {
  padding: 14px 22px;
  font-size: 1.02rem;
}

/* ================= FAQ ================= */
.faq-section {
  padding: 24px 0 100px;
}

.faq-list {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
  padding-inline: 0;
}

.faq {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 18px;
  transition: background .2s ease, border-color .2s ease;
}

.faq[open] {
  background: #f9fafb;
  border-color: #d1d5db;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  position: relative;
  padding-right: 30px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 800;
  color: var(--muted);
  transition: transform .2s ease;
}

.faq[open] summary::after {
  transform: rotate(45deg);
}

.faq p {
  color: var(--muted);
  margin-top: 8px;
  font-size: var(--fs-body);
}

/* ================= Footer ================= */
.site-footer {
  border-top: 1px solid var(--line);
  background: #fafafa;
}

.footer-grid {
  padding: 20px 16px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  align-items: center;
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
}

.foot-brand .brand-mark {
  width: 32px;
  height: 32px;
}

/* mismo tamaño que header */
.foot-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.foot-nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}

.foot-nav a:hover {
  color: var(--ink);
}

.legal {
  text-align: center;
  color: var(--muted);
  padding: 8px 0 18px;
  font-size: .9rem;
}

/* ================= AOS ================= */
.aos-fade-up {
  opacity: 0;
  transform: translateY(16px);
}

.aos-fade-in {
  opacity: 0;
}

.aos-in.aos-fade-up {
  animation: fadeUp .6s cubic-bezier(.2, .6, .2, 1) forwards;
}

.aos-in.aos-fade-in {
  animation: fadeIn .6s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {

  .aos-in.aos-fade-up,
  .aos-in.aos-fade-in {
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }
}

.btn-secondary{
  background: transparent;
  color: var(--acc);
  font-weight: 800;
  padding: 12px 16px;
  border-radius: 999px;
  border: 2px solid var(--acc);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-secondary:hover{ background: #eafff2; }

.legal.small{ font-size:.8rem; opacity:.85; }

/* Enlace “Compartir” solo en móvil, mismo estilo que foot-nav */
.share-mobile-only { display: inline-flex; }
@media (min-width: 900px) { .share-mobile-only { display: none; } }

/* Páginas legales / documentos simples */
.doc {
  max-width: 880px;
  margin: 0 auto;
  padding: 34px 0 90px;
}
.doc h1 {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  margin: 8px 0 12px;
}
.doc h2 {
  font-weight: 800;
  font-size: clamp(18px, 2.6vw, 22px);
  margin: 22px 0 8px;
}
.doc p, .doc li {
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.doc ul, .doc ol { padding-left: 1.2rem; margin: 8px 0 14px; }
.doc a { color: var(--acc); text-decoration: underline; }
.doc .meta { color: #64748b; font-size: .9rem; margin-bottom: 12px; }


:root { --anchor-offset: calc(var(--site-header-h) + 8px); }
#inicio, #como-funciona, #features, #faq { scroll-margin-top: var(--anchor-offset); }

/* === Cookie Modal (centrado, con fondo borroso) === */
.cookie-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55); /* oscuro translúcido */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cookie-box {
  background: #fff;
  border-radius: 20px;
  padding: 22px 24px;
  max-width: 440px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  animation: popIn .3s ease;
}

.cookie-box p {
  font-size: var(--fs-body, 15px);
  color: var(--muted);
  margin-bottom: 16px;
}

.cookie-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.cookie-actions button {
  font-weight: 800;
  border-radius: 999px;
  padding: 10px 20px;
  border: 2px solid var(--acc);
  cursor: pointer;
  font-size: .95rem;
}

#cookie-accept {
  background: var(--acc);
  color: #fff;
}
#cookie-accept:hover { background: #17b24f; }

#cookie-reject {
  background: #fff;
  color: var(--acc);
}
#cookie-reject:hover { background: #eafff2; }

@keyframes popIn {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}
/* ======= Language switcher (desktop) ======= */
.lang-switcher {
  position: relative;
  display: inline-block;
  margin-left: 8px;
}

.lang-btn{
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(2,6,23,.04);
  color: var(--ink);
}
.lang-btn:hover{
  background: #eafff2;
  color: var(--acc);
  border-color: var(--acc);
}

.lang-menu{
  position: absolute;
  right: 0; top: calc(100% + 6px);
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(2,6,23,.12);
  padding: 6px;
  z-index: 1100;
}
.lang-item{
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.lang-item:hover{ background: #f8fafc; color: var(--acc); }

/* Submenú de idiomas dentro del menú móvil (colapsable) */
.mobile-submenu{
  display: grid;
  gap: 6px;
  padding: 6px 0 2px 8px;  /* leve indent */
}
.mobile-submenu[hidden]{ display: none; }

/* Oculta la CTA del header en pantallas chicas */
@media (max-width: 899px){
  .site-header .cta{ display: none; }
  .lang-switcher { display: none; }
}