:root {
  --green: #194f3a;
  --green-dark: #103c2c;

  --lavender: #a998cf;
  --lavender-dark: #8e7cbd;
  --lavender-soft: #f2eff8;

  --warm-white: #fdfcf9;
  --white: #ffffff;

  --text: #282828;
  --muted: #686868;

  --border: #e7e4e0;

  --serif: "DM Serif Display", serif;
  --sans: "Inter", sans-serif;
}


/* RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  background: var(--warm-white);
  color: var(--text);
  line-height: 1.6;
}

body.modal-open {
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.container {
  width: min(1180px, 90%);
  margin: auto;
}


/* HEADER */

.header {
  position: relative;
  z-index: 20;
  background: rgba(253, 252, 249, 0.96);
}

.nav {
  height: 92px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-letter {
  font-family: var(--serif);
  color: var(--green);
  font-size: 52px;
  line-height: 1;
}

.logo-letter span {
  color: var(--lavender);
}

.logo-name {
  display: flex;
  flex-direction: column;

  font-family: var(--serif);

  font-size: 16px;
  line-height: 1.05;
  letter-spacing: 2px;
}

.logo-name strong {
  color: var(--green);
  font-weight: 400;
}

.logo-name span {
  color: var(--lavender-dark);
}

.desktop-nav {
  display: flex;
  gap: 32px;
  align-items: center;
}

.desktop-nav a {
  position: relative;

  font-size: 12px;
  text-transform: uppercase;

  font-weight: 600;
  letter-spacing: 0.5px;

  color: #292929;
}

.desktop-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0;
  height: 2px;

  background: var(--lavender);

  transition: 0.25s;
}

.desktop-nav a:hover::after {
  width: 100%;
}

.election-date {
  padding: 12px 22px;

  border-radius: 100px;

  background: var(--lavender);
  color: white;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 1px;
}


/* HERO */

.hero {
  position: relative;
  overflow: hidden;

  min-height: 700px;

  display: flex;
  align-items: center;
}

.hero-decoration {
  position: absolute;

  width: 180px;
  height: 430px;

  left: -140px;
  top: 80px;

  border: 1px solid #d9d0ee;
  border-radius: 50%;
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;

  align-items: center;

  gap: 70px;
}

.hero-content {
  padding: 70px 0;
}

.eyebrow {
  color: var(--lavender-dark);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 2px;

  margin-bottom: 14px;
}

.candidate-label {
  display: inline-block;

  color: var(--green);

  font-size: 15px;
  font-weight: 600;

  margin-bottom: 22px;
}

.hero h1 {
  font-family: var(--serif);

  font-size: clamp(58px, 6vw, 80px);

  font-weight: 400;
  line-height: 0.98;

  color: var(--green-dark);

  max-width: 650px;
}

.hero h1 span {
  display: block;
  color: var(--lavender-dark);
}

.title-line,
.small-line,
.center-line {
  height: 2px;

  background: var(--lavender);

  margin-top: 26px;
}

.title-line {
  width: 45px;
}

.small-line {
  width: 38px;
  margin-bottom: 28px;
}

.center-line {
  width: 42px;

  margin-left: auto;
  margin-right: auto;
}

.hero-text {
  margin-top: 22px;

  color: var(--muted);

  max-width: 570px;

  font-size: 16px;
}

.hero-actions {
  display: flex;
  gap: 14px;

  margin-top: 34px;
}

.btn {
  border: 0;
  cursor: pointer;

  min-height: 48px;

  padding: 0 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  border-radius: 3px;

  text-transform: uppercase;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.4px;

  transition: 0.25s;
}

.btn-primary {
  background: var(--green);
  color: white;
}

.btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
}

.btn-outline {
  border: 1px solid var(--green);
  color: var(--green);
}

.btn-outline:hover {
  background: var(--green);
  color: white;
}

.hero-photo {
  position: relative;

  align-self: stretch;

  min-height: 610px;
}

.hero-photo > img {
  position: absolute;

  width: calc(100% + 120px);
  height: 100%;

  object-fit: cover;

  object-position: center;

  left: 0;
  top: 0;
}

.photo-tag {
  position: absolute;

  bottom: 30px;
  left: 30px;

  z-index: 2;

  background: rgba(255, 255, 255, 0.93);

  backdrop-filter: blur(8px);

  padding: 16px 22px;

  display: flex;
  flex-direction: column;

  color: var(--green-dark);

  font-size: 12px;
}

.photo-tag strong {
  font-family: var(--serif);

  font-size: 19px;

  font-weight: 400;
}


/* VOZ */

.voice-section {
  padding: 90px 0;

  text-align: center;

  background: white;
}

.voice-container {
  max-width: 950px;
}

.voice-section h2 {
  font-family: var(--serif);

  color: var(--green-dark);

  font-size: 50px;

  font-weight: 400;

  line-height: 1.08;
}

.voice-section h2 span {
  color: var(--lavender-dark);
}


/* QUIÉN SOY */

.about {
  padding: 115px 0;

  background:
    linear-gradient(
      90deg,
      #faf8fd,
      #f5f1fa
    );
}

.about-grid {
  display: grid;

  grid-template-columns: 0.85fr 1fr;

  align-items: center;

  gap: 95px;
}

.about-photo-wrapper {
  position: relative;
}

.about-photo-background {
  position: absolute;

  width: 100%;
  height: 100%;

  left: -24px;
  bottom: -24px;

  background: #ded5ef;
}

.about-photo {
  position: relative;

  z-index: 2;

  height: 500px;

  object-fit: cover;
}

.about-content h2 {
  font-family: var(--serif);

  color: var(--green);

  font-weight: 400;

  font-size: 55px;
  line-height: 1;
}

.about-content p:not(.eyebrow) {
  margin-bottom: 17px;

  color: var(--muted);
}

.about-content strong {
  color: var(--green-dark);
}

blockquote {
  border-left: 3px solid var(--lavender);

  margin-top: 30px;

  padding-left: 25px;

  font-family: var(--serif);

  font-size: 25px;

  line-height: 1.3;

  color: var(--green-dark);
}


/* PROPUESTAS */

.proposals {
  padding: 110px 0;

  background: white;
}

.section-heading {
  max-width: 820px;

  margin: 0 auto 55px;

  text-align: center;
}

.section-heading h2 {
  font-family: var(--serif);

  color: var(--green);

  font-size: 48px;

  font-weight: 400;

  line-height: 1.1;
}

.proposal-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;
}

.proposal-card {
  position: relative;

  border: 1px solid var(--border);

  padding: 34px 28px;

  min-height: 370px;

  background: white;

  transition: 0.25s;
}

.proposal-card:hover {
  transform: translateY(-5px);

  border-color: #cfc4e5;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.proposal-icon {
  width: 68px;
  height: 68px;

  border-radius: 50%;

  display: grid;
  place-items: center;

  margin-bottom: 28px;

  background: var(--lavender-soft);

  color: var(--green);

  font-size: 28px;
}

.proposal-number {
  position: absolute;

  top: 32px;
  right: 25px;

  color: var(--lavender);

  font-size: 12px;
  font-weight: 700;
}

.proposal-card h3 {
  font-family: var(--serif);

  color: var(--green);

  font-size: 24px;

  font-weight: 400;

  line-height: 1.1;

  margin-bottom: 16px;
}

.proposal-card p {
  color: var(--muted);

  font-size: 14px;
}


/* ELECCIONES */

.elections-info {
  padding: 100px 0;

  background: var(--lavender-soft);
}

.elections-header {
  display: flex;

  align-items: center;

  gap: 28px;

  margin-bottom: 55px;
}

.calendar-circle {
  flex-shrink: 0;

  width: 95px;
  height: 95px;

  border-radius: 50%;

  display: grid;
  place-items: center;

  background: var(--lavender);

  color: white;

  font-size: 38px;
}

.elections-header h2 {
  font-family: var(--serif);

  color: var(--green);

  font-size: 48px;

  font-weight: 400;

  line-height: 1;
}

.elections-intro {
  margin-top: 12px;

  color: var(--muted);
}

.election-cards {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;
}

.election-cards article {
  background: white;

  padding: 30px;

  min-height: 190px;
}

.election-cards span {
  color: var(--lavender);

  font-weight: 700;

  font-size: 12px;
}

.election-cards h3 {
  margin: 18px 0 10px;

  color: var(--green);

  font-family: var(--serif);

  font-size: 26px;

  font-weight: 400;
}

.election-cards p {
  font-size: 14px;

  color: var(--muted);
}


/* VOTO */

.vote-banner {
  padding: 70px 0;

  background:
    linear-gradient(
      100deg,
      #f8f4fc,
      #eee8f8
    );
}

.vote-banner-container {
  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 38px;
}

.vote-icon {
  width: 92px;
  height: 92px;

  border-radius: 50%;

  display: grid;
  place-items: center;

  background: var(--lavender);

  color: white;

  font-size: 38px;
}

.vote-banner h2 {
  font-family: var(--serif);

  color: var(--green);

  font-size: 37px;

  font-weight: 400;
}

.vote-banner p {
  max-width: 670px;

  color: var(--muted);

  margin-top: 8px;
}

.btn-lavender {
  background: var(--lavender);

  color: white;
}

.btn-lavender:hover {
  background: var(--lavender-dark);

  transform: translateY(-2px);
}


/* CONTACTO */

.contact {
  padding: 90px 0;

  background: #fcfbf8;
}

.contact-grid {
  display: grid;

  grid-template-columns: 0.8fr 1.2fr;

  gap: 80px;

  align-items: center;
}

.contact h2 {
  font-family: var(--serif);

  color: var(--green);

  font-size: 48px;

  font-weight: 400;
}

.contact-description {
  color: var(--muted);

  margin-top: 12px;
}

.social-buttons {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 14px;
}

.social-button {
  height: 65px;

  border: 1px solid #ded8e8;

  background: white;

  display: flex;
  align-items: center;

  gap: 16px;

  padding: 0 22px;

  color: var(--green);

  font-weight: 600;

  transition: 0.2s;
}

.social-button i {
  width: 34px;
  height: 34px;

  border-radius: 50%;

  display: grid;
  place-items: center;

  background: var(--lavender);

  color: white;

  font-size: 17px;
}

.social-button:hover {
  border-color: var(--lavender);

  transform: translateY(-2px);
}


/* FOOTER */

footer {
  border-top: 1px solid var(--border);

  background: white;
}

.footer-content {
  min-height: 120px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  color: var(--muted);

  font-size: 13px;
}

.footer-brand strong {
  display: block;

  font-family: var(--serif);

  color: var(--green);

  font-size: 21px;

  font-weight: 400;
}


/* MODAL */

.modal {
  position: fixed;

  inset: 0;

  z-index: 100;

  display: none;

  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-overlay {
  position: absolute;

  inset: 0;

  background: rgba(10, 30, 23, 0.72);

  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;

  z-index: 2;

  width: min(850px, 92%);

  max-height: 86vh;

  overflow-y: auto;

  background: white;

  padding: 55px;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
}

.modal-close {
  position: absolute;

  top: 20px;
  right: 20px;

  width: 40px;
  height: 40px;

  border: 0;

  background: var(--lavender-soft);

  color: var(--green);

  cursor: pointer;

  font-size: 20px;
}

.modal-content h2 {
  max-width: 700px;

  font-family: var(--serif);

  color: var(--green);

  font-size: 42px;

  font-weight: 400;

  line-height: 1.1;
}

.modal-text p {
  margin-bottom: 18px;

  color: #555;

  font-size: 15px;
}

.modal-ending {
  font-family: var(--serif);

  font-size: 28px !important;

  color: var(--green) !important;
}


/* MOBILE */

@media (max-width: 900px) {

  .desktop-nav {
    display: none;
  }

  .nav {
    height: 78px;
  }

  .logo-letter {
    font-size: 40px;
  }

  .logo-name {
    font-size: 13px;
  }

  .election-date {
    padding: 9px 15px;
  }


  .hero {
    min-height: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero-content {
    padding: 65px 0 45px;
  }

  .hero h1 {
    font-size: 55px;
  }

  .hero-photo {
    min-height: 530px;
  }

  .hero-photo > img {
    width: 100%;
  }

  .hero-actions {
    flex-wrap: wrap;
  }


  .voice-section h2 {
    font-size: 39px;
  }


  .about-grid {
    grid-template-columns: 1fr;

    gap: 70px;
  }

  .about-photo {
    height: auto;
  }

  .about-content h2 {
    font-size: 45px;
  }


  .proposal-grid {
    grid-template-columns: 1fr 1fr;
  }


  .election-cards {
    grid-template-columns: 1fr;
  }


  .vote-banner-container {
    grid-template-columns: 1fr;
  }


  .contact-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .container {
    width: 88%;
  }

  .logo-name {
    display: none;
  }

  .hero h1 {
    font-size: 46px;
  }

  .hero-photo {
    min-height: 430px;
  }

  .photo-tag {
    left: 15px;
    bottom: 15px;
  }

  .voice-section {
    padding: 70px 0;
  }

  .voice-section h2 {
    font-size: 34px;
  }

  .about {
    padding: 80px 0;
  }

  .proposal-grid {
    grid-template-columns: 1fr;
  }

  .section-heading h2 {
    font-size: 38px;
  }

  .elections-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .elections-header h2 {
    font-size: 40px;
  }

  .vote-banner h2 {
    font-size: 32px;
  }

  .social-buttons {
    grid-template-columns: 1fr;
  }

  .modal-content {
    padding: 45px 25px 30px;
  }

  .modal-content h2 {
    font-size: 32px;
  }

  .footer-content {
    padding: 35px 0;

    flex-direction: column;

    align-items: flex-start;

    gap: 20px;
  }

}
/* Equipo y textos completos: misma paleta y tipografía del sitio original. */
.desktop-nav { gap: 22px; }
.campaign-quote { border: 0; padding: 0; margin: 0; font-size: clamp(23px, 2.5vw, 32px); line-height: 1.5; }
.quote-signature { margin-top: 28px; color: var(--muted); font-size: 13px; }
.quote-signature strong { color: var(--green); font-size: 18px; }
.team-section { padding: 100px 0; background: var(--warm-white); }
.team-intro { max-width: 850px; margin: 0 auto 45px; color: var(--muted); }
.team-intro p + p { margin-top: 18px; }
.team-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 20px; }
.team-card { border: 1px solid var(--border); background: white; padding: 0 0 22px; text-align: left; cursor: pointer; color: var(--green); transition: transform .2s, box-shadow .2s; }
.team-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px #194f3a12; }
.team-card img { aspect-ratio: 1; object-fit: cover; object-position: center top; }
.team-name { display: block; padding: 20px 16px 10px; font-family: var(--serif); font-size: 23px; line-height: 1.15; min-height: 90px; }
.team-more { display: flex; justify-content: space-between; padding: 0 16px; font-size: 12px; font-weight: 600; }
.team-more span { color: var(--lavender-dark); }
.proposal-copy { max-width: 850px; margin: 0 auto 40px; color: var(--muted); }
.proposal-copy h3 { color: var(--green); font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.25; margin: 28px 0 18px; }
.proposal-copy p + p { margin-top: 16px; }
.proposal-copy ul { padding-left: 24px; margin: 18px 0; }
.proposal-copy li { margin: 8px 0; }
.proposal-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.proposal-card { min-height: 230px; padding-top: 60px; }
.commitment { margin-top: 55px; margin-bottom: 0; }
.logos-section { padding: 45px 0; background: white; border-top: 1px solid var(--border); }
.logos-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: center; gap: 30px; }
.logos-grid img { height: 90px; object-fit: contain; }
.profile-dialog { position: fixed; inset: 0; margin: auto; border: 0; width: min(750px,92vw); max-height: 86dvh; padding: 55px; color: var(--text); background: white; overflow: auto; box-shadow: 0 25px 70px #0003; }
.profile-dialog::backdrop { background: #0a1e17b8; backdrop-filter: blur(4px); }
.profile-dialog h2 { font: 400 42px/1.1 var(--serif); color: var(--green); padding-right: 25px; }
.dialog-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; background: var(--lavender-soft); color: var(--green); font-size: 28px; cursor: pointer; }
:focus-visible { outline: 3px solid var(--lavender-dark); outline-offset: 5px; }
.social-button[aria-disabled="true"] { opacity: .55; cursor: default; transform: none; }
@media(max-width:1000px) { .team-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:900px) { .proposal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .team-section { padding: 70px 0; } .team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; } .team-name { font-size: 21px; } .proposal-grid { grid-template-columns: 1fr; } .logos-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } .profile-dialog { padding: 55px 25px 30px; } .profile-dialog h2 { font-size: 32px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition: none !important; } }

/* Se adapta automáticamente a la preferencia del sistema. */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root {
    --green: #9bd4b5;
    --green-dark: #c0e6cf;
    --lavender: #bba8e1;
    --lavender-dark: #c8b6ef;
    --lavender-soft: #2a2535;
    --warm-white: #151b18;
    --white: #1c2420;
    --text: #eef2ef;
    --muted: #bec8c1;
    --border: #37433c;
  }
  .header { background: #151b18f5; }
  .desktop-nav a { color: var(--text); }
  .voice-section, .proposals, footer, .team-card, .proposal-card,
  .election-cards article, .social-button, .profile-dialog { background: var(--white); }
  .about { background: linear-gradient(90deg, #202127, #25232e); }
  .about-photo-background { background: #423953; }
  .contact { background: var(--warm-white); }
  .vote-banner { background: linear-gradient(100deg, #22232b, #2d2738); }
  .hero-decoration { border-color: #51465f; }
  .photo-tag { background: #17251dee; color: var(--green-dark); }
  .btn-primary { background: #9bd4b5; color: #12291d; }
  .btn-primary:hover { background: #c0e6cf; }
  .btn-outline:hover { background: var(--green); color: #12291d; }
  .btn-lavender, .election-date, .calendar-circle, .vote-icon,
  .social-button i { color: #241b32; }
  .social-button { border-color: var(--border); }
  .proposal-card:hover { border-color: #8e7cbd; box-shadow: 0 15px 35px #0003; }
  .modal-text p { color: var(--muted); }
  .profile-dialog::backdrop { background: #040a07cc; }
  ::selection { background: #bba8e1; color: #181020; }
}