/* Mona Sans · latin-ext · OFL */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(fuentes/mona-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Mona Sans · latin · OFL */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(fuentes/mona-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================
   Rename · portada
   =========================================================== */
:root{
  --papel:#FFFFFF;
  --tinta:#0D0D12;
  --violeta:#3A1AC4;
  --violeta-hondo:#2C129C;
  --regla:#E7E4DC;
  --gris:#56525C;
  --apagado:#6B675F;   /* 5,4:1 sobre blanco */
  --error:#B42318;
  --margen:clamp(20px,3.9vw,56px);
  --curva:cubic-bezier(.2,.8,.2,1);
  /* Tipografía de marca: Mona Sans (OFL). Ancha para titulares, normal para texto. */
  --titular:'Mona Sans',system-ui,sans-serif;
  --texto:'Mona Sans',system-ui,sans-serif;
  --radio:22px;
  --radio-campo:12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--papel);color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;line-height:1.45;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-underline-offset:2px}
img,svg{display:block}
:focus-visible{outline:2px solid var(--violeta);outline-offset:3px}

/* ---- membrete ---- */
.membrete{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px var(--margen);
}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca .iso{width:32px;height:32px}
.marca .tipo{width:auto;height:16px}
.accion,.enviar{
  background:var(--violeta);color:#fff;text-decoration:none;
  font:inherit;font-weight:600;border:0;cursor:pointer;
  transition:background-color .18s ease,transform .18s var(--curva);
}
.accion{font-size:14.5px;padding:11px 22px;border-radius:999px}
.accion:hover,.enviar:hover{background:var(--violeta-hondo)}
.accion:active,.enviar:active{transform:translateY(1px)}

/* ---- portada ---- */
.portada{
  position:relative;overflow-x:clip;
  padding:clamp(20px,4vh,48px) var(--margen) 96px;
  display:flex;flex-direction:column;align-items:center;
}
.cabeza{position:relative;z-index:2;text-align:center;width:100%}
h1{
  font-family:var(--titular);
  /* Una sola línea: el tamaño se ajusta al ancho disponible.
     A 100 px de cuerpo la frase mide 25,75 em en Mona Sans ancha. */
  font-size:min(92px,calc((100vw - 2 * var(--margen)) / 26.3));
  white-space:nowrap;
  line-height:1;letter-spacing:-.01em;
  font-weight:800;font-stretch:125%;text-transform:uppercase;
  color:var(--tinta);
}
.entradilla{
  /* mismo ancho que el formulario: empieza y acaba en sus bordes laterales */
  width:100%;max-width:640px;margin:0;
  text-align:justify;text-align-last:left;hyphens:manual;
  font-size:clamp(16px,1.35vw,20px);line-height:1.45;
  font-weight:500;font-stretch:112%;color:var(--gris);text-wrap:pretty;
}

/* ---- portada: teléfono que gira + formulario ---- */
.portada-fila{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,640px);
  justify-content:center;align-items:end;gap:clamp(28px,4vw,64px);
  margin-top:clamp(22px,3.4vh,40px);
}
.portada-form{min-width:0}
.portada-form .solicitud{margin-top:clamp(16px,2.4vh,24px)}
.telefono{position:relative;margin:0;display:flex;justify-content:center;align-self:center}
.telefono img,.telefono canvas{
  display:block;height:clamp(420px,62vh,580px);width:auto;aspect-ratio:438/920;
}
.telefono canvas[hidden],.telefono img[hidden]{display:none}
/* sombra de contacto: los fotogramas no la traen */
.telefono::after{
  content:"";position:absolute;z-index:-1;left:18%;right:18%;bottom:-6px;height:28px;
  background:radial-gradient(ellipse at center,rgba(42,16,150,.28),transparent 70%);
  filter:blur(6px);
}

/* ---- el vinilo: esquina derecha, recortado por el borde ---- */
.vinilo{
  --d:clamp(300px,44vw,660px);
  position:absolute;z-index:0;
  width:var(--d);height:var(--d);
  right:calc(var(--d) * -.46);top:clamp(120px,24vh,230px);
  border-radius:50%;
  filter:drop-shadow(0 40px 50px rgba(42,16,150,.28)) drop-shadow(0 10px 14px rgba(13,13,18,.14));
  animation:aparecer-vinilo 1.1s var(--curva) both;
}
.disco{width:100%;height:100%}
.giro{transform-box:view-box;transform-origin:0 0}
/* luz fija sobre el disco que gira: es lo que lo hace parecer de vinilo */
.brillo{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    conic-gradient(from 18deg,
      transparent 0 6%, rgba(255,255,255,.17) 11%, transparent 17% 50%,
      rgba(255,255,255,.12) 61%, transparent 67%),
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.14), transparent 46%);
  mix-blend-mode:screen;
}
@keyframes aparecer-vinilo{
  from{opacity:0;transform:translateX(12%) rotate(24deg)}
  to{opacity:1;transform:none}
}

/* ---- solicitud ---- */
.solicitud{
  position:relative;z-index:2;
  width:100%;max-width:640px;margin-top:clamp(24px,3.6vh,40px);
  perspective:1400px;
  animation:subir .9s .15s var(--curva) both;
}
.panel{
  background:#fff;
  border:1px solid rgba(13,13,18,.07);border-radius:var(--radio);
  padding:28px 30px 22px;
  box-shadow:
    0 1px 0 rgba(13,13,18,.04),
    0 18px 40px -18px rgba(13,13,18,.22),
    0 50px 90px -40px rgba(42,16,150,.30);
  transition:transform .5s var(--curva),box-shadow .5s var(--curva);
}
.panel:focus-within{
  box-shadow:
    0 1px 0 rgba(13,13,18,.04),
    0 24px 48px -18px rgba(13,13,18,.26),
    0 64px 110px -40px rgba(42,16,150,.40);
}
/* solo desplazamiento: si la animación no llega a correr, el formulario se ve igual */
@keyframes subir{from{transform:translateY(36px)}to{transform:none}}
@keyframes subir-campo{from{transform:translateY(14px)}to{transform:none}}

.rotulo{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--tinta);margin-bottom:18px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.campo{
  position:relative;display:flex;flex-direction:column;gap:7px;min-width:0;
  animation:subir-campo .6s var(--curva) both;
}
.campo:nth-child(1){animation-delay:.32s}.campo:nth-child(2){animation-delay:.38s}
.campo:nth-child(3){animation-delay:.44s}.campo:nth-child(4){animation-delay:.50s}
.campo:nth-child(5){animation-delay:.56s}.campo:nth-child(6){animation-delay:.62s}
.campo > span{font-size:13px;font-weight:600;color:var(--gris)}
.campo input,.campo select{
  width:100%;height:50px;border:1px solid #E2E0E8;border-radius:var(--radio-campo);
  background:#F8F8FA;font:inherit;font-size:16px;color:var(--tinta);padding:0 15px;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.campo input:hover,.campo select:hover{border-color:#C9C6D3}
.campo input:focus,.campo select:focus{
  outline:0;background:#fff;border-color:var(--violeta);
  box-shadow:0 0 0 4px rgba(58,26,196,.14);
}
.campo select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background:#F8F8FA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230D0D12' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.campo select:focus{background-color:#fff}
.campo select:invalid{color:#8C8880}
.campo input::placeholder{color:#A3A0AA}
.campo [aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 4px rgba(180,35,24,.12)}
.campo:focus-within > span{color:var(--violeta)}
.consentimiento{display:flex;gap:10px;align-items:center;margin-top:18px;font-size:14px;color:var(--gris)}
.consentimiento input{width:18px;height:18px;border-radius:5px;accent-color:var(--violeta);flex:none}
.consentimiento input[aria-invalid="true"]{outline:2px solid var(--error);outline-offset:2px}
.enviar{
  position:relative;overflow:hidden;
  margin-top:18px;width:100%;height:54px;font-size:16.5px;border-radius:var(--radio-campo);
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.enviar::after{
  content:"→";display:inline-block;transition:transform .25s var(--curva);
}
.enviar:hover::after{transform:translateX(4px)}
.enviar[disabled]{cursor:progress;opacity:.72}
.enviar[disabled]::after{content:none}
#aviso-formulario{margin-top:10px!important}
.estado{padding:18px 0 8px;text-align:center}
.estado-titulo{font-size:32px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.estado:focus{outline:0}

/* ===========================================================
   Recorrido del software
   Un solo escenario fijo: los textos pasan, la imagen se funde con
   la siguiente y el fondo cambia de color poco a poco.
   =========================================================== */
.recorrido{
  --fondo:#FFFFFF;
  /* arranca en el blanco de la portada y se funde con el color del paso */
  background:linear-gradient(to bottom,#FFFFFF 0,var(--fondo) min(36vh,320px)) var(--fondo);
  color:var(--tinta);
  padding:clamp(72px,10vw,140px) 0 clamp(60px,8vw,120px);
  transition:color .4s ease;
}
.recorrido.oscuro{color:#fff}
.recorrido-cabeza{text-align:center;padding:0 var(--margen);margin-bottom:clamp(20px,4vw,48px)}
.recorrido-cabeza h2{
  font-size:clamp(30px,4.2vw,58px);line-height:1;letter-spacing:-.01em;
  font-weight:800;font-stretch:125%;text-transform:uppercase;text-wrap:balance;
}
.recorrido-cabeza p{
  margin-top:16px;
  font-size:clamp(16px,1.35vw,20px);font-weight:500;font-stretch:112%;color:var(--gris);text-wrap:balance;
}

/* sin script: pasos apilados, cada uno con su imagen */
.recorrido-cuerpo{max-width:1280px;margin:0 auto;padding:0 var(--margen)}
.pasos{list-style:none}
.paso{padding:clamp(40px,6vw,72px) 0}
.paso-texto{width:fit-content;max-width:100%}
.paso h3{
  font-size:clamp(26px,2.6vw,40px);line-height:1.04;letter-spacing:-.02em;
  font-weight:780;font-stretch:115%;text-wrap:balance;max-width:14ch;
}
/* la frase nunca es más ancha que el título */
.paso-texto p{contain:inline-size;margin-top:12px;font-size:clamp(16px,1.3vw,19px);font-weight:500;color:var(--gris);transition:color .4s ease}
.recorrido.oscuro .paso-texto p{color:rgba(255,255,255,.72)}
.lamina{margin:28px 0 0}
.escenario{display:none}

.lamina img{
  display:block;width:100%;height:auto;border-radius:16px;
  box-shadow:0 40px 80px -30px rgba(13,13,18,.55),0 0 0 1px rgba(13,13,18,.06);
}
.lamina-media img{width:86%;margin-left:auto}
/* Mac + iPhone con fondo transparente: solo una sombra suave bajo los aparatos */
.lamina-foto img,.con-escenario .escenario-fijo .lamina-foto img{
  border-radius:0;box-shadow:none;
  filter:drop-shadow(0 28px 34px rgba(42,16,150,.16));
}
/* el iPhone del vídeo: mismo fondo que la sección, sin recuadro */
.lamina-video{display:flex;justify-content:center}
.lamina-video video{
  display:block;width:min(78%,380px);height:auto;background:#F3F3F8;
  /* bordes difuminados: el fondo del vídeo se funde con el de la sección */
  /* el teléfono ocupa del 26 % al 74 % de ancho y del 8 % al 96 % de alto */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 20%,#000 80%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 97%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 20%,#000 80%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 97%,transparent);
  mask-composite:intersect;
}
.con-escenario .escenario-fijo .lamina-video video{width:auto;height:100%;max-width:100%}
.con-escenario .paso.paso-video{min-height:180vh}
.lamina-movil{display:flex;justify-content:center}
.lamina-movil img{
  width:min(52%,300px);border-radius:34px;
  box-shadow:0 40px 80px -24px rgba(0,0,0,.6),0 0 0 7px #0D0D12,0 0 0 8px rgba(255,255,255,.22);
}
.lamina-fiscal{
  background:#fff;color:var(--tinta);border-radius:22px;
  padding:clamp(22px,3vw,40px);max-width:520px;margin-left:auto;margin-right:auto;
  box-shadow:0 40px 80px -36px rgba(42,16,150,.45);
}
.fiscal div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid #E6E3EE}
.fiscal div:first-child{padding-top:0}
.fiscal dt{font-size:17px;font-weight:600}
.fiscal dd{font-size:17px;font-weight:750;font-stretch:112%;color:var(--violeta);white-space:nowrap}
.lamina-fiscal figcaption{margin-top:14px;font-size:12.5px;color:var(--apagado)}

/* con script: escenario fijo a la derecha, pasos a la izquierda */
.con-escenario .recorrido-cuerpo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(32px,5vw,80px)}
.con-escenario .escenario{display:block;grid-column:2;grid-row:1}
.con-escenario .pasos{grid-column:1;grid-row:1}
.con-escenario .paso{min-height:88vh;display:flex;align-items:center;padding:0}
.con-escenario .paso-texto{opacity:var(--foco,1);transform:translateY(calc((1 - var(--foco,1)) * 18px))}
.escenario-fijo{
  position:sticky;top:calc(50vh - min(32vh,300px));
  height:min(64vh,600px);
}
.con-escenario .escenario-fijo .lamina{
  position:absolute;inset:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  opacity:var(--ver,0);
  transform:translate3d(0,var(--y,0px),0) scale(var(--escala,1));
  will-change:opacity,transform;
}
.con-escenario .escenario-fijo .lamina img{max-height:100%;width:auto;max-width:100%}
.con-escenario .escenario-fijo .lamina-movil img{height:100%;width:auto;max-width:none}
.con-escenario .escenario-fijo .lamina-fiscal{
  inset:auto 0;top:50%;translate:0 -50%;width:min(100%,500px);margin:0 auto;
  flex-direction:column;align-items:stretch;
}
.lamina-fiscal .fiscal{width:100%}

@media (max-width:900px){
  /* móvil: cada imagen bajo su texto; el fondo se mezcla igual */
  .paso{padding:44px 0}
  .paso h3{max-width:18ch}
  .lamina-movil img{width:min(64%,260px)}
  .lamina-video video{width:min(100%,440px)}
}


/* ===========================================================
   Cierre y pie
   =========================================================== */
/* el cierre arranca en el lila del último iMac y se aclara hacia el pie */
.cierre{
  background:linear-gradient(to bottom,#ECEBFC,#F3F3F8 70%);
  padding:clamp(40px,6vw,88px) var(--margen) clamp(48px,6vw,80px);
}
.cierre-panel{
  max-width:1060px;margin:0 auto;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(20px,3vw,40px);
  background:var(--violeta);color:#fff;border-radius:28px;
  padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,40px) clamp(22px,2.6vw,32px) clamp(22px,2.6vw,32px);
  box-shadow:0 30px 60px -30px rgba(42,16,150,.55);
}
.cierre-disco{
  width:clamp(72px,8vw,104px);height:auto;display:block;
  animation:girar-cierre 14s linear infinite;
}
@keyframes girar-cierre{from{rotate:0deg}to{rotate:-360deg}}
.cierre h2{
  font-size:clamp(24px,2.7vw,38px);line-height:1;letter-spacing:-.01em;
  font-weight:800;font-stretch:125%;text-transform:uppercase;text-wrap:balance;
}
.cierre-boton{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:#fff;color:var(--violeta);text-decoration:none;
  font-weight:650;font-size:16.5px;height:54px;padding:0 26px;border-radius:999px;
  transition:transform .2s var(--curva),box-shadow .2s var(--curva);
}
.cierre-boton::after{content:"→";transition:transform .25s var(--curva)}
.cierre-boton:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(13,13,18,.5)}
.cierre-boton:hover::after{transform:translateX(4px)}
.cierre-boton:focus-visible{outline:2px solid #fff;outline-offset:4px}

.pie{background:#F3F3F8;padding:0 var(--margen) 40px}
.pie-fila{
  max-width:1280px;margin:0 auto;padding-top:28px;border-top:1px solid #E2E0E8;
  display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;
}
.pie-marca{display:flex;align-items:center;gap:11px}
.pie-marca img:first-child{width:28px;height:28px}
.pie-marca img:last-child{height:15px;width:auto}
.pie-enlaces{display:flex;gap:8px 28px;flex-wrap:wrap}
.pie-enlaces a,.pie-correo{font-size:14.5px;font-weight:500;color:var(--gris);text-decoration:none}
.pie-enlaces a:hover,.pie-correo:hover{color:var(--violeta);text-decoration:underline}
.pie-redes{display:flex;align-items:center;gap:20px}
.pie-red{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--gris);text-decoration:none}
.pie-red svg{width:18px;height:18px;fill:currentColor}
.pie-red:hover{color:var(--violeta)}
.pie-nota{max-width:1280px;margin:18px auto 0;font-size:13px;color:var(--apagado)}

@media (max-width:760px){
  .cierre-panel{grid-template-columns:1fr;justify-items:center;text-align:center;padding:32px 24px 28px}
  .pie-fila{flex-direction:column;align-items:flex-start}
}

/* ---- intermedio: el vinilo se retira para no pisar el formulario ---- */
@media (max-width:1180px){
  .vinilo{--d:clamp(300px,40vw,480px);right:calc(var(--d) * -.5)}
  .portada-fila{grid-template-columns:minmax(0,240px) minmax(0,600px)}
  .telefono img,.telefono canvas{height:clamp(380px,52vh,500px)}
}

/* ---- móvil: el vinilo asoma por la esquina superior ---- */
@media (max-width:760px){
  h1{white-space:normal;font-size:clamp(34px,10.4vw,46px);line-height:1.02;text-wrap:balance}
  .portada{padding-top:150px;padding-bottom:64px}
  .vinilo{--d:160px;top:-6px;right:-56px}
  .panel{padding:22px 18px 18px;--radio:18px}
  /* móvil: frase, teléfono asomando y el formulario por encima de su parte baja */
  .portada-fila{grid-template-columns:1fr;gap:0;margin-top:16px}
  .portada-form{display:contents}
  .entradilla{order:1}
  .telefono{order:2;margin-top:22px}
  .telefono img,.telefono canvas{height:300px}
  .telefono::after{display:none}
  .portada-form .solicitud{order:3;margin-top:-120px;position:relative;z-index:3}
}
@media (max-width:520px){
  .campos{grid-template-columns:1fr}
  .campo > span{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}