/* =============================================================
   aplomo · hoja de estilos
   Identidad importada de Claude Design → "Brand identity design"
   (Turno 2 · propuesta 2a "Aplomo · dirección Norma desarrollada")

   Aplomo: serenidad, verticalidad, trabajo bien asentado.
   El azul tinta manda en el 90% de la superficie; el azul acento
   sólo en el punto del logotipo, enlaces y estados activos.
   El verde es exclusivo para confirmaciones.
   ============================================================= */

/* --- Tokens -------------------------------------------------- */
:root {
  /* Color · paleta de marca */
  --tinta: #1e3a8a;          /* Azul tinta   · color dominante */
  --acento: #2563eb;         /* Azul acento  · punto, enlaces, activos */
  --acento-claro: #93c5fd;   /* acento sobre fondo tinta */
  --fondo-suave: #eef2fb;    /* Fondo suave  · tiles de icono, bandas */
  --texto: #111827;          /* Texto */
  --verificado: #059669;     /* Verificado   · sólo confirmaciones */

  /* Color · neutros de apoyo */
  --cuerpo: #374151;
  --secundario: #6b7280;
  --atenuado: #9ca3af;
  --borde: #e5e7eb;
  --borde-boton: #c7d2e8;
  --lienzo: #f3f5f9;
  --blanco: #fff;
  --tinta-oscura: #17306f;   /* derivado, sólo para :hover del botón */

  /* Tipografía */
  --fuente: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radios y sombra */
  --radio-boton: 10px;
  --radio-icono: 16px;
  --radio-tarjeta: 20px;
  --sombra: 0 1px 2px rgba(17, 24, 39, .04), 0 24px 48px -32px rgba(17, 24, 39, .25);

  /* Espaciado y medidas */
  --espacio-xs: .5rem;
  --espacio-s: 1rem;
  --espacio-m: 2rem;
  --espacio-l: 4.5rem;
  --ancho-maximo: 1180px;    /* el ancho del tablero de marca */
}

/* --- Base ---------------------------------------------------- */
*, ::before, ::after { box-sizing: border-box }

html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cuerpo);
  background: var(--blanco);
}

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

a { color: var(--acento); text-decoration: none }
a:hover { color: var(--tinta); text-decoration: underline }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Tipografía ---------------------------------------------- */
h1, h2, h3 { margin: 0 0 var(--espacio-s); color: var(--texto) }

/* Display · 900 · 46/1 · -.05em · tinta */
.display {
  font-size: clamp(2.125rem, 1.4rem + 3.2vw, 2.875rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--tinta);
}

/* Display de página interior, un peldaño por debajo del hero */
.titulo-pagina {
  font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.05;
  color: var(--tinta);
}

/* Título · 700 · 22px · -.015em */
h2, h3 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
}

/* Cuerpo · 400 · 16/1.6 */
p { margin: 0 0 var(--espacio-s) }
p:last-child { margin-bottom: 0 }

/* Etiqueta · 500 · 12px · .28em */
.etiqueta {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--secundario);
}

.texto-suave { color: var(--secundario) }

/* --- Logotipo ------------------------------------------------ */
.logo { display: inline-flex; align-items: center; gap: 10px }
.logo:hover { text-decoration: none }
.logo__marca { flex-shrink: 0 }
.logo__texto {
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--tinta);
}
.logo__punto { color: var(--acento) }

/* --- Botones · 600 · 16px · radio 10 -------------------------- */
.boton {
  display: inline-block;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 10px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--radio-boton);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.boton:hover { text-decoration: none }

.boton--principal { background: var(--tinta); border-color: var(--tinta); color: var(--blanco) }
.boton--principal:hover { background: var(--tinta-oscura); border-color: var(--tinta-oscura); color: var(--blanco) }

.boton--secundario { background: transparent; border-color: var(--borde-boton); color: var(--tinta); padding: 10px 20px }
.boton--secundario:hover { background: var(--fondo-suave); border-color: var(--tinta); color: var(--tinta) }

.botonera { display: flex; gap: .75rem; flex-wrap: wrap }

/* --- Iconografía · trazo 2.25px, muy redondeado --------------- */
.icono {
  width: 76px;
  height: 76px;
  border-radius: var(--radio-icono);
  background: var(--fondo-suave);
  color: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icono svg { width: 28px; height: 28px }
.icono--solido { background: var(--tinta); color: var(--blanco) }

/* --- Estructura ---------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.seccion { padding: var(--espacio-l) 0 }
.seccion--suave { background: var(--fondo-suave) }
.seccion--lienzo { background: var(--lienzo) }

.seccion__intro { max-width: 640px; margin: 0 auto var(--espacio-m); text-align: center }
.seccion__intro .etiqueta { margin-bottom: .75rem }
.seccion__intro h2 { margin-bottom: .75rem }

.rejilla { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }

/* --- Cabecera ------------------------------------------------ */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-s);
  flex-wrap: wrap;
  padding-top: .875rem;
  padding-bottom: .875rem;
}
.cabecera__menu { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap }
.cabecera__enlace {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--cuerpo);
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
}
.cabecera__enlace:hover { color: var(--tinta); text-decoration: none }
.cabecera__enlace.activo { color: var(--tinta); font-weight: 600; border-bottom-color: var(--acento) }

/* --- Portada ------------------------------------------------- */
.portada { background: var(--lienzo); border-bottom: 1px solid var(--borde); padding: var(--espacio-l) 0 }
.portada__interior { max-width: 760px }
.portada .etiqueta { margin-bottom: 1.25rem }
.portada__texto { font-size: 1.125rem; color: var(--cuerpo); max-width: 60ch; margin: 1.25rem 0 0 }
.portada .botonera { margin-top: 2rem }

/* Sello de confirmación · único uso del verde */
.sello {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--verificado);
}

/* --- Tarjetas ------------------------------------------------ */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra);
  padding: 1.75rem;
}

.servicio { display: flex; flex-direction: column; gap: 1.125rem }
.servicio h3 { margin: 0 }
.servicio p { margin: 0; color: var(--cuerpo) }

/* Motivo: icono y texto en línea, sin tarjeta */
.motivo { display: flex; gap: 1.125rem; align-items: flex-start }
.motivo h3 { margin: 0 0 .375rem }
.motivo p { margin: 0; color: var(--secundario) }

/* --- Lista con check ----------------------------------------- */
.lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem }
.lista-check li { display: flex; align-items: flex-start; gap: .75rem }
.lista-check svg { flex-shrink: 0; margin-top: .3rem; color: var(--tinta) }

/* --- Texto largo --------------------------------------------- */
.texto-largo { max-width: 65ch; margin: 0 auto; font-size: 1.0625rem }

/* --- Datos --------------------------------------------------- */
.dato { text-align: center }
.dato__cifra {
  display: block;
  font-size: 2.875rem;
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--tinta);
}
.dato__etiqueta {
  display: block;
  margin-top: .625rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--secundario);
}

/* --- Contacto ------------------------------------------------ */
.contacto { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start }
.contacto__dato { margin: 0 0 1.25rem }
.contacto__dato:last-child { margin-bottom: 0 }
.contacto__dato .etiqueta { margin-bottom: .25rem }
.contacto__dato p { margin: 0; color: var(--texto); font-weight: 500 }

/* --- Pie ----------------------------------------------------- */
.pie {
  border-top: 1px solid var(--borde);
  background: var(--lienzo);
  padding: var(--espacio-l) 0 var(--espacio-m);
  margin-top: var(--espacio-l);
}
.pie__interior { display: grid; gap: var(--espacio-m); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.pie__titulo {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--secundario);
  margin: 0 0 1rem;
}
.pie__texto { font-size: .875rem; color: var(--secundario); margin: 0 }
.pie .logo { margin-bottom: 1rem }
.pie__enlaces { display: flex; flex-direction: column; gap: .5rem; font-size: .875rem }
.pie__redes { flex-direction: row; gap: 1.25rem; margin-top: 1rem }
.pie__legal {
  margin: var(--espacio-m) 0 0;
  padding-top: var(--espacio-s);
  border-top: 1px solid var(--borde);
  font-size: .875rem;
  color: var(--atenuado);
  text-align: center;
}

/* --- Ajustes en pantallas estrechas -------------------------- */
@media (max-width: 640px) {
  :root { --espacio-l: 3rem }
  .cabecera__menu { gap: 1rem }
  .cabecera .boton { display: none }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important }
}