/* Portada NeuralV (25-oct-2026) · base común · Brandbook v2.2 §13-15 + §54 */
:root {
  --tinta: #203547; --tinta-2: #16283A; --tinta-3: #0F1D2B;
  --texto: #172B3A; --sec: #526372; --apoyo: #A9BBC8;
  --papel: #F7F8FA; --blanco: #FFFFFF;
  --azul: #0058C7; --azul-h: #00469F; --azul-suave: #EAF1FC; --azul-luz: #4D8DFF;
  --ocre: #C59A50;
  --linea: #DCE3E9;
  --ok: #176847; --ok-bg: #EAF4ED; --err: #B42336; --err-bg: #FCECEE;
  --wrap: 1180px; --r: 8px; --r-card: 16px;
  --font: "Inter", Arial, sans-serif;
  --sombra: 0 18px 50px rgba(15, 29, 43, .14);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 27px; color: var(--texto); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--azul); }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
h1, h2, h3 { margin: 0; color: var(--tinta); font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.06; }
h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; }
h3 { font-size: 21px; line-height: 27px; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.etq { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
.etq::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.osc .etq { color: #8DB6FF; }
.sec-txt { color: var(--sec); }
.osc { background: var(--tinta-3); color: #D5DFE8; }
.osc h1, .osc h2, .osc h3 { color: #fff; }
.osc .sec-txt { color: #AFC0CF; }
.nota-ej { font-size: 12px; line-height: 16px; color: var(--sec); }
.osc .nota-ej { color: #8FA3B5; }
section { position: relative; }

/* Aviso de maqueta */

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r); font: 600 16px/1 var(--font); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ease), background .2s, box-shadow .2s; }
.btn-pri { background: var(--azul); color: #fff; box-shadow: 0 8px 22px rgba(0, 88, 199, .32); }
.btn-pri:hover { background: var(--azul-h); color: #fff; transform: translateY(-2px); }
.btn-sec { background: rgba(255,255,255,.08); color: var(--tinta); border-color: var(--apoyo); }
.btn-sec:hover { border-color: var(--tinta); transform: translateY(-2px); }
.osc .btn-sec, .sobre-foto .btn-sec { color: #fff; border-color: rgba(255,255,255,.4); }
.btn svg { width: 18px; height: 18px; }

/* Navegación (punto medio §06) */

/* Entradas al hacer scroll */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.visto { opacity: 1; transform: none; }
.vista .rv, .vista [data-vigilar] * { transition: none !important; }
.rv-d1 { transition-delay: .1s; } .rv-d2 { transition-delay: .2s; } .rv-d3 { transition-delay: .3s; } .rv-d4 { transition-delay: .4s; }
@keyframes aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(77,141,255,.5); } 100% { box-shadow: 0 0 0 14px rgba(77,141,255,0); } }

/* Llamada a la acción con Juanan (patrón ganador de las creatividades) */
.cta-juanan { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 999px; padding: 8px 8px 8px 8px; box-shadow: var(--sombra); max-width: max-content; }
.cta-juanan img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; }
.cta-juanan p { font-size: 15px; line-height: 20px; color: var(--tinta); font-weight: 600; }
.cta-juanan p span { display: block; font-weight: 400; color: var(--sec); font-size: 13px; }
.cta-juanan .btn { border-radius: 999px; }

/* Razón social (requisito de Meta) */

/* Contacto */
.contacto { padding: 110px 0; }
.contacto-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.form { background: #fff; border-radius: 20px; padding: 32px; display: grid; gap: 18px; box-shadow: var(--sombra); border: 1px solid var(--linea); }
.campo { display: grid; gap: 8px; }
.campo label { font-size: 15px; font-weight: 600; color: var(--tinta); }
.campo label small { font-weight: 400; color: var(--sec); }
.campo input, .campo textarea { font: 400 16px/24px var(--font); color: var(--texto); padding: 12px 14px; min-height: 50px; border: 1px solid var(--apoyo); border-radius: var(--r); background: #fff; }
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--azul); outline-offset: 0; border-color: var(--azul); }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.legal { font-size: 13px; line-height: 19px; color: var(--sec); }
.ok-msg { display: none; background: var(--ok-bg); color: var(--ok); border-radius: var(--r); padding: 14px 16px; font-size: 15px; }
.form.enviado .ok-msg { display: block; animation: aparece .3s var(--ease); }

/* Pie */

@media (max-width: 1100px) {
  .contacto-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  body { font-size: 16px; line-height: 25px; }
  .form { padding: 22px; }
  .contacto { padding: 72px 0; }
  .cta-juanan { border-radius: 20px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}
.campo select { font: 400 16px/24px var(--font); color: var(--texto); padding: 12px 14px; min-height: 50px; border: 1px solid var(--apoyo); border-radius: var(--r); background: #fff; }


/* Contacto en móvil: una columna (la regla venía en la misma línea que la franja de la maqueta) */
.contacto-grid > * { min-width: 0; }
@media (max-width: 720px) { .fila-2 { grid-template-columns: 1fr; gap: 18px; } }

/* Formulario: los campos nunca se salen de la tarjeta (antes el ancho mínimo del navegador los empujaba fuera) */
.form, .campo, .fila-2 > * { min-width: 0; }
.campo input, .campo select, .campo textarea { width: 100%; max-width: 100%; box-sizing: border-box; }