/* ================================================================
   MADMED — Tecnología Section Redesign
   Animated equipment illustrations + spec cards
   ================================================================ */

/* ── Theme Variables ─────────────────────────────────────────── */
.tc-section {
  --tc-bg: #f8fafc;
  --tc-text: #0f172a;
  --tc-muted: #64748b;
  --tc-accent: #0891b2;
  --tc-accent-bright: #0ea5e9;
  --tc-accent-bg: rgba(8, 145, 178, 0.08);
  --tc-accent-glow: rgba(8, 145, 178, 0.25);
  --tc-card-bg: #ffffff;
  --tc-card-border: #e2e8f0;
  --tc-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  --tc-card-hover: 0 12px 36px rgba(8, 145, 178, 0.13);
  --tc-spec-bg: #f1f5f9;
  --tc-spec-bar-bg: #e2e8f0;
  --tc-spec-bar-fill: linear-gradient(90deg, #0ea5e9, #0891b2);
  --tc-val-bg: #ffffff;
  --tc-val-border: #e2e8f0;
  --tc-gradient: linear-gradient(135deg, #0ea5e9, #0891b2, #0d9488);
  --tc-gauge-track: rgba(8, 145, 178, 0.1);

  /* SVG illustration colors */
  --tc-stroke: #0891b2;
  --tc-stroke-alt: #94a3b8;
  --tc-fill-light: rgba(8, 145, 178, 0.06);
  --tc-fill-med: rgba(8, 145, 178, 0.25);
}

[data-theme="dark"] .tc-section,
html.dark .tc-section {
  --tc-bg: #0a0f1a;
  --tc-text: #e2e8f0;
  --tc-muted: #94a3b8;
  --tc-accent: #22d3ee;
  --tc-accent-bright: #67e8f9;
  --tc-accent-bg: rgba(34, 211, 238, 0.08);
  --tc-accent-glow: rgba(34, 211, 238, 0.3);
  --tc-card-bg: #0f1d2e;
  --tc-card-border: #1e3a5f;
  --tc-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  --tc-card-hover: 0 12px 36px rgba(34, 211, 238, 0.1);
  --tc-spec-bg: rgba(30, 58, 95, 0.4);
  --tc-spec-bar-bg: #1e3a5f;
  --tc-spec-bar-fill: linear-gradient(90deg, #22d3ee, #06b6d4);
  --tc-val-bg: #0f1d2e;
  --tc-val-border: #1e3a5f;
  --tc-gradient: linear-gradient(135deg, #22d3ee, #06b6d4, #14b8a6);
  --tc-gauge-track: rgba(34, 211, 238, 0.1);

  /* SVG illustration colors — dark */
  --tc-stroke: #22d3ee;
  --tc-stroke-alt: #64748b;
  --tc-fill-light: rgba(34, 211, 238, 0.08);
  --tc-fill-med: rgba(34, 211, 238, 0.2);
}

/* ── Section Base ────────────────────────────────────────────── */
.tc-section {
  position: relative;
  padding: 3.5rem 0;
  overflow: hidden;
  background: var(--tc-bg);
  transition: background-color 0.3s ease;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

@media (min-width: 768px) {
  .tc-section { padding: 4rem 0; }
}

.tc-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  z-index: 1;
}

@media (min-width: 640px) { .tc-container { padding: 0 1.5rem; } }

/* ── Header ──────────────────────────────────────────────────── */
.tc-header {
  text-align: center;
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(24px);
}

.tc-header.--visible {
  animation: tcFadeUp 0.7s ease forwards;
}

.tc-badge {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  border-radius: 9999px;
  background: var(--tc-accent-bg);
  color: var(--tc-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.875rem;
  border: 1px solid rgba(8, 145, 178, 0.15);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.tc-title {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--tc-text);
  margin: 0 0 0.75rem;
  line-height: 1.15;
  transition: color 0.3s;
}
@media (min-width: 640px)  { .tc-title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .tc-title { font-size: 2.75rem; } }

.tc-title-accent {
  background: var(--tc-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tc-subtitle {
  font-size: 1rem;
  color: var(--tc-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
  transition: color 0.3s;
}

/* ── Equipment Grid ──────────────────────────────────────────── */
.tc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .tc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
}

/* ── Equipment Card ──────────────────────────────────────────── */
.tc-card {
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-card-border);
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem 1.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease,
              background-color 0.3s, border-color 0.3s;
  box-shadow: var(--tc-card-shadow);
  opacity: 0;
  transform: translateY(24px);
}

.tc-card.--visible {
  animation: tcFadeUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.tc-card.--visible:nth-child(2) { animation-delay: 0.12s; }
.tc-card.--visible:nth-child(3) { animation-delay: 0.24s; }

.tc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tc-card-hover);
}

/* Top gradient accent line */
.tc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tc-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.tc-card:hover::before {
  transform: scaleX(1);
}

/* ── Illustration Container ─────────────────────────────────── */
.tc-illust {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 1rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tc-illust { width: 140px; height: 140px; }
}

.tc-illust-glow {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tc-accent-glow) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.tc-card:hover .tc-illust-glow {
  opacity: 1;
}

.tc-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Card Title ──────────────────────────────────────────────── */
.tc-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tc-text);
  margin: 0 0 1rem;
  transition: color 0.3s;
}

/* ── Specs Row ───────────────────────────────────────────────── */
.tc-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.tc-spec {
  background: var(--tc-spec-bg);
  border-radius: 0.625rem;
  padding: 0.625rem 0.375rem;
  text-align: center;
  transition: background-color 0.3s;
  position: relative;
  overflow: hidden;
}

.tc-spec-val {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--tc-accent);
  margin-bottom: 0.2rem;
  transition: color 0.3s;
  white-space: nowrap;
}

.tc-spec-label {
  font-size: 0.6875rem;
  color: var(--tc-muted);
  transition: color 0.3s;
}

/* Spec bar */
.tc-spec-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tc-spec-bar-bg);
  transition: background-color 0.3s;
}

.tc-spec-fill {
  height: 100%;
  width: 0;
  background: var(--tc-spec-bar-fill);
  border-radius: 0 3px 3px 0;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Badge variant for text-only specs */
.tc-spec--badge .tc-spec-val {
  background: var(--tc-accent-bg);
  border-radius: 4px;
  padding: 1px 6px;
  display: inline-block;
}

/* ── Validation Block ────────────────────────────────────────── */
.tc-validation {
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-card-border);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  transition: background-color 0.3s, border-color 0.3s;
  box-shadow: var(--tc-card-shadow);
  opacity: 0;
  transform: translateY(20px);
}

.tc-validation.--visible {
  animation: tcFadeUp 0.6s ease 0.3s forwards;
}

@media (min-width: 768px) {
  .tc-validation {
    flex-direction: row;
    justify-content: space-between;
    padding: 1.25rem 2rem;
  }
}

.tc-val-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem 1.25rem;
  flex: 1;
}

@media (min-width: 1024px) {
  .tc-val-list {
    grid-template-columns: repeat(4, auto);
    gap: 0.5rem 2rem;
  }
}

.tc-val-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--tc-muted);
  transition: color 0.3s;
}

.tc-val-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #10b981;
}

.tc-val-check svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ISO badge */
.tc-iso {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.tc-iso-ring {
  width: 48px;
  height: 48px;
  position: relative;
}

.tc-iso-ring svg {
  width: 100%;
  height: 100%;
}

.tc-iso-track {
  fill: none;
  stroke: var(--tc-gauge-track);
  stroke-width: 3;
}

.tc-iso-arc {
  fill: none;
  stroke: #10b981;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 138.23;
  stroke-dashoffset: 138.23;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1.4s ease 0.5s;
}

.tc-validation.--visible .tc-iso-arc {
  stroke-dashoffset: 0;
}

.tc-iso-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--tc-text);
  line-height: 1.1;
  transition: color 0.3s;
}

.tc-iso-label span {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  color: #10b981;
}

/* ── Animations — Fade Up ───────────────────────────────────── */
@keyframes tcFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Autoclave Animations ───────────────────────────────────── */

/* Gauge hand rotation */
.tc-anim-hand {
  animation: tcHandSpin 3s ease-in-out infinite;
  transform-origin: 0 0;
}

@keyframes tcHandSpin {
  0%, 100% { transform: rotate(-30deg); }
  50%      { transform: rotate(30deg); }
}

/* Steam bubbles rising */
.tc-anim-steam {
  animation: tcSteam 2.5s ease-in-out infinite;
}

.tc-anim-steam-0 { animation-delay: 0s; }
.tc-anim-steam-1 { animation-delay: 0.4s; }
.tc-anim-steam-2 { animation-delay: 0.8s; }

@keyframes tcSteam {
  0%   { transform: translateY(0); opacity: 0.6; }
  50%  { transform: translateY(-18px); opacity: 1; }
  100% { transform: translateY(-36px); opacity: 0; }
}

/* ── Plasma Animations ──────────────────────────────────────── */

/* Pulsing chamber background */
.tc-anim-plasma-bg {
  animation: tcPlasmaBg 3s ease-in-out infinite;
}

@keyframes tcPlasmaBg {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Orbiting dots pulsing */
.tc-anim-pdot {
  animation: tcDotPulse 1.8s ease-in-out infinite;
}

@keyframes tcDotPulse {
  0%, 100% { opacity: 0.4; r: 4; }
  50%      { opacity: 1; r: 6; }
}

/* Center glow pulsing */
.tc-anim-plasma-core {
  animation: tcCenterPulse 2.5s ease-in-out infinite;
}

@keyframes tcCenterPulse {
  0%, 100% { opacity: 0.7; r: 13; }
  50%      { opacity: 1; r: 17; }
}

/* ── ETO Animations ─────────────────────────────────────────── */

/* Gas particles rising */
.tc-anim-gas {
  animation: tcGasRise 3s ease-in-out infinite;
}

@keyframes tcGasRise {
  0%   { transform: translateY(0) scale(1); opacity: 0.3; }
  50%  { transform: translateY(-12px) scale(1.3); opacity: 0.7; }
  100% { transform: translateY(-24px) scale(0.8); opacity: 0; }
}

/* Dashed pipe flow */
.tc-anim-pipe {
  animation: tcDashFlow 1.5s linear infinite;
}

@keyframes tcDashFlow {
  to { stroke-dashoffset: -20; }
}

/* Warning light pulsing */
.tc-anim-warn {
  animation: tcWarnPulse 1.2s ease-in-out infinite;
}

@keyframes tcWarnPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tc-header,
  .tc-card,
  .tc-validation {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .tc-spec-fill {
    transition: none !important;
  }

  .tc-iso-arc {
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }

  .tc-card::before {
    transition: transform 0.15s !important;
  }

  .tc-anim-hand,
  .tc-anim-steam,
  .tc-anim-plasma-bg,
  .tc-anim-pdot,
  .tc-anim-plasma-core,
  .tc-anim-gas,
  .tc-anim-pipe,
  .tc-anim-warn {
    animation: none !important;
  }
}