/*=============================================================
   PROCE-CURSO.CSS — Artemis Academy
   CSS exclusivo para páginas de detalle de PROCEDIMIENTOS.
   Paleta Línea Estética: palo de rosa (#E8A4B0 / #D4758A / #6B3040 / #FBF0F2)
   Tipografía: Playfair Display (títulos) + DM Sans (cuerpo)
=============================================================*/

/* ══ 0. TOKENS ══════════════════════════════════════════════ */
:root {
  --pc-primary:   #E8A4B0;
  --pc-mid:       #D4758A;
  --pc-dark:      #6B3040;
  --pc-light:     #F5D0D8;
  --pc-lighter:   #FBF0F2;
  --pc-hero-bg:   #1C0D12;
  --pc-text:      #6B4050;
  --pc-text-dark: #2E1020;
  --pc-gold:      #C9A96E;
  --pc-radius:    14px;
  --pc-transition: all 0.30s cubic-bezier(0.4,0,0.2,1);
}

/* ══ 1. HERO ════════════════════════════════════════════════ */
.proce-hero {
  background: linear-gradient(135deg, #1C0D12 0%, #2A1018 50%, #1A0D14 100%);
  padding-top: 100px;
  position: relative;
  overflow: hidden;
}
.proce-hero::before {
  content: "";
  position: absolute;
  top: -80px; left: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,164,176,0.10) 0%, transparent 68%);
  pointer-events: none;
}
.proce-hero::after {
  content: "";
  position: absolute;
  bottom: -60px; right: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,117,138,0.08) 0%, transparent 68%);
  pointer-events: none;
}
.proce-hero__inner { padding: 52px 0 60px; position: relative; z-index: 2; }

/* Breadcrumb */
.proce-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.40);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.proce-breadcrumb a { color: rgba(255,255,255,0.40); text-decoration: none; transition: color .2s; }
.proce-breadcrumb a:hover { color: var(--pc-primary); }
.proce-breadcrumb span { color: var(--pc-primary); }
.proce-breadcrumb i { font-size: 10px; }

/* Grid */
.proce-hero__grid {
  display: grid;
  grid-template-columns: 1fr 370px;
  gap: 56px;
  align-items: start;
}

/* Eyebrow */
.proce-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.proce-hero__cat {
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}

/* Badge Línea Estética */
.brand-badge--clinica-hero {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--pc-primary);
  color: var(--pc-dark);
  border-radius: 4px;
}

/* Título */
.proce-hero__title {
  font-family: "Playfair Display", serif;
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 600;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.4px;
  margin: 0 0 20px;
}
.proce-hero__desc {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  line-height: 1.8;
  max-width: 520px;
  margin: 0 0 28px;
}

/* Meta datos */
.proce-hero__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-bottom: 30px;
}
.proce-hero__meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.proce-hero__meta-item > i {
  width: 34px; height: 34px;
  background: rgba(232,164,176,0.10);
  border: 1px solid rgba(232,164,176,0.20);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--pc-primary);
  flex-shrink: 0;
}
.proce-hero__meta-item span { display: flex; flex-direction: column; gap: 1px; }
.proce-hero__meta-item strong { font-family:"DM Sans",sans-serif; font-size:13px; font-weight:600; color:#fff; line-height:1.2; }
.proce-hero__meta-item small  { font-family:"DM Sans",sans-serif; font-size:11px; font-weight:400; color:rgba(255,255,255,.35); }

.proce-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ══ 2. BOTONES CTA ═════════════════════════════════════════ */
.proce-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 4px;
  transition: var(--pc-transition);
  text-decoration: none !important;
  border: 1.5px solid transparent;
  cursor: pointer;
  line-height: 1;
}
.proce-cta-btn--primary {
  background: var(--pc-primary);
  border-color: var(--pc-primary);
  color: var(--pc-dark) !important;
  box-shadow: 0 8px 22px rgba(232,164,176,0.25);
}
.proce-cta-btn--primary:hover {
  background: var(--pc-mid);
  border-color: var(--pc-mid);
  color: #fff !important;
  transform: translateY(-3px);
}
.proce-cta-btn--ghost {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.82) !important;
}
.proce-cta-btn--ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.44);
  color: #fff !important;
}
.proce-cta-btn--lg { padding: 18px 36px; font-size: 15px; }
.proce-cta-btn.w-100 { width: 100%; }

/* ══ 3. TARJETA RESUMEN ══════════════════════════════════════ */
.proce-hero__card-wrap { position: sticky; top: 96px; }
.proce-summary-card {
  background: #fff;
  border-radius: var(--pc-radius);
  padding: 26px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.28);
  border: 1px solid rgba(232,164,176,0.15);
}
.proce-summary-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(232,164,176,0.18);
}
.proce-summary-card__icon {
  width: 46px; height: 46px;
  background: var(--pc-lighter);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--pc-mid);
  flex-shrink: 0;
}
.proce-summary-card__label {
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--pc-text); display: block; margin-bottom: 3px;
}
.proce-summary-card__date { font-family:"DM Sans",sans-serif; font-size:14px; font-weight:600; color:var(--pc-dark); }
.proce-summary-card__list {
  list-style:none; padding:0; margin:0 0 20px;
  display:flex; flex-direction:column; gap:9px;
}
.proce-summary-card__list li {
  font-family:"DM Sans",sans-serif; font-size:13px; font-weight:400;
  color:var(--pc-text); display:flex; align-items:center; gap:8px; line-height:1.4;
}
.proce-summary-card__list li i { color:var(--pc-mid); font-size:12px; flex-shrink:0; }
.proce-summary-card__note {
  font-family:"DM Sans",sans-serif; font-size:11.5px; font-weight:400;
  color:var(--pc-text); text-align:center; margin:12px 0 0;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.proce-summary-card__note i { color:var(--pc-mid); }

/* ══ 4. STRIP STATS ═════════════════════════════════════════ */
.proce-stats-strip {
  background: #fff;
  border-top: 1px solid rgba(232,164,176,0.20);
  border-bottom: 1px solid rgba(232,164,176,0.20);
  padding: 8px 0;
}
.proce-stats-strip__grid { display:grid; grid-template-columns:repeat(4,1fr); }
.proce-stats-strip__item {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:18px 20px; border-right:1px solid rgba(0,0,0,0.07); text-align:center;
}
.proce-stats-strip__item:last-child { border-right:none; }
.proce-stats-strip__num { font-family:"Playfair Display",serif; font-size:36px; font-weight:600; color:var(--pc-mid); line-height:1; display:block; }
.proce-stats-strip__label { font-family:"DM Sans",sans-serif; font-size:11px; font-weight:600; color:var(--pc-text); letter-spacing:1.5px; text-transform:uppercase; display:block; line-height:1.4; }

/* ══ 5. HEADER SECCIÓN ═══════════════════════════════════════ */
.proce-section-header { text-align:center; max-width:680px; margin:0 auto 48px; }
.proce-section-header--left { text-align:left; max-width:none; margin:0 0 28px; }
.proce-section-header__eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:"DM Sans",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--pc-mid); margin-bottom:14px;
}
.proce-section-header__title { font-family:"Playfair Display",serif; font-size:clamp(28px,3.5vw,44px); font-weight:600; color:var(--pc-dark); line-height:1.14; margin-bottom:14px; }
.proce-section-header__desc { font-family:"DM Sans",sans-serif; font-size:16px; font-weight:300; color:var(--pc-text); line-height:1.8; margin:0; }

/* ══ 6. ETAPAS / PASOS DEL PROCEDIMIENTO ════════════════════ */
.proce-pasos { background:var(--pc-lighter); padding:72px 0; }
.proce-pasos__grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.proce-paso {
  background:#fff;
  border-radius:var(--pc-radius);
  overflow:hidden;
  box-shadow:0 4px 20px rgba(107,48,64,0.07);
  transition:var(--pc-transition);
  border:1px solid rgba(232,164,176,0.14);
}
.proce-paso:hover { transform:translateY(-4px); box-shadow:0 14px 38px rgba(212,117,138,0.16); border-color:rgba(232,164,176,0.35); }
.proce-paso__header {
  background:linear-gradient(135deg,#D4758A 0%,#9B4060 100%);
  padding:18px 22px;
  display:flex; align-items:center; gap:14px;
}
.proce-paso__num { font-family:"Playfair Display",serif; font-size:40px; font-weight:600; color:rgba(255,255,255,0.18); line-height:1; flex-shrink:0; min-width:46px; }
.proce-paso__title { font-family:"Playfair Display",serif; font-size:17px; font-weight:500; color:#fff; margin:0 0 3px; line-height:1.2; }
.proce-paso__sub { font-family:"DM Sans",sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.proce-paso__body { padding:18px 22px 20px; }
.proce-paso__body p { font-family:"DM Sans",sans-serif; font-size:14px; font-weight:300; color:var(--pc-text); line-height:1.72; margin:0; }

/* ══ 7. BENEFICIOS ══════════════════════════════════════════ */
.proce-beneficios { background:#fff; padding:80px 0; }
.proce-beneficios__inner { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.proce-beneficios__img-block { position:relative; }
.proce-beneficios__img {
  width:100%; height:460px; object-fit:cover; border-radius:18px;
  display:block; background:var(--pc-lighter);
  box-shadow:0 16px 50px rgba(107,48,64,0.12);
}
.proce-beneficios__img-badge {
  position:absolute; bottom:-18px; left:24px;
  background:var(--pc-dark); color:#fff;
  border-radius:10px; padding:14px 20px;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 10px 30px rgba(107,48,64,0.30);
  font-family:"DM Sans",sans-serif;
}
.proce-beneficios__img-badge i { font-size:22px; color:var(--pc-primary); }
.proce-beneficios__img-badge span { display:flex; flex-direction:column; gap:2px; font-size:12px; color:rgba(255,255,255,.60); line-height:1.3; }
.proce-beneficios__img-badge strong { font-size:15px; font-weight:700; color:#fff; }
.proce-beneficios__lista { display:flex; flex-direction:column; gap:22px; margin-top:8px; }
.proce-beneficio-item { display:flex; align-items:flex-start; gap:16px; }
.proce-beneficio-item__icon {
  width:46px; height:46px; background:var(--pc-lighter); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--pc-mid); flex-shrink:0;
  transition:var(--pc-transition); border:1px solid rgba(232,164,176,0.22);
}
.proce-beneficio-item:hover .proce-beneficio-item__icon { background:var(--pc-mid); color:#fff; border-color:var(--pc-mid); }
.proce-beneficio-item__text h5 { font-family:"DM Sans",sans-serif; font-size:15px; font-weight:700; color:var(--pc-dark); margin-bottom:5px; line-height:1.3; }
.proce-beneficio-item__text p  { font-family:"DM Sans",sans-serif; font-size:14px; font-weight:300; color:var(--pc-text); line-height:1.7; margin:0; }

/* ══ 8. OTROS PROCEDIMIENTOS ════════════════════════════════ */
.proce-otros { background:var(--pc-lighter); padding:60px 0; }
.proce-otros__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.proce-otros__card {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:#fff; border-radius:10px; border:1.5px solid transparent;
  transition:var(--pc-transition); cursor:pointer;
}
.proce-otros__card:not(.proce-otros__card--active):hover { border-color:var(--pc-primary); box-shadow:0 6px 20px rgba(232,164,176,0.16); }
.proce-otros__card--active { border-color:var(--pc-mid); background:linear-gradient(135deg,var(--pc-lighter),var(--pc-light)); }
.proce-otros__card__icon {
  width:32px; height:32px; background:var(--pc-lighter); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--pc-mid); flex-shrink:0;
}
.proce-otros__card--active .proce-otros__card__icon { background:var(--pc-mid); color:#fff; }
.proce-otros__card__name { font-family:"DM Sans",sans-serif; font-size:12px; font-weight:600; color:var(--pc-dark); line-height:1.3; }

/* ══ 9. CTA INSCRIPCIÓN / RESERVA ═══════════════════════════ */
.proce-reserva {
  background:linear-gradient(135deg,#1C0D12 0%,#2A1018 100%);
  padding:80px 0; position:relative; overflow:hidden;
}
.proce-reserva::before {
  content:""; position:absolute; top:-80px; left:-60px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(232,164,176,0.08) 0%,transparent 68%);
  pointer-events:none;
}
.proce-reserva__inner { position:relative; z-index:2; text-align:center; max-width:660px; margin:0 auto; }
.proce-reserva__inner h2 { font-family:"Playfair Display",serif; font-size:clamp(28px,4vw,50px); font-weight:600; color:#fff; line-height:1.12; letter-spacing:-0.3px; margin-bottom:14px; }
.proce-reserva__inner p  { font-family:"DM Sans",sans-serif; font-size:16px; font-weight:300; color:rgba(255,255,255,.50); line-height:1.8; max-width:540px; margin:0 auto 36px; }
.proce-reserva__actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.proce-reserva__garantia { font-family:"DM Sans",sans-serif; font-size:12px; font-weight:500; color:rgba(255,255,255,.32); display:flex; align-items:center; justify-content:center; gap:7px; }
.proce-reserva__garantia i { color:var(--pc-mid); }

/* ══ 10. RESPONSIVO ═════════════════════════════════════════ */
@media (max-width:1100px) { .proce-hero__grid { grid-template-columns:1fr 330px; gap:32px; } }
@media (max-width:991px) {
  .proce-hero__grid { grid-template-columns:1fr; gap:36px; }
  .proce-hero__card-wrap { position:static; max-width:480px; }
  .proce-hero__inner { padding:38px 0 46px; }
  .proce-beneficios__inner { grid-template-columns:1fr; gap:40px; }
  .proce-beneficios { padding:56px 0; }
  .proce-pasos__grid { grid-template-columns:1fr; }
  .proce-otros__grid { grid-template-columns:repeat(2,1fr); }
  .proce-stats-strip__grid { grid-template-columns:1fr 1fr; }
  .proce-stats-strip__item:nth-child(2) { border-right:none; }
  .proce-stats-strip__item:nth-child(3),.proce-stats-strip__item:nth-child(4) { border-top:1px solid rgba(0,0,0,.07); }
}
@media (max-width:767px) {
  .proce-hero { padding-top:74px; }
  .proce-hero__title { font-size:clamp(28px,8vw,44px); }
  .proce-hero__meta { grid-template-columns:1fr; gap:10px; }
  .proce-hero__ctas .proce-cta-btn { width:100%; justify-content:center; }
  .proce-otros__grid { grid-template-columns:1fr 1fr; }
  .proce-reserva__actions .proce-cta-btn { width:100%; justify-content:center; }
}
@media (max-width:480px) { .proce-otros__grid { grid-template-columns:1fr; } }