:root{color-scheme:light;--ink:#132d46;--muted:#425568;--blue:#005578;--paper:#fbfdff;--wash:#e9f6fc;--line:#bdd6e4;--white:#fff;--gold:#ffdfc1}*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.58 system-ui,sans-serif}a{color:var(--blue);text-underline-offset:4px}a:hover{text-decoration-thickness:2px}button,input,select{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #a34b09;outline-offset:4px}.skip{position:absolute;top:-6rem;left:1rem;background:white;padding:.6rem;z-index:2}.skip:focus{top:1rem}.wrap{width:min(1120px,calc(100% - 3rem));margin-inline:auto}.top,.actions,nav{display:flex;gap:1.15rem;align-items:center;flex-wrap:wrap}.top{justify-content:space-between;padding-block:1.05rem}.brand{font-weight:800;text-decoration:none}.brand span{font-size:1.45rem;margin-right:.25rem}nav a{font-size:.91rem;font-weight:650;text-decoration:none}header{border-bottom:1px solid var(--line)}.hero{background:radial-gradient(ellipse at 83% 20%,#cceeff,transparent 60%),#f2f9fe;padding:clamp(3rem,8vw,6.5rem) 0}.grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:center}.eyebrow,.label,.badge{font-size:.74rem;font-weight:800;letter-spacing:.12em;color:var(--blue)}h1,h2,h3,h4{line-height:1.13;margin:0 0 .65em}h1,h2{font-weight:850;letter-spacing:-.045em}h1{font-size:clamp(2.65rem,6vw,5.15rem);margin-bottom:.3em;max-width:11ch}h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:.4em}h3{font-size:1.32rem}p{margin:.7em 0 1em}.intro,.lede{max-width:62ch;color:var(--muted)}.intro{font-size:1.17rem}.button,.secondary{display:inline-flex;justify-content:center;align-items:center;gap:.55rem;border-radius:.55rem;padding:.66rem 1rem;border:1px solid var(--blue);text-decoration:none;font-weight:750;text-align:center}.button{background:var(--blue);color:white}.secondary{background:transparent;color:var(--blue)}.button:hover{background:#003d5b}.secondary:hover{background:#e9f6fc}.status,.wizard,.sources,.cards article{border:1px solid var(--line);border-radius:1rem;background:var(--white);padding:clamp(1.1rem,3vw,2rem)}.status{background:var(--ink);color:white;border:0}.status h2{font-size:2rem;margin-top:.8em}.status a{color:#d6f2ff}.status small{display:block;margin-top:1rem;color:#d4e5f1}.badge{display:inline-block;background:var(--gold);color:#61300e;padding:.3rem .55rem;border-radius:.35rem}.section{padding-block:clamp(2.7rem,6vw,5rem);scroll-margin-top:1rem}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.75rem 0}.cards h3{margin:.7rem 0}.cards p{margin-bottom:0}.wash{background:var(--wash)}.sim{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:start}.privacy,.comparison{background:#f0f8fc;padding:.85rem 1rem;border-left:3px solid var(--blue);border-radius:.2rem}.bar{background:var(--wash);height:.35rem;border-radius:1rem;overflow:hidden;margin-bottom:1.3rem}.bar span{display:block;background:var(--blue);height:100%}fieldset{border:0;margin:0 0 1.35rem;padding:0;min-width:0}legend{padding:0;font-weight:800;font-size:1.35rem;line-height:1.2;margin-bottom:.6rem}label{display:block;font-weight:650;margin-top:.7rem}.option{display:flex;align-items:baseline;gap:.55rem;font-weight:500;border:1px solid var(--line);padding:.55rem .7rem;border-radius:.55rem}.option:has(:checked){background:var(--wash);border-color:var(--blue)}input[type=radio]{accent-color:var(--blue);flex:none}select,input[type=number]{width:100%;background:white;border:1px solid #637c90;border-radius:.4rem;padding:.55rem;color:var(--ink)}small{color:var(--muted)}li+li{margin-top:.4rem}.comparison{margin-bottom:1.2rem}.comparison p{margin:.45rem 0}details{border-bottom:1px solid var(--line);padding:1rem 0}summary{cursor:pointer;font-weight:750}details p{max-width:76ch;margin-bottom:0}footer{border-top:1px solid var(--line)}@media(max-width:760px){.grid,.cards{grid-template-columns:1fr}.wrap{width:calc(100% - 2rem)}.top,nav{gap:.6rem 1rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media print{nav,.actions,footer{display:none}.hero,.section{padding-block:1rem}}

.lucia-guide {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lucia-avatar {
  position: relative;
  display: block;
  flex: none;
  width: clamp(5rem, 13vw, 9rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--wash);
}
.lucia-avatar img {
  position: absolute;
  width: 240%;
  max-width: none;
  height: auto;
  left: -67%;
  top: -9%;
}
.lucia-guide {
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .85rem;
}
.lucia-guide .lucia-avatar {
  width: 3.25rem;
}
.lucia-guide small {
  display: block;
}


.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  padding-block: 2rem;
  font-size: .9375rem;
}
.footer-heading {
  font: inherit;
  font-weight: 750;
  letter-spacing: normal;
  margin: 0;
}
.footer-grid p {
  margin: .35rem 0;
}
.footer-contact {
  font-size: .8125rem;
  line-height: 1.5;
}
.footer-social {
  display: block;
}
.footer-social ul {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  list-style: none;
  padding: 0;
  margin: .65rem 0 0;
}
.footer-social li {
  margin: 0;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
}
.footer-social a:hover {
  background: var(--ink);
}
.footer-social svg {
  width: 1.3rem;
  height: 1.3rem;
}

:root {
  --brand-cyan: #00aee5;
  --brand-orange: #f58b38;
}
header {
  border-top: 5px solid var(--brand-orange);
}
body {
  font: 400 17px/1.65 "Montserrat", "Segoe UI", sans-serif;
}
h1, h2, h3, h4, legend {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -.025em;
}
.hero {
  background: #f2f9fe;
}
.hero h1 {
  max-width: 13ch;
  font-size: clamp(2.75rem, 5.6vw, 5rem);
  line-height: 1.02;
  font-weight: 750;
}
.hero .button {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--ink);
}
.hero .button:hover {
  background: #ffac68;
}
.lucia-panel {
  display: grid;
  place-items: end center;
  margin: 0;
  overflow: hidden;
  padding-top: clamp(.8rem, 3vw, 1.6rem);
  border-radius: 1.35rem;
  background: var(--brand-orange);
}
.lucia-panel img {
  display: block;
  width: min(100%, 23rem);
  height: auto;
}
.proposal-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 11rem);
  gap: 1rem;
  align-items: center;
}
.proposal-intro img {
  display: block;
  width: 100%;
  height: auto;
}
.proposal-details {
  margin-top: 1.5rem;
}
@media (max-width: 540px) {
  .proposal-intro {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .proposal-intro img {
    width: min(45%, 8rem);
    justify-self: center;
  }
}
.site-menu {
  padding: 0;
  border: 0;
}
.site-menu summary {
  width: fit-content;
  margin-left: auto;
  padding: .4rem .9rem;
  border: 1px solid var(--blue);
  border-radius: .5rem;
  color: var(--blue);
}
.site-menu nav {
  display: grid;
  gap: 0;
  margin-top: .6rem;
}
.site-menu nav a {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--line);
}
header .top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
header .brand {
  align-self: start;
  padding-block: .4rem;
}
.eyebrow {
  letter-spacing: .1em;
}
.status,
.cards article,
.wizard,
.sources {
  border: 1px solid #b9d1df;
  border-radius: 1.25rem;
  background: #f0f8fc;
  box-shadow: inset 0 1px 0 white, 0 10px 24px rgb(19 45 70 / 8%);
}
.wizard {
  background: var(--white);
}
.cards article:nth-child(2),
.status {
  background: #fff0e3;
  border-color: #ebc6a7;
}
.status {
  margin-bottom: 2.5rem;
  color: var(--ink);
}
.status .badge {
  background: #ffdfc1;
  color: #61300e;
  letter-spacing: .06em;
  border-radius: .45rem;
}
main h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
main .status h2 {
  margin-top: .45em;
}
.status p {
  max-width: 70ch;
}
.status a {
  color: var(--blue);
}
.status small {
  color: var(--muted);
}
.privacy,
.comparison {
  border-left-color: var(--brand-orange);
}
.municipal-logo {
  display: inline-block;
  max-width: 100%;
}
.municipal-logo img {
  display: block;
  width: min(16rem, 100%);
  height: auto;
}
@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.chat-wrap {
  max-width: 54rem;
}
.chat-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
}
.chat-header h2 {
  margin-bottom: .2rem;
}
.chat-header .lucia-avatar {
  width: 3.5rem;
}
.chat-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--white);
  box-shadow: 0 10px 24px rgb(19 45 70 / 8%);
}
.chat-messages {
  display: grid;
  gap: .8rem;
  max-height: min(55vh, 28rem);
  overflow-y: auto;
  padding: clamp(1rem, 3vw, 1.5rem);
}
.chat-message {
  justify-self: start;
  max-width: min(100%, 42rem);
  margin: 0;
  padding: .75rem 1rem;
  border-radius: .25rem 1rem 1rem;
  background: var(--wash);
}
.chat-message-user {
  justify-self: end;
  border-radius: 1rem .25rem 1rem 1rem;
  background: #fff0e3;
}
.chat-message a {
  display: block;
  width: fit-content;
  margin-top: .4rem;
}
#chat-controls {
  padding: clamp(1rem, 3vw, 1.5rem);
  border-top: 1px solid var(--line);
}
.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.chat-suggestions button {
  min-height: 2.75rem;
  border-color: var(--line);
  font-size: .85rem;
  text-align: left;
}
.chat-compose {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.chat-compose input {
  flex: 1 1 13rem;
  min-width: 0;
  padding: .65rem;
  border: 1px solid #637c90;
  border-radius: .5rem;
}
.result-notice {
  margin-block: 1rem;
  padding: .9rem 1rem;
  border: 1px solid #ebc6a7;
  border-radius: .75rem;
  background: #fff0e3;
}
.result-notice p {
  margin-block: .35rem .65rem;
}
.sim-duration {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
.sim-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: 1rem;
}
.sim-choice legend {
  font-size: 1rem;
  margin-bottom: .2rem;
}
.sim-choice .option {
  margin-top: 0;
}
#wizard > .button {
  margin-top: 1rem;
}
#numeros input[type="date"] {
  display: block;
  width: 100%;
  min-width: 0;
  padding: .55rem;
  border: 1px solid #637c90;
  border-radius: .4rem;
  color: var(--ink);
  background: var(--white);
}
#sim-error {
  color: #902b1a;
  font-weight: 650;
}
.sim:has(#result:not([hidden])) > .wizard {
  grid-column: 1 / -1;
}
.sim:has(#result:not([hidden])) > div:first-child {
  display: none;
}
.scenario-fieldset legend {
  margin-bottom: .8rem;
}
.scenario-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .8rem;
}
.scenario-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: .9rem;
  border: 1px solid var(--brand-cyan);
  border-radius: .8rem;
  background: var(--brand-cyan);
  color: var(--ink);
}
.scenario-proposed {
  border-color: var(--brand-orange);
  background: var(--brand-orange);
}
.scenario-card:has(input:checked) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.scenario-card h5 {
  margin: 0 0 .65rem;
  font-size: 1rem;
}
.scenario-card p {
  margin: .25rem 0;
  font-size: .9rem;
}
.scenario-card .scenario-note {
  margin: .65rem 0;
  padding: .6rem .7rem;
  border-radius: .55rem;
  background: rgb(255 255 255 / 25%);
  line-height: 1.45;
}
.scenario-date {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
}
.scenario-choice {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  margin-top: auto;
}
.scenario-choice input {
  accent-color: #132d46;
}
.scenario-choice input:focus-visible {
  outline-color: var(--ink);
}
.privacy-title {
  max-width: 22ch;
  font-size: clamp(2rem, 5vw, 3.5rem);
}
.booklet details {
  padding-block: .8rem;
}
.booklet-content {
  padding: .6rem 0 .8rem;
}
.booklet-content > h3 {
  margin-top: 1rem;
}
.booklet-table {
  overflow-x: auto;
  margin-block: 1rem;
}
.booklet-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
}
.booklet-table th,
.booklet-table td {
  min-width: 7rem;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.booklet-table th {
  background: #d8effa;
}