/* Propgrow LLC — estilo Apple: mucho aire, una sola tipografía del sistema,
   negro sobre blanco y el verde menta del logo solo como acento. */
:root {
  --texto: #1d1d1f;
  --suave: #6e6e73;
  --fondo: #ffffff;
  --gris: #f5f5f7;
  --linea: #d2d2d7;
  --acento: #0a7d6e;
  --acento-claro: #e6f6f3;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
.ancho { max-width: 980px; margin: 0 auto; padding: 0 22px; }

/* Barra de arriba */
.barra {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.barra-dentro { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--texto); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.marca:hover { text-decoration: none; }
.marca img { border-radius: 7px; }
nav { display: flex; align-items: center; gap: 22px; font-size: 14px; }
nav a { color: var(--texto); opacity: .8; }
nav a:hover { opacity: 1; text-decoration: none; }
.boton-chico { background: var(--texto); color: #fff !important; opacity: 1 !important; padding: 6px 14px; border-radius: 980px; }

/* Portada */
.portada { padding: 120px 0 110px; text-align: center; }
.antetitulo { color: var(--acento); font-weight: 600; font-size: 17px; margin: 0 0 12px; }
h1 { font-size: 64px; line-height: 1.06; letter-spacing: -.035em; font-weight: 700; margin: 0 0 22px; }
.entrada { font-size: 21px; color: var(--suave); max-width: 680px; margin: 0 auto 36px; line-height: 1.45; }
.acciones { display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap; }
.boton { display: inline-block; background: var(--texto); color: #fff; padding: 13px 26px; border-radius: 980px; font-size: 17px; }
.boton:hover { text-decoration: none; background: #000; }
.boton.claro { background: var(--fondo); color: var(--texto); border: 1px solid var(--linea); }
.enlace { font-size: 17px; color: var(--acento); }

/* Bloques */
.bloque { padding: 100px 0; }
.bloque.gris { background: var(--gris); }
h2 { font-size: 44px; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 12px; text-align: center; }
.sub { text-align: center; color: var(--suave); font-size: 19px; margin: 0 auto 52px; max-width: 620px; }
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rejilla.dos { grid-template-columns: repeat(2, 1fr); }
.tarjeta { background: var(--gris); border-radius: 22px; padding: 34px 30px; }
.gris .tarjeta { background: var(--fondo); }
.tarjeta h3 { font-size: 21px; margin: 18px 0 8px; letter-spacing: -.01em; }
.tarjeta p { color: var(--suave); margin: 0; font-size: 16px; }
.icono { width: 46px; height: 46px; border-radius: 12px; background: var(--acento-claro); display: grid; place-items: center; }
.icono svg { width: 24px; height: 24px; fill: none; stroke: var(--acento); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.marca-medio { display: block; color: var(--texto); transition: transform .2s ease, box-shadow .2s ease; }
.marca-medio:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.nombre-medio { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--texto) !important; margin: 0 0 8px !important; }
.marca-medio .enlace { display: inline-block; margin-top: 18px; font-size: 16px; }

/* Ficha de la empresa */
.ficha { max-width: 640px; margin: 40px auto 0; border-top: 1px solid var(--linea); }
.ficha > div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.ficha dt { color: var(--suave); font-size: 15px; }
.ficha dd { margin: 0; font-size: 17px; }

/* Contacto */
.contacto { background: var(--gris); text-align: center; }
.acciones.centro { gap: 14px; }

/* Pie */
.pie { border-top: 1px solid rgba(0,0,0,.08); padding: 26px 0 40px; font-size: 13px; color: var(--suave); }
.pie-dentro { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pie p { margin: 0; }
.pie-enlaces { display: flex; gap: 20px; }
.pie-enlaces a { color: var(--suave); }

/* Páginas legales */
.legal { max-width: 720px; margin: 0 auto; padding: 80px 22px 100px; }
.legal h1 { font-size: 44px; margin-bottom: 8px; }
.legal .fecha { color: var(--suave); margin: 0 0 40px; }
.legal h2 { font-size: 22px; text-align: left; margin: 36px 0 8px; letter-spacing: -.01em; }
.legal p, .legal li { font-size: 16px; color: #333; }

/* Móvil */
@media (max-width: 760px) {
  nav a:not(.boton-chico) { display: none; }
  .portada { padding: 80px 0 70px; }
  h1 { font-size: 40px; }
  .entrada { font-size: 18px; }
  .bloque { padding: 70px 0; }
  h2 { font-size: 32px; }
  .sub { font-size: 17px; margin-bottom: 36px; }
  .rejilla, .rejilla.dos { grid-template-columns: 1fr; }
  .ficha > div { grid-template-columns: 1fr; gap: 2px; }
  .legal h1 { font-size: 34px; }
}