/* Approved classic, desaturated editorial direction for Elías Samadi Real Estate. */
:root {
  --navy: #171b1e;
  --navy-soft: #292a29;
  --navy-deep: #111214;
  --paper: #f2efe9;
  --white: #fbfaf7;
  --ivory: #e7e1d7;
  --warm: #d2c9bc;
  --line: #cfc6b9;
  --slate: #4d4a45;
  --muted: #898178;
  --gold: #b49a70;
  --shadow: 0 24px 70px rgba(20, 18, 15, .13);
}
body { background: var(--paper); color: #292824; }
.site-header {
  left: 0; right: 0; height: 94px; padding-inline: clamp(22px, 4.8vw, 76px);
  background: rgba(28, 29, 29, .25); backdrop-filter: blur(8px);
}
.site-header.nav--solid { background: rgba(242,239,233,.96); }
.brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.brand img { width: 174px; height: 82px; object-position: center; }
.desktop-nav { gap: clamp(17px, 2.2vw, 34px); }
.desktop-nav a { font-family: "Playfair Display", Georgia, serif; font-weight: 400; letter-spacing: .13em; font-size: 11px; opacity: .9; }
.header-cta { display: none; }
.menu-toggle span { width: 26px; }
.personal-hero {
  min-height: min(900px, 100svh); padding: 158px 0 40px;
  color: #f8f6f0; background: #333230;
}
.personal-hero-backdrop {
  opacity: 1; filter: grayscale(.82) saturate(.42);
  background:
    linear-gradient(90deg, rgba(31,31,30,.78) 0%, rgba(43,42,40,.46) 50%, rgba(36,35,33,.22) 100%),
    linear-gradient(0deg, rgba(21,21,20,.42), rgba(21,21,20,.08)),
    url("./assets/madrid-hero.jpg") center 47% / cover;
  transform: scale(1.015);
}
.personal-hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(270px, .72fr);
  gap: clamp(34px, 6vw, 92px); align-items: center;
}
.personal-hero-copy { max-width: 760px; padding-top: 26px; }
.personal-hero .eyebrow {
  color: #e0cda8; letter-spacing: .24em; font-size: 11px; font-weight: 500;
}
.personal-hero h1 {
  max-width: 740px; margin: 0 0 24px;
  font-size: clamp(2.8rem, 5.1vw, 5.15rem); line-height: 1.06;
  letter-spacing: -.025em; font-weight: 400;
}
.personal-hero h1 span { color: #e0cda8; font-style: italic; }
.hero-intro {
  max-width: 590px; margin-bottom: 30px; color: rgba(250,248,242,.88);
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.72;
}
.hero-actions .primary-cta {
  min-height: 52px; padding-inline: 25px; color: #f7f3eb;
  border: 1px solid #d5bd91; background: rgba(28,28,27,.22);
  font-family: "Playfair Display", Georgia, serif; font-size: 11px;
  font-weight: 400; letter-spacing: .17em;
}
.hero-actions .primary-cta:hover { color: #232321; background: #d5bd91; }
.hero-signature { display: none; }
.hero-portrait-frame { max-width: 405px; width: min(100%, 405px); justify-self: center; }
.hero-portrait-placeholder {
  aspect-ratio: 4 / 5; min-height: 0; padding: 0; overflow: hidden;
  border: 2px solid #d6bd8e; border-radius: 50% / 47%;
  background: #aaa49a; box-shadow: 0 0 0 7px rgba(214,189,142,.10), 0 22px 60px rgba(0,0,0,.25);
}
.hero-portrait-placeholder::before { content: ""; position: absolute; z-index: 1; inset: 0; border: 1px solid rgba(250,244,229,.6); border-radius: inherit; pointer-events: none; }
.hero-portrait-photo {
  position: absolute; inset: 0; z-index: 0; display: block;
  width: 100%; height: 100%; border-radius: inherit;
  object-fit: cover; object-position: center 24%; transform: none;
  filter: saturate(.76) contrast(1.02);
}
.portrait-caption { margin-top: 18px; text-align: center; color: #f5f0e6; font-size: 23px; }
.portrait-caption small { color: rgba(248,245,237,.74); font-size: 9px; letter-spacing: .2em; }
.hero-scroll { display: none; }
.hero-bottomline {
  gap: 0; justify-content: space-evenly; margin-top: 42px; padding: 19px 3vw 0;
  border-top: 1px solid rgba(242,236,224,.27); color: rgba(249,246,239,.78);
  font-size: 10px; letter-spacing: .2em; font-weight: 400;
}
.brand-section { color: #292824; background: #f2efe9; }
.brand-section .eyebrow, .biography-section .eyebrow, .philosophy-section .eyebrow { color: #8e7856; letter-spacing: .18em; }
.brand-section h2, .biography-section h2, .philosophy-section h2, .contact-section h2 { color: #292824; font-weight: 400; }
.brand-section h2 span, .biography-section h2 span, .philosophy-section h2 span, .contact-section h2 span { color: #9b825b; }
.brand-copy p, .biography-copy p, .philosophy-intro > p:last-child { color: #5c5851; }
.properties-section { color: #292824; background: #f2efe9; }
.properties-top { color: #292824; }
.properties-top .eyebrow, .intro-copy p { color: #69635a; }
.intro-copy .arrow-link { color: #3d3933; }
.filter-bar { background: #f8f6f1; border-color: #d6cfc4; }
.zone-tabs button[aria-pressed="true"], .zone-tabs button:hover { border-color: #9c835d; background: #9c835d; }
.map-section { color: #f7f3ec; background: #292a29; }
.contact-section {
  color: #f8f5ef;
  background: linear-gradient(135deg, rgba(35,35,33,.92), rgba(52,50,46,.94)), url("./assets/madrid-hero.jpg") center / cover;
}
.contact-section .eyebrow { color: #d7bd8e; }
.contact-section h2 { color: #f8f5ef; }
.contact-section h2 span { color: #d7bd8e; }
.contact-section p { color: rgba(248,245,239,.72); }
.contact-form { border-color: rgba(225,211,188,.38); background: rgba(24,24,23,.45); }
.contact-form span { color: #e2d7c4; }
.contact-form input, .contact-form textarea { border-color: rgba(226,215,196,.42); background: rgba(255,255,255,.07); }
.contact-form input:focus, .contact-form textarea:focus { border-color: #d7bd8e; box-shadow: 0 0 0 3px rgba(215,189,142,.13); }
.contact-form .primary-cta { color: #262522; background: #d7bd8e; }
.site-footer { background: #171817; }
.wa-float { background: #d7bd8e; color: #252522; }
@media (max-width: 1080px) {
  .site-header { height: 82px; }
  .brand { left: 24px; transform: translateY(-50%); }
  .brand img { width: 112px; height: 62px; object-position: left center; }
  .personal-hero { padding-top: 128px; }
  .personal-hero-grid { grid-template-columns: minmax(0,1fr) minmax(245px,.72fr); gap: 30px; }
}
@media (max-width: 760px) {
  .site-header { height: 74px; padding-inline: 16px; background: rgba(20,22,23,.88); }
  .brand { left: 16px; }
  .brand img { width: 94px; height: 52px; }
  .personal-hero { min-height: 0; padding: 122px 0 24px; }
  .personal-hero-backdrop {
    background:
      linear-gradient(180deg, rgba(37,37,35,.76), rgba(38,37,35,.56) 44%, rgba(26,26,25,.76)),
      url("./assets/madrid-hero.jpg") center / cover;
    filter: grayscale(.86) saturate(.36);
  }
  .personal-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .personal-hero-copy { padding-top: 0; }
  .personal-hero .eyebrow { margin-bottom: 14px; font-size: 10px; letter-spacing: .19em; }
  .personal-hero h1 { font-size: clamp(2.55rem, 10.8vw, 4rem); line-height: 1.08; margin-bottom: 20px; }
  .hero-intro { font-size: 16px; line-height: 1.65; margin-bottom: 22px; }
  .hero-actions .primary-cta { min-height: 48px; }
  .hero-portrait-frame { width: min(78%, 330px); max-width: 330px; justify-self: center; }
  .hero-portrait-placeholder { aspect-ratio: 4 / 5; min-height: 0; }
  .portrait-caption { font-size: 21px; margin-top: 12px; }
  .hero-bottomline { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; margin-top: 30px; padding-top: 17px; font-size: 8px; letter-spacing: .12em; }
  .brand-grid { grid-template-columns: 1fr; }
  .contact-section { background: linear-gradient(180deg, rgba(36,35,32,.95), rgba(30,30,28,.97)), url("./assets/madrid-hero.jpg") center / cover; }
}
@media (prefers-reduced-motion: reduce) {
  .personal-hero *, .site-header * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* Contraste de navegación al desplazarse: fondo claro, tipografía azul marino. */
.site-header.nav--solid,
.site-header.nav--solid .desktop-nav a,
.site-header.nav--solid .menu-toggle {
  color: #1d3557;
}


/* Accesibilidad: contraste legible en todas las secciones de la landing (WCAG AA). */
:root {
  --muted: #625b52;
  --slate: #4d4a45;
}

/* Textos secundarios sobre superficies claras. */
.brand-copy p,
.biography-copy p,
.philosophy-intro > p:last-child,
.properties-top .eyebrow,
.intro-copy p,
.intro-copy .arrow-link,
.property-meta,
.property-details dt,
.result-line,
.empty-state,
.status-select span {
  color: #514b43;
}

/* La cabecera hero y el encabezado de propiedades se superponen a fotografía:
   refuerza el texto claro y mantiene una capa oscura detrás del contenido. */
.personal-hero-copy,
.personal-hero-copy .eyebrow,
.personal-hero .hero-intro,
.personal-hero .hero-bottomline,
.properties-top,
.properties-top .eyebrow,
.properties-top .intro-copy p,
.properties-top .intro-copy .arrow-link {
  color: #fbfaf7;
}
.personal-hero-backdrop {
  background:
    linear-gradient(90deg, rgba(20,20,19,.86) 0%, rgba(25,25,24,.72) 50%, rgba(25,25,24,.55) 100%),
    linear-gradient(0deg, rgba(15,15,14,.55), rgba(15,15,14,.25)),
    url("./assets/madrid-hero.jpg") center 47% / cover;
}
.properties-section::after {
  background:
    linear-gradient(180deg, rgba(20,18,17,.72) 0%, rgba(20,18,17,.82) 54%, rgba(20,18,17,.92) 82%, var(--white) 100%),
    linear-gradient(90deg, rgba(20,18,17,.86) 0%, rgba(20,18,17,.68) 42%, rgba(20,18,17,.52) 100%);
}

/* Formulario: etiquetas, texto escrito, marcadores y foco con contraste claro. */
.contact-form label > span,
.contact-form span {
  color: #f2e7d4 !important;
}
.contact-form input,
.contact-form textarea {
  color: #fbfaf7 !important;
  background: rgba(10,10,10,.72) !important;
  border-color: #b7aa96;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #e0d8cc;
  opacity: 1;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #f2d5a0;
  outline: 2px solid #f2d5a0;
  outline-offset: 2px;
}
.contact-form .primary-cta,
.contact-form .primary-cta.dark {
  color: #171b1e;
  background: #f2d5a0;
  border: 1px solid #f2d5a0;
}
.contact-form .primary-cta:hover,
.contact-form .primary-cta.dark:hover {
  color: #171b1e;
  background: #fbfaf7;
}

/* Texto secundario del pie y elementos interactivos sobre fondos oscuros. */
.site-footer {
  color: #d8d5cf;
}
.site-footer p,
.site-footer nav a,
.site-footer .footer-contact a {
  color: #d8d5cf;
}
.map-panel p,
.zone-summary button,
.zone-summary a,
.gallery-modal figcaption {
  color: #e0ded9;
}

/* Al desplazarse, todo el texto de navegación cambia a azul marino. */
.site-header.nav--solid,
.site-header.nav--solid .desktop-nav a,
.site-header.nav--solid .menu-toggle {
  color: #1d3557;
}
.site-header.nav--solid .desktop-nav a {
  opacity: 1;
}


/* Mobile QA: spacing, tap targets, filters and form layout. */
@media (max-width: 760px) {
  html { scroll-padding-top: 82px; }
  .site-header {
    height: 74px;
    padding-inline: 14px;
    gap: 10px;
  }
  .brand { left: 14px; max-width: calc(100% - 76px); }
  .brand img { width: 132px; height: 54px; object-fit: contain; }
  .menu-toggle {
    display: block;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid rgba(230, 207, 159, .55);
    border-radius: 2px;
    color: #fff;
    background: rgba(17, 19, 20, .24);
    touch-action: manipulation;
  }
  .site-header.nav--solid .menu-toggle { color: #fff; }
  .mobile-menu {
    z-index: 55;
    padding: 90px 22px 28px;
    overflow-y: auto;
    background: rgba(23, 27, 30, .98);
  }
  .mobile-menu nav { width: min(100%, 420px); gap: 0; }
  .mobile-menu a {
    display: block;
    padding: 17px 12px;
    border-bottom: 1px solid rgba(242, 239, 233, .18);
    font-size: 17px;
    line-height: 1.35;
  }
  .mobile-menu a:focus-visible,
  .menu-toggle:focus-visible {
    outline: 2px solid #e0cda8;
    outline-offset: 3px;
  }
  .personal-hero { padding: 108px 0 30px; }
  .personal-hero-grid { gap: 24px; }
  .personal-hero h1 {
    font-size: clamp(2.35rem, 9.8vw, 3.35rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
  .hero-intro br { display: none; }
  .hero-actions { width: 100%; }
  .hero-actions .primary-cta { width: 100%; }
  .hero-portrait-frame { width: min(76vw, 290px); }
  .hero-portrait-placeholder { aspect-ratio: .82; min-height: 0; }
  .hero-bottomline { gap: 9px 14px; line-height: 1.5; }
  .brand-grid { gap: 22px; }
  .filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    margin-top: 28px;
    padding: 16px;
  }
  .zone-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .zone-tabs button { min-width: 0; min-height: 44px; padding: 8px 9px; font-size: 12px; }
  .status-select { min-width: 0; width: 100%; }
  .status-select select { min-height: 46px; width: 100%; color: #292824; }
  .property-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .property-body { padding: 18px; }
  .map-layout { gap: 18px; }
  .madrid-map { min-width: 0; overflow: hidden; }
  .district-map-svg { width: 100%; height: 100%; }
  .map-heading { align-items: start; gap: 14px; }
  .map-heading h2 { font-size: clamp(2rem, 8vw, 2.7rem); }
  .clear-filter { min-height: 44px; padding: 0 14px; }
  .contact-grid { gap: 24px; }
  .contact-form { padding: 18px; }
  .contact-form input,
  .contact-form textarea { min-height: 46px; font-size: 16px; }
  .contact-form textarea { min-height: 120px; }
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .site-footer img { max-width: min(220px, 70vw); height: auto; }
  .wa-float { right: 14px; bottom: 14px; min-height: 48px; padding: 0 14px; }
}
@media (max-width: 380px) {
  .personal-hero h1 { font-size: 2.25rem; }
  .hero-portrait-frame { width: min(82vw, 270px); }
  .zone-tabs { grid-template-columns: 1fr; }
  .portrait-caption small { letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* Mobile/desktop QA: consistent readable gutters and reliable header contrast. */
.container {
  width: min(1200px, calc(100% - 48px));
}
.site-header.nav--solid .menu-toggle,
.site-header.nav--solid .menu-toggle span {
  color: #1d3557;
}
.site-header.nav--solid .menu-toggle span {
  background: currentColor;
}
@media (max-width: 760px) {
  .container {
    width: calc(100% - 40px);
  }
  .site-header {
    padding-inline: 20px;
  }
  .brand {
    left: 20px;
    max-width: calc(100% - 88px);
  }
  .menu-toggle {
    flex-basis: 44px;
    width: 44px;
    min-width: 44px;
  }
  .personal-hero-copy,
  .brand-heading,
  .brand-copy,
  .properties-top,
  .map-heading,
  .map-panel,
  .biography-heading,
  .biography-copy,
  .philosophy-intro,
  .philosophy-grid,
  .contact-grid,
  .site-footer .footer-grid {
    min-width: 0;
  }
  .contact-grid {
    padding-inline: 0;
  }
  .contact-form {
    width: 100%;
    min-width: 0;
    padding: 20px;
  }
  .contact-form label,
  .contact-form input,
  .contact-form textarea {
    min-width: 0;
    max-width: 100%;
  }
  .site-footer .footer-grid {
    padding-inline: 0;
  }
}
@media (max-width: 380px) {
  .container {
    width: calc(100% - 36px);
  }
  .site-header {
    padding-inline: 18px;
  }
  .brand { left: 18px; }
  .contact-form { padding: 16px; }
}


/* Vídeo real de portada: el vídeo ocupa todo el fondo y el overlay queda encima. */
.personal-hero { position: relative; isolation: isolate; }
.personal-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 1;
  background: #292a29 url("./assets/madrid-hero.jpg") center 47% / cover no-repeat;
}
.personal-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  opacity: 1;
  filter: grayscale(.72) saturate(.55);
}
.personal-hero-backdrop::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(31,31,30,.80) 0%, rgba(43,42,40,.56) 50%, rgba(36,35,33,.30) 100%),
    linear-gradient(0deg, rgba(21,21,20,.52), rgba(21,21,20,.10));
  pointer-events: none;
}
.personal-hero-grid { position: relative; z-index: 2; }
@media (max-width: 760px) {
  .personal-hero-video { object-position: center; }
  .personal-hero-backdrop::after {
    background: linear-gradient(180deg, rgba(37,37,35,.78), rgba(38,37,35,.61) 44%, rgba(26,26,25,.80));
  }
}




/* Retrato de portada: una única imagen nítida, a sangre dentro del óvalo. */
#inicio .hero-portrait-frame {
  display: block;
  position: relative;
  width: min(100%, 405px);
  max-width: 405px;
  margin: 0 auto;
  padding: 0;
  filter: none;
  box-shadow: none;
}
#inicio .hero-portrait-placeholder {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 5;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid #d6bd8e;
  border-radius: 50% / 47%;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}
#inicio .hero-portrait-placeholder::before,
#inicio .hero-portrait-placeholder::after {
  content: none;
  display: none;
}
#inicio img.hero-portrait-photo {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  object-fit: cover;
  object-position: 50% 40%;
  opacity: 1;
  visibility: visible;
  filter: none;
  mix-blend-mode: normal;
  transform: none;
  box-shadow: none;
  background: transparent;
}
#inicio .portrait-caption {
  position: relative;
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
  text-align: center;
  filter: none;
  text-shadow: none;
  box-shadow: none;
}
@media (max-width: 760px) {
  #inicio .hero-portrait-frame {
    width: min(86vw, 330px);
    max-width: 330px;
  }
}


/* Patrimonio con estrategia: fondo fotográfico cálido, sin alterar el retrato original. */
.properties-section {
  color: #f8f6f0;
  background:
    linear-gradient(90deg, rgba(28, 29, 29, .82) 0%, rgba(43, 42, 40, .58) 52%, rgba(36, 35, 33, .38) 100%),
    linear-gradient(0deg, rgba(21, 21, 20, .48), rgba(21, 21, 20, .12)),
    url("./assets/elias-portrait.jpg") center 34% / cover no-repeat;
}
.properties-section .properties-top,
.properties-section .properties-top h1,
.properties-section .properties-top h1 span { color: #fbfaf7; }
.properties-section .properties-top .eyebrow,
.properties-section .intro-copy p { color: rgba(250, 248, 242, .82); }
.properties-section .intro-copy .arrow-link { color: #e3d2b2; }
.properties-section .intro-copy .arrow-link:hover { color: #fff; }

/* Las tarjetas enseñan varias vistas de cada vivienda sin perder la foto principal. */
#propertyGrid .property-media { position: relative; }
#propertyGrid .property-thumbnails {
  position: absolute;
  z-index: 4;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 24px);
  padding: 5px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 3px;
  background: rgba(18, 20, 21, .58);
  backdrop-filter: blur(7px);
}
#propertyGrid .property-thumbnail {
  width: 43px;
  height: 34px;
  flex: 0 0 43px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 2px;
  background: #292a29;
  opacity: .78;
}
#propertyGrid .property-thumbnail.is-active,
#propertyGrid .property-thumbnail:hover {
  border-color: #d7bd8e;
  opacity: 1;
}
#propertyGrid .property-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#propertyGrid .property-thumbnails-more {
  min-width: 31px;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  text-align: center;
}
@media (max-width: 760px) {
  .properties-section {
    background-attachment: scroll;
    background-position: 54% 30%;
  }
  #propertyGrid .property-thumbnail { width: 39px; height: 31px; flex-basis: 39px; }
}


/* Experiencia comercial: fotografía horizontal visible a escala real, con fondo marrón debajo. */
.biography-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fffdf8;
  background-color: #242523;
  background-image:
    linear-gradient(90deg, rgba(20, 20, 19, .48), rgba(20, 20, 19, .34) 55%, rgba(20, 20, 19, .42)),
    url("./assets/IMG-20261106-WA0035.jpg?v=20261107-experiencia-fondo");
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% auto;
  background-position: center center, center top;
}
.biography-section::before,
.biography-section::after {
  content: none !important;
  display: none !important;
}
.biography-section .biography-heading,
.biography-section .biography-copy {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 7px rgba(0, 0, 0, .95);
}
.biography-section .biography-heading .eyebrow,
.biography-section .biography-heading h2,
.biography-section .biography-heading h2 span,
.biography-section .biography-heading .bio-lead,
.biography-section .biography-copy,
.biography-section .biography-copy p,
.biography-section .trajectory-list article h3,
.biography-section .trajectory-list article > span {
  color: #fffdf8 !important;
}
.biography-section .biography-heading .eyebrow,
.biography-section .trajectory-list article > span {
  color: #f2d7a5 !important;
}
.biography-section .trajectory-list {
  border-color: rgba(255, 253, 248, .58);
}
.biography-section .trajectory-list article {
  border-color: rgba(255, 253, 248, .58);
}
@media (max-width: 760px) {
  .biography-section {
    background-size: 100% 100%, 100% auto;
    background-position: center center, center top;
    background-image:
      linear-gradient(rgba(20, 20, 19, .46), rgba(20, 20, 19, .46)),
      url("./assets/IMG-20261106-WA0035.jpg?v=20261107-experiencia-fondo");
  }
  .biography-section .biography-heading {
    position: relative;
    top: auto;
  }
}