/*
Theme Name: ApplyLab
Description: Tema propio para applylab.com.ar, migrado desde Hostinger AI Builder. Editable 100% en HTML/PHP/CSS, sin builders ni créditos.
Author: ApplyLab
Version: 1.0
Text Domain: applylab
*/

/* ============================================================
   Tokens de diseño reales (extraídos de index-xxf7cIHi.css)
   ============================================================ */

:root{
  --background: 210 40% 98%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 221 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 214 32% 94%;
  --secondary-foreground: 222 47% 11%;
  --muted: 214 32% 94%;
  --muted-foreground: 215 16% 42%;
  --accent: 221 100% 50%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 214 28% 88%;
  --input: 214 28% 88%;
  --ring: 221 100% 50%;
  --radius: .75rem;
}

.dark{
  --background: 222 47% 8%;
  --foreground: 210 40% 98%;
  --card: 222 40% 12%;
  --card-foreground: 210 40% 98%;
  --primary: 221 100% 56%;
  --primary-foreground: 0 0% 100%;
  --secondary: 222 30% 16%;
  --secondary-foreground: 210 40% 98%;
  --muted: 222 30% 16%;
  --muted-foreground: 215 16% 65%;
  --border: 222 25% 20%;
  --input: 222 25% 20%;
  --ring: 221 100% 56%;
}

body{
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
.font-display{ font-family: 'Plus Jakarta Sans', sans-serif; }

/* ---------- Fondos de sección ---------- */
.bg-tech-hero{
  background-color: hsl(var(--background));
  background-image:
    radial-gradient(ellipse 80% 50% at 90% 10%, hsl(var(--primary) / .12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 10% 80%, hsl(221 100% 60% / .08), transparent 50%),
    linear-gradient(to right, hsl(var(--foreground) / .035) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--foreground) / .035) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
}

.bg-tech-deep{
  background-color: #004ef5;
  background-image:
    radial-gradient(ellipse 70% 50% at 100% 0%, hsl(210 100% 70% / .35), transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 100%, hsl(230 100% 30% / .4), transparent 50%);
}

/* ---------- Botones ---------- */
.btn-primary-tech{
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  transition: opacity .2s ease, transform .15s ease;
}
.btn-primary-tech:hover{ opacity: .92; }
.btn-primary-tech:active{ transform: scale(.98); }

.btn-ghost-tech{
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card) / .6);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.btn-ghost-tech:hover{ border-color: hsl(var(--primary) / .45); background: hsl(var(--secondary)); }
.btn-ghost-tech:active{ transform: scale(.98); }

/* ---------- Tarjetas / paneles ---------- */
.panel-tech{
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: 0 1px 2px #0f17290a, 0 8px 24px #0051ff0a;
}

/* ---------- Marquee infinito ---------- */
@keyframes marquee{
  0%{ transform: translate(0); }
  to{ transform: translate(-50%); }
}
.animate-marquee{ animation: marquee 32s linear infinite; }

@media (prefers-reduced-motion: reduce){
  .animate-marquee{ animation: none; }
}

/* ---------- Revelado al hacer scroll ---------- */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Mensajes del formulario de contacto ---------- */
.form-msg{
  border-radius: calc(var(--radius) - 2px);
  padding: .875rem 1.125rem;
  font-size: .95rem;
  margin-bottom: 1.25rem;
}
.form-msg.success{ background: hsl(142 71% 45% / .12); color: hsl(142 60% 25%); border: 1px solid hsl(142 71% 45% / .3); }
.form-msg.error{ background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); border: 1px solid hsl(var(--destructive) / .3); }

.wpcf7 label{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:hsl(var(--muted-foreground)); display:block; margin-bottom:.5rem; }
.applylab-input{ width:100%; border-radius:.5rem; border:1px solid hsl(var(--border)); background:hsl(var(--background)); padding:.75rem .875rem; font-size:1rem; outline:none; transition:border-color .2s; }
.applylab-input:focus{ border-color:hsl(var(--primary)); box-shadow:0 0 0 3px hsl(var(--primary)/.2); }
.wpcf7-form-control.wpcf7-submit{
  display:flex; align-items:center; justify-content:center; width:100%;
  height:3rem; margin-top:2rem; font-size:.875rem; font-weight:600;
  border-radius:calc(var(--radius) - 2px); background:hsl(var(--primary));
  color:hsl(var(--primary-foreground)); border:none; cursor:pointer;
  transition:opacity .2s;
}
.wpcf7-form-control.wpcf7-submit:hover{ opacity:.92; }
.wpcf7-response-output{ border-radius:calc(var(--radius) - 2px); padding:.875rem 1.125rem; font-size:.95rem; margin-top:1.25rem; }
.wpcf7 form.sent .wpcf7-response-output{ background:hsl(142 71% 45% / .12); color:hsl(142 60% 25%); border:1px solid hsl(142 71% 45% / .3); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output{ background:hsl(var(--destructive)/.1); color:hsl(var(--destructive)); border:1px solid hsl(var(--destructive)/.3); }