/* Implant Dental · especialistas.html (estilos propios; se carga después de site.css) */

/* ---------- Contenido solo para modo dev (?dev=1 => html.dev-media) ---------- */
.esp-devonly { display: none; }
.dev-media .esp-devonly { display: grid; gap: var(--s-4); margin-block: var(--s-6); }

/* ---------- Hero: foto grupal con fundido + texto y cita destacada ---------- */
.esp-hero {
  background: var(--bg);
}

.esp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: center;
}

.esp-hero__photo {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 893;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-2);
}

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

.esp-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(238, 240, 243, 0) 94%, var(--bg) 100%);
}

.esp-hero .breadcrumb {
  margin-bottom: var(--s-2);
}

.esp-hero .page-hero__title {
  font-size: clamp(2.15rem, 4.5vw, 3.1rem);
  line-height: 1.02;
}

.esp-hero .page-hero__title .eyebrow {
  margin-bottom: var(--s-3);
  letter-spacing: 0.12em;
}

.esp-hero .page-hero__lead {
  max-width: 48ch;
  margin-top: var(--s-4);
}

.esp-hero__quote {
  margin: var(--s-4) 0 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  border-left: 4px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
}

.esp-hero .page-hero__actions {
  margin-top: var(--s-5);
  gap: var(--s-3);
}

/* Móvil/tablet (<1024 px): foto a todo el ancho (sin márgenes) y en su proporción real: nadie queda recortado. */
@media (max-width: 1023px) {
  .esp-hero__photo {
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    aspect-ratio: 1600 / 893;
    border-radius: 0;
  }
  .esp-hero__photo img {
    object-position: center;
  }
}

/* Escritorio (≥1024 px): foto a sangre desde el borde izquierdo (1fr) y columna de texto acotada (440–560 px).
   Proporción 1.65 (la foto es 1.79): solo se recorta un tramo de pared a la izquierda; las 5 personas quedan completas.
   El fundido actúa solo en el último 11% derecho y el último 6% inferior, sin radio derecho para no chocar con el fundido. */
@media (min-width: 1024px) {
  .esp-hero {
    padding-top: calc(var(--header-h) + clamp(12px, 1.8vw, 24px));
    padding-bottom: 0;
  }
  .esp-hero > .container {
    max-width: none;
    padding-inline: 0;
  }
  .esp-hero__grid {
    grid-template-columns: minmax(0, 1fr) clamp(440px, 33vw, 560px);
    column-gap: clamp(24px, 2.8vw, 48px);
    row-gap: 0;
    padding-inline-end: clamp(32px, 4.5vw, 104px);
    align-items: center;
  }
  .esp-hero__photo {
    width: 100%;
    height: auto;
    max-height: 82vh;
    min-height: 0;
    aspect-ratio: 1.65;
    border-radius: 0;
    background: transparent;
  }
  .esp-hero__photo img {
    max-height: 82vh;
    object-position: 80% 35%;
  }
  .esp-hero__photo::after {
    background:
      linear-gradient(90deg, rgba(238, 240, 243, 0) 89%, var(--bg) 100%),
      linear-gradient(180deg, rgba(238, 240, 243, 0) 94%, var(--bg) 100%);
  }
  .esp-hero__copy {
    padding-block: var(--s-6);
    padding-inline: 0;
  }
  .esp-hero .page-hero__title {
    font-size: clamp(2.35rem, 2.7vw, 3.25rem);
  }
  .esp-hero .page-hero__title .eyebrow {
    white-space: nowrap;
  }
  .esp-hero .page-hero__watermark {
    display: none;
  }
}

/* Pantallas muy anchas o ultrapanorámicas: cuando max-height (82vh) limita la altura,
   compensamos object-position en Y para que el recorte vertical caiga en el techo, nunca en las personas. */
@media (min-width: 1800px), (min-width: 1024px) and (min-aspect-ratio: 2/1) {
  .esp-hero__photo img {
    object-position: 80% 88%;
  }
}

/* ---------- Equipo: puntos ---------- */
.section[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.esp-points { list-style: none; padding: 0; display: grid; gap: var(--s-5); margin-top: var(--s-8); align-content: stretch; }
@media (min-width: 900px) { .esp-points { grid-template-columns: repeat(3, 1fr); } }
.esp-point { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--s-5); align-content: start; padding: var(--s-6); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); transition: border-color 0.3s, transform 0.4s var(--ease); }
.esp-point:hover { border-color: var(--accent); transform: translateY(-4px); }
.esp-point__icon { grid-row: span 2; display: inline-grid; place-items: center; width: 56px; height: 56px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 50%; }
.esp-point__title { margin-top: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; }
.esp-point__text { margin-top: var(--s-2); color: var(--ink-2); font-size: 0.94rem; }

/* ---------- Filosofía y pasos ---------- */
.esp-principles, .esp-steps { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 800px) { .esp-principles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .esp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .esp-steps { grid-template-columns: repeat(4, 1fr); } }
.esp-principle, .esp-step { position: relative; padding: var(--s-6); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.esp-principle__num, .esp-step__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.25px var(--accent-line);
}
.esp-principle .card__title, .esp-step .card__title { margin-top: var(--s-3); }
.esp-principle .card__text, .esp-step .card__text { margin-bottom: 0; }
.esp-steps { margin-bottom: var(--s-6); }

/* ---------- Sello de garantía ---------- */
.esp-seal {
  display: grid;
  gap: var(--s-6);
  align-items: center;
  padding: clamp(24px, 4vw, 56px);
  background: var(--white);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 760px) { .esp-seal { grid-template-columns: auto 1fr; } }
.esp-seal__badge { display: grid; place-items: center; width: 168px; height: 168px; margin-inline: auto; color: var(--accent); background: radial-gradient(closest-side, var(--accent-soft), transparent); border-radius: 50%; }
.esp-seal__badge svg { width: 132px; height: 132px; }

/* #equipo sin lead: encabezado compacto para acercar la vitrina. */
#equipo .section__head { margin-bottom: clamp(28px, 3vw, 40px); }