/* ==========================================================================
   PREVINTEC — components.css
   Botones, navegación, tarjetas, badges, formularios, tablas, acordeones,
   maquetas de software, marquesina y pie de página.
   ========================================================================== */

/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn{
  --btn-bg:var(--surface-2);
  --btn-fg:var(--text);
  --btn-bd:var(--border-strong);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding:.92em 1.5em;
  min-height:48px;
  border-radius:var(--radius-pill);
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:-.005em;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
             background-color .3s var(--ease-out), border-color .3s var(--ease-out),
             color .3s var(--ease-out);
}
.btn svg{flex:none;width:1.05em;height:1.05em;transition:transform .35s var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* Barrido de luz al pasar el cursor */
.btn::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.34) 50%,transparent 75%);
  transform:translateX(-130%);
  transition:transform .75s var(--ease-out);
  pointer-events:none;
  z-index:1;
}
.btn:hover::after{transform:translateX(130%)}

.btn--primary{
  --btn-bg:linear-gradient(135deg,var(--amber-500),var(--amber-600));
  --btn-fg:#1A1305;
  --btn-bd:transparent;
  box-shadow:0 10px 28px -12px rgba(240,148,40,.65);
}
.btn--primary:hover{box-shadow:0 18px 40px -14px rgba(240,148,40,.8)}

.btn--navy{
  --btn-bg:linear-gradient(135deg,var(--navy-600),var(--navy-800));
  --btn-fg:#FFFFFF;
  --btn-bd:transparent;
  box-shadow:0 10px 28px -14px rgba(30,24,97,.6);
}

.btn--ghost{
  --btn-bg:transparent;
  --btn-bd:var(--border-strong);
}
.btn--ghost:hover{
  --btn-bg:var(--surface-2);
  --btn-bd:var(--accent);
}

.btn--quiet{
  --btn-bg:transparent;
  --btn-bd:transparent;
  padding-inline:.4em;
  min-height:auto;
  color:var(--accent);
}
.btn--quiet:hover{transform:none;color:var(--text)}
.btn--quiet svg{transition:transform .35s var(--ease-out)}
.btn--quiet:hover svg{transform:translateX(4px)}

.btn--sm{padding:.62em 1.05em;min-height:40px;font-size:var(--fs-xs)}
.btn--lg{padding:1.05em 1.9em;min-height:56px;font-size:var(--fs-base)}
.btn--block{width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* Enlace de texto con subrayado animado */
.link{
  position:relative;
  display:inline-flex;align-items:center;gap:.45em;
  font-weight:600;
  color:var(--accent);
  padding-bottom:2px;
}
.link::before{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.link:hover::before{transform:scaleX(1)}

/* ==========================================================================
   NAVEGACIÓN
   ========================================================================== */

.nav{
  position:fixed;inset:0 0 auto 0;
  z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .45s var(--ease-out), border-color .45s var(--ease-out),
             backdrop-filter .45s var(--ease-out), height .35s var(--ease-out);
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--border);
}
.nav.is-hidden{transform:translateY(-102%)}
.nav{transition-property:background-color,border-color,backdrop-filter,transform,height}
.nav__inner{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:clamp(1.1rem,4vw,3rem);
  display:flex;align-items:center;gap:clamp(.6rem,2vw,1.8rem);
}

.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand__mark{
  width:38px;height:38px;border-radius:50%;
  overflow:hidden;flex:none;
  transition:transform .5s var(--ease-spring);
  box-shadow:0 4px 14px -6px rgba(7,6,26,.55);
}
.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.06)}
.brand__mark img{width:100%;height:100%;object-fit:cover}
.brand__stack{display:grid;gap:2px;align-content:center}
.brand__wm{
  height:19px;width:auto;
  transition:opacity .4s var(--ease-out);
}
.wm--on-dark{display:block}
.wm--on-light{display:none}
html[data-theme="light"] .wm--on-dark{display:none}
html[data-theme="light"] .wm--on-light{display:block}
.brand__text{
  font-family:var(--font-display);
  font-size:1.16rem;
  font-weight:800;
  letter-spacing:-.035em;
  color:var(--text);
  line-height:1;
}
.brand__text b{font-weight:800}
.brand__text i{font-style:normal;color:var(--amber-500)}
.brand__sub{
  display:block;
  font-family:var(--font-mono);
  font-size:.56rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-top:3px;
  font-weight:500;
}

.nav__links{
  display:flex;align-items:center;gap:.15rem;
  margin-left:auto;
}
.nav__link{
  position:relative;
  padding:.55rem .8rem;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--text-2);
  border-radius:var(--radius-pill);
  transition:color .3s var(--ease-out), background-color .3s var(--ease-out);
  white-space:nowrap;
}
.nav__link:hover{color:var(--text);background:var(--surface-2)}
.nav__link[aria-current="page"]{color:var(--text)}
.nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.15rem;
  height:2px;border-radius:2px;background:var(--accent);
}

.nav__actions{display:flex;align-items:center;gap:.6rem;margin-left:.4rem}

.nav__toggle{
  display:none;
  width:44px;height:44px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  align-items:center;justify-content:center;
}
.nav__toggle span{
  position:relative;width:18px;height:2px;background:var(--text);border-radius:2px;
  transition:transform .3s var(--ease-out), opacity .3s;
}
.nav__toggle span::before,
.nav__toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text);
  border-radius:2px;transition:transform .3s var(--ease-out);
}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}
.nav__toggle[aria-expanded="true"] span{transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::before{transform:rotate(-90deg) translateX(-6px)}
.nav__toggle[aria-expanded="true"] span::after{opacity:0}

/* CTA destacado del menú */
.nav__cta{display:inline-flex}

/* Menú móvil */
.mobile-menu{
  position:fixed;inset:0;z-index:99;
  background:var(--bg);
  padding:calc(var(--nav-h) + 1.5rem) clamp(1.1rem,5vw,2rem) 2rem;
  display:flex;flex-direction:column;gap:.35rem;
  overflow-y:auto;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .55s var(--ease-in-out);
}
.mobile-menu.is-open{clip-path:inset(0 0 0 0)}
.mobile-menu__link{
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  font-weight:800;
  letter-spacing:-.03em;
  padding:.5rem 0;
  border-bottom:1px solid var(--border);
  color:var(--text);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.mobile-menu__link small{
  font-family:var(--font-mono);font-size:.6rem;color:var(--text-3);
  letter-spacing:.1em;font-weight:400;
}
.mobile-menu__foot{
  margin-top:auto;padding-top:2rem;
  display:grid;gap:.75rem;
}
.mobile-menu__meta{
  font-family:var(--font-mono);font-size:var(--fs-xs);
  color:var(--text-3);display:grid;gap:.3rem;
}

/* Barra de progreso de lectura */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:101;
  background:transparent;pointer-events:none;
}
.scroll-progress__bar{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--amber-500),var(--navy-400));
  transition:width .12s linear;
}

/* ==========================================================================
   TARJETAS
   ========================================================================== */

.card{
  position:relative;
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:clamp(1.3rem,2.6vw,2rem);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  isolation:isolate;
  transition:transform .5s var(--ease-out), border-color .5s var(--ease-out),
             background-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(120% 90% at 12% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 62%);
  transition:opacity .55s var(--ease-out);
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow);
}
.card:hover::before{opacity:1}

.card--flat{background:transparent}
.card--solid{background:var(--surface-solid)}
.card--navy{
  background:var(--navy-900);
  border-color:rgba(255,255,255,.10);
  color:#F5F4FC;
}
.card--navy h3,.card--navy h4{color:#fff}
.card--navy p{color:rgba(255,255,255,.72)}

.card--wide{grid-column:span 2}

/* Tarjeta con línea superior de acento al hover */
.card--top::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--amber-500),var(--navy-400));
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.card--top:hover::after{transform:scaleX(1)}

.card__icon{
  width:48px;height:48px;flex:none;
  border-radius:var(--radius-sm);
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  color:var(--accent);
  transition:transform .5s var(--ease-spring), background-color .4s;
}
.card__icon svg{width:22px;height:22px}
.card:hover .card__icon{transform:translateY(-2px) rotate(-4deg)}
.card__icon--navy{
  background:color-mix(in srgb,var(--navy-400) 18%,transparent);
  border-color:color-mix(in srgb,var(--navy-400) 30%,transparent);
  color:var(--navy-300);
}
.card__icon--green{
  background:var(--green-100);
  border-color:var(--green-200);
  color:var(--green-700);
}
html[data-theme="dark"] .card__icon--green{
  background:color-mix(in srgb,var(--green-500) 14%,transparent);
  border-color:color-mix(in srgb,var(--green-500) 26%,transparent);
  color:var(--green-200);
}

.card__num{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  color:var(--text-3);
  letter-spacing:.12em;
}
.card__foot{margin-top:auto;padding-top:var(--s-3)}

/* Tarjeta de servicio con borde reactivo al puntero */
.card--spot{
  --mx:50%; --my:0%;
}
.card--spot::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 15%,transparent),transparent 70%);
  opacity:0;transition:opacity .4s;
}
.card--spot:hover::after{opacity:1}

/* ==========================================================================
   BADGES / ETIQUETAS
   ========================================================================== */

.badge{
  display:inline-flex;align-items:center;gap:.45em;
  padding:.32em .78em;
  border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);
  background:var(--surface-2);
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-2);
  white-space:nowrap;
}
.badge--accent{
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  color:var(--accent);
}
.badge--green{
  background:color-mix(in srgb,var(--green-500) 14%,transparent);
  border-color:color-mix(in srgb,var(--green-500) 30%,transparent);
  color:var(--green-700);
}
html[data-theme="dark"] .badge--green{color:var(--green-200)}
.badge--navy{
  background:color-mix(in srgb,var(--navy-400) 16%,transparent);
  border-color:color-mix(in srgb,var(--navy-400) 30%,transparent);
  color:var(--navy-300);
}
.badge--dev{
  background:color-mix(in srgb,var(--ink-300) 16%,transparent);
  border-color:var(--border-strong);
  color:var(--text-3);
}
.badge--dot::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none;
}
.badge--lg{font-size:.72rem;padding:.42em .95em}

/* Aviso de estado (formularios no conectados, contenido pendiente) */
.notice{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:1rem 1.15rem;
  border-radius:var(--radius);
  border:1px dashed color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  font-size:var(--fs-sm);
  color:var(--text-2);
}
.notice svg{flex:none;width:18px;height:18px;color:var(--accent);margin-top:.15em}
.notice b{color:var(--text)}
.notice--neutral{
  border-color:var(--border-strong);
  background:var(--surface-2);
}
.notice--neutral svg{color:var(--text-3)}

/* ==========================================================================
   LISTAS
   ========================================================================== */

.list-check{display:grid;gap:.7rem}
.list-check li{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:.7rem;
  align-items:start;
  color:var(--text-2);
  font-size:var(--fs-sm);
  line-height:1.55;
}
.list-check li::before{
  content:"";
  width:20px;height:20px;margin-top:.18em;
  border-radius:50%;
  background:color-mix(in srgb,var(--green-500) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--green-500) 32%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FA84F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px;
  background-repeat:no-repeat;
  background-position:center;
  flex:none;
}
.list-check--accent li::before{
  background-color:color-mix(in srgb,var(--accent) 16%,transparent);
  border-color:color-mix(in srgb,var(--accent) 32%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F09428' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.list-num{display:grid;gap:1.5rem;counter-reset:n}
.list-num > li{
  counter-increment:n;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.15rem;
  align-items:start;
}
.list-num > li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:500;
  color:var(--accent);
  padding-top:.35em;
  letter-spacing:.06em;
}

.list-plain{display:grid;gap:.55rem}
.list-plain li{
  display:grid;grid-template-columns:8px 1fr;gap:.7rem;
  color:var(--text-2);font-size:var(--fs-sm);align-items:start;
}
.list-plain li::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-top:.55em;flex:none;
}

/* Etiquetas de metadatos en definición */
.deflist{display:grid;gap:0}
.deflist > div{
  display:grid;
  grid-template-columns:minmax(140px,.34fr) 1fr;
  gap:1.2rem;
  padding:1rem 0;
  border-bottom:1px solid var(--border);
}
.deflist > div:first-child{border-top:1px solid var(--border)}
.deflist dt{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-3);
  padding-top:.2em;
}
.deflist dd{color:var(--text-2);font-size:var(--fs-sm)}

/* ==========================================================================
   ACORDEÓN (FAQ)
   ========================================================================== */

.acc{border-top:1px solid var(--border)}
.acc__item{border-bottom:1px solid var(--border)}
.acc__btn{
  width:100%;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;
  text-align:left;
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
  transition:color .3s var(--ease-out);
}
.acc__btn:hover{color:var(--accent)}
.acc__sign{
  position:relative;flex:none;width:22px;height:22px;margin-top:.22em;
  border-radius:50%;
  border:1px solid var(--border-strong);
  transition:background-color .35s,border-color .35s,transform .45s var(--ease-out);
}
.acc__sign::before,.acc__sign::after{
  content:"";position:absolute;top:50%;left:50%;
  width:9px;height:1.6px;background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);
}
.acc__sign::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--ease-out)}
.acc__item.is-open .acc__sign{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  transform:rotate(180deg);
}
.acc__item.is-open .acc__sign::after{transform:translate(-50%,-50%) rotate(0)}
.acc__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease-out);
}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel > div{overflow:hidden}
.acc__panel p,
.acc__panel ul{
  padding-bottom:1.4rem;
  max-width:78ch;
  font-size:var(--fs-sm);
}
.acc__panel ul{margin-top:.6rem}

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */

.form{display:grid;gap:1.15rem}
.form__row{display:grid;gap:1.15rem;grid-template-columns:repeat(2,minmax(0,1fr))}

.field{display:grid;gap:.42rem;position:relative}
.field > label{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-3);
  font-weight:500;
}
.field > label .req{color:var(--accent)}

.input,.select,.textarea{
  width:100%;
  padding:.85rem 1rem;
  min-height:50px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-size:var(--fs-sm);
  font-family:var(--font-body);
  transition:border-color .3s var(--ease-out), background-color .3s, box-shadow .3s;
  -webkit-appearance:none;appearance:none;
}
.input::placeholder,.textarea::placeholder{color:var(--text-3);opacity:.75}
.input:hover,.select:hover,.textarea:hover{border-color:var(--border-strong)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
}
.textarea{min-height:140px;resize:vertical;line-height:1.6}

.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918EAA' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:15px;
  padding-right:2.6rem;
  cursor:pointer;
}
.select option{background:var(--surface-solid);color:var(--text)}

.field--error .input,
.field--error .select,
.field--error .textarea{border-color:#D9534F;box-shadow:0 0 0 3px rgba(217,83,79,.14)}
.field__err{
  font-size:var(--fs-xs);
  color:#E06C68;
  display:none;
}
.field--error .field__err{display:block}

/* Casilla de consentimiento */
.check{
  display:grid;grid-template-columns:20px 1fr;gap:.7rem;
  align-items:start;font-size:var(--fs-xs);color:var(--text-2);line-height:1.55;
  cursor:pointer;
}
.check input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;margin-top:.1em;
  border:1px solid var(--border-strong);
  border-radius:5px;background:var(--surface-2);
  cursor:pointer;flex:none;
  transition:background-color .25s,border-color .25s;
}
.check input:checked{
  background-color:var(--accent);
  border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1305' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;background-position:center;
}
html[data-theme="light"] .check input:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.check a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.form__foot{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  justify-content:space-between;margin-top:.4rem;
}

/* ==========================================================================
   TABLA DE MÓDULOS
   ========================================================================== */

.table-scroll{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  -webkit-overflow-scrolling:touch;
}
.table{min-width:620px;font-size:var(--fs-sm)}
.table th{
  text-align:left;
  padding:1rem 1.15rem;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--text-3);
  font-weight:500;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
  white-space:nowrap;
}
.table td{
  padding:1rem 1.15rem;
  border-bottom:1px solid var(--border);
  color:var(--text-2);
  vertical-align:top;
}
.table tr:last-child td{border-bottom:0}
.table td:first-child{color:var(--text);font-weight:600}
.table tbody tr{transition:background-color .3s}
.table tbody tr:hover{background:var(--surface-2)}
.table__code{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--accent);
  letter-spacing:.06em;
}

/* ==========================================================================
   MAQUETA DE SOFTWARE (vista conceptual)
   ========================================================================== */

.mock{
  position:relative;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-strong);
  background:linear-gradient(160deg,#100E30,#0A0820 60%,#0F0D2C);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  isolation:isolate;
}
.mock--light{
  background:linear-gradient(160deg,#FFFFFF,#F4F2EE);
  border-color:var(--line);
}
.mock__bar{
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem .9rem;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
}
.mock--light .mock__bar{
  border-bottom-color:var(--line);
  background:rgba(18,17,32,.02);
}
.mock__dots{display:flex;gap:.34rem;flex:none}
.mock__dots i{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.18);
}
.mock--light .mock__dots i{background:rgba(18,17,32,.14)}
.mock__url{
  flex:1;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.04em;
  color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.05);
  border-radius:var(--radius-pill);
  padding:.32em .8em;
  text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mock--light .mock__url{color:var(--ink-500);background:rgba(18,17,32,.05)}
.mock__body{padding:clamp(1rem,2.4vw,1.6rem)}

/* Rejilla interna de la maqueta */
.mock__grid{display:grid;gap:.75rem}
.mock__grid--kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
.mock__grid--2{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.mock__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.mock__card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-sm);
  padding:.85rem;
  display:grid;gap:.5rem;
  min-width:0;
}
.mock--light .mock__card{
  background:#fff;
  border-color:var(--line);
  box-shadow:0 2px 8px -4px rgba(18,17,32,.1);
}
.mock__label{
  font-family:var(--font-mono);
  font-size:.58rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mock--light .mock__label{color:var(--ink-300)}
.mock__value{
  font-family:var(--font-display);
  font-size:clamp(1.1rem,2.4vw,1.6rem);
  font-weight:800;
  letter-spacing:-.03em;
  color:#fff;
  line-height:1;
}
.mock--light .mock__value{color:var(--ink-900)}
.mock__value--amber{color:var(--amber-500)}
.mock__value--green{color:var(--green-500)}

.mock__bars{display:flex;align-items:flex-end;gap:.4rem;height:82px;margin-top:.3rem}
.mock__bars i{
  flex:1;
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--amber-500),color-mix(in srgb,var(--amber-500) 35%,transparent));
  opacity:.85;
  animation:barRise 1.1s var(--ease-out) both;
}
.mock__bars i:nth-child(2n){background:linear-gradient(180deg,var(--navy-400),color-mix(in srgb,var(--navy-400) 30%,transparent))}
@keyframes barRise{from{transform:scaleY(.05);transform-origin:bottom;opacity:0}to{transform:scaleY(1);opacity:.85}}

.mock__rows{display:grid;gap:.5rem}
.mock__row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:.7rem;align-items:center;
  padding:.55rem .7rem;
  border-radius:var(--radius-xs);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  font-size:.72rem;
  color:rgba(255,255,255,.72);
}
.mock--light .mock__row{
  background:var(--paper-2);border-color:var(--line);color:var(--ink-700);
}
.mock__row b{color:#fff;font-weight:600}
.mock--light .mock__row b{color:var(--ink-900)}
.mock__chip{
  font-family:var(--font-mono);
  font-size:.55rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.2em .55em;
  border-radius:var(--radius-pill);
  white-space:nowrap;
}
.mock__chip--ok{background:rgba(47,168,79,.2);color:#7BD79A}
.mock__chip--warn{background:rgba(240,148,40,.2);color:#F8AC55}
.mock__chip--late{background:rgba(217,83,79,.2);color:#EE8A86}
.mock--light .mock__chip--ok{background:var(--green-100);color:var(--green-700)}
.mock--light .mock__chip--warn{background:var(--amber-100);color:var(--amber-700)}
.mock--light .mock__chip--late{background:#FBE3E2;color:#A8362F}

/* Diagrama de riesgo 5x5 */
.mock__matrix{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:3px;
  aspect-ratio:1.35/1;
}
.mock__matrix i{
  border-radius:3px;
  background:rgba(255,255,255,.06);
}
.mock__matrix i[data-l="1"]{background:rgba(47,168,79,.30)}
.mock__matrix i[data-l="2"]{background:rgba(47,168,79,.18)}
.mock__matrix i[data-l="3"]{background:rgba(240,148,40,.22)}
.mock__matrix i[data-l="4"]{background:rgba(240,148,40,.38)}
.mock__matrix i[data-l="5"]{background:rgba(217,83,79,.42)}

/* Etiqueta de vista conceptual */
.mock__tag{
  position:absolute;
  top:.7rem;right:.7rem;
  z-index:3;
  font-family:var(--font-mono);
  font-size:.55rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:.28em .65em;
  border-radius:var(--radius-pill);
  background:rgba(7,6,26,.72);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.72);
  backdrop-filter:blur(6px);
  white-space:nowrap;
}
.mock--light .mock__tag{
  background:rgba(255,255,255,.86);
  border-color:var(--line);
  color:var(--ink-500);
}

/* Flujo conectado: riesgo → acción → evidencia */
.flow{
  display:grid;
  gap:.65rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  align-items:stretch;
}
.flow__step{
  position:relative;
  padding:1rem .95rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  display:grid;gap:.4rem;align-content:start;
  transition:transform .45s var(--ease-out),border-color .45s,background-color .45s;
}
.flow__step:hover{transform:translateY(-4px);border-color:var(--accent)}
.flow__step b{
  font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:500;
}
.flow__step span{font-size:var(--fs-sm);color:var(--text-2);line-height:1.45}
.flow__step::after{
  content:"";
  position:absolute;right:-.45rem;top:50%;width:.55rem;height:1px;
  background:var(--border-strong);
}
.flow__step:last-child::after{display:none}

/* ==========================================================================
   MARQUESINA
   ========================================================================== */

.marquee{
  position:relative;
  overflow:hidden;
  border-block:1px solid var(--border);
  padding-block:1.15rem;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;gap:3.5rem;width:max-content;
  animation:marquee 38s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee--rev .marquee__track{animation-direction:reverse;animation-duration:46s}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee__item{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-3);
  display:flex;align-items:center;gap:.7rem;
  white-space:nowrap;
}
.marquee__item::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent);opacity:.6;flex:none;
}

/* ==========================================================================
   PIE DE PÁGINA
   ========================================================================== */

.footer{
  position:relative;
  background:var(--navy-950);
  color:rgba(255,255,255,.66);
  padding-top:clamp(3rem,6vw,5rem);
  overflow:hidden;
}
html[data-theme="light"] .footer{background:var(--navy-900)}
.footer h4{
  color:#fff;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:1.1rem;
}
.footer a{transition:color .3s}
.footer a:hover{color:var(--amber-400)}
.footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.8rem,4vw,3.5rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.footer__brand .brand__text{color:#fff}
.footer__brand .brand__sub{color:rgba(255,255,255,.4)}
.footer__list{display:grid;gap:.7rem;font-size:var(--fs-sm)}
.footer__contact{display:grid;gap:.9rem;font-size:var(--fs-sm)}
.footer__contact a{display:flex;gap:.65rem;align-items:flex-start}
.footer__contact svg{flex:none;width:16px;height:16px;color:var(--amber-500);margin-top:.22em}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:space-between;
  font-size:var(--fs-xs);
}
.footer__bottom nav{display:flex;flex-wrap:wrap;gap:1.3rem}
.footer__legal{
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.04em;
  color:rgba(255,255,255,.42);
}
.footer__watermark{
  position:absolute;
  bottom:-.28em;left:50%;transform:translateX(-50%);
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(4rem,17vw,15rem);
  letter-spacing:-.05em;
  line-height:.8;
  color:rgba(255,255,255,.035);
  pointer-events:none;user-select:none;
  white-space:nowrap;
}

/* Barra flotante de contacto */
.contact-dock{
  position:fixed;
  right:clamp(.9rem,2.5vw,1.6rem);
  bottom:clamp(.9rem,2.5vw,1.6rem);
  z-index:90;
  display:flex;flex-direction:column;gap:.6rem;align-items:flex-end;
}
.contact-dock__btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.72rem 1.1rem;
  min-height:48px;
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  font-family:var(--font-display);
  font-size:var(--fs-sm);font-weight:700;
  box-shadow:0 12px 30px -12px rgba(18,140,126,.7);
  transition:transform .35s var(--ease-out), box-shadow .35s;
}
.contact-dock__btn svg{width:19px;height:19px;flex:none}
.contact-dock__btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 40px -14px rgba(18,140,126,.85)}
.contact-dock__btn span{display:none}
@media (min-width:760px){.contact-dock__btn span{display:inline}}

/* ==========================================================================
   RESPONSIVE DE COMPONENTES
   ========================================================================== */

@media (max-width:1180px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .nav__cta{display:none}
}

@media (max-width:900px){
  .mock__grid--kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mock__grid--2{grid-template-columns:minmax(0,1fr)}
  .mock__grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:span 2}
}

@media (max-width:620px){
  .form__row{grid-template-columns:minmax(0,1fr)}
  .deflist > div{grid-template-columns:minmax(0,1fr);gap:.3rem}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
  .footer__brand{grid-column:span 1}
  .mock__grid--3{grid-template-columns:minmax(0,1fr)}
  .card--wide{grid-column:span 1}
  .flow__step::after{display:none}
}