/* =========================================================
   ESTRALIA · SOBRE NOSOTROS · V9
   CSS específico de página. Complementa main.css.
   Hero full image como Home, introducción en zigzag, fundadores ampliados y bloque común de contacto.
   ========================================================= */

:root {
  --about-blue: rgb(15, 98, 254);
  --about-black: #111111;
  --about-text: #222222;
  --about-muted: #555555;
  --about-soft: #f7f7f7;
  --about-border: #e5e5e5;
  --about-white: #ffffff;
}

.page-about,
.about-main {
  background: var(--about-white);
  color: var(--about-text);
}

.about-wrap {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.about-section {
  padding: clamp(56px, 7vw, 88px) 0;
}

.about-eyebrow {
  margin: 0 0 12px;
  color: var(--about-blue);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


.about-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #111;
  padding: clamp(150px, 18vw, 190px) 0 clamp(80px, 11vw, 128px);
}

.about-hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.about-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.30) 72%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.38) 100%);
}

.about-hero__inner {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  max-width: 820px;
  justify-self: start;
}

.about-hero .about-eyebrow {
  color: #fff;
}

.about-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
  text-shadow: 0 2px 18px rgba(0,0,0,.28);
}

.about-hero__lead {
  max-width: 720px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.90);
  font-size: clamp(1.06rem, 1.65vw, 1.28rem);
  line-height: 1.68;
  text-shadow: 0 2px 14px rgba(0,0,0,.24);
}

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.about-actions--center {
  justify-content: center;
}

.about-two-col {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: clamp(32px, 6vw, 82px);
  align-items: start;
}

.about-two-col h2,
.about-section-head h2,
.about-final-cta h2 {
  margin: 0;
  color: var(--about-black);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.about-copy {
  color: var(--about-muted);
  font-size: 1.02rem;
  line-height: 1.72;
}

.about-copy p {
  margin: 0 0 18px;
}

.about-copy p:last-child {
  margin-bottom: 0;
}

.about-lead-text {
  color: var(--about-text);
  font-weight: 500;
  font-size: clamp(1.06rem, 1.4vw, 1.2rem);
}


.about-intro__lead {
  padding-bottom: clamp(38px, 5vw, 64px);
}

.about-zigzag {
  display: grid;
  gap: clamp(46px, 7vw, 88px);
}

.about-zigzag__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 78px);
  align-items: center;
}

.about-zigzag__copy {
  color: var(--about-muted);
  font-size: 1.02rem;
  line-height: 1.78;
}

.about-zigzag__copy p {
  margin: 0;
}

.about-zigzag__media {
  min-height: clamp(280px, 34vw, 430px);
  margin: 0;
}

.about-zigzag__media--image {
  overflow: hidden;
  background: #fff;
}

.about-zigzag__media--image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}

.about-zigzag__media--placeholder {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--about-border);
  background:
    linear-gradient(135deg, transparent 0 49.6%, rgba(15, 98, 254, 0.13) 49.8% 50.2%, transparent 50.4%),
    linear-gradient(45deg, transparent 0 49.6%, rgba(15, 98, 254, 0.13) 49.8% 50.2%, transparent 50.4%),
    var(--about-soft);
}

.about-zigzag__media--placeholder::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px dashed rgba(34, 34, 34, 0.22);
  pointer-events: none;
}

.about-zigzag__media--placeholder span {
  position: relative;
  z-index: 1;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--about-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}


.about-people {
  background: var(--about-soft);
}

.about-section-head {
  max-width: 760px;
  margin-bottom: 34px;
}

.about-section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.about-section-head p {
  margin: 14px 0 0;
  color: var(--about-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.about-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 34px);
  align-items: stretch;
}

.about-profile-grid--equal > .about-profile {
  height: 100%;
}

.about-profile {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(26px, 4vw, 38px);
  background: #fff;
  border: 1px solid var(--about-border);
  text-align: center;
}

.about-profile__photo {
  width: clamp(220px, 22vw, 280px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 22px;
  border-radius: 50%;
  overflow: hidden;
  background: #eee;
  border: 4px solid #fff;
  box-shadow: 0 0 0 1px var(--about-border);
}

.about-profile__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-profile--javier .about-profile__photo img {
  object-position: center 35%;
}

.about-profile--jose .about-profile__photo img {
  object-position: center 28%;
}

.about-profile__role {
  margin: 0 0 8px;
  color: var(--about-blue);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about-profile h3 {
  margin: 0 0 12px;
  color: var(--about-black);
  font-size: clamp(1.32rem, 2.4vw, 1.85rem);
  line-height: 1.16;
  letter-spacing: -0.04em;
}

.about-profile p {
  margin: 0 0 18px;
  color: var(--about-muted);
  line-height: 1.68;
  text-align: left;
}

.about-profile__facts {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--about-muted);
  line-height: 1.62;
  text-align: left;
}

.about-profile__facts li {
  padding-top: 10px;
  border-top: 1px solid var(--about-border);
}

.about-profile__facts strong {
  color: var(--about-text);
}



.about-final-cta {
  padding: clamp(58px, 8vw, 88px) 0;
  background: var(--about-black);
  color: #fff;
}

.about-final-cta__inner {
  max-width: 760px;
  text-align: center;
}

.about-final-cta .about-eyebrow,
.about-final-cta h2,
.about-final-cta p {
  color: #fff;
}

.about-final-cta p {
  margin: 16px 0 0;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
}


.about-final-cta span {
  display: block;
  margin-top: 18px;
  color: rgba(255,255,255,.72);
  font-weight: 600;
}

/* Ajuste del bloque común mapa + formulario al entrar desde Sobre nosotros */
.about-main .ars-bottom {
  margin-top: 0;
}

.about-main .ars-coverage-copy h2 {
  margin-top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 960px) {
  .about-two-col,
  .about-zigzag__row {
    grid-template-columns: 1fr;
  }

  .about-zigzag__row--reverse .about-zigzag__copy {
    order: 1;
  }

  .about-zigzag__row--reverse .about-zigzag__media {
    order: 2;
  }

  .about-zigzag__media {
    min-height: clamp(260px, 62vw, 420px);
  }

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

  .about-profile {
    max-width: 620px;
    margin: 0 auto;
  }

}

@media (max-width: 680px) {
  .about-wrap {
    width: min(100% - 28px, 1120px);
  }

  .about-section {
    padding: 48px 0;
  }

  .about-hero {
    min-height: 88vh;
    padding: 150px 0 64px;
  }

  .about-hero__overlay {
    background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.68) 58%, rgba(0,0,0,.42) 100%);
  }

  .about-hero h1 {
    font-size: clamp(2.25rem, 12vw, 3.3rem);
  }

  .about-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .about-main .home-btn {
    width: 100%;
    text-align: center;
  }

  .about-intro__lead {
    padding-bottom: 34px;
  }

  .about-zigzag {
    gap: 42px;
  }

  .about-zigzag__row {
    gap: 22px;
  }

  .about-zigzag__media--placeholder::after {
    inset: 14px;
  }

  .about-profile__photo {
    width: min(240px, 72vw);
  }
}

@media print {
  .nav-principal,
  .logo-menu,
  .menu-icon,
  .wa-widget,
  .ck-banner,
  .ck-panel,
  .ck-cookie,
  .skip-link {
    display: none !important;
  }

  .about-hero {
    min-height: auto !important;
    padding: 32px 0 28px !important;
    border-bottom: 1px solid #ddd;
    background: #fff !important;
    color: #111 !important;
  }

  .about-hero__media,
  .about-hero__overlay {
    display: none !important;
  }

  .about-hero .about-eyebrow,
  .about-hero h1,
  .about-hero__lead {
    color: #111 !important;
    text-shadow: none !important;
  }

  .about-section,
  .about-final-cta,
  .ars-bottom {
    padding: 28px 0 !important;
  }

  .about-final-cta {
    background: #fff !important;
    color: #111 !important;
    border-top: 1px solid #ddd;
  }

  .about-final-cta .about-eyebrow,
  .about-final-cta h2,
  .about-final-cta p,
  .about-final-cta span {
    color: #111 !important;
  }

  .about-profile,
  .about-zigzag__row,
  .ars-bottom-grid {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .home-btn {
    color: #111 !important;
    border: 1px solid #111 !important;
    background: #fff !important;
  }
}

/* =========================================================
   V11 · Jerarquía editorial del zigzag
   ========================================================= */
.about-zigzag__copy {
  color: var(--about-text);
  font-weight: 500;
  font-size: clamp(1.06rem, 1.35vw, 1.18rem);
  line-height: 1.72;
}

.about-zigzag__copy .about-eyebrow {
  margin: 0 0 14px;
  color: var(--about-blue);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}