/* Aura Control · sitio web · estilos propios de la web.
   Va después de tokens.css → fuentes.css → componentes.css. Solo tokens semánticos: ningún color en hexadecimal.
   Base: la maqueta del manual (9.4), pasada a los tokens y componentes de la base. */

[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { overflow-x: hidden; }
img { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { text-wrap: balance; color: var(--texto); }
h3 { margin: 0; font: 400 var(--t-22)/var(--lh-titulo) var(--f-marca); }

.ancho { max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--margen-celular); }
@media (min-width: 900px) { .ancho { padding-inline: var(--e-12); } }

.saltar { position: absolute; left: -9999px; top: var(--e-2); z-index: 60; }
.saltar:focus { left: var(--e-2); padding: var(--e-2) var(--e-3); background: var(--superficie); }

/* ---- Logotipo según el tema: positivo en claro, negativo sin fondo en oscuro (reglas-aura 1) ---- */
.logo-oscuro { display: none; }
[data-tema="oscuro"] .logo-claro { display: none; }
[data-tema="oscuro"] .logo-oscuro { display: block; }

/* ---- Lema (reglas-aura 3): Archivo 600, mayúsculas, 0,18 em; pizarra sobre claro, oro sobre azul ---- */
.lema { display: flex; align-items: center; gap: var(--e-3); font: 600 var(--t-12)/1.2 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); }
.lema::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--oro-claro); }
[data-tema="oscuro"] .lema { color: var(--oro); }
[data-tema="oscuro"] .lema::before { background: var(--oro); }

/* ---- Cabecera ---- */
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--superficie); border-bottom: var(--borde) solid var(--linea); }
.cabecera-fila { display: flex; align-items: center; gap: var(--e-2); height: 68px; }
.cabecera-marca { display: block; flex: none; }
.cabecera-marca img { width: 210px; height: auto; }
.menu { display: flex; align-items: center; gap: var(--e-1); margin-left: auto; }
.menu a { padding: var(--e-2) var(--e-3); color: var(--texto); font-weight: 500; border-radius: var(--radio); text-decoration: none; }
.menu a:hover { background: var(--fondo); text-decoration: none; }
.menu a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: 6px; }
.menu .btn { margin-left: var(--e-2); }
.menu .btn-p { color: var(--sobre-acento); }
.menu .btn-p:hover { background: var(--marca); }
.btn-tema { flex: none; gap: var(--e-2); }
.btn-menu { display: none; flex: none; }
@media (max-width: 1080px) {
  .btn-menu { display: inline-flex; }
  .btn-tema { margin-left: auto; }
  .btn-tema-texto { display: none; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: var(--e-2) var(--margen-celular) var(--e-4); background: var(--superficie); border-bottom: var(--borde) solid var(--linea); }
  .menu.abierto { display: flex; }
  .menu a { padding: var(--e-3); }
  .menu .btn { margin: var(--e-2) 0 0; }
}
@media (max-width: 380px) { .cabecera-marca img { width: 207px; } }

/* ---- Secciones ---- */
.seccion { padding-block: clamp(48px, 8vw, 96px); }
.seccion-alt { background: var(--superficie); border-block: var(--borde) solid var(--linea); }
.seccion-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--e-4) var(--e-12); margin-bottom: var(--e-8); }
.seccion-cabeza > div { min-width: 0; max-width: 660px; }
.seccion-cabeza .rotulo { display: block; margin-bottom: var(--e-3); }
.seccion-cabeza h2, .titulo-2 { font-size: var(--t-30); }
.seccion-cabeza p { margin-top: var(--e-3); color: var(--texto-2); max-width: 60ch; }
.mas { font-weight: 600; white-space: nowrap; }

/* ---- Portada ---- */
.portada { padding-block: clamp(56px, 9vw, 104px) clamp(40px, 6vw, 72px); }
.portada h1 { margin-top: var(--e-6); max-width: 16ch; font-size: clamp(36px, 6vw, 56px); }
.portada h1 em { font-style: normal; color: var(--marca); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .14em; }
[data-tema="oscuro"] .portada h1 em { color: var(--oro); text-decoration: none; }
.portada .bajada { margin-top: var(--e-6); max-width: 46ch; }
.lugares { margin-top: var(--e-12); max-width: 780px; }
.lugares > p { margin-bottom: var(--e-3); color: var(--texto-2); }
.lugares-grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-3); }
.lugar { display: flex; flex-direction: column; gap: var(--e-1); min-height: 88px; padding: var(--e-4); color: var(--texto); background: var(--superficie); border: var(--borde) solid var(--linea); border-radius: var(--radio); text-decoration: none; transition: border-color var(--dur-1) var(--curva); }
.lugar:hover { border-color: var(--texto); text-decoration: none; }
.lugar b { font-weight: 600; }
.lugar span { font-size: var(--t-13); color: var(--texto-2); }
[data-piel="aura"][data-tema="oscuro"] .lugar { text-decoration: none; }
@media (max-width: 700px) { .lugares-grilla { grid-template-columns: repeat(2, 1fr); } }
.portada-enlaces { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-8); margin-top: var(--e-8); }
.portada-enlaces a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.franja { border-top: var(--borde) solid var(--linea); }
.franja .ancho { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-12); padding-block: var(--e-4); color: var(--texto-2); font-size: var(--t-14); }
.franja b { color: var(--texto); font-weight: 600; }
/* Los teléfonos de la franja llaman o abren WhatsApp: área de toque de 44 px, subrayado en el número */
.franja a { display: inline-flex; align-items: center; gap: .3em; min-height: var(--boton); margin-block: calc((var(--boton) - 1.4em) / -2); color: var(--texto-2); text-decoration: none; }
.franja a b.num { text-decoration: underline; text-underline-offset: 3px; }
.franja a:hover b.num { color: var(--marca); }

/* ---- Monitoreo: el bloque que resalta (en claro, lavanda con textos en azul [G 14/11/2026]; en oscuro, la superficie con oro) ---- */
.servicios { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--e-4); }
.servicios > * { min-width: 0; }
.monitoreo { display: flex; flex-direction: column; gap: var(--e-4); padding: clamp(24px, 4vw, 40px); color: var(--marca); background: var(--linea); border-radius: var(--radio); }
[data-tema="oscuro"] .monitoreo { color: var(--texto); background: var(--superficie); border: var(--borde) solid var(--linea); }
.monitoreo .rotulo { color: var(--marca); }
[data-tema="oscuro"] .monitoreo .rotulo { color: var(--oro); }
.monitoreo h3 { color: inherit; font-size: var(--t-30); }
.monitoreo .pasos span { color: var(--texto); }
[data-tema="oscuro"] .monitoreo p, [data-tema="oscuro"] .monitoreo span { opacity: .86; }
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 32px 1fr; gap: var(--e-4); padding: var(--e-3) 0; border-top: var(--borde) solid currentColor; border-top-color: color-mix(in srgb, currentColor 20%, transparent); }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--marca); border-radius: 50%; color: var(--marca); font-weight: 600; font-variant-numeric: tabular-nums; }
[data-tema="oscuro"] .pasos li::before { border-color: var(--oro); color: var(--oro); }
.pasos b { display: block; font-weight: 600; }
.pasos span { font-size: var(--t-14); }
.monitoreo .btn { align-self: flex-start; margin-top: auto; color: var(--sobre-acento); background: var(--marca); border-color: var(--marca); }
[data-tema="oscuro"] .monitoreo .btn { color: var(--sobre-acento); background: var(--oro); border-color: var(--oro); }
[data-piel="aura"][data-tema="oscuro"] .monitoreo .btn { text-decoration: none; }
.servicio { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-6); background: var(--superficie); border: var(--borde) solid var(--linea); border-radius: var(--radio); }
.seccion-alt .servicio { background: var(--fondo); }
.servicio p { color: var(--texto-2); }
.servicio .mas { margin-top: auto; padding-top: var(--e-2); }
.servicios-lista { display: grid; gap: var(--e-4); }
@media (max-width: 860px) { .servicios { grid-template-columns: 1fr; } }

/* ---- Guía Aura ---- */
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-3); }
.ficha-enlace { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-4) var(--e-6) var(--e-6) var(--e-4); color: var(--texto); background: var(--superficie); border: var(--borde) solid var(--linea); border-radius: var(--radio); text-decoration: none; transition: border-color var(--dur-1) var(--curva); }
.seccion-alt .ficha-enlace { background: var(--fondo); }
.ficha-enlace:hover { border-color: var(--texto); text-decoration: none; }
[data-piel="aura"][data-tema="oscuro"] .ficha-enlace { text-decoration: none; }
.ficha-enlace b { font: 400 var(--t-22)/1.2 var(--f-marca); }
.ficha-enlace span { font-size: var(--t-14); color: var(--texto-2); }
.grupo { margin-top: var(--e-12); }
.grupo:first-of-type { margin-top: 0; }
.grupo > h2 { margin-bottom: var(--e-4); }

.ficha { display: grid; grid-template-columns: 300px 1fr; background: var(--superficie); border: var(--borde) solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.ficha > * { min-width: 0; }
.ficha-lado { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-8) var(--e-6); background: var(--fondo); border-right: var(--borde) solid var(--linea); }
.ficha-lado p { color: var(--texto-2); }
.ficha dl { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
.ficha dl > div { padding: var(--e-6); border-bottom: var(--borde) solid var(--linea); }
.ficha dl > div:nth-child(odd) { border-right: var(--borde) solid var(--linea); }
.ficha dt { margin-bottom: var(--e-2); }
.ficha dd { margin: 0; }
.ficha-acciones { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--e-3); padding: var(--e-6); }
.nota { margin-top: var(--e-4); font-size: var(--t-13); color: var(--texto-2); }
@media (max-width: 860px) {
  .ficha { grid-template-columns: 1fr; }
  .ficha-lado { border-right: 0; border-bottom: var(--borde) solid var(--linea); }
  .ficha dl { grid-template-columns: 1fr; }
  .ficha dl > div:nth-child(odd) { border-right: 0; }
  .ficha-acciones { grid-column: 1; }
}

/* ---- Páginas interiores ---- */
.encabezado { padding-block: clamp(40px, 7vw, 80px) var(--e-8); }
.encabezado h1 { margin-top: var(--e-4); max-width: 22ch; font-size: clamp(32px, 5vw, 48px); }
.encabezado .lectura { margin-top: var(--e-4); max-width: 56ch; color: var(--texto-2); }
.migas { font-size: var(--t-14); color: var(--texto-2); }
.migas a { color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; }
.texto-largo { max-width: 68ch; }
.texto-largo > * + * { margin-top: var(--e-4); }
.texto-largo h2 { margin-top: var(--e-8); }
.texto-largo ul { padding-left: 1.2em; }

/* ---- Llamado a la acción ---- */
.llamado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4) var(--e-8); }
.llamado > div { min-width: 0; max-width: 60ch; }
.llamado p { margin-top: var(--e-2); color: var(--texto-2); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ---- Pie ---- */
.pie { margin-top: 0; background: var(--superficie); border-top: var(--borde) solid var(--linea); font-size: var(--t-14); color: var(--texto-2); }
.pie-grilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--e-8); padding-block: var(--e-12) var(--e-8); }
.pie-grilla > * { min-width: 0; }
.pie-marca { display: flex; flex-direction: column; gap: var(--e-4); }
.pie-marca img { width: 210px; height: auto; }
.pie h2.rotulo { margin: 0 0 var(--e-4); font: var(--rotulo); letter-spacing: .14em; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.pie a { color: var(--texto-2); }
.pie a:hover { color: var(--texto); }
.pie .dato { color: var(--texto); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pie-legal { border-top: var(--borde) solid var(--linea); }
.pie-legal-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-3) var(--e-6); padding-block: var(--e-4); font-size: var(--t-13); }
.pie-botones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.pie-botones .btn { color: var(--texto); }
@media (max-width: 900px) { .pie-grilla { grid-template-columns: 1fr 1fr; } .pie-marca { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pie-grilla { grid-template-columns: 1fr; } }

/* ---- Ayuda flotante ---- */
.ayuda { position: fixed; right: var(--e-4); bottom: calc(var(--e-4) + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-2); }
.ayuda-boton { gap: var(--e-2); color: var(--sobre-acento); background: var(--marca); border-color: var(--marca); }
.ayuda-boton:hover { background: var(--marca); opacity: .92; }
[data-tema="oscuro"] .ayuda-boton { color: var(--texto); background: var(--superficie); border-color: var(--linea); }
.ayuda-panel { width: min(320px, calc(100vw - 32px)); background: var(--superficie); border: var(--borde) solid var(--linea); border-radius: var(--radio-2); overflow: hidden; }
.ayuda-opcion { display: flex; flex-direction: column; gap: 2px; min-height: var(--boton); padding: var(--e-3) var(--e-4); color: var(--texto); border-bottom: var(--borde) solid var(--linea); text-decoration: none; }
.ayuda-opcion:hover { background: var(--fondo); text-decoration: none; }
.ayuda-opcion b { font-weight: 600; }
.ayuda-opcion span { font-size: var(--t-13); color: var(--texto-2); }
[data-piel="aura"][data-tema="oscuro"] .ayuda-opcion { text-decoration: none; }
.ayuda-nota { padding: var(--e-3) var(--e-4); font-size: var(--t-13); color: var(--texto-2); }
.ayuda-nota b { color: var(--texto); }

/* ---- Ajustes de espaciado ---- */
.seccion-ficha { padding-top: 0; }
.titulo-separado { margin-bottom: var(--e-6); }
.titulo-arriba { margin-top: var(--e-3); }

/* ---- Contacto ---- */
.canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-3); }
.canal { display: flex; flex-direction: column; gap: var(--e-1); min-height: var(--boton); padding: var(--e-4); color: var(--texto); background: var(--superficie); border: var(--borde) solid var(--linea); border-radius: var(--radio); text-decoration: none; }
.canal:hover { border-color: var(--texto); text-decoration: none; }
.canal b { font-size: var(--t-18); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
[data-piel="aura"][data-tema="oscuro"] .canal { text-decoration: none; }
.presupuesto { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--e-8) var(--e-12); align-items: start; }
.presupuesto > * { min-width: 0; }
.formulario { display: grid; gap: var(--e-4); padding: var(--e-6); background: var(--fondo); border: var(--borde) solid var(--linea); border-radius: var(--radio); }
.formulario .campo select, .formulario .campo input, .formulario .campo textarea { width: 100%; background: var(--superficie); }
@media (max-width: 860px) { .presupuesto { grid-template-columns: 1fr; } }
.monitoreo .titulo-monitoreo { color: inherit; }
/* Aura oscuro: los enlaces de texto van subrayados (componentes.css); los botones ya se distinguen por su forma [Sug] */
[data-piel="aura"][data-tema="oscuro"] .btn { text-decoration: none; }
@media (max-width: 860px) { .ficha-lado { display: none; } }
.pie-fiscal { display: flex; align-items: center; gap: var(--e-4); }
.data-fiscal { flex: none; display: block; line-height: 0; }
.data-fiscal img { width: 50px; height: auto; }