/* ===========================================================================
   CARFLEX STUDIO — sitio público

   Mismas fichas que la aplicación (src/app/globals.css), con los mismos
   nombres de rol: quien entra a su cuenta desde aquí no debería sentir que
   cambió de producto.

   OSCURO POR DEFECTO. El bloque [data-theme="light"] es el que redefine.
=========================================================================== */
:root{
  --lienzo:#0E1114; --papel:#12161A; --carta:#161A1F;
  --tinta:#EDF1F5; --suave:#9AA6B2; --linea:#242A31;
  --marca:#FF5A1F; --acento:#FFB020; --metal:#B9C2CC;
  --sombra:rgb(0 0 0 / .6);
  --velo:rgb(14 17 20 / .84);
  --display:"Archivo", ui-sans-serif, system-ui, sans-serif;
  --sans:"Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --r:14px;
  color-scheme:dark;
}
[data-theme="light"]{
  --lienzo:#F4F6F8; --papel:#EDF0F3; --carta:#FFFFFF;
  --tinta:#0E1114; --suave:#4A5560; --linea:#DDE3E9;
  --marca:#E8480F; --acento:#C97A00; --metal:#6E7A87;
  --sombra:rgb(14 17 20 / .14);
  --velo:rgb(244 246 248 / .86);
  color-scheme:light;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--lienzo);color:var(--tinta);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  transition:background-color .3s ease,color .3s ease;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.06;margin:0;letter-spacing:-.02em}
/* El `+` dentro de clamp() EXIGE espacios alrededor. Sin ellos la declaración
   entera se descarta en silencio, sin error en consola, y toda la escala
   tipográfica se cae. */
h1{font-size:clamp(2.6rem, 1.6rem + 3.8vw, 4.8rem)}
h2{font-size:clamp(2rem, 1.4rem + 2.2vw, 3.1rem)}
h3{font-size:1.2rem}
p{margin:0}
em{font-style:normal;color:var(--marca)}

.env{width:min(1160px, 100% - 2.5rem);margin-inline:auto}
.env--angosto{width:min(680px, 100% - 2.5rem)}
.spec{font-family:var(--mono);font-size:.9rem;letter-spacing:-.01em}

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.cab{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);background:var(--velo);
  border-bottom:1px solid transparent;transition:border-color .2s ease}
.cab.is-stuck{border-bottom-color:var(--linea)}
.cab__fila{display:flex;align-items:center;gap:1.5rem;padding-block:.9rem}
.marca img{height:34px;width:auto}
.nav{display:none;gap:1.4rem;font-size:.94rem;margin-right:auto}
.nav a{text-decoration:none;color:var(--suave)}
.nav a:hover{color:var(--tinta)}
.cab__acc{display:flex;align-items:center;gap:.75rem;margin-left:auto}
.nav-acc{display:none;text-decoration:none;font-size:.94rem}
.idioma{display:inline-flex;border:1px solid var(--linea);border-radius:999px;overflow:hidden}
.idioma a{padding:.28rem .6rem;font-size:.78rem;text-decoration:none;color:var(--suave)}
.idioma a[aria-current]{background:var(--marca);color:#fff}
.tema,.menu-btn{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--linea);
  border-radius:10px;background:transparent;color:var(--tinta);cursor:pointer}
.tema svg,.menu-btn svg{width:18px;height:18px}
.tema .luna{display:none}
[data-theme="light"] .tema .luna{display:block}
[data-theme="light"] .tema .sol{display:none}
.menu{display:none;flex-direction:column;gap:.9rem;padding:1rem 0 1.5rem;border-top:1px solid var(--linea)}
.menu.is-open{display:flex}
.menu a{text-decoration:none}
.menu__idioma{display:inline-flex;gap:1rem;font-size:.9rem;color:var(--suave)}
@media (min-width:960px){
  .nav{display:flex}
  .nav-acc{display:inline-flex}
  .menu-btn{display:none}
}

/* ── Botones y adornos ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:10px;font-weight:600;font-size:.98rem;
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:filter .15s ease}
.btn--marca{background:var(--marca);color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255 / .14)}
.btn--marca:hover{filter:brightness(1.08)}
.btn--linea{border-color:var(--linea);color:var(--tinta)}
.btn--linea:hover{border-color:var(--marca)}
.pastilla{display:inline-block;padding:.3rem .8rem;border:1px solid var(--linea);border-radius:999px;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--metal)}
.entrada{margin-top:1.1rem;max-width:60ch;color:var(--suave);font-size:1.06rem}
.nota{margin-top:1rem;color:var(--suave);font-size:.9rem}
.enlace{display:inline-block;margin-top:.8rem;color:var(--marca);font-weight:600;font-size:.95rem}

/* ── Secciones ─────────────────────────────────────────────────────────── */
.sec{padding-block:5.5rem}
.sec--alt{background:var(--papel)}
.hero{padding-block:5rem 4rem}
.hero__rejilla{display:grid;gap:3rem;align-items:center}
@media (min-width:960px){.hero__rejilla{grid-template-columns:1.05fr .95fr}}
.hero__acc{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero__marco{border:1px solid var(--linea);border-radius:var(--r);background:#0A0C0E;
  padding:1.4rem;min-height:320px;display:flex;flex-direction:column;justify-content:space-between}
.marco__ficha{display:flex;flex-wrap:wrap;gap:.6rem}
.marco__ficha .spec{border:1px solid var(--linea);border-radius:8px;padding:.25rem .6rem;color:var(--metal)}
.marco__nota{color:var(--suave);font-size:.92rem}

.rejilla{display:grid;gap:1.2rem;margin-top:2.4rem}
@media (min-width:700px){.rejilla--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:700px){.rejilla--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.rejilla--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:700px){.rejilla--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.rejilla--4{grid-template-columns:repeat(4,1fr)}}

.tarjeta{border:1px solid var(--linea);border-radius:var(--r);background:var(--carta);padding:1.5rem}
.tarjeta h3{margin-bottom:.5rem}
.tarjeta p{color:var(--suave);font-size:.96rem}
.tarjeta--destacada{border-color:var(--marca)}
.paso{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  background:var(--marca);color:#fff;font-weight:700;font-size:.9rem;margin-bottom:.9rem}
.precio{font-family:var(--display);font-size:2rem;font-weight:700;margin:.4rem 0 .6rem;color:var(--tinta)}
.precio span{font-size:.95rem;font-weight:500;color:var(--suave)}

/* ── Formulario ────────────────────────────────────────────────────────── */
.formulario{display:grid;gap:1rem;margin-top:2rem}
.formulario label{display:grid;gap:.4rem;font-size:.9rem;color:var(--suave)}
.formulario input,.formulario select,.formulario textarea{
  width:100%;padding:.8rem 1rem;border:1px solid var(--linea);border-radius:10px;
  background:var(--carta);color:var(--tinta);font:inherit;font-size:.98rem}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{
  outline:none;border-color:var(--marca)}

.cierre{text-align:center;padding-block:5rem 6rem}
.cierre .btn{margin-top:2rem}

/* ── Pie ───────────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--linea);padding-block:3.5rem 2rem;background:var(--papel)}
.pie__rejilla{display:grid;gap:2.2rem}
@media (min-width:820px){.pie__rejilla{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.pie__marca p{margin:.9rem 0;color:var(--suave);font-size:.92rem;max-width:38ch}
.pie__col{display:flex;flex-direction:column;gap:.55rem;font-size:.92rem}
.pie__col h3{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--metal);margin-bottom:.3rem}
.pie__col a{text-decoration:none;color:var(--suave)}
.pie__col a:hover{color:var(--tinta)}
.pie__base{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linea);
  display:grid;gap:.4rem;color:var(--suave);font-size:.84rem}

.legal{padding-block:3.5rem 5rem}
.legal h1{margin-bottom:1.5rem}
.legal h2{font-size:1.4rem;margin:2.2rem 0 .8rem}
.legal p,.legal li{color:var(--suave)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}