/* ============================================================
   MirvenLabs · landing v3 — «el punto mira, la flecha va»
   Paleta y tipografía según Guía de identidad v1.1
   Disciplina 60·30·10 — el ámbar NUNCA como texto sobre crema.

   MOBILE-FIRST: los estilos base son los de móvil; los
   breakpoints amplían hacia arriba con min-width
   (tablet ≥ 640px · escritorio ≥ 900px).

   Toda la animación usa solo transform/opacity (60 fps) y
   respeta prefers-reduced-motion.
   ============================================================ */

:root{
  --ink:      #16324F;  /* azul tinta   · 60% */
  --crema:    #F7F3EB;  /* fondo base   · 30% */
  --ambar:    #F2A33C;  /* flecha, CTAs · 10% */
  --blanco:   #FFFFFF;
  --ink-sec:  #46586E;
  --linea:    #E2DACB;
  --ink-claro:#9FB0C4;      /* texto de apoyo sobre tinta */
  --linea-dark:#2A4664;     /* bordes de tarjeta sobre tinta */
  --marca-agua:#EDE5D6;     /* símbolo fantasma sobre crema */

  --sora:  'Sora', sans-serif;
  --inter: 'Inter', sans-serif;
  --mono:  'IBM Plex Mono', monospace;

  --ease-out: cubic-bezier(.22,.9,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box }

html{ scroll-behavior:smooth }

body{
  background:var(--crema);
  color:var(--ink);
  font-family:var(--inter);
  font-size:16px;
  line-height:1.625;   /* 16/26 de la guía */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{ max-width:1040px; margin:0 auto; padding:0 20px }

section{ scroll-margin-top:76px }

/* ============================================================
   INTRO DE MARCA — el arco traza, la pupila mira, la flecha va
   ============================================================ */

.intro{
  position:fixed; inset:0; z-index:100;
  background:var(--crema);
  display:flex; align-items:center; justify-content:center;
  animation:introOut .55s var(--ease-out) 1.5s forwards;
  pointer-events:none;
}
.intro-mk{ width:96px; height:96px }

.i-arc{
  stroke-dasharray:140; stroke-dashoffset:140;
  animation:arcDraw .55s var(--ease-out) .12s forwards;
}
.i-pupila{
  transform:scale(0); transform-origin:42px 48px;
  animation:pupIn .28s var(--ease-out) .6s forwards;
}
.i-flecha{
  opacity:0; transform:translateX(-16px);
  animation:flechaGo .45s var(--ease-out) .82s forwards;
}

@keyframes arcDraw { to{ stroke-dashoffset:0 } }
@keyframes pupIn   { from{ transform:scale(0) } 60%{ transform:scale(1.25) } to{ transform:scale(1) } }
@keyframes flechaGo{ to{ opacity:1; transform:translateX(0) } }
@keyframes introOut{ to{ opacity:0; visibility:hidden } }

/* Si ya se vio la intro esta sesión, fuera */
.no-intro .intro{ display:none }

/* ============================================================
   FLECHA DE PROGRESO DE SCROLL
   ============================================================ */

.progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
}
.progress-bar{
  height:100%; width:100%;
  background:var(--ambar);
  border-radius:0 3px 3px 0;
  transform-origin:left center;
  transform:scaleX(0);
}

/* ---------- tipografía ---------- */

h1{
  font-family:var(--sora); font-weight:700;
  font-size:clamp(31px, 8.5vw, 54px);
  line-height:1.15; letter-spacing:-.01em;
}
h2{
  font-family:var(--sora); font-weight:600;
  font-size:clamp(23px, 6vw, 32px);
  line-height:1.25; margin-bottom:16px;
}
.h2-sm{ font-size:clamp(20px, 5vw, 25px) }
h3{
  font-family:var(--sora); font-weight:600;
  font-size:18px; line-height:1.35; margin-bottom:8px;
}
p{ max-width:640px }
.lead{ color:var(--ink-sec); margin-bottom:8px }
.mono{ font-family:var(--mono); font-size:13px }

.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-sec); margin-bottom:14px;
}
/* Ámbar como texto SOLO sobre tinta (6.29:1, AA) */
.eyebrow-ambar{ color:var(--ambar) }

/* Subrayado ámbar que barre la cifra clave (elemento gráfico) */
.hl{
  background:linear-gradient(var(--ambar), var(--ambar)) no-repeat left 88% / 0% 30%;
  color:inherit; padding:0 2px;
  transition:background-size .8s var(--ease-out) .3s;
}
.hl.visible{ background-size:100% 30% }

/* ---------- botones y enlaces ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sora); font-weight:600; font-size:15.5px;
  padding:14px 26px; border-radius:10px;
  text-decoration:none; border:none; cursor:pointer;
  transition:box-shadow .2s ease;
  will-change:transform;
}
.btn-sm{ padding:9px 16px; font-size:13.5px }
.btn-amber{ background:var(--ambar); color:var(--ink) }
.btn-amber:hover{ box-shadow:0 8px 22px rgba(22,50,79,.22) }

/* la flecha del botón asoma al pasar */
.btn-arrow .arr{
  display:inline-block;
  transition:transform .25s var(--ease-out);
}
.btn-arrow:hover .arr{ transform:translateX(5px) }

.link-quiet{
  font-family:var(--inter); font-weight:500; font-size:15px;
  color:var(--ink-sec); text-decoration:none;
  border-bottom:1px solid var(--linea);
  transition:color .2s, border-color .2s;
}
.link-quiet:hover{ color:var(--ink); border-color:var(--ink-sec) }

/* ---------- cabecera ---------- */

.site-header{
  background:rgba(247,243,235,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
  position:sticky; top:0; z-index:50;
  transition:box-shadow .3s ease;
}
.site-header.scrolled{ box-shadow:0 4px 24px rgba(22,50,79,.08) }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.logo-link img{ display:block; height:28px; width:auto }
.header-nav{ display:flex; align-items:center; gap:22px }
.header-nav a{
  font-size:14.5px; font-weight:500;
  color:var(--ink-sec); text-decoration:none;
  transition:color .2s;
}
.header-nav a:hover{ color:var(--ink) }
.header-nav .btn{ color:var(--ink) }
/* móvil: solo logo + CTA */
.header-nav a:not(.btn){ display:none }

/* ---------- hero ---------- */

.hero{
  position:relative;
  padding:64px 0 56px;
  overflow:hidden;
}

/* marca de agua con parallax (JS mueve --mx/--my; en móvil, fondo sutil) */
.hero-mark{
  position:absolute; right:-100px; top:52%;
  width:min(360px, 82vw); height:auto;
  color:var(--marca-agua);
  transform:translateY(-52%) translate(var(--mx, 0), var(--my, 0));
  transition:transform .6s var(--ease-out);
  pointer-events:none;
  opacity:.55;
  z-index:0;
}
.hero .wrap{ position:relative; z-index:1 }

/* titular palabra a palabra (arranca al terminar la intro) */
h1 .w{
  display:inline-block;
  opacity:0; transform:translateY(.55em);
  animation:wordIn .55s var(--ease-out) forwards;
  animation-delay:calc(1.55s + var(--i) * 75ms);
}
.no-intro h1 .w{ animation-delay:calc(.15s + var(--i) * 75ms) }

@keyframes wordIn{ to{ opacity:1; transform:none } }

/* entrada del resto del hero */
.hero-fade{
  opacity:0; transform:translateY(14px);
  animation:heroFade .6s var(--ease-out) forwards;
  animation-delay:calc(1.75s + var(--d) * 180ms);
}
.no-intro .hero-fade{ animation-delay:calc(.35s + var(--d) * 180ms) }

@keyframes heroFade{ to{ opacity:1; transform:none } }

.hero-sub{
  margin-top:20px; font-size:16.5px; color:var(--ink-sec); max-width:560px;
}
.hero-ctas{
  margin-top:30px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}

/* ---------- marquesina ---------- */

.marquee{
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  overflow:hidden;
  padding:12px 0;
}
.marquee-track{
  display:flex; width:max-content;
  animation:marq 30s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused }
.marquee-seq{
  display:flex; align-items:center; gap:34px;
  padding-right:34px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-sec); white-space:nowrap;
}
.m-arr{ width:14px; height:14px; flex:0 0 auto }

@keyframes marq{ to{ transform:translateX(-50%) } }

/* ---------- secciones ---------- */

main section{ padding:60px 0 }

.banda-tinta{
  position:relative;
  background:var(--ink); color:var(--crema);
  overflow:hidden;
}
.banda-tinta .lead{ color:var(--ink-claro) }
.banda-tinta h2{ color:var(--crema) }
.banda-tinta .wrap{ position:relative; z-index:1 }

/* símbolo fantasma en las bandas de tinta */
.banda-mark{
  position:absolute; left:-70px; bottom:-90px;
  width:300px; height:auto;
  color:#1D3C5E;
  pointer-events:none;
  z-index:0;
}
.banda-mark path[stroke="#F2A33C"]{ stroke:#1D3C5E }

/* ---------- reveals con escalonado (JS pone --rd) ---------- */

.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:var(--rd, 0ms);
}
.reveal.visible{ opacity:1; transform:none }

/* ---------- el problema + chat ---------- */

/* móvil: texto arriba, chat debajo */
.problema-grid{
  display:grid; grid-template-columns:1fr;
  gap:40px; align-items:center;
}

.cards-3{
  display:grid; grid-template-columns:1fr;
  gap:16px; margin-top:44px;
}
.card{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:14px; padding:24px 22px;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
             opacity .6s var(--ease-out);
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 34px rgba(22,50,79,.10);
}
.card p{ font-size:15px; color:var(--ink-sec) }
.card-dato{
  font-family:var(--mono); font-size:13px; font-weight:500;
  color:var(--ink) !important; margin-bottom:10px;
  text-transform:uppercase; letter-spacing:.08em;
}

/* --- el chat que se escribe solo --- */

.chat{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:22px;
  padding:16px 16px 12px;
  box-shadow:0 18px 50px rgba(22,50,79,.12);
  max-width:420px;
  width:100%;
  justify-self:center;
}
.chat-head{
  display:flex; align-items:center; gap:12px;
  padding:2px 4px 14px;
  border-bottom:1px solid var(--linea);
}
.chat-avatar{
  width:40px; height:40px; border-radius:50%;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.chat-nombre{ display:block; font-family:var(--sora); font-weight:600; font-size:14px }
.chat-estado{ display:block; font-size:11px; color:var(--ink-sec) }

.chat-msgs{ list-style:none; padding:16px 2px 6px }

.msg{
  max-width:84%;
  margin-bottom:10px;
  padding:10px 13px;
  border-radius:14px;
  font-size:14px; line-height:1.45;
  opacity:0; transform:translateY(10px) scale(.97);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.msg.show{ opacity:1; transform:none }
.msg p{ margin:0 }

.msg.in{
  background:var(--crema); border:1px solid var(--linea);
  border-bottom-left-radius:4px;
}
.msg.out{
  background:var(--ink); color:var(--crema);
  margin-left:auto;
  border-bottom-right-radius:4px;
}
.msg-hora{
  display:block; font-size:10.5px; margin-top:5px;
  color:var(--ink-sec); text-align:right;
}
.msg.out .msg-hora{ color:var(--ink-claro) }
.check{ color:var(--ambar); font-weight:500 }

/* indicador de escritura */
.msg.typing{
  display:none;
  background:var(--ink);
  width:64px;
  padding:13px 15px;
  margin-left:auto;
  border-bottom-right-radius:4px;
}
.msg.typing.show{ display:flex; gap:5px; opacity:1; transform:none }
.msg.typing span{
  width:7px; height:7px; border-radius:50%;
  background:var(--ink-claro);
  animation:typDot 1.1s ease-in-out infinite;
}
.msg.typing span:nth-child(2){ animation-delay:.18s }
.msg.typing span:nth-child(3){ animation-delay:.36s }

@keyframes typDot{ 0%,60%,100%{ opacity:.35; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }

.chat-pie{
  padding:12px 4px 4px;
  border-top:1px solid var(--linea);
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-sec);
  opacity:0; transition:opacity .6s ease .2s;
}
.chat-pie.show{ opacity:1 }

/* ---------- qué montamos ---------- */

.cards-2{
  display:grid; grid-template-columns:1fr;
  gap:16px; margin-top:36px;
}
.card-dark{
  position:relative;
  border:1px solid var(--linea-dark); border-radius:14px;
  padding:26px 24px;
  overflow:hidden;
  transition:transform .3s var(--ease-out), border-color .3s,
             opacity .6s var(--ease-out);
}
/* la flecha: un filo ámbar que crece al entrar y se aviva al pasar */
.card-dark::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--ambar);
  transform:scaleY(0); transform-origin:top;
  transition:transform .6s var(--ease-out) .25s;
}
.card-dark.visible::before{ transform:scaleY(1) }
.card-dark:hover{ transform:translateY(-4px); border-color:#3A587A }
.card-dark h3{ color:var(--crema) }
.card-dark p{ font-size:15px; color:var(--ink-claro) }

/* ---------- sectores ---------- */

.sectores-cards{ margin-top:36px }
.card-sector{ display:block; text-decoration:none; color:inherit }
.card-destacada{ border-left:3px solid var(--ambar) }
.card-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px;
  font-family:var(--sora); font-weight:600; font-size:14px;
  color:var(--ink);
}
.card-link .arr{
  display:inline-block;
  transition:transform .25s var(--ease-out);
}
.card-sector:hover .card-link .arr{ transform:translateX(5px) }

/* ---------- método ---------- */

.pasos{
  display:grid; grid-template-columns:1fr;
  gap:28px; margin-top:36px;
}
.paso{ position:relative; padding-top:14px }
/* línea ámbar que recorre cada paso al aparecer */
.paso::before{
  content:'';
  position:absolute; top:0; left:0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--ambar) 60%, transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease-out) .2s;
}
.paso.visible::before{ transform:scaleX(1) }
.paso-num{
  font-family:var(--mono); font-size:13px; color:var(--ink-sec);
  margin-bottom:14px;
}
.paso p{ font-size:15px; color:var(--ink-sec) }
/* pasos dentro de banda tinta */
.banda-tinta .paso h3{ color:var(--crema) }
.banda-tinta .paso p, .banda-tinta .paso-num{ color:var(--ink-claro) }

/* ---------- quién ---------- */

.quien-card{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:14px; padding:28px;
  display:flex; flex-direction:column; gap:22px; align-items:flex-start;
}
.quien-simbolo{
  flex:0 0 auto;
  width:64px; height:64px; border-radius:50%;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease-out);
}
.quien-card:hover .quien-simbolo{ transform:rotate(-8deg) scale(1.05) }
.quien-card p{ color:var(--ink-sec) }

/* ---------- contacto ---------- */

.contacto-inner{
  display:grid; grid-template-columns:1fr; gap:40px;
  align-items:start;
}
.contacto-alt{ margin-top:26px; color:var(--ink-claro); font-size:14.5px }
.contacto-alt .mono{ color:var(--crema); font-size:14px }
.contacto-alt em{ font-style:normal; color:var(--ink-claro) }

.form-contacto .campo{ margin-bottom:18px }
.form-contacto label{
  display:block;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-claro); margin-bottom:7px;
}
.form-contacto input,
.form-contacto textarea{
  width:100%;
  background:#1D3C5E;
  border:1px solid var(--linea-dark); border-radius:10px;
  padding:13px 14px;
  font-family:var(--inter); font-size:16px; /* ≥16px evita el zoom de iOS */
  color:var(--crema);
  transition:border-color .2s;
}
.form-contacto input::placeholder,
.form-contacto textarea::placeholder{ color:#6E829B }
.form-contacto input:focus,
.form-contacto textarea:focus{
  outline:2px solid var(--ambar); outline-offset:1px; border-color:transparent;
}
.form-contacto .btn{ margin-top:6px; width:100% }
.form-aviso{ margin-top:14px; color:var(--ambar) }

/* ---------- páginas legales ---------- */

.legal{ padding:56px 0 72px }
.legal h1{
  font-size:clamp(28px, 6.5vw, 40px);
  margin-bottom:6px;
}
.legal-fecha{ color:var(--ink-sec); font-size:12px; margin-bottom:34px }
.legal h2{
  font-size:clamp(18px, 4.5vw, 22px);
  margin:36px 0 10px;
}
.legal p{ margin-bottom:12px; color:var(--ink-sec); max-width:680px }
.legal ul{ margin:0 0 12px 22px; color:var(--ink-sec); max-width:680px }
.legal li{ margin-bottom:6px }
.legal strong{ color:var(--ink) }
.legal a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }

/* ---------- pie ---------- */

.site-footer{
  background:var(--ink); color:var(--crema);
  border-top:1px solid var(--linea-dark);
  padding:48px 0 40px;
}
.footer-inner{ display:flex; flex-direction:column; gap:14px }
.footer-claim{
  font-family:var(--sora); font-weight:600; font-size:16px; margin-top:6px;
}
.footer-meta{ color:var(--ink-claro); letter-spacing:.08em }
.footer-legal{ color:#6E829B; font-size:11.5px }
.footer-legal a{ color:var(--ink-claro); text-decoration:none }
.footer-legal a:hover{ color:var(--crema) }

/* ============================================================
   MOVIMIENTO REDUCIDO — todo visible, nada se mueve
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .intro{ display:none }
  h1 .w, .hero-fade{ animation:none; opacity:1; transform:none }
  .reveal{ opacity:1; transform:none; transition:none }
  .marquee-track{ animation:none }
  .hero-mark{ transition:none }
  .msg, .chat-pie{ opacity:1; transform:none; transition:none }
  .msg.typing{ display:none !important }
  .hl{ background-size:100% 30%; transition:none }
  .card-dark::before{ transform:scaleY(1); transition:none }
  .paso::before{ transform:scaleX(1); transition:none }
  .btn-arrow .arr, .card, .card-dark, .quien-simbolo{ transition:none }
}

/* ============================================================
   TABLET — ≥ 640px
   ============================================================ */

@media (min-width: 640px){
  .wrap{ padding:0 24px }

  .intro-mk{ width:118px; height:118px }

  .logo-link img{ height:32px }
  .header-inner{ padding-top:16px; padding-bottom:16px }

  .hero{ padding:88px 0 76px }
  .hero-sub{ font-size:17.5px }
  .hero-mark{ opacity:.8; width:min(440px, 56vw); right:-90px }

  main section{ padding:76px 0 }

  .marquee{ padding:14px 0 }
  .marquee-seq{ gap:42px; padding-right:42px; font-size:12.5px; letter-spacing:.16em }
  .m-arr{ width:15px; height:15px }

  .cards-3{ grid-template-columns:repeat(2, 1fr); gap:18px }
  .cards-2{ grid-template-columns:1fr 1fr; gap:18px }
  .pasos{ grid-template-columns:repeat(3, 1fr); gap:32px }

  .quien-card{ flex-direction:row; gap:28px; padding:36px }
  .quien-simbolo{ width:72px; height:72px }

  .form-contacto .btn{ width:auto }

  .banda-mark{ width:380px }
}

/* ============================================================
   ESCRITORIO — ≥ 900px
   ============================================================ */

@media (min-width: 900px){
  /* nav completa */
  .header-nav a:not(.btn){ display:inline }
  .header-nav{ gap:26px }

  .hero{ padding:104px 0 96px }
  .hero-mark{ opacity:1; width:min(520px, 52vw) }

  main section{ padding:88px 0 }
  section{ scroll-margin-top:84px }

  .problema-grid{ grid-template-columns:1fr 400px; gap:56px }
  .chat{ justify-self:auto }

  .cards-3{ grid-template-columns:repeat(3, 1fr) }
  .cards-3 .card:last-child{ grid-column:auto }

  .contacto-inner{ grid-template-columns:1fr 1fr; gap:56px }
}

/* ✎ Claude Code · Fable 5 · 2026-07-07 */