/* ============================================
   SKINBLOOM · Páginas
   ============================================ */

/* ---------- Cabecera interior de página ---------- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(ellipse 50% 60% at 85% 15%, rgba(243,198,204,0.25), transparent 70%),
    linear-gradient(178deg, var(--color-white), var(--color-ivory));
}
.page-hero .label { display: block; margin-bottom: 1.1rem; }
.page-hero p { margin-top: 1.3rem; color: var(--color-text-soft); font-size: clamp(1rem, 1.4vw, 1.15rem); }
.page-hero--clinical {
  background:
    radial-gradient(ellipse 50% 60% at 85% 15%, rgba(220,232,225,0.6), transparent 70%),
    linear-gradient(178deg, var(--color-white-cold), var(--color-ivory));
}

/* ---------- Inicio: franja editorial de tratamientos ---------- */
.home-services-strip { background: var(--color-white-cold); }
.strip-more { text-align: center; margin-top: 3rem; }

/* ---------- Inicio: sección K-Beauty ---------- */
.kbeauty-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.kbeauty-visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  background:
    radial-gradient(ellipse 60% 45% at 70% 25%, rgba(255,253,252,0.85), transparent 70%),
    linear-gradient(155deg, var(--color-mist-green) 0%, var(--color-celadon) 55%, var(--color-nude-pink) 130%);
  position: relative;
  overflow: hidden;
}
.kbeauty-visual::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(143,176,160,0.5);
  border-radius: 3px;
}
.kbeauty-visual span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  color: rgba(41,45,43,0.5);
  padding: 2rem;
  text-align: center;
}
.kbeauty-list { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.kbeauty-list li { display: flex; gap: 0.9rem; align-items: baseline; font-size: 0.98rem; color: var(--color-text-soft); }
.kbeauty-list li::before { content: '·'; color: var(--color-celadon-deep); font-size: 1.6rem; line-height: 1; }

/* ---------- El movimiento ---------- */
.manifesto {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 500;
  line-height: 1.45;
  max-width: 26ch;
}
.manifesto em { color: var(--color-champagne); }
.movement-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.4rem, 3vw, 2.2rem); margin-top: 3rem; }
.movement-item { padding: 1.8rem; background: var(--color-white); border: var(--border-hairline); border-radius: var(--radius-m); }
.movement-item h3 { font-size: 1.2rem; margin-bottom: 0.7rem; }
.movement-item p { font-size: 0.95rem; color: var(--color-text-soft); }

/* ---------- Servicio individual ---------- */
.service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.service-content > section { margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.service-content h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.1rem; }
.service-content ul.areas-list { display: grid; gap: 1rem; }
.service-content ul.areas-list li {
  padding: 1.1rem 1.3rem;
  background: var(--color-white-cold);
  border: 1px solid rgba(41,45,43,0.09);
  border-radius: var(--radius-s);
}
.service-content ul.areas-list li strong { font-family: var(--font-heading); font-weight: 400; display: block; margin-bottom: 0.3rem; }
.service-content ul.areas-list li p { font-size: 0.93rem; color: var(--color-text-soft); }
.service-content ul.simple-list { display: grid; gap: 0.6rem; }
.service-content ul.simple-list li { display: flex; gap: 0.8rem; align-items: baseline; color: var(--color-text-soft); }
.service-content ul.simple-list li::before { content: '—'; color: var(--color-champagne); flex-shrink: 0; }

.service-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.4rem; }
.aside-card {
  background: var(--color-white);
  border: var(--border-hairline);
  border-radius: var(--radius-m);
  padding: 1.7rem;
  box-shadow: var(--shadow-soft);
}
.aside-card h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.aside-card .btn { width: 100%; margin-top: 0.6rem; }
.aside-facts { display: grid; gap: 0.9rem; }
.aside-facts div { display: grid; gap: 0.15rem; padding-bottom: 0.9rem; border-bottom: var(--border-hairline); }
.aside-facts div:last-child { border: none; padding-bottom: 0; }
.aside-facts dt { font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-champagne); }
.aside-facts dd { font-size: 0.95rem; }

.related-strip { background: var(--color-white-cold); }

/* ---------- Producto individual ---------- */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.product-figure {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  background: var(--color-white);
  border: var(--border-hairline);
  border-radius: var(--radius-m);
  padding: 1rem;
}
.product-figure img { width: 100%; max-height: 78vh; object-fit: contain; }
.product-info .product-brand { font-size: 0.82rem; }
.product-info h1 { font-family: var(--font-heading); font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 400; line-height: 1.2; margin-block: 0.4rem 0.6rem; }
.product-info .product-cat { margin-bottom: 1.6rem; }
.product-info-section { margin-bottom: 1.8rem; }
.product-info-section h2 { font-family: var(--font-heading); font-size: 1.1rem; letter-spacing: 0.06em; margin-bottom: 0.6rem; }
.product-info-section p, .product-info-section li { font-size: 0.97rem; color: var(--color-text-soft); }
.product-buy { display: grid; gap: 0.8rem; margin-block: 2rem; }
.availability-note { font-size: 0.88rem; color: var(--color-text-soft); font-style: italic; }

/* Barra fija móvil de compra */
.mobile-buy-bar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 85;
  padding: 0.8rem var(--container-pad);
  padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top: var(--border-hairline);
}

/* ---------- Dra. Paula ---------- */
.doctor-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.doctor-portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 35% 20%, rgba(255,253,252,0.9), transparent 70%),
    linear-gradient(160deg, #F4EBE1, #EADDCE);
  position: relative;
  box-shadow: var(--shadow-soft);
}
.doctor-portrait img { width: 100%; height: 100%; object-fit: cover; }
.doctor-portrait .media-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: rgba(42,38,34,0.45);
  text-align: center;
  padding: 2rem;
}
.doctor-copy h2 { margin-bottom: 1.2rem; }
.doctor-copy .editable-block {
  padding: 1.4rem;
  border: 1px dashed rgba(168,134,92,0.45);
  border-radius: var(--radius-s);
  background: rgba(250,246,241,0.6);
  color: var(--color-text-soft);
  font-size: 0.95rem;
  margin-top: 1.6rem;
}

/* ---------- Contacto ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.contact-channels { display: grid; gap: 1.1rem; margin-top: 2rem; }
.contact-channel {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.3rem 1.4rem;
  background: var(--color-white);
  border: var(--border-hairline);
  border-radius: var(--radius-m);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-editorial), box-shadow var(--dur-fast);
}
.contact-channel:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.contact-channel svg { width: 26px; height: 26px; color: var(--color-champagne); flex-shrink: 0; }
.contact-channel strong { display: block; font-family: var(--font-heading); font-weight: 400; }
.contact-channel span { font-size: 0.88rem; color: var(--color-text-soft); }

/* ---------- Legales ---------- */
.legal-body { padding-block: clamp(2rem, 5vw, 3.5rem) var(--space-section); }
.legal-body h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin: 2.4rem 0 0.9rem; }
.legal-body p, .legal-body li { color: var(--color-text-soft); margin-bottom: 0.9rem; font-size: 0.98rem; }
.legal-body ul { padding-left: 1.2rem; list-style: disc; }

/* ---------- 404 ---------- */
.notfound {
  min-height: 88vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: var(--header-h);
}
.notfound h1 { font-size: clamp(4rem, 12vw, 9rem); color: var(--color-champagne); }
.notfound p { margin: 1rem auto 2.2rem; color: var(--color-text-soft); }

/* ---------- Skin Journal / artículo ---------- */
.article-body { padding-block: clamp(2rem, 5vw, 3.5rem) var(--space-section); }
.article-body .sample-badge { margin-bottom: 1.6rem; }
.article-body h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 2.2rem 0 0.9rem; }
.article-body p { color: var(--color-text-soft); margin-bottom: 1.1rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.2rem; font-size: 0.85rem; color: var(--color-text-soft); }

/* Banner de imagen en página de tratamiento */
.service-banner {
  width: 100%;
  aspect-ratio: 16 / 8;
  max-height: 460px;
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  box-shadow: var(--shadow-soft);
}
.service-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

/* Skin Journal: filtros por categoría */
.journal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}