/* Practice pages on the ERP template (automatizacion.html, data-analytics.html). Header and footer stay in
   styles.css/reference-refinements.css; only the parts these pages add live here. */
.practice-core{position:absolute;left:32%;top:27.8%;width:36%;aspect-ratio:1/1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff40,#8b65ca40 55%,#3c1f7060);border:1px solid #e5d0ff8f;box-shadow:inset 0 1px 6px #fff6,0 20px 50px #16082f50,0 0 60px #aa77ed40;backdrop-filter:blur(8px);animation:erp-hub-float 7s ease-in-out infinite}
.practice-core img{width:62%;height:auto;filter:drop-shadow(0 12px 20px #17072760)}
.practice-node-1{left:3%;top:8.7%}
.practice-node-2{right:3%;top:8.7%}
.practice-node-3{left:3%;bottom:3.7%}
.practice-node-4{right:3%;bottom:3.7%}

.practice-intro .erp-intro-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);align-items:center}
.practice-benefits{padding:40px;border-radius:18px;background:#fff;border:1px solid #e5deed;box-shadow:0 30px 60px -35px rgba(50,20,89,.45)}
.practice-benefits h3{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.02em;color:#321459}
.practice-benefits .erp-intro-points{margin:22px 0 28px;padding:22px 0 0}

@media(prefers-reduced-motion:reduce){.practice-core{animation:none}}
@media(max-width:900px){
  .practice-intro .erp-intro-layout{grid-template-columns:1fr}
  .practice-benefits{padding:32px}
}
@media(max-width:540px){
  .practice-benefits{padding:26px 22px}
  .practice-benefits h3{font-size:21px}
  .practice-benefits .button{width:100%;justify-content:space-between}
}

/* Stack section: the two tools of the practice joined by a "+", then the outcome (Martín's copy, 2026-11-06). */
.practice-stack{padding:20px 0 110px;background:#fff}
.stack-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:22px}
.stack-tool{display:flex;gap:22px;align-items:flex-start;padding:32px 30px;border:1px solid #e4d8fb;border-radius:6px;background:#fff;transition:box-shadow .3s,translate .3s,border-color .3s}
.stack-tool:hover{translate:0 -4px;box-shadow:0 12px 40px #44277812;border-color:#c2a9ed}
.stack-tool:hover .management-icon{color:#fab612;background:#442778;--icon-cutout:#442778}
.stack-tool h3{margin:4px 0 12px;font-size:30px;line-height:1.08;letter-spacing:-.035em;color:#311459}
.stack-tool p:not(.stack-role){margin:0;font-size:16px;line-height:1.55;color:#78668d}
.stack-role{margin:0;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8e6cc7}
.stack-plus{align-self:center;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fab612;color:#321459;font-size:28px;font-weight:700;line-height:1}
.stack-result{margin-top:22px;padding:30px 34px;border-radius:6px;background:linear-gradient(115deg,#372056,#4c2a7b);color:#fff;display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.stack-result .stack-role{color:#fab612;white-space:nowrap}
.stack-result p:not(.stack-role){margin:0;font-size:20px;line-height:1.45;letter-spacing:-.01em}
@media(prefers-reduced-motion:reduce){.stack-tool{transition:none}}
@media(max-width:1200px){.stack-tool{flex-direction:column;gap:18px}}
@media(max-width:900px){
  .practice-stack{padding:10px 0 80px}
  .stack-flow{grid-template-columns:1fr;gap:14px}
  .stack-plus{justify-self:center}
  .stack-tool{flex-direction:row}
  .stack-result{grid-template-columns:1fr;gap:10px}
}
@media(max-width:540px){
  .stack-tool{flex-direction:column;padding:26px 22px}
  .stack-tool h3{font-size:27px}
  .stack-result{padding:26px 22px}
  .stack-result p:not(.stack-role){font-size:18px}
}

/* Stack cards: product logo on top, one short line below (2026-11-11) */
.stack-tool{flex-direction:column;align-items:flex-start;gap:20px}
.stack-logo{margin:0;height:56px;display:flex;align-items:center}
.stack-logo img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.stack-tool p{margin:0;font-size:17px;line-height:1.55;color:#78668d}
@media(max-width:900px){.stack-tool{flex-direction:column}}
/* Optical balance: the SQL mark and the two-line Power Automate wordmark read smaller at the same height */
.stack-logo-sql{height:76px}.stack-logo-power-automate{height:64px}
@media(max-width:540px){.stack-logo{height:46px}.stack-logo-sql{height:62px}.stack-logo-power-automate{height:52px}.stack-tool p{font-size:16px}}
/* Three columns: the two tools and the result on the right; the result drops below the tools on tablets */
.stack-flow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr)}
.stack-result{margin-top:0;grid-template-columns:1fr;align-content:center;gap:14px}
.stack-result p:not(.stack-role){font-size:19px}
@media(max-width:1100px){.stack-flow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.stack-result{grid-column:1/-1}}
@media(max-width:900px){.stack-flow{grid-template-columns:1fr}.stack-result{grid-column:auto;margin-top:8px}}
/* + and = badges overlap both neighbouring boxes by 12px (boxes sit 22px apart), so the boxes get wider side padding */
.stack-flow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);column-gap:0}
.stack-plus{position:relative;z-index:2;margin-inline:-12px;box-shadow:0 0 0 6px #fff}
.stack-tool{padding-inline:44px}
.stack-result{padding-inline:44px}
@media(max-width:1100px){
  .stack-flow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);row-gap:0}
  .stack-equals{grid-column:1/-1;justify-self:center;margin:-12px 0}
}
@media(max-width:900px){
  .stack-flow{grid-template-columns:1fr;row-gap:0}
  .stack-plus{margin:-12px 0}
  .stack-result{margin-top:0}
  .stack-tool,.stack-result{padding-inline:30px}
}
@media(max-width:540px){.stack-tool,.stack-result{padding-inline:24px}}