/* uptimepro.cl · la identidad de los posts: fondo crema, azul y Fira Sans. */

@font-face {
  font-family: 'Fira Sans';
  src: url('recursos/fira-sans-400.woff?v=8a433ece') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Sans';
  src: url('recursos/fira-sans-700.woff?v=43a02b21') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Sans';
  src: url('recursos/fira-sans-300i.woff?v=a014f35d') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
/* La del logo, recortada a las letras de «UptimePro». */
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('recursos/barlow-sc-400.woff?v=e0479f1b') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('recursos/barlow-sc-700.woff?v=f318b616') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --fondo: #F5F2ED;
  --papel: #FBFAF7;
  --azul: #163E62;
  --azul-medio: #4A6782;
  --linea: #CDD3D6;
  --rojo: #BE3C2D;
  --ancho: 1080px;
  --lado: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--azul);
  font-family: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

a:focus-visible, .boton:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 3px;
}

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: var(--lado);
  top: 12px;
  background: var(--azul);
  color: var(--fondo);
  padding: 8px 14px;
  z-index: 10;
}

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--lado);
}

/* «UptimePro» escrito en el texto va como el logo: «Uptime» en negrita y azul, «Pro» normal
   y en azul medio (Paulo, 2026-10-13). */
.uptimepro {
  font-family: 'Barlow Semi Condensed', 'Fira Sans', sans-serif;
  font-weight: 400;
  color: var(--azul-medio);
  white-space: nowrap;
}
.uptimepro b { font-weight: 700; color: var(--azul); }

/* ── Encabezado ─────────────────────────────────────────────── */

.encabezado {
  border-bottom: 1px solid var(--linea);
}
.encabezado .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}
/* El logo es el SVG de 10_Perfil/logo/piezas/: Barlow Semi Condensed en trazos. */
.marca { display: block; line-height: 0; }
.marca img { height: 30px; width: auto; }
.navegacion {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 16px;
}
.navegacion a { text-decoration: none; }
.navegacion a:not(.boton):hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Botones ────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 2px solid var(--azul);
  border-radius: 6px;
  background: var(--azul);
  color: var(--fondo);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.boton:hover { background: #0F2D48; border-color: #0F2D48; }
.boton svg { width: 20px; height: 20px; flex: none; }
.boton.secundario { background: transparent; color: var(--azul); }
.boton.secundario:hover { background: var(--azul); color: var(--fondo); }
.boton.chico { padding: 9px 16px; font-size: 15px; }

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* ── Textos comunes ─────────────────────────────────────────── */

.antetitulo {
  margin: 0 0 18px;
  font-size: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.antetitulo b { font-weight: 700; }

h1, h2, h3 { margin: 0; line-height: 1.15; }

h1 {
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 56px);
  letter-spacing: -0.01em;
}
h1 strong { font-weight: 700; }

h2 {
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 40px);
  margin-bottom: 36px;
}

h3 {
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 10px;
}

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.seccion { padding: 96px 0; }
.seccion + .seccion { border-top: 1px solid var(--linea); }

.entrada {
  font-size: 21px;
  max-width: 760px;
}

/* ── Portada ────────────────────────────────────────────────── */

.portada { padding: 88px 0 96px; }
.portada .contenedor {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: center;
}
.portada .bajada {
  margin-top: 28px;
  font-size: 21px;
  max-width: 620px;
}
.foto {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
}

/* ── El problema ────────────────────────────────────────────── */

.problema {
  background: var(--azul);
  color: var(--fondo);
  padding: 72px 0;
}
.problema p {
  font-size: clamp(23px, 2.8vw, 32px);
  line-height: 1.3;
  max-width: 900px;
  margin: 0;
}
.problema p + p {
  margin-top: 20px;
  font-weight: 700;
}

/* ── Servicios ──────────────────────────────────────────────── */

.ofertas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.oferta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--azul);
  border-radius: 6px;
  padding: 32px;
}
.oferta h3 { font-size: 26px; }

.tambien {
  margin: 56px 0 20px;
  font-size: 19px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.servicios-apoyo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.servicios-apoyo div {
  border-top: 2px solid var(--linea);
  padding-top: 20px;
}
.servicios-apoyo h3 { font-size: 20px; }
.servicios-apoyo p { font-size: 17px; }

/* ── Clientes ───────────────────────────────────────────────── */

/* Cada logo trae su ancho y su alto de pantalla en el HTML, calculados para que todos pesen
   lo mismo a la vista (herramientas/logos_clientes.py). */
.clientes { padding: 80px 0; }
/* En una fila, repartidos en todo el ancho. Cuando no caben, las filas van centradas, para que
   una cantidad impar no deje un logo suelto en una orilla; en el celular, de a dos. */
.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 40px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.logos li { min-width: 0; }      /* sin esto, el logo no se achica en una pantalla angosta */
.logos img { display: block; max-width: 100%; height: auto; }

@media (max-width: 1080px) {
  .logos { justify-content: center; gap: 36px 56px; }
}
@media (max-width: 600px) {
  .logos { gap: 32px 20px; }
  .logos li { flex: 0 1 calc(50% - 10px); display: flex; justify-content: center; }
}

/* ── Palancas y meta ────────────────────────────────────────── */

.palancas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: palanca;
}
.palancas li { counter-increment: palanca; }
.palancas li::before {
  content: counter(palanca);
  display: block;
  font-size: 64px;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  margin-bottom: 12px;
}

.meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 64px;
  padding: 36px 40px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 6px;
}
.meta .cifra {
  font-size: clamp(72px, 10vw, 112px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.meta p:first-child { font-size: 22px; font-weight: 700; }

/* ── Cómo trabajo ───────────────────────────────────────────── */

.etapas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 48px 0;
  padding: 0;
  list-style: none;
  counter-reset: etapa;
}
.etapas li {
  counter-increment: etapa;
  border-top: 2px solid var(--azul);
  padding-top: 20px;
}
.etapas li::before {
  content: 'Etapa ' counter(etapa);
  display: block;
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cierre-etapas {
  font-size: 21px;
  font-weight: 700;
  max-width: 760px;
}

/* ── Sobre mí ───────────────────────────────────────────────── */

.sobre .contenedor {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 36px 64px;
  align-items: start;
}
.sobre h2 { grid-column: 1 / -1; margin-bottom: 0; }
.relato p { font-size: 19px; }
.relato .antetitulo { margin-top: 28px; }

.datos {
  margin: 0;
  padding: 0;
  list-style: none;
}
.datos li {
  border-top: 1px solid var(--linea);
  padding: 16px 0;
  font-size: 16px;
  color: var(--azul-medio);
}
.datos li:last-child { border-bottom: 1px solid var(--linea); }
.datos strong {
  display: block;
  font-size: 26px;
  line-height: 1.2;
  color: var(--azul);
}

/* ── Contacto ───────────────────────────────────────────────── */

.contacto {
  background: var(--azul);
  color: var(--fondo);
  padding: 96px 0;
  text-align: center;
}
.contacto h2 { margin-bottom: 16px; }
.contacto p { font-size: 21px; }
.contacto .botones { justify-content: center; }
.contacto .boton { background: var(--fondo); color: var(--azul); border-color: var(--fondo); }
.contacto .boton:hover { background: #FFFFFF; border-color: #FFFFFF; }
.contacto .boton.secundario { background: transparent; color: var(--fondo); }
.contacto .boton.secundario:hover { background: var(--fondo); color: var(--azul); }

.pie {
  padding: 28px 0;
  font-size: 15px;
  color: var(--azul-medio);
}
.pie .contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

/* ── Pantallas angostas ─────────────────────────────────────── */

@media (max-width: 900px) {
  .servicios-apoyo, .palancas, .etapas { grid-template-columns: 1fr; gap: 28px; }
  .sobre .contenedor { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 760px) {
  :root { --lado: 16px; }
  body { font-size: 17px; }
  .navegacion .enlace { display: none; }
  .seccion { padding: 64px 0; }
  .portada { padding: 48px 0 64px; }
  .portada .contenedor { grid-template-columns: 1fr; gap: 32px; }
  .portada .foto-marco { order: -1; }
  .foto { width: 152px; height: 152px; }
  .ofertas { grid-template-columns: 1fr; }
  .oferta { padding: 24px; }
  .meta { grid-template-columns: 1fr; gap: 12px; padding: 28px 24px; }
  .problema, .contacto { padding: 56px 0; }
  .botones .boton { width: 100%; justify-content: center; }
}