/* TELAM Core · component styles (theme-independent).
 * Tokens: navy #0C2340 (60%) · olive #4B5320 / #3A4B35 (25%) · bronze #C5A059 (10%) · sand #F4F1EA / white (5%).
 * Bronze is never text on white: it is a CTA background carrying navy text, or a border/status accent. */
:root {
  --telam-navy: #0c2340; --telam-navy-700: #163559; --telam-navy-900: #061528;
  --telam-olive: #4b5320; --telam-olive-2: #3a4b35; --telam-olive-100: #e6e9d9;
  --telam-bronze: #c5a059; --telam-bronze-600: #a8873f;
  --telam-sand: #f4f1ea; --telam-white: #fff; --telam-alert: #9b2c2c; --telam-ok: #2f6b3a;
  --telam-fg: var(--telam-navy); --telam-muted: #4a5568; --telam-border: #d9d4c7; --telam-surface: #fff;
  --telam-radius: .75rem; --telam-shadow: 0 1px 2px rgb(12 35 64 / .08), 0 8px 24px rgb(12 35 64 / .08);
  --telam-touch: 2.75rem; --telam-font-scale: 1;
}
html[data-calm="on"] { --telam-fg: #061528; --telam-muted: #1f2937; --telam-border: #061528; --telam-surface: #fff; --telam-sand: #fff; }
html[data-calm="on"] *, html[data-calm="on"] *::before, html[data-calm="on"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-calm="on"] [data-nonessential="true"], html[data-calm="on"] [data-text-variant="full"], html[data-calm="on"] iframe, html[data-calm="on"] video { display: none !important; }
html:not([data-calm="on"]) [data-text-variant="calm"] { display: none !important; }
html[data-calm="on"] .telam-btn-cta { background: #061528 !important; color: #fff !important; }
html[data-calm="on"] .telam-badge { border-color: #061528; }

.telam-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.telam-ltr-input { direction: ltr; text-align: left; }
.telam-muted { color: var(--telam-muted); }
.telam-lead { font-size: 1.125rem; }
.telam-source { font-size: .8rem; color: var(--telam-muted); }
.telam-slogan { color: var(--telam-sand); font-weight: 600; }
.telam-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.telam-card { background: var(--telam-surface); border: 1px solid var(--telam-border); border-radius: var(--telam-radius); box-shadow: var(--telam-shadow); padding: 1.25rem; margin: 0 0 1.25rem; }
.telam-card h2:first-child, .telam-card h3:first-child { margin-top: 0; }
.telam-card-bronze { border: 3px solid var(--telam-bronze); }
.telam-alert { border-color: var(--telam-alert); }
.telam-alert h2 { color: var(--telam-alert); }
.telam-ok { border-color: var(--telam-ok); }
.telam-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: .5rem 0; }
.telam-grid { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 1rem 0; }
.telam-grid > li { margin: 0; }
@media (min-width: 720px) { .telam-grid-2 { grid-template-columns: repeat(2, 1fr); } .telam-grid-3 { grid-template-columns: repeat(3, 1fr); } .telam-grid-5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 480px) and (max-width: 719px) { .telam-grid-5, .telam-grid-3 { grid-template-columns: repeat(2, 1fr); } }
.telam-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.telam-calm-list { font-size: 1.25rem; line-height: 1.7; padding-inline-start: 1.25rem; }

.telam-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--telam-touch); padding: .75rem 1.5rem; border-radius: var(--telam-radius); font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-size: 1rem; line-height: 1.2; }
.telam-btn-cta { background: var(--telam-bronze); color: var(--telam-navy); }
.telam-btn-cta:hover, .telam-btn-cta:focus-visible { background: var(--telam-bronze-600); color: #fff; }
.telam-btn-secondary { background: transparent; color: var(--telam-navy); border-color: var(--telam-navy); }
.telam-btn-secondary:hover { background: var(--telam-olive-100); }
.telam-btn-block { width: 100%; }
.telam-btn[disabled] { opacity: .55; cursor: not-allowed; }
.telam-badge { display: inline-block; border: 1px solid var(--telam-bronze); color: var(--telam-navy); background: #fff; border-radius: 999px; padding: .125rem .75rem; font-size: .875rem; font-weight: 600; text-decoration: none; }
.telam-badges { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.telam-stage-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.telam-stage { margin-bottom: 3rem; scroll-margin-top: 6rem; }
.telam-kv div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.telam-kv dt { color: var(--telam-muted); }
.telam-kv dd { margin: 0; font-weight: 600; text-align: left; }

.telam-hotlines { list-style: none; padding: 0; margin: 0; }
.telam-hotlines li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--telam-border); }
.telam-hotlines li:last-child { border-bottom: 0; }
.telam-hotline-cards { list-style: none; padding: 0; margin: 1rem 0 0; }
.telam-hotline-cards li { margin: 0 0 .75rem; }
.telam-hotline-cards a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: var(--telam-touch); border: 2px solid var(--telam-navy); border-radius: var(--telam-radius); padding: .75rem 1rem; color: var(--telam-navy); text-decoration: none; font-weight: 600; background: var(--telam-sand); }
.telam-hotline-cards a span:last-child { font-size: 1.25rem; font-weight: 700; }
.telam-hotline-cards small { color: var(--telam-muted); }

.telam-figures { display: grid; gap: 1rem; margin: 1rem 0 0; }
@media (min-width: 720px) { .telam-figures { grid-template-columns: repeat(2, 1fr); } }
.telam-figures > div { border: 1px solid var(--telam-bronze); border-radius: var(--telam-radius); padding: 1rem; }
.telam-figures dt { font-weight: 600; }
.telam-figures dd { margin: .25rem 0 0; }
.telam-figure { font-size: 1.5rem; font-weight: 700; color: var(--telam-navy); }
.telam-figure span:last-child { font-size: 1rem; font-weight: 400; }
.telam-table { width: 100%; border-collapse: collapse; }
.telam-table th, .telam-table td { text-align: right; padding: .5rem; border-bottom: 1px solid var(--telam-border); }
.telam-table th { border-bottom: 2px solid var(--telam-navy); }

.telam-form label { display: block; font-weight: 600; margin: .75rem 0; }
.telam-form input:not([type="checkbox"]):not([type="radio"]), .telam-form select, .telam-form textarea { display: block; width: 100%; min-height: var(--telam-touch); margin-top: .25rem; padding: .5rem .75rem; border: 1px solid var(--telam-border); border-radius: var(--telam-radius); font: inherit; background: #fff; color: var(--telam-fg); }
.telam-form fieldset { border: 0; padding: 0; margin: .75rem 0; }
.telam-form legend { font-weight: 600; margin-bottom: .5rem; }
.telam-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.telam-chip { display: inline-flex !important; align-items: center; gap: .5rem; min-height: var(--telam-touch); border: 1px solid var(--telam-border); border-radius: var(--telam-radius); padding: 0 .75rem; margin: 0 !important; font-weight: 500 !important; }
.telam-chip input { width: 1.25rem; height: 1.25rem; accent-color: var(--telam-navy); }
.telam-consent { display: flex !important; gap: .75rem; align-items: flex-start; font-weight: 400 !important; }
.telam-consent input { width: 1.5rem; height: 1.5rem; margin-top: .2rem; accent-color: var(--telam-navy); }
.telam-error { color: var(--telam-alert); border: 1px solid var(--telam-alert); background: #fff; border-radius: var(--telam-radius); padding: .5rem .75rem; }
.telam-ticket { font-size: 1.75rem; letter-spacing: .05em; }
.telam-ticket-input, .telam-otp-input { text-align: center; font-size: 1.5rem; letter-spacing: .15em; text-transform: uppercase; }

.telam-milestones { list-style: none; padding: 0; margin: 1rem 0; }
.telam-milestones li { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; color: var(--telam-muted); }
.telam-milestones li.is-reached { color: var(--telam-navy); font-weight: 700; }
.telam-milestones li p { margin: 0; }
.telam-step-num { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid var(--telam-border); font-weight: 700; flex: none; }
.telam-milestones li.is-reached .telam-step-num { background: var(--telam-navy); border-color: var(--telam-navy); color: #fff; }

.telam-checklist { list-style: none; padding: 0; }
.telam-checklist label { display: flex; align-items: center; gap: .75rem; min-height: var(--telam-touch); cursor: pointer; }
.telam-checklist input { width: 1.5rem; height: 1.5rem; accent-color: var(--telam-navy); }
.telam-checklist .is-done span { text-decoration: line-through; color: var(--telam-muted); }
.telam-steps li { margin-bottom: .5rem; font-size: 1.125rem; }
.telam-video { aspect-ratio: 16 / 9; border-radius: var(--telam-radius); overflow: hidden; background: var(--telam-navy); }
.telam-video iframe { width: 100%; height: 100%; border: 0; }
.telam-press { list-style: none; padding: 0; }
.telam-press li { padding: .75rem 0; border-bottom: 1px solid var(--telam-border); }

.telam-calm-toggle { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; }
.telam-switch { position: relative; width: 3rem; height: 1.75rem; border-radius: 999px; border: 2px solid currentColor; background: transparent; cursor: pointer; padding: 0; }
.telam-switch-thumb { position: absolute; top: .125rem; right: .125rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: currentColor; transition: transform .15s; }
.telam-switch[aria-checked="true"] { background: var(--telam-bronze); border-color: var(--telam-bronze); }
.telam-switch[aria-checked="true"] .telam-switch-thumb { transform: translateX(-1.25rem); background: var(--telam-navy); }

.telam-modal { position: fixed; inset: 0; z-index: 9999; background: rgb(12 35 64 / .7); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 1rem 1rem; overflow: auto; }
.telam-modal[hidden] { display: none; }
.telam-modal-card { background: #fff; color: var(--telam-navy); border: 4px solid var(--telam-bronze); border-radius: var(--telam-radius); box-shadow: var(--telam-shadow); max-width: 34rem; width: 100%; padding: 1.5rem; }
.telam-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.telam-modal-head h2 { margin: 0; font-size: 1.5rem; }
.telam-modal-close { background: none; border: 0; font-size: 1.5rem; cursor: pointer; min-width: var(--telam-touch); min-height: var(--telam-touch); color: var(--telam-navy); }
body.telam-modal-open { overflow: hidden; }
:focus-visible { outline: 3px solid var(--telam-bronze-600); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }