/* =================================================================
   Línea estética de la landing de servicios, para Astra + bloques.
   Se carga desde functions.php del tema hijo (no hace falta pegarla
   en CSS adicional). Las clases awp-* se aplican a un bloque en
   Avanzado → Clases CSS adicionales.
   ================================================================= */

/* ---- Fuentes autoalojadas (rendimiento + RGPD). Coloca los .woff2 en assets/fonts/ ---- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/space-grotesk-500.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/space-grotesk-600.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-grotesk-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrains-mono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrains-mono-500.woff2") format("woff2")}

:root{
  --awp-accent:#3B7EA1;        /* azul principal */
  --awp-accent-dark:#2C6580;   /* enlaces / hover sobre claro */
  --awp-accent-hover:#336F8F;  /* hover del botón primario */
  --awp-ink:#16242C;           /* texto y titulares */
  --awp-muted:#586872;         /* texto secundario */
  --awp-line:#D8E2E8;          /* bordes y líneas */
  --awp-bg:#EEF3F6;            /* fondo de página */
  --awp-surface:#FFFFFF;       /* tarjetas */
  --awp-soft:#E7EFF4;          /* tinte azul claro */
  --awp-soft-ink:#2C6580;
  --awp-band:#13212A;          /* banda oscura (CTA, pie) */
  --awp-band-ink:#DFEAF0;
  --awp-urg:#CF3A3E;           /* badge urgente */
  --awp-urg-bg:#FBE9EA;
  --awp-neutral:#51626B;       /* badge neutro */
  --awp-neutral-bg:#EAEEF1;
  --awp-radius:16px;           /* tarjetas y contenedores */
  --awp-radius-sm:10px;        /* botones */
}

/* ---- Tipografía ---- */
h1,h2,h3,.entry-title,.ast-archive-title{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:700;letter-spacing:-.01em;
}
.entry-content,.ast-container{font-family:"Inter",system-ui,-apple-system,sans-serif}

/* ---- Enlaces de contenido ---- */
.entry-content a{color:var(--awp-accent-dark)}
.entry-content a:hover{color:var(--awp-accent)}

/* ---- Botones (Gutenberg y Astra) ---- */
.wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link,
.ast-button,.button,
input[type="submit"]{
  background-color:var(--awp-accent) !important;
  color:#fff !important;
  border:1.5px solid var(--awp-accent) !important;
  border-radius:var(--awp-radius-sm) !important;
  padding:.7em 1.4em;font-weight:600;
  transition:background-color .15s,border-color .15s,color .15s;
}
.wp-block-button__link:hover,
.ast-button:hover,.button:hover,
input[type="submit"]:hover{
  background-color:var(--awp-accent-hover) !important;
  border-color:var(--awp-accent-hover) !important;
  color:#fff !important;
}

/* Botón secundario / contorno */
.is-style-outline .wp-block-button__link,
.awp-btn-2{
  background:transparent !important;
  color:var(--awp-ink) !important;
  border:1.5px solid var(--awp-line) !important;
}
.is-style-outline .wp-block-button__link:hover,
.awp-btn-2:hover{
  border-color:var(--awp-accent) !important;
  color:var(--awp-accent-dark) !important;
}

/* ---- Tarjeta: clase awp-card en un bloque de Grupo ---- */
.awp-card{
  background:var(--awp-surface);
  border:1px solid var(--awp-line);
  border-radius:var(--awp-radius);
  padding:26px;
  transition:border-color .15s,transform .15s;
}
.awp-card:hover{border-color:var(--awp-accent);transform:translateY(-3px)}

/* ---- Píldoras de estado ---- */
.awp-badge{
  display:inline-block;font-size:13px;font-weight:600;line-height:1;
  padding:6px 12px;border-radius:999px;
  background:var(--awp-neutral-bg);color:var(--awp-neutral);
}
.awp-badge--soft{background:var(--awp-soft);color:var(--awp-soft-ink)}
.awp-badge--urgente{background:var(--awp-urg-bg);color:var(--awp-urg)}

/* ---- Banda oscura (CTA o pie de sección): clase awp-band en un Grupo ---- */
.awp-band{
  background:var(--awp-band);color:var(--awp-band-ink);
  border-radius:var(--awp-radius);padding:28px 30px;
}
.awp-band :is(h1,h2,h3){color:#fff}

/* Ancho de contenido (si no lo fijas en el Customizer)
.ast-container{max-width:1120px} */

/* =================================================================
   OPCIONAL · Tema oscuro por preferencia del sistema.
   Tiñe las clases awp-* y el texto. El tema oscuro completo de un
   sitio Astra (cabecera, pie, fondos) es más trabajo; si lo quieres
   de verdad, mejor un esquema oscuro propio o un plugin.
   Descomenta este bloque solo si te vale con teñir estos componentes.

@media (prefers-color-scheme: dark){
  :root{
    --awp-accent-dark:#7CC1E0; --awp-ink:#E7EEF2; --awp-muted:#93A6B0;
    --awp-line:rgba(255,255,255,.12); --awp-surface:#161F26;
    --awp-soft:#16323F; --awp-soft-ink:#9FD2EA;
    --awp-neutral:#ADB9C1; --awp-neutral-bg:#1D272E;
    --awp-urg:#FF7A7D; --awp-urg-bg:#3A1D1F; --awp-band:#070C10;
  }
}
================================================================= */