/* zuhuansoftware.com · marca de 06_Marca (Azul Andes, Verde Montaña, Ocre Cosecha, Arena; Montserrat y Source Sans 3).
   Estilo decidido por Jefferson (6-nov-2026): moderno, tipo app (Apple y Google como referencia), mucho aire, letra
   grande, animaciones suaves al bajar, primero el teléfono, modo claro u oscuro según el equipo. Sin JavaScript: las
   animaciones son de CSS y se apagan si el equipo pide «reducir movimiento». */

@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/letras/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/letras/montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/letras/sourcesans3-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/letras/sourcesans3-600.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  /* marca */
  --azul-andes: #1F3B4D;
  --verde-montana: #2E5E4E;
  --ocre-cosecha: #C9963B;
  --arena: #F3EEE4;
  --carbon: #262626;
  /* modo claro */
  --fondo: #FFFFFF;
  --fondo-hero: #F8F5EF;
  --fondo-suave: #F7F4EE;
  --tarjeta: #FFFFFF;
  --texto: #262626;
  --titulo: #1F3B4D;
  --suave: #5E6266;
  --linea: rgba(31, 59, 77, 0.12);
  --barra: rgba(255, 255, 255, 0.78);
  --boton: #1F3B4D;
  --boton-texto: #FFFFFF;
  --resalte: linear-gradient(100deg, #1F3B4D 0%, #2E5E4E 100%);
  --icono-trazo: #1F3B4D;
  --sombra: 0 1px 2px rgba(16, 30, 39, 0.05), 0 12px 32px rgba(16, 30, 39, 0.06);
  /* letras y medidas */
  --titulos: "Montserrat", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --letra: "Source Sans 3", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ancho: 1120px;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #101E27;
    --fondo-hero: #101E27;
    --fondo-suave: #0C1820;
    --tarjeta: #15262F;
    --texto: #E6EBEE;
    --titulo: #FFFFFF;
    --suave: #A6B2BA;
    --linea: rgba(255, 255, 255, 0.1);
    --barra: rgba(16, 30, 39, 0.78);
    --boton: #F3EEE4;
    --boton-texto: #1F3B4D;
    --resalte: linear-gradient(100deg, #F3EEE4 0%, #C9963B 100%);
    --icono-trazo: #E6EBEE;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.25);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--letra); font-size: 1.125rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; }
a:focus-visible, .boton:focus-visible { outline: 3px solid var(--ocre-cosecha); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titulos); color: var(--titulo); margin: 0; font-weight: 700; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.saltar { position: absolute; left: -9999px; top: 0; background: var(--azul-andes); color: #FFFFFF;
  padding: 10px 16px; z-index: 20; border-radius: 0 0 8px 0; }
.saltar:focus { left: 0; }

/* ---------- barra de arriba: fija y translúcida */
.barra { position: sticky; top: 0; z-index: 10; background: var(--barra);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--linea); }
.barra-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.logo { display: block; flex: 0 0 auto; }
.logo img { width: 168px; height: auto; }
.menu { display: flex; align-items: center; gap: 28px; font-family: var(--titulos); font-weight: 600; font-size: 0.86rem; }
.menu a { text-decoration: none; color: var(--titulo); opacity: 0.82; transition: opacity 0.2s; }
.menu a:hover { opacity: 1; }
.menu .idioma { opacity: 1; border: 1.5px solid var(--linea); border-radius: 999px; padding: 6px 14px;
  transition: background 0.2s, border-color 0.2s; }
.menu .idioma:hover { border-color: var(--titulo); }

/* ---------- portada */
.hero { position: relative; overflow: hidden; background: var(--fondo-hero); padding: 120px 0 168px; text-align: center; }
.hero-corto { padding: 96px 0 128px; }
/* los anillos salen del borde de abajo, como un sol que asoma; el texto queda encima de su parte alta */
.hero-anillos { position: absolute; left: 50%; top: 100%; width: min(160vw, 1180px); aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none; }
.hero-anillos svg { width: 100%; height: 100%; }
.hero-anillos .t1 { fill: none; stroke: var(--anillo-1); }
.hero-anillos .t2 { fill: none; stroke: var(--anillo-2); }
.hero-anillos .f1 { fill: var(--anillo-1); }
.hero-anillos .f2 { fill: var(--anillo-2); }
.hero-anillos .arco { fill: none; stroke: var(--ocre-cosecha); stroke-opacity: 0.9; stroke-width: 1.1; stroke-linecap: round; }
.hero-texto { position: relative; max-width: 940px; }
.antetitulo { font-family: var(--titulos); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--suave); margin-bottom: 22px; }
.hero h1 { font-size: clamp(2.35rem, 6.4vw, 4.6rem); line-height: 1.06; letter-spacing: -0.03em; }
.hero h1 em { font-style: normal; background: var(--resalte); -webkit-background-clip: text; background-clip: text;
  color: transparent; }
.entrada { font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--suave); max-width: 34em; margin: 26px auto 0; line-height: 1.5; }
.entrada a { color: var(--titulo); }
.botones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 40px; }
.boton { display: inline-block; font-family: var(--titulos); font-weight: 600; font-size: 1rem; text-decoration: none;
  background: var(--boton); color: var(--boton-texto); padding: 15px 28px; border-radius: 999px;
  transition: transform 0.25s var(--curva), box-shadow 0.25s; box-shadow: 0 6px 18px rgba(16, 30, 39, 0.16); }
.boton:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 30, 39, 0.22); }
.boton-texto { font-family: var(--titulos); font-weight: 600; font-size: 1rem; color: var(--titulo); text-decoration: none; }
.boton-texto:hover { text-decoration: underline; }

/* ---------- secciones */
.seccion { padding: 112px 0; }
.seccion-suave { background: var(--fondo-suave); }
.seccion-cabeza { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.seccion h2 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; letter-spacing: -0.025em; }
.seccion-cabeza p { color: var(--suave); font-size: clamp(1.1rem, 2vw, 1.3rem); margin-top: 16px; }

/* ---------- las apps: tarjetas grandes con un teléfono que asoma abajo */
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.app { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  background: var(--app-fondo); color: #FFFFFF; border-radius: 32px; padding: 52px 40px 0; text-align: center;
  isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.app-texto { max-width: 30em; }
.app-marca { display: flex; align-items: center; justify-content: center; gap: 14px; }
.app-icono { width: 52px; height: 52px; border-radius: 23%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.app h3 { color: #FFFFFF; font-size: 1.6rem; letter-spacing: -0.01em; }
.app-lema { font-family: var(--titulos); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1;
  letter-spacing: -0.025em; margin-top: 22px; color: #FFFFFF; }
.app-descripcion { color: var(--app-suave); margin-top: 18px; font-size: 1.08rem; }
.app-datos { margin-top: 22px; display: grid; gap: 6px; font-size: 0.95rem; color: var(--app-suave); }
.app-datos li:first-child { color: #FFFFFF; font-weight: 600; }
.app-acciones { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 14px; }
.app-enlace { font-family: var(--titulos); font-weight: 600; font-size: 1.05rem; color: var(--app-acento); text-decoration: none; }
.app-enlace:hover { text-decoration: underline; }
.app-dominio { font-size: 0.9rem; color: var(--app-suave); opacity: 0.8; }

.telefono { position: relative; width: 248px; aspect-ratio: 248 / 516; margin: 48px auto -150px; flex: 0 0 auto;
  border-radius: 46px; background: #0B0D10; padding: 9px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), 0 30px 60px rgba(0, 0, 0, 0.35); }
.telefono::before { content: ""; position: absolute; z-index: 2; top: 19px; left: 50%; width: 76px; height: 22px;
  transform: translateX(-50%); background: #000000; border-radius: 12px; }
.pantalla { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 37px; background: var(--app-fondo); }
.pantalla .dibujo { position: absolute; inset: 0; width: 100%; height: 100%; }
.pantalla .tono-trazo { fill: none; stroke: var(--app-tono); }
.pantalla .tono-relleno { fill: var(--app-tono); }
.pantalla .acento-trazo { fill: none; stroke: var(--app-acento); }
.pantalla .pin { position: absolute; left: 50%; top: 45.3%; width: 25%; height: auto; transform: translate(-50%, -36%); }
.latido-punto { fill: #FFFFFF; }
.rueda-giro { transform-box: view-box; transform-origin: 0 0; }

/* ---------- quiénes somos */
.nosotros { display: grid; grid-template-columns: 1fr; justify-items: center; }
.nosotros-texto { max-width: 720px; text-align: center; }
.nosotros-texto p { font-size: clamp(1.15rem, 2.1vw, 1.32rem); color: var(--suave); line-height: 1.6; margin-top: 22px; }
.nosotros-texto p:first-of-type { margin-top: 26px; }
.principios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 72px; width: 100%; }
.principio { background: var(--tarjeta); border-radius: 24px; padding: 32px 28px; box-shadow: var(--sombra); }
.principio-icono { width: 48px; height: 48px; }
.principio-icono .i-trazo { fill: none; stroke: var(--icono-trazo); stroke-width: 2.4; stroke-linecap: round; }
.principio-icono .i-acento { fill: var(--ocre-cosecha); }
.principio h3 { font-size: 1.25rem; margin-top: 20px; }
.principio p { color: var(--suave); margin-top: 8px; }

/* ---------- contacto */
.contacto { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
.contacto-texto p { color: var(--suave); font-size: clamp(1.1rem, 2vw, 1.3rem); margin-top: 18px; max-width: 26em; }
.contacto-texto .boton-correo { margin-top: 12px; word-break: break-word; }
.contacto-tarjetas { display: grid; gap: 20px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 24px; padding: 28px 30px; }
.tarjeta h3 { font-size: 1.15rem; }
.tarjeta > p { color: var(--suave); margin-top: 10px; }
.tarjeta .enlace { display: inline-block; margin-top: 14px; font-family: var(--titulos); font-weight: 600; font-size: 0.98rem;
  color: var(--titulo); text-decoration: none; }
.tarjeta .enlace:hover { text-decoration: underline; }
.datos dl { margin: 12px 0 0; }
.datos dl div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea); }
.datos dl div:first-child { border-top: 0; }
.datos dt { color: var(--suave); font-size: 0.95rem; }
.datos dd { margin: 0; font-weight: 600; }
.datos dd a { color: var(--titulo); }

/* ---------- textos largos (privacidad) */
.texto-largo { max-width: 720px; margin: 0 auto; }
.texto-largo h2 { font-size: 1.35rem; margin-top: 44px; letter-spacing: -0.01em; }
.texto-largo p, .texto-largo li { color: var(--texto); margin-top: 14px; }
.texto-largo ul { list-style: disc; padding-left: 1.3em; }
.texto-largo a { color: var(--titulo); }
.texto-largo .fecha { color: var(--suave); font-size: 0.95rem; margin-top: 44px; }

/* ---------- pie */
.pie { border-top: 1px solid var(--linea); background: var(--fondo-suave); color: var(--suave); padding: 36px 0 44px;
  font-size: 0.86rem; line-height: 1.7; }
.pie p + p { margin-top: 4px; }
.pie .pie-legal { color: var(--texto); font-weight: 600; }
.pie a { color: var(--suave); }
.pie a:hover { color: var(--titulo); }

/* ---------- teléfono y tableta */
@media (max-width: 900px) {
  .apps { grid-template-columns: 1fr; }
  .principios { grid-template-columns: 1fr; max-width: 520px; }
  .contacto { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .contenedor { padding: 0 20px; }
  .barra-fila { height: 58px; }
  .logo img { width: 160px; }
  .menu { gap: 16px; }
  .menu .solo-ancho { display: none; }
  .hero { padding: 76px 0 92px; }
  .hero-anillos { width: 190vw; }
  .botones { flex-direction: column; gap: 18px; }
  .seccion { padding: 80px 0; }
  .seccion-cabeza { margin-bottom: 40px; }
  .app { padding: 40px 22px 0; border-radius: 28px; }
  .telefono { width: 214px; margin: 40px auto -130px; border-radius: 40px; }
  .pantalla { border-radius: 32px; }
  .principios { margin-top: 48px; }
  .tarjeta { padding: 24px 22px; }
  .datos dl div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- movimiento: suave, y nada si el equipo pide reducirlo */
@media (prefers-reduced-motion: no-preference) {
  .hero-texto > * { animation: entrar 1s var(--curva) both; }
  .hero-texto > :nth-child(2) { animation-delay: 0.08s; }
  .hero-texto > :nth-child(3) { animation-delay: 0.18s; }
  .hero-texto > :nth-child(4) { animation-delay: 0.28s; }
  .hero-anillos .anillo { transform-box: view-box; transform-origin: 100px 100px; animation: crecer 1.8s var(--curva) both; }
  .hero-anillos .a1 { animation-delay: 0.05s; }
  .hero-anillos .a2 { animation-delay: 0.15s; }
  .hero-anillos .a3 { animation-delay: 0.25s; }
  .hero-anillos .a4 { animation-delay: 0.35s; }
  .arco-vaiven { transform-box: view-box; transform-origin: 100px 100px; animation: vaiven 9s ease-in-out 1.2s infinite alternate both; }
  .rueda-giro { animation: girar 28s linear infinite; }
  .pantalla .pin { animation: flotar 3.4s ease-in-out infinite alternate; }
  .latido-linea { stroke-dasharray: 1000; animation: dibujar 4.2s var(--curva) infinite; }
  .latido-punto { transform-box: fill-box; transform-origin: center; animation: pulsar 4.2s ease-in-out infinite; }

  @supports (animation-timeline: view()) {
    .revelar { animation: revelar linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .app .telefono { animation: subir linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes entrar { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes crecer { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes vaiven { from { transform: rotate(4deg); } to { transform: rotate(-12deg); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes flotar { from { transform: translate(-50%, -36%); } to { transform: translate(-50%, -43%); } }
@keyframes dibujar { 0% { stroke-dashoffset: 1000; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes pulsar { 0%, 50% { transform: scale(0.4); opacity: 0; } 58% { transform: scale(1.35); opacity: 1; } 70%, 100% { transform: scale(1); opacity: 1; } }
@keyframes revelar { from { opacity: 0; transform: translateY(48px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes subir { from { transform: translateY(90px); } to { transform: none; } }

/* ---------- generado por construir.py desde datos.py (no editar aquí) */
:root { --anillo-1: #EBEAE5; --anillo-2: #F3EBDB; }
@media (prefers-color-scheme: dark) { :root { --anillo-1: #18252E; --anillo-2: #242E32; } }
.app-flotakm { --app-fondo: #1C2430; --app-acento: #F2611D; --app-suave: #C9CED6; --app-tono: #262E3A; }
.app-pulso { --app-fondo: #14213D; --app-acento: #2DB3B0; --app-suave: #C4CBD8; --app-tono: #1C2A48; }