/* =========================================================
   SEKAI CRM — Estilos personalizados
   Paleta: rojo / negro-grafito / plata-cromo
   Hero oscuro metálico · resto claro
   ========================================================= */
:root{
  --red:#e01010;
  --red-deep:#a30b0b;
  --red-glow:#ff2d2d;
  --ink:#16100f;        /* texto principal */
  --muted:#6a6360;      /* texto secundario */
  --bg:#fbf9f8;         /* fondo general claro */
  --surface:#ffffff;    /* tarjetas */
  --line:#ece6e4;       /* bordes claros */
  --steel:#c5c3c3;      /* plata/cromo */
  /* oscuro (hero / footer) */
  --dark:#0d0a0a;
  --dark2:#161111;
  --dark-line:rgba(255,255,255,.08);
  --brand:linear-gradient(120deg,#ff2d2d 0%,#e01010 45%,#a30b0b 100%);
  --steel-grad:linear-gradient(180deg,#ffffff,#cfcdcd 60%,#9a9897);
}

html{scroll-behavior:smooth;}
body{
  font-family:'Manrope',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.font-display{font-family:'Oswald',sans-serif;letter-spacing:.01em;}
.font-jp{font-family:'Noto Sans JP',sans-serif;}

/* ---- utilidades de marca ---- */
.grad-text{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
.grad-bg{background:var(--brand);}
.steel-text{background:var(--steel-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.red-shadow{box-shadow:0 16px 38px -16px rgba(224,16,16,.55);}

/* ===== HERO / SECCIONES OSCURAS ===== */
.dark-sec{background:var(--dark);color:#f4efee;position:relative;overflow:hidden;}
.dark-sec .text-muted-d{color:#a39d9b;}
/* textura metálica: vetas + viñeta roja */
.metal-bg::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(224,16,16,.22), transparent 55%),
    radial-gradient(50% 60% at 0% 100%, rgba(224,16,16,.12), transparent 55%),
    linear-gradient(115deg, rgba(255,255,255,.05) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.04) 100%);
}
.carbon{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(335deg, rgba(255,255,255,.03) 25%, transparent 25%),
    linear-gradient(155deg, rgba(255,255,255,.03) 25%, transparent 25%);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
  mask-image:linear-gradient(to bottom,#000,transparent);
}

/* ===== FONDOS DE SECCIÓN CLAROS (sutiles) ===== */
.sec-soft{ background:#f7f2f1; }
.sec-tint{
  background:
    radial-gradient(55% 70% at 10% 0%, rgba(224,16,16,.05), transparent 60%),
    radial-gradient(55% 75% at 92% 12%, rgba(224,16,16,.04), transparent 60%),
    var(--bg);
}
.sec-mesh{
  background:
    radial-gradient(42% 60% at 88% -5%, rgba(163,11,11,.06), transparent 60%),
    radial-gradient(46% 58% at 0% 105%, rgba(224,16,16,.05), transparent 60%),
    linear-gradient(180deg,#ffffff,#f7f2f1);
}
.sec-band{
  background:linear-gradient(155deg,#fdf3f2 0%,#f8f1f0 50%,#fbf4f3 100%);
}
.sec-glassline{position:relative;}
.sec-glassline::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,16,16,.5),transparent);
}

/* malla de puntos tenue */
.dotgrid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(22,16,15,.05) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 75%);
  mask-image:linear-gradient(to bottom,#000,transparent 75%);
}

/* borde con degradado */
.border-grad{position:relative;}
.border-grad::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:var(--brand);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.border-grad-d::before{background:linear-gradient(120deg,#ff2d2d,rgba(255,255,255,.25));}

/* tarjetas claras */
.card{
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(22,16,15,.04),0 8px 24px -16px rgba(22,16,15,.18);
}
.card-hover{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 24px 50px -20px rgba(224,16,16,.28);border-color:rgba(224,16,16,.3);}
/* tarjetas oscuras */
.card-d{background:rgba(255,255,255,.04);border:1px solid var(--dark-line);backdrop-filter:blur(6px);}

/* nav */
.nav-link{position:relative;}
.nav-link::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;background:var(--brand);transition:width .3s;}
.nav-link:hover::after{width:100%;}
.nav-scrolled{background:rgba(13,10,10,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--dark-line);}

.logo-badge{filter:drop-shadow(0 4px 10px rgba(224,16,16,.35));}

/* enlaces "Módulos" del footer: anchos, tipo pestaña, cambian de tab en #modulos */
.footmod{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;
  padding:.55rem .8rem;border-radius:10px;font-size:.875rem;
  border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.6);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.footmod:hover{background:rgba(255,255,255,.06);border-color:rgba(224,16,16,.45);color:#fff;transform:translateX(2px);}
.footmod i,.footmod svg{opacity:.55;transition:opacity .2s ease,color .2s ease;}
.footmod:hover i,.footmod:hover svg{opacity:1;color:var(--red-glow);}

/* botón WhatsApp (CTA del nav) — verde oficial WhatsApp */
.wa-btn{background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);font-weight:700;text-shadow:0 1px 1px rgba(0,0,0,.18);box-shadow:0 14px 30px -14px rgba(37,211,102,.55);}
.wa-btn:hover{filter:brightness(1.08);box-shadow:0 18px 36px -14px rgba(37,211,102,.65);}
.wa-btn svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));}

/* burbuja flotante WhatsApp (mismos verdes que .wa-btn del header) */
.wa-float{
  position:fixed;right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:90;width:58px;height:58px;border-radius:9999px;
  display:grid;place-items:center;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);
  box-shadow:0 14px 30px -14px rgba(37,211,102,.55);
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.wa-float:hover{transform:translateY(-3px) scale(1.04);filter:brightness(1.08);
  box-shadow:0 18px 36px -14px rgba(37,211,102,.65);text-decoration:none;color:#fff;}
.wa-float:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(37,211,102,.35),0 14px 30px -14px rgba(37,211,102,.55);}
.wa-float-ic{width:28px;height:28px;position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));}
.wa-float-pulse{
  position:absolute;inset:0;border-radius:inherit;
  background:rgba(37,211,102,.45);animation:wa-pulse 2.2s ease-out infinite;z-index:0;
}
@keyframes wa-pulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}
@media (max-width:640px){
  .wa-float{width:54px;height:54px;right:max(14px, env(safe-area-inset-right));bottom:max(14px, env(safe-area-inset-bottom));}
  .wa-float-ic{width:26px;height:26px;}
}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
[data-reveal].in{opacity:1;transform:none;}

/* marquee */
.marquee{animation:scrollx 30s linear infinite;}
@keyframes scrollx{to{transform:translateX(-50%);}}

/* flotación */
.floaty{animation:floaty 7s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* pulso del punto rojo */
.pulse-dot{position:relative;}
.pulse-dot::after{content:"";position:absolute;inset:0;border-radius:9999px;background:var(--red);animation:pulse 2s ease-out infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,16,16,.5)}70%{box-shadow:0 0 0 10px rgba(224,16,16,0)}100%{box-shadow:0 0 0 0 rgba(224,16,16,0)}}

/* =========================================================
   FUNCIONES — iconos en badge animado (flotación + glow infinitos)
   ========================================================= */
.feat-ic{
  position:relative;display:inline-grid;place-items:center;
  width:4.25rem;height:4.25rem;margin-bottom:1.3rem;border-radius:1.15rem;
  color:var(--red);
  background:radial-gradient(120% 120% at 30% 18%, rgba(224,16,16,.16), rgba(224,16,16,.05));
  border:1px solid rgba(224,16,16,.18);
  animation:featFloat 5s ease-in-out infinite;animation-delay:var(--fd,0s);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,background .45s,color .45s;
}
.feat-ic::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  animation:featGlow 5s ease-in-out infinite;animation-delay:var(--fd,0s);
}
.feat-ic > i,.feat-ic > svg{width:2.05rem;height:2.05rem;}
@keyframes featFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes featGlow{0%,100%{box-shadow:0 0 0 0 rgba(224,16,16,0)}50%{box-shadow:0 0 26px 2px rgba(224,16,16,.22)}}
/* al pasar el cursor por la tarjeta, el icono se llena y crece */
.card-hover:hover .feat-ic{transform:scale(1.08) rotate(-4deg);background:var(--brand);color:#fff;box-shadow:0 18px 34px -14px rgba(224,16,16,.6);}
/* desfase por tarjeta para una animación viva */
#funciones .grid > div:nth-child(1) .feat-ic{--fd:0s}
#funciones .grid > div:nth-child(2) .feat-ic{--fd:.5s}
#funciones .grid > div:nth-child(3) .feat-ic{--fd:1s}
#funciones .grid > div:nth-child(4) .feat-ic{--fd:1.5s}
#funciones .grid > div:nth-child(5) .feat-ic{--fd:2s}
#funciones .grid > div:nth-child(6) .feat-ic{--fd:2.5s}
@media (prefers-reduced-motion:reduce){.feat-ic,.feat-ic::after{animation:none;}}

/* faq */
.faq-body{max-height:0;overflow:hidden;transition:max-height .45s ease;}
.faq-icon{transition:transform .35s ease;}

/* demo steps connector */
.flow-step{position:relative;}

/* =========================================================
   MÓDULOS — tab switcher con mockups
   ========================================================= */
/* fila de pestañas: siempre en una sola línea (scroll horizontal si no caben) */
.modtabs{display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;overflow-y:hidden;padding-block:14px;margin-block:-14px;scrollbar-width:none;-ms-overflow-style:none;}
.modtabs::-webkit-scrollbar{display:none;}
@media (min-width:1280px){.modtabs{overflow:visible;}}
.modtab{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;flex:0 0 auto;
  padding:.62rem 1.15rem;border-radius:9999px;font-size:.875rem;font-weight:600;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.modtab:hover{color:var(--ink);background:#fbf6f5;}
.modtab.is-active{background:var(--brand);color:#fff;border-color:transparent;box-shadow:0 14px 30px -14px rgba(224,16,16,.55);}

.modfeat{
  display:flex;gap:1rem;align-items:flex-start;text-align:left;width:100%;
  padding:1rem 1.1rem;border-radius:14px;border:1px solid transparent;background:transparent;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.modfeat:hover{border-color:var(--line);background:var(--surface);}
.modfeat.is-active{border-color:rgba(224,16,16,.28);background:var(--surface);box-shadow:0 16px 36px -20px rgba(224,16,16,.4);}
.modfeat-ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(224,16,16,.09);color:var(--red);transition:background .2s ease,color .2s ease,box-shadow .2s ease;}
.modfeat.is-active .modfeat-ic{background:var(--brand);color:#fff;box-shadow:0 10px 20px -8px rgba(224,16,16,.6);}
.modfeat-t{display:block;font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:.12rem;}
.modfeat-d{display:block;font-size:.85rem;color:var(--muted);line-height:1.45;}

.modframe{
  overflow:hidden;border-radius:18px;border:1px solid var(--line);
  background:var(--dark);display:flex;align-items:center;justify-content:center;
  box-shadow:0 34px 70px -34px rgba(22,16,15,.55);
}
.modframe{padding:10px;position:relative;cursor:zoom-in;}
.modframe > img,
.modframe > video {
  height: 380px !important; object-fit: contain;
}
.mockup-img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:10px;transition:opacity .25s ease;}
.mockup-img.fade{opacity:0;}
.modframe.has-video{cursor:default;}
.modframe.has-video::after,
.modframe.has-video .zoom-hint{display:none;}

/* pista de "ampliar" al pasar el cursor por la captura */
.modframe::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(13,10,10,0);transition:background .25s ease;pointer-events:none;}
.modframe:hover::after{background:rgba(13,10,10,.14);}
.zoom-hint{position:absolute;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;border-radius:9999px;background:rgba(13,10,10,.6);color:#fff;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transform:translateY(-4px) scale(.9);transition:opacity .25s ease,transform .25s ease;pointer-events:none;z-index:2;}
.modframe:hover .zoom-hint{opacity:1;transform:none;}
.modframe:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(224,16,16,.35);}

/* =========================================================
   LIGHTBOX — captura ampliada (fondo transparente + blur)
   ========================================================= */
.lightbox{
  position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(11,8,8,.42);
  -webkit-backdrop-filter:blur(22px) saturate(125%);backdrop-filter:blur(22px) saturate(125%);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility 0s linear .35s,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease;
}
.lightbox.open{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease;}
.lightbox-fig{
  position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  max-width:min(1120px,92vw);
  transform:scale(.92) translateY(12px);opacity:0;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s ease;
}
.lightbox.open .lightbox-fig{transform:none;opacity:1;}
.lightbox-img{
  max-width:100%;max-height:80vh;width:auto;height:auto;display:block;
  border-radius:16px;border:1px solid rgba(255,255,255,.14);background:var(--dark);
  box-shadow:0 50px 110px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);
}
.lightbox-cap{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.82rem;
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:.45rem 1.05rem;border-radius:9999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lightbox-cap::before{content:"";width:7px;height:7px;border-radius:9999px;background:var(--red);box-shadow:0 0 10px var(--red-glow);}
.lightbox-close{
  position:absolute;top:clamp(1rem,3vw,1.8rem);right:clamp(1rem,3vw,1.8rem);
  width:46px;height:46px;display:grid;place-items:center;border-radius:9999px;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s ease,transform .25s ease,border-color .25s ease;
}
.lightbox-close:hover{background:var(--red);border-color:transparent;transform:rotate(90deg);}
.lightbox-close:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(224,16,16,.4);}

/* =========================================================
   CASOS DE USO — overlay full-screen (mini-landings ruteadas por #hash)
   z-index 110: por encima del nav (50) y por debajo del modal (120)/lightbox (140)
   ========================================================= */
.caso-overlay{
  position:fixed;inset:0;z-index:110;overflow-y:auto;overscroll-behavior:contain;
  color:var(--ink);
  background:
    radial-gradient(55% 70% at 90% -5%, rgba(224,16,16,.06), transparent 60%),
    radial-gradient(50% 60% at 0% 105%, rgba(224,16,16,.05), transparent 60%),
    var(--bg);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;
}
.caso-overlay.open{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease,visibility 0s;}
/* TEMA CLARO para las secciones de los casos (fondos claros en vez de oscuros).
   Se escopa a .caso-page para NO afectar la barra superior (que sigue oscura). */
.caso-page .text-white{color:var(--ink);}
.caso-page .text-white\/70{color:var(--muted);}
.caso-page .text-white\/65{color:var(--muted);}
.caso-page .text-white\/55{color:var(--muted);}
.caso-page .border-white\/20{border-color:var(--line);}
/* los botones y el bloque con fondo rojo conservan su texto blanco */
.caso-page .grad-bg,
.caso-page .grad-bg .text-white,
.caso-page .grad-bg [class*="text-white"]{color:#fff;}
/* bloque CTA de los casos: fondo OSCURO con efecto rojo (no rojo sólido) */
.caso-cta{
  position:relative;overflow:hidden;color:#f4efee;
  background:
    radial-gradient(60% 85% at 82% 0%, rgba(224,16,16,.32), transparent 55%),
    radial-gradient(55% 75% at 0% 100%, rgba(224,16,16,.18), transparent 55%),
    linear-gradient(120deg,#1a1413 0%,#0d0a0a 100%);
  border:1px solid rgba(255,255,255,.08);
}
/* el texto del CTA oscuro se mantiene claro */
.caso-page .caso-cta .text-white,
.caso-page .caso-cta [class*="text-white"]{color:#fff;}
/* tarjetas blancas con sombra suave, igual que en el resto del sitio */
.caso-overlay .card-d{background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 2px rgba(22,16,15,.04),0 10px 28px -18px rgba(22,16,15,.22);}
.caso-overlay .card-d h3{color:var(--ink);}
.caso-overlay .card-d p{color:var(--muted);}
.caso-bar{position:sticky;top:0;z-index:5;background:rgba(13,10,10,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--dark-line);}
.caso-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:68px;}
/* menú móvil del overlay de casos */
.caso-burger{width:40px;height:40px;flex:0 0 auto;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#fff;transition:background .2s ease;}
.caso-burger:hover{background:rgba(255,255,255,.1);}
.caso-mobile-menu{padding:.4rem 1.25rem 1rem;border-top:1px solid var(--dark-line);background:rgba(13,10,10,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.caso-mobile-menu a:not(.wa-btn){display:block;padding:.65rem .25rem;color:rgba(255,255,255,.75);font-weight:500;border-bottom:1px solid rgba(255,255,255,.06);}
.caso-mobile-menu a:not(.wa-btn):hover{color:#fff;}
.caso-back{
  display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;
  font-weight:600;font-size:.9rem;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  padding:.55rem 1.1rem;border-radius:9999px;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.caso-back:hover{background:var(--red);border-color:transparent;transform:translateX(-2px);}
.caso-back:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(224,16,16,.4);}
.caso-page{animation:casoIn .4s ease both;}
@keyframes casoIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.caso-overlay,.caso-page{transition:none;animation:none;}}

::selection{background:var(--red);color:#fff;}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#f2eceb}
::-webkit-scrollbar-thumb{background:#d8acab;border-radius:9px}

/* =========================================================
   CAMPOS DE FORMULARIO — HERO (contexto oscuro)
   ========================================================= */
.field-wrap{position:relative;}
.field-wrap > .fi{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:rgba(255,255,255,.45);pointer-events:none;}
.field-wrap > .fi-r{left:auto;right:14px;}
.field{
  width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:#fff;border-radius:12px;padding:.85rem 1rem .85rem 2.85rem;font-size:.95rem;line-height:1.2;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.field::placeholder{color:rgba(255,255,255,.4);}
.field:focus{outline:none;border-color:var(--red-glow);box-shadow:0 0 0 4px rgba(224,16,16,.18);background:rgba(255,255,255,.13);}
.field:focus + .fi,.field-wrap:focus-within > .fi{color:var(--red-glow);}
select.field{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem;}
select.field option{background:var(--dark2);color:#fff;}
select.field optgroup{background:var(--dark2);color:#fff;}

/* =========================================================
   CAMPOS DE FORMULARIO — MODAL (contexto claro)
   ========================================================= */
.mfield-wrap{position:relative;}
.mfield-wrap > .fi{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none;}
.mfield-wrap > .fi-r{left:auto;right:14px;}
.mfield{
  width:100%;background:#f5f2f1;border:1px solid #e9e3e1;color:var(--ink);
  border-radius:12px;padding:.82rem 1rem .82rem 2.8rem;font-size:.95rem;line-height:1.2;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.mfield::placeholder{color:#9a938f;}
.mfield:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(224,16,16,.13);background:#fff;}
.mfield-wrap:focus-within > .fi{color:var(--red);}
select.mfield{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem;}

/* =========================================================
   SELECTOR DE PREFIJO DE PAÍS (teléfono) — dropdown a medida
   Funciona en contexto oscuro (.phone-field--dark) y claro (.phone-field--light)
   ========================================================= */
.phone-field{position:relative;}
/* deja espacio a la izquierda para el disparador del prefijo (con holgura para códigos de 3 dígitos) */
.phone-field .cc-input{padding-left:7rem;}

.cc-trigger{
  position:absolute;left:1px;top:1px;bottom:1px;z-index:3;
  display:inline-flex;align-items:center;gap:.35rem;
  padding:0 .6rem 0 .85rem;margin:0;border:0;background:transparent;cursor:pointer;
  border-top-left-radius:11px;border-bottom-left-radius:11px;
  font:inherit;line-height:1;transition:background .18s ease;
}
.cc-trigger::after{content:"";position:absolute;right:0;top:18%;bottom:18%;width:1px;}
.cc-flag{font-size:1.15rem;line-height:1;}
.cc-dial{font-weight:700;font-size:.92rem;letter-spacing:.01em;white-space:nowrap;}
.cc-caret{width:14px;height:14px;transition:transform .2s ease;opacity:.7;}
.cc-trigger[aria-expanded="true"] .cc-caret{transform:rotate(180deg);}

/* panel desplegable */
.cc-pop{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;
  border-radius:14px;overflow:hidden;
  box-shadow:0 26px 60px -22px rgba(22,16,15,.55),0 8px 20px -12px rgba(22,16,15,.3);
  animation:ccPop .18s cubic-bezier(.2,.8,.2,1);
}
.cc-pop[hidden]{display:none;}
@keyframes ccPop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.cc-search-wrap{position:relative;padding:.6rem .65rem;}
.cc-search-ic{position:absolute;left:1.35rem;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none;}
.cc-search{width:100%;border-radius:10px;padding:.55rem .7rem .55rem 2.2rem;font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s;}
.cc-list{max-height:200px;overflow-y:auto;margin:0;padding:.25rem;list-style:none;overscroll-behavior:contain;}
.cc-item{
  display:flex;align-items:center;gap:.65rem;width:100%;text-align:left;
  padding:.55rem .7rem;border-radius:9px;cursor:pointer;border:0;background:transparent;font:inherit;
  transition:background .14s ease;
}
.cc-item .cc-item-flag{font-size:1.15rem;line-height:1;flex:0 0 auto;}
.cc-item .cc-item-name{flex:1 1 auto;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cc-item .cc-item-dial{font-size:.85rem;font-weight:600;flex:0 0 auto;}
.cc-empty{padding:.9rem .7rem;font-size:.85rem;text-align:center;}

/* ---- contexto OSCURO (hero) ---- */
.phone-field--dark .cc-trigger{color:#fff;}
.phone-field--dark .cc-trigger:hover{background:rgba(255,255,255,.06);}
.phone-field--dark .cc-trigger::after{background:rgba(255,255,255,.16);}
.phone-field--dark .cc-pop{background:var(--dark2);border:1px solid rgba(255,255,255,.12);}
.phone-field--dark .cc-search-ic{color:rgba(255,255,255,.45);}
.phone-field--dark .cc-search{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;}
.phone-field--dark .cc-search::placeholder{color:rgba(255,255,255,.4);}
.phone-field--dark .cc-search:focus{border-color:var(--red-glow);box-shadow:0 0 0 3px rgba(224,16,16,.18);}
.phone-field--dark .cc-item{color:#f4efee;}
.phone-field--dark .cc-item:hover,.phone-field--dark .cc-item.is-active{background:rgba(255,255,255,.08);}
.phone-field--dark .cc-item.is-selected{background:rgba(224,16,16,.18);}
.phone-field--dark .cc-item .cc-item-dial{color:rgba(255,255,255,.6);}
.phone-field--dark .cc-empty{color:rgba(255,255,255,.5);}

/* ---- contexto CLARO (modal) ---- */
.phone-field--light .cc-trigger{color:var(--ink);}
.phone-field--light .cc-trigger:hover{background:rgba(22,16,15,.04);}
.phone-field--light .cc-trigger::after{background:var(--line);}
.phone-field--light .cc-caret{color:var(--muted);}
.phone-field--light .cc-pop{background:#fff;border:1px solid var(--line);}
.phone-field--light .cc-search-ic{color:var(--muted);}
.phone-field--light .cc-search{background:#f5f2f1;border:1px solid #e9e3e1;color:var(--ink);}
.phone-field--light .cc-search::placeholder{color:#9a938f;}
.phone-field--light .cc-search:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(224,16,16,.12);background:#fff;}
.phone-field--light .cc-item{color:var(--ink);}
.phone-field--light .cc-item:hover,.phone-field--light .cc-item.is-active{background:#faf6f5;}
.phone-field--light .cc-item.is-selected{background:rgba(224,16,16,.08);}
.phone-field--light .cc-item .cc-item-dial{color:var(--muted);}
.phone-field--light .cc-empty{color:var(--muted);}

/* scrollbar fino dentro de la lista */
.cc-list::-webkit-scrollbar{width:8px;}
.cc-list::-webkit-scrollbar-thumb{background:rgba(150,140,138,.5);border-radius:8px;}
.cc-list::-webkit-scrollbar-track{background:transparent;}

/* checkbox a medida */
.check{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid #d8d0cd;border-radius:6px;cursor:pointer;flex:0 0 auto;position:relative;transition:background .2s,border-color .2s;}
.check:checked{background:var(--brand);border-color:transparent;}
.check:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.check:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(224,16,16,.18);}

/* =========================================================
   MODAL — overlay con blur + animaciones de entrada/salida
   ========================================================= */
body.no-scroll{overflow:hidden;}
.modal-overlay{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:1rem;overflow-y:auto;
  background:rgba(9,6,6,.55);
  -webkit-backdrop-filter:blur(9px) saturate(120%);backdrop-filter:blur(9px) saturate(120%);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility 0s linear .35s,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease;
}
.modal-overlay.open{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease;}
.modal-card{
  position:relative;width:100%;max-width:34rem;margin:auto;
  transform:translateY(28px) scale(.965);opacity:0;
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .42s ease;
}
.modal-overlay.open .modal-card{transform:translateY(0) scale(1);opacity:1;}
.modal-surface{
  position:relative;border-radius:24px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(224,16,16,.10), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, rgba(224,16,16,.06), transparent 55%),
    linear-gradient(180deg,#ffffff 0%,#faf6f5 100%);
  box-shadow:0 40px 90px -30px rgba(22,16,15,.55),0 8px 24px -12px rgba(22,16,15,.25);
}
.modal-surface::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--brand);}
.modal-close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;display:grid;place-items:center;
  border-radius:9999px;background:#f1ebe9;color:var(--ink);border:1px solid var(--line);
  transition:background .2s,transform .2s,color .2s;z-index:2;
}
.modal-close:hover{background:var(--red);color:#fff;transform:rotate(90deg);}
.modal-close:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(224,16,16,.18);}