/* ==========================================================================
   Panamax home: visual uplift layer (Cell A, 2026-10-10)

   What this file does: refines hierarchy, spacing rhythm, hover/press states,
   card craft and motion on the homepage. It never changes copy, links, ids or
   form hooks; those live in index.html. It also styles the quote form's
   location + leak-priority fields (section 10c), which index.html gained in
   the fix round so the homepage form meets the frozen field contract.

   Why it loads last: it is linked AFTER the page's own <style> blocks so that,
   when two rules are equally specific, this file wins.

   Why some rules use !important: much of index.html was exported with inline
   style="" attributes. A normal stylesheet rule cannot beat an inline style,
   but an !important rule can. We only add !important where an inline value
   for that same property exists.

   Colors, radii, shadows and easing come from the Panamax design-system
   tokens (/_ds/.../tokens/*.css). Literal values after a comma inside var()
   are only fallbacks in case the token file fails to load.
   ========================================================================== */

:root {
  /* DS ease-out: quick and confident, no bounce. */
  --pmx-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  /* DS section rhythm: 64px on phones up to 128px on wide screens. */
  --pmx-section-y: var(--section-y, clamp(4rem, 8vw, 8rem));
}


/* 1. HEADER ---------------------------------------------------------------- */

/* motion.js adds .is-scrolled once the page moves, so the sticky bar lifts
   off the content with a soft shadow instead of a hard grey line. */
#top {
  transition: box-shadow 240ms var(--pmx-ease), border-color 240ms var(--pmx-ease) !important;
}
#top.is-scrolled {
  border-bottom-color: transparent !important;
  box-shadow: 0 8px 24px rgba(3, 32, 63, 0.08) !important;
}

/* Desktop nav links: darker blue plus a short red rule that draws in. */
#top nav a.scp0 { position: relative; }
#top nav a.scp0::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--red-600, #cd3439);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--pmx-ease);
}
#top nav a.scp0:hover,
#top nav a.scp0:focus-visible { color: var(--blue-900, #042f63) !important; }
#top nav a.scp0:hover::after,
#top nav a.scp0:focus-visible::after { transform: scaleX(1); }

/* Social icons + language switch: tinted background on hover. */
#top a.scp1:hover { background: var(--blue-50, #eef4fc) !important; color: var(--blue-800, #053a7d) !important; }
#top button[data-lang-toggle]:hover { background: var(--blue-50, #eef4fc) !important; border-color: rgba(5, 68, 145, 0.5) !important; }

/* Mobile drawer: while closed it sits just off-screen, but its shadow was
   still bleeding onto the right edge of every page. Fix: hide the closed
   drawer completely (visibility), but only AFTER its 0.25s slide-out has
   finished, so it keeps its shadow while it moves (no "pop").
   - Closing: visibility waits 0.25s (the delay), then switches to hidden.
   - Opening: visibility switches to visible at once (no delay). */
#pmxMobNav {
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
#pmxMobNav.open {
  visibility: visible;
  transition: transform 0.25s ease, visibility 0s linear 0s;
}
/* Reduced motion: the slide is instant, so the hide is instant too. */
@media (prefers-reduced-motion: reduce) {
  #pmxMobNav { transition-delay: 0s !important; }
}

/* Tablets and small laptops (769-960px): the desktop header (logo, five
   links, two social icons, EN, Cotizar) is ~820px of content. Below ~945px
   it did not fit, so the red "Cotizar" button was pushed past the right edge
   and the whole page scrolled sideways (this was already so before the
   uplift). Here we tighten the gaps and hide the two social icons and their
   divider; on phones they are hidden too, and both are placeholder links
   (href="#"). Every nav link, EN and Cotizar stay visible. */
@media (min-width: 769px) and (max-width: 960px) {
  #top > div > nav.pmx-dn { gap: clamp(14px, 2.2vw, 22px) !important; }
  #top > div > div.pmx-dn { gap: 10px !important; }
  #top > div > div.pmx-dn > a.scp1,
  #top > div > div.pmx-dn > span { display: none !important; }
}


/* 2. BUTTONS --------------------------------------------------------------- */
/* DS rule: darken on hover, lift with shadow, nudge 1px down on press.
   Never fade opacity on a primary control. */
.scp2, .scp3, .scp4, .scp5, .scp6, .scp7, .scpc {
  transition:
    background-color 160ms var(--pmx-ease),
    border-color 160ms var(--pmx-ease),
    color 160ms var(--pmx-ease),
    box-shadow 220ms var(--pmx-ease),
    transform 120ms var(--pmx-ease) !important;
}
.scp2:hover { background: var(--red-700, #b22d31) !important; box-shadow: var(--shadow-accent, 0 12px 26px rgba(205, 52, 57, 0.22)) !important; }
.scp5:hover { background: var(--blue-800, #053a7d) !important; box-shadow: var(--shadow-brand, 0 12px 26px rgba(5, 68, 145, 0.24)) !important; }
.scp3:hover { background: var(--blue-100, #dce8f8) !important; border-color: var(--blue-300, #7aabe8) !important; }
.scp4:hover { background: var(--blue-50, #eef4fc) !important; border-color: var(--blue-300, #7aabe8) !important; }
.scp6:hover,
.scp7:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.55) !important; }
.scp2:active, .scp3:active, .scp4:active, .scp5:active, .scp6:active, .scp7:active { transform: translateY(1px); }

/* Arrow icons inside buttons slide forward a little on hover. */
.scp2 svg, .scp7 svg { transition: transform 220ms var(--pmx-ease); }
.scp2:hover svg, .scp7:hover svg { transform: translateX(3px); }

/* Floating quote button. */
.scpc:hover { background: var(--red-700, #b22d31) !important; transform: translateY(-2px); }

/* Footer links. */
footer a.scpa:hover { color: #fff !important; }
footer a.scpb:hover { text-decoration: underline; text-underline-offset: 3px; }


/* 3. FILM REEL (top video) -------------------------------------------------- */
/* While the film loads (or on a slow phone) show deep brand blue with the
   roof-line texture instead of a flat black box. A 3px red rule closes the
   film, echoing the structural dividers further down the page. */
.pmx-hero-video {
  position: relative;
  background-color: var(--blue-950, #03203f) !important;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 30px) !important;
}
.pmx-hero-video::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--red-600, #cd3439);
  pointer-events: none;
}


/* 4. HERO ------------------------------------------------------------------ */

/* Headline: tighter tracking and leading for a confident, engineered block;
   "pretty" line breaking so the last line is not a lonely word. */
.pmx-hero-title {
  font-size: clamp(34px, 4.1vw, 54px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.028em !important;
  text-wrap: pretty; /* avoids a lonely last word without reshuffling every line */
}
.pmx-hero-lede {
  font-size: clamp(16px, 1.25vw, 18px) !important;
  max-width: 54ch !important;
}

/* Wide screens only: give the copy column a little more room so all three
   actions sit on one line. Below 1161px the actions wrap anyway, so the
   original 1.05fr/0.95fr split and 56px gap are kept there; that keeps the
   service card wide enough for its four KPI figures on one row. */
@media (min-width: 1161px) {
  .pmx-hero { grid-template-columns: 1.08fr 0.92fr !important; gap: clamp(36px, 3.6vw, 52px) !important; }
}

/* Action hierarchy: red = the one high-intent action, soft blue = secondary,
   "Ver servicios" reads as a quiet text action (same link, same label).
   Gap: 8px between rows, 12px (the original) between actions on one row.
   Depending on the width, "Ver servicios" either sits beside a button or
   wraps to start a new line. Because it has no box or side padding, it looks
   right in both places: 12px after a button, or flush with the column edge
   like the copy above it. It keeps the 52px height so its text lines up
   with the buttons, and an underline marks hover. */
.pmx-hero-sec .pmx-cta3 { gap: 8px 12px !important; }
.pmx-hero-cta--primary { padding: 0 22px !important; }
.pmx-hero-cta--soft { padding: 0 18px !important; }
.pmx-hero-cta--ghost { padding: 0 !important; border-color: transparent !important; }
.pmx-hero-cta--ghost:hover { background: transparent !important; border-color: transparent !important; text-decoration: underline; text-underline-offset: 4px; }

/* Phones: stack the actions full-width so each one is an easy thumb target. */
@media (max-width: 560px) {
  .pmx-hero-sec .pmx-cta3 { flex-direction: column; align-items: stretch; }
  .pmx-hero-sec .pmx-cta3 > a { justify-content: center; }
  .pmx-hero-cta--ghost { height: 46px !important; }
}

/* Service card KPI row: left exactly as the original page has it (one row of
   four figures, original gap). An earlier version of this file narrowed the
   card and then had to wrap the row, leaving "Cotización" alone on a second
   line at 769-1140px; both of those rules are gone. */


/* 5. SECTION RHYTHM + HEADINGS ---------------------------------------------- */

/* One vertical rhythm for the main content sections (DS --section-y). */
#servicios, #extractores, #proceso, #proyectos, #nosotros {
  padding-top: var(--pmx-section-y) !important;
  padding-bottom: var(--pmx-section-y) !important;
}
/* Extractores flows straight into the blue stats band, so it closes tighter. */
#extractores { padding-bottom: clamp(36px, 4vw, 56px) !important; }

/* One heading scale for every section title. */
.pmx-h2 {
  font-size: clamp(28px, 3.3vw, 46px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.026em !important;
  text-wrap: balance;
}
/* Titles that share their row with media/cards run a step smaller. */
.pmx-h2--split { font-size: clamp(28px, 3vw, 42px) !important; }
#servicios .pmx-h2 { max-width: 780px !important; }

/* Eyebrow red rule: it draws in from the left as its section is revealed.
   (Only while motion is armed and the block is still hidden; otherwise it is
   simply drawn.) */
.pmx-eyebrow > span:first-child {
  transform-origin: left center;
  transition: transform 640ms var(--pmx-ease) 140ms;
}
html.pmx-motion .pmx-reveal:not(.is-visible) .pmx-eyebrow > span:first-child,
html.pmx-motion .pmx-eyebrow.pmx-reveal:not(.is-visible) > span:first-child {
  transform: scaleX(0);
}


/* 6. SERVICE CARDS ----------------------------------------------------------- */
/* Equal-height cards with the action pinned to the bottom edge, a hairline
   ring for definition, and a 3px lift on hover (DS "interactive cards"). */
.pmx-sv3 { align-items: stretch !important; }
.pmx-service-card {
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(5, 68, 145, 0.07), var(--shadow-md, 0 4px 12px rgba(12, 19, 28, 0.08), 0 2px 4px rgba(12, 19, 28, 0.05)) !important;
  transition: transform 280ms var(--pmx-ease), box-shadow 280ms var(--pmx-ease);
}
.pmx-service-card > a:last-child { margin-top: auto; align-self: flex-start; }


/* 7. EXTRACTORES ------------------------------------------------------------- */
/* Check discs were blue-on-blue; give them a clear glass ring on navy. */
#extractores ul li > span:first-child {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}
.pmx-play { transition: transform 260ms var(--pmx-ease), background-color 200ms var(--pmx-ease); }


/* 8. STATS BAND ------------------------------------------------------------- */
/* Figures line up digit-for-digit; the technical unit uses the DS mono voice. */
#pmx-stats .pmx-stats > div > div:first-child { font-variant-numeric: tabular-nums; }
#pmx-stats .pmx-stats > div > div:first-child > span:not(.pmx-stat-value) {
  font-family: var(--font-mono, 'Spline Sans Mono', ui-monospace, monospace);
  font-weight: 600;
  letter-spacing: 0;
}


/* 9. PROCESS (Cómo trabajamos) ---------------------------------------------- */
/* Phones: a left-aligned timeline (icon, then title + text) joined by a
   dashed line reads faster than four centred blocks stacked tall. */
@media (max-width: 520px) {
  .pmx-proc { gap: 30px !important; margin-top: 40px !important; }
  .pmx-step {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
    text-align: left !important;
  }
  .pmx-step > div:first-child { grid-row: 1 / span 2; margin: 0 !important; }
  .pmx-step > h3 { margin: 8px 0 6px !important; }
  .pmx-step > p { margin: 0 !important; max-width: none !important; }
  .pmx-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 33px;
    top: 80px;
    bottom: -24px;
    border-left: 2px dashed rgba(255, 255, 255, 0.22);
    pointer-events: none;
  }
}


/* Desktop: the dashed line joining the four steps draws itself from left to
   right when the section arrives. Its final look is exactly the original line;
   without motion it is simply there. motion.js adds .is-drawn. */
/* Both ends are inset() values so the browser can animate between them
   ("none" cannot be interpolated and would just jump). */
.pmx-procline { transition: clip-path 900ms var(--pmx-ease) 200ms; }
html.pmx-motion .pmx-draw { clip-path: inset(0 100% 0 0); }
html.pmx-motion .pmx-draw.is-drawn { clip-path: inset(0 0 0 0); }


/* 10. PROJECTS -------------------------------------------------------------- */
/* Each film tile gets a small "expand" disc so it is clear a tap opens the
   video full screen (the tile already does this; this only shows it). */
.pmx-project-cell::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(3, 32, 63, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  pointer-events: none;
  transition: background-color 200ms var(--pmx-ease), transform 260ms var(--pmx-ease);
}
/* Phones + tablets: each tile is told to fill the column. Without this the
   tile's 16/9 ratio plus its 220px minimum height made it ~391px wide, so on
   a 390px phone every film poked past the right edge (the section's
   overflow:hidden only hid the cut). */
@media (max-width: 1023px) {
  .pmx-project-cell,
  .pmx-project-cta { width: 100%; }
}
.pmx-project-cell video { transition: transform 900ms var(--pmx-ease); }
.pmx-project-caption { transition: transform 320ms var(--pmx-ease); }
.pmx-project-cta > div:last-child > div:last-child { transition: transform 240ms var(--pmx-ease), background-color 200ms var(--pmx-ease); }


/* 10b. CONTACTO -------------------------------------------------------------- */
/* The contact eyebrow now matches every other section label: same weight and
   tracking, led by the short red rule (drawn with CSS, no extra markup). */
.contacto-info .tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 12px Archivo, sans-serif;
  letter-spacing: 0.09em;
}
.contacto-info .tag::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--red-600, #cd3439);
  flex: 0 0 auto;
}


/* 10c. QUOTE FORM ------------------------------------------------------------- */
/* Since the form v2 (CELL F, 2026-10-10) the #contacto form is styled ONLY by
   /styles/wizard.css (pk-* classes), the same file /ventas/ uses, so both forms
   look and behave the same. The old #contacto .wiz-* rules were deleted on
   purpose; do not bring them back. Here only: when a step opens, the card top
   stops below the sticky site header instead of under it. */
#contacto .wiz-card { scroll-margin-top: 88px; }
/* Same for the barrio search box when wizard.js lifts it above the phone keyboard. */
#contacto .wiz-card .pk-combo { scroll-margin-top: 88px; }
/* Phones: a slimmer card padding for the home form. Kept here (not in the shared
   wizard.css) so /cotizar/, which also links wizard.css, keeps its own 24px. */
@media (max-width: 520px) {
  #contacto .wiz-card { padding: 16px; }
}


/* 11. HOVER EFFECTS (mouse/trackpad only) ------------------------------------ */
/* Wrapped in (hover: hover) so phones never get a "stuck" hover state. */
@media (hover: hover) and (pointer: fine) {
  .pmx-service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(5, 68, 145, 0.1), var(--shadow-lg, 0 12px 28px rgba(12, 19, 28, 0.12), 0 4px 8px rgba(12, 19, 28, 0.06)) !important;
  }
  .pmx-video-frame:hover .pmx-play { transform: scale(1.06); background: rgba(255, 255, 255, 0.24) !important; }
  .pmx-project-cell:hover video { transform: scale(1.04); }
  .pmx-project-cell:hover .pmx-project-caption { transform: translateY(-3px); }
  .pmx-project-cell:hover::after { background-color: var(--red-600, #cd3439); transform: scale(1.06); }
  .pmx-project-cta:hover > div:last-child > div:last-child { transform: translateX(4px); background: rgba(255, 255, 255, 0.3) !important; }
}


/* 12. HERO ENTRANCE (CSS only) ---------------------------------------------- */
/* On load the hero assembles in a short sequence: eyebrow, headline, text,
   actions, then the service card. It runs only when html.pmx-motion is set
   (motion allowed + JS on). With reduced motion everything is simply there. */
@media (prefers-reduced-motion: no-preference) {
  html.pmx-motion .pmx-hero-in { animation: pmxHeroIn 760ms var(--pmx-ease) both; }
  html.pmx-motion .pmx-hero-in--1 { animation-delay: 40ms; }
  html.pmx-motion .pmx-hero-in--2 { animation-delay: 110ms; }
  html.pmx-motion .pmx-hero-in--3 { animation-delay: 190ms; }
  html.pmx-motion .pmx-hero-in--4 { animation-delay: 260ms; }
  html.pmx-motion .pmx-hero-in--5 { animation-delay: 330ms; }
  html.pmx-motion .pmx-hero-in--card { animation-name: pmxHeroCardIn; animation-duration: 900ms; animation-delay: 160ms; }
  html.pmx-motion .pmx-hero-in--1 > span:first-child { transform-origin: left center; animation: pmxRuleIn 700ms var(--pmx-ease) 280ms both; }

  /* Card rows start after the card itself has arrived. */
  html.pmx-motion .pmx-hr .svc-row:nth-child(1) { animation-delay: 0.38s; }
  html.pmx-motion .pmx-hr .svc-row:nth-child(2) { animation-delay: 0.46s; }
  html.pmx-motion .pmx-hr .svc-row:nth-child(3) { animation-delay: 0.54s; }
  html.pmx-motion .pmx-hr .svc-row:nth-child(4) { animation-delay: 0.62s; }
  html.pmx-motion .pmx-hr .kpi { animation-delay: 0.72s; }
}
@keyframes pmxHeroIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes pmxHeroCardIn {
  from { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes pmxRuleIn {
  from { transform: scaleX(0); }
  to { transform: none; }
}


/* 13. REDUCED MOTION + PRINT ------------------------------------------------- */
/* Reduced motion: no lifts, zooms or slides; every element sits still. */
@media (prefers-reduced-motion: reduce) {
  .pmx-hero-in,
  .pmx-hero-in--1 > span:first-child { animation: none !important; opacity: 1 !important; transform: none !important; }
  .pmx-eyebrow > span:first-child,
  .pmx-service-card,
  .pmx-service-card:hover,
  .pmx-project-cell video,
  .pmx-project-cell:hover video,
  .pmx-project-cell .pmx-project-caption,
  .pmx-project-cell:hover .pmx-project-caption,
  .scpc:hover,
  .scp2 svg,
  .scp7 svg { transform: none !important; transition: none !important; }
}
/* Printing: never print a half-revealed page. */
@media print {
  .pmx-hero-in { animation: none !important; opacity: 1 !important; transform: none !important; }
}