/* Base del sitio Rutin-IA: colores, tipografía, botones, cabecera y pie.
   Diseño oscuro tomado de la propuesta hecha en Framer (octubre 2026). Títulos en Satoshi, texto en Inter. */
:root{
  --fondo:#041B24;          /* petróleo muy oscuro: fondo general */
  --superficie:#082A36;     /* tarjetas y banda de contacto */
  --insignia:#0E3B48;       /* círculos numerados */
  --borde:rgba(157,182,190,.16);
  --texto:#F1F8F8;          /* títulos */
  --suave:#9DB6BE;          /* párrafos */
  --tenue:#6F8C96;          /* notas */
  --turquesa:#08D9D6;       /* acento de marca, el de los nodos del logo */
  --turquesa-hover:#3FE3E0;
  --error:#FF9B8F;          /* errores de formulario: contraste 8,7 sobre el fondo */
  --petroleo:#02374C;       /* petróleo de marca */

  --titulos:'Satoshi','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cuerpo:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ancho:1104px;
  --margen:clamp(20px,4vw,40px);
  --seccion:clamp(80px,10vw,128px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--fondo);color:var(--suave);font:400 1rem/1.65 var(--cuerpo);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;color:var(--texto);font-family:var(--titulos);font-weight:500;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
img,svg{display:block}
.contenedor{width:100%;max-width:calc(var(--ancho) + 2 * var(--margen));margin-inline:auto;padding-inline:var(--margen)}
.marca{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--turquesa);outline-offset:3px;border-radius:4px}

/* Etiqueta chica de cada sección: "01 / LO QUE RESOLVEMOS" */
.etiqueta{font-size:.8125rem;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--turquesa)}

/* Botón principal turquesa con flecha */
.boton{display:inline-flex;align-items:center;gap:14px;padding:14px 22px;border:0;border-radius:6px;cursor:pointer;background:var(--turquesa);color:var(--fondo);font:600 .9375rem/1.2 var(--cuerpo);text-decoration:none;transition:background-color .15s}
.boton:hover{background:var(--turquesa-hover)}
.boton svg{width:16px;height:16px;flex:none}
.icono{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.boton:disabled{opacity:.7;cursor:progress}
.boton-ancho{justify-content:center;min-width:min(260px,100%)}
.boton-contorno{background:transparent;color:var(--turquesa);box-shadow:inset 0 0 0 1.5px var(--turquesa)}
.boton-contorno:hover{background:rgba(8,217,214,.1)}

/* Formularios: componente estándar (campos armados con campo() de lib/formulario.php) */
.formulario-caja{background:var(--fondo);border:1px solid var(--borde);border-radius:8px;padding:clamp(22px,3vw,32px)}
.formulario{display:grid;gap:22px}
.campo{display:grid;gap:10px}
.campo label{color:var(--texto);font-size:.875rem;font-weight:500}
.campo input,.campo textarea{width:100%;font:400 1rem/1.5 var(--cuerpo);color:var(--texto);background:var(--superficie);border:1px solid var(--borde);border-radius:6px;padding:13px 16px;transition:border-color .15s}
.campo textarea{min-height:140px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tenue)}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--turquesa);box-shadow:0 0 0 3px rgba(8,217,214,.18)}
.campo-error{margin:-2px 0 0;font-size:.8125rem;color:var(--error);min-height:0}
.campo-error:empty{display:none}
.con-error input,.con-error textarea{border-color:var(--error)}
.formulario-aviso{font-size:.875rem;color:var(--suave)}
.formulario-aviso:empty{display:none}
.formulario-aviso.es-error,.formulario-aviso:not(:empty){color:var(--error)}
.formulario .boton{justify-self:start;margin-top:4px}
.trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.formulario-listo{display:grid;gap:12px;padding-block:12px;outline:none}
.formulario-listo svg{width:32px;height:32px;color:var(--turquesa)}
.formulario-listo h3{font-size:1.5rem}

/* Cabecera fija */
.cabecera{position:sticky;top:0;z-index:10;background:rgba(4,27,36,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--borde)}
.cabecera .contenedor{display:flex;align-items:center;gap:clamp(16px,4vw,40px);min-height:88px}
.cabecera .logo{height:30px;width:auto}
.cabecera nav{display:flex;gap:28px;margin-left:8px;font-size:.875rem}
.cabecera nav a{color:var(--suave);text-decoration:none;transition:color .15s}
.cabecera nav a:hover{color:var(--texto)}
.cabecera .boton{margin-left:auto;padding:12px 20px}
@media (max-width:860px){.cabecera nav{display:none}.cabecera .contenedor{min-height:72px}}
@media (max-width:600px){.cabecera .logo{height:26px}}
@media (max-width:380px){.cabecera .logo{height:24px}.cabecera .boton{padding:10px 14px;gap:10px}}

/* Pie */
.pie{border-top:1px solid var(--borde);padding-block:28px;font-size:.875rem}
.pie .contenedor{display:flex;flex-wrap:wrap;align-items:center;gap:16px 64px}
.pie .logo{height:22px;width:auto}

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