/* ==========================================================================
   forECast — Design System
   Climate intelligence for operational decisions · Ecuador
   ========================================================================== */

/* --- Design tokens --- */
:root {
  /* Brand palette — sampled from logo_forECast: teal disc #1a646a, navy type #1d1f35 */
  --ocean-deep: #1d1f35;
  --ocean: #17454c;
  --ocean-light: #1a646a;
  --teal: #1a646a;
  --teal-light: #2b8a91;
  --teal-pale: #e2eeee;
  --amber: #f59e0b;
  --amber-light: #fbbf24;
  --amber-pale: #fef3c7;
  --slate-900: #1d1f35;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --white: #ffffff;

  /* Semantic */
  --bg: var(--slate-50);
  --bg-alt: var(--white);
  --ink: var(--slate-900);
  --ink-soft: var(--slate-700);
  --muted: var(--slate-500);
  --border: var(--slate-200);
  --primary: var(--teal);
  --primary-dark: #134d52;
  --accent: var(--amber);
  --hero-bg: linear-gradient(135deg, var(--ocean-deep) 0%, var(--ocean) 40%, var(--ocean-light) 100%);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.16);

  /* Layout */
  --container: 1140px;
  --container-narrow: 780px;
  --header-h: 68px;

  /* Transitions */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--primary-dark); }

/* --- Typography --- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; }
p { margin-bottom: 1rem; }
/* Inherits colour on purpose: a hardcoded dark value here disappears against
   the dark footer and callout surfaces. */
strong { font-weight: 600; }
code {
  font-family: var(--font-mono);
  background: var(--code-bg);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.85em;
  color: var(--code-ink);
}
ul, ol { margin-bottom: 1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.4rem; }

/* --- Layout helpers --- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-lg); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-lg); }

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  display: flex;
  align-items: center;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
/* The lockup uses the real brand assets: teal disc mark + official wordmark. */
.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.logo .logo-mark { width: 38px; height: 38px; }
.logo .logo-wordmark { height: 22px; width: auto; }
.footer-brand .logo { margin-bottom: var(--space-md); }
.footer-brand .logo .logo-mark { width: 44px; height: 44px; }
.footer-brand .logo .logo-wordmark { height: 25px; }
.footer-brand .logo-lines { display: flex; flex-direction: column; gap: 5px; }
.footer-brand .logo-tagline { height: 9px; width: auto; opacity: 0.75; }

.nav-main {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.nav-main > li { list-style: none; position: relative; }
.nav-main > li > a {
  display: block;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: all var(--t-fast);
}
.nav-main > li > a:hover { color: var(--primary); background: var(--accent-soft); }

/* Dropdown */
.nav-dropdown { display: none; position: absolute; top: 100%; left: 0;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); min-width: 260px; padding: var(--space-xs); margin-top: 4px;
}
.nav-dropdown li { list-style: none; }
.nav-dropdown a { display: block; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: 0.9rem; font-weight: 500; }
.nav-dropdown a:hover { background: var(--surface-soft); color: var(--primary); }
.nav-main > li:hover .nav-dropdown { display: block; }
.nav-dropdown-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); padding: 0.6rem 0.8rem 0.3rem; font-weight: 600; }

.btn-cta-header {
  background: var(--primary);
  color: white !important;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem !important;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: all var(--t-fast);
  white-space: nowrap;
}
.btn-cta-header:hover { background: var(--primary-dark); color: white !important;
  box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Mobile nav toggle */
.nav-toggle { display: none; background: none; border: none; font-size: 1.5rem;
  cursor: pointer; color: var(--ink-soft); padding: 0.25rem; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
}
.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-dark); color: white;
  box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); color: white;
  border-color: rgba(255, 255, 255, 0.7); }
.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover { background: var(--accent-soft); color: var(--primary-dark); }
.btn-amber {
  background: var(--amber);
  color: var(--slate-900);
}
.btn-amber:hover { background: var(--amber-light); color: var(--slate-900);
  box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* --- Hero (Home) --- */
.hero {
  position: relative;
  background: var(--hero-bg);
  color: white;
  overflow: hidden;
  padding: var(--space-3xl) 0 var(--space-2xl);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='white' stroke-width='0.6' opacity='0.08'%3E%3Cpath d='M0 60 Q30 40 60 60 T120 60'/%3E%3Cpath d='M0 50 Q30 30 60 50 T120 50'/%3E%3Cpath d='M0 70 Q30 50 60 70 T120 70'/%3E%3Cpath d='M0 40 Q30 20 60 40 T120 40'/%3E%3Cpath d='M0 80 Q30 60 60 80 T120 80'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 360px 360px;
  opacity: 0.6;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--bg);
  clip-path: polygon(0 100%, 100% 100%, 100% 40%, 75% 70%, 50% 30%, 25% 70%, 0 50%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-light);
  background: rgba(13, 148, 136, 0.15);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
}
.hero h1 {
  color: white;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  max-width: 880px;
  margin-bottom: var(--space-md);
}
.hero-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: rgba(255, 255, 255, 0.82);
  max-width: 640px;
  margin-bottom: var(--space-xl);
  line-height: 1.6;
}
.hero-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* --- Page hero (interior pages) --- */
.page-hero {
  background: var(--hero-bg);
  color: white;
  padding: var(--space-2xl) 0 var(--space-xl);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='white' stroke-width='0.6' opacity='0.06'%3E%3Cpath d='M0 60 Q30 40 60 60 T120 60'/%3E%3Cpath d='M0 50 Q30 30 60 50 T120 50'/%3E%3Cpath d='M0 70 Q30 50 60 70 T120 70'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 300px;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: white; margin-bottom: var(--space-sm); }
.page-hero .lead {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 620px;
}

/* --- Sections --- */
.section { padding: var(--space-2xl) 0; }
.section-alt { background: var(--bg-alt); }
.section-heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--space-sm);
}
.section-sub {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 580px;
  margin-bottom: var(--space-xl);
}
/* Headings carry no bottom margin; a grid or step list right after one
   needs its own room («El proceso», «Guías abiertas» — Ingrid, 2026-09-05). */
h2 + .resource-grid,
h2 + .process-steps,
h3 + .process-steps { margin-top: var(--space-lg); }

/* --- Cards: Sectors --- */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}
.sector-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.sector-card:hover {
  border-color: var(--teal-light);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.sector-card .sector-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--primary);
  margin-bottom: var(--space-xs);
}
.sector-card .sector-icon svg { width: 26px; height: 26px; }
.sector-card:hover .sector-icon { background: var(--primary); color: white; }
.sector-card h3 { color: var(--ink); }
.sector-card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.sector-card .sector-arrow {
  margin-top: auto;
  font-weight: 600;
  color: var(--primary);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* --- Cards: Horizons --- */
.horizon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}
.horizon-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--t-base);
}
.horizon-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.horizon-card .horizon-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.3rem;
}
.horizon-card h3 { margin-bottom: 0.5rem; }
.horizon-card .horizon-q { color: var(--ink-soft); font-size: 1rem; margin-bottom: var(--space-md); }

/* --- Status badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.badge-available { background: var(--accent-soft); color: var(--primary-dark); }
.badge-dev { background: var(--amber-soft); color: var(--amber-ink); }
.badge-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.badge-available .badge-dot { background: var(--primary); }
.badge-dev .badge-dot { background: var(--amber); }

/* --- Process steps --- */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: relative;
}
.process-step {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}
.process-step-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--primary-dark);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.1rem;
  border: 2px solid var(--teal-light);
}
.process-step-body h3 { margin-bottom: 0.3rem; }
.process-step-body p { color: var(--ink-soft); margin: 0; }

/* --- Trust principles --- */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}
.principle {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.principle h4 { color: var(--primary-dark); margin-bottom: 0.3rem; }
.principle p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }

/* --- Tables --- */
.table-scroll { margin: var(--space-lg) 0; }
.table-scroll table { margin: 0; }
table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-lg) 0;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
thead th {
  background: var(--slate-800);
  color: white;
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}
tbody td {
  border: 1px solid var(--border);
  padding: 0.7rem 1rem;
  vertical-align: top;
}
tbody tr:nth-child(even) td { background: var(--surface-soft); }
tbody tr:hover td { background: var(--accent-soft); }

/* --- Blockquotes / callouts --- */
blockquote {
  border-left: 4px solid var(--amber);
  background: var(--amber-pale);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  color: #78350f;
}
blockquote p { margin: 0; }
blockquote strong { color: #92400e; }

.callout-state {
  background: var(--slate-800);
  color: var(--slate-300);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: 0.9rem;
  line-height: 1.6;
  border-left: 4px solid var(--amber);
}
.callout-state strong { color: white; }

/* --- Content area (interior pages) --- */
.page-content {
  padding: var(--space-2xl) 0 var(--space-3xl);
}
.page-content .container-narrow > h2 {
  margin-top: var(--space-xl);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--border);
}
.page-content .container-narrow > h2:first-child { margin-top: 0; }
.page-content .container-narrow > h3 {
  color: var(--primary-dark);
  margin-top: var(--space-lg);
}
.page-content .container-narrow > p > code { font-size: 0.85em; }

/* CTA box at end of pages */
.cta-box {
  background: var(--hero-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
  margin: var(--space-2xl) 0;
  color: white;
  position: relative;
  overflow: hidden;
}
.cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='white' stroke-width='0.6' opacity='0.05'%3E%3Cpath d='M0 60 Q30 40 60 60 T120 60'/%3E%3Cpath d='M0 50 Q30 30 60 50 T120 50'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 300px;
}
.cta-box > * { position: relative; z-index: 1; }
.cta-box h2 { color: white; margin-bottom: var(--space-sm); }
.cta-box p { color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; margin-bottom: var(--space-lg); }

/* --- Form --- */
.form-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
  margin: var(--space-xl) 0;
}
.form-group { margin-bottom: var(--space-md); }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.form-group label .req { color: #dc2626; }
.form-control {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface-soft);
  transition: all var(--t-fast);
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-alt);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}
textarea.form-control { min-height: 100px; resize: vertical; }
select.form-control { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-help { font-size: 0.85rem; color: var(--muted); margin-top: 0.3rem; }

/* --- Checkbox groups (multi-select fields) --- */
.checkbox-group { border: 0; padding: 0; margin-inline: 0; }
.checkbox-group legend {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: 0;
}
.checkbox-group legend .req { color: #dc2626; }
.checkbox-hint { margin: 0.15rem 0 0.5rem; }
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.5rem;
}
.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--t-fast);
}
.checkbox-option:hover { border-color: var(--primary); background: var(--bg-alt); }
.checkbox-option input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primary);
  cursor: pointer;
  margin: 0;
}
/* :has lets the whole chip react to its own checkbox; browsers without it
   still show the native check, so the state stays readable. */
.checkbox-option:has(input:checked) {
  border-color: var(--primary);
  background: rgba(13, 148, 136, 0.07);
  color: var(--primary-dark);
}
.checkbox-option:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.checkbox-group.is-invalid .checkbox-option { border-color: #dc2626; }
/* El consentimiento es un <label>, es decir inline por defecto: sin `display:
   block` su relleno, borde y margen verticales no ocupan altura, así que al
   partirse en varias líneas las cajas se solapan entre sí y sobre el botón de
   envío. La sangría francesa (padding-left + text-indent negativo) mantiene el
   texto alineado consigo mismo, con la casilla colgando a su izquierda. */
.form-consent {
  display: block;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  padding-left: calc(var(--space-md) + 1.6rem);
  text-indent: -1.6rem;
  margin: var(--space-md) 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* 1.05rem de ancho + 0.55rem de separación = los 1.6rem de la sangría. */
.form-consent input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0 0.55rem 0 0;
  accent-color: var(--primary);
  cursor: pointer;
  vertical-align: -0.15em;
}
.form-consent a { font-weight: 600; }

/* --- Team --- */
.team-grid {
  display: grid;
  /* auto-fill, no auto-fit: el bloque tiene dos rejillas (fundadores y
     colaboradores) y con auto-fit las dos tarjetas de colaborador se estiraban
     al doble de ancho que las tres de arriba. La pista vacía las mantiene
     alineadas en escritorio y no cambia la fila de tres. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
}
/* Rótulo de grupo dentro del bloque de equipo (fundadores / colaboradores). */
.team-group {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
}
.team-grid + .team-group { margin-top: var(--space-xl); }
.team-group + .section-sub { margin-bottom: var(--space-lg); }
.team-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  transition: all var(--t-base);
  display: flex;
  flex-direction: column;
}
.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.team-card .team-avatar {
  position: relative;
  overflow: hidden;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  margin: 0 auto var(--space-md);
  background: var(--hero-bg);
  display: grid;
  place-items: center;
  color: white;
  font-size: 1.8rem;
  font-weight: 700;
  box-shadow: 0 0 0 3px white, 0 0 0 4px var(--border);
}
.team-card .team-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-card h3 { font-size: 1.15rem; }
.team-card .team-role { color: var(--primary); font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-sm); }
.team-card p { font-size: 0.92rem; color: var(--ink-soft); text-align: left; }
.team-card .team-link { display: inline-block; margin-top: auto; padding-top: var(--space-md); font-size: 0.88rem; }

/* --- Resource cards --- */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}
.resource-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--t-base);
  display: flex;
  flex-direction: column;
}
.resource-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--teal-light); }
.resource-card .resource-num {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
}
.resource-card h3 { margin-bottom: var(--space-sm); font-size: 1.15rem; }
.resource-card p { color: var(--ink-soft); font-size: 0.95rem; flex-grow: 1; }
.resource-card .resource-link {
  margin-top: var(--space-md);
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.resource-gated { border-style: dashed; border-color: var(--amber); }
.resource-gated .resource-num { color: var(--amber); }
/* Briefs, not published articles: no hover lift, so the card does not read as
   a link to something that can be opened. */
.resource-pending { border-style: dashed; }
.resource-pending:hover { box-shadow: var(--shadow-sm); transform: none; border-color: var(--border); }
.resource-pending .badge { align-self: flex-start; margin-top: var(--space-md); }

/* --- Founding partners CTA --- */
.founding-cta {
  background: linear-gradient(135deg, var(--amber-pale) 0%, #fde68a 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
  border: 2px solid var(--amber);
  /* El fondo ámbar es fijo en los dos temas (`--amber-pale` no se redefine en
     oscuro), así que el texto tiene que fijarse aquí: heredar el color del
     tema dejaba el h2 casi invisible sobre la crema en modo oscuro. */
  color: #78350f;
}
.founding-cta h2 { margin-bottom: var(--space-sm); color: #451a03; }
.founding-cta p { color: #78350f; font-size: 1.1rem; margin-bottom: var(--space-lg); }

/* --- Footer --- */
.site-footer {
  background: var(--slate-900);
  color: var(--slate-400);
  padding: var(--space-2xl) 0 var(--space-lg);
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.footer-col h4 { color: white; font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: var(--space-sm); }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a { color: var(--slate-400); }
.footer-col a:hover { color: var(--teal-light); }
.footer-brand p { font-size: 0.88rem; color: var(--slate-500); max-width: 280px; }
.footer-state-disclaimer {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin: var(--space-lg) 0;
  font-size: 0.85rem;
  color: var(--slate-300);
  line-height: 1.6;
}
.footer-state-disclaimer strong { color: white; }
.footer-bottom {
  border-top: 1px solid var(--slate-800);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.footer-bottom .lang-selector { display: flex; align-items: center; gap: 0.5rem; }
.footer-bottom .lang-selector a,
.footer-bottom .lang-selector span {
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
}
.footer-bottom .lang-selector .active { background: var(--slate-800); color: white; }
/* EN is rendered as inert text until the English pages exist, so it cannot
   look clickable and jump to the top of the page. */
.footer-bottom .lang-selector .lang-pending { color: var(--slate-600); cursor: default; }
.footer-bottom .lang-selector .lang-pending::after {
  content: " · en preparación";
  font-weight: 400;
  font-size: 0.78rem;
}
.consent-settings {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--slate-400);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.consent-settings:hover,
.consent-settings:focus-visible { color: var(--teal-light); }

/* Consent Mode avanzado: ambos botones tienen el mismo peso visual para que
   rechazar analítica sea tan fácil como aceptarla. */
.consent-banner {
  position: fixed;
  z-index: 1000;
  inset: auto var(--space-md) var(--space-md) var(--space-md);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  color: var(--ink);
  box-shadow: var(--shadow-xl);
}
.consent-banner[hidden] { display: none; }
.consent-banner p { margin: 0 0 var(--space-md); color: var(--ink-soft); }
.consent-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.consent-actions .btn { flex: 1 1 180px; justify-content: center; }
.contact-alternative { margin-top: var(--space-lg); text-align: center; }

/* --- Thank you page --- */
.thank-you {
  text-align: center;
  padding: var(--space-3xl) 0;
}
.thank-you .check-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--primary-dark);
  display: grid;
  place-items: center;
  font-size: 2rem;
  margin: 0 auto var(--space-lg);
}
.thank-you h1 { margin-bottom: var(--space-md); }
.thank-you p { font-size: 1.15rem; color: var(--ink-soft); max-width: 480px; margin: 0 auto var(--space-lg); }

/* --- Utilities --- */
.text-center { text-align: center; }
.mt-xl { margin-top: var(--space-xl); }
.mb-0 { margin-bottom: 0; }
.lead { font-size: 1.15rem; color: var(--ink-soft); }
 hr { border: none; border-top: 1px solid var(--border); margin: var(--space-xl) 0; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-main { display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-alt); border-bottom: 1px solid var(--border);
    flex-direction: column; padding: var(--space-md); gap: 0; box-shadow: var(--shadow-lg); }
  .nav-main.open { display: flex; }
  .nav-main > li { width: 100%; }
  .nav-main > li > a { display: block; padding: 0.7rem 0.5rem; }
  .nav-dropdown { display: none !important; }
  .nav-toggle { display: block; }
  .btn-cta-header { margin-top: var(--space-sm); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .hero { padding: var(--space-2xl) 0 var(--space-xl); }
  .hero::after { display: none; }
  .process-step { flex-direction: column; gap: var(--space-sm); }
  /* `--space-2xl` a cada lado deja ~165 px de contenido en un teléfono de
     375 px: el formulario del Desafío de Decisión partía cada frase en dos o
     tres palabras por línea. El relleno se reduce solo aquí. */
  .form-card { padding: var(--space-lg); }
  /* Turnstile se dibuja en un iframe de 300 px fijos, y la columna del
     formulario mide 245 px en un teléfono: el recuadro se salía de la tarjeta.
     Se escala al 80 % (240 px) y se corrige la altura de la caja, que el
     `transform` no cambia por sí solo. */
  .cf-turnstile { transform: scale(0.8); transform-origin: left top; height: 52px; }
  .worksheet-points { padding-left: var(--space-md); }
}

/* Flecha de la tarjeta de recurso: misma pauta que .sector-arrow, empujada al
   pie de la tarjeta para que las descripciones de distinta longitud no
   desalineen las flechas entre tarjetas. */
.resource-card .resource-arrow {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-weight: 600;
  color: var(--primary);
  font-size: 0.9rem;
}

/* Los siete puntos de la guía de trabajo, listados desde el brief. */
.worksheet-points {
  margin: var(--space-sm) 0 var(--space-md);
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.7;
}
.worksheet-points li { margin-bottom: 0.3rem; }
.worksheet-points strong { color: var(--text); font-weight: 600; }

/* Trampa para bots: fuera de la pantalla, no `display:none`, para que un
   programa que lee el HTML no la distinga de un campo real. Queda fuera del
   orden de tabulación y del árbol de accesibilidad (`aria-hidden` en el HTML). */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Resultado del envío del formulario. `role="status"` en el HTML hace que un
   lector de pantalla lo anuncie sin robar el foco. */
.form-status {
  margin-top: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.form-status-ok {
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
}
.form-status-error {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

/* ==========================================================================
   Rediseño 2026-08 — modo oscuro seleccionable, atmósfera en movimiento,
   fotos sectoriales y panel ilustrativo. Aprobado por Fabio sobre el lienzo
   «forECast.ec · Rediseño» el 2026-08-20.
   ========================================================================== */

/* --- Tokens semánticos nuevos (valores claros = los originales) --- */
:root {
  color-scheme: light;
  --surface-soft: var(--slate-50);
  --code-bg: var(--slate-100);
  --code-ink: var(--ocean);
  --accent-soft: var(--teal-pale);
  --amber-soft: var(--amber-pale);
  --amber-ink: #92400e;
}

/* --- Tema oscuro: solo por elección explícita (conmutador de la cabecera),
       nunca por prefers-color-scheme. El atributo lo pone site_theme.js y el
       script anti-parpadeo de <head>. --- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1120;
  --bg-alt: #171a2f;
  --ink: #e2e8f0;
  --ink-soft: #cbd5e1;
  --muted: #94a3b8;
  --border: #262a45;
  --surface-soft: #141729;
  --code-bg: #262a45;
  --code-ink: #7ccdd4;
  --accent-soft: rgba(43, 138, 145, 0.16);
  --amber-soft: rgba(245, 158, 11, 0.15);
  --amber-ink: #fbbf24;
  --primary: #4aa6ad;
  /* En oscuro el hover de enlace aclara en vez de oscurecer. */
  --primary-dark: #7ccdd4;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] .site-header {
  background: rgba(15, 17, 32, 0.92);
}
:root[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}

/* Cabecera: la marca denominativa azul marino desaparece sobre oscuro;
   el generador emite las dos variantes y aquí se conmutan. */
.logo-wordmark-ondark { display: none; }
:root[data-theme="dark"] .site-header .logo-wordmark-onlight { display: none; }
:root[data-theme="dark"] .site-header .logo-wordmark-ondark { display: block; }

/* --- Conmutador de idioma (cabecera, a la izquierda del de tema) --- */
.lang-switch-li { display: flex; align-items: center; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.nav-main > li > .lang-switch span,
.nav-main > li > .lang-switch a {
  display: block;
  padding: 0.28rem 0.55rem;
  border-radius: var(--radius-full);
  line-height: 1.25;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-main > li > .lang-switch .lang-switch-on { background: var(--primary); color: white; }
.nav-main > li > .lang-switch a { color: var(--muted); }
.nav-main > li > .lang-switch a:hover { color: var(--primary); background: var(--accent-soft); }

/* --- Conmutador de tema --- */
.theme-switch-li { display: flex; align-items: center; }
.theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.theme-switch:hover { color: var(--primary); border-color: var(--primary); background: var(--accent-soft); }
.theme-switch svg { width: 18px; height: 18px; }
.theme-switch .icon-sun { display: none; }
:root[data-theme="dark"] .theme-switch .icon-sun { display: block; }
:root[data-theme="dark"] .theme-switch .icon-moon { display: none; }
@media (max-width: 860px) {
  .theme-switch-li { padding: 0.5rem 0; }
  .lang-switch-li { padding: 0.5rem 0; }
}

/* --- Hero: dinámica sinóptica decorativa (HS: A antihorario, B horario) --- */
.hero .container { position: relative; z-index: 1; }
.hero-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@keyframes hero-flowline { to { stroke-dashoffset: -640; } }
@keyframes hero-giro { to { transform: rotate(360deg); } }
.hero-flow .flow-1 { stroke-dasharray: 14 626; animation: hero-flowline 5s linear infinite; }
.hero-flow .flow-2 { stroke-dasharray: 14 626; animation: hero-flowline 6.5s linear infinite; animation-delay: -2.5s; }
.hero-flow .flow-3 { stroke-dasharray: 14 626; animation: hero-flowline 8s linear infinite; animation-delay: -4.5s; }
.hero-flow .sys { transform-box: fill-box; transform-origin: center; }
.hero-flow .sys-anti { animation: hero-giro 30s linear infinite reverse; }
.hero-flow .sys-ciclon { animation: hero-giro 15s linear infinite; }

/* --- Entradas por scroll (mejora progresiva: sin JS nada se oculta) --- */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.js-reveal .reveal:nth-child(2) { transition-delay: 0.1s; }
.js-reveal .reveal:nth-child(3) { transition-delay: 0.2s; }
.js-reveal .reveal:nth-child(4) { transition-delay: 0.3s; }

/* --- Foto sectorial (recortes en assets/sectores/) --- */
.sector-photo {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}
/* Los paneles solares están en la base de la foto de energía. */
.sector-photo-energia { object-position: center 80%; }

/* --- Panel ilustrativo en «la promesa» de la portada --- */
/* La promesa: texto arriba y el extracto a lo ancho debajo (Fabio, 2026-09-09:
   el bloque en columna quedaba alto y estrecho al lado del texto). */
.promise-intro { max-width: var(--container-narrow); margin-bottom: var(--space-lg); }
.panel-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.panel-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--primary);
}
.panel-chip {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--amber-soft);
  color: var(--amber-ink);
  white-space: nowrap;
}

/* --- Extracto ilustrativo del informe diario («la promesa» de la portada) ---
   Reutiliza el sistema gráfico del boletín v3 (dirección A, Piloto_Lloa/
   Diseno_Boletin_v3.md): papel crema y tinta navy fijos en los dos temas. La
   tarjeta es un documento apoyado sobre la página, y en modo oscuro ese
   contraste es justo lo que la hace legible; por eso cada regla con fondo
   claro declara su propio color (work/check_contraste_oscuro.py). */
.brief-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: #fbf8f1;
  color: #1d1f35;
  border: 1px solid #d9d3c4;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-lg);
}
.brief-card .panel-kicker { color: #1d1f35; }

/* Título de módulo: píldora rellena y filete del mismo tono hasta el margen. */
.brief-block-head { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.brief-block-head::after { content: ""; flex: 1; height: 2px; background: currentColor; opacity: 0.28; }
.brief-head-risk { color: #3b7ea1; }
.brief-head-days { color: #1d1f35; }
.brief-tag {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fbf8f1;
}
.brief-head-risk .brief-tag { background: #3b7ea1; }
.brief-head-days .brief-tag { background: #1d1f35; }

.brief-risks, .brief-days { display: grid; gap: 10px; }
.brief-risks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brief-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.brief-risk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  color: #1d1f35;
  border: 1px solid #3b7ea1;
  border-radius: var(--radius-md);
}
.brief-risk-icon { width: 30px; height: 30px; flex-shrink: 0; }
.brief-risk-tag {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #3b7ea1;
}
/* Los párrafos del sitio llevan margen inferior; dentro de la tarjeta el
   espaciado lo pone la retícula. */
.brief-card p { margin-bottom: 0; }
.brief-risk-title { font-size: 0.86rem; font-weight: 700; line-height: 1.35; color: #3b7ea1; }
.brief-risk-note { font-size: 0.78rem; line-height: 1.35; color: #5b6068; }

.brief-day {
  padding: 12px;
  background: #ffffff;
  color: #1d1f35;
  border: 1px solid #dfe3e8;
  border-radius: var(--radius-md);
}
.brief-day-name { font-size: 0.88rem; font-weight: 700; color: #1d1f35; }
.brief-day-main { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
.brief-day-icon { width: 44px; height: 44px; flex-shrink: 0; }
.brief-day-temps { font-size: 1.15rem; font-weight: 700; line-height: 1.2; color: #1d1f35; }
.brief-day-meta { font-size: 0.76rem; line-height: 1.3; color: #5b6068; }
.brief-conf { border-top: 1px solid #e7e2d6; padding-top: 8px; }
.brief-conf-title {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #5b6068;
}
.brief-conf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.78rem;
  color: #1d1f35;
}
.brief-bars { display: inline-flex; gap: 3px; flex-shrink: 0; }
/* Segmento vacío: sin texto, pero el color se declara igual — la regla del
   contraste no distingue cajas vacías y es más barato cumplirla. */
.brief-bar { width: 9px; height: 4px; border-radius: 2px; background: #d5dbd8; color: #1d1f35; }
.brief-bar.is-on { background: #1a646a; }
.brief-note { font-size: 0.72rem; line-height: 1.4; color: #5b6068; }

/* --- Banda con el gráfico del panel --- */
.chart-band {
  max-width: var(--container);
  margin: 0 auto;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chart-band img { width: 100%; height: auto; border-radius: var(--radius-sm); background: #ffffff; }

@media (max-width: 900px) {
  /* Los riesgos se apilan (frases largas); los días pasan a 2×2, que es lo
     que evita una tarjeta de scroll interminable en el teléfono. */
  .brief-risks { grid-template-columns: 1fr; }
  .brief-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief-day-icon { width: 36px; height: 36px; }
}

/* En un teléfono estrecho, 2×2 deja 130 px por día y «19° / 1°» parte en dos
   renglones: cada día pasa a una fila con la confianza al lado. */
@media (max-width: 560px) {
  .brief-days { grid-template-columns: 1fr; }
  .brief-day { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-items: center; }
  .brief-day-name { grid-column: 1 / -1; }
  .brief-day-main { margin: 6px 0 0; }
  .brief-conf { border-top: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-flow .flow-1, .hero-flow .flow-2, .hero-flow .flow-3, .hero-flow .sys { animation: none; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Rediseño 2026-08-21: contraste y tarjetas de entrega ─────────────────── */
/* Banda de contraste (app genérica vs forECast) en la portada. */
.contrast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.contrast-cell {
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.contrast-cell p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
}
.contrast-app { color: var(--muted); }
.contrast-forecast {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}
.contrast-forecast p { color: var(--text); font-weight: 500; }
.contrast-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}
.contrast-forecast .contrast-label { color: var(--primary); text-transform: none; letter-spacing: 0.02em; font-size: 0.9rem; }
.contrast-remate {
  margin-top: var(--space-lg);
  text-align: center;
  font-weight: 600;
  color: var(--primary-dark);
}
@media (max-width: 720px) {
  .contrast-grid { grid-template-columns: 1fr; }
}

/* Tarjeta «Así podría verse una entrega» en las fichas de sector. Lleva el
   papel del boletín v3 (dirección A) para que el ejemplo se lea como el
   entregable, con un icono por fila. Los colores van fijos, también en modo
   oscuro: es una hoja de papel, no una superficie de la interfaz. */
.entrega-card {
  background: #fbf8f1;
  color: #1d1f35;
  border: 1px solid #d9d3c4;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-lg);
  margin: var(--space-lg) 0;
}
.entrega-card h3 { margin-top: 0; color: #1d1f35; }
.entrega-context {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a646a;
  margin: 0 0 var(--space-sm);
}
.entrega-table, .table-scroll { overflow-x: auto; }
.entrega-table table { margin: 0; box-shadow: none; }
.entrega-table thead th { background: #1d1f35; color: #fbf8f1; }
.entrega-table tbody td {
  background: #ffffff;
  color: #1d1f35;
  border-color: #e7e2d6;
}
.entrega-table tbody tr:nth-child(even) td { background: #f6f2e8; color: #1d1f35; }
.entrega-table tbody tr:hover td { background: #f1ece0; color: #1d1f35; }
.entrega-table td:last-child { font-weight: 600; color: #1a646a; }
.entrega-icon-cell { width: 52px; padding-right: 0; }
/* El `img { max-width: 100%; height: auto }` global colapsa el SVG cuando la
   tabla se estrecha; el icono conserva su tamaño y la tabla desplaza. */
.entrega-icon-cell img { width: 26px; height: 26px; max-width: none; }
.entrega-foot {
  margin: var(--space-sm) 0 0;
  font-size: 0.85rem;
  color: #5b6068;
}

/* ─── Hoja de trabajo (54): campos editables que se imprimen completos ─────
   Los <textarea> anteriores recortaban al imprimir el texto que excedía sus
   renglones; un bloque contenteditable crece con lo escrito y sale entero. */
.ws-lead { color: var(--ink-soft); margin-bottom: var(--space-lg); }
.ws-side-title { margin: var(--space-xl) 0 var(--space-md); }
.ws-section { margin-bottom: var(--space-lg); }
.ws-section h3 { margin-bottom: 0.4rem; }
.ws-sec-intro { color: var(--muted); margin-bottom: var(--space-md); }
.ws-sec-closing { color: var(--ink-soft); font-style: italic; margin-top: var(--space-sm); }
.ws-field { margin-bottom: var(--space-md); }
.ws-label { font-weight: 600; margin-bottom: 0.2rem; }
.ws-hint { color: var(--muted); font-size: 0.92rem; margin-bottom: 0.4rem; }
.ws-input {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
  padding: 0.55rem 0.7rem;
  min-height: 2.4rem;
}
.ws-caja { min-height: 4.6rem; }
.ws-input:focus { outline: 2px solid var(--teal-light); outline-offset: 1px; }
.ws-example { color: var(--muted); font-size: 0.85rem; font-style: italic; margin: 0.3rem 0 0; }
.ws-example-tag { font-weight: 600; font-style: normal; }
.ws-template { line-height: 2.1; }
.ws-blank {
  display: inline-block;
  min-width: 7ch;
  border-bottom: 1.5px solid var(--ink-soft);
  padding: 0 0.3rem;
}
.ws-table-wrap { overflow-x: auto; margin: 0.4rem 0; }
.ws-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ws-table th, .ws-table td {
  border: 1px solid var(--border);
  padding: 0.45rem 0.55rem;
  text-align: left;
  vertical-align: top;
}
.ws-table thead th { background: var(--bg); font-weight: 600; }
.ws-table td[contenteditable] { min-width: 7rem; height: 2.2rem; }
.ws-grilla th[scope="row"] { white-space: nowrap; font-weight: 600; background: var(--bg); }
.ws-grilla .ws-input { border-style: dashed; min-height: 2.2rem; margin-bottom: 0.2rem; }
.ws-grilla .ws-example { font-size: 0.8rem; }

/* Al imprimir, cualquier página pierde su cromo; la hoja de trabajo además
   reparte sus dos caras en dos páginas, compacta la tipografía y mantiene
   entero cada campo (las secciones sí pueden fluir, o cada cara desborda). */
@page { margin: 11mm; }
@media print {
  .site-header, .site-footer, .cta-box, .btn, .hero-flow, .theme-switch,
  .lang-switch { display: none !important; }
  /* Un solo mando tipográfico: encoger el rem del root encoge todo en
     proporción. El body debe medirse en rem aquí — en pantalla son 17px
     fijos, y con el root encogido eso invertía la jerarquía (párrafos más
     grandes que los h3). */
  html { font-size: 11.5px; }
  body { background: #fff !important; color: #000 !important; font-size: 1rem; line-height: 1.4; }
  .page-content { padding-top: 0.5rem; }
  /* El hero pinta blanco sobre gradiente oscuro con selectores más
     específicos que `.page-hero p`; en papel manda el negro. */
  .page-hero { background: none !important; padding: 0 0 0.4rem; }
  .page-hero, .page-hero * { color: #000 !important; }
  .page-hero h1 { font-size: 1.6rem; }
  .ws-lead { margin-bottom: 0.8rem; }
  .ws-side-title { break-before: page; break-after: avoid-page; margin: 0 0 0.6rem; }
  .ws-side-title:first-of-type { break-before: auto; }
  .ws-section { margin-bottom: 0.9rem; }
  .ws-section h3 { break-after: avoid-page; }
  .ws-field { break-inside: avoid; margin-bottom: 0.55rem; }
  .ws-table-wrap { break-inside: avoid; overflow-x: visible; }
  .ws-sec-intro { margin-bottom: 0.5rem; }
  .ws-input { min-height: 1.8em; padding: 0.3rem 0.45rem; }
  .ws-caja { min-height: 3.2em; }
  .ws-input, .ws-blank, .ws-table th, .ws-table td { border-color: #777 !important; }
  .ws-table thead th, .ws-grilla th[scope="row"] {
    background: #eee !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .ws-example, .ws-hint, .ws-sec-intro { color: #444 !important; }
  .ws-section h3 { margin: 0 0 0.25rem; }
  .ws-grilla th, .ws-grilla td { padding: 0.3rem 0.4rem; }
  .ws-grilla .ws-input { min-height: 1.5em; }
  .ws-grilla .ws-example { font-size: 0.72rem; }
  .ws-sec-closing { margin-top: 0.3rem; }
}