@import url('assets/tokens.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--pt-black);
  background: var(--pt-bone);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ============ Reveal animations (subtle) ============ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-standard), transform .7s var(--ease-standard); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; border: 1px solid transparent;
  border-radius: 4px; padding: 14px 22px; cursor: pointer;
  line-height: 1; white-space: nowrap; position: relative;
  transition: background .18s var(--ease-standard), color .18s var(--ease-standard),
              transform .18s var(--ease-standard), border-color .18s var(--ease-standard),
              box-shadow .18s var(--ease-standard);
}
.btn svg, .btn i { width: 15px; height: 15px; stroke-width: 1.8; }
.btn.sm { padding: 9px 14px; font-size: 11px; }
.btn.lg { padding: 16px 26px; font-size: 13px; }
.btn.primary { background: var(--pt-copper); color: #fff; }
.btn.primary:hover { background: #b14614; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(200,82,23,.25); }
.btn.primary:active { transform: translateY(0); }
.btn.primary .arrow { transition: transform .22s var(--ease-standard); }
.btn.primary:hover .arrow { transform: translateX(3px); }

.btn.onblack { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn.onblack:hover { background: rgba(255,255,255,.08); border-color: #fff; }

.btn.ghost { background: transparent; color: var(--pt-black); border-color: var(--pt-stone-200); }
.btn.ghost:hover { background: var(--pt-stone-50); border-color: var(--pt-black); }

.btn.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: var(--pt-copper); border: none; padding: 0; background: none; cursor: pointer;
}
.btn.link-arrow svg { transition: transform .22s var(--ease-standard); }
.btn.link-arrow:hover svg { transform: translateX(4px); }

/* ============ Utilities ============ */
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pt-copper); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--pt-copper); display: inline-block; }
.eyebrow.on-dark { color: var(--pt-copper-light); }
.eyebrow.on-dark::before { background: var(--pt-copper-light); }
.rule { width: 48px; height: 2px; background: var(--pt-copper); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 960px; margin: 0 auto; padding: 0 32px; }

/* ============ Header ============ */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  transition: background .25s var(--ease-standard), border-color .25s, box-shadow .25s, padding .25s;
  border-bottom: 1px solid transparent;
  padding: 8px 0;
}
.hdr.scrolled { background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom-color: var(--pt-stone-100); box-shadow: 0 1px 0 rgba(0,0,0,.02); padding: 4px 0; }
.hdr.scrolled .hdr-link, .hdr.scrolled .hdr-brand { color: var(--pt-black); }
.hdr.light .hdr-link { color: #fff; }

.hdr-inner { max-width: 1280px; margin: 0 auto; padding: 18px 32px; display: flex; align-items: center; gap: 32px; }
.hdr.scrolled .hdr-inner { padding: 10px 32px; }
.hdr-brand { display: flex; align-items: center; }
.hdr-logo { display: block; height: 80px; width: auto; object-fit: contain; filter: brightness(0) invert(1); transition: filter .25s var(--ease-standard); }
.hdr.scrolled .hdr-logo { filter: brightness(0); height: 72px; }

.hdr-nav { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.hdr-link {
  font-size: 13px; font-weight: 500; color: #fff;
  letter-spacing: .02em; padding: 8px 0; position: relative; cursor: pointer;
  transition: color .18s;
}
.hdr-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--pt-copper); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease-standard); }
.hdr-link:hover::after, .hdr-link.active::after { transform: scaleX(1); }
.hdr-link:hover { color: var(--pt-copper); }

.hdr-link.featured {
  padding: 8px 16px; border-radius: 999px;
  background: linear-gradient(135deg, var(--pt-copper), #e8681f);
  color: #fff !important; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 14px rgba(200,82,23,.35);
  transition: transform .2s var(--ease-standard), box-shadow .25s, filter .2s;
}
.hdr-link.featured::after { display: none; }
.hdr-link.featured:hover {
  transform: translateY(-1px); filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(200,82,23,.5);
}
.hdr-link.featured .hdr-link-icon { width: 14px; height: 14px; animation: hdr-featured-pulse 2.2s ease-in-out infinite; }
.hdr-link.featured .hdr-link-icon svg { width: 14px; height: 14px; }
.hdr.scrolled .hdr-link.featured { color: #fff !important; }
@keyframes hdr-featured-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18); opacity: .85; }
}

.hdr-actions { display: flex; gap: 10px; }
.hdr:not(.scrolled) .btn.ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.hdr:not(.scrolled) .btn.ghost svg { color: #fff; stroke: #fff; }
.hdr:not(.scrolled) .btn.ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* Burger / mobile menu */
.hdr-burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px; padding: 0; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column;
  gap: 5px; margin-left: auto;
  transition: border-color .2s, background .2s;
}
.hdr.scrolled .hdr-burger { border-color: rgba(23,20,17,.25); }
.hdr-burger span {
  display: block; width: 20px; height: 2px;
  background: #fff; transition: transform .3s var(--ease-standard), opacity .2s;
}
.hdr.scrolled .hdr-burger span { background: var(--pt-black); }
.hdr.mobile-open .hdr-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr.mobile-open .hdr-burger span:nth-child(2) { opacity: 0; }
.hdr.mobile-open .hdr-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hdr-mobile {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto;
  width: min(86vw, 380px);
  min-height: 100vh; min-height: 100dvh;
  background: var(--pt-black);
  z-index: 90;
  padding: 96px 28px 32px;
  display: flex; flex-direction: column; gap: 28px;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  overflow-y: auto;
  border-left: 1px solid rgba(255,255,255,.08);
  visibility: hidden;
}
@media (max-width: 600px) {
  .hdr-mobile { width: 100vw; border-left: none; }
}
.hdr-mobile.is-open { transform: translateX(0); visibility: visible; }
.hdr-mobile-backdrop {
  position: fixed; inset: 0; z-index: 49;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: hdr-mobile-fade .25s ease;
}
@keyframes hdr-mobile-fade { from { opacity: 0; } to { opacity: 1; } }

.hdr-mobile-nav { display: flex; flex-direction: column; gap: 2px; }
.hdr-mobile-link {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 14px; border-radius: 6px;
  color: rgba(255,255,255,.85); cursor: pointer;
  font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 500;
  transition: background .2s, color .2s, transform .2s;
  border: 1px solid transparent;
}
.hdr-mobile-link:hover, .hdr-mobile-link:active {
  background: rgba(255,255,255,.06);
  color: #fff; transform: translateX(2px);
}
.hdr-mobile-link.active { background: rgba(230,126,63,.12); color: var(--pt-copper-light); border-color: rgba(230,126,63,.3); }
.hdr-mobile-link.featured {
  background: var(--pt-copper); color: #fff;
}
.hdr-mobile-link.featured:hover { background: #b14614; }
.hdr-mobile-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.hdr-mobile-arrow { margin-left: auto; opacity: .5; }
.hdr-mobile-link:hover .hdr-mobile-arrow { opacity: 1; }
.hdr-mobile-actions {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1);
}
.hdr-mobile-actions .btn { justify-content: center; width: 100%; }
.hdr-mobile-actions .btn.ghost {
  color: #fff; border-color: rgba(255,255,255,.3);
}

@media (max-width: 960px) {
  .hdr-nav, .hdr-actions { display: none; }
  .hdr-burger { display: inline-flex; }
  .hdr-inner { padding: 14px 22px; gap: 12px; }
  .hdr-logo { height: 56px; }
  .hdr.scrolled .hdr-logo { height: 48px; }
}
@media (min-width: 961px) {
  .hdr-mobile, .hdr-mobile-backdrop { display: none; }
}

/* ============ Hero with video ============ */
.hero {
  position: relative;
  min-height: 100vh;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; filter: saturate(.9) contrast(1.05) brightness(.85);
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(135deg, rgba(23,20,17,.7) 0%, rgba(23,20,17,.35) 45%, rgba(23,20,17,.75) 100%),
    linear-gradient(180deg, rgba(23,20,17,.15) 0%, rgba(23,20,17,.8) 100%);
}
.hero-hatch {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 10px);
}
.hero-copper-edge {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 8% 95%, rgba(200,82,23,.22), transparent 45%);
}
.hero-inner {
  position: relative; z-index: 3;
  max-width: 1280px; margin: 0 auto; padding: 160px 32px 80px;
  width: 100%;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: end;
}
.hero-eyebrow { margin-bottom: 24px; }
/* Slide-from-right cuando cambia el texto del hero rotativo. El elemento
   que sale desaparece (re-mount via React key) y el que entra se desliza
   suavemente desde la derecha hacia su posición final. */
.hero-text-fade {
  animation: hero-text-slide .85s cubic-bezier(.22,.61,.36,1) both;
}
.hero-eyebrow.hero-text-fade { animation-duration: .7s; }
.hero-title.hero-text-fade   { animation-delay: .06s; }
.hero-lead.hero-text-fade    { animation-delay: .14s; animation-duration: .9s; }
@keyframes hero-text-slide {
  from { opacity: 0; transform: translate3d(60px, 0, 0); filter: blur(2px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0);   filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-text-fade { animation: none; }
}
.hero-title {
  margin: 0 0 28px;
  font-weight: 500; font-size: clamp(44px, 6.4vw, 84px);
  letter-spacing: -.015em; line-height: .98;
  text-transform: uppercase;
}
.hero-title .accent {
  background: linear-gradient(135deg, #E67E3F 0%, #f0a06b 35%, #33b399 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lead {
  font-size: 18px; font-weight: 300; line-height: 1.55;
  max-width: 540px; color: rgba(255,255,255,.85); margin: 0 0 36px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-meta { border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.hero-meta-row { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.hero-meta-row:last-child { border-bottom: none; }
.hero-meta-k { font-size: 40px; font-weight: 500; letter-spacing: -.02em; color: #fff; line-height: 1; }
.hero-meta-k .unit { color: var(--pt-copper-light); font-size: 22px; margin-left: 2px; }
.hero-meta-v { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.75); }

.hero-scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.65);
}
.hero-scroll-line { width: 1px; height: 44px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.7)); animation: scrollPulse 2.2s var(--ease-standard) infinite; }
@keyframes scrollPulse {
  0% { transform: scaleY(.3); transform-origin: top; opacity: .4; }
  50% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(.3); transform-origin: bottom; opacity: .4; }
}

.hero-sound {
  position: absolute; bottom: 32px; right: 32px; z-index: 3;
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
  background: rgba(23,20,17,.4); backdrop-filter: blur(8px); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
  overflow: visible;
}
.hero-sound:hover { background: rgba(200,82,23,.6); border-color: var(--pt-copper); transform: scale(1.05); }
.hero-sound:active { transform: scale(.92); }
.hero-sound svg { width: 18px; height: 18px; }
.hero-sound-icon { display: flex; align-items: center; justify-content: center; animation: hero-sound-pop .35s cubic-bezier(.2,.8,.2,1); }
@keyframes hero-sound-pop {
  0%   { transform: scale(.4) rotate(-25deg); opacity: 0; }
  55%  { transform: scale(1.2) rotate(8deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0);       opacity: 1; }
}
.hero-sound.is-playing { border-color: var(--pt-copper); background: rgba(200,82,23,.55); }
.hero-sound.is-playing::before,
.hero-sound.is-playing::after {
  content: ''; position: absolute; inset: -2px; border-radius: 999px;
  border: 2px solid var(--pt-copper); opacity: 0; pointer-events: none;
  animation: hero-sound-ripple 1.8s ease-out infinite;
}
.hero-sound.is-playing::after { animation-delay: .9s; }
@keyframes hero-sound-ripple {
  0%   { transform: scale(1);   opacity: .65; }
  100% { transform: scale(1.7); opacity: 0;   }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; padding: 120px 24px 80px; gap: 40px; }
  .hero-scroll { display: none; }
}

/* ============ Section base ============ */
.section { padding: 120px 0; position: relative; }
.section.dark { background: var(--pt-black); color: #fff; }
.section.stone { background: var(--pt-stone-50); }
.section.white { background: #fff; }
.section-hdr { max-width: 760px; margin-bottom: 64px; }
.section-hdr.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-hdr.center .eyebrow { justify-content: center; }
.section-title {
  margin: 18px 0 20px;
  font-weight: 500; font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -.005em; line-height: 1.02; text-transform: uppercase;
}
.section-lead { font-weight: 300; font-size: 18px; line-height: 1.6; color: var(--pt-stone-500); margin: 0; max-width: 640px; }
.section.dark .section-lead { color: rgba(255,255,255,.75); }

/* ============ Three lines (core business) ============ */
.lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--pt-stone-200); border-left: 1px solid var(--pt-stone-200); }
.line-card {
  padding: 40px 36px 44px;
  border-right: 1px solid var(--pt-stone-200);
  border-bottom: 1px solid var(--pt-stone-200);
  background: #fff;
  display: flex; flex-direction: column; gap: 20px; min-height: 440px;
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease-standard), background .4s;
  cursor: pointer;
}
.line-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--pt-copper);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-standard);
}
.line-card:hover::before { transform: scaleX(1); }
.line-card:hover { background: var(--pt-bone); }
.line-num { font-size: 12px; letter-spacing: .2em; color: var(--pt-stone-400); font-weight: 500; }
.line-title { font-weight: 500; font-size: 28px; letter-spacing: -.005em; line-height: 1.1; text-transform: uppercase; margin: 0; }
.line-body { font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--pt-stone-500); margin: 0; flex: 1; }
.line-meta { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--pt-stone-100); }
.line-meta-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pt-stone-500); }
.line-meta-item svg { width: 14px; height: 14px; color: var(--pt-copper); stroke-width: 2; flex-shrink: 0; }
.line-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--pt-copper); margin-top: 4px; }
.line-cta svg { transition: transform .22s var(--ease-standard); }
.line-card:hover .line-cta svg { transform: translateX(4px); }

.line-card.highlight { background: var(--pt-teal); color: #fff; }
.line-card.highlight::before { background: #fff; }
.line-card.highlight:hover { background: var(--pt-teal-deep); }
.line-card.highlight .line-num { color: rgba(255,255,255,.7); }
.line-card.highlight .line-body { color: rgba(255,255,255,.92); }
.line-card.highlight .line-meta { border-top-color: rgba(255,255,255,.25); }
.line-card.highlight .line-meta-item { color: rgba(255,255,255,.95); }
.line-card.highlight .line-meta-item svg { color: #fff; }
.line-card.highlight .line-flag { color: #fff; border-color: rgba(255,255,255,.55); }
.line-card.highlight .line-cta { color: #fff; }
.line-card.highlight .line-cta svg { color: #fff; }
.line-flag { position: absolute; top: 24px; right: 24px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--pt-copper-light); padding: 4px 10px; border: 1px solid var(--pt-copper); border-radius: 2px; }

@media (max-width: 900px) {
  .lines { grid-template-columns: 1fr; }
}

/* ============ Stats band ============ */
.stats { background: var(--pt-black); color: #fff; position: relative; overflow: hidden; }
.stats::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 12px); }
.stats-inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 64px 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat { padding: 0 32px; border-right: 1px solid rgba(255,255,255,.12); }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: none; }
.stat-num { font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -.02em; }
.stat-num .u { color: var(--pt-copper-light); font-size: 28px; margin-left: 2px; vertical-align: top; }
.stat-lbl { margin-top: 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.7); line-height: 1.5; max-width: 200px; }
@media (max-width: 900px) { .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 32px 0; } .stat { padding: 0 20px; } .stat:nth-child(2n) { border-right: none; } }

/* ============ Services grid ============ */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }

.svc-card {
  background: #fff; border: 1px solid var(--pt-stone-100);
  padding: 28px 26px 24px; min-height: 260px;
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .3s var(--ease-standard), box-shadow .3s var(--ease-standard), border-color .3s;
}
.svc-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--pt-copper); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-standard);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(23,20,17,.08); border-color: var(--pt-stone-200); }
.svc-card:hover::after { transform: scaleX(1); }
.svc-ico { width: 36px; height: 36px; color: var(--pt-copper); }
.svc-ico svg { width: 100%; height: 100%; stroke-width: 1.4; }
.svc-name { font-weight: 500; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; margin: 4px 0 0; }
.svc-desc { font-size: 13.5px; font-weight: 300; line-height: 1.55; color: var(--pt-stone-500); margin: 0; flex: 1; }
.svc-more { margin-top: 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--pt-stone-400); display: flex; justify-content: space-between; align-items: center; }
.svc-more svg { width: 14px; height: 14px; transition: transform .22s; }
.svc-card:hover .svc-more { color: var(--pt-copper); }
.svc-card:hover .svc-more svg { transform: translateX(4px); }

/* ============ Arriendo feature ============ */
.rent-feat { background: var(--pt-black); color: #fff; position: relative; overflow: hidden; }
.rent-feat::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(200,82,23,.08) 0 1px, transparent 1px 14px); }
.rent-feat::after {
  content: ""; position: absolute; top: -120px; right: -120px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(200,82,23,.28) 0%, transparent 70%); pointer-events: none;
}
.rent-inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 120px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
@media (max-width: 900px) { .rent-inner { grid-template-columns: 1fr; gap: 48px; padding: 80px 24px; } }

.rent-visual {
  position: relative; aspect-ratio: 4/5;
  background:
    linear-gradient(135deg, rgba(200,82,23,.4) 0%, transparent 50%),
    linear-gradient(to bottom, #2b2927 0%, #0c0a09 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.rent-visual::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(230,126,63,.15) 0 1px, transparent 1px 8px); }
.rent-visual-frame { position: absolute; inset: 24px; border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; overflow: hidden; }
.rent-visual-ico { width: 84px; height: 84px; color: rgba(230,126,63,.7); }
.rent-visual-ico svg { width: 100%; height: 100%; stroke-width: .8; }
.rent-visual-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18px; filter: drop-shadow(0 12px 28px rgba(0,0,0,.45)); }
.rent-visual-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 500; }
.rent-chip {
  position: absolute; top: 24px; left: 24px;
  background: var(--pt-copper); color: #fff; padding: 8px 14px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.rent-chip::before { content: ""; width: 6px; height: 6px; background: #fff; border-radius: 999px; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

.rent-cert { position: absolute; right: -20px; bottom: 40px; background: #fff; color: var(--pt-black); padding: 18px 22px; max-width: 240px; box-shadow: 0 24px 48px rgba(0,0,0,.4); }
.rent-cert-t { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--pt-stone-400); font-weight: 600; margin-bottom: 8px; }
.rent-cert-v { font-size: 15px; font-weight: 500; line-height: 1.35; }
.rent-cert-rule { width: 24px; height: 2px; background: var(--pt-copper); margin-bottom: 10px; }

.rent-list { display: flex; flex-direction: column; gap: 16px; margin: 32px 0 36px; }
.rent-list-item { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; color: rgba(255,255,255,.82); line-height: 1.55; font-weight: 300; }
.rent-list-item svg { width: 18px; height: 18px; color: var(--pt-copper-light); flex-shrink: 0; margin-top: 3px; stroke-width: 2; }

/* ============ Methodology timeline ============ */
.method {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0; margin-top: 28px; border-top: 1px solid var(--pt-stone-200);
}
.method-step {
  padding: 32px 24px; border-right: 1px solid var(--pt-stone-200);
  position: relative; transition: background .25s, transform .25s;
}
.method-step:last-child { border-right: none; }
.method-step:hover { background: var(--pt-bone); }
.method-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--pt-copper); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.method-step:hover::before { transform: scaleX(1); }
.method-n { font-size: 11px; letter-spacing: .18em; color: var(--pt-copper); font-weight: 600; text-transform: uppercase; }
.method-t { font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; margin: 14px 0 10px; line-height: 1.25; }
.method-d { font-size: 13px; font-weight: 400; color: var(--pt-stone-500); line-height: 1.55; }

@media (max-width: 1180px) {
  .method { grid-template-columns: repeat(3, 1fr); }
  .method-step:nth-child(3n) { border-right: none; }
  .method-step:nth-child(n+4) { border-top: 1px solid var(--pt-stone-200); }
}
@media (max-width: 720px) {
  .method { grid-template-columns: repeat(2, 1fr); }
  .method-step:nth-child(3n) { border-right: 1px solid var(--pt-stone-200); }
  .method-step:nth-child(2n) { border-right: none; }
  .method-step:nth-child(n+3) { border-top: 1px solid var(--pt-stone-200); }
  .method-step { padding: 24px 18px; }
}
@media (max-width: 480px) {
  .method { grid-template-columns: 1fr; }
  .method-step { border-right: none !important; border-top: 1px solid var(--pt-stone-200); }
  .method-step:first-child { border-top: none; }
}

/* ============ Case strip ============ */
.case-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-card {
  position: relative; overflow: hidden;
  min-height: 360px;
  cursor: pointer; background: var(--pt-black);
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate;
}
.case-card-bg {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover; background-position: center;
  filter: saturate(.9) brightness(.85);
  transition: transform .8s var(--ease-standard), filter .4s;
}
.case-card:hover .case-card-bg { transform: scale(1.06); filter: saturate(1) brightness(.95); }
.case-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .4s; }
.case-card:hover .case-card-img { opacity: .85; }
.case-card-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(23,20,17,.1) 0%, rgba(23,20,17,.55) 50%, rgba(23,20,17,.95) 100%);
}
.case-card-hatch {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(200,82,23,.08) 0 1px, transparent 1px 10px);
}
/* Body en flujo normal (column flex-end del .case-card lo empuja al fondo) */
.case-card-body { position: relative; z-index: 3; padding: 24px; color: #fff; }
.case-card-tag { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--pt-copper-light); font-weight: 600; margin-bottom: 10px; }
.case-card-title { font-size: 20px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; line-height: 1.15; margin: 0 0 12px; }
.case-card-meta { display: flex; gap: 20px; font-size: 12px; color: rgba(255,255,255,.7); font-weight: 300; }
.case-card-meta b { color: #fff; font-weight: 500; }
.case-card-arrow { position: absolute; top: 20px; right: 20px; z-index: 3; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; color: #fff; transition: background .22s, transform .22s; }
.case-card:hover .case-card-arrow { background: var(--pt-copper); border-color: var(--pt-copper); transform: rotate(-45deg); }
.case-card-arrow svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .case-strip { grid-template-columns: 1fr; } }

/* ============ HSE trust block ============ */
.trust { background: var(--pt-bone); }
.trust-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr; gap: 40px; } }
.trust-cert { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.trust-cert-item { padding: 24px; border: 1px solid var(--pt-stone-200); background: #fff; transition: border-color .2s, transform .2s; }
.trust-cert-item:hover { border-color: var(--pt-copper); transform: translateY(-2px); }
.trust-cert-name { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--pt-black); margin-bottom: 6px; }
.trust-cert-d { font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--pt-stone-500); }
.trust-cert-seal { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(135deg, var(--pt-copper), var(--pt-copper-light)); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px; }
.trust-cert-seal svg { width: 20px; height: 20px; stroke-width: 1.8; }

/* ============ Contact / Quote ============ */
.contact { background: var(--pt-black); color: #fff; position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(200,82,23,.07) 0 1px, transparent 1px 12px); }
.contact-inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 120px 32px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
@media (max-width: 900px) { .contact-inner { grid-template-columns: 1fr; gap: 48px; padding: 80px 24px; } }

.contact-tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: 28px; }
.contact-tab { background: none; border: none; color: rgba(255,255,255,.55); font-family: inherit; padding: 14px 20px 14px 0; margin-right: 20px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; cursor: pointer; position: relative; transition: color .18s; }
.contact-tab::after { content: ""; position: absolute; left: 0; right: 20px; bottom: -1px; height: 2px; background: var(--pt-copper); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.contact-tab.active { color: #fff; }
.contact-tab.active::after { transform: scaleX(1); }
.contact-tab:hover { color: #fff; }

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: rgba(255,255,255,.04); padding: 36px; border: 1px solid rgba(255,255,255,.1); }
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld.full { grid-column: 1 / -1; }
.fld label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.7); }
.fld input, .fld select, .fld textarea {
  font-family: inherit; font-weight: 400; font-size: 14px; color: #fff;
  padding: 13px 14px; border-radius: 2px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.fld select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.fld textarea { resize: vertical; min-height: 110px; }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(255,255,255,.4); }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--pt-copper); background: rgba(255,255,255,.08); box-shadow: 0 0 0 3px rgba(200,82,23,.22); }

.contact-info { display: flex; flex-direction: column; gap: 0; margin: 32px 0; border-top: 1px solid rgba(255,255,255,.15); }
.contact-info-row { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.contact-info-row svg { width: 20px; height: 20px; color: var(--pt-copper-light); flex-shrink: 0; stroke-width: 1.6; }
.contact-info-lbl { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 500; }
.contact-info-val { font-size: 15px; font-weight: 500; margin-top: 2px; }
.contact-info-col { display: flex; flex-direction: column; }

.sent-msg { text-align: center; padding: 60px 20px; grid-column: 1 / -1; }
.sent-ico { width: 72px; height: 72px; border-radius: 999px; background: rgba(0,160,128,.18); color: var(--pt-teal); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.sent-ico svg { width: 36px; height: 36px; stroke-width: 1.5; }
.sent-t { font-size: 20px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.sent-d { font-size: 14px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 420px; margin: 0 auto; }

/* ============ Footer ============ */
.ftr { background: #0c0a09; color: rgba(255,255,255,.75); padding: 80px 0 0; }
.ftr-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
@media (max-width: 900px) { .ftr-inner { grid-template-columns: 1fr 1fr; } }
.ftr-brand img { height: 40px; margin-bottom: 18px; }
.ftr-tag { font-size: 14px; line-height: 1.6; font-weight: 300; max-width: 320px; margin: 0 0 20px; color: rgba(255,255,255,.7); }
.ftr-col { display: flex; flex-direction: column; gap: 12px; }
.ftr-h { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: #fff; margin-bottom: 4px; }
.ftr-col a { font-size: 14px; font-weight: 300; color: rgba(255,255,255,.65); cursor: pointer; transition: color .18s; }
.ftr-col a:hover { color: var(--pt-copper-light); }
.ftr-bar { margin-top: 64px; border-top: 1px solid rgba(255,255,255,.1); padding: 22px 32px; max-width: 1280px; margin-left: auto; margin-right: auto; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,.5); }
.ftr-social { display: flex; gap: 10px; }
.ftr-social a { width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.04); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: color .18s, border-color .18s, background .18s, transform .18s; }
.ftr-social a:hover { color: var(--pt-copper-light); border-color: var(--pt-copper); background: rgba(200,82,23,.12); transform: translateY(-2px); }
.ftr-social svg { width: 18px; height: 18px; fill: #fff; color: #fff; transition: fill .18s; }
.ftr-social a:hover svg { fill: var(--pt-copper-light); color: var(--pt-copper-light); }

/* ============ Contact form actions (Email + WhatsApp) ============ */
.contact-actions {
  flex-direction: row !important; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.contact-actions-note {
  font-size: 11px; color: rgba(255,255,255,.55);
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.5;
  flex: 1; min-width: 220px;
}
.contact-actions-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.contact-actions .btn { white-space: nowrap; }
.contact-actions .btn[disabled] { opacity: .65; cursor: progress; }
.contact-actions .btn .is-spinning { animation: catalog-spin 1s linear infinite; }
.contact-err {
  width: 100%;
  background: rgba(200,82,23,.12); border: 1px solid rgba(200,82,23,.5);
  color: #ffb091; padding: 10px 14px; border-radius: 6px;
  font-size: 13px; line-height: 1.4;
}

.btn.ghost-light {
  background: transparent; border: 1px solid rgba(255,255,255,.3);
  color: #fff; padding: 12px 18px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; letter-spacing: .04em; cursor: pointer;
  transition: background .18s, border-color .18s, transform .15s;
  font-family: inherit; font-size: 13px; text-transform: uppercase;
}
.btn.ghost-light:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.btn.ghost-light svg { width: 16px; height: 16px; stroke: #fff !important; color: #fff !important; }

@media (max-width: 760px) {
  /* Section apenas con margen para que el form respire */
  .contact-inner { padding: 64px 16px !important; gap: 36px !important; }

  /* Tabs: grilla 2×2, full-width, sin scroll horizontal */
  .contact-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    border-bottom: none;
    margin-bottom: 18px;
  }
  .contact-tab {
    padding: 12px 14px;
    margin-right: 0;
    font-size: 11px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 4px;
    color: rgba(255,255,255,.6);
    text-align: center;
    white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s;
  }
  .contact-tab::after { display: none; }
  .contact-tab:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
  }
  .contact-tab.active {
    background: rgba(200,82,23,.18);
    color: #fff;
    border-color: var(--pt-copper);
  }

  /* Form: 1 columna, padding ajustado, edge-to-edge dentro de su section */
  .contact-form {
    grid-template-columns: 1fr;
    padding: 24px 18px;
    gap: 14px;
    border-radius: 4px;
  }

  /* Acciones: nota arriba, botón full-width abajo */
  .contact-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .contact-actions-note {
    min-width: 0;
    flex: none;
    text-align: center;
  }
  .contact-actions-btns { width: 100%; flex-direction: column; }
  .contact-actions-btns .btn {
    flex: 1;
    justify-content: center;
    width: 100%;
    padding: 14px 18px;
  }

  /* Sent message más compacto */
  .sent-msg { padding: 40px 16px; }
}
@media (max-width: 480px) {
  .contact-inner { padding: 48px 12px !important; }
  .contact-form { padding: 18px 14px; }
  .fld input, .fld select, .fld textarea { font-size: 16px; /* evita zoom de iOS al focusear */ }
  .contact-tab { font-size: 10.5px; padding: 11px 8px; letter-spacing: .1em; }
  .contact-tabs { gap: 5px; }
}

/* ============ WhatsApp FAB ============ */
.wa-fab {
  position: fixed; bottom: 24px; left: 24px; z-index: 90;
  width: 58px; height: 58px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 28px rgba(37,211,102,.45), 0 2px 6px rgba(0,0,0,.2);
  transition: transform .2s var(--ease-standard), box-shadow .25s;
  cursor: pointer; text-decoration: none;
}
.wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 34px rgba(37,211,102,.55), 0 4px 10px rgba(0,0,0,.25); }
.wa-fab:active { transform: scale(.95); }
.wa-fab svg { width: 30px; height: 30px; }
.wa-fab::before {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid #25D366; opacity: 0; pointer-events: none;
  animation: wa-fab-pulse 2.2s ease-out infinite;
}
@keyframes wa-fab-pulse {
  0%   { transform: scale(1);    opacity: .55; }
  100% { transform: scale(1.55); opacity: 0;   }
}
.wa-fab-tooltip {
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: #111; color: #fff; font-size: 12px; font-weight: 500;
  padding: 8px 12px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.wa-fab:hover .wa-fab-tooltip { opacity: 1; transform: translateY(-50%) translateX(2px); }
@media (max-width: 600px) {
  .wa-fab { bottom: 18px; left: 18px; width: 54px; height: 54px; }
  .wa-fab svg { width: 26px; height: 26px; }
  .wa-fab-tooltip { display: none; }
}

/* ============ Back-to-top FAB ============ */
.back-top-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  width: 52px; height: 52px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(23, 20, 17, 0.92);
  color: var(--pt-teal, #00A878);
  border: 1px solid rgba(0, 168, 120, 0.55);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translateY(8px) scale(0.95);
  transition: opacity 0.25s var(--ease-standard, ease),
              transform 0.25s var(--ease-standard, ease),
              background 0.2s, color 0.2s, border-color 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.back-top-fab.is-visible {
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
}
.back-top-fab:hover {
  background: var(--pt-teal, #00A878);
  color: #fff;
  border-color: var(--pt-teal, #00A878);
  transform: translateY(-3px) scale(1.05);
}
.back-top-fab:active { transform: scale(0.95); }
.back-top-fab svg { width: 22px; height: 22px; }
@media (max-width: 600px) {
  .back-top-fab { bottom: 18px; right: 18px; width: 46px; height: 46px; }
  .back-top-fab svg { width: 20px; height: 20px; }
}

/* ============ Subpage hero ============ */
.phero {
  background: linear-gradient(135deg, #171411 0%, #2b2927 60%, #3a2f20 100%);
  color: #fff; padding: 180px 0 80px; position: relative; overflow: hidden;
}
.phero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(200,82,23,.08) 0 1px, transparent 1px 12px); }
.phero::after { content: ""; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(200,82,23,.25), transparent 65%); }
.phero-inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.phero-bc { display: flex; gap: 10px; align-items: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 20px; }
.phero-bc a { cursor: pointer; transition: color .18s; }
.phero-bc a:hover { color: var(--pt-copper-light); }
.phero-bc span { color: rgba(255,255,255,.3); }
.phero-t { font-weight: 500; font-size: clamp(36px, 5vw, 64px); letter-spacing: -.01em; line-height: 1.02; text-transform: uppercase; margin: 16px 0 18px; max-width: 900px; }
.phero-s { font-size: 18px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 640px; margin: 0; }

/* ============ Service detail ============ */
.sdetail { display: grid; grid-template-columns: 2fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .sdetail { grid-template-columns: 1fr; } }
.sdetail-main h3 { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--pt-copper); font-weight: 600; margin: 0 0 12px; }
.sdetail-main h2 { font-size: 28px; font-weight: 500; letter-spacing: -.005em; line-height: 1.1; text-transform: uppercase; margin: 0 0 20px; }
.sdetail-main p { font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--pt-stone-500); margin: 0 0 20px; }
.sdetail-block { padding: 40px 0; border-bottom: 1px solid var(--pt-stone-100); }
.sdetail-block:first-child { padding-top: 0; }
.sdetail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 16px 0 0; padding: 0; list-style: none; }
.sdetail-list li { position: relative; padding-left: 22px; font-size: 14.5px; font-weight: 300; color: var(--pt-black); line-height: 1.55; }
.sdetail-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 1px; background: var(--pt-copper); }
.sdetail-aside { position: sticky; top: 120px; }
.sdetail-aside-card { background: var(--pt-black); color: #fff; padding: 32px; border-left: 3px solid var(--pt-copper); }
.sdetail-aside-card h4 { font-size: 18px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; margin: 0 0 10px; line-height: 1.2; }
.sdetail-aside-card p { font-size: 14px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.75); margin: 0 0 22px; }
.sdetail-aside-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.sdetail-aside-list li { font-size: 13px; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 10px; }
.sdetail-aside-list svg { width: 14px; height: 14px; color: var(--pt-copper-light); stroke-width: 2; }

/* ============ FAQ ============ */
.faq { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--pt-stone-200); }
.faq-item { border-bottom: 1px solid var(--pt-stone-200); }
.faq-q { width: 100%; background: none; border: none; padding: 24px 0; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; font-family: inherit; font-size: 17px; font-weight: 500; letter-spacing: .01em; color: var(--pt-black); transition: color .18s; }
.faq-q:hover { color: var(--pt-copper); }
.faq-q svg { width: 20px; height: 20px; color: var(--pt-copper); transition: transform .3s var(--ease-standard); flex-shrink: 0; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-standard); }
.faq-item.open .faq-a { max-height: 300px; }
.faq-a-inner { padding: 0 0 24px; font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--pt-stone-500); max-width: 780px; }

/* ============ Equipment spec ============ */
.equip-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; margin-bottom: 64px; }
@media (max-width: 900px) { .equip-hero { grid-template-columns: 1fr; } }
.equip-visual { position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg, #2b2927 0%, #0c0a09 100%); border: 1px solid var(--pt-stone-100); overflow: hidden; }
.equip-visual::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(230,126,63,.12) 0 1px, transparent 1px 8px); }
.equip-visual-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255,255,255,.55); gap: 14px; }
.equip-visual-label svg { width: 90px; height: 90px; stroke-width: .8; color: rgba(230,126,63,.6); }
.equip-visual-label span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.equip-visual-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Trigger del lightbox sobre la imagen del equipo */
.equip-visual-zoom-trigger {
  position: absolute; inset: 0; padding: 0; margin: 0;
  background: transparent; border: 0; cursor: zoom-in;
  display: block; width: 100%; height: 100%;
}
.equip-visual-zoom-trigger .equip-visual-img { transition: transform .35s var(--ease-standard, ease); }
.equip-visual-zoom-trigger:hover .equip-visual-img { transform: scale(1.04); }
.equip-visual-zoom-hint {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(23,20,17,.7); color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.equip-visual-zoom-hint svg { width: 18px; height: 18px; stroke: #fff; }
.equip-visual-zoom-trigger:hover .equip-visual-zoom-hint,
.equip-visual-zoom-trigger:focus-visible .equip-visual-zoom-hint {
  opacity: 1; transform: translateY(0);
}

/* Lightbox de imagen ampliada */
.zoom-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,8,6,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
  animation: zoom-fade-in .2s var(--ease-standard, ease);
}
@keyframes zoom-fade-in { from { opacity: 0; } to { opacity: 1; } }
.zoom-img {
  max-width: 95vw; max-height: 90vh;
  object-fit: contain; user-select: none;
  cursor: zoom-in; touch-action: pinch-zoom;
  transition: transform .35s var(--ease-standard, ease);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.zoom-img.is-zoomed {
  transform: scale(2);
  cursor: zoom-out;
  transition: transform .35s var(--ease-standard, ease);
}
.zoom-close {
  position: fixed; top: 18px; right: 22px; z-index: 210;
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.32);
  font-size: 26px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; padding: 0;
  transition: background .2s, transform .15s;
}
.zoom-close:hover { background: rgba(255,255,255,.22); transform: scale(1.05); }
@media (max-width: 600px) {
  .zoom-img.is-zoomed { transform: scale(1.6); }
}

.equip-chip { position: absolute; top: 20px; left: 20px; background: var(--pt-copper); color: #fff; padding: 8px 14px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.equip-specs { border-top: 2px solid var(--pt-black); }
.spec-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--pt-stone-100); }
.spec-k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--pt-stone-400); }
.spec-v { font-weight: 500; font-size: 15px; color: var(--pt-black); }

/* ============ Catalog grid ============ */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr; } }
.cat-card { background: #fff; border: 1px solid var(--pt-stone-100); overflow: hidden; cursor: pointer; transition: transform .3s, box-shadow .3s, border-color .3s; }
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.08); border-color: var(--pt-stone-200); }
.cat-img { aspect-ratio: 5/3; background: linear-gradient(135deg, #2b2927, #0c0a09); position: relative; overflow: hidden; }
.cat-img::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(200,82,23,.15) 0 1px, transparent 1px 10px); }
.cat-img-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(230,126,63,.55); }
.cat-img-ico svg { width: 72px; height: 72px; stroke-width: .8; }
.cat-tag { position: absolute; top: 14px; left: 14px; background: var(--pt-copper); color: #fff; padding: 5px 10px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.cat-tag.muted { background: rgba(23,20,17,.8); }
.cat-body { padding: 24px; }
.cat-ttl { font-size: 16px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; line-height: 1.25; }
.cat-specs { display: flex; gap: 16px; font-size: 12px; color: var(--pt-stone-500); font-weight: 300; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--pt-stone-100); }
.cat-specs b { font-weight: 500; color: var(--pt-black); }
.cat-more { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--pt-copper); }
.cat-more svg { width: 14px; height: 14px; transition: transform .22s; }
.cat-card:hover .cat-more svg { transform: translateX(4px); }

/* ============ Resources grid ============ */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .res-grid { grid-template-columns: 1fr; } }
.res-card { background: #fff; border: 1px solid var(--pt-stone-100); padding: 28px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: transform .3s, border-color .3s; min-height: 220px; }
.res-card:hover { transform: translateY(-3px); border-color: var(--pt-copper); }
.res-type { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--pt-copper); display: flex; align-items: center; gap: 8px; }
.res-type svg { width: 14px; height: 14px; }
.res-ttl { font-size: 17px; font-weight: 500; letter-spacing: .02em; line-height: 1.3; margin: 0; flex: 1; }
.res-meta { font-size: 12px; color: var(--pt-stone-400); font-weight: 400; display: flex; justify-content: space-between; }

/* ============ HSE categories ============ */
.hse-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .hse-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hse-cats { grid-template-columns: 1fr; gap: 12px; } }
.hse-cat { padding: 32px 28px; background: #fff; border: 1px solid var(--pt-stone-100); border-top: 3px solid var(--pt-copper); transition: transform .3s, box-shadow .3s; cursor: pointer; }
.hse-cat:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.06); }
.hse-cat-ico { width: 44px; height: 44px; color: var(--pt-copper); margin-bottom: 18px; }
.hse-cat-ico svg { width: 100%; height: 100%; stroke-width: 1.4; }
.hse-cat-t { font-size: 15px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; line-height: 1.3; }
.hse-cat-d { font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--pt-stone-500); margin: 0; }

.hse-docs { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--pt-stone-200); margin-top: 32px; }
.hse-doc { display: grid; grid-template-columns: auto 1fr auto auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--pt-stone-200); cursor: pointer; transition: padding .2s, color .2s; }
@media (max-width: 600px) {
  .hse-doc { grid-template-columns: auto 1fr auto; gap: 14px; padding: 16px 0; }
  .hse-doc > :nth-child(3) { grid-column: 2 / -1; grid-row: 2; margin-top: 4px; }
  .hse-doc-arrow { grid-column: 3; grid-row: 1; }
}
.hse-doc:hover { padding-left: 14px; color: var(--pt-copper); }
.hse-doc-ico { width: 36px; height: 36px; color: var(--pt-copper); border: 1px solid var(--pt-stone-200); display: flex; align-items: center; justify-content: center; }
.hse-doc-ico svg { width: 18px; height: 18px; stroke-width: 1.5; }
.hse-doc-t { font-size: 15px; font-weight: 500; }
.hse-doc-meta { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pt-stone-400); font-weight: 500; }
.hse-doc-arrow { width: 20px; height: 20px; color: var(--pt-stone-400); transition: transform .22s, color .22s; }
.hse-doc:hover .hse-doc-arrow { transform: translateX(4px); color: var(--pt-copper); }

/* ============ Empresa / values ============ */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 16px; }
@media (max-width: 900px) { .values { grid-template-columns: repeat(2, 1fr); } }
.val { padding-top: 28px; border-top: 2px solid var(--pt-copper); }
.val-n { font-size: 10px; letter-spacing: .2em; color: var(--pt-stone-400); font-weight: 600; margin-bottom: 8px; }
.val-t { font-size: 18px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; margin: 0 0 10px; }
.val-d { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--pt-stone-500); margin: 0; }

/* pulse on tab */
.tab-dot { width: 6px; height: 6px; background: var(--pt-copper); border-radius: 999px; display: inline-block; margin-right: 8px; animation: pulse 2s infinite; }

/* Disable video motion for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ Cat-img photo (desde Supabase) ============ */
.cat-img-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Toggle Productos / Servicios (público) + acción de descarga */
.cat-actions {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin: 0 0 36px;
}
.cat-actions .cat-toggle { margin: 0; left: auto; transform: none; }
.cat-pdf-btn { font-size: 12px; }
.cat-pdf-btn[disabled] { opacity: .65; cursor: progress; }
.cat-pdf-btn .arrow,
.cat-pdf-btn svg { width: 16px; height: 16px; }
.cat-pdf-btn .arrow.is-spinning,
.cat-pdf-btn svg.is-spinning { animation: catalog-spin 1s linear infinite; }
@keyframes catalog-spin { to { transform: rotate(360deg); } }
.cat-toggle {
  display: inline-flex; gap: 4px; padding: 5px;
  background: var(--pt-stone-50, #f5f3ef); border: 1px solid var(--pt-stone-100);
  border-radius: 999px; margin: 0 auto 36px;
  position: relative; left: 50%; transform: translateX(-50%);
}
.cat-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  border: none; background: transparent;
  color: var(--pt-stone-500); font-weight: 600; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: all .25s var(--ease-standard);
  font-family: inherit;
}
.cat-pill:hover { color: var(--pt-black); }
.cat-pill.active {
  background: linear-gradient(135deg, var(--pt-copper), #e8681f);
  color: #fff; box-shadow: 0 6px 18px rgba(200,82,23,.4);
}
.cat-pill svg { width: 16px; height: 16px; }
.cat-pill.active svg { color: #fff; }

/* Toggle admin (modo dark) */
.adm-cat-toggle {
  display: inline-flex; gap: 4px; padding: 5px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px; margin-bottom: 24px;
}
.adm-cat-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  border: none; background: transparent;
  color: rgba(255,255,255,.6); font-weight: 600; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: all .2s var(--ease-standard);
  font-family: inherit;
}
.adm-cat-pill span {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
}
.adm-cat-pill:hover { color: #fff; }
.adm-cat-pill.active {
  background: linear-gradient(135deg, var(--pt-copper), #e8681f);
  color: #fff; box-shadow: 0 4px 14px rgba(200,82,23,.35);
}
.adm-cat-pill.active span { background: rgba(0,0,0,.25); color: #fff; }

/* Badge de categoría en cards admin */
.adm-cat-badge {
  font-size: 10px !important; padding: 3px 8px; border-radius: 4px;
  font-weight: 700; letter-spacing: .08em;
}
.adm-cat-badge.prod { background: rgba(200,82,23,.18); color: var(--pt-copper-light); }
.adm-cat-badge.serv { background: rgba(0,168,120,.18); color: #4ade80; }

/* ============ Admin Nav (Catálogo / Solicitudes / Config) ============ */
.adm-nav {
  display: flex; gap: 4px; padding: 0 32px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.01);
}
.adm-nav-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 18px; background: transparent; border: none;
  color: rgba(255,255,255,.55); font-weight: 600; font-size: 13px;
  letter-spacing: .03em; cursor: pointer; transition: all .18s;
  border-bottom: 2px solid transparent; font-family: inherit;
  position: relative;
}
.adm-nav-item:hover { color: rgba(255,255,255,.85); }
.adm-nav-item.active { color: #fff; border-bottom-color: var(--pt-copper); }
.adm-nav-item svg { width: 16px; height: 16px; }
.adm-nav-badge {
  background: var(--pt-copper); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; min-width: 22px; text-align: center;
  box-shadow: 0 2px 6px rgba(200,82,23,.5);
}

/* ============ Filtros Solicitudes ============ */
.adm-filters {
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
  padding: 14px 18px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06); border-radius: 10px;
}
.adm-filter-group { display: flex; align-items: center; gap: 8px; }
.adm-filter-label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: rgba(255,255,255,.5);
}
.adm-filters select {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 13px;
  font-family: inherit; cursor: pointer;
}

/* ============ Tabla Solicitudes ============ */
.adm-table-wrap { overflow-x: auto; background: #15110d; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table thead { background: rgba(255,255,255,.03); }
.adm-table th {
  text-align: left; padding: 14px 16px; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.08);
}
.adm-table td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.05); }
.adm-table tbody tr { cursor: pointer; transition: background .15s; }
.adm-table tbody tr:hover { background: rgba(255,255,255,.03); }
.adm-table tbody tr:last-child td { border-bottom: none; }
.adm-table td svg { width: 16px; height: 16px; color: rgba(255,255,255,.4); }

/* Estado pills */
.adm-est {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.adm-est.nuevo { background: rgba(200,82,23,.2); color: var(--pt-copper-light); }
.adm-est.proc  { background: rgba(59,130,246,.2); color: #93c5fd; }
.adm-est.ok    { background: rgba(34,197,94,.2);  color: #86efac; }
.adm-est.bad   { background: rgba(220,38,38,.2);  color: #fca5a5; }
.adm-est.mute  { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }

/* Solicitud modal body */
.adm-sol-body { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.adm-sol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adm-sol-grid.two { grid-template-columns: 200px 1fr; align-items: start; }
.adm-sol-k { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 600; margin-bottom: 4px; }
.adm-sol-v { display: block; font-size: 14px; color: rgba(255,255,255,.9); }
.adm-sol-msg { padding: 14px; background: rgba(255,255,255,.03); border-radius: 8px; border-left: 3px solid var(--pt-copper); }
.adm-sol-msg p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.85); white-space: pre-wrap; }

/* ============ Config form ============ */
.adm-config-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; }
.adm-config-form .full { grid-column: 1 / -1; }
.adm-config-form label { display: flex; flex-direction: column; gap: 8px; }
.adm-config-form label > span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; }
.adm-config-form input, .adm-config-form textarea {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: #fff;
  padding: 12px 14px; border-radius: 8px; font-size: 14px; font-family: inherit;
  transition: border-color .18s, background .18s;
}
.adm-config-form input:focus, .adm-config-form textarea:focus {
  outline: none; border-color: var(--pt-copper); background: rgba(255,255,255,.06);
}
.adm-config-group {
  grid-column: 1 / -1;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pt-copper-light); margin: 8px 0 0; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.adm-config-group:first-child { margin-top: 0; }
.adm-msg {
  background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.3); color: #86efac;
  padding: 10px 14px; border-radius: 8px; font-size: 13px;
}

@media (max-width: 700px) {
  .adm-sol-grid, .adm-sol-grid.two { grid-template-columns: 1fr; }
  .adm-config-form { grid-template-columns: 1fr; }
  .adm-table th, .adm-table td { padding: 10px 12px; }
}

/* ============ Admin Panel ============ */
.adm-shell { min-height: 100vh; background: #0c0a09; color: #fff; font-family: 'Barlow', sans-serif; }
.adm-loading { padding: 80px 32px; text-align: center; color: rgba(255,255,255,.6); }

/* Login */
.adm-login { display: flex; align-items: center; justify-content: center; padding: 32px; }
.adm-login .adm-card { width: 100%; max-width: 420px; background: #15110d; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 36px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.adm-brand { font-size: 11px; letter-spacing: .22em; color: var(--pt-copper-light); font-weight: 600; }
.adm-card h1 { font-size: 28px; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; margin: 4px 0 0; }
.adm-sub { font-size: 13px; color: rgba(255,255,255,.55); margin: 0 0 8px; }
.adm-card label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; }
.adm-card input, .adm-form input, .adm-form textarea, .adm-form select {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: #fff;
  padding: 12px 14px; border-radius: 8px; font-size: 14px; font-family: inherit; font-weight: 400;
  transition: border-color .18s, background .18s; text-transform: none; letter-spacing: 0;
}
.adm-card input:focus, .adm-form input:focus, .adm-form textarea:focus, .adm-form select:focus {
  outline: none; border-color: var(--pt-copper); background: rgba(255,255,255,.06);
}
.adm-back { font-size: 12px; color: rgba(255,255,255,.55); text-decoration: none; margin-top: 4px; transition: color .18s; }
.adm-back:hover { color: #fff; }

/* Buttons */
.adm-btn {
  background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.15);
  padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; transition: all .18s; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.adm-btn:hover:not(:disabled) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.adm-btn:disabled { opacity: .5; cursor: not-allowed; }
.adm-btn.primary { background: var(--pt-copper); border-color: var(--pt-copper); }
.adm-btn.primary:hover:not(:disabled) { background: #e8681f; border-color: #e8681f; }
.adm-btn.ghost { background: transparent; }
.adm-btn.danger { background: rgba(220,38,38,.15); border-color: rgba(220,38,38,.4); color: #fca5a5; }
.adm-btn.danger:hover:not(:disabled) { background: rgba(220,38,38,.25); border-color: #dc2626; color: #fff; }
.adm-btn.sm { padding: 6px 12px; font-size: 12px; }
.adm-btn-icon { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.7); width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 18px; }
.adm-btn-icon:hover { background: rgba(220,38,38,.2); color: #fff; border-color: #dc2626; }

/* Header */
.adm-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.adm-header-l, .adm-header-r { display: flex; align-items: center; gap: 14px; }
.adm-pill { font-size: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
.adm-link { color: rgba(255,255,255,.7); text-decoration: none; font-size: 13px; font-weight: 500; }
.adm-link:hover { color: #fff; }

/* Toolbar + grid */
.adm-main { max-width: 1320px; margin: 0 auto; padding: 32px; }
.adm-toolbar { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.adm-toolbar h2 { font-size: 28px; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; margin: 0; }
.adm-toolbar .adm-sub { margin: 4px 0 0; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.adm-empty { text-align: center; padding: 80px 20px; border: 1px dashed rgba(255,255,255,.15); border-radius: 12px; }
.adm-empty p { margin: 0 0 16px; color: rgba(255,255,255,.6); }

/* Cards */
.adm-card-eq { background: #15110d; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; transition: border-color .18s, transform .18s; }
.adm-card-eq:hover { border-color: rgba(200,82,23,.4); transform: translateY(-2px); }
.adm-card-img { position: relative; aspect-ratio: 16/10; background: #0a0908; overflow: hidden; }
.adm-card-img img { width: 100%; height: 100%; object-fit: cover; }
.adm-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.3); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.adm-tag { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.adm-tag.dest { background: var(--pt-copper); color: #fff; }
.adm-tag.bad { background: rgba(220,38,38,.9); color: #fff; top: 10px; left: auto; right: 10px; }
.adm-card-body { padding: 16px; }
.adm-card-body h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.adm-card-body p { font-size: 13px; color: rgba(255,255,255,.6); margin: 0 0 10px; line-height: 1.5; min-height: 36px; }
.adm-meta { font-size: 11px; color: rgba(255,255,255,.5); display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; letter-spacing: .04em; text-transform: uppercase; }
.adm-card-actions { display: flex; gap: 8px; }
.adm-card-actions .adm-btn { flex: 1; justify-content: center; }
.adm-mute { color: rgba(255,255,255,.4); }

/* Modal */
.adm-modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; overflow-y: auto; backdrop-filter: blur(4px); }
.adm-modal-card { background: #15110d; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; max-width: 720px; width: 100%; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.adm-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.adm-modal-header h3 { font-size: 18px; font-weight: 600; margin: 0; }
.adm-modal-close { background: transparent; border: none; color: rgba(255,255,255,.6); font-size: 28px; cursor: pointer; line-height: 1; padding: 0 8px; }
.adm-modal-close:hover { color: #fff; }

/* Form */
.adm-form { padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.adm-form .full { grid-column: 1 / -1; }
.adm-form label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; }
.adm-form .adm-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; margin-bottom: 8px; }
.adm-form textarea { resize: vertical; min-height: 80px; font-family: inherit; }
.adm-check { flex-direction: row !important; align-items: center; gap: 10px !important; cursor: pointer; }
.adm-check input { width: 18px; height: 18px; accent-color: var(--pt-copper); }

/* Image upload */
.adm-img-row { display: flex; gap: 16px; align-items: flex-start; }
.adm-img-preview { width: 200px; height: 130px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: #0a0908; }
.adm-img-empty { width: 200px; height: 130px; display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(255,255,255,.15); border-radius: 8px; color: rgba(255,255,255,.4); font-size: 12px; }
.adm-img-actions { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.adm-img-actions input[type="file"] { font-size: 13px; padding: 8px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.15); border-radius: 8px; color: #fff; cursor: pointer; }

/* Specs */
.adm-spec-row { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 8px; margin-bottom: 8px; }

/* Errors */
.adm-err { background: rgba(220,38,38,.15); border: 1px solid rgba(220,38,38,.3); color: #fca5a5; padding: 10px 14px; border-radius: 8px; font-size: 13px; }
.adm-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }

@media (max-width: 700px) {
  .adm-form { grid-template-columns: 1fr; }
  .adm-img-row { flex-direction: column; }
  .adm-img-preview, .adm-img-empty { width: 100%; }
  .adm-spec-row { grid-template-columns: 1fr 1fr; }
  .adm-spec-row .adm-btn-icon { grid-column: 1 / -1; justify-self: end; }
}

/* Clients marquee */
.clients-marquee { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.clients-track { display: flex; gap: 72px; width: max-content; animation: clients-scroll 40s linear infinite; align-items: center; }
.clients-marquee:hover .clients-track { animation-play-state: paused; }
.clients-track img { height: 56px; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .3s, opacity .3s; }
.clients-track img:hover { filter: grayscale(0); opacity: 1; }
@keyframes clients-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Servicios carousel animation */
.svc-carousel-anim { animation: svc-carousel-in 1.1s cubic-bezier(.22,.61,.36,1) both; overflow: hidden; }
.svc-carousel-anim > .line-card { animation: svc-carousel-slide 1.1s cubic-bezier(.22,.61,.36,1) both; }
.svc-carousel-anim > .line-card:nth-child(1) { animation-delay: 0ms; }
.svc-carousel-anim > .line-card:nth-child(2) { animation-delay: 140ms; }
.svc-carousel-anim > .line-card:nth-child(3) { animation-delay: 280ms; }
.svc-carousel-anim > .line-card:nth-child(4) { animation-delay: 420ms; }
.svc-carousel-anim > .line-card:nth-child(5) { animation-delay: 560ms; }
.svc-carousel-anim > .line-card:nth-child(6) { animation-delay: 700ms; }
@keyframes svc-carousel-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes svc-carousel-slide {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Service card with image */
.svc-card-img { padding-top: 0; height: 560px; min-height: 560px; }
.svc-card-img-wrap { margin: -1px -36px 4px; aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(135deg, #2b2927 0%, #0c0a09 100%); position: relative; flex-shrink: 0; }
.svc-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-standard, ease); }
.svc-card-img:hover .svc-card-img-wrap img { transform: scale(1.04); }
.svc-card-img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); }
.svc-card-img-ph svg { width: 48px; height: 48px; stroke-width: 1; }
.svc-card-img .line-num { flex: 0 0 auto; }
.svc-card-img .line-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 0 0 auto; min-height: 64px; }
.svc-card-img .line-body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1 1 auto; min-height: 72px; }
.svc-card-img .line-cta { flex: 0 0 auto; margin-top: auto; }