/* ══════════════════════════════════════════════════════════════
   M&D Soluciones Técnicas — minimal
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:#08090C;
  --bg-2:#0C0E13;
  --surface:#12151C;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.14);

  --text:#F2F4F8;
  --dim:#8B94A3;

  --amber:#FFB020;
  --amber-ink:#160F02;
  --cyan:#4FD3F5;
  --slate:#A7B4C4;
  --wa:#25D366;
  --wa-ink:#042A16;
  --danger:#FF7A7A;

  --wrap:1160px;
  --nav-h:66px;
  --ease:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2{ margin:0; font-weight:800; line-height:1.03; letter-spacing:-.035em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
svg{ display:block; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px; }
.wrap--narrow{ max-width:600px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--amber); color:var(--amber-ink); padding:12px 18px; font-weight:600; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:6px; }

.ic{ width:19px; height:19px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ── Botones ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border:1px solid transparent; border-radius:10px;
  font:inherit; font-weight:600; font-size:.94rem; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--ease), background .2s var(--ease),
             border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--sm{ padding:9px 16px; font-size:.875rem; }
.btn--lg{ padding:15px 26px; font-size:1rem; }
.btn--primary{ background:var(--amber); color:var(--amber-ink); }
.btn--primary:hover{ box-shadow:0 12px 34px -12px rgba(255,176,32,.75); transform:translateY(-1px); }
.btn--wa{ background:var(--wa); color:var(--wa-ink); }
.btn--wa:hover{ box-shadow:0 12px 34px -12px rgba(37,211,102,.75); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.04); }

/* ── Nav ───────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(8,9,12,.72);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgba(8,9,12,.92); }
.nav__in{ display:flex; align-items:center; gap:30px; min-height:var(--nav-h); }

.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand__mark{ width:30px; height:30px; }
.bm-hex{ fill:none; stroke:var(--amber); stroke-width:2; }
.bm-bolt{ fill:var(--amber); }
.brand__txt{ font-size:1.12rem; font-weight:800; letter-spacing:-.04em; }

.nav__links{ display:flex; gap:26px; margin-right:auto; }
.nav__links a{ color:var(--dim); font-size:.92rem; font-weight:500; transition:color .2s var(--ease); }
.nav__links a:hover{ color:var(--text); }

.nav__cta{ display:flex; align-items:center; gap:14px; }
.tel{ display:inline-flex; align-items:center; gap:8px; color:var(--dim); font-size:.9rem; font-weight:500; transition:color .2s var(--ease); }
.tel:hover{ color:var(--amber); }
.tel .ic{ width:16px; height:16px; }
.burger{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; background:none; color:var(--text);
  border:1px solid var(--line-2); border-radius:9px; cursor:pointer;
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero{ position:relative; padding:clamp(48px,7vw,92px) 0 clamp(52px,8vw,104px); overflow:hidden; }
.hero__aura{
  position:absolute; inset:auto -20% 0 -20%; height:150%;
  background:
    radial-gradient(44% 40% at 72% 34%, rgba(255,176,32,.15), transparent 68%),
    radial-gradient(38% 34% at 24% 62%, rgba(79,211,245,.10), transparent 70%);
  pointer-events:none;
}
.hero__in{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.hero h1{ font-size:clamp(2.7rem,7.2vw,5rem); }
.hero__copy > p{
  margin-top:20px; color:var(--dim);
  font-size:clamp(.98rem,1.5vw,1.1rem); font-weight:500; letter-spacing:-.005em;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

/* ── Foto del hero ─────────────────────────────────────────────
   El contorno se disuelve contra el fondo con dos máscaras que se
   intersectan: una radial que apaga los cuatro lados y una lineal
   que funde la base. Así no hay rectángulo, ni borde, ni "sticker".
   ───────────────────────────────────────────────────────────── */
.shot{
  position:relative; margin:0;
  width:min(100%,470px); aspect-ratio:930/1024;
  justify-self:center;
}
/* Un degradado por eje garantiza que CADA borde llegue a transparente
   justo en el canto del elemento. Una sola elipse no basta: con radio
   72% del ancho, en x=0 la opacidad iba todavía al 69% y se veía el
   corte recto. El radial queda solo para romper la simetría. */
.shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.88) contrast(1.04) brightness(.94);
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 74%, transparent 100%),
    radial-gradient(64% 58% at 50% 42%, #000 38%, transparent 99%);
  mask-image:
    linear-gradient(to right,  transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 74%, transparent 100%),
    radial-gradient(64% 58% at 50% 42%, #000 38%, transparent 99%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
/* Tinte de la paleta, con la misma máscara para que el color tampoco
   dibuje un rectángulo. */
.shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 48% at 28% 22%, rgba(255,176,32,.15), transparent 70%),
    radial-gradient(58% 58% at 82% 82%, rgba(79,211,245,.11), transparent 72%);
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(60% 54% at 50% 42%, #000 34%, transparent 96%);
  mask-image:radial-gradient(60% 54% at 50% 42%, #000 34%, transparent 96%);
}
@media (prefers-reduced-motion: no-preference){
  .shot{ animation:float 9s var(--ease) infinite; }
}

/* ── Ilustración de respaldo ───────────────────────────────── */
.hero__art{ justify-self:center; width:min(100%,470px); }
.hero__art [hidden]{ display:none; }
.art{ width:100%; height:auto; overflow:visible; }
.art__rings{ animation:spin 60s linear infinite; transform-origin:220px 220px; }
.art__trace{ stroke-dasharray:6 9; animation:dash 24s linear infinite; }
.art__core{ animation:breathe 6s var(--ease) infinite; transform-origin:220px 220px; }
.art__sat{ animation:float 7s var(--ease) infinite; }
.art__sat--b{ animation-delay:-2.3s; }
.art__sat--c{ animation-delay:-4.6s; }
.art__spark circle{ animation:twinkle 3.4s var(--ease) infinite; }
.art__spark circle:nth-child(2){ animation-delay:-1.1s; }
.art__spark circle:nth-child(3){ animation-delay:-2.2s; }

@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes dash{ to{ stroke-dashoffset:-300; } }
@keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes twinkle{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* ── Secciones ─────────────────────────────────────────────── */
.section{ padding:clamp(52px,7vw,96px) 0; }
.section--alt{ background:var(--bg-2); border-top:1px solid var(--line); }
.ttl{ font-size:clamp(1.7rem,3.6vw,2.4rem); margin-bottom:34px; }

/* Formulario + contacto directo al lado: quien no quiere escribir
   igual tiene el teléfono a la vista en el punto de decisión. */
.ask__grid{
  display:grid; grid-template-columns:minmax(0,1fr) 260px;
  column-gap:56px; row-gap:32px; align-items:start;
}
.ask{ grid-column:1 / -1; }
.ask h2{ font-size:clamp(1.85rem,4vw,2.5rem); }
.ask p{ margin-top:16px; max-width:52ch; color:var(--dim); font-size:1rem; line-height:1.6; }
.ask__grid .form{ grid-column:1; }

.side{
  grid-column:2; display:grid; gap:2px;
  border-top:1px solid var(--line-2);
}
.side a{
  display:flex; align-items:center; gap:12px;
  padding:16px 2px;
  border-bottom:1px solid var(--line);
  color:var(--dim); font-size:.9rem; font-weight:500;
  transition:color .2s var(--ease), padding-left .25s var(--ease);
}
.side a:hover{ color:var(--text); padding-left:8px; }
.side a:first-child{ color:var(--text); font-size:1.02rem; font-weight:600; letter-spacing:-.02em; }
.side .ic{ width:17px; height:17px; color:var(--amber); }
.side span{ overflow:hidden; text-overflow:ellipsis; }

/* ── Gancho ────────────────────────────────────────────────────
   Composición editorial: el titular ocupa su propia franja y los
   tres puntos van en una fila con filetes, sin cajas ni iconos.
   ───────────────────────────────────────────────────────────── */
.intro{ border-top:1px solid var(--line); }
.intro__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:56px; row-gap:0; align-items:end;
}
.intro__h{
  grid-column:1; margin:0;
  font-size:clamp(2.1rem,5vw,3.4rem); letter-spacing:-.04em;
}
.intro__copy{ grid-column:2; padding-bottom:6px; }
.intro__copy p{ max-width:42ch; color:var(--dim); font-size:1.02rem; line-height:1.68; }
.intro__scope{ margin-top:18px; color:var(--text); font-weight:500; }

.marks{
  grid-column:1 / -1;
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:clamp(44px,6vw,76px);
  border-top:1px solid var(--line-2);
}
.marks li{
  position:relative;
  padding:26px 30px 4px 0;
  border-left:1px solid var(--line);
  padding-left:30px;
}
.marks li:first-child{ border-left:0; padding-left:0; }
/* Filete de color que crece al pasar el mouse */
.marks li::before{
  content:''; position:absolute; left:0; top:-1px; height:2px; width:0;
  background:var(--amber); transition:width .45s var(--ease);
}
.marks li:first-child::before{ background:var(--amber); }
.marks li:nth-child(2)::before{ background:var(--cyan); }
.marks li:nth-child(3)::before{ background:var(--slate); }
.marks li:hover::before{ width:100%; }

.marks__n{
  display:block; margin-bottom:16px;
  font-size:.72rem; font-weight:600; letter-spacing:.22em;
  color:var(--dim); font-variant-numeric:tabular-nums;
}
.marks b{
  display:block; font-size:clamp(1.02rem,1.5vw,1.18rem);
  font-weight:600; letter-spacing:-.02em; line-height:1.24;
}
.marks p{ margin-top:10px; max-width:30ch; color:var(--dim); font-size:.885rem; line-height:1.6; }

/* ── Grupos de servicio ────────────────────────────────────── */
.grp{ margin-top:56px; }
.grp:first-child{ margin-top:0; }
/* Encabezado de grupo con peso real: 11 px en versalita no sostenían
   una sección de seis tarjetas. Comparte lenguaje con los numerales
   01/02/03 del bloque de gancho. */
.grp h2{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:24px; padding-bottom:18px;
  border-bottom:1px solid var(--line);
  font-size:clamp(1.3rem,2.4vw,1.75rem); font-weight:700;
  letter-spacing:-.03em; text-transform:none; color:var(--text);
}
.grp__n{
  font-size:.72rem; font-weight:600; letter-spacing:.22em;
  font-variant-numeric:tabular-nums; color:var(--dim);
}
.grp[data-accent="amber"] .grp__n{ color:var(--amber); }
.grp[data-accent="cyan"]  .grp__n{ color:var(--cyan); }
.grp[data-accent="slate"] .grp__n{ color:var(--slate); }

.tiles{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); }

.tile{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:26px 22px 24px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  font:inherit; text-align:left; color:inherit; cursor:pointer;
  transition:transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}
.tile::after{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent,var(--amber)),transparent);
  opacity:0; transition:opacity .28s var(--ease);
}
.tile:hover{ transform:translateY(-4px); border-color:var(--line-2); background:#151922; }
.tile:hover::after{ opacity:.9; }

.tile__ic{
  width:38px; height:38px; margin-bottom:20px;
  fill:none; stroke:var(--accent,var(--amber)); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .28s var(--ease);
}
.tile:hover .tile__ic{ transform:scale(1.09) rotate(-3deg); }
.tile b{ font-size:1rem; font-weight:600; letter-spacing:-.015em; }
.tile span{ margin-top:5px; color:var(--dim); font-size:.855rem; }

.grp[data-accent="amber"] .tile{ --accent:var(--amber); }
.grp[data-accent="cyan"]  .tile{ --accent:var(--cyan); }
.grp[data-accent="slate"] .tile{ --accent:var(--slate); }

/* ── Fotos (cuando existan) ────────────────────────────────── */
.shots{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.shots figure{ margin:0; border-radius:16px; overflow:hidden; background:var(--surface); }
.shots img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

/* ── Formulario ────────────────────────────────────────────── */
.form{ display:grid; gap:18px; }
.field{ display:grid; }
.row{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }

label,.label{ margin-bottom:8px; font-size:.85rem; font-weight:500; color:var(--dim); }

input,select,textarea{
  width:100%; padding:13px 15px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line-2); border-radius:10px;
  font:inherit; font-size:.95rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
textarea{ resize:vertical; min-height:88px; line-height:1.5; }
select{
  appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B94A3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:17px;
}
select option,select optgroup{ background:#151922; color:var(--text); }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,176,32,.15);
}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{ border-color:var(--danger); }

.err{ display:none; margin-top:7px; color:var(--danger); font-size:.8rem; }
.err.is-on{ display:block; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; padding:10px 18px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:99px;
  color:var(--dim); font-size:.88rem; font-weight:500;
  transition:all .2s var(--ease);
}
.chip:hover span{ color:var(--text); border-color:rgba(255,255,255,.3); }
.chip input:checked + span{ background:var(--amber); border-color:var(--amber); color:var(--amber-ink); font-weight:600; }
.chip input:focus-visible + span{ outline:2px solid var(--amber); outline-offset:3px; }

.actions{ display:flex; flex-wrap:wrap; gap:11px; margin-top:6px; }
.actions .btn{ flex:1 1 190px; }
.note{ color:var(--dim); font-size:.8rem; }

/* ── Footer ────────────────────────────────────────────────── */
.foot{ background:var(--bg-2); border-top:1px solid var(--line); padding-top:48px; }
.foot__in{
  display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between;
  padding-bottom:34px;
}
.foot__links{ display:flex; flex-wrap:wrap; gap:24px; }
.foot__links a{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--dim); font-size:.89rem; transition:color .2s var(--ease);
}
.foot__links a:hover{ color:var(--amber); }
.foot__links .ic{ width:16px; height:16px; }
.foot__legal{
  padding:20px 22px 30px; border-top:1px solid var(--line);
  color:#5F6875; font-size:.78rem; line-height:1.7;
}

/* ── FAB + toast ───────────────────────────────────────────── */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:grid; place-items:center; width:52px; height:52px;
  background:var(--wa); color:var(--wa-ink); border-radius:50%;
  box-shadow:0 14px 32px -10px rgba(37,211,102,.65);
  transition:transform .2s var(--ease);
}
.fab:hover{ transform:translateY(-3px) scale(1.05); }
.fab .ic{ width:24px; height:24px; }

/* ── Barra de acción fija (móvil) ──────────────────────────────
   Patrón estándar del rubro: el teléfono nunca sale de pantalla.
   Reemplaza a la burbuja flotante, que tapa contenido y esconde
   la acción más usada de todas: llamar.
   ───────────────────────────────────────────────────────────── */
.dock{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line-2);
  border-top:1px solid var(--line-2);
  padding-bottom:env(safe-area-inset-bottom);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.dock__a{
  display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:56px; padding:0 12px;
  background:rgba(12,14,19,.94); color:var(--text);
  font-size:.94rem; font-weight:600; letter-spacing:-.01em;
}
.dock__a .ic{ width:18px; height:18px; color:var(--amber); }
.dock__a--wa{ background:var(--wa); color:var(--wa-ink); }
.dock__a--wa .ic{ color:var(--wa-ink); }
.dock__a:active{ filter:brightness(1.15); }

.toast{
  position:fixed; left:50%; bottom:26px; z-index:120;
  transform:translate(-50%,20px);
  padding:12px 20px; background:#1A1F28; color:var(--text);
  border:1px solid var(--line-2); border-radius:99px;
  font-size:.86rem; font-weight:500;
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ── Reveal ────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:900px){
  .intro__in{ grid-template-columns:1fr; row-gap:26px; }
  .intro__h, .intro__copy{ grid-column:1; }
  .marks{ grid-template-columns:1fr; margin-top:38px; }
  .marks li{
    border-left:0; padding:24px 0 0;
    border-top:1px solid var(--line);
  }
  .marks li:first-child{ border-top:0; padding-top:26px; }
  .marks li::before{ display:none; }
  .marks__n{ margin-bottom:10px; }
  .marks b br{ display:none; }
  .hero__in{ grid-template-columns:1fr; gap:14px; }
  .hero__art{ order:-1; width:min(78%,320px); }
  .hero h1{ font-size:clamp(2.4rem,10vw,3.4rem); }
}

@media (max-width:1000px){
  .ask__grid{ grid-template-columns:1fr; }
  .ask__grid .form, .side{ grid-column:1; }
  .side{ max-width:520px; }
}

@media (max-width:720px){
  /* La barra fija toma el relevo de la burbuja */
  .dock{ display:grid; }
  .fab{ display:none; }
  body{ padding-bottom:64px; }
  .toast{ bottom:76px; }

  .nav__links{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; gap:0;
    padding:6px 22px 14px;
    background:rgba(8,9,12,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .burger{ display:inline-flex; }
  /* El número se sigue viendo; lo que se va es el botón redundante */
  .nav__cta .btn--sm{ display:none; }
  .tel{ font-size:.86rem; }
  .row{ grid-template-columns:1fr; }
  .actions .btn{ flex:1 1 100%; }
  .foot__in{ flex-direction:column; align-items:flex-start; gap:20px; }
}

@media (max-width:420px){
  .hero__actions .btn{ width:100%; }
  .tiles{ grid-template-columns:1fr; }
}