/* Helios · componentes 1.0. Requiere tokens.css, fonts.css y base.css. */

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--crema) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--tinta-linea); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e5); min-height: 72px; }
.cabecera__logo { display: inline-flex; align-items: center; min-height: var(--objetivo); text-decoration: none; }
.cabecera__logo img { height: 44px; width: auto; } /* 160 px de ancho visible, mínimo de partida */
.nav { display: none; }
.nav__lista { display: flex; align-items: center; gap: var(--e2); }
.nav__enlace { display: inline-flex; align-items: center; min-height: var(--objetivo); padding: 0 var(--e3); font-size: var(--t-control); font-weight: 500; line-height: var(--lh-control); text-decoration: none; border-radius: var(--radio-control); color: var(--tinta); transition: color var(--dur) var(--curva), background-color var(--dur) var(--curva); }
.nav__enlace:hover { color: var(--borgona); background: var(--tinta-suave); }
.nav__enlace[aria-current="true"] { color: var(--borgona); }
.nav__cta { margin-left: var(--e3); }
.menu-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: var(--objetivo); min-width: var(--objetivo); padding: 0 var(--e3); background: none; border: 1.5px solid var(--tinta); border-radius: var(--radio-control); font-size: var(--t-control); font-weight: 600; cursor: pointer; }
.menu-movil { display: none; border-top: 1px solid var(--tinta-linea); padding: var(--e3) 0 var(--e4); }
.menu-movil[data-abierto="true"] { display: block; }
.menu-movil .nav__lista { flex-direction: column; align-items: stretch; gap: var(--e1); }
.menu-movil .nav__enlace { min-height: 48px; }
.menu-movil .nav__cta { margin: var(--e3) 0 0; }
@media (min-width: 900px) { .nav { display: block; } .menu-boton, .menu-movil { display: none !important; } }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 48px; padding: 0 var(--e5); border-radius: var(--radio-control); border: 1.5px solid transparent; font-family: var(--sans); font-size: var(--t-control); font-weight: 600; line-height: var(--lh-control); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--dur) var(--curva), color var(--dur) var(--curva), border-color var(--dur) var(--curva), transform var(--dur) var(--curva); }
.boton:active { transform: translateY(1px); }
.boton--principal { background: var(--accion-fondo); color: var(--accion-texto); border-color: var(--accion-fondo); }
.boton--principal:hover { background: var(--tinta-hover); border-color: var(--tinta-hover); color: var(--crema); }
.boton--secundario { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton--secundario:hover { background: var(--tinta-suave); color: var(--tinta); }
.boton[disabled], .boton[aria-disabled="true"] { background: var(--arena); border-color: var(--arena); color: var(--texto-apoyo); cursor: not-allowed; transform: none; }
.boton--grande { min-height: 56px; padding: 0 var(--e6); font-size: 16px; }
.oscuro .boton--principal { background: var(--crema); color: var(--tinta); border-color: var(--crema); }
.oscuro .boton--principal:hover { background: var(--arena); border-color: var(--arena); }
.oscuro .boton--secundario { color: var(--crema); border-color: var(--crema); }
.oscuro .boton--secundario:hover { background: rgba(246, 241, 231, .12); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e4); align-items: center; }

/* Campos */
.campo { display: grid; gap: var(--e2); }
.campo__etiqueta { font-size: var(--t-control); font-weight: 600; line-height: var(--lh-control); }
.campo__ayuda { font-size: var(--t-apoyo); line-height: var(--lh-apoyo); color: var(--texto-apoyo); }
.campo__control { width: 100%; min-height: 48px; padding: var(--e3) var(--e4); background: var(--crema); color: var(--tinta); border: 1.5px solid var(--tinta-borde); border-radius: var(--radio-control); font-size: 16px; line-height: var(--lh-control); transition: border-color var(--dur) var(--curva), box-shadow var(--dur) var(--curva); }
.campo__control::placeholder { color: var(--texto-apoyo); opacity: 1; }
.campo__control:hover { border-color: var(--tinta); }
.campo__control:focus-visible { border-color: var(--tinta); outline: var(--foco-ancho) solid var(--foco-claro); outline-offset: var(--foco-sep); }
.campo__control:disabled { background: var(--crema-panel); color: var(--texto-apoyo); border-color: var(--tinta-linea); cursor: not-allowed; }
textarea.campo__control { min-height: 144px; resize: vertical; }
select.campo__control { appearance: none; -webkit-appearance: none; padding-right: 48px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2328374A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 8l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; }
.campo[data-invalido="true"] .campo__control { border-color: var(--error); }
.campo__error { display: none; font-size: var(--t-apoyo); line-height: var(--lh-apoyo); font-weight: 500; color: var(--error); }
.campo[data-invalido="true"] .campo__error { display: block; }
.campo__opcional { font-weight: 400; color: var(--texto-apoyo); }
.formulario { display: grid; gap: var(--e5); }
.aviso { padding: var(--e3) var(--e4); border-radius: var(--radio-control); background: var(--crema-panel); border-left: 0; color: var(--tinta); font-size: var(--t-apoyo); line-height: var(--lh-apoyo); }
.confirmacion { display: none; padding: var(--e4) var(--e5); border: 1.5px solid var(--oliva); border-radius: var(--radio-superficie); color: var(--tinta); font-weight: 500; }
.confirmacion[data-visible="true"] { display: block; }

/* Preguntas expandibles */
.preguntas { border-top: 1px solid var(--tinta-linea); }
.pregunta { border-bottom: 1px solid var(--tinta-linea); }
.pregunta__boton { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--e4); min-height: 56px; padding: var(--e4) var(--e1); background: none; border: 0; text-align: left; font-size: var(--t-cuerpo); font-weight: 600; line-height: var(--lh-control); color: var(--tinta); cursor: pointer; border-radius: 2px; transition: color var(--dur) var(--curva); }
.pregunta__boton:hover { color: var(--borgona); }
.pregunta__icono { flex: none; width: 24px; height: 24px; color: currentColor; transition: transform var(--dur) var(--curva); }
.pregunta__boton[aria-expanded="true"] .pregunta__icono { transform: rotate(45deg); }
.pregunta__panel { padding: 0 var(--e1) var(--e5); }
.pregunta__panel[hidden] { display: none; }
.pregunta__panel p { max-width: 62ch; }

/* Bloque de proceso */
.proceso { display: grid; gap: var(--e6); counter-reset: paso; }
.paso { display: grid; gap: var(--e2); padding-top: var(--e4); border-top: 1px solid var(--tinta-linea); }
.paso__numero { font-family: var(--sans); font-size: var(--t-apoyo); font-weight: 600; letter-spacing: .04em; color: var(--oliva); }
.paso__titulo { font-family: var(--serif); font-size: clamp(26px, 1.5rem + .8vw, 32px); line-height: 1.15; }
@media (min-width: 768px) { .proceso--fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e6); } }

/* Pie */
.pie { border-top: 1px solid var(--tinta-linea); padding-block: var(--e6); }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e4); }
.pie img { height: 44px; width: auto; }

/* Ayudas de composición */
.rejilla-2 { display: grid; gap: var(--e6); }
.rejilla-3 { display: grid; gap: var(--e6); }
@media (min-width: 768px) { .rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.panel { background: var(--crema-panel); border-radius: var(--radio-superficie); padding: var(--e6); }
.panel--arena { background: var(--arena); }