/* =========================
   Design Tokens (Global)
========================= */

:root {
  /* Brand */
  --color-brand: #1f6feb;
  --color-brand-2: #0ea5e9;

  /* Neutral */
  --color-bg: #ffffff;
  --color-surface: #f7f7f8;
  --color-text: #111827;
  --color-muted: #4b5563;
  --color-border: #e5e7eb;

  /* Feedback */
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger: #dc2626;

  /* CTA */
  --color-cta-bg: var(--color-brand-2);
  --color-cta-text: #ffffff;
  --color-cta-bg-hover: #1557b0;

  /* Links */
  --color-link: var(--color-brand);
  --color-link-hover: #1557b0;

  /* UI */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);

  /* Layout */
  --container: 1400px;
  --gutter: 20px;

  /* Spacing scale */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 28px;
  --space-6: 40px;
  --space-7: 56px;

  /* Tipografía (sin tocar family) */
  --font-size-base: 16px;
  --line-height-base: 1.7;

  --h1-size: clamp(2.2rem, 4vw, 3.2rem);
  --h2-size: clamp(1.8rem, 3vw, 2.4rem);
  --h3-size: clamp(1.4rem, 2vw, 1.8rem);
  --h4-size: 1.2rem;

  --h-line: 1.15;

  --p-margin: var(--space-4);
  --h-margin-top: var(--space-6);
  --h-margin-bottom: var(--space-3);

  /* Hero */
  --color-hero-title: #00966c;

  /* Color del anillo */
  --services-ring-top: #60a5fa;
  --services-ring-bottom: var(--color-brand-2);
}

/* =========================
   Base
========================= */
body {
  color: var(--color-text);
  background: var(--color-bg);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* links */
a {
  color: var(--color-link);
}
a:hover {
  color: var(--color-link-hover);
}

/* Headings (sin tocar font-family) */
h1,
h2,
h3,
h4 {
  line-height: var(--h-line);
  margin-top: var(--h-margin-top);
  margin-bottom: var(--h-margin-bottom);
}

h1 {
  font-size: var(--h1-size);
  font-weight: 700;
}
h2 {
  font-size: var(--h2-size);
  font-weight: 700;
}
h3 {
  font-size: var(--h3-size);
  font-weight: 700;
}
h4 {
  font-size: var(--h4-size);
  font-weight: 700;
}

/* Párrafos */
p {
  margin-top: 0;
  margin-bottom: var(--p-margin);
}

/* Primer título sin margen superior (ajusta selector si lo necesitas) */
main h1:first-child,
main h2:first-child {
  margin-top: 0;
}

/* =========================
   Spacing system
========================= */

/* Secciones genéricas */
.section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

/* Variante compacta (si alguna sección debe ir más “apretada”) */
.section--sm {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

/* Variante amplia (hero o secciones con mucha presencia) */
.section--lg {
  padding-top: calc(var(--space-7) + var(--space-4));
  padding-bottom: calc(var(--space-7) + var(--space-4));
}

/* Separación estándar entre elementos dentro de una sección */
.stack > * + * {
  margin-top: var(--space-4);
}

/* Variante compacta para listas cortas */
.stack--sm > * + * {
  margin-top: var(--space-3);
}

/* Contenedor base */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* =========================
   GeneratePress layout neutralization
========================= */

.site-content {
  padding: 0;
}

.inside-article {
  padding: 0;
}

/* Evita que el contenido “se estreche” en ciertas plantillas */
.inside-article,
.inside-page-header,
.separate-containers .inside-article {
  width: 100%;
}

.entry-content {
  margin: 0;
}

.entry-content > * {
  max-width: 100%;
}

/* =========================
   SEPARADOR HORIZONTAL GLOBAL
   (fuera de bloques)
========================= */

.section-divider {
  padding: var(--space-6) 0; /* separación vertical entre bloques */
}

.section-divider hr {
  border: 0;
  border-top: 1px solid var(--color-brand-2);
  opacity: 0.6;

  width: min(900px, calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
  .section {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .section--lg {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
}

/* =========================================================
   Layout fullwidth (override GeneratePress)
   Aplica a páginas marcadas con body.is-fullwidth
========================================================= */

/* Quita el margen que mete GP en el área principal */
body.is-fullwidth.one-container .site-main {
  margin-right: 0 !important;
}

/* Asegura que el contenedor pueda ocupar todo el ancho */
body.is-fullwidth.one-container .inside-article,
body.is-fullwidth.one-container .inside-page-header,
body.is-fullwidth.one-container .inside-page-header-content,
body.is-fullwidth.one-container .inside-header,
body.is-fullwidth.one-container .inside-top-bar,
body.is-fullwidth.one-container .inside-footer-widgets,
body.is-fullwidth.one-container .inside-site-info,
body.is-fullwidth.one-container .inside-content {
  max-width: none;
  width: 100%;
}