/* CocheCierto - Sistema de Diseño y Temas Global (Dark & Light) */
:root {
  color-scheme: dark;
  --bg-base: #021a2d;
  --bg-surface: #082d46;
  --bg-surface-elevated: #0e3b5a;
  --bg-subtle: #062338;
  --ink-primary: #f5f9fb;
  --ink-secondary: #a6c3d0;
  --ink-muted: #6e8e9e;
  --brand-orange: #fc4c02;
  --brand-orange-hover: #ff6524;
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-active: rgba(252, 76, 2, 0.7);
  --card-shadow: 0 16px 40px rgba(0, 10, 20, 0.45);
  --header-glass: rgba(2, 26, 45, 0.92);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --container-max: 1440px;
}

:root[data-theme="light"],
html.theme-light,
body.theme-light,
.theme-light {
  color-scheme: light;
  --bg-base: #f3f7f5 !important;
  --bg-surface: #ffffff !important;
  --bg-surface-elevated: #ffffff !important;
  --bg-subtle: #e8f0ec !important;
  --ink-primary: #072230 !important;
  --ink-secondary: #3d5a68 !important;
  --ink-muted: #526a75 !important;
  --brand-orange: #fc4c02 !important;
  --brand-orange-hover: #e04300 !important;
  --border-subtle: #d0e0d8 !important;
  --border-active: #208560 !important;
  --card-shadow: 0 12px 36px rgba(7, 34, 48, 0.07) !important;
  --header-glass: rgba(243, 247, 245, 0.94) !important;
}

* {
  box-sizing: border-box;
}

html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background-color: var(--bg-base);
  color: var(--ink-primary);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.site-shell, .landing-shell, .page, .demo-app, .app {
  max-width: var(--container-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 56px) !important;
  padding-right: clamp(20px, 4vw, 56px) !important;
  padding-top: 20px;
  padding-bottom: 64px;
}

.site-header .nav-icon,
.site-header .landing-menu .nav-icon,
.site-header .site-nav .nav-icon { display: none; }
body:has(.legal-page) .site-header .nav-icon { display: none !important; }

.legal-page { max-width: 1080px; margin: 0 auto; }
.legal-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:28px 0; }
.legal-links a { color:inherit; text-decoration:none; }
.legal-copy { max-width:860px; padding:28px 0 56px; line-height:1.7; }
.legal-copy h2 { margin:30px 0 10px; }
.legal-footer { max-width:1080px; margin:24px auto 0; padding:28px 0 22px; border-top:1px solid var(--border,#2d5268); color:var(--text-muted,#8fb2c5); font-size:.82rem; line-height:1.5; }
.footer-inner { display:grid; gap:22px; }
.footer-brand { display:flex; flex-direction:column; gap:4px; }
.footer-brand strong { color:var(--text,#f6f8f9); font-size:1rem; }
.footer-social { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.footer-social-label { margin-right:4px; }
.social-link { display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 10px; border:1px solid var(--border,#2d5268); border-radius:999px; color:var(--text,#f6f8f9); text-decoration:none; font-weight:800; font-size:.74rem; transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease; }
.social-link svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.social-link-name { line-height:1; }
.social-link:hover, .social-link:focus-visible { transform:translateY(-2px); border-color:#ff5a14; color:#ff6b2b; background:rgba(255,90,20,.08); }
.footer-legal { display:flex; justify-content:center; align-items:center; gap:8px 16px; flex-wrap:wrap; padding-top:20px; border-top:1px solid color-mix(in srgb, var(--border,#2d5268) 70%, transparent); }
.legal-footer a { color:inherit; }
.footer-bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:18px; font-size:.78rem; }
@media (max-width:700px) { .legal-footer { margin:20px 16px 0; } .footer-legal { justify-content:flex-start; } .footer-bottom { display:grid; gap:6px; } }
.beta-notice { max-width:1080px; margin:10px auto 0; padding:9px 12px; display:flex; gap:9px; align-items:center; border:1px solid rgba(255,90,20,.55); border-radius:9px; color:var(--text,#f6f8f9); background:rgba(255,90,20,.08); font-size:.78rem; }
.beta-notice strong { color:#ff6b2b; white-space:nowrap; }
 .beta-notice span { color:var(--text-muted,#8fb2c5); }
 .beta-payment { margin-left:auto; white-space:nowrap; }
.conversion-orientation { max-width:1080px; margin:18px auto 0; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid color-mix(in srgb, var(--brand-orange,#ff5a14) 42%, var(--border,#2d5268)); border-radius:16px; background:linear-gradient(110deg, color-mix(in srgb, var(--brand-orange,#ff5a14) 10%, var(--surface,#0d3048)), var(--surface,#0d3048)); box-shadow:0 8px 26px rgba(0,0,0,.12); }
.conversion-orientation-copy { display:grid; gap:3px; min-width:0; }
.conversion-orientation-kicker { color:var(--brand-orange,#ff6b2b); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.conversion-orientation-copy strong { color:var(--text,#f6f8f9); font-size:1.02rem; }
.conversion-orientation-copy span:not(.conversion-orientation-kicker) { color:var(--text-muted,#8fb2c5); font-size:.88rem; }
.conversion-orientation-copy small { color:var(--text-muted,#8fb2c5); font-size:.72rem; }
.conversion-orientation-cta { flex:0 0 auto; border-radius:999px; padding:11px 16px; background:var(--brand-orange,#ff5a14); color:#fff; font-weight:800; text-decoration:none; white-space:nowrap; }
.conversion-orientation-cta:hover,.conversion-orientation-cta:focus-visible { background:var(--brand-orange-hover,#e94d0b); color:#fff; }
 @media (max-width:700px) { .beta-notice { margin:8px 10px 0; display:block; line-height:1.45; } .beta-notice span { display:block; } .beta-payment { margin-top:3px; } }
 @media (max-width:700px) { .conversion-orientation { margin:14px 10px 0; display:grid; gap:12px; padding:15px; } .conversion-orientation-cta { text-align:center; } }
.cookie-banner { position:fixed; z-index:1000; left:16px; right:16px; bottom:16px; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:12px 16px; border:1px solid var(--border,#2d5268); border-radius:14px; background:var(--surface,#0d3048); color:var(--text,#f6f8f9); box-shadow:0 12px 32px rgba(0,0,0,.28); }
.cookie-banner p { margin:3px 0; max-width:760px; font-size:.82rem; }
.cookie-banner a { color:inherit; font-size:.82rem; }
.cookie-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.cookie-actions button { border:1px solid currentColor; border-radius:8px; padding:9px 12px; background:transparent; color:inherit; cursor:pointer; }
.cookie-actions button.primary { background:#ff5a14; border-color:#ff5a14; color:#fff; }
.cookie-settings { position:fixed; inset:0; z-index:1001; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.58); }
.cookie-settings-card { width:min(520px,100%); padding:24px; border:1px solid var(--border,#2d5268); border-radius:14px; background:var(--surface,#0d3048); color:var(--text,#f6f8f9); box-shadow:0 20px 60px rgba(0,0,0,.4); }
.cookie-settings-card label { display:flex; gap:10px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--border,#2d5268); }
.cookie-settings-card small { display:block; margin-left:auto; color:var(--text-muted,#8fb2c5); }
@media (max-width:700px) { .cookie-banner { left:10px; right:10px; bottom:10px; display:block; padding:10px 12px; } .cookie-actions { margin-top:8px; justify-content:stretch; } .cookie-actions button { flex:1; min-height:38px; padding:8px 10px; font-size:.82rem; } }
.legal-copy table { width:100%; border-collapse:collapse; margin:18px 0; font-size:.95rem; }
.legal-copy th,.legal-copy td { border:1px solid var(--border,#2d5268); padding:10px; text-align:left; vertical-align:top; }
@media (max-width: 700px) { .legal-links { grid-template-columns:1fr; } .legal-copy table { display:block; overflow-x:auto; } }

.site-header, .landing-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px;
  padding: 12px 0 24px !important;
  position: relative;
  z-index: 100;
}

.brand-lockup, .site-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--ink-primary) !important;
  text-decoration: none !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  flex-shrink: 0;
}

.brand-lockup img, .site-brand img {
  width: 42px !important;
  height: 42px !important;
  display: block;
}

.brand-lockup strong, .site-brand strong {
  color: var(--brand-orange) !important;
}

.nav-links, .landing-menu, .site-nav {
  display: flex !important;
  align-items: center !important;
  gap: clamp(16px, 2.2vw, 32px) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-links a, .landing-menu a, .site-nav a {
  color: var(--ink-secondary) !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  transition: color 0.18s ease !important;
  position: relative;
  padding: 6px 0;
}

.nav-links a:hover, .landing-menu a:hover,
.nav-links a:focus-visible, .landing-menu a:focus-visible {
  color: var(--ink-primary) !important;
}

.nav-links a[aria-current="page"], .landing-menu a[aria-current="page"] {
  color: var(--brand-orange) !important;
  font-weight: 700 !important;
}

.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  box-shadow: 0 0 10px var(--brand-orange), 0 0 18px rgba(252, 76, 2, 0.55);
  background-color: var(--brand-orange);
  border-radius: 2px;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.nav-cta {
  background-color: var(--brand-orange) !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(252, 76, 2, 0.35) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.nav-cta:hover {
  background-color: var(--brand-orange-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(252, 76, 2, 0.45) !important;
}

.theme-toggle-btn {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--ink-primary) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 18px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
  padding: 0 !important;
}

.theme-toggle-btn:hover {
  border-color: var(--brand-orange) !important;
  color: var(--brand-orange) !important;
  transform: rotate(20deg) scale(1.05);
}

.mobile-menu-btn {
  display: none !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--ink-primary) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-sm) !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 20px !important;
  padding: 0 !important;
  touch-action: manipulation;
}
.mobile-bottom-nav, .mobile-menu-panel, .mobile-menu-backdrop { display: none; }

.install-app-prompt {
  position: fixed;
  z-index: 300;
  right: clamp(14px, 3vw, 32px);
  bottom: clamp(14px, 3vw, 32px);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(430px, calc(100vw - 28px));
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface-elevated);
  color: var(--ink-primary);
  box-shadow: var(--card-shadow);
}
.install-app-prompt div { display: grid; gap: 3px; min-width: 0; }
.install-app-prompt span { color: var(--ink-secondary); font-size: 13px; line-height: 1.35; }
.install-app-button { border: 0; border-radius: var(--radius-pill); padding: 10px 14px; background: var(--brand-orange); color: #fff; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.install-app-close { border: 0; background: transparent; color: var(--ink-secondary); font-size: 22px; cursor: pointer; padding: 2px 5px; }

@media (max-width: 880px) {
  .site-header, .landing-nav { padding: 8px 0 16px !important; }
  .brand-lockup, .site-brand { font-size: 22px !important; }
  .brand-lockup img, .site-brand img { width: 38px !important; height: 38px !important; }
  .mobile-menu-btn {
    display: inline-flex !important;
  }
  .nav-links, .landing-menu, .site-nav {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg-surface-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    box-shadow: var(--card-shadow) !important;
  }
  .nav-links.is-open, .landing-menu.is-open, .site-nav.is-open {
    display: flex !important;
  }
  .nav-links a, .landing-menu a, .site-nav a {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 16px !important;
    touch-action: manipulation;
  }
  .nav-links a:hover, .nav-links a:focus-visible,
  .landing-menu a:hover, .landing-menu a:focus-visible { background: var(--bg-subtle); }
}

@media (max-width: 880px) {
  body { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
  .cookie-banner { bottom: calc(76px + env(safe-area-inset-bottom) + 10px); }
  .site-shell, .landing-shell, .page, .demo-app, .app { padding-left: 16px !important; padding-right: 16px !important; }
  .site-header, .landing-nav { gap: 10px; }
  .brand-lockup, .site-brand { font-size: clamp(18px, 5vw, 22px) !important; }
  .brand-lockup img, .site-brand img { width: 34px !important; height: 34px !important; }
  .header-actions { gap: 7px !important; }
  .nav-cta { display: none !important; }
  /* El acceso unico al menu vive en la barra inferior para evitar dos hamburguesas. */
  .mobile-menu-btn { display: none !important; }
  .site-header .nav-links, .site-header .landing-menu, .site-header .site-nav { display: none !important; }
  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed;
    z-index: 250;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    gap: 4px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border: 1px solid var(--border-subtle);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: color-mix(in srgb, var(--bg-surface-elevated) 94%, transparent);
    box-shadow: 0 -10px 30px rgba(0, 10, 20, .28);
    backdrop-filter: blur(18px);
    transform: translateY(0);
    transition: transform .22s ease;
    will-change: transform;
  }
  .mobile-bottom-nav.nav-hidden { transform: translateY(110%); }
  .mobile-bottom-nav a, .mobile-bottom-nav button {
    min-width: 0;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 7px 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-secondary);
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
  }
  .mobile-bottom-nav a:hover, .mobile-bottom-nav a:focus-visible, .mobile-bottom-nav button:hover, .mobile-bottom-nav button:focus-visible { background: var(--bg-subtle); color: var(--ink-primary); }
  .mobile-bottom-nav .nav-icon { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-bottom-nav .mobile-bottom-primary { background: var(--brand-orange); color: #fff; box-shadow: 0 5px 16px rgba(252, 76, 2, .3); }
  .mobile-bottom-nav .mobile-bottom-primary:hover, .mobile-bottom-nav .mobile-bottom-primary:focus-visible { background: var(--brand-orange-hover); color: #fff; }
  .mobile-menu-backdrop { display: block; position: fixed; inset: 0; z-index: 300; background: rgba(2, 18, 31, .64); }
  .mobile-menu-backdrop[hidden], .mobile-menu-panel[hidden] { display: none !important; }
  .mobile-menu-panel { display: grid; gap: 18px; position: fixed; z-index: 301; inset: 12px 12px calc(86px + env(safe-area-inset-bottom)) 12px; overflow-y: auto; padding: 20px 16px 24px; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--bg-surface-elevated); box-shadow: 0 24px 70px rgba(0, 10, 20, .4); color: var(--ink-primary); }
  .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 4px; font-size: 18px; }
  .mobile-menu-close { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border-subtle); border-radius: 50%; background: transparent; color: var(--ink-primary); font-size: 25px; cursor: pointer; }
  .mobile-menu-group { display: grid; gap: 6px; }
  .mobile-menu-group > span { margin-bottom: 3px; color: var(--brand-orange); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
  .mobile-menu-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 9px 10px; border-radius: 10px; color: var(--ink-primary); text-decoration: none; }
  .mobile-menu-link:hover, .mobile-menu-link:focus-visible { background: var(--bg-subtle); }
  .mobile-menu-link .nav-icon { flex: 0 0 auto; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-menu-link span { display: grid; gap: 2px; min-width: 0; }
  .mobile-menu-link strong { font-size: 15px; }
  .mobile-menu-link small { color: var(--ink-secondary); font-size: 12px; line-height: 1.3; }
  body.menu-open { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav { transition: none; }
  }
  .install-app-prompt { align-items: flex-start; gap: 8px; }
  .install-app-button { align-self: center; }
}

.eyebrow {
  margin: 0;
  color: var(--brand-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guide-download-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;margin:0 0 56px;padding:28px 30px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-left:4px solid var(--brand-orange);border-radius:var(--radius-lg);box-shadow:var(--card-shadow)}
.guide-download-card h2{margin:7px 0 10px;color:var(--ink-primary);font-size:clamp(24px,3vw,34px);letter-spacing:-.03em}
.guide-download-card p:not(.eyebrow):not(.guide-download-meta){max-width:680px;margin:0;color:var(--ink-secondary);line-height:1.55}
.guide-download-meta{margin:14px 0 0;color:var(--ink-secondary);font-size:13px;line-height:1.45}
.guide-download-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:220px}
.guide-download-link{justify-content:center;text-align:center;white-space:nowrap}
.guide-download-secondary{text-align:center;color:var(--brand-orange);font-size:14px;font-weight:800;text-decoration:none}
.guide-download-secondary:hover,.guide-download-secondary:focus-visible{text-decoration:underline}
.guide-index-download{display:inline-flex;margin-left:6px;color:var(--brand-orange);font-size:12px;font-weight:800;white-space:nowrap;text-decoration:none}.guide-index-download:hover,.guide-index-download:focus-visible{text-decoration:underline}
@media(max-width:760px){.guide-download-card{grid-template-columns:1fr;gap:20px;margin-bottom:40px;padding:22px}.guide-download-actions{min-width:0}.guide-download-link{white-space:normal}}

.context-panel,.next-step-panel,.method-flow,.resource-finder{margin:0 0 64px;padding:32px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--card-shadow)}
.context-panel h2,.next-step-panel h2,.method-flow h2,.resource-finder h2{margin:8px 0 12px;color:var(--ink-primary);letter-spacing:-.03em;font-size:clamp(28px,4vw,44px)}
.context-intro{max-width:720px;color:var(--ink-secondary);line-height:1.6}.context-controls{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.context-tab{border:1px solid var(--border-subtle);border-radius:999px;background:transparent;color:var(--ink-primary);padding:10px 14px;font:inherit;font-size:14px;cursor:pointer}.context-tab.is-active,.context-tab:hover{background:var(--brand-orange);border-color:var(--brand-orange);color:#fff}.context-result{border-left:3px solid var(--brand-orange);padding:4px 0 4px 18px;color:var(--ink-secondary);line-height:1.6}.context-result h3{margin:0 0 8px;color:var(--ink-primary);font-size:22px}.context-result p{margin:0 0 8px}
.next-step-grid,.flow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.flow-grid{grid-template-columns:repeat(4,1fr)}.next-step-grid>div,.flow-grid article{padding:18px;background:var(--bg-elevated,var(--bg-surface));border:1px solid var(--border-subtle);border-radius:var(--radius-md,12px)}.next-step-grid p,.flow-grid p{margin:8px 0 0;color:var(--ink-secondary);font-size:14px;line-height:1.5}.flow-grid span{color:var(--brand-orange);font-weight:800}.flow-grid h3{margin:8px 0 0;color:var(--ink-primary)}.method-note{padding:16px;border-left:3px solid var(--brand-orange);color:var(--ink-secondary);line-height:1.5}.resource-finder form{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.resource-finder label{display:flex;flex-direction:column;gap:6px;color:var(--ink-primary);font-weight:700;font-size:14px}.resource-finder select{min-width:min(100%,360px);padding:12px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-base,var(--bg-surface));color:var(--ink-primary);font:inherit}.resource-recommendation{margin-top:20px;color:var(--ink-secondary);line-height:1.6}.resource-recommendation h3{color:var(--ink-primary)}.resource-recommendation a{color:var(--brand-orange);font-weight:700}
@media(max-width:760px){.context-panel,.next-step-panel,.method-flow,.resource-finder{padding:22px;margin-bottom:40px}.next-step-grid,.flow-grid{grid-template-columns:1fr}.context-controls{display:grid;grid-template-columns:1fr}.context-tab{text-align:left}.resource-finder form{align-items:stretch;flex-direction:column}.resource-finder select,.resource-finder .button{width:100%;max-width:none}}
/* Clara: etiqueta discreta, sin peso visual excesivo. */
.clara-fab span { font-weight: 400; }