/* ============================================================================
   LANDING ALLIA — BLOQUES NUEVOS (el estudio · clientes · contacto · pie)
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de landing.css y usa sus mismas variables de tema
   (--bg, --txt, --parrafo, --fraunces, --acento, --linea).
   Acá solo se suman las variables nuevas del formulario.
   Mismo criterio: cada bloque con su título y sus 🔧 PERILLAS.
   ============================================================================ */

/* ================= VARIABLES NUEVAS POR TEMA ================= */
[data-theme="dark"] {
  --campo:       rgba(109, 140, 255, 0.06);   /* fondo de los campos */
  --campo-borde: #232c5e;
  --campo-foco:  #6d8cff;
  --boton:       #2e51fa;
  --error:       #ff8a9a;
}
[data-theme="light"] {
  --campo:       #ffffff;
  --campo-borde: #d3d9ea;
  --campo-foco:  #2e51fa;
  --boton:       #2e51fa;
  --error:       #d6334a;
}

/* Desplazamiento suave al tocar los links de la nav (#identidad, #contacto…) */
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
a { text-decoration: none; }

/* Mismo ancho y márgenes que .page de landing.css */
.wrap {
  max-width: 1680px;
  margin: 0 auto;
  padding-inline: clamp(18px, 5vw, 90px);
}

/* Links de la nav inferior del hero (ahora son links reales) */
.nav-links a, .nav-mobile a { color: inherit; transition: color .2s ease; }
.nav-links a:hover, .nav-mobile a:hover { color: var(--txt); }
a.cta { cursor: pointer; }
.cta .ar { transition: width .3s ease; }
a.cta:hover .ar { width: 46px; }

/* ============================================================================
   ★ BLOQUES NUEVOS — estructura común
   Cada bloque es una "sección" con línea superior, overline y contenido.
   🔧 PERILLA: --aire-seccion = espacio vertical de cada bloque.
   ============================================================================ */
.seccion {
  --aire-seccion: clamp(80px, 11vw, 170px);
  padding-block: var(--aire-seccion);
  border-top: 1px solid var(--linea);
}
.seccion .overline { margin-bottom: clamp(36px, 5vw, 64px); }

/* Título grande en Montserrat liviana, como el heading del hero */
.titulo-xl {
  margin: 0; font-weight: 400; text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 54px);         /* 🔧 PERILLA: tamaño */
  line-height: 1.06; letter-spacing: .01em; color: var(--txt);
}
/* Palabra destacada: mismo violeta que el título del hero */
.titulo-xl em { font-style: normal; color: #b18cff; }
[data-theme="light"] .titulo-xl em { color: #8300ea; }

/* Párrafo grande para presentaciones */
.lead {
  margin: 0; font-size: clamp(16px, 1.35vw, 21px);   /* 🔧 PERILLA */
  line-height: 1.55; font-weight: 500; color: var(--parrafo);
}

/* Link con flecha (mismo lenguaje que "ACTIVAMOS IDEAS") */
.link-flecha {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 30px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--txt);
}
.link-flecha .ar { width: 34px; height: 1px; background: var(--acento); position: relative; transition: width .3s ease; }
.link-flecha .ar::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--acento); border-right: 1px solid var(--acento); transform: rotate(45deg); }
.link-flecha:hover .ar { width: 50px; }

/* ============================================================================
   ★ BLOQUE 1 · PRESENTACIÓN + LOS 4 PILARES
   ============================================================================ */
.presenta {
  display: grid; grid-template-columns: 1.15fr 1fr;   /* 🔧 PERILLA: proporción título | texto */
  gap: clamp(30px, 6vw, 120px);
  /* 🔧 PERILLA: alineación vertical título ↔ texto.
     start = los dos arrancan a la misma altura (se mantiene aunque el texto crezca)
     end   = alineados abajo (antes: con un texto largo, el título bajaba) */
  align-items: start;
}

/* Fila de 4 pilares, separados por líneas verticales finas */
.pilares {
  margin-top: clamp(56px, 7vw, 110px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linea);
}
.pilar {
  position: relative; padding: 28px clamp(18px, 2vw, 34px) 8px;
  scroll-margin-top: 40px;
}
.pilar:first-child { padding-left: 0; }
.pilar + .pilar::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 8px; width: 1px; background: var(--linea); }
.pilar__num { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--acento); }
.pilar__nombre { margin: 14px 0 0; font-size: 14px; font-weight: 600; letter-spacing: .14em; color: var(--txt); }
.pilar__frase {
  margin: 14px 0 0; font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: clamp(21px, 1.7vw, 27px); line-height: 1.2; color: var(--fraunces);   /* 🔧 PERILLA */
}
.pilar__texto { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--parrafo); opacity: .85; }

/* ============================================================================
   ★ BLOQUE 2 · CLIENTES (agrupados por rubro, del documento final)
   ============================================================================ */
.clientes-cab {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 6vw, 120px); align-items: end;
}
.clientes-cab .fraunces { font-size: clamp(30px, 3.2vw, 52px); line-height: 1.12; }   /* 🔧 PERILLA */
.rubros {
  margin-top: clamp(50px, 6vw, 90px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linea);
}
.rubro { position: relative; padding: 28px clamp(18px, 2vw, 34px) 0; }
.rubro:first-child { padding-left: 0; }
.rubro + .rubro::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 0; width: 1px; background: var(--linea); }
.rubro__titulo { margin: 0 0 22px; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--acento); text-transform: uppercase; }
.rubro ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.rubro li { font-size: clamp(16px, 1.25vw, 20px); font-weight: 500; line-height: 1.3; color: var(--txt); }   /* 🔧 PERILLA */
/* Nombre con link: flecha ↗ que aparece en hover */
.rubro li a { color: var(--txt); display: inline-flex; align-items: baseline; gap: 8px; transition: color .2s ease; }
.rubro li a::after { content: "↗"; font-size: .75em; color: var(--acento); opacity: 0; transform: translate(-4px, 2px); transition: opacity .2s ease, transform .2s ease; }
.rubro li a:hover { color: var(--acento); }
.rubro li a:hover::after { opacity: 1; transform: none; }

/* Franja de demos al pie del bloque */
.franja-demos {
  margin-top: clamp(56px, 7vw, 100px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 26px clamp(20px, 2.5vw, 36px);
  border: 1px solid var(--linea); border-radius: 14px;
}
.franja-demos p { margin: 0; font-size: clamp(15px, 1.15vw, 18px); color: var(--parrafo); }
.franja-demos p b { color: var(--txt); }
.franja-demos .link-flecha { margin-top: 0; }

/* ============================================================================
   ★ BLOQUE 3 · CONTACTO (texto + formulario)
   ============================================================================ */
.contacto {
  display: grid; grid-template-columns: 1fr 1.05fr;   /* 🔧 PERILLA: proporción texto | formulario */
  gap: clamp(36px, 7vw, 130px); align-items: start;
}
.contacto .fraunces { font-size: clamp(36px, 4.2vw, 68px); line-height: 1.08; }   /* 🔧 PERILLA */
.contacto .lead { margin-top: 28px; max-width: 30em; }
.contacto__alt { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linea); display: grid; gap: 10px; font-size: 14px; color: var(--parrafo); }
.contacto__alt a { color: var(--acento); font-weight: 600; }

/* ---------- Formulario ---------- */
.form { display: grid; gap: 22px; }
.form[hidden] { display: none; }   /* después de enviar se oculta y queda el mensaje de gracias */
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { display: grid; gap: 9px; }
.campo > span, .grupo > legend {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--acento);
}
.campo > span i, .grupo > legend i { font-style: normal; opacity: .6; letter-spacing: .04em; text-transform: none; font-weight: 500; }
.campo input, .campo textarea {
  width: 100%; font: 500 16px 'Montserrat', sans-serif; color: var(--txt);
  background: var(--campo); border: 1px solid var(--campo-borde); border-radius: 10px;
  padding: 15px 16px; outline: none;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.campo textarea { min-height: 150px; resize: vertical; line-height: 1.5; }

/* Desplegable "¿En qué podemos ayudarte?"
   Mismo aspecto que los otros campos. La flecha del navegador se reemplaza
   por una propia (la nativa cambia en cada sistema y no combina). */
.campo > .select {   /* no hereda el estilo de los rótulos (.campo > span) */
  position: relative; display: block;
  font-size: 16px; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--txt);
}
.campo select {
  width: 100%; font: 500 16px 'Montserrat', sans-serif; color: var(--txt);
  background: var(--campo); border: 1px solid var(--campo-borde); border-radius: 10px;
  padding: 15px 48px 15px 16px; outline: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo select:invalid { color: var(--parrafo); opacity: .75; }      /* "Elegí una opción" se ve como placeholder */
.campo select option { color: #12163a; background: #ffffff; }      /* la lista desplegada siempre legible */
.campo select:focus { border-color: var(--campo-foco); box-shadow: 0 0 0 3px rgba(109,140,255,.18); }
.campo.con-error select { border-color: var(--error); }
.select::after {   /* flecha propia */
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--acento); border-bottom: 1.5px solid var(--acento);
  transform: rotate(45deg); pointer-events: none;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--parrafo); opacity: .45; }
.campo input:focus, .campo textarea:focus { border-color: var(--campo-foco); box-shadow: 0 0 0 3px rgba(109,140,255,.18); }
.campo.con-error input, .campo.con-error textarea { border-color: var(--error); }
.error-msg { font-size: 12.5px; color: var(--error); min-height: 0; }

/* Elección Email / WhatsApp en forma de píldoras */
.grupo { border: 0; padding: 0; margin: 0; }
.grupo > legend { padding: 0; margin-bottom: 14px; }   /* 🔧 PERILLA: aire entre la pregunta y las píldoras */
.pildoras { display: flex; gap: 12px; flex-wrap: wrap; }
.pildora input { position: absolute; opacity: 0; pointer-events: none; }
.pildora span {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 12px 22px 12px 16px; border: 1px solid var(--campo-borde); border-radius: 999px;
  font-size: 15px; font-weight: 500; color: var(--txt); background: var(--campo);
  transition: border-color .2s ease, background-color .2s ease;
}
.pildora span::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--campo-borde);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pildora input:checked + span { border-color: var(--campo-foco); }
.pildora input:checked + span::before { border-color: var(--campo-foco); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 10px var(--campo-foco); }
.pildora input:focus-visible + span { box-shadow: 0 0 0 3px rgba(109,140,255,.25); }

/* Campo trampa para bots (invisible para personas) */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.boton-enviar {
  justify-self: start; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 14px;
  height: 54px; padding: 0 28px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--boton); color: #fff;
  font: 600 13px 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  transition: transform .25s ease, filter .25s ease, opacity .2s ease;
}
.boton-enviar:hover { transform: translateY(-2px); filter: brightness(1.08); }
.boton-enviar .ar { width: 26px; height: 1px; background: #fff; position: relative; }
.boton-enviar .ar::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
.boton-enviar[disabled] { opacity: .6; cursor: wait; transform: none; }
.nota-form { font-size: 12.5px; color: var(--parrafo); opacity: .65; margin: -6px 0 0; }

/* Error general (si falla el envío) */
.error-envio { display: none; margin: 0; padding: 14px 16px; border-radius: 10px; font-size: 14px; color: var(--error); border: 1px solid var(--error); }
.error-envio.visible { display: block; }

/* Mensaje de enviado */
.enviado { display: none; padding: 34px 32px; border: 1px solid var(--linea); border-radius: 14px; }
.enviado.visible { display: block; animation: aparecer .5s ease both; }
.enviado .fraunces { font-size: clamp(28px, 2.6vw, 40px); }
.enviado p { margin: 14px 0 0; color: var(--parrafo); line-height: 1.6; }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } }

/* ============================================================================
   ★ PIE
   ============================================================================ */
.pie {
  border-top: 1px solid var(--linea);
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 28px 0 clamp(100px, 14vh, 130px);   /* abajo: aire para el widget flotante */
  font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--acento);
}
.pie a:hover { color: var(--txt); }
.pie__marca { display: flex; align-items: center; gap: 14px; }
.pie__marca svg { width: 18px; }

/* ============================================================================
   ★ APARICIÓN SUAVE AL SCROLLEAR
   ============================================================================ */
.rv { opacity: 0; transform: translateY(22px); }
.rv.in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================================
   ★ RESPONSIVE (mismo corte que landing.css: 1000 px)
   ============================================================================ */
@media (max-width: 1000px) {
  .presenta, .clientes-cab, .contacto { grid-template-columns: 1fr; }
  .pilares, .rubros { grid-template-columns: 1fr 1fr; }
  .pilar, .rubro { padding: 28px 22px 26px 0; }
  .pilar:nth-child(odd), .rubro:nth-child(odd) { padding-left: 0; }
  .pilar:nth-child(even), .rubro:nth-child(even) { padding-left: 22px; }
  .pilar:nth-child(odd)::before, .rubro:nth-child(odd)::before { display: none; }
  .pilar:nth-child(n+3), .rubro:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .seccion .overline { white-space: normal; height: auto; }
}
@media (max-width: 600px) {
  .pilares, .rubros { grid-template-columns: 1fr; }
  .pilar, .rubro, .pilar:nth-child(even), .rubro:nth-child(even) { padding: 26px 0; }
  .pilar::before, .rubro::before { display: none; }
  .pilar + .pilar, .rubro + .rubro { border-top: 1px solid var(--linea); }
  .fila-2 { grid-template-columns: 1fr; }
  .boton-enviar { justify-self: stretch; justify-content: center; }
}