/* ===========================================================================
   Usijali — custom.css
   Carga DESPUÉS de Tailwind. Aquí vive lo que Tailwind no resuelve bien:
   la animación del logotipo, el fondo del hero y los componentes propios.

   El sitio son dos pantallas: la portada (solo el logotipo) y contacto. Este
   archivo se recortó a lo que de verdad se usa.

   Decisiones tomadas y por qué:
   - El logotipo se revela con un barrido de izquierda a derecha (clip-path),
     no con un "dibujado" de trazo: el logo vectorizado son 19 rellenos, no
     líneas, y stroke-dasharray sobre rellenos no escribe, hace parpadear
     contornos. El barrido sí lee como caligrafía.
   - El brillo posterior va con mask del propio SVG para que no se salga de la
     forma de las letras. mix-blend-mode sobre transparencia daba halos grises.
   - Ningún componente de aquí fija `display` si en el HTML se usa una utilidad
     responsiva de Tailwind: este archivo carga después y ganaría.
   - Todo lo animado respeta prefers-reduced-motion.
   =========================================================================== */

/* --------------------------------------------------------------- tipografías
   Variables de Google Fonts servidas desde el propio dominio. Los rangos
   unicode son los de Google: el navegador solo baja latin-ext si hace falta. */
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url('/assets/fonts/outfit-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;
}
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url('/assets/fonts/outfit-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Sans'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/assets/fonts/dmsans-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;
}
@font-face{
  font-family:'DM Sans'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/assets/fonts/dmsans-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --marino:#0A1734;
  --tinta:#0F2551;
  --azul-900:#062A6B;
  --azul-700:#0B47B0;
  --azul-600:#0F5CD6;
  --azul-500:#0175EA;
  --azul-400:#01A1FF;
  --azul-300:#4CC3FF;
  --azul-100:#E4F2FF;
  --humo:#F6F9FF;
  --linea:#E3EBF7;
  --tenue:#5A6B8C;
  --panel:#FFFFFF;
  --cabecera-alto:72px;
}

*{ -webkit-tap-highlight-color: transparent; }
[hidden]{ display:none !important; }
body{ overflow-x:hidden; }

::selection{ background:#A8DEFF; color:var(--azul-900); }

h1,h2,h3,.font-display{ font-family:'Outfit',system-ui,sans-serif; letter-spacing:-.022em; }

/* Protección de imágenes: ni arrastre ni copia (también en móvil) */
img, svg, .marca-svg{
  -webkit-user-drag:none; user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none; pointer-events:none;
}
a img, a svg, button svg{ pointer-events:none; }

.salto-contenido{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--azul-600); color:#fff; padding:12px 18px; border-radius:0 0 12px 0;
  font-weight:600;
}
.salto-contenido:focus{ left:0; }

/* ---------------------------------------------------------------- cabecera */
.cabecera{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--linea), 0 8px 28px -20px rgba(10,23,52,.45);
}
.marca-mini img{ height:30px; width:auto; display:block; }
@media (min-width:640px){ .marca-mini img{ height:34px; } }

.nav-enlace{
  padding:9px 14px; border-radius:10px;
  font-size:14.5px; font-weight:600; color:var(--tinta);
  transition:color .2s ease, background .2s ease;
}
.nav-enlace:hover{ color:var(--azul-600); background:rgba(15,92,214,.06); }

/* ----------------------------------------------------------------- botones */
.btn{
  /* Sin display: lo pone Tailwind (inline-flex en el HTML). Si se fijara aquí,
     custom.css carga después y ganaría a las utilidades responsivas. */
  align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; border-radius:14px;
  font-family:'Outfit',system-ui,sans-serif; font-size:15.5px; font-weight:600;
  letter-spacing:-.01em; line-height:1; white-space:nowrap;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn .ico{ width:17px; height:17px; }

.btn-primario{
  color:#fff; background:linear-gradient(135deg,var(--azul-600),var(--azul-400));
  box-shadow:0 10px 26px -12px rgba(1,117,234,.85);
}
.btn-primario:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(1,117,234,.95); }
.btn-primario:active{ transform:translateY(0); }

.btn-claro{
  color:var(--tinta); background:#fff; border:1px solid var(--linea);
  box-shadow:0 6px 18px -12px rgba(10,23,52,.4);
}
.btn-claro:hover{ transform:translateY(-2px); border-color:#C9DBF5; color:var(--azul-600); }

.btn[disabled]{ opacity:.65; cursor:not-allowed; transform:none !important; }

.ico{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

.girando{ animation:gira .9s linear infinite; }
@keyframes gira{ to{ transform:rotate(360deg); } }

/* -------------------------------------------------------------------- hero */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:grid; place-items:center;
  padding:60px 20px 90px;
  overflow:hidden;
}
@media (orientation:landscape) and (max-height:560px){
  /* Móvil de lado: cabe todo en una pantalla. El padding de abajo tiene que
     dejar libre la franja donde va la línea de copyright, que está posicionada
     contra el fondo del documento: con menos, el botón se le encimaba. */
  .hero{ padding:34px 20px 84px; }
  .hero-acciones{ margin-top:26px; }
}

.hero-fondo{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:#fff; }

.hero-fondo .aurora{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.62;
  will-change:transform;
}
.aurora-1{
  width:56vw; height:56vw; min-width:420px; min-height:420px;
  left:-14vw; top:-16vw;
  background:radial-gradient(circle at 40% 40%, rgba(1,161,255,.75), rgba(1,161,255,0) 68%);
  animation:flota-1 22s ease-in-out infinite;
}
.aurora-2{
  width:52vw; height:52vw; min-width:380px; min-height:380px;
  right:-12vw; top:-8vw;
  background:radial-gradient(circle at 55% 45%, rgba(11,71,176,.55), rgba(11,71,176,0) 68%);
  animation:flota-2 26s ease-in-out infinite;
}
.aurora-3{
  width:60vw; height:44vw; min-width:420px; min-height:320px;
  left:22vw; bottom:-22vw;
  background:radial-gradient(circle at 50% 50%, rgba(76,195,255,.6), rgba(76,195,255,0) 70%);
  animation:flota-3 30s ease-in-out infinite;
}
@keyframes flota-1{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(7vw,5vw,0) scale(1.12); } }
@keyframes flota-2{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-6vw,7vw,0) scale(1.1); } }
@keyframes flota-3{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-8vw,-6vw,0) scale(1.14); } }

/* Retícula muy tenue, para que el blanco no quede plano */
.hero-fondo .malla{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(10,23,52,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,23,52,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 75% 60% at 50% 45%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 45%, #000 25%, transparent 78%);
}
.hero-fondo .velo{
  position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(to bottom, rgba(246,249,255,0), var(--humo));
}

/* Chispas: cuatro puntos que suben despacio. Movimiento suficiente sin canvas. */
.chispa{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--azul-400); opacity:0; filter:blur(.4px);
  animation:sube 14s linear infinite;
}
.chispa:nth-child(1){ left:14%; animation-delay:0s;   }
.chispa:nth-child(2){ left:34%; animation-delay:3.5s; width:4px; height:4px; }
.chispa:nth-child(3){ left:68%; animation-delay:7s;   }
.chispa:nth-child(4){ left:86%; animation-delay:10.5s; width:4px; height:4px; }
@keyframes sube{
  0%   { transform:translateY(102vh) scale(.6); opacity:0; }
  12%  { opacity:.55; }
  85%  { opacity:.35; }
  100% { transform:translateY(-12vh) scale(1); opacity:0; }
}

/* --------------------------------------------------------- logotipo animado */
.marca-hero{
  position:relative;
  width:min(760px, 82vw);
  margin-inline:auto;
  animation:marca-flota 7s ease-in-out 2.6s infinite;
}
@media (orientation:landscape) and (max-height:560px){
  /* Móvil de lado: el logotipo se reduce para que el botón quepa sin scroll. */
  .marca-hero{ width:min(300px, 36vw); }
}

.marca-lienzo{
  position:relative;
  clip-path:inset(0 100% 0 0);
  animation:marca-escribe 2.1s cubic-bezier(.62,.02,.16,1) .35s forwards;
}
@keyframes marca-escribe{ to{ clip-path:inset(0 -2% 0 0); } }

.marca-svg{ display:block; width:100%; height:auto; }

/* La punta luminosa que "escribe": viaja con el mismo tiempo que el barrido */
.marca-punta{
  position:absolute; top:50%; left:0; width:80px; height:80px;
  margin:-40px 0 0 -40px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(76,195,255,.85), rgba(1,161,255,.35) 42%, transparent 70%);
  opacity:0;
  animation:marca-punta 2.1s cubic-bezier(.62,.02,.16,1) .35s forwards;
}
@keyframes marca-punta{
  0%   { left:0;    opacity:0; }
  10%  { opacity:1; }
  85%  { opacity:1; }
  100% { left:100%; opacity:0; }
}

/* Brillo que recorre las letras, recortado con la forma del propio logotipo */
.marca-brillo{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 42%, rgba(255,255,255,.62) 50%, transparent 58%);
  background-size:260% 100%; background-position:180% 0;
  -webkit-mask:url('/assets/img/usijali-logo.svg') center/contain no-repeat;
          mask:url('/assets/img/usijali-logo.svg') center/contain no-repeat;
  animation:marca-brillo 7s ease-in-out 2.9s infinite;
}
@keyframes marca-brillo{
  0%   { background-position:180% 0; }
  38%  { background-position:-80% 0; }
  100% { background-position:-80% 0; }
}

@keyframes marca-flota{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-9px); }
}

/* Sombra suave bajo el logotipo, para que no flote sobre la nada */
.marca-piso{
  width:min(480px,52vw); height:26px; margin:6px auto 0;
  background:radial-gradient(ellipse at center, rgba(11,71,176,.22), transparent 70%);
  filter:blur(9px); opacity:0;
  animation:aparece .9s ease 2.2s forwards, piso-late 7s ease-in-out 2.6s infinite;
}
@media (orientation:landscape) and (max-height:560px){
  .marca-piso{ width:min(240px,30vw); height:16px; }
}
@keyframes piso-late{ 0%,100%{ transform:scaleX(1); opacity:.9; } 50%{ transform:scaleX(.9); opacity:.6; } }

.hero-acciones{ opacity:0; animation:sube-entra .8s cubic-bezier(.2,.7,.3,1) 2.3s forwards; }
@keyframes sube-entra{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes aparece{ to{ opacity:1; } }

/* ------------------------------------------------------------- tipografías */
.titulo-seccion{
  font-size:clamp(30px, 4.6vw, 44px); font-weight:700; line-height:1.08; color:var(--marino);
}
.entradilla{ font-size:clamp(16px,1.6vw,18px); line-height:1.65; color:var(--tenue); }

/* --------------------------------------------------------------- formulario */
.campo{ display:flex; flex-direction:column; gap:8px; }
.campo-et{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tenue);
}
.campo-in{
  width:100%; min-height:58px; padding:16px 18px;
  border:1.5px solid var(--linea); border-radius:14px; background:#fff;
  font-family:'DM Sans',system-ui,sans-serif; font-size:16px; font-weight:600; color:var(--marino);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.campo-in::placeholder{ color:#9AAAC4; font-weight:400; }
.campo-in:focus{
  outline:none; border-color:var(--azul-500); background:#fff;
  box-shadow:0 0 0 4px rgba(1,117,234,.14);
}
textarea.campo-in{ min-height:150px; resize:vertical; line-height:1.6; }
.campo-mal{ font-size:13.5px; font-weight:600; color:#C22B2B; }
.campo.tiene-error .campo-in{ border-color:#E08585; background:#FFF4F4; }

/* honeypot: fuera de pantalla, nunca display:none (los bots lo detectan) */
.trampa{ position:absolute; left:-9999px; top:0; width:1px; height:1px; opacity:0; }

.aviso{ gap:12px; padding:18px 20px; border-radius:14px; font-size:15px; line-height:1.55; }
.aviso .ico{ flex:none; margin-top:2px; }
.aviso:not([hidden]){ display:flex; }
.aviso-ok{ background:#EAF9F0; color:#14663C; border:1px solid #BEE7CF; }
.aviso-mal{ background:#FDF1F1; color:#992222; border:1px solid #F2C9C9; }

.dato-contacto{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--linea); }
.dato-contacto:last-child{ border-bottom:0; }
.dato-contacto .caja-ico{
  display:grid; place-content:center; flex:none; width:46px; height:46px; border-radius:13px;
  background:var(--azul-100); color:var(--azul-700);
}
.dato-contacto dt{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tenue); }
.dato-contacto dd{ font-size:16px; font-weight:600; color:var(--marino); margin-top:3px; }
.dato-contacto a{ color:inherit; }
.dato-contacto a:hover{ color:var(--azul-600); }

/* ---------------------------------------------------------------------- pie */
.pie{ background:#fff; border-top:1px solid var(--linea); }
.pie-marca{ height:32px; width:auto; }

/* En la portada no hay pie: solo esta línea, pegada al fondo de la pantalla. */
.pie-minimo{
  position:absolute; left:0; right:0; bottom:22px;
  text-align:center; font-size:12.5px; color:var(--tenue);
  opacity:0; animation:aparece 1s ease 3.1s forwards;
}

/* ----------------------------------------------------- movimiento reducido */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .marca-lienzo{ clip-path:none; }
  .marca-punta, .marca-brillo, .chispa{ display:none; }
  .hero-acciones, .marca-piso, .pie-minimo{ opacity:1; }
}