/* =============================================================
   AREA PAGES — shared styles
   ============================================================= */

/* ── Hero ── */
.area-page-hero {
  position: relative; padding: 9rem 0 5rem;
  background: var(--bg); overflow: hidden;
}
.area-page-glow {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%);
  width: 700px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,168,220,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.area-page-hero-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 3rem; align-items: center;
  position: relative; z-index: 1;
}

/* Breadcrumb */
.area-breadcrumb {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; color: var(--white-60);
  margin-bottom: .5rem; transition: color .2s;
}
.area-breadcrumb:hover { color: var(--blue); }

.area-page-piso {
  display: block; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--blue); margin-bottom: .5rem;
}
.area-page-hero-content h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin-bottom: .75rem;
}
.area-page-tagline {
  font-size: 1.1rem; font-weight: 600; color: var(--white-60);
  font-style: italic; margin-bottom: 1rem;
}
.area-page-desc {
  color: var(--white-60); line-height: 1.8; margin-bottom: 1.5rem;
}
.area-page-doctor {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .85rem; color: var(--white-60);
  padding: .85rem 1.1rem; border-radius: 10px;
  background: var(--white-10); border: 1px solid var(--line);
  margin-bottom: 1.75rem;
}
.area-page-doctor svg { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.area-page-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Hero image */
.area-page-hero-img {
  position: relative; border-radius: 20px; overflow: hidden;
  aspect-ratio: 4/3; background: var(--bg-card);
  border: 1px solid var(--line);
}
.area-page-hero-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.area-page-img-ph {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center; color: var(--white-20);
}
.area-page-hero-img img[style*="display: none"] + .area-page-img-ph,
.area-page-hero-img img[style*="display:none"] + .area-page-img-ph { display: flex; }

/* ── Treatments section ── */
.area-page-section {
  background: var(--bg-2); padding: 6rem 0;
}
.area-page-treatments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.apt-item {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 1.75rem;
  display: flex; flex-direction: column; gap: .75rem;
  transition: border-color .3s, transform .3s var(--ease-out);
}
.apt-item:hover {
  border-color: rgba(30,168,220,0.3);
  transform: translateY(-3px);
}
.apt-head {
  display: flex; align-items: center; gap: .75rem;
}
.apt-head svg {
  color: var(--blue); flex-shrink: 0;
  background: var(--blue-glow); border: 1px solid rgba(30,168,220,0.2);
  border-radius: 6px; padding: 3px; width: 24px; height: 24px;
}
.apt-head h3 { font-size: 1.05rem; font-family: var(--display); }
.apt-item p { font-size: .88rem; color: var(--white-60); line-height: 1.7; }

/* ── CTA ── */
.nos-cta {
  background: var(--bg); padding: 6rem 0;
  position: relative; overflow: hidden; text-align: center;
}
.nos-cta-bg { position: absolute; inset: 0; pointer-events: none; }
.nos-cta-inner { position: relative; z-index: 1; max-width: 620px; margin-inline: auto; }
.nos-cta-inner h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.nos-cta-inner p { color: var(--white-60); line-height: 1.75; margin-bottom: 2rem; }
.nos-cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Responsive ── */
@media (min-width: 860px) {
  .area-page-hero-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .area-page-treatments { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   TRATAMIENTOS CON FOTO — cards y rehab
   ══════════════════════════════════════════ */

/* Grid de 3 cards (ortodoncia) */
.trat-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (max-width: 900px) { .trat-cards-grid { grid-template-columns: 1fr; } }

.trat-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .25s, transform .25s;
}
.trat-card:hover { border-color: rgba(30,168,220,0.35); transform: translateY(-4px); }
.trat-card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.trat-card__body { padding: 1.4rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.trat-card__name { font-family: var(--display); font-size: 1.05rem; font-weight: 800; }
.trat-card__desc { font-size: .85rem; color: var(--white-60); line-height: 1.65; flex: 1; }
.trat-card__features { display: flex; flex-direction: column; gap: .4rem; margin-top: .25rem; }
.trat-card__feat {
  display: flex; align-items: center; gap: .55rem;
  font-size: .82rem; color: var(--white-80);
}
.trat-card__feat::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); flex-shrink: 0;
}

/* Rehab: imagen + tabla */
.rehab-visual-block { display: flex; flex-direction: column; gap: 3rem; margin-top: 2.5rem; }

.rehab-item {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 2.5rem; align-items: start;
}
.rehab-item--reverse { direction: rtl; }
.rehab-item--reverse > * { direction: ltr; }
@media (max-width: 800px) {
  .rehab-item, .rehab-item--reverse { grid-template-columns: 1fr; direction: ltr; }
}
.rehab-item__img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 20px; border: 1px solid var(--line); display: block;
}
.rehab-item__content { display: flex; flex-direction: column; gap: 1rem; }
.rehab-item__title { font-family: var(--display); font-size: 1.3rem; font-weight: 800; }
.rehab-item__desc { font-size: .88rem; color: var(--white-60); line-height: 1.75; }

/* Tabla comparativa */
.comp-table { width: 100%; border-collapse: collapse; margin-top: .25rem; }
.comp-table th, .comp-table td {
  padding: .65rem .9rem; font-size: .82rem; text-align: left;
  border-bottom: 1px solid var(--line);
}
.comp-table th {
  font-weight: 700; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--blue);
  background: rgba(30,168,220,0.06);
}
.comp-table td { color: var(--white-60); }
.comp-table td:first-child { font-weight: 600; color: #fff; }
.comp-table tr:last-child td { border-bottom: none; }
.comp-table tr:hover td { background: rgba(255,255,255,0.03); }

/* Sección de comparación de materiales al final */
.mat-compare-section { margin-top: 2.5rem; }
.mat-compare-section .section-head { margin-bottom: 1.75rem; }
.mat-compare-inner {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 2.5rem; align-items: start;
}
@media (max-width: 800px) { .mat-compare-inner { grid-template-columns: 1fr; } }
.mat-img-wrap { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.mat-img-wrap img { width: 100%; display: block; }
.mat-labels {
  display: flex; justify-content: space-around;
  background: var(--bg-card); border: 1px solid var(--line);
  border-top: none; border-radius: 0 0 20px 20px; padding: .65rem;
}
.mat-label { font-size: .75rem; color: var(--white-60); text-align: center; font-weight: 600; }
.mat-compare-desc { font-size: .88rem; color: var(--white-60); line-height: 1.75; margin-bottom: 1rem; }