/* ==============================================================
   pages/inicio.css — estilos exclusivos de esta página
   Se carga solo en su HTML correspondiente (PageSpeed).
   Requiere: tokens.css, base.css, components.css, layout.css
   ============================================================== */

/* --- Hero ------------------------------------------------------ */
/* Especificación: documentacion/componente-hero-inicio-noedelaflor.md
   (Figma node 65:130). Mobile-first: texto → mockup único (Burger Ramírez)
   apilados; desde 1024px dos columnas 526:728 (proporción exacta del Figma)
   con la composición de 3 mockups. Fondo: efecto de puntos (dots-effect.js).
   El hero ocupa el viewport completo y arranca en y=0: el nav (sticky,
   z-index superior) flota encima; el hero se desplaza bajo él con un margen
   negativo igual a --header-height y compensa con padding-top. */
.hero {
  /* Tokens del componente — todos los valores del documento, editables aquí */
  --hero-pad-y: clamp(var(--space-5), 4vw, 64px);   /* aire vertical dentro del viewport */
  --hero-min-height: 100dvh;              /* el hero llena la pantalla; el nav flota encima */
  --hero-scroll-size: 0px;                /* alto del ícono de scroll (64px solo donde existe) */
  --hero-pad-x: 20px;                     /* gutter mobile (alineado con nav/footer) */
  --hero-content-max: 1280px;
  --hero-cols: minmax(0, 526fr) minmax(0, 728fr);   /* texto : mockups (Figma) */
  --hero-text-max: 526px;                 /* ancho del bloque de texto (fija los cortes del título) */
  --hero-col-gap: 0px;
  --hero-title-leading: 1.2;              /* 210px / 3 líneas de 57px en Figma */
  --hero-gap-title: clamp(var(--space-4), 3.3vw, 48px);   /* título → subtítulo */
  --hero-gap-copy: clamp(var(--space-5), 4.4vw, 64px);    /* subtítulo → CTAs */
  --hero-gap-ctas: clamp(var(--space-4), 3.3vw, 48px);    /* CTAs → chips */
  --hero-cta-gap: 12px;
  --hero-cta-pad-y: 18px;
  --hero-cta-pad-x: clamp(36px, 3.34vw, 48px); /* 48px (Figma) desde ~1437px; menos en 2 columnas estrechas para que los 2 CTAs quepan en fila */
  --hero-cta-pad-icon: 40px;              /* padding izq. del CTA con ícono */
  --hero-cta-icon-gap: 12px;
  --hero-cta-radius: 5px;
  --hero-chip-gap: clamp(16px, 2.5vw, 36px); /* 36px en Figma; 16px en 375px para que quepan en 2 líneas */
  --hero-chip-icon-gap: 5px;
  --hero-scroll-gap: 0px;                 /* contenido → ícono de scroll (48px solo donde el ícono existe) */
  --hero-mockups-ratio: 728 / 730;        /* caja de la composición (Figma) */
  --hero-mockups-min: 60%;                /* la composición nunca baja de este % de su columna */
  --hero-mockup-mobile-max: 300px;        /* ancho máx. del mockup único en mobile */

  /* Animación de entrada de los mockups */
  --hero-reveal-duration: var(--ease-slower);   /* 700ms */
  --hero-reveal-stagger: 110ms;                 /* HiHi → WO → Burger */
  --hero-reveal-shift: 32px;                    /* recorrido del translate */
  --hero-reveal-rotate: 15deg;                  /* inclinación final de HiHi (−) y WO (+) */

  /* Indicador de scroll (loop ambiental, más lento que las interacciones) */
  --hero-scroll-loop: 1800ms;
  --hero-scroll-travel: 12px;

  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--color-carbon);
  color: var(--color-crema);
  /* Se mete bajo el header: el nav queda por encima y el fondo de puntos
     llega hasta el borde superior de la ventana */
  margin-top: calc(-1 * var(--header-height));
  min-height: 100vh;
  min-height: var(--hero-min-height);
  padding: calc(var(--header-height) + var(--hero-pad-y)) var(--hero-pad-x) var(--hero-pad-y);
}

/* Canvas del efecto de puntos: detrás de todo, nunca captura el puntero
   (dots-effect.js escucha el mouse en el contenedor) */
.dots-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__inner {
  position: relative;               /* por encima del canvas */
  width: 100%;
  max-width: var(--hero-content-max);
  margin-inline: auto;
  flex: 1;                          /* ocupa el alto sobrante: el contenido queda centrado */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);              /* mobile: chips → mockup (la imagen trae glow transparente arriba) */
  align-items: center;
  align-content: center;
}

/* --- Columna de texto ------------------------------------------ */
.hero__content { max-width: var(--hero-text-max); }

.hero__title {
  margin: 0 0 var(--hero-gap-title);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-hero);
  line-height: var(--hero-title-leading);
  /* Los ejes SOFT/WONK vienen fijos en la URL de Google Fonts (más ligero);
     se declaran igual para documentar la intención y por si se libera el eje. */
  font-variation-settings: "SOFT" 0, "WONK" 1;
  color: var(--color-crema);
}

.hero__title em {
  font-style: italic;
  font-weight: inherit;
  color: var(--color-oro);
}

.hero__subtitle {
  margin: 0 0 var(--hero-gap-copy);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* CTAs */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hero-cta-gap);
  margin-bottom: var(--hero-gap-ctas);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hero-cta-icon-gap);
  padding: var(--hero-cta-pad-y) var(--hero-cta-pad-x);
  border: 1px solid var(--color-oro);
  border-radius: var(--hero-cta-radius);
  font-size: var(--fs-cta);
  line-height: 1.3;
  text-decoration: none;
  /* Botones: overshoot sutil en escala (estandares-tecnicos §3) */
  transition: transform var(--ease-base) var(--curve-spring),
              background-color var(--ease-base) var(--curve-standard),
              filter var(--ease-base) var(--curve-standard);
}

.hero__cta:hover { transform: scale(1.02); }
.hero__cta:active { transform: scale(0.98); transition-duration: var(--ease-fast); }

/* Primario sobre carbón: oro sólido + texto carbón; hover oscurece ~8% */
.hero__cta--primary {
  background-color: var(--color-oro);
  color: var(--color-carbon);
}
.hero__cta--primary:hover { filter: brightness(0.92); }

/* Secundario: outline oro + texto crema; hover rellena oro al 10% */
.hero__cta--secondary {
  padding-left: var(--hero-cta-pad-icon);
  background-color: transparent;
  color: var(--color-crema);
}
.hero__cta--secondary:hover { background-color: var(--color-oro-10); }

.hero__cta-icon { width: 20px; height: 20px; }

/* Chips de confianza */
.hero__chips {
  display: flex;
  flex-wrap: wrap;                  /* mobile: pasan a 2 líneas si no caben */
  gap: var(--space-2) var(--hero-chip-gap);
}

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--hero-chip-icon-gap);
  font-size: var(--fs-caption);
  line-height: 1.35;
  white-space: nowrap;
}

.hero__chip-icon { width: 16px; height: 16px; }

/* --- Columna de mockups ---------------------------------------- */
/* Caja con la proporción de la composición del Figma; cada mockup se
   posiciona por el centro (--x/--y en %) y escala con --w (% del ancho),
   así la composición se mantiene idéntica a cualquier tamaño. */
.hero__mockups {
  position: relative;
  width: 100%;
  max-width: var(--hero-mockup-mobile-max);
  margin-inline: auto;
  aspect-ratio: 355 / 650;          /* mobile: solo Burger, caja = la imagen */
}

.hero__mockup {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  will-change: transform, opacity;
}

/* Posición/tamaño final de cada mockup: centro (--x/--y) y ancho (--w) en %
   de la caja 728.44×729.68 del Figma. Los centros salen de las esquinas de
   origen que reporta Figma + rotación ±15° (HiHi y WO comparten eje, WO
   pega a la derecha del frame). Apilado z: HiHi (atrás) → WO → Burger. */
.hero__mockup--hihi   { --x: 33.98%; --y: 47.72%; --w: 47.22%; --rot: calc(-1 * var(--hero-reveal-rotate)); z-index: 1; }
.hero__mockup--wo     { --x: 66.11%; --y: 47.73%; --w: 47.22%; --rot: var(--hero-reveal-rotate); z-index: 2; }
.hero__mockup--burger { --x: 49.70%; --y: 55.46%; --w: 48.73%; --rot: 0deg; z-index: 3; }

/* Mobile: solo Burger, centrado y sin rotación, ocupando toda la caja */
.hero__mockup--hihi,
.hero__mockup--wo { display: none; }
.hero__mockup--burger { --x: 50%; --y: 50%; --w: 100%; }

/* Animación de entrada: una sola vez al cargar (CSS, sin scroll-reveal).
   Cada mockup hace fade-in + translate corto (+ rotación si aplica).
   Las tres comparten el keyframe: el punto de partida lo dan --from-x/--from-y. */
.hero__mockup {
  --from-x: 0px;
  --from-y: var(--hero-reveal-shift);       /* mobile/Burger: desde abajo */
  animation: hero-mockup-reveal var(--hero-reveal-duration) var(--curve-out) both;
  animation-delay: var(--delay, 0ms);
}

@keyframes hero-mockup-reveal {
  from {
    opacity: 0;
    transform: translate(calc(-50% + var(--from-x)), calc(-50% + var(--from-y))) rotate(0deg);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  }
}

/* --- Ícono de scroll ------------------------------------------- */
/* Es un ícono de rueda de mouse: solo tiene sentido donde hay mouse. Oculto
   por defecto (táctil: celular y tablet, del tamaño que sean); se muestra en
   la media query de abajo para puntero fino + layout de 2 columnas. */
.hero__scroll {
  position: relative;
  display: none;
  justify-content: center;
  margin-top: var(--hero-scroll-gap);
}

.hero__scroll a {
  display: inline-flex;
  color: var(--color-oro);
  transition: transform var(--ease-base) var(--curve-spring);
}

.hero__scroll a:hover { transform: translateY(2px); }

.hero__scroll svg { width: 36px; height: 64px; }

/* Solo la "rueda" se desliza hacia abajo y se desvanece; el contorno y
   la guía son estáticos. Loop ambiental, más lento que las interacciones. */
.hero__scroll-wheel {
  animation: hero-scroll-wheel var(--hero-scroll-loop) var(--curve-standard) infinite;
}

@keyframes hero-scroll-wheel {
  0%   { transform: translateY(0);                          opacity: 1; }
  70%  { transform: translateY(var(--hero-scroll-travel));  opacity: 0; }
  100% { transform: translateY(0);                          opacity: 0; }
}

/* --- Desktop (≥ 1024px): dos columnas + 3 mockups ------------- */
@media (min-width: 64em) {
  .hero__inner {
    grid-template-columns: var(--hero-cols);
    column-gap: var(--hero-col-gap);
  }

  /* La composición se acota al alto que deja el viewport (header + paddings
     + ícono de scroll) para que en laptops (p. ej. 1366×768) el hero quepa en
     una pantalla, pero nunca baja de --hero-mockups-min: en viewports muy
     bajos (tablet horizontal) el texto ya no cabe de todos modos y encoger
     más los mockups solo los hacía diminutos. Si no llena la columna, se
     centra en ella para no abrir un hueco entre las dos columnas. */
  .hero__mockups {
    --hero-mockups-max-h: calc(var(--hero-min-height) - var(--header-height) - 2 * var(--hero-pad-y) - var(--hero-scroll-size) - var(--hero-scroll-gap));
    width: clamp(var(--hero-mockups-min), var(--hero-mockups-max-h) * 728 / 730, 100%);
    max-width: none;
    margin-inline: auto;
    aspect-ratio: var(--hero-mockups-ratio);
  }

  .hero__mockup--hihi,
  .hero__mockup--wo { display: block; }

  .hero__mockup--burger { --x: 49.70%; --y: 55.46%; --w: 48.73%; }

  /* Stagger: HiHi desde la izquierda → WO desde la derecha → Burger desde abajo */
  .hero__mockup--hihi   { --from-x: calc(-1 * var(--hero-reveal-shift)); --from-y: 0px; --delay: 0ms; }
  .hero__mockup--wo     { --from-x: var(--hero-reveal-shift);            --from-y: 0px; --delay: var(--hero-reveal-stagger); }
  .hero__mockup--burger { --from-x: 0px; --from-y: var(--hero-reveal-shift);            --delay: calc(2 * var(--hero-reveal-stagger)); }
}

/* Ícono de scroll: solo con mouse/trackpad (hover + puntero fino) y 2 columnas */
@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
  .hero {
    --hero-scroll-size: 64px;
    --hero-scroll-gap: 48px;
  }
  .hero__scroll { display: flex; }
}

/* Viewports bajos en modo 2 columnas (laptops pequeñas): menos aire vertical
   para acercar el ícono de scroll al primer pantallazo */
@media (min-width: 64em) and (max-height: 45em) {
  .hero { --hero-pad-y: var(--space-4); }
  .hero__scroll { margin-top: var(--space-4); }
}

/* Movimiento reducido: mockups en su posición final, sin loop del scroll */
@media (prefers-reduced-motion: reduce) {
  .hero__mockup { animation: none; opacity: 1; }
  .hero__scroll-wheel { animation: none; }
}

/* --- Trust bar (marquee, solo en Inicio, debajo del Hero) -------------- */
/* Especificación: docs/componente-trust-bar-noedelaflor.md
   Componente exclusivo de index.html (decisión de Rey, sept 2026): por eso
   vive en pages/inicio.css y trust-bar.js solo se carga en esa página.
   Ticker infinito hacia la izquierda. El HTML trae el set de 6 mensajes
   duplicado; el keyframe desplaza exactamente un set y trust-bar.js fija
   --marquee-shift (px) y --marquee-duration a partir del ancho real del
   contenido y una velocidad fija en px/s (y añade copias si la ventana es
   más ancha que un set).
   Sin JS: 2 sets y desplazamiento de -50% del track = un set. */
.trust-bar {
  --trust-pad-y: 16px;
  --trust-gap: 36px;              /* entre mensajes */
  --trust-icon-gap: 5px;          /* ícono → texto */
  --trust-icon-size: 16px;
  --trust-window-max: 1280px;     /* ventana visible, alineada con el contenido del Hero */
  --trust-fade: 32px;             /* desvanecimiento del texto en los bordes de la ventana */

  overflow: hidden;
  background-color: var(--color-carbon);
  color: var(--color-crema);
  border-top: 1px solid var(--color-oro);
  border-bottom: 1px solid var(--color-oro);
  padding-block: var(--trust-pad-y);
}

/* Ventana de 1280px centrada: el texto entra y sale por sus bordes con un
   desvanecimiento (máscara alfa: no es un degradado visual de color, el
   fondo carbón se conserva intacto) */
.trust-bar__window {
  max-width: var(--trust-window-max);
  margin-inline: auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--trust-fade), #000 calc(100% - var(--trust-fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--trust-fade), #000 calc(100% - var(--trust-fade)), transparent);
}

.trust-bar__track {
  --marquee-shift: -50%;          /* fallback sin JS (2 sets en el HTML) */
  --marquee-duration: 40s;        /* fallback sin JS */
  display: flex;
  width: max-content;             /* el track mide lo que mide su contenido */
  column-gap: var(--trust-gap);
  animation: trust-marquee var(--marquee-duration) linear infinite;
  will-change: transform;
}

/* Pausa: touch (trust-bar.js añade .is-paused mientras el dedo está abajo)… */
.trust-bar.is-paused .trust-bar__track { animation-play-state: paused; }

/* …y hover, solo donde existe un puntero real. En táctil el :hover queda
   "pegado" tras un tap y el marquee no reanudaría hasta tocar fuera. */
@media (hover: hover) and (pointer: fine) {
  .trust-bar:hover .trust-bar__track { animation-play-state: paused; }
}

.trust-bar__set {
  display: flex;
  flex-shrink: 0;
  column-gap: var(--trust-gap);
}

.trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--trust-icon-gap);
  font-size: var(--fs-body);
  line-height: 1.5;
  white-space: nowrap;
}

.trust-bar__icon {
  width: var(--trust-icon-size);
  height: var(--trust-icon-size);
  flex-shrink: 0;
}

@keyframes trust-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-shift)); }
}

/* Movimiento reducido: franja estática con el primer set visible */
@media (prefers-reduced-motion: reduce) {
  .trust-bar__track { animation: none; }
}

/* --- Problema + Solución -------------------------------------- */
/* Especificación: docs/componente-problema-solucion-noedelaflor.md
   (Figma 66:136). Solo en Inicio. Fondo crema (sección invertida).
   Mobile-first: una columna, la solución dentro de cada ítem. Desde 1024px
   dos columnas de 632px: acordeón + panel "Solución" que comparte fila del
   grid con el acordeón, por lo que estira siempre a su misma altura (la
   sincronización de alturas es pura CSS, también durante la transición). */
.ps {
  --ps-pad-y: clamp(var(--space-7), 13.3vw, 192px); /* 192px en Figma (desktop) */
  --ps-pad-x: 20px;
  --ps-content-max: 1280px;
  --ps-col: 632px;                 /* ancho de cada columna en Figma */
  --ps-col-gap: 16px;              /* 1280 − 2 × 632 */
  --ps-header-gap: 16px;           /* eyebrow → título → intro */
  --ps-header-to-grid: clamp(var(--space-6), 6.4vw, 92px);
  --ps-intro-max: 50rem;           /* medida de lectura de la intro centrada */
  --ps-item-gap: 62px;
  --ps-item-pad: 20px;
  --ps-item-radius: 10px;
  --ps-sign-gap: 25px;             /* signo > → frase */
  --ps-text-gap: 24px;             /* frase → párrafo; "Solución" → texto */
  --ps-open-bg: var(--color-carbon-10);

  background-color: var(--color-crema);
  color: var(--color-carbon);
  padding: var(--ps-pad-y) var(--ps-pad-x);
}

.ps__inner {
  max-width: var(--ps-content-max);
  margin-inline: auto;
}

/* Encabezado */
.ps__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ps-header-gap);
  text-align: center;
  margin-bottom: var(--ps-header-to-grid);
}

.ps__header > * { margin: 0; }

.ps__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 1rem;                 /* 16px */
  line-height: 1.5;
  text-transform: uppercase;
}

.ps__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.ps__intro {
  max-width: var(--ps-intro-max);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* Columnas */
.ps__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.ps__items {
  display: flex;
  flex-direction: column;
  gap: var(--ps-item-gap);
}

/* Ítem del acordeón */
.ps-item {
  border-radius: var(--ps-item-radius);
  padding: var(--ps-item-pad);
  background-color: transparent;
  transition: background-color var(--ease-base) var(--curve-standard);
}

.ps-item.is-open { background-color: var(--ps-open-bg); }

.ps-item__heading { margin: 0; font-size: inherit; }

.ps-item__trigger {
  display: flex;
  align-items: baseline;
  width: 100%;
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h3);
  line-height: var(--leading-tight);
  color: var(--color-carbon);
  cursor: pointer;
}

/* Signo ">": solo en estado cerrado. Colapsa (ancho + opacidad) al abrir para
   que la frase se desplace suavemente en vez de saltar; en hover pasa a oro
   (la señal universal de interacción — el texto no, por contraste sobre crema). */
.ps-item__sign {
  display: inline-block;
  overflow: hidden;
  max-width: 1em;
  margin-right: var(--ps-sign-gap);
  opacity: 1;
  transition: max-width var(--ease-base) var(--curve-standard),
              margin-right var(--ease-base) var(--curve-standard),
              opacity var(--ease-base) var(--curve-standard),
              color var(--ease-fast) var(--curve-standard);
}

.ps-item__trigger:hover .ps-item__sign,
.ps-item__trigger:focus-visible .ps-item__sign { color: var(--color-oro); }

.ps-item.is-open .ps-item__sign {
  max-width: 0;
  margin-right: 0;
  opacity: 0;
}

/* Cuerpo expandible: grid-template-rows 0fr → 1fr anima la altura sin
   conocerla (cada párrafo mide distinto). Cierre con --curve-in, apertura
   con --curve-out (estándares §3). */
.ps-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ease-slow) var(--curve-in);
}

.ps-item.is-open .ps-item__body {
  grid-template-rows: 1fr;
  transition-timing-function: var(--curve-out);
}

.ps-item__content {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--ease-slow) var(--curve-in);
}

.ps-item.is-open .ps-item__content {
  opacity: 1;
  transition-timing-function: var(--curve-out);
}

.ps-item__text {
  margin: 0;
  padding-top: var(--ps-text-gap);  /* dentro del overflow: se anima con el cuerpo */
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* Solución dentro del ítem (mobile): separada del párrafo por un borde fino */
.ps-item__solution {
  margin-top: var(--ps-text-gap);
  padding-top: var(--ps-text-gap);
  border-top: 1px solid var(--color-carbon-22);
}

.ps__label {
  margin: 0 0 var(--ps-text-gap);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h3);
  line-height: var(--leading-tight);
}

.ps__solution-text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-body);   /* Fraunces Regular */
  font-size: var(--fs-body);
  line-height: 1.5;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* Panel derecho: oculto en mobile */
.ps__panel { display: none; }

/* El texto del panel entra con la misma transición que el párrafo del ítem */
.ps__panel-text.is-updating {
  animation: ps-panel-in var(--ease-slow) var(--curve-out);
}

@keyframes ps-panel-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Desktop (≥ 1024px): dos columnas ----------------------------- */
@media (min-width: 64em) {
  .ps__grid {
    grid-template-columns: minmax(0, var(--ps-col)) minmax(0, var(--ps-col));
    column-gap: var(--ps-col-gap);
    justify-content: center;
    align-items: stretch;           /* el panel iguala la altura del acordeón */
  }

  .ps-item__solution { display: none; }   /* en desktop la solución vive en el panel */

  .ps__panel {
    display: block;
    padding: var(--ps-item-pad);
    border: 1px solid var(--color-carbon);
    border-radius: var(--ps-item-radius);
    background-color: var(--color-crema);
  }
}

/* Movimiento reducido: sin animación de altura ni de opacidad */
@media (prefers-reduced-motion: reduce) {
  .ps-item__body, .ps-item__content, .ps-item__sign, .ps-item { transition: none; }
  .ps__panel-text.is-updating { animation: none; }
}
/* --- Portafolio: galería con filtro por nicho ----------------- */
/* Especificación: docs/componente-portafolio-noedelaflor.md (Figma 79:367).
   Solo en Inicio. Fondo crema (continúa de Problema + Solución). Grid de
   cards 1 col (mobile) → 2 (≥768px) → 3 (≥1024px); filtro por chips, 100 %
   en cliente (portafolio.js). El filtrado anima con --ease-slow/--curve-out:
   las cards que salen se desvanecen en su sitio, las que entran aparecen y
   las que permanecen se deslizan a su nueva posición (FLIP). */
.pf {
  --pf-pad-y: clamp(var(--space-7), 13.3vw, 192px);  /* mismo ritmo que Problema + Solución */
  --pf-pad-x: 20px;
  --pf-content-max: 1280px;
  --pf-header-gap: 16px;
  --pf-header-to-filters: var(--space-6);   /* 48px */
  --pf-filters-to-grid: var(--space-6);     /* 48px */
  --pf-intro-max: 50rem;
  --pf-gap: 16px;                           /* entre cards y entre chips */
  --pf-chip-height: 28px;
  --pf-chip-pad-x: 12px;
  --pf-chip-radius: 5px;
  --pf-card-pad: 24px;
  --pf-card-radius: 10px;
  --pf-card-gap: 16px;                      /* imagen → texto y entre elementos del texto */
  --pf-img-radius: 5px;
  --pf-card-shadow: 0 4px 16px var(--color-marron-25);  /* drop-shadow de Figma, en marrón medio */

  background-color: var(--color-crema);
  color: var(--color-carbon);
  padding: var(--pf-pad-y) var(--pf-pad-x);
}

.pf__inner {
  max-width: var(--pf-content-max);
  margin-inline: auto;
}

/* Encabezado (mismo tratamiento que Problema + Solución) */
.pf__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pf-header-gap);
  text-align: center;
  margin-bottom: var(--pf-header-to-filters);
}

.pf__header > * { margin: 0; }

.pf__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 1rem;
  line-height: 1.5;
  text-transform: uppercase;
}

.pf__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.pf__intro {
  max-width: var(--pf-intro-max);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* Filtro: chips con wrap; solo uno activo (aria-pressed) */
.pf__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pf-gap);
  margin-bottom: var(--pf-filters-to-grid);
}

.pf-chip {
  display: inline-flex;
  align-items: center;
  height: var(--pf-chip-height);
  padding: 0 var(--pf-chip-pad-x);
  border: 1px solid var(--color-marron);
  border-radius: var(--pf-chip-radius);
  background-color: var(--color-crema);
  color: var(--color-carbon);
  font-size: 1rem;                 /* 16px */
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ease-base) var(--curve-standard),
              border-color var(--ease-base) var(--curve-standard),
              color var(--ease-base) var(--curve-standard);
}

/* Hover en inactivo: borde oro + relleno oro 10% (ficha de estilo §5) */
.pf-chip:hover {
  border-color: var(--color-oro);
  background-color: var(--color-oro-10);
}

/* Activo: máximo contraste sobre crema = carbón sólido */
.pf-chip[aria-pressed="true"] {
  border-color: var(--color-carbon);
  background-color: var(--color-carbon);
  color: var(--color-crema);
}

/* Grid de cards */
.pf__grid {
  position: relative;              /* las cards salientes se fijan aquí mientras se desvanecen */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pf-gap);
}

.pf-card {
  transition: transform var(--ease-slow) var(--curve-out),
              opacity var(--ease-slow) var(--curve-out);
}

/* Estados del filtrado (portafolio.js) */
.pf-card.is-leaving {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  transition-timing-function: var(--curve-in);
}

.pf-card.is-entering {
  opacity: 0;
  transform: scale(0.96);
  transition: none;
}

.pf-card__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--pf-card-gap);
  padding: var(--pf-card-pad);
  border: 1px solid var(--color-carbon);
  border-radius: var(--pf-card-radius);
  background-color: var(--color-crema);
  box-shadow: var(--pf-card-shadow);
}

.pf-card__img {
  width: 100%;
  aspect-ratio: 832 / 520;         /* 1.6:1 */
  object-fit: cover;
  border-radius: var(--pf-img-radius);
}

.pf-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--pf-card-gap);
}

.pf-card__body > * { margin: 0; }

.pf-card__meta {
  font-size: var(--fs-label);      /* 14px */
  line-height: 1.5;
  text-transform: uppercase;
}

.pf-card__name {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h3);         /* 24px */
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.pf-card__desc {
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* "Ver caso de éxito →": link en copy sobre crema — texto carbón, subrayado
   oro siempre visible; en hover el subrayado engrosa (1 → 2px) por transform. */
.pf-card__link {
  position: relative;
  align-self: flex-end;
  margin-top: auto;                /* siempre al pie de la card */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-carbon);
  text-decoration: none;
}

.pf-card__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-oro);
  transform-origin: bottom;
  transition: transform var(--ease-base) var(--curve-standard);
}

.pf-card__link:hover::after { transform: scaleY(2); }

.pf-card__arrow {
  width: 24px;
  height: 24px;
  transition: transform var(--ease-base) var(--curve-spring);
}

.pf-card__link:hover .pf-card__arrow { transform: translateX(4px); }

/* --- Tablet (≥ 768px): 2 columnas ------------------------------ */
@media (min-width: 48em) {
  .pf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Desktop (≥ 1024px): 3 columnas ---------------------------- */
@media (min-width: 64em) {
  .pf__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Movimiento reducido: filtrado sin animación */
@media (prefers-reduced-motion: reduce) {
  .pf-card, .pf-chip, .pf-card__link::after, .pf-card__arrow { transition: none; }
}
/* --- Testimonios: marquee de cards (fondo marrón) ------------- */
/* Especificación: docs/componente-testimonios-noedelaflor.md (Figma 85:3).
   Solo en Inicio, debajo del Portafolio. Misma mecánica que el Trust Bar:
   el HTML trae el set de 10 cards duplicado, el keyframe desplaza exactamente
   un set y testimonios.js fija --marquee-shift (px) y --marquee-duration a
   partir del ancho real del set y una velocidad fija en px/s (y añade copias
   si la ventana de 1280px es más ancha que un set). Diferencias:
   - Pausa al posar el cursor sobre cualquier card (no sobre el hueco entre
     cards): :has() en desktop, clase .is-paused vía JS en touch.
   - Hover/touch individual: la card crece (scale) y su sombra pasa a oro con
     --curve-spring (leve rebote, mismo token que los CTAs).
   Sin JS: 2 sets y desplazamiento de -50% del track = un set. */
.tm {
  --tm-pad-y: clamp(var(--space-7), 13.3vw, 192px);  /* mismo ritmo que Portafolio */
  --tm-pad-x: 20px;
  --tm-content-max: 1280px;        /* encabezado y ventana visible del marquee */
  --tm-header-gap: 18px;           /* eyebrow → título */
  --tm-header-to-marquee: 62px;
  --tm-fade: 20px;                 /* desvanecimiento en los bordes de la ventana */
  --tm-bleed: 40px;                /* aire vertical dentro de la ventana para que el scale
                                      y la sombra del hover no se recorten (overflow hidden) */
  --tm-gap: 16px;                  /* entre cards: 4 × 308 + 3 × 16 = 1280 */
  --tm-card-width: 308px;
  --tm-card-pad: 30px;
  --tm-card-radius: 10px;
  --tm-card-gap: 16px;             /* entre bloques de la card */
  --tm-cat-pad-bottom: 12px;       /* categoría → línea dorada */
  --tm-author-gap: 4px;            /* nombre → negocio */
  --tm-avatar-size: 48px;
  --tm-card-shadow: 0 4px 32px rgba(36, 24, 19, 0.15);      /* carbón en baja opacidad */
  --tm-card-shadow-hover: 0 4px 32px var(--color-oro-50);   /* oro, más pronunciada */
  --tm-card-scale-hover: 1.03;
  --tm-card-ms: var(--ease-base);   /* 480ms: el token base ya es la duración validada */

  background-color: var(--color-marron);
  color: var(--color-crema);
  padding-block: var(--tm-pad-y);
}

.tm__inner {
  max-width: var(--tm-content-max);
  margin-inline: auto;
  padding-inline: var(--tm-pad-x);
}

/* Encabezado (mismo tratamiento que Problema + Solución y Portafolio) */
.tm__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tm-header-gap);
  text-align: center;
  /* El bleed de la ventana ya aporta parte del aire hasta las cards */
  margin-bottom: calc(var(--tm-header-to-marquee) - var(--tm-bleed));
}

.tm__header > * { margin: 0; }

.tm__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 1rem;                 /* 16px */
  line-height: 1.5;
  text-transform: uppercase;
}

.tm__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* Ventana de 1280px centrada: las cards entran y salen por sus bordes con un
   desvanecimiento (máscara alfa, el fondo marrón se conserva intacto). El
   padding vertical (bleed) da espacio al scale y a la sombra del hover. */
.tm__window {
  max-width: var(--tm-content-max);
  margin-inline: auto;
  padding-block: var(--tm-bleed);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--tm-fade), #000 calc(100% - var(--tm-fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--tm-fade), #000 calc(100% - var(--tm-fade)), transparent);
}

.tm__track {
  --marquee-shift: -50%;           /* fallback sin JS (2 sets en el HTML) */
  --marquee-duration: 120s;        /* fallback sin JS */
  display: flex;
  width: max-content;              /* el track mide lo que mide su contenido */
  column-gap: var(--tm-gap);
  animation: tm-marquee var(--marquee-duration) linear infinite;
  will-change: transform;
}

/* Pausa: touch (testimonios.js añade .is-paused mientras el dedo está sobre una card)… */
.tm.is-paused .tm__track { animation-play-state: paused; }

/* …y hover sobre cualquier card, solo donde existe un puntero real (en táctil
   el :hover queda "pegado" tras un tap y el marquee no reanudaría). */
@media (hover: hover) and (pointer: fine) {
  .tm__track:has(.tm-card:hover) { animation-play-state: paused; }
}

.tm__set {
  display: flex;
  flex-shrink: 0;
  column-gap: var(--tm-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Card: ancho fijo; todas las cards de una fila comparten la altura de la
   más alta (align-items: stretch del flex) y el bloque de autor queda
   alineado al fondo. */
.tm-card {
  flex-shrink: 0;
  width: var(--tm-card-width);
  display: flex;
}

.tm-card__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--tm-card-gap);
  padding: var(--tm-card-pad);
  border-radius: var(--tm-card-radius);
  background-color: var(--color-crema);
  color: var(--color-carbon);
  text-align: center;
  box-shadow: var(--tm-card-shadow);
  /* Scale con rebote (spring); la sombra con curva estándar para que no "rebote" */
  transition: transform var(--tm-card-ms) var(--curve-spring),
              box-shadow var(--tm-card-ms) var(--curve-standard);
}

/* Hover (puntero) / touch activo (.is-active vía testimonios.js): la card
   se "eleva" con acento de marca y un leve rebote */
.tm-card.is-active .tm-card__inner {
  transform: scale(var(--tm-card-scale-hover));
  box-shadow: var(--tm-card-shadow-hover);
}

@media (hover: hover) and (pointer: fine) {
  .tm-card:hover .tm-card__inner {
    transform: scale(var(--tm-card-scale-hover));
    box-shadow: var(--tm-card-shadow-hover);
  }
}

.tm-card__inner > * { margin: 0; }

.tm-card__cat {
  padding-bottom: var(--tm-cat-pad-bottom);
  border-bottom: 1px solid var(--color-oro);
  font-weight: var(--weight-bold);
  font-size: 1.25rem;              /* 20px: la card tiene ancho fijo, no necesita fluidez */
  line-height: 1.5;
  text-transform: uppercase;
}

.tm-card__quote {
  flex: 1;                         /* empuja el bloque de autor al fondo de la card */
  font-size: var(--fs-body);       /* 18px */
  line-height: 1.5;
}

.tm-card__quote > p { margin: 0; }

.tm-card__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tm-author-gap);
}

.tm-card__author > * { margin: 0; }

.tm-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tm-avatar-size);
  height: var(--tm-avatar-size);
  margin-bottom: calc(var(--tm-card-gap) - var(--tm-author-gap));  /* avatar → nombre = 16px */
  border-radius: 50%;
  background-color: var(--color-marron);
  color: var(--color-crema);
  font-size: var(--fs-body);       /* 18px */
  line-height: 1;
}

.tm-card__name {
  font-weight: var(--weight-bold);
  font-size: var(--fs-label);      /* 14px */
  line-height: 1.5;
}

.tm-card__role {
  font-size: var(--fs-label);      /* 14px */
  line-height: 1.5;
}

/* De derecha a izquierda, igual que el Trust Bar */
@keyframes tm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-shift)); }
}

/* Movimiento reducido: fila estática con el primer set visible, sin scale en hover */
@media (prefers-reduced-motion: reduce) {
  .tm__track { animation: none; }
  .tm-card__inner { transition: none; }
  .tm-card:hover .tm-card__inner,
  .tm-card.is-active .tm-card__inner { transform: none; }
}

/* --- Precios: 2 paquetes (fondo carbón) ------------------------ */
/* Especificación: docs/componente-precios-noedelaflor.md (Figma 85:439).
   Solo en Inicio, debajo de Testimonios. Dos cards alineadas arriba
   (align-items: start): la principal lleva pestaña oro y sombra dorada
   siempre visible; la secundaria lleva una pestaña fantasma (mismo alto,
   texto y borde transparentes) para quedar a la misma altura visual sin
   competir. Mobile: apiladas, sin pestaña fantasma. Hover de card = mismo
   patrón que Testimonios (scale + sombra oro, --curve-spring). Hover de
   botón = flash diagonal (::after con gradiente recortado por overflow)
   + elevación y scale con --curve-spring.
   Fila a partir de 1092px: 500 + 32 + 519 + 2 × 20 de padding = 1091. */
.pr {
  --pr-pad-y: clamp(var(--space-7), 13.3vw, 192px);  /* mismo ritmo que Portafolio/Testimonios */
  --pr-pad-x: 20px;
  --pr-content-max: 1280px;
  --pr-header-gap: 18px;             /* eyebrow → título → intro */
  --pr-intro-max: 50rem;             /* misma medida de lectura que las intros de Portafolio y P+S */
  --pr-header-to-cards: clamp(var(--space-6), 6.4vw, 92px);
  --pr-cards-gap: 32px;              /* entre cards (fila y apiladas) */
  --pr-cards-to-more: var(--space-6);  /* cards → "¿Necesitas algo más?" */
  --pr-card-primary-width: 500px;
  --pr-card-secondary-width: 519px;  /* Figma: incluye el espacio de la pestaña fantasma */
  --pr-card-radius: 10px;
  --pr-card-pad: 32px;
  --pr-card-gap: 16px;               /* entre bloques del cuerpo */
  --pr-tab-pad-y: 10px;
  --pr-list-gap: 10px;               /* entre características */
  --pr-check-gap: 8px;               /* check → texto */
  --pr-check-size: 16px;
  --pr-card-shadow: 0 4px 16px rgba(224, 168, 46, 0.75);   /* principal en reposo */
  --pr-card-shadow-hover: 0 4px 32px var(--color-oro-50);  /* ambas en hover (Testimonios) */
  --pr-card-scale-hover: 1.03;
  --pr-card-ms: var(--ease-base);   /* 480ms: mismo criterio que Testimonios */
  --pr-btn-pad-y: 18px;              /* mismo que los CTAs del Hero */
  --pr-btn-pad-x: 48px;
  --pr-btn-radius: 10px;
  --pr-btn-gap: 8px;                 /* texto → flecha */
  --pr-btn-lift: -2px;               /* elevación en hover */
  --pr-btn-scale-hover: 1.03;
  --pr-flash-duration: 600ms;        /* una sola pasada, no usa los tokens de estado */
  --pr-flash-width: 40%;             /* ancho de la banda de brillo */

  background-color: var(--color-carbon);
  color: var(--color-crema);
  padding: var(--pr-pad-y) var(--pr-pad-x);
}

.pr__inner {
  max-width: var(--pr-content-max);
  margin-inline: auto;
}

/* Encabezado (mismo tratamiento que Testimonios) */
.pr__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pr-header-gap);
  text-align: center;
  margin-bottom: var(--pr-header-to-cards);
}

.pr__header > * { margin: 0; }

.pr__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 1rem;                   /* 16px */
  line-height: 1.5;
  text-transform: uppercase;
}

.pr__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* Intro bajo el título: mismo tratamiento que .pf__intro y .ps__intro */
.pr__intro {
  max-width: var(--pr-intro-max);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* Cards: apiladas (mobile) → fila centrada alineada arriba (≥ 1092px) */
.pr__cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pr-cards-gap);
  margin-bottom: var(--pr-cards-to-more);
}

.pr-card {
  width: 100%;
  /* Scale con rebote (spring); la sombra con curva estándar para que no "rebote" */
  transition: transform var(--pr-card-ms) var(--curve-spring),
              box-shadow var(--pr-card-ms) var(--curve-standard);
}

.pr-card--primary {
  max-width: var(--pr-card-primary-width);
  border-radius: var(--pr-card-radius);
  box-shadow: var(--pr-card-shadow);   /* protagonismo constante, no solo en hover */
}

/* Apilada, sin pestaña fantasma, la secundaria mide lo mismo que la principal;
   los 519px del Figma solo aplican en fila */
.pr-card--secondary { max-width: var(--pr-card-primary-width); }

/* Pestaña "El más popular": oro sólido, solo esquinas superiores. El borde
   del mismo color no se ve, pero mantiene el alto idéntico al de la pestaña
   fantasma (borde transparente) para que las dos cards midan lo mismo. */
.pr-card__tab {
  margin: 0;
  padding: var(--pr-tab-pad-y);
  border: 1px solid var(--color-oro);
  border-bottom: 0;
  border-radius: var(--pr-card-radius) var(--pr-card-radius) 0 0;
  background-color: var(--color-oro);
  color: var(--color-carbon);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h3);           /* 24px */
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

/* Pestaña fantasma: ocupa el mismo espacio, no se ve. Oculta en mobile. */
.pr-card__tab--ghost {
  display: none;
  border-color: transparent;
  background-color: transparent;
  color: rgba(36, 24, 19, 0);
  user-select: none;
}

/* Cuerpo: borde oro; en la principal sin esquinas superiores (las pone la pestaña) */
.pr-card__box {
  display: flex;
  flex-direction: column;
  gap: var(--pr-card-gap);
  padding: var(--pr-card-pad);
  border: 1px solid var(--color-oro);
  border-radius: var(--pr-card-radius);
  background-color: var(--color-carbon);
  transition: box-shadow var(--pr-card-ms) var(--curve-standard);
}

.pr-card--primary .pr-card__box {
  border-top: 0;
  border-radius: 0 0 var(--pr-card-radius) var(--pr-card-radius);
}

.pr-card__box > * { margin: 0; }

/* Hover de card (puntero real): scale + sombra oro, mismo patrón que Testimonios.
   En la secundaria la sombra va en el cuerpo (la pestaña fantasma no debe proyectarla). */
@media (hover: hover) and (pointer: fine) {
  .pr-card:hover { transform: scale(var(--pr-card-scale-hover)); }
  .pr-card--primary:hover { box-shadow: var(--pr-card-shadow-hover); }
  .pr-card--secondary:hover .pr-card__box { box-shadow: var(--pr-card-shadow-hover); }
}

/* "Recomendado para…" y características: check oro 16px + texto 12px */
.pr-card__hint,
.pr-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--pr-check-gap);
  font-size: var(--fs-caption);      /* 12px */
  line-height: 1.5;
  text-align: left;
}

.pr-check {
  width: var(--pr-check-size);
  height: var(--pr-check-size);
  flex-shrink: 0;
  margin-top: 1px;                   /* centra el check con la primera línea de 12px */
}

.pr-card__name {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h3);           /* 24px */
  line-height: 1.3;
  text-transform: uppercase;
}

/* La cifra va en oro, mismo token que .ms-card__amount de Microservicios
   (sobre carbón da 8.07:1, AAA). La nota del IVA se queda en crema. */
.pr-card__price {
  font-weight: var(--weight-bold);
  font-size: var(--fs-h1);           /* 43px */
  line-height: 1.1;
  color: var(--color-oro);
}

/* Separador: línea oro que se desvanece en los extremos (sustituye al asset
   rotado del Figma; el fondo carbón se conserva, solo varía la opacidad) */
.pr-card__rule {
  width: 100%;
  height: 1px;
  border: 0;
  background: linear-gradient(to right, transparent, var(--color-oro) 20%, var(--color-oro) 80%, transparent);
}

.pr-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--pr-list-gap);
  padding: 0;
  list-style: none;
}

/* Botones: mismo tamaño que los CTAs del Hero, ancho del texto, centrados
   (el cuerpo es flex column: sin align-self se estirarían a todo el ancho).
   Elevación + scale con rebote (--curve-spring); el flash diagonal vive en
   ::after y se recorta con overflow: hidden respetando el border-radius. */
.pr-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;                /* el ::after no se sale del contexto del botón */
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pr-btn-gap);
  margin-top: calc(var(--pr-card-gap) / 2);
  padding: var(--pr-btn-pad-y) var(--pr-btn-pad-x);
  border: 1px solid var(--color-oro);
  border-radius: var(--pr-btn-radius);
  font-size: var(--fs-cta);
  line-height: 1.3;
  text-decoration: none;
  transition: transform var(--ease-base) var(--curve-spring),
              background-color var(--ease-base) var(--curve-standard);
}

.pr-btn--primary {
  background-color: var(--color-oro);
  color: var(--color-carbon);
}

.pr-btn--secondary {
  background-color: transparent;
  color: var(--color-crema);
}

.pr-btn__arrow {
  width: 24px;
  height: 24px;
  transition: transform var(--ease-base) var(--curve-spring);
}

/* Flash diagonal: banda de brillo fuera del botón por la izquierda */
.pr-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pr-flash-width);
  background: linear-gradient(to right, rgba(245, 237, 220, 0), rgba(245, 237, 220, 0.45), rgba(245, 237, 220, 0));
  transform: translateX(-250%) skewX(-20deg);
  pointer-events: none;
  z-index: -1;                       /* debajo del texto, encima del fondo (isolation) */
}

.pr-btn--secondary::after {
  background: linear-gradient(to right, rgba(224, 168, 46, 0), rgba(224, 168, 46, 0.35), rgba(224, 168, 46, 0));
}

@media (hover: hover) and (pointer: fine) {
  .pr-btn:hover {
    transform: translateY(var(--pr-btn-lift)) scale(var(--pr-btn-scale-hover));
  }
  .pr-btn--secondary:hover { background-color: var(--color-oro-10); }
  .pr-btn:hover .pr-btn__arrow { transform: translateX(4px); }

  /* El flash cruza una sola vez: solo transiciona al entrar; al salir vuelve
     a su sitio sin animación para que no "regrese" visiblemente */
  .pr-btn:hover::after {
    transform: translateX(350%) skewX(-20deg);
    transition: transform var(--pr-flash-duration) var(--curve-standard);
  }
}

/* Touch: sin hover persistente, el botón responde mientras se mantiene presionado */
.pr-btn:active { transform: scale(0.98); transition-duration: var(--ease-fast); }

/* Cierre: "¿Necesitas algo más? Conoce mis microservicios →" — link-en-copy sobre
   carbón (oro), subrayado oro siempre visible que engrosa en hover (mismo
   mecanismo ::after que el link de las cards del Portafolio). El link
   (.pr__more-link) vive en components.css: lo comparte con Microservicios. */
.pr__more {
  margin: 0;
  font-weight: var(--weight-bold);
  font-size: var(--fs-body);         /* 18px */
  line-height: 1.5;
  text-align: center;
}

/* --- Fila (≥ 1092px): las dos cards caben una junto a otra --------- */
@media (min-width: 68.25em) {
  .pr__cards {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;         /* no se estiran: la pestaña fantasma iguala el alto */
  }

  .pr-card { width: auto; flex: 0 0 auto; }
  .pr-card--primary { width: var(--pr-card-primary-width); }
  .pr-card--secondary { width: var(--pr-card-secondary-width); }

  .pr-card__tab--ghost { display: block; }
}

/* Movimiento reducido: sin scale ni flash */
@media (prefers-reduced-motion: reduce) {
  .pr-card, .pr-card__box, .pr-btn, .pr-btn__arrow, .pr-btn::after { transition: none; }
  .pr-card:hover, .pr-btn:hover, .pr-btn:hover .pr-btn__arrow { transform: none; }
  .pr-btn:hover::after { transform: translateX(-250%) skewX(-20deg); }
}

/* --- CTA final -------------------------------------------------- */