/* ==========================================================================
   Dinamicolor — estilos de las páginas de producto
   Se carga después de styles.css y reutiliza sus tokens y componentes.
   ========================================================================== */

/* Cada producto tiene su propio matiz; el resto del sitio no cambia */
body[data-accent="web"]{
  --p:#b80066;
  --p-soft:rgba(224,0,122,.07);
  --p-line:rgba(224,0,122,.20);
  --p-wash:radial-gradient(60% 55% at 15% 0%, rgba(224,0,122,.09), transparent 68%),
           radial-gradient(45% 50% at 100% 15%, rgba(104,92,190,.06), transparent 70%);
}
body[data-accent="citas"]{
  --p:#2f7a5e;
  --p-soft:rgba(52,128,99,.08);
  --p-line:rgba(52,128,99,.22);
  --p-wash:radial-gradient(60% 55% at 15% 0%, rgba(52,128,99,.10), transparent 68%),
           radial-gradient(45% 50% at 100% 15%, rgba(48,120,176,.06), transparent 70%);
}
body[data-accent="mkt"]{
  --p:#9a6c2f;
  --p-soft:rgba(190,142,84,.10);
  --p-line:rgba(190,142,84,.26);
  --p-wash:radial-gradient(60% 55% at 15% 0%, rgba(190,142,84,.12), transparent 68%),
           radial-gradient(45% 50% at 100% 15%, rgba(224,0,122,.05), transparent 70%);
}

/* ------------------------------------------------------------------ hero */

.page-hero{
  padding-block:clamp(40px,5vw,72px) clamp(32px,4vw,56px);
  background-image:var(--p-wash);
  border-bottom:1px solid var(--line);
}

.page-hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  align-items:center;
}
@media (max-width:900px){
  .page-hero__inner{grid-template-columns:1fr}
}

.page-hero h1{
  font-size:clamp(1.9rem,4vw,3rem);
  max-width:20ch;
  margin-bottom:16px;
}
.page-hero .lead{max-width:52ch;margin-top:0}

.breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size:.78rem;color:var(--ink-3);margin-bottom:18px;
}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span{opacity:.55}

.badge-line{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--p);margin-bottom:16px;
}
.badge-line::before{
  content:"";width:18px;height:1px;background:var(--p);
}

.hero-actions--tight{margin-top:26px}

/* ------------------------------------------------------------- caja precio */

.price-card{
  background:#fff;border:1px solid var(--p-line);border-radius:18px;
  padding:clamp(20px,3vw,30px);
  box-shadow:0 24px 60px -46px rgba(13,13,13,.5);
}
.price-card__label{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px;
}
.price-card__amount{
  display:flex;align-items:baseline;gap:8px;
  font-size:clamp(2.2rem,4vw,3rem);font-weight:680;letter-spacing:-.04em;line-height:1;
}
.price-card__amount small{font-size:.9rem;font-weight:600;color:var(--ink-3);letter-spacing:0}
.price-card__note{font-size:.86rem;color:var(--ink-3);margin-top:12px;line-height:1.5}
.price-card .btn{margin-top:22px}
.price-card__list{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  display:grid;gap:9px;font-size:.88rem;color:var(--ink-2);
}
.price-card__list li{display:flex;gap:9px;align-items:flex-start}
.price-card__list .ico{color:var(--p);margin-top:3px}

/* --------------------------------------------------------- listas y grid */

.feature-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.feature{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;
}
.feature h3{font-size:.98rem;margin-bottom:6px}
.feature p{font-size:.88rem;color:var(--ink-2);margin:0}
.feature__icon{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--p-soft);border:1px solid var(--p-line);color:var(--p);
  margin-bottom:14px;
}
.feature__icon .ico{width:19px;height:19px}

.chips--wide{gap:8px}
.chips--wide .chip{font-size:.8rem;padding:5px 11px}

/* Lista de sí/no en dos columnas */
.check-list{display:grid;gap:10px}
.check-list li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--ink-2)}
.check-list .ico{color:var(--p);flex:none;margin-top:3px}

/* --------------------------------------------------------------- pasos */

.flow{display:grid;gap:0;border-top:1px solid var(--line)}
.flow__item{
  display:grid;grid-template-columns:52px minmax(0,1fr);
  gap:18px;padding:22px 0;border-bottom:1px solid var(--line);
}
.flow__num{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:.85rem;font-weight:700;
  background:var(--p-soft);border:1px solid var(--p-line);color:var(--p);
}
.flow__item h3{font-size:1rem;margin-bottom:5px}
.flow__item p{font-size:.92rem;color:var(--ink-2);margin:0;max-width:66ch}

/* ------------------------------------------------------------- tabla */

.compare{
  width:100%;border-collapse:collapse;font-size:.92rem;
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.compare th,.compare td{
  padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top;
}
.compare thead th{
  background:var(--surface-2,#fafaf8);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;
}
.compare tbody tr:last-child td{border-bottom:0}
.compare td:first-child{font-weight:600;color:var(--ink);width:30%}
.compare td:last-child{color:var(--ink-3);white-space:nowrap}

/* ---------------------------------------------------------- portafolio */

.portfolio-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.pcard{
  display:block;border-radius:16px;overflow:hidden;background:#fff;
  border:1px solid var(--line);position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.pcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px -34px rgba(13,13,13,.55)}
.pcard img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.pcard:hover img{transform:scale(1.035)}
.pcard__body{
  position:absolute;inset:auto 0 0 0;
  padding:34px 16px 14px;
  background:linear-gradient(180deg,transparent,rgba(8,8,8,.72) 42%,rgba(8,8,8,.88));
  color:#fff;
}
.pcard__name{font-size:.95rem;font-weight:640;letter-spacing:-.01em}
.pcard__cat{font-size:.78rem;color:rgba(255,255,255,.72);margin-top:2px}
.pcard--plain .pcard__body{
  position:static;background:none;color:var(--ink);padding:14px 16px;
  border-top:1px solid var(--line);
}
.pcard--plain .pcard__cat{color:var(--ink-3)}

/* ------------------------------------------------------------ cta final */

.cta-band{
  background:var(--dark,#0d0d0d);color:#fff;
  border-radius:20px;padding:clamp(28px,5vw,52px);
  background-image:radial-gradient(70% 90% at 50% -20%, var(--p-soft), transparent 62%);
}
.cta-band h2{color:#fff;max-width:22ch}
.cta-band p{color:#c2c2bc;margin-top:12px;max-width:54ch}
.cta-band .btn{margin-top:26px}
.cta-band .btn--light{background:#fff;color:var(--ink)}

/* ------------------------------------------------------------ avisos */

.notice{
  border-left:3px solid var(--p);background:var(--p-soft);
  padding:16px 18px;border-radius:0 12px 12px 0;
  font-size:.9rem;color:var(--ink-2);
}
.notice strong{color:var(--ink)}

/* utilidades */
.section--tight{padding-block:clamp(40px,5vw,64px)}
.mt-4{margin-top:32px}
.stack-16{display:grid;gap:16px}