/* North7 by Septeto del Éxito — estilos del sitio.
   La paleta y las tipografías son las de la app (FrontEnd/Recursos/Colors.xaml):
   fondo oscuro cálido, violeta de acento del tema Moderno, un color por
   dimensión. Sin barra de navegación a propósito: es una página de
   presentación, no un sitio para recorrer (pedido del usuario, 24/10/2026). */
@font-face { font-family: "Playfair Display"; src: url(/fuentes/PlayfairDisplay.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Open Sans"; font-weight: 400; src: url(/fuentes/OpenSans-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Open Sans"; font-weight: 600; src: url(/fuentes/OpenSans-Semibold.ttf) format("truetype"); font-display: swap; }

:root {
  --fondo: #0e0f17;
  --superficie: #171824;
  --borde: #262838;
  --texto: #f2eef8;
  --texto-2: #a29db5;
  --violeta: #7c4dff;
  --violeta-claro: #aa8bff;
  --dorado: #fdd835;
  --salud: #43a047; --paz: #1e88e5; --vinculos: #ec407a; --patrimonio: #fdd835;
  --proposito: #8e24aa; --introspeccion: #3949ab; --kaizen: #fb8c00;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 17px/1.65 "Open Sans", system-ui, sans-serif;
  background-image: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(124, 77, 255, .22), rgba(124, 77, 255, 0) 70%);
  background-repeat: no-repeat;
}
a { color: var(--violeta-claro); }
.contenedor { width: min(100% - 32px, 980px); margin-inline: auto; }
.angosto { width: min(100% - 32px, 720px); margin-inline: auto; }

/* --- Portada --- */
.portada { text-align: center; padding: 72px 0 40px; }
.portada .isologo { width: min(300px, 70vw); height: auto; filter: drop-shadow(0 0 40px rgba(124, 77, 255, .45)); }
.marca { font: 400 clamp(56px, 12vw, 96px)/1 "Playfair Display", serif; margin: 18px 0 0; letter-spacing: .5px; }
.firma { font-style: italic; color: var(--texto-2); margin: 10px 0 0; }
.lema { color: var(--violeta-claro); font-size: clamp(17px, 2.6vw, 20px); margin: 28px auto 0; max-width: 560px; }

h2 { font: 400 clamp(30px, 5vw, 40px)/1.15 "Playfair Display", serif; margin: 0 0 14px; }
h3 { font: 600 19px/1.3 "Open Sans", sans-serif; margin: 0 0 6px; }
.rotulo { font: 600 13px/1.7 "Open Sans", sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--dorado); margin: 0 0 14px; }
.seccion { padding: 56px 0; }
.seccion > .contenedor > p, .seccion > .angosto > p { color: var(--texto-2); }

/* --- Las siete dimensiones --- */
.dimensiones { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.dimensiones li { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 18px 12px; text-align: center; font-size: 15px; color: var(--texto-2); }
.dimensiones .icono { display: block; width: 44px; height: 44px; margin: 0 auto 10px; background: var(--c);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.dimensiones li.activa { border-color: var(--patrimonio); color: var(--texto); }
.dimensiones a { color: inherit; text-decoration: none; display: block; }
.estado { display: block; font-size: 12px; margin-top: 4px; color: var(--dorado); }

/* --- Tarjeta de la app --- */
.tarjeta { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 28px; padding: 28px; }
@media (min-width: 760px) { .tarjeta { grid-template-columns: 1.1fr .9fr; padding: 40px; } }
.boton { display: inline-block; background: var(--violeta); color: #fff; text-decoration: none; font-weight: 600;
  padding: 13px 26px; border-radius: 14px; margin-top: 8px; }
.boton.secundario { background: transparent; border: 1px solid var(--borde); color: var(--texto); }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* --- Teléfonos con capturas reales --- */
.telefonos { display: flex; justify-content: center; gap: 14px; }
.telefono { width: min(46%, 230px); border-radius: 30px; padding: 7px; background: #08080c;
  box-shadow: 0 0 0 1px rgba(170, 139, 255, .3), 0 0 50px rgba(124, 77, 255, .35); }
.telefono img { display: block; width: 100%; height: auto; border-radius: 24px; }
.telefono:nth-child(2) { transform: translateY(28px); }

.funciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; }
.funcion { background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; padding: 22px; }
.funcion p { margin: 0; color: var(--texto-2); font-size: 16px; }

/* --- Textos legales --- */
.legal h2 { font-size: clamp(24px, 4vw, 30px); margin-top: 44px; }
.legal p, .legal li { color: #d6d2e2; }
.legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal .actualizado { color: var(--texto-2); font-style: italic; }
.aviso { background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--dorado); border-radius: 14px; padding: 16px 18px; }
.volver { display: inline-block; margin: 32px 0 0; text-decoration: none; }

/* --- Pie --- */
.pie { border-top: 1px solid var(--borde); margin-top: 48px; padding: 28px 0 40px; color: var(--texto-2); font-size: 14px; }
.pie .contenedor { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
.pie a { color: var(--texto-2); }
.pie .enlaces { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.gfcode { color: var(--texto-2); text-decoration: none; }
.gfcode b { color: var(--texto); font-weight: 600; }