/* certificacionespr — public marketing site.
   Ported from the Claude Design prototype (ADR-0017 D3). Element structure
   and inline styles are kept as authored; this file exists ONLY for what
   inline HTML cannot express: @font-face, keyframes, and the :hover/:focus/
   :active/::before/::after states the prototype expressed as design-tool
   pseudo-attributes (style-hover / style-focus / style-before / style-after
   / style-active — none of those are real CSS/HTML, so they don't survive
   the port; every one of them has an equivalent rule below). */

/* ---------- Self-hosted fonts (ADR-0017 gate ruling: no third-party font
   requests from the public page). Archivo ships as a variable font from
   Google — the "latin" subset for weights 400-800 and for italic 600-700
   are each a SINGLE file covering their whole weight range, not one file
   per weight; declaring `font-weight: <min> <max>` matches that. IBM Plex
   Mono is static per weight. Latin subset only — the only subset the ES/EN
   copy on this page actually needs. ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('./fonts/archivo-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 600 700;
  font-display: swap;
  src: url('./fonts/archivo-italic-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/ibmplexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/ibmplexmono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/ibmplexmono-600.woff2') format('woff2');
}

/* ---------- Base (from the prototype's <helmet><style>) ---------- */
html { scroll-behavior: smooth; }
body { margin: 0; background: #0B0E13; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#page:not([data-lang="en"]) [lang="en"] { display: none !important; }
#page[data-lang="en"] [lang="es"] { display: none !important; }
#page:not([data-lang="en"]) #lt-es, #page[data-lang="en"] #lt-en { background: #E9ECF2; color: #0B0E13; }
[data-hide-scroll]::-webkit-scrollbar { display: none; }
::placeholder { color: #5C6675; opacity: 1; }
::selection { background: rgba(232,180,90,0.3); color: #FFFFFF; }
@keyframes cpr-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent, #E8B45A) 45%, transparent); } 60% { box-shadow: 0 0 0 8px transparent; } }
@keyframes cpr-scan { 0% { top: -30%; opacity: 0; } 10% { opacity: 0.55; } 42% { top: 115%; opacity: 0; } 100% { top: 115%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Hover / focus / active states (were style-hover / style-focus
   / style-active in the prototype) ---------- */
.hover-brighten:hover { filter: brightness(1.08); }
.hover-text-bright:hover { color: #E9ECF2; }
.hover-lift-white:hover { background: #FFFFFF; transform: translateY(-1px); }
.hover-lift-accent:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hover-fade:hover { opacity: 0.8; }
.service-card:hover { background: #121826; }
.service-card-alt:hover { background: #10141C; }
.form-field:focus {
  outline: none;
  border-color: var(--accent, #E8B45A);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #E8B45A) 16%, transparent);
}
.btn-submit:hover { filter: brightness(1.08); }
.btn-submit:active { transform: translateY(1px); }
.btn-ghost:hover { border-color: #E9ECF2; color: #FFFFFF; }

/* ---------- ::before / ::after (were style-before / style-after) ---------- */
.corner-brackets { position: relative; }
.corner-brackets::before {
  content: ''; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px;
  border-top: 1px solid var(--accent, #E8B45A); border-left: 1px solid var(--accent, #E8B45A);
  opacity: 0.85; z-index: 2;
}
.corner-brackets::after {
  content: ''; position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px;
  border-bottom: 1px solid var(--accent, #E8B45A); border-right: 1px solid var(--accent, #E8B45A);
  opacity: 0.85; z-index: 2;
}
.step-marker { position: relative; }
.step-marker::before {
  content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px;
  background: var(--accent, #E8B45A); transform: rotate(45deg);
}

/* ---------- Intake form states (script.js toggles these; no inline
   design-tool <sc-if> in real HTML/CSS) ---------- */
.is-hidden { display: none !important; }

/* Error state — not present in the prototype (its mocked submit handler
   never failed). Added per D3: "honest submit states — no fake enviado on
   a failed POST" requires somewhere real to show a real failure. */
#intake-error {
  display: flex; gap: 12px; align-items: flex-start; border: 1px dashed rgba(228,144,126,0.5);
  border-radius: 8px; padding: 13px 16px; background: rgba(228,144,126,0.08); margin: 0 0 18px;
}

/* Honeypot — visually hidden, not display:none (gate ruling: off-screen +
   tabindex="-1" + aria-hidden + autocomplete="off", so a bot rendering the
   DOM enough to skip display:none fields still can't reach this visually
   or via tab order, while a real screen-reader user never lands on it). */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}