@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");
:root {
  --green: #4b4945;
  --brand: #8da930;
  --brand-dark: #526717;
  --olive: #dce8b4;
  --cream: #f8f9f3;
  --muted: #686861;
  --line: #dfe4d9;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--green);
  font-family: "DM Sans", sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #95a756;
  outline-offset: 3px;
}
a {
  color: inherit;
  text-decoration: none;
}
header {
  height: 95px;
  padding: 0 6%;
  display: flex;
  align-items: center;
  gap: 40px;
  background: #fafbf5;
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
}
.brand-sub {
  font-size: 11px;
  letter-spacing: 5px;
  display: block;
}
.logo {
  font-size: 46px;
  line-height: 1;
}
nav {
  display: flex;
  gap: 28px;
  margin: auto;
}
.nav {
  font-size: 14px;
  padding: 35px 0;
  position: relative;
}
.nav.active:after {
  content: "";
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green);
}
.btn {
  background: var(--green);
  color: white;
  padding: 13px 22px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn.light {
  background: var(--olive);
  color: var(--green);
}
.btn.outline {
  background: transparent;
  border: 1px solid #becaba;
  color: var(--green);
}
.btn.small {
  padding: 8px 12px;
  font-size: 12px;
}
.account {
  display: flex;
  gap: 10px;
  align-items: center;
}
.account span {
  font-size: 13px;
}
main {
  min-height: 70vh;
}
.hero {
  margin: 25px 3% 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  min-height: 510px;
  background:
    linear-gradient(90deg, rgba(39, 43, 27, 0.94), rgba(39, 43, 27, 0.25)),
    url("hero-amazonia.jpg") center 52% / cover;
  color: white;
  padding: 64px 6%;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 2.5px;
  font-weight: 700;
  text-transform: uppercase;
}
.hero .eyebrow {
  color: #e2e8b3;
}
.hero h1 {
  font-family: Manrope, sans-serif;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.12;
  letter-spacing: -2px;
  max-width: 710px;
  margin: 21px 0;
}
.hero h1 em {
  font-style: normal;
  color: var(--olive);
}
.hero p {
  color: #e0e8df;
  line-height: 1.7;
  max-width: 500px;
  font-size: 15px;
}
.hero .btn {
  margin-top: 16px;
}
.photo-note {
  position: absolute;
  right: 24px;
  bottom: 20px;
  font-size: 10px;
  color: #e8eee4;
}
.searchbar {
  margin: -28px auto 0;
  position: relative;
  z-index: 1;
  max-width: 1050px;
  display: flex;
  padding: 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px #173d3210;
  gap: 16px;
  align-items: center;
}
.searchbar label {
  padding: 0 15px;
  border-right: 1px solid var(--line);
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.searchbar input,
.searchbar select {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 0;
  background: white;
  color: var(--green);
  font-size: 14px;
  outline-offset: 3px;
}
.section {
  padding: 45px 6%;
  max-width: 1500px;
  margin: auto;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 25px;
}
h2 {
  font:
    700 30px/1.25 Manrope,
    sans-serif;
  letter-spacing: -0.8px;
  margin: 8px 0;
}
h3 {
  font:
    700 20px/1.3 Manrope,
    sans-serif;
  margin: 10px 0;
}
.muted {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.filters {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 23px 0;
}
.chip {
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 11px 17px;
  font-size: 13px;
  background: #fff;
}
.chip.active {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.card {
  border: 1px solid var(--line);
  background: white;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.visual {
  height: 190px;
  position: relative;
  background: linear-gradient(135deg, #d8dec9, #8a9e72);
  overflow: hidden;
}
.visual img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.card:hover .visual img {
  transform: scale(1.04);
}
.demo {
  position: absolute;
  left: 13px;
  top: 13px;
  background: #fffdf0e8;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
}
.heart {
  position: absolute;
  right: 12px;
  top: 12px;
  border-radius: 50%;
  background: white;
  width: 31px;
  height: 31px;
  font-size: 19px;
  color: #436045;
}
.card-body {
  padding: 20px;
}
.category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #72814b;
}
.card h3 {
  font-size: 17px;
  margin: 10px 0;
}
.card .muted {
  font-size: 12px;
  margin: 5px 0 15px;
}
.card-bottom {
  padding-top: 14px;
  border-top: 1px solid #edf0e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.card-bottom strong {
  font-size: 20px;
}
.textlink {
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
  font-size: 12px;
}
.banner {
  background: #e7ebda;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  padding: 35px 40px;
  margin-top: 48px;
}
.banner p {
  max-width: 540px;
}
.map-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
}
.map-list {
  max-height: 640px;
  overflow: auto;
}
.map-item {
  padding: 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
  width: 100%;
  text-align: left;
}
.map {
  position: relative;
  min-height: 600px;
  border-radius: 14px;
  overflow: hidden;
  background: #dce5cc;
  background-image:
    repeating-linear-gradient(
      32deg,
      transparent,
      transparent 70px,
      #c3d4b840 71px,
      #c3d4b840 73px
    ),
    radial-gradient(ellipse at 80% 20%, #b7cc9f, transparent 50%);
}
.map > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-tag {
  position: absolute;
  left: 22px;
  top: 22px;
  padding: 12px;
  background: #fffffff0;
  border-radius: 7px;
  font-size: 12px;
  max-width: 260px;
}
.map-label {
  position: absolute;
  left: 45%;
  top: 42%;
  font-size: 16px;
  letter-spacing: 3px;
  opacity: 0.65;
}
.pin {
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--green);
  color: white;
  border: 3px solid white;
  border-radius: 22px 22px 22px 0;
  rotate: -45deg;
  width: 40px;
  height: 40px;
  box-shadow: 0 4px 10px #0003;
}
.pin span {
  display: block;
  rotate: 45deg;
  font-size: 15px;
}
.map-credit {
  position: absolute;
  bottom: 15px;
  left: 20px;
  font-size: 11px;
}
.empty {
  padding: 45px;
  border: 1px dashed #b7c4b0;
  border-radius: 12px;
  text-align: center;
  grid-column: 1/-1;
}
.panel-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.stats {
  display: flex;
  gap: 20px;
  margin: 25px 0;
}
.stat {
  background: white;
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: 10px;
  flex: 1;
}
.stat strong {
  font-size: 30px;
  display: block;
}
.rows {
  display: grid;
  gap: 12px;
}
.row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  background: white;
  border: 1px solid var(--line);
  padding: 22px;
  border-radius: 10px;
}
.status {
  display: inline-block;
  padding: 5px 9px;
  background: #e9eddc;
  border-radius: 5px;
  font-size: 11px;
  margin-right: 10px;
}
.status.rejected,
.status.cancelled {
  background: #f7dfd6;
  color: #8b3b29;
}
.status.confirmed,
.status.approved {
  background: #dcebdc;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
dialog {
  border: 0;
  border-radius: 16px;
  padding: 35px;
  width: min(620px, 94vw);
  max-height: 90vh;
  color: var(--green);
  background: var(--cream);
  box-shadow: 0 20px 90px #0003;
}
dialog::backdrop {
  background: #0c281fc2;
  backdrop-filter: blur(3px);
}
.close {
  position: absolute;
  right: 13px;
  top: 8px;
  font-size: 28px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field {
  display: block;
  margin: 14px 0;
  font-size: 12px;
  font-weight: 600;
}
.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 12px;
  border: 1px solid #cdd6c6;
  border-radius: 7px;
  background: white;
  color: var(--green);
}
.field textarea {
  min-height: 90px;
  resize: vertical;
}
.form-grid .field {
  margin: 0;
}
.error {
  color: #a13323;
  font-size: 13px;
  margin: 10px 0;
}
.detail-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}
.detail-meta {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  font-size: 13px;
  margin: 20px 0;
}
.notice {
  padding: 12px;
  background: #e9eddc;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.6;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 24px;
  color: white;
  background: var(--green);
  border-radius: 8px;
  box-shadow: 0 6px 24px #0003;
  z-index: 10;
  display: none;
  max-width: 90vw;
}
footer {
  border-top: 1px solid var(--line);
  padding: 35px 6%;
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
}
footer .brand {
  font-size: 12px;
}
footer p,
footer small {
  font-size: 11px;
  color: var(--muted);
}
footer small {
  margin-left: auto;
}
.page-title {
  max-width: 680px;
}
.mobile-label {
  display: none;
}
@media (max-width: 1000px) {
  header {
    gap: 20px;
    padding: 0 4%;
  }
  nav {
    gap: 16px;
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .searchbar {
    margin: -28px 6% 0;
  }
  .hero {
    padding: 60px 6%;
  }
  .map-shell {
    grid-template-columns: 240px 1fr;
  }
  .account span {
    display: none;
  }
}
@media (max-width: 650px) {
  header {
    height: auto;
    min-height: 85px;
    flex-wrap: wrap;
    padding: 16px 5%;
    gap: 15px;
  }
  .brand {
    font-size: 15px;
  }
  .logo {
    font-size: 35px;
  }
  .brand-sub {
    font-size: 9px;
  }
  nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }
  .nav {
    padding: 9px 0;
    font-size: 12px;
  }
  .nav.active:after {
    bottom: 0;
  }
  #account {
    margin-left: auto;
  }
  .account .btn {
    padding: 10px;
    font-size: 11px;
  }
  .hero {
    margin: 12px 3% 0;
    min-height: 450px;
    padding: 40px 7% 60px;
  }
  .hero h1 {
    font-size: 40px;
    letter-spacing: -1px;
  }
  .hero p {
    font-size: 13px;
  }
  .searchbar {
    flex-wrap: wrap;
    gap: 12px;
  }
  .searchbar label {
    padding: 0 6px;
    min-width: 40%;
  }
  .searchbar .btn {
    width: 100%;
  }
  .section {
    padding: 32px 5%;
  }
  .section-head {
    align-items: start;
  }
  h2 {
    font-size: 25px;
  }
  .cards {
    gap: 12px;
  }
  .visual {
    height: 150px;
  }
  .card-body {
    padding: 13px;
  }
  .card h3 {
    font-size: 15px;
  }
  .card-bottom {
    gap: 7px;
    flex-wrap: wrap;
  }
  .card-bottom strong {
    font-size: 17px;
  }
  .banner {
    padding: 25px;
    flex-direction: column;
    align-items: start;
    margin-top: 30px;
  }
  .map-shell {
    display: flex;
    flex-direction: column-reverse;
  }
  .map {
    min-height: 420px;
  }
  .map-list {
    max-height: none;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .row {
    align-items: start;
    flex-direction: column;
  }
  .stats {
    gap: 9px;
  }
  .stat {
    padding: 13px;
    font-size: 12px;
  }
  .stat strong {
    font-size: 24px;
  }
  footer small {
    margin-left: 0;
  }
  .panel-top {
    flex-wrap: wrap;
  }
  dialog {
    padding: 28px 22px;
  }
}

/* Refinamientos tras auditoría de lectura, contraste y móvil */
.hero {
  background-position: center 55%;
}
.photo-note {
  bottom: 35px;
  max-width: 440px;
  text-align: right;
}
.heart {
  width: 44px;
  height: 44px;
  top: 10px;
  right: 10px;
}
.card {
  display: flex;
  flex-direction: column;
}
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-bottom {
  margin-top: auto;
}
.card .visual img {
  filter: saturate(0.85) contrast(1.02);
}
.category {
  color: #5d6d35;
}
.textlink {
  padding: 9px 0;
  min-height: 44px;
}
.chip {
  min-height: 44px;
}
.brand img {
  width: 42px;
  height: 42px;
  border-radius: 9px;
}
.notice strong {
  font-weight: 700;
}
.photo-note {
  font-size: 10px;
  line-height: 1.5;
}
.result-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin: 0 0 20px;
}
.sort {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: white;
  color: var(--green);
  font-size: 13px;
}
.clear-search {
  font-size: 12px;
  text-decoration: underline;
}
.card-summary {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 18px;
}
.trust-strip {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 28px 0 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: #4e6556;
}
.map-host {
  height: 600px;
  width: 100%;
  position: relative;
  z-index: 1;
  border-radius: 14px;
}
.geo-warning {
  position: absolute;
  z-index: 500;
  left: 55px;
  top: 12px;
  background: white;
  padding: 10px 14px;
  border-radius: 7px;
  max-width: 280px;
  box-shadow: 0 3px 15px #0001;
  font-size: 11px;
}
.leaflet-container {
  font-family: "DM Sans", sans-serif;
  background: #dce5cc;
}
.map .leaflet-control a {
  color: var(--brand-dark);
}
.leaflet-tooltip {
  font-family: inherit !important;
}
.map-host .leaflet-interactive {
  cursor: pointer;
}
.detail-facts {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  margin: 20px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.detail-facts small {
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.error:empty {
  display: none;
}
.form-submit[disabled] {
  opacity: 0.65;
  cursor: wait;
}
.searchbar input {
  min-width: 0;
}
button:disabled {
  cursor: wait;
  opacity: 0.6;
}
@media (max-width: 650px) {
  .photo-note {
    position: static;
    margin-top: 22px;
    text-align: left;
    max-width: 100%;
    display: block;
  }
  .hero {
    padding-bottom: 55px;
  }
  .searchbar {
    margin-top: -25px;
  }
  .searchbar label {
    min-width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
  }
  .searchbar input,
  .searchbar select {
    font-size: 16px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .visual {
    height: 220px;
  }
  .card-body {
    padding: 20px;
  }
  .card h3 {
    font-size: 20px;
  }
  .card-bottom {
    flex-wrap: nowrap;
  }
  .card-summary {
    font-size: 14px;
  }
  .trust-strip {
    flex-direction: column;
    gap: 12px;
  }
  .section-head {
    flex-direction: column;
    gap: 0;
  }
  .result-toolbar {
    align-items: start;
  }
  .map-host {
    height: 430px;
  }
  .geo-warning {
    max-width: 210px;
    font-size: 10px;
  }
  .detail-facts {
    grid-template-columns: 1fr;
  }
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
  }
  .hero h1 {
    font-size: 39px;
  }
  .banner h2 {
    font-size: 26px;
  }
}
.map > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-host .leaflet-tile {
  max-width: none !important;
}
.map-host {
  isolation: isolate;
}

.geo-pin {
  background: var(--brand-dark);
  color: white;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 3px 12px #0004;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.geo-pin:focus-visible {
  outline: 3px solid #83964b;
  outline-offset: 3px;
}
.skip-link {
  position: absolute;
  left: 15px;
  top: -80px;
  z-index: 1000;
  background: white;
  padding: 15px;
  border-radius: 7px;
}
.skip-link:focus {
  top: 10px;
}
header {
  position: sticky;
  top: 0;
  z-index: 800;
  box-shadow: 0 2px 15px var(--brand-dark)05;
}
.map {
  isolation: isolate;
}
.section-head .textlink {
  white-space: nowrap;
}
.row .notice {
  max-width: 650px;
}
.brand {
  flex-shrink: 0;
}
@media (min-width: 1200px) {
  .hero {
    min-height: 535px;
  }
  .hero h1 {
    font-size: 62px;
  }
  .visual {
    height: 210px;
  }
}
/* Motion: gentle entrances, feedback and a reading-progress accent. */
header::after{content:"";position:absolute;bottom:0;left:0;height:3px;width:var(--reading-progress,0%);background:var(--brand);pointer-events:none;transition:width .12s linear}
header{transition:box-shadow .25s ease,background-color .25s ease}
header.is-scrolled{background:#fafbf5f5;box-shadow:0 6px 28px var(--brand-dark)15;backdrop-filter:blur(12px)}
.reveal-item{transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
.reveal-pending{opacity:0;translate:0 26px}
.reveal-visible{opacity:1;translate:0 0}
.btn,.chip,.heart,.map-item{transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease,border-color .2s ease}
.btn:active,.chip:active,.heart:active{transform:scale(.97)}
.card{transition:box-shadow .28s ease,transform .28s ease;border-color:#dfe4d9}
.visual img{transition:transform .65s cubic-bezier(.2,.7,.2,1)!important}
.nav::after{transition:opacity .25s ease,transform .25s ease}
dialog[open]{animation:dialog-enter .26s cubic-bezier(.2,.7,.2,1)}
dialog[open]::backdrop{animation:backdrop-enter .2s ease}
#toast{animation:toast-enter .25s ease}
@keyframes dialog-enter{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes toast-enter{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px var(--brand-dark)20}.card:hover{transform:translateY(-5px);box-shadow:0 14px 32px var(--brand-dark)15}.chip:hover{transform:translateY(-2px);border-color:#94a77c}.heart:hover{transform:scale(1.08)}.map-item:hover{transform:translateX(3px);box-shadow:0 6px 18px var(--brand-dark)10}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.reveal-pending{opacity:1;translate:none}.card:hover,.btn:hover,.chip:hover,.heart:hover,.map-item:hover{transform:none}}
.card.reveal-item,.map-item.reveal-item,.hero .btn.reveal-item,.filters.reveal-item{transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,transform .28s ease,background-color .2s ease;transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms,0ms}
@media(prefers-reduced-motion:reduce){.card.reveal-item,.map-item.reveal-item,.hero .btn.reveal-item,.filters.reveal-item{transition:none!important}}

/* Official Explor Amazonia identity. */
.brand .brand-logo { width: 210px; height: auto; border-radius: 0; display: block; }
footer .brand .brand-logo { width: 180px; }
.nav.active::after { background: var(--brand); }
.nav.active, .category, .textlink { color: var(--brand-dark); }
.btn, .chip.active, .pin, .geo-pin { background: var(--brand); color: #242b0f; }
.chip.active { border-color: var(--brand); }
.btn.light { background: var(--brand); color: #242b0f; }
.btn.outline { background: transparent; color: var(--green); border-color: #a9b486; }
.btn:hover, .chip.active:hover { background: #9bb93b; }
.btn.outline:hover { background: #edf2de; }
.hero h1 em { color: #bed66c; }
.hero .eyebrow { color: #dce8b4; }
.banner, .notice, .status { background: #edf2de; }
button:focus-visible, a:focus-visible { outline-color: var(--brand); }
@media (max-width: 1000px) and (min-width: 651px) { .brand .brand-logo { width: 170px; } header { gap: 16px; } nav { gap: 14px; } }
@media (max-width: 650px) { .brand .brand-logo { width: 165px; } footer .brand .brand-logo { width: 170px; } }

.connection-state { padding-top: 80px; padding-bottom: 100px; min-height: 65vh; }
.connection-state h1 { font-family: Manrope, sans-serif; font-size: clamp(30px, 4vw, 48px); line-height: 1.2; letter-spacing: -1px; max-width: 680px; margin: 20px 0; }
.connection-state p { max-width: 520px; margin-bottom: 26px; }

/* Mostrar u ocultar la clave sin modificar su valor. */
.password-control{position:relative;margin:7px 0 18px}.password-control>input{display:block;width:100%;padding:13px 58px 13px 12px;border:1px solid #cdd6c6;border-radius:7px;background:white;color:var(--green);font:inherit;min-height:48px}.password-toggle{position:absolute;right:3px;top:2px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--green)}.password-toggle:hover{background:#8aa62c18}.password-toggle .eye-slash{display:none}.password-toggle[aria-pressed="true"] .eye-slash{display:block}@media(max-width:650px){.password-control>input{font-size:16px}}

.place-map-name{font:inherit;font-weight:inherit;letter-spacing:inherit;text-align:left;padding:0;line-height:inherit}.place-map-name:hover{text-decoration:underline;color:var(--brand-dark)}