@charset "UTF-8";
/* CSS Document */

/* ==========================================================
   DANI BOONE · PORTRAIT PRO
   Landing visual
   ----------------------------------------------------------
   Este archivo contiene únicamente estilos específicos
   de Portrait Pro.

   No contiene lógica de Commerce / Stripe / D1.
========================================================== */


/* ==========================================================
   01. TOKENS
========================================================== */

:root {
  --pp-bg: #0c0c0b;
  --pp-bg-soft: #11110f;
  --pp-bg-elevated: #171613;
  --pp-bg-warm: #1a1713;

  --pp-text: #f1ede5;
  --pp-text-soft: #c6beb2;
  --pp-text-muted: #8f887f;

  --pp-line: rgba(255, 255, 255, 0.10);
  --pp-line-soft: rgba(255, 255, 255, 0.06);

  --pp-accent: #b98a5d;
  --pp-accent-light: #d0a476;
  --pp-accent-dark: #86613f;

  --pp-accent-soft: rgba(185, 138, 93, 0.13);
  --pp-accent-glow: rgba(185, 138, 93, 0.20);

  --pp-success: #91ad87;
  --pp-error: #cf8580;

  --pp-serif:
    "Cormorant Garamond",
    "Times New Roman",
    serif;

  --pp-sans:
    "Inter",
    "Helvetica Neue",
    Arial,
    sans-serif;

  /* Ancho principal de Portrait Pro */
  --pp-container: 1360px;

  --pp-radius-sm: 8px;
  --pp-radius: 16px;
  --pp-radius-lg: 26px;

  --pp-shadow:
    0 30px 80px rgba(0, 0, 0, 0.32);

  --pp-transition:
    260ms cubic-bezier(.2, .7, .2, 1);
}


/* ==========================================================
   02. BASE
========================================================== */

html {
  scroll-behavior: smooth;
}

.portrait-pro-page main {
  overflow-x: hidden;

  background:
    var(--pp-bg);

  color:
    var(--pp-text);

  font-family:
    var(--pp-sans);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.portrait-pro-page *,
.portrait-pro-page *::before,
.portrait-pro-page *::after {
  box-sizing: border-box;
}

.portrait-pro-page img {
  display: block;
  max-width: 100%;
}

.portrait-pro-page button,
.portrait-pro-page input,
.portrait-pro-page select {
  font: inherit;
}

.portrait-pro-page button,
.portrait-pro-page a {
  -webkit-tap-highlight-color: transparent;
}

.pp-container {
  width:
    min(
      calc(100% - 48px),
      var(--pp-container)
    );

  margin-inline: auto;
}

.pp-visually-hidden {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip:
    rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;
}


/* ==========================================================
   03. TYPOGRAPHY
========================================================== */

.pp-eyebrow {
  margin: 0 0 18px;

  color:
    var(--pp-accent-light);

  font-size: 0.72rem;
  font-weight: 600;

  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.pp-section-heading {
  max-width: 760px;

  margin-bottom: 64px;
}

.pp-section-heading--center {
  margin-inline: auto;

  text-align: center;
}

.pp-section-heading h2,
.pp-feature__copy h2,
.pp-philosophy h2,
.pp-purchase__product h2,
.pp-story h2 {
  margin: 0;

  color:
    var(--pp-text);

  font-family:
    var(--pp-serif);

  font-size:
    clamp(
      3rem,
      6vw,
      5.8rem
    );

  font-weight: 400;

  line-height: 0.91;
  letter-spacing: -0.045em;
}

.pp-section-heading h2 span,
.pp-philosophy h2 span,
.pp-story h2 span {
  display: block;

  color:
    var(--pp-accent-light);

  font-style: italic;
  font-weight: 300;
}

.pp-section-heading > p:last-child,
.pp-feature__lead,
.pp-philosophy__statement > p:last-child,
.pp-story__content > div > p {
  max-width: 680px;

  margin-top: 30px;

  color:
    var(--pp-text-soft);

  font-size:
    clamp(
      1rem,
      1.3vw,
      1.12rem
    );

  line-height: 1.8;
}


/* ==========================================================
   04. BUTTONS
========================================================== */

.pp-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 52px;

  padding:
    0 28px;

  border:
    1px solid transparent;

  border-radius:
    999px;

  text-decoration: none;

  font-size: 0.72rem;
  font-weight: 650;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    transform var(--pp-transition),
    background var(--pp-transition),
    border-color var(--pp-transition),
    color var(--pp-transition),
    box-shadow var(--pp-transition);
}

.pp-button:hover {
  transform:
    translateY(-2px);
}

.pp-button--primary {
  background:
    var(--pp-accent);

  color:
    #0c0b09;

  box-shadow:
    0 12px 34px rgba(185, 138, 93, 0.15);
}

.pp-button--primary:hover {
  background:
    var(--pp-accent-light);

  box-shadow:
    0 16px 42px rgba(185, 138, 93, 0.22);
}

.pp-button--ghost {
  border-color:
    rgba(255, 255, 255, 0.18);

  color:
    var(--pp-text);

  background:
    rgba(255, 255, 255, 0.02);
}

.pp-button--ghost:hover {
  border-color:
    rgba(255, 255, 255, 0.35);

  background:
    rgba(255, 255, 255, 0.05);
}


/* ==========================================================
   05. HERO
========================================================== */

.pp-hero {
  position: relative;

  min-height:
    min(900px, 100svh);

  display: flex;

  align-items: center;

  padding:
    150px 0 100px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 72% 46%,
      rgba(171, 125, 79, 0.11),
      transparent 34%
    ),
    radial-gradient(
      circle at 18% 20%,
      rgba(255, 255, 255, 0.025),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #0a0a09 0%,
      #0e0e0c 58%,
      #12100d 100%
    );
}

.pp-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.42;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.018) 50%,
      transparent 100%
    );
}

.pp-hero__grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(420px, 1.1fr);

  gap:
    clamp(40px, 7vw, 110px);

  align-items: center;
}

.pp-hero__content {
  max-width: 610px;
}

.pp-hero__title {
  margin: 0;

  color:
    var(--pp-text);

  font-family:
    var(--pp-serif);

  font-size:
    clamp(
      5rem,
      9vw,
      9rem
    );

  font-weight: 300;

  line-height: 0.72;

  letter-spacing: -0.07em;
}

.pp-hero__title span {
  display: block;

  margin-top: 0.18em;

  color:
    var(--pp-accent-light);

  font-style: italic;
  font-weight: 300;
}

.pp-hero__descriptor {
  max-width: 390px;

  margin:
    32px 0 0;

  color:
    var(--pp-text-muted);

  font-size: 0.78rem;
  font-weight: 500;

  line-height: 1.65;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pp-hero__statement {
  margin-top: 48px;

  font-family:
    var(--pp-serif);

  font-size:
    clamp(
      2.1rem,
      3.5vw,
      3.8rem
    );

  line-height: 1;
}

.pp-hero__statement strong {
  display: block;

  font-weight: 500;
}

.pp-hero__statement span {
  display: block;

  margin-top: 4px;

  color:
    var(--pp-accent-light);

  font-style: italic;
  font-weight: 300;
}

.pp-hero__description {
  max-width: 580px;

  margin:
    28px 0 0;

  color:
    var(--pp-text-soft);

  font-size: 1.02rem;

  line-height: 1.8;
}

.pp-hero__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 34px;
}

.pp-hero__meta {
  display: flex;

  flex-wrap: wrap;

  gap:
    12px 28px;

  padding: 0;

  margin:
    38px 0 0;

  list-style: none;
}

.pp-hero__meta li {
  position: relative;

  max-width: 180px;

  padding-left: 14px;

  color:
    var(--pp-text-muted);

  font-size: 0.68rem;

  line-height: 1.55;
}

.pp-hero__meta li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.55em;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--pp-accent);
}


/* ==========================================================
   06. HERO PRODUCT
========================================================== */

.pp-hero__visual {
  position: relative;

  min-height: 650px;

  display: flex;

  align-items: center;
  justify-content: center;
}

.pp-hero__glow {
  position: absolute;

  width: 70%;
  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      var(--pp-accent-glow),
      transparent 68%
    );

  filter: blur(24px);

  opacity: 0.72;
}

.pp-hero__product {
  position: relative;

  z-index: 2;

  width:
    min(100%, 620px);

  transform:
    perspective(1500px)
    rotateY(-5deg)
    rotateX(1deg);

  filter:
    drop-shadow(
      0 36px 60px rgba(0, 0, 0, 0.48)
    );

  transition:
    transform 600ms cubic-bezier(.2, .7, .2, 1);
}

.pp-hero__visual:hover
.pp-hero__product {
  transform:
    perspective(1500px)
    rotateY(-2deg)
    translateY(-5px);
}

.pp-hero__product img {
  width: 100%;

  height: auto;

  object-fit: contain;
}

.pp-hero__real-product {
  position: absolute;

  right: 4%;
  bottom: 5%;

  z-index: 3;

  margin: 0;

  color:
    var(--pp-text-muted);

  font-size: 0.63rem;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pp-scroll-cue {
  position: absolute;

  left: 50%;
  bottom: 26px;

  z-index: 4;

  width: 28px;
  height: 44px;

  transform:
    translateX(-50%);

  border:
    1px solid rgba(255, 255, 255, 0.2);

  border-radius: 999px;
}

.pp-scroll-cue span {
  position: absolute;

  left: 50%;
  top: 10px;

  width: 3px;
  height: 7px;

  transform:
    translateX(-50%);

  border-radius: 999px;

  background:
    var(--pp-accent-light);

  animation:
    pp-scroll 1.8s ease-in-out infinite;
}

@keyframes pp-scroll {
  0% {
    transform:
      translate(-50%, 0);

    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    transform:
      translate(-50%, 14px);

    opacity: 0;
  }
}


/* ==========================================================
   07. FEATURE SECTIONS
========================================================== */

.pp-feature {
  padding:
    clamp(64px, 7vw, 100px)
    0;
}

.pp-feature--skin {
  background:
    linear-gradient(
      180deg,
      #10100e,
      #0b0b0a
    );
}

.pp-feature--background {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #17130f 0%,
      #0e0d0b 48%,
      #090909 100%
    );
}

.pp-feature--background::before {
  content: "";

  position: absolute;

  width: 560px;
  height: 560px;

  left: -280px;
  top: 15%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(185, 138, 93, 0.12),
      transparent 70%
    );
}

.pp-feature__split {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(280px, 0.72fr)
    minmax(0, 1.28fr);

  gap:
    clamp(60px, 9vw, 130px);

  align-items: center;
}

.pp-feature__copy {
  max-width: 480px;
}

.pp-feature__copy h2 {
  color:
    var(--pp-accent-light);

  font-style: italic;
}


/* ==========================================================
   08. BEFORE / AFTER
========================================================== */

.pp-before-after {
  width: 100%;

  max-width: 1040px;

  margin-inline: auto;
}

.pp-before-after--vertical {
  max-width: 720px;
}

.pp-before-after__viewport {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.10);

  border-radius:
    var(--pp-radius-lg);

  background:
    #080808;

  box-shadow:
    var(--pp-shadow);

  isolation: isolate;
}

.pp-before-after--vertical
.pp-before-after__viewport {
  aspect-ratio: 4 / 5;
}

.pp-before-after__image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;

  user-select: none;

  pointer-events: none;
}

.pp-before-after__before {
  position: absolute;

  inset:
    0 auto 0 0;

  z-index: 2;

  width: 50%;

  overflow: hidden;
}

.pp-before-after__before
.pp-before-after__image {
  width:
    var(--pp-ba-width, 1040px);
}

.pp-before-after__label {
  position: absolute;

  z-index: 5;

  top: 20px;

  padding:
    7px 12px;

  border:
    1px solid rgba(255, 255, 255, 0.15);

  border-radius:
    999px;

  background:
    rgba(10, 10, 10, 0.5);

  color:
    rgba(255, 255, 255, 0.78);

  backdrop-filter:
    blur(10px);

  font-size: 0.58rem;
  font-weight: 600;

  letter-spacing: 0.15em;
}

.pp-before-after__label--before {
  left: 20px;
}

.pp-before-after__label--after {
  right: 20px;
}

.pp-before-after__divider {
  position: absolute;

  z-index: 4;

  left: 50%;
  top: 0;

  width: 1px;
  height: 100%;

  transform:
    translateX(-50%);

  background:
    rgba(255, 255, 255, 0.85);

  pointer-events: none;
}

.pp-before-after__handle {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 54px;
  height: 54px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  transform:
    translate(-50%, -50%);

  border:
    1px solid rgba(255, 255, 255, 0.75);

  border-radius: 50%;

  background:
    rgba(14, 13, 11, 0.78);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.28);

  backdrop-filter:
    blur(12px);

  color:
    #fff;

  font-family:
    var(--pp-serif);

  font-size: 1.25rem;
}

.pp-before-after__range {
  position: absolute;

  z-index: 8;

  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;

  opacity: 0;

  cursor: ew-resize;
}


/* ==========================================================
   09. FEATURE POINTS
========================================================== */

.pp-feature-points {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  margin-top: 60px;

  border-top:
    1px solid var(--pp-line);
}

.pp-feature-points article {
  min-height: 210px;

  padding:
    32px 30px;

  border-right:
    1px solid var(--pp-line);
}

.pp-feature-points article:last-child {
  border-right: 0;
}

.pp-feature-points article > span,
.pp-value-grid article > strong {
  color:
    var(--pp-accent);

  font-family:
    var(--pp-serif);

  font-size: 0.95rem;
  font-weight: 400;
}

.pp-feature-points h3,
.pp-value-grid h3 {
  margin:
    38px 0 12px;

  font-family:
    var(--pp-serif);

  font-size: 1.55rem;
  font-weight: 400;
}

.pp-feature-points p,
.pp-value-grid p {
  margin: 0;

  color:
    var(--pp-text-muted);

  font-size: 0.86rem;

  line-height: 1.7;
}


/* ==========================================================
   10. CHECK LIST
========================================================== */

.pp-check-list {
  padding: 0;

  margin:
    40px 0 0;

  list-style: none;
}

.pp-check-list li {
  position: relative;

  padding:
    15px 0 15px 28px;

  border-bottom:
    1px solid var(--pp-line-soft);

  color:
    var(--pp-text-soft);

  font-size: 0.9rem;

  line-height: 1.5;
}

.pp-check-list li::before {
  content: "✓";

  position: absolute;

  left: 0;

  color:
    var(--pp-accent-light);
}


/* ==========================================================
   11. WORKFLOW / CATEGORIES
========================================================== */

.pp-workflow {
  padding:
    clamp(110px, 13vw, 180px)
    0;

  background:
    #0c0c0b;
}

.pp-category-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 14px;
}

.pp-category-card {
  position: relative;

  min-height: 390px;

  overflow: hidden;

  border:
    1px solid var(--pp-line-soft);

  border-radius:
    var(--pp-radius);

  background:
    var(--pp-bg-soft);

  transition:
    border-color var(--pp-transition);
}

.pp-category-card:hover {
  border-color:
    rgba(185, 138, 93, 0.35);
}

.pp-category-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background:
    #161513;
}

.pp-category-card__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    contrast(1.02);
}

.pp-category-card > div:last-child {
  padding:
    24px 24px 28px;
}

.pp-category-card span {
  color:
    var(--pp-accent);

  font-family:
    var(--pp-serif);

  font-size: 0.8rem;
}

.pp-category-card h3 {
  margin:
    14px 0 9px;

  font-family:
    var(--pp-serif);

  font-size: 1.4rem;
  font-weight: 400;
}

.pp-category-card p {
  margin: 0;

  color:
    var(--pp-text-muted);

  font-size: 0.8rem;

  line-height: 1.6;
}


/* ==========================================================
   12. PHILOSOPHY
========================================================== */

.pp-philosophy {
  padding:
    clamp(120px, 15vw, 210px)
    0;

  background:
    linear-gradient(
      135deg,
      #17130f,
      #0b0b0a 60%
    );
}

.pp-philosophy__statement {
  max-width: 980px;
}

.pp-philosophy__statement h2 {
  max-width: 900px;
}

.pp-value-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  margin-top:
    clamp(70px, 9vw, 120px);

  border-top:
    1px solid var(--pp-line);
}

.pp-value-grid article {
  min-height: 260px;

  padding:
    36px 42px 20px 0;

  border-right:
    1px solid var(--pp-line);
}

.pp-value-grid article + article {
  padding-left: 42px;
}

.pp-value-grid article:last-child {
  border-right: 0;
}


/* ==========================================================
   13. EXAMPLES
========================================================== */

.pp-examples {
  padding:
    clamp(110px, 13vw, 180px)
    0;

  overflow: hidden;

  background:
    #0a0a09;
}

.pp-examples__rail {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(220px, 1fr));

  gap: 12px;
}

.pp-example-card {
  position: relative;

  min-height: 430px;

  overflow: hidden;

  border-radius:
    var(--pp-radius);

  background:
    #151412;
}

.pp-example-card::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(0, 0, 0, 0.78)
    );

  pointer-events: none;
}

.pp-example-card img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(0.86);

  transition:
    transform 800ms cubic-bezier(.2, .7, .2, 1),
    filter var(--pp-transition);
}

.pp-example-card:hover img {
  transform:
    scale(1.045);

  filter:
    saturate(1);
}

.pp-example-card > div {
  position: absolute;

  z-index: 2;

  left: 24px;
  right: 24px;
  bottom: 24px;
}

.pp-example-card span {
  color:
    var(--pp-accent-light);

  font-size: 0.62rem;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pp-example-card h3 {
  margin:
    7px 0 0;

  font-family:
    var(--pp-serif);

  font-size: 1.6rem;
  font-weight: 400;
}


/* ==========================================================
   14. PURCHASE
========================================================== */

.pp-purchase {
  padding:
    clamp(110px, 13vw, 170px)
    0 90px;

  background:
    radial-gradient(
      circle at 22% 42%,
      rgba(185, 138, 93, 0.08),
      transparent 34%
    ),
    #11100e;
}

.pp-purchase__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(420px, 0.92fr);

  gap:
    clamp(60px, 9vw, 130px);

  align-items: start;
}

.pp-purchase__product {
  position: sticky;

  top: 130px;

  padding-top: 20px;
}

.pp-purchase__product h2 {
  font-size:
    clamp(
      4.6rem,
      8vw,
      7.5rem
    );

  line-height: 0.75;
}

.pp-purchase__product h2 span {
  display: block;

  margin-top: 0.2em;

  color:
    var(--pp-accent-light);

  font-style: italic;
}

.pp-purchase__summary {
  max-width: 440px;

  margin:
    38px 0 0;

  color:
    var(--pp-text-soft);

  font-size: 1rem;

  line-height: 1.7;
}

.pp-purchase__price {
  margin-top: 55px;
}

.pp-purchase__price-label {
  display: block;

  margin-bottom: 8px;

  color:
    var(--pp-text-muted);

  font-size: 0.62rem;

  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.pp-purchase__price > div {
  display: flex;

  align-items: flex-end;

  gap: 12px;
}

.pp-purchase__price strong {
  font-family:
    var(--pp-serif);

  font-size:
    clamp(
      4.2rem,
      7vw,
      6.5rem
    );

  font-weight: 400;

  line-height: 1;
}

.pp-purchase__price > div span {
  padding-bottom: 12px;

  color:
    var(--pp-text-muted);

  font-size: 0.8rem;

  letter-spacing: 0.12em;
}

.pp-purchase__includes {
  max-width: 440px;

  padding: 0;

  margin:
    40px 0 0;

  list-style: none;

  border-top:
    1px solid var(--pp-line);
}

.pp-purchase__includes li {
  position: relative;

  padding:
    15px 0 15px 25px;

  border-bottom:
    1px solid var(--pp-line-soft);

  color:
    var(--pp-text-soft);

  font-size: 0.82rem;
}

.pp-purchase__includes li::before {
  content: "✓";

  position: absolute;

  left: 0;

  color:
    var(--pp-accent);
}


/* ==========================================================
   15. CHECKOUT CARD
========================================================== */

.pp-checkout-card {
  padding:
    clamp(28px, 4vw, 48px);

  border:
    1px solid rgba(255, 255, 255, 0.10);

  border-radius:
    var(--pp-radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.015)
    );

  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.24);
}

.pp-checkout-card__heading {
  margin-bottom: 36px;
}

.pp-checkout-card__heading > span {
  color:
    var(--pp-accent-light);

  font-size: 0.61rem;
  font-weight: 600;

  letter-spacing: 0.18em;
}

.pp-checkout-card__heading h3 {
  margin:
    10px 0 10px;

  font-family:
    var(--pp-serif);

  font-size:
    clamp(
      2.2rem,
      4vw,
      3.2rem
    );

  font-weight: 400;
}

.pp-checkout-card__heading p {
  margin: 0;

  color:
    var(--pp-text-muted);

  font-size: 0.85rem;

  line-height: 1.6;
}


/* ==========================================================
   16. FORM
========================================================== */

.pp-checkout-form {
  display: grid;

  gap: 20px;
}

.pp-form-row {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.pp-field {
  display: grid;

  gap: 8px;
}

.pp-field label {
  color:
    var(--pp-text-soft);

  font-size: 0.7rem;

  letter-spacing: 0.04em;
}

.pp-field label span {
  color:
    var(--pp-text-muted);

  font-size: 0.64rem;
}

.pp-field input,
.pp-field select,
.pp-promo__input input,
.pp-upgrade__email input {
  width: 100%;

  min-height: 50px;

  padding:
    0 15px;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius:
    var(--pp-radius-sm);

  outline: none;

  background:
    rgba(0, 0, 0, 0.22);

  color:
    var(--pp-text);

  transition:
    border-color var(--pp-transition),
    background var(--pp-transition),
    box-shadow var(--pp-transition);
}

.pp-field input:focus,
.pp-field select:focus,
.pp-promo__input input:focus,
.pp-upgrade__email input:focus {
  border-color:
    var(--pp-accent);

  background:
    rgba(0, 0, 0, 0.32);

  box-shadow:
    0 0 0 3px
    rgba(185, 138, 93, 0.10);
}

.pp-field select {
  color-scheme: dark;
}

.pp-field__error {
  min-height: 1em;

  color:
    var(--pp-error);

  font-size: 0.68rem;
}

.pp-honeypot {
  position: absolute;

  left: -9999px;

  width: 1px;
  height: 1px;

  overflow: hidden;
}


/* ==========================================================
   17. PROMO CODE
========================================================== */

.pp-promo {
  padding:
    4px 0;

  border-top:
    1px solid var(--pp-line-soft);

  border-bottom:
    1px solid var(--pp-line-soft);
}

.pp-promo__toggle {
  width: 100%;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding:
    15px 0;

  border: 0;

  background: transparent;

  color:
    var(--pp-text-soft);

  text-align: left;

  font-size: 0.75rem;

  cursor: pointer;
}

.pp-promo__toggle span {
  color:
    var(--pp-accent);

  font-family:
    var(--pp-serif);

  font-size: 1.4rem;

  transition:
    transform var(--pp-transition);
}

.pp-promo__toggle[aria-expanded="true"]
span {
  transform:
    rotate(45deg);
}

.pp-promo__fields {
  padding:
    0 0 16px;
}

.pp-promo__input {
  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 8px;
}

.pp-promo__input button {
  padding:
    0 18px;

  border:
    1px solid rgba(255, 255, 255, 0.13);

  border-radius:
    var(--pp-radius-sm);

  background:
    rgba(255, 255, 255, 0.04);

  color:
    var(--pp-text-muted);

  font-size: 0.65rem;
  font-weight: 600;

  letter-spacing: 0.08em;
}

.pp-promo__message {
  margin:
    9px 0 0;

  color:
    var(--pp-text-muted);

  font-size: 0.65rem;

  line-height: 1.5;
}


/* ==========================================================
   18. CONSENT
========================================================== */

.pp-consent {
  display: grid;

  grid-template-columns:
    18px 1fr;

  gap: 10px;

  align-items: start;

  color:
    var(--pp-text-muted);

  font-size: 0.69rem;

  line-height: 1.55;

  cursor: pointer;
}

.pp-consent input {
  width: 15px;
  height: 15px;

  margin-top: 2px;

  accent-color:
    var(--pp-accent);
}

.pp-consent a {
  color:
    var(--pp-text-soft);

  text-underline-offset: 3px;
}

.pp-consent--optional {
  opacity: 0.88;
}


/* ==========================================================
   19. CHECKOUT BUTTON
========================================================== */

.pp-button--checkout {
  width: 100%;

  min-height: 62px;

  justify-content: space-between;

  margin-top: 6px;

  padding-inline: 24px;

  border: 0;
}

.pp-button--checkout > span {
  font-family:
    var(--pp-serif);

  font-size: 1rem;
  font-weight: 500;

  letter-spacing: 0;
  text-transform: none;
}

.pp-checkout-form__status {
  min-height: 1.3em;

  margin: 0;

  color:
    var(--pp-accent-light);

  font-size: 0.72rem;

  text-align: center;
}

.pp-checkout-form__note {
  margin:
    -8px 0 0;

  color:
    var(--pp-text-muted);

  font-size: 0.63rem;

  line-height: 1.5;

  text-align: center;
}


/* ==========================================================
   20. PORTRAIT 2.0 UPGRADE
========================================================== */

.pp-upgrade {
  max-width: 900px;

  margin:
    90px auto 0;

  border-top:
    1px solid var(--pp-line);

  border-bottom:
    1px solid var(--pp-line);
}

.pp-upgrade__intro {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 40px;

  padding:
    30px 0;
}

.pp-upgrade__intro > div > span {
  color:
    var(--pp-accent);

  font-size: 0.58rem;

  letter-spacing: 0.17em;
}

.pp-upgrade__intro h3 {
  margin:
    8px 0 4px;

  font-family:
    var(--pp-serif);

  font-size: 1.7rem;
  font-weight: 400;
}

.pp-upgrade__intro p {
  margin: 0;

  color:
    var(--pp-text-muted);

  font-size: 0.78rem;
}

.pp-upgrade__button {
  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;

  gap: 16px;

  padding:
    12px 0;

  border: 0;

  background: transparent;

  color:
    var(--pp-text-soft);

  font-size: 0.66rem;
  font-weight: 600;

  letter-spacing: 0.08em;

  cursor: pointer;

  transition:
    color var(--pp-transition);
}

.pp-upgrade__button:hover {
  color:
    var(--pp-accent-light);
}

.pp-upgrade__button span {
  color:
    var(--pp-accent);

  font-family:
    var(--pp-serif);

  font-size: 1.3rem;

  transition:
    transform var(--pp-transition);
}

.pp-upgrade__button:hover span {
  transform:
    translateX(4px);
}

.pp-upgrade__form {
  display: grid;

  grid-template-columns:
    0.75fr 1.25fr;

  gap: 40px;

  padding:
    30px 0 36px;

  border-top:
    1px solid var(--pp-line-soft);
}

.pp-upgrade__form[hidden] {
  display: none;
}

.pp-upgrade__form h4 {
  margin: 0;

  font-family:
    var(--pp-serif);

  font-size: 1.35rem;
  font-weight: 400;
}

.pp-upgrade__form p {
  margin:
    8px 0 0;

  color:
    var(--pp-text-muted);

  font-size: 0.72rem;

  line-height: 1.5;
}

.pp-upgrade__email {
  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 8px;
}

.pp-upgrade__email button {
  padding:
    0 20px;

  border: 0;

  border-radius:
    var(--pp-radius-sm);

  background:
    var(--pp-accent);

  color:
    #0c0b09;

  font-size: 0.64rem;
  font-weight: 650;

  letter-spacing: 0.08em;

  cursor: pointer;

  transition:
    background var(--pp-transition),
    transform var(--pp-transition);
}

.pp-upgrade__email button:hover {
  transform:
    translateY(-1px);

  background:
    var(--pp-accent-light);
}

.pp-upgrade__status {
  min-height: 1em;
}


/* ==========================================================
   21. STORY
========================================================== */

.pp-story {
  min-height: 720px;

  display: grid;

  grid-template-columns:
    1.05fr 0.95fr;

  background:
    #090909;
}

.pp-story__image {
  position: relative;

  min-height: 720px;

  overflow: hidden;
}

.pp-story__image::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 65%,
      #090909 100%
    );
}

.pp-story__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;
}

.pp-story__content {
  display: flex;

  align-items: center;

  padding:
    80px
    clamp(40px, 7vw, 110px)
    80px
    clamp(30px, 4vw, 70px);
}

.pp-story__content > div {
  max-width: 570px;
}

.pp-story__signature {
  display: grid;

  gap: 5px;

  margin-top: 48px;
}

.pp-story__signature strong {
  font-family:
    var(--pp-serif);

  font-size: 1.65rem;
  font-weight: 400;
}

.pp-story__signature span {
  color:
    var(--pp-accent);

  font-size: 0.65rem;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* ==========================================================
   22. FOCUS / ACCESSIBILITY
========================================================== */

.pp-button:focus-visible,
.pp-upgrade__button:focus-visible,
.pp-promo__toggle:focus-visible,
.pp-upgrade__email button:focus-visible,
.pp-before-after__range:focus-visible {
  outline:
    2px solid var(--pp-accent-light);

  outline-offset: 4px;
}


/* ==========================================================
   23. TABLET
========================================================== */

@media (max-width: 1050px) {

  .pp-hero {
    min-height: auto;

    padding:
      150px 0 90px;
  }

  .pp-hero__grid {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(340px, 1fr);

    gap: 40px;
  }

  .pp-hero__visual {
    min-height: 540px;
  }

  .pp-feature-points {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .pp-feature-points article:nth-child(2) {
    border-right: 0;
  }

  .pp-feature-points article:nth-child(-n+2) {
    border-bottom:
      1px solid var(--pp-line);
  }

  .pp-category-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .pp-examples__rail {
    grid-template-columns:
      repeat(5, 260px);

    overflow-x: auto;

    padding-bottom: 12px;

    scroll-snap-type: x proximity;

    scrollbar-width: thin;
  }

  .pp-example-card {
    scroll-snap-align: start;
  }

}


/* ==========================================================
   24. MOBILE / SMALL TABLET
========================================================== */

@media (max-width: 820px) {

  .pp-container {
    width:
      min(
        calc(100% - 34px),
        var(--pp-container)
      );
  }

  .pp-hero {
    padding:
      125px 0 75px;
  }

  .pp-hero__grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .pp-hero__content {
    max-width: 650px;
  }

  .pp-hero__title {
    font-size:
      clamp(
        5rem,
        20vw,
        8rem
      );
  }

  .pp-hero__visual {
    min-height: auto;

    padding:
      10px 0 45px;
  }

  .pp-hero__product {
    width:
      min(86vw, 600px);

    transform:
      none;
  }

  .pp-hero__visual:hover
  .pp-hero__product {
    transform:
      none;
  }

  .pp-hero__real-product {
    right: auto;
    left: 50%;
    bottom: 0;

    transform:
      translateX(-50%);

    white-space: nowrap;
  }

  .pp-scroll-cue {
    display: none;
  }

  .pp-feature__split {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .pp-feature__copy {
    max-width: 650px;
  }

  .pp-before-after--vertical {
    max-width: 650px;
  }

  .pp-value-grid {
    grid-template-columns: 1fr;
  }

  .pp-value-grid article {
    min-height: auto;

    padding:
      28px 0;

    border-right: 0;

    border-bottom:
      1px solid var(--pp-line);
  }

  .pp-value-grid article + article {
    padding-left: 0;
  }

  .pp-value-grid article:last-child {
    border-bottom: 0;
  }

  .pp-value-grid h3 {
    margin-top: 20px;
  }

  .pp-purchase__grid {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .pp-purchase__product {
    position: static;

    max-width: 620px;
  }

  .pp-story {
    grid-template-columns: 1fr;
  }

  .pp-story__image {
    min-height: 70vw;
    max-height: 680px;
  }

  .pp-story__image::after {
    background:
      linear-gradient(
        180deg,
        transparent 65%,
        #090909 100%
      );
  }

  .pp-story__content {
    padding:
      55px 24px 90px;
  }

}


/* ==========================================================
   25. MOBILE
========================================================== */

@media (max-width: 600px) {

  .pp-section-heading {
    margin-bottom: 44px;
  }

  .pp-section-heading h2,
  .pp-feature__copy h2,
  .pp-philosophy h2,
  .pp-story h2 {
    font-size:
      clamp(
        2.8rem,
        14vw,
        4.3rem
      );
  }

  .pp-hero__descriptor {
    margin-top: 26px;
  }

  .pp-hero__statement {
    margin-top: 38px;
  }

  .pp-hero__description {
    font-size: 0.94rem;
  }

  .pp-hero__actions {
    display: grid;

    grid-template-columns: 1fr;
  }

  .pp-button {
    width: 100%;
  }

  .pp-hero__meta {
    display: grid;

    grid-template-columns: 1fr;

    gap: 8px;

    margin-top: 30px;
  }

  .pp-hero__meta li {
    max-width: none;
  }

  .pp-feature-points {
    grid-template-columns: 1fr;
  }

  .pp-feature-points article {
    min-height: auto;

    padding:
      28px 8px;

    border-right: 0;

    border-bottom:
      1px solid var(--pp-line);
  }

  .pp-feature-points article:nth-child(-n+2) {
    border-bottom:
      1px solid var(--pp-line);
  }

  .pp-feature-points article:last-child {
    border-bottom: 0;
  }

  .pp-feature-points h3 {
    margin-top: 18px;
  }

  .pp-before-after__viewport {
    aspect-ratio: 4 / 5;
  }

  .pp-before-after__label {
    top: 12px;

    padding:
      6px 9px;
  }

  .pp-before-after__label--before {
    left: 12px;
  }

  .pp-before-after__label--after {
    right: 12px;
  }

  .pp-before-after__handle {
    width: 46px;
    height: 46px;
  }

  .pp-category-grid {
    grid-template-columns: 1fr;
  }

  .pp-category-card {
    min-height: auto;
  }



  .pp-examples__rail {
    grid-template-columns:
      repeat(5, 78vw);
  }

  .pp-example-card {
    min-height: 110vw;

    max-height: 560px;
  }

  .pp-purchase {
    padding-bottom: 70px;
  }

  .pp-purchase__product h2 {
    font-size:
      clamp(
        4.2rem,
        21vw,
        6rem
      );
  }

  .pp-purchase__price strong {
    font-size:
      clamp(
        4.5rem,
        21vw,
        6rem
      );
  }

  .pp-checkout-card {
    padding:
      27px 20px;

    border-radius:
      18px;
  }

  .pp-form-row {
    grid-template-columns: 1fr;
  }

  .pp-button--checkout {
    width: 100%;
  }

  .pp-upgrade {
    margin-top: 65px;
  }

  .pp-upgrade__intro {
    display: grid;

    gap: 22px;

    padding:
      26px 0;
  }

  .pp-upgrade__button {
    justify-self: start;
  }

  .pp-upgrade__form {
    grid-template-columns: 1fr;

    gap: 24px;
  }

  .pp-upgrade__email {
    grid-template-columns: 1fr;
  }

  .pp-upgrade__email button {
    min-height: 50px;
  }

  .pp-promo__input {
    grid-template-columns: 1fr;
  }

  .pp-promo__input button {
    min-height: 46px;
  }

  .pp-story__image {
    min-height: 115vw;
  }

}


/* ==========================================================
   26. VERY SMALL SCREENS
========================================================== */

@media (max-width: 390px) {

  .pp-container {
    width:
      calc(100% - 28px);
  }

  .pp-hero__title {
    font-size: 4.8rem;
  }

  .pp-hero__statement {
    font-size: 2.15rem;
  }

  .pp-checkout-card {
    padding:
      24px 16px;
  }

}


/* ==========================================================
   27. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .portrait-pro-page *,
  .portrait-pro-page *::before,
  .portrait-pro-page *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }

}


/* ==========================================================
   28. UTILITY FOR [hidden]
========================================================== */

.portrait-pro-page [hidden] {
  display: none !important;
}
/* ==========================================================
   PORTRAIT PRO — BEFORE / AFTER FIX
   La imagen BEFORE permanece fija.
   El slider únicamente modifica el área visible.
========================================================== */

.pp-before-after__before {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: inset(0 50% 0 0);
}

.pp-before-after__before .pp-before-after__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}



/* ==========================================================
   PORTRAIT PRO — STORY FULL BACKGROUND
   Fotografía a todo lo ancho + contenido superpuesto
========================================================== */

.pp-story {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #090909;
}


/* Fotografía de fondo */

.pp-story__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pp-story__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /*
   * Dani debe quedar visualmente hacia la derecha.
   * Ajustaremos este valor cuando tengamos
   * la fotografía definitiva.
   */
  object-position: center center;
}


/* Degradado para mantener el texto legible
   sin ocultar la fotografía del lado derecho */

.pp-story__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(7, 7, 7, 0.96) 0%,
      rgba(7, 7, 7, 0.88) 28%,
      rgba(7, 7, 7, 0.58) 50%,
      rgba(7, 7, 7, 0.16) 72%,
      rgba(7, 7, 7, 0.04) 100%
    );
}


/* Contenido encima de la fotografía */

.pp-story__content {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  width: auto;

  min-height: 720px;

  margin-inline:
    var(--space);
  padding: 100px 0;
}

.pp-story__content > div {
  width: min(100%, 590px);
  max-width: 590px;
}


/* El texto debe permanecer claro sobre la fotografía */

.pp-story__content > div > p {
  max-width: 570px;
}

.pp-story__signature {
  margin-top: 48px;
}


/* ==========================================================
   STORY — TABLET
========================================================== */

@media (max-width: 820px) {

  .pp-story {
    min-height: 680px;
  }

  .pp-story__image {
    min-height: 0;
  }

  .pp-story__image img {
    object-position: 62% center;
  }

  .pp-story__image::after {
    background:
      linear-gradient(
        90deg,
        rgba(7, 7, 7, 0.94) 0%,
        rgba(7, 7, 7, 0.84) 45%,
        rgba(7, 7, 7, 0.42) 75%,
        rgba(7, 7, 7, 0.18) 100%
      );
  }

  .pp-story__content {
    width: min(
      calc(100% - 34px),
      var(--pp-container)
    );

    min-height: 680px;
    padding: 80px 0;
  }

  .pp-story__content > div {
    width: min(100%, 540px);
  }

}


/* ==========================================================
   STORY — MOBILE
========================================================== */

@media (max-width: 560px) {

  .pp-story {
    min-height: 660px;
    align-items: flex-end;
  }

  .pp-story__image img {
    object-position: 65% center;
  }

  .pp-story__image::after {
    background:
      linear-gradient(
        90deg,
        rgba(7, 7, 7, 0.91) 0%,
        rgba(7, 7, 7, 0.76) 55%,
        rgba(7, 7, 7, 0.38) 100%
      ),
      linear-gradient(
        0deg,
        rgba(7, 7, 7, 0.94) 0%,
        rgba(7, 7, 7, 0.42) 58%,
        rgba(7, 7, 7, 0.12) 100%
      );
  }

  .pp-story__content {
    min-height: 660px;
    align-items: flex-end;
    padding: 90px 0 65px;
  }

  .pp-story__content > div {
    max-width: 100%;
  }

  .pp-story__signature {
    margin-top: 36px;
  }

}

/* ==========================================================
   PORTRAIT PRO · GLOBAL HERO VARIANT
   ----------------------------------------------------------
   site-hero conserva:
   - geometría
   - imagen de fondo
   - overlay
   - responsive estructural

   Esta variante aporta únicamente la identidad visual
   de Portrait Pro.
========================================================== */

.site-hero--portrait-pro {
  --pp-pro-hero-max: 650px;
}

.site-hero--portrait-pro .site-hero__overlay {
  background:
    linear-gradient(
      90deg,
      rgba(7, 7, 6, 0.78) 0%,
      rgba(8, 8, 7, 0.58) 30%,
      rgba(8, 8, 7, 0.28) 57%,
      rgba(8, 8, 7, 0.04) 100%
    );
}

.pp-pro-hero__content {
  max-width: var(--pp-pro-hero-max);
}

.pp-pro-hero__brand {
  margin: 0 0 14px;

  color: var(--pp-accent-light);

  font-size: 0.67rem;
  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.pp-pro-hero__title {
  margin: 0;

  color: var(--pp-text);

  font-family: var(--pp-serif);

  font-size:
    clamp(
      4.8rem,
      8.2vw,
      8.5rem
    );

  font-weight: 300;

  line-height: 0.72;

  letter-spacing: -0.065em;
}

.pp-pro-hero__title span {
  display: block;

  margin-top: 0.19em;

  color: var(--pp-accent-light);

  font-style: italic;
  font-weight: 300;
}

.pp-pro-hero__descriptor {
  max-width: 420px;

  margin: 30px 0 0;

  color: var(--pp-text-muted);

  font-size: 0.72rem;
  font-weight: 500;

  line-height: 1.65;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pp-pro-hero__statement {
  margin: 34px 0 0;

  font-family: var(--pp-serif);

  font-size:
    clamp(
      1.9rem,
      3vw,
      3.1rem
    );

  line-height: 0.98;
}

.pp-pro-hero__statement strong,
.pp-pro-hero__statement span {
  display: block;
}

.pp-pro-hero__statement strong {
  color: var(--pp-text);

  font-weight: 500;
}

.pp-pro-hero__statement span {
  margin-top: 5px;

  color: var(--pp-accent-light);

  font-style: italic;
  font-weight: 300;
}

.pp-pro-hero__description {
  max-width: 570px;

  margin: 22px 0 0;

  color: var(--pp-text-soft);

  font-size: 0.94rem;

  line-height: 1.75;
}

.pp-pro-hero__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 28px;
}

.pp-pro-hero__meta {
  display: flex;

  flex-wrap: wrap;

  gap: 10px 24px;

  padding: 0;

  margin: 28px 0 0;

  list-style: none;
}

.pp-pro-hero__meta li {
  position: relative;

  max-width: 175px;

  padding-left: 13px;

  color: var(--pp-text-muted);

  font-size: 0.62rem;

  line-height: 1.5;
}

.pp-pro-hero__meta li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.55em;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: var(--pp-accent);
}


/* Tablet */

@media (max-width: 820px) {

  .site-hero--portrait-pro .site-hero__overlay {
    background:
      linear-gradient(
        90deg,
        rgba(7, 7, 6, 0.92) 0%,
        rgba(7, 7, 6, 0.72) 62%,
        rgba(7, 7, 6, 0.28) 100%
      );
  }

  .pp-pro-hero__content {
    max-width: 620px;
  }

  .pp-pro-hero__title {
    font-size:
      clamp(
        4.5rem,
        16vw,
        7.2rem
      );
  }

}


/* Mobile */

@media (max-width: 560px) {

  .site-hero--portrait-pro .site-hero__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(7, 7, 6, 0.34) 0%,
        rgba(7, 7, 6, 0.62) 30%,
        rgba(7, 7, 6, 0.94) 72%,
        rgba(7, 7, 6, 0.98) 100%
      );
  }

  .pp-pro-hero__title {
    font-size:
      clamp(
        4rem,
        21vw,
        5.7rem
      );
  }

  .pp-pro-hero__descriptor {
    margin-top: 24px;
  }

  .pp-pro-hero__statement {
    margin-top: 28px;

    font-size: 2rem;
  }

  .pp-pro-hero__description {
    font-size: 0.88rem;
  }

  .pp-pro-hero__actions {
    display: grid;

    grid-template-columns: 1fr;
  }

  .pp-pro-hero__actions .pp-button {
    width: 100%;
  }

  .pp-pro-hero__meta {
    display: grid;

    grid-template-columns: 1fr;

    gap: 7px;

    margin-top: 24px;
  }

  .pp-pro-hero__meta li {
    max-width: none;
  }

  .pp-scroll-cue {
    display: none;
  }

}



/* ==========================================================
   PORTRAIT PRO · STAR FEATURES
   Piel / Fondo
   ----------------------------------------------------------
   Desktop:
   Piel  -> texto izquierda / comparador derecha
   Fondo -> comparador izquierda / texto derecha

   Los puntos dejan de funcionar visualmente como tarjetas
   y pasan a ser una retícula editorial compacta.
========================================================== */


/* ----------------------------------------------------------
   ESTRUCTURA GENERAL
---------------------------------------------------------- */

#piel-editorial .pp-feature__split,
#fondo-automatico .pp-feature__split {
  display: grid;

  grid-template-columns:
    minmax(320px, 0.82fr)
    minmax(0, 1.18fr);

  gap:
    clamp(
      55px,
      7vw,
      110px
    );

  align-items: center;
}


/* ----------------------------------------------------------
   PIEL
   Texto izquierda / comparador derecha
---------------------------------------------------------- */

#piel-editorial .pp-feature__copy {
  grid-column: 1;
  grid-row: 1;

  max-width: 520px;
}

#piel-editorial .pp-before-after {
  grid-column: 2;
  grid-row: 1;

  width: 100%;
}


/* ----------------------------------------------------------
   FONDO
   Comparador izquierda / texto derecha
---------------------------------------------------------- */

#fondo-automatico .pp-feature__split {
  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(320px, 0.82fr);
}

#fondo-automatico .pp-before-after {
  grid-column: 1;
  grid-row: 1;

  width: 100%;
}

#fondo-automatico .pp-feature__copy {
  grid-column: 2;
  grid-row: 1;

  max-width: 520px;

  justify-self: end;
}


/* ----------------------------------------------------------
   PUNTOS / BENEFICIOS
   Ya no son tarjetas visuales.
---------------------------------------------------------- */

#piel-editorial .pp-feature-points,
#fondo-automatico .pp-feature-points {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 0;

  margin-top: 38px;

  border-top:
    1px solid var(--pp-line);

  border-bottom:
    1px solid var(--pp-line);
}


#piel-editorial .pp-feature-points article,
#fondo-automatico .pp-feature-points article {
  position: relative;

  min-height: 0;

  padding:
    24px 22px 24px 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  box-shadow: none;
}


/* Segunda columna */

#piel-editorial .pp-feature-points article:nth-child(even),
#fondo-automatico .pp-feature-points article:nth-child(even) {
  padding-left: 22px;
  padding-right: 0;

  border-left:
    1px solid var(--pp-line);
}


/* Segunda fila */

#piel-editorial .pp-feature-points article:nth-child(n+3),
#fondo-automatico .pp-feature-points article:nth-child(n+3) {
  border-top:
    1px solid var(--pp-line);
}


/* Títulos */

#piel-editorial .pp-feature-points h3,
#fondo-automatico .pp-feature-points h3 {
  margin: 0 0 8px;

  color:
    var(--pp-accent-light);

  font-family:
    var(--pp-sans);

  font-size: 0.68rem;
  font-weight: 600;

  line-height: 1.45;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* Texto */

#piel-editorial .pp-feature-points p,
#fondo-automatico .pp-feature-points p {
  margin: 0;

  color:
    var(--pp-text-muted);

  font-size: 0.76rem;

  line-height: 1.6;
}


/* Eliminar cualquier transformación/hover heredado
   de las antiguas tarjetas */

#piel-editorial .pp-feature-points article:hover,
#fondo-automatico .pp-feature-points article:hover {
  transform: none;

  background: transparent;

  box-shadow: none;
}


/* ----------------------------------------------------------
   COMPARADORES
   Más presencia visual en desktop
---------------------------------------------------------- */

#piel-editorial .pp-before-after__viewport,
#fondo-automatico .pp-before-after__viewport {
  width: 100%;
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width: 900px) {

  #piel-editorial .pp-feature__split,
  #fondo-automatico .pp-feature__split {
    grid-template-columns:
      minmax(280px, 0.9fr)
      minmax(0, 1.1fr);

    gap: 40px;
  }

  #fondo-automatico .pp-feature__split {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(280px, 0.9fr);
  }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 720px) {

  #piel-editorial .pp-feature__split,
  #fondo-automatico .pp-feature__split {
    display: grid;

    grid-template-columns: 1fr;

    gap: 34px;
  }


  /* En móvil ambos mantienen lectura natural:
     explicación primero, demostración después */

  #piel-editorial .pp-feature__copy,
  #fondo-automatico .pp-feature__copy {
    grid-column: 1;
    grid-row: 1;

    max-width: none;

    justify-self: stretch;
  }

  #piel-editorial .pp-before-after,
  #fondo-automatico .pp-before-after {
    grid-column: 1;
    grid-row: 2;

    width: 100%;
  }


  #piel-editorial .pp-feature-points,
  #fondo-automatico .pp-feature-points {
    margin-top: 30px;
  }

}


/* ----------------------------------------------------------
   MOBILE PEQUEÑO
---------------------------------------------------------- */

@media (max-width: 520px) {

  #piel-editorial .pp-feature-points,
  #fondo-automatico .pp-feature-points {
    grid-template-columns: 1fr;
  }


  #piel-editorial .pp-feature-points article,
  #fondo-automatico .pp-feature-points article,
  #piel-editorial .pp-feature-points article:nth-child(even),
  #fondo-automatico .pp-feature-points article:nth-child(even) {
    padding:
      19px 0;

    border-left: 0;
  }


  #piel-editorial .pp-feature-points article + article,
  #fondo-automatico .pp-feature-points article + article {
    border-top:
      1px solid var(--pp-line);
  }

}



/* ==========================================================
   PORTRAIT PRO · STAR FEATURE FINAL
========================================================== */

.pp-star-feature {
  display: grid;

  grid-template-columns:
    minmax(330px, 0.82fr)
    minmax(0, 1.18fr);

  gap:
    clamp(
      50px,
      6vw,
      95px
    );

  align-items: center;
}


/* COPY */

.pp-star-feature__copy {
  min-width: 0;
}

.pp-star-feature__copy .pp-section-heading {
  max-width: 520px;

  margin: 0;

  text-align: left;
}

.pp-star-feature__copy .pp-section-heading p {
  margin-left: 0;
  margin-right: 0;
}


/* FEATURES */

.pp-feature-points--editorial {
  display: grid !important;

  grid-template-columns: 1fr !important;

  gap: 0 !important;

  margin-top: 36px !important;

  border-top:
    1px solid var(--pp-line) !important;

  border-bottom:
    1px solid var(--pp-line) !important;
}

.pp-feature-points--editorial article {
  min-height: 0 !important;

  padding:
    18px 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

.pp-feature-points--editorial article + article {
  border-top:
    1px solid var(--pp-line) !important;
}

.pp-feature-points--editorial article:hover {
  transform: none !important;

  background: transparent !important;

  box-shadow: none !important;
}

.pp-feature-points--editorial article > span {
  display: block;

  margin-bottom: 5px;

  color: var(--pp-accent);

  font-family: var(--pp-serif);

  font-size: 0.9rem;
}

.pp-feature-points--editorial h3 {
  margin: 0 0 5px !important;

  color:
    var(--pp-accent-light) !important;

  font-size: 0.67rem !important;

  line-height: 1.35;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.pp-feature-points--editorial p {
  margin: 0 !important;

  color:
    var(--pp-text-muted) !important;

  font-size: 0.74rem !important;

  line-height: 1.55 !important;
}


/* VISUAL */

.pp-star-feature__visual {
  min-width: 0;

  width: 100%;
}

.pp-star-feature__visual .pp-before-after {
  width: 100%;

  margin: 0;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

  .pp-star-feature {
    grid-template-columns:
      minmax(280px, 0.9fr)
      minmax(0, 1.1fr);

    gap: 38px;
  }

}


@media (max-width: 720px) {

  .pp-star-feature {
    grid-template-columns: 1fr;

    gap: 38px;
  }

  .pp-star-feature__copy {
    grid-column: 1;
    grid-row: 1;
  }

  .pp-star-feature__visual {
    grid-column: 1;
    grid-row: 2;
  }

  .pp-feature-points--editorial {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .pp-feature-points--editorial article {
    padding:
      18px 18px 18px 0 !important;
  }

  .pp-feature-points--editorial article:nth-child(even) {
    padding-left: 18px !important;
    padding-right: 0 !important;

    border-left:
      1px solid var(--pp-line) !important;
  }

  .pp-feature-points--editorial article:nth-child(2) {
    border-top: 0 !important;
  }

}


@media (max-width: 520px) {

  .pp-feature-points--editorial {
    grid-template-columns: 1fr !important;
  }

  .pp-feature-points--editorial article,
  .pp-feature-points--editorial article:nth-child(even) {
    padding:
      17px 0 !important;

    border-left: 0 !important;
  }

  .pp-feature-points--editorial article:nth-child(2) {
    border-top:
      1px solid var(--pp-line) !important;
  }

}



/* ==========================================================
   PIEL ACABADO EDITORIAL · VERTICAL FINAL
========================================================== */


/* Más presencia para la demostración */

#piel-editorial .pp-star-feature {
  grid-template-columns:
    minmax(360px, 0.78fr)
    minmax(460px, 1.22fr);

  gap:
    clamp(
      55px,
      7vw,
      110px
    );

  align-items: center;
}


/* Comparador vertical */

#piel-editorial .pp-star-feature__visual {
  display: flex;

  justify-content: center;
  align-items: center;
}

#piel-editorial .pp-before-after {
  width:
    min(
      100%,
      650px
    );

  margin: 0 auto;
}

#piel-editorial .pp-before-after__viewport {
  width: 100%;

  aspect-ratio: 4 / 5;

  min-height: 0;
}

#piel-editorial .pp-before-after__image {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ==========================================================
   BENEFICIOS · 2 × 2 COMPACTO
========================================================== */

#piel-editorial .pp-feature-points--editorial {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  margin-top: 28px !important;
}

#piel-editorial .pp-feature-points--editorial article {
  padding:
    15px 16px 15px 0 !important;
}

#piel-editorial .pp-feature-points--editorial article:nth-child(even) {
  padding-left: 16px !important;
  padding-right: 0 !important;

  border-left:
    1px solid var(--pp-line) !important;
}

#piel-editorial .pp-feature-points--editorial article:nth-child(2) {
  border-top: 0 !important;
}

#piel-editorial .pp-feature-points--editorial article:nth-child(n+3) {
  border-top:
    1px solid var(--pp-line) !important;
}

#piel-editorial .pp-feature-points--editorial article > span {
  margin-bottom: 3px;

  font-size: 0.78rem;
}

#piel-editorial .pp-feature-points--editorial h3 {
  margin-bottom: 4px !important;

  font-size: 0.61rem !important;
}

#piel-editorial .pp-feature-points--editorial p {
  font-size: 0.67rem !important;

  line-height: 1.45 !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

  #piel-editorial .pp-star-feature {
    grid-template-columns:
      minmax(290px, 0.85fr)
      minmax(380px, 1.15fr);

    gap: 38px;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 720px) {

  #piel-editorial .pp-star-feature {
    grid-template-columns: 1fr;

    gap: 36px;
  }

  #piel-editorial .pp-before-after {
    width:
      min(
        100%,
        540px
      );
  }

}


/* ==========================================================
   MOBILE PEQUEÑO
========================================================== */

@media (max-width: 520px) {

  #piel-editorial .pp-feature-points--editorial {
    grid-template-columns: 1fr !important;
  }

  #piel-editorial .pp-feature-points--editorial article,
  #piel-editorial .pp-feature-points--editorial article:nth-child(even) {
    padding:
      14px 0 !important;

    border-left: 0 !important;
  }

  #piel-editorial .pp-feature-points--editorial article:nth-child(2) {
    border-top:
      1px solid var(--pp-line) !important;
  }

}


/* ==========================================================
   PORTRAIT PRO · RITMO VERTICAL FINAL
   Compacta las secciones posteriores a las features estrella
========================================================== */

.pp-workflow,
.pp-philosophy,
.pp-examples {
  padding:
    clamp(70px, 7.5vw, 105px)
    0;
}

/* La retícula de beneficios de Philosophy tenía
   un segundo espacio vertical excesivo */
.pp-philosophy .pp-value-grid {
  margin-top:
    clamp(42px, 5vw, 68px);
}



/* ==========================================================
   PHILOSOPHY · FONDO FOTOGRÁFICO
========================================================== */

.pp-philosophy {
  position: relative;
  isolation: isolate;

  overflow: hidden;

  background:
    url("/images/portrait-pro/portrait-pro-photoshop.jpg")
    center center / cover
    no-repeat;
}


/* Overlay fotográfico.
   Mantiene contraste sin esconder por completo la imagen. */

.pp-philosophy::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(7, 7, 6, 0.86) 0%,
      rgba(7, 7, 6, 0.74) 42%,
      rgba(7, 7, 6, 0.48) 72%,
      rgba(7, 7, 6, 0.34) 100%
    ),
    linear-gradient(
      0deg,
      rgba(7, 7, 6, 0.78) 0%,
      rgba(7, 7, 6, 0.18) 48%,
      rgba(7, 7, 6, 0.28) 100%
    );
}


/* Todo el contenido queda encima de la fotografía */

.pp-philosophy > .pp-container {
  position: relative;

  z-index: 1;
}


/* Los beneficios deben integrarse al fondo,
   no convertirse en tres tarjetas flotantes. */

.pp-philosophy .pp-value-grid {
  position: relative;

  z-index: 1;
}



/* ==========================================================
   PURCHASE · DESKTOP 3 COLUMNAS
   Información | Producto | Checkout
========================================================== */

.pp-purchase__grid {
  grid-template-columns:
    minmax(250px, 0.72fr)
    minmax(280px, 0.88fr)
    minmax(430px, 1.2fr);

  gap:
    clamp(28px, 3.5vw, 58px);

  align-items: start;
}


/* ==========================================================
   PRODUCT VISUAL · 4:5
========================================================== */

.pp-purchase__grid > .pp-purchase__product-visual {
  width: 100%;
  max-width: 440px;

  aspect-ratio: 4 / 5;

  margin: 0;

  align-self: start;

  overflow: hidden;

  border-radius:
    var(--pp-radius-lg);
}

.pp-purchase__grid > .pp-purchase__product-visual img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;
}


/* Checkout conserva su posición */
.pp-purchase__grid > .pp-checkout-card {
  width: 100%;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

  .pp-purchase__grid {
    grid-template-columns:
      minmax(260px, 0.8fr)
      minmax(300px, 1fr);

    gap: 40px;
  }

  .pp-purchase__grid > .pp-purchase__product-visual {
    grid-column: 1;
    grid-row: 2;

    max-width: 400px;
  }

  .pp-purchase__grid > .pp-checkout-card {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 720px) {

  .pp-purchase__grid {
    grid-template-columns: 1fr;
  }

  .pp-purchase__grid > .pp-purchase__product,
  .pp-purchase__grid > .pp-purchase__product-visual,
  .pp-purchase__grid > .pp-checkout-card {
    grid-column: 1;
    grid-row: auto;
  }

  .pp-purchase__grid > .pp-purchase__product-visual {
    width:
      min(
        100%,
        430px
      );

    margin-inline: auto;
  }

}


/* ==========================================================
   PURCHASE · REFINAMIENTO DESKTOP
========================================================== */

@media (min-width: 1101px) {

  .pp-purchase__grid {
    grid-template-columns:
      minmax(230px, 0.68fr)
      minmax(360px, 0.98fr)
      minmax(450px, 1.18fr);

    gap:
      clamp(22px, 2.4vw, 40px);

    align-items: start;
  }


  /* Información */

  .pp-purchase__product {
    max-width: 310px;
  }


  /* Producto visual */

  .pp-purchase__grid > .pp-purchase__product-visual {
    width: 100%;
    max-width: 470px;

    aspect-ratio: 4 / 5;

    margin: 42px 0 0;

    border-radius: 0;
    box-shadow: none;
    overflow: visible;

    align-self: start;
  }

  .pp-purchase__grid > .pp-purchase__product-visual img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 5;

    object-fit: contain;
    object-position: center;
  }


  /* Checkout */

  .pp-purchase__grid > .pp-checkout-card {
    width: 100%;
    max-width: none;
  }

}



/* ==========================================================
   CHECKOUT · SOMBRA REFINADA
========================================================== */

.pp-checkout-card {
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.16);
}


/* ==========================================================
   PURCHASE · AJUSTE VISUAL FINAL
========================================================== */

@media (min-width: 1101px) {

  .pp-purchase__grid {
    grid-template-columns:
      minmax(250px, 0.72fr)
      minmax(340px, 0.94fr)
      minmax(450px, 1.18fr);

    column-gap:
      clamp(34px, 3vw, 50px);
  }

  .pp-purchase__product {
    position: relative;
    z-index: 2;

    max-width: 300px;
  }

  .pp-purchase__grid > .pp-purchase__product-visual {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 440px;

    margin: 42px 0 0;

    aspect-ratio: 4 / 5;

    border-radius: var(--pp-radius-lg);
    overflow: hidden;

    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.20);
  }

  .pp-purchase__grid > .pp-purchase__product-visual img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 5;

    object-fit: contain;
  }

}


/* Checkout: profundidad mucho más discreta */

.pp-checkout-card {
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.14);
}


/* ==========================================================
   PURCHASE · ALINEACIÓN SUPERIOR DE INFORMACIÓN
========================================================== */

@media (min-width: 1101px) {

  .pp-purchase__product {
    align-self: start;
    margin-top: 0;
  }

}


/* ==========================================================
   PURCHASE · COMPOSICIÓN FINAL DESKTOP
   Información | Producto | Checkout
========================================================== */

@media (min-width: 1101px) {

  .pp-purchase__grid {
    grid-template-columns:
      minmax(260px, 0.72fr)
      minmax(340px, 0.94fr)
      minmax(450px, 1.18fr);

    column-gap:
      clamp(36px, 3.2vw, 54px);

    align-items: start;
  }

  /* Columna de información */
  .pp-purchase__product {
    position: relative;
    top: auto;

    align-self: start;

    max-width: 310px;

    padding-top: 0;
    margin-top: 0;

    z-index: 2;
  }

  /* Imagen del producto */
  .pp-purchase__grid > .pp-purchase__product-visual {
    position: relative;

    width: 100%;
    max-width: 440px;

    aspect-ratio: 4 / 5;

    margin: 0;

    align-self: start;

    border-radius: var(--pp-radius-lg);
    overflow: hidden;

    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.20);

    z-index: 1;
  }

  .pp-purchase__grid > .pp-purchase__product-visual img {
    display: block;

    width: 100%;
    height: 100%;

    aspect-ratio: auto;

    object-fit: contain;
    object-position: center;
  }

  /* Checkout */
  .pp-purchase__grid > .pp-checkout-card {
    align-self: start;

    width: 100%;
    max-width: none;

    margin-top: 0;
  }

}




/* ==========================================================
   PORTRAIT PRO · BENEFICIOS
   ========================================================== */

.portrait-pro-page .pp-value-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portrait-pro-page .pp-value-grid > article {
  min-width: 0;
}


/* ==========================================================
   PORTRAIT PRO · CAPACIDADES / DEMOSTRACIONES
   ========================================================== */

.portrait-pro-page .pp-capabilities {
  overflow: hidden;
}

.portrait-pro-page .pp-capabilities .pp-section-heading {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.portrait-pro-page .pp-capabilities .pp-section-heading > p:last-child {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}


/* Cada demostración */

.portrait-pro-page .pp-capability {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(42px, 7vw, 100px);
  align-items: center;

  padding:
    clamp(72px, 9vw, 128px)
    0;

  border-top: 1px solid rgba(20, 20, 20, 0.12);
}

.portrait-pro-page .pp-capability:first-of-type {
  margin-top: clamp(54px, 7vw, 92px);
}

.portrait-pro-page .pp-capability__copy {
  max-width: 430px;
}

.portrait-pro-page .pp-capability__copy .pp-eyebrow {
  margin-bottom: 14px;
}

.portrait-pro-page .pp-capability__copy h3 {
  margin: 0;

  font-size:
    clamp(2.4rem, 5vw, 5rem);

  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.portrait-pro-page .pp-capability__copy > p:last-child {
  margin:
    clamp(22px, 3vw, 32px)
    0 0;

  max-width: 38rem;

  font-size:
    clamp(1rem, 1.25vw, 1.14rem);

  line-height: 1.7;
}


/* Alternancia visual */

.portrait-pro-page .pp-capability--reverse
.pp-capability__copy {
  order: 2;
}

.portrait-pro-page .pp-capability--reverse
.pp-before-after {
  order: 1;
}


/* Comparadores dentro de las nuevas demostraciones */

.portrait-pro-page .pp-capability
.pp-before-after {
  width: 100%;
  min-width: 0;
}

.portrait-pro-page .pp-capability
.pp-before-after__viewport {
  width: 100%;
}


/* ==========================================================
   COLOR · TONOS CREATIVOS
   ========================================================== */

.portrait-pro-page .pp-capability--color {
  display: block;
}

.portrait-pro-page .pp-capability--color
.pp-capability__copy {
  max-width: 650px;
  margin-bottom:
    clamp(36px, 5vw, 60px);
}

.portrait-pro-page .pp-creative-tones {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(12px, 2vw, 24px);
}

.portrait-pro-page .pp-creative-tone {
  margin: 0;
  min-width: 0;
}

.portrait-pro-page .pp-creative-tone img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: cover;
}

.portrait-pro-page .pp-creative-tone figcaption {
  padding-top: 12px;

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.16em;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

  .portrait-pro-page .pp-value-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .portrait-pro-page .pp-capability {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 36px;
  }

  .portrait-pro-page .pp-capability__copy {
    max-width: 620px;
  }

  .portrait-pro-page .pp-capability--reverse
  .pp-capability__copy,
  .portrait-pro-page .pp-capability--reverse
  .pp-before-after {
    order: initial;
  }

  .portrait-pro-page .pp-creative-tones {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 600px) {

  .portrait-pro-page .pp-value-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .portrait-pro-page .pp-capability {
    padding:
      64px 0;
  }

  .portrait-pro-page .pp-capability__copy h3 {
    font-size:
      clamp(2.35rem, 12vw, 3.8rem);
  }

  .portrait-pro-page .pp-creative-tones {
    gap: 10px;
  }

  .portrait-pro-page .pp-creative-tone figcaption {
    font-size: 0.62rem;
  }

}



/* ==========================================================
   PORTRAIT PRO · 10 APARTADOS · GRID 5 × 2
   ========================================================== */

@media (min-width: 1101px) {

  .portrait-pro-page .pp-category-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 28px);
  }

  .portrait-pro-page .pp-category-card {
    min-width: 0;
  }

  .portrait-pro-page .pp-category-card__image {
    width: 100%;
  }

  .portrait-pro-page .pp-category-card h3 {
    font-size: clamp(1.15rem, 1.35vw, 1.45rem);
  }

  .portrait-pro-page .pp-category-card p {
    font-size: 0.9rem;
    line-height: 1.55;
  }

}


/* Tablet: 2 columnas para evitar tarjetas demasiado estrechas */

@media (min-width: 701px) and (max-width: 1100px) {

  .portrait-pro-page .pp-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* Móvil */

@media (max-width: 700px) {

  .portrait-pro-page .pp-category-grid {
    grid-template-columns: minmax(0, 1fr);
  }

}



/* ==========================================================
   PORTRAIT PRO · FONDO · ELIMINAR IMPERFECCIONES
   Demostración ampliada
   ========================================================== */

.portrait-pro-page
.pp-capability--background-cleanup {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 52px);
}

.portrait-pro-page
.pp-capability--background-cleanup
.pp-capability__copy {
  order: initial;
  max-width: 680px;
}

.portrait-pro-page
.pp-capability--background-cleanup
.pp-before-after {
  order: initial;
  width: 100%;
  max-width: none;
}


/* En pantallas grandes aprovechamos prácticamente
   todo el ancho disponible de la sección */

@media (min-width: 1101px) {

  .portrait-pro-page
  .pp-capability--background-cleanup
  .pp-before-after {
    width: 100%;
  }

}


/* ==========================================================
   PORTRAIT PRO · FONDO UNIFORMAR · DEMO VERTICAL 4:5
   ========================================================== */

.portrait-pro-page .pp-before-after--vertical {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
}

.portrait-pro-page .pp-before-after--vertical .pp-before-after__viewport {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
}

.portrait-pro-page .pp-before-after--vertical .pp-before-after__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* ==========================================================
   PORTRAIT PRO · CAPABILITIES SALES LAYER
   ========================================================== */

.pp-capability__benefit {
  display: block;
  margin: 0 0 0.8rem;

  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.15rem, 1.5vw, 1.55rem);
  font-weight: 400;
  line-height: 1.18;

  color: var(--pp-accent, #b98a5d);
}

.pp-capability__flow {
  display: block;
  margin-top: 1.1rem;

  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.14em;

  color: rgba(255, 255, 255, 0.58);
}

.pp-capability__flow b {
  padding: 0 0.28rem;
  font-weight: 400;
  color: var(--pp-accent, #b98a5d);
}


/* 16 TONOS · MAQUILLAJE */

.pp-makeup-palette {
  margin-top: 1.5rem;
  padding-top: 1.3rem;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pp-makeup-palette__number {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.pp-makeup-palette__number strong {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(2.7rem, 4vw, 4.5rem);
  font-weight: 400;
  line-height: 0.85;

  color: var(--pp-accent, #b98a5d);
}

.pp-makeup-palette__number span {
  max-width: 8rem;

  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.14em;

  color: rgba(255, 255, 255, 0.72);
}

.pp-makeup-palette__swatches {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.3rem;

  max-width: 19rem;
}

.pp-makeup-palette__swatches i {
  display: block;

  aspect-ratio: 1;
  min-width: 0;

  background: var(--swatch);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
}

.pp-makeup-palette > p {
  margin: 0.7rem 0 0;

  font-size: 0.64rem;
  line-height: 1.5;
  letter-spacing: 0.05em;

  color: rgba(255, 255, 255, 0.44);
}


/* 10 TONOS CREATIVOS */

.pp-creative-tones__intro {
  display: flex;
  align-items: center;
  gap: 1.25rem;

  margin: 1.8rem 0 1.5rem;
  padding: 1.15rem 0;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pp-creative-tones__intro > strong {
  flex: 0 0 auto;

  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(3.3rem, 6vw, 6rem);
  font-weight: 400;
  line-height: 0.8;

  color: var(--pp-accent, #b98a5d);
}

.pp-creative-tones__intro div {
  max-width: 25rem;
}

.pp-creative-tones__intro span {
  display: block;
  margin-bottom: 0.35rem;

  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.15em;

  color: rgba(255, 255, 255, 0.78);
}

.pp-creative-tones__intro p {
  margin: 0;

  font-size: 0.78rem;
  line-height: 1.55;

  color: rgba(255, 255, 255, 0.5);
}


/* RESPONSIVE */

@media (max-width: 720px) {

  .pp-capability__benefit {
    margin-bottom: 0.65rem;
    font-size: 1.15rem;
  }

  .pp-capability__flow {
    margin-top: 0.9rem;
    font-size: 0.6rem;
  }

  .pp-makeup-palette {
    margin-top: 1.2rem;
  }

  .pp-makeup-palette__swatches {
    max-width: 16rem;
  }

  .pp-creative-tones__intro {
    align-items: flex-start;
    gap: 0.9rem;
  }

  .pp-creative-tones__intro > strong {
    font-size: 3.4rem;
  }

}




/* ==========================================================
   PORTRAIT PRO · SALES JOURNEY
   Categorías → CTA → Cómo funciona → CTA final
   ========================================================== */


/* ----------------------------------------------------------
   CTA DESPUÉS DE LAS 10 CATEGORÍAS
   ---------------------------------------------------------- */

.pp-journey-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 5rem);

  margin-top: clamp(3rem, 6vw, 5.5rem);
  padding: clamp(2rem, 4vw, 3.25rem) 0;

  border-top: 1px solid rgba(185, 138, 93, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.pp-journey-cta__copy {
  max-width: 42rem;
}

.pp-journey-cta__copy > span {
  display: block;
  margin-bottom: 0.7rem;

  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;

  color: var(--pp-accent, #b98a5d);
}

.pp-journey-cta__copy h3 {
  margin: 0;

  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.9rem, 3vw, 3.1rem);
  font-weight: 400;
  line-height: 1.04;

  color: rgba(255, 255, 255, 0.96);
}

.pp-journey-cta__copy h3 em {
  display: block;
  font-weight: 400;
  color: var(--pp-accent, #b98a5d);
}

.pp-journey-cta__copy p {
  max-width: 36rem;
  margin: 1rem 0 0;

  line-height: 1.65;
  color: rgba(255, 255, 255, 0.52);
}

.pp-journey-cta__button {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;

  min-width: 18rem;
}

.pp-journey-cta__button span {
  padding-left: 1.1rem;
  border-left: 1px solid rgba(0, 0, 0, 0.22);

  font-size: 0.72rem;
  white-space: nowrap;
}


/* ----------------------------------------------------------
   ASÍ FUNCIONA PORTRAIT PRO
   ---------------------------------------------------------- */

.pp-how {
  position: relative;
  overflow: hidden;

  padding:
    clamp(5.5rem, 10vw, 9rem)
    0;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(185, 138, 93, 0.07),
      transparent 38%
    ),
    #090909;
}

.pp-how::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;

  width: min(78rem, calc(100% - 3rem));
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(185, 138, 93, 0.28),
      transparent
    );
}

.pp-how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-top: clamp(3.5rem, 7vw, 6rem);

  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.pp-how__step {
  position: relative;

  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;

  min-width: 0;
  padding:
    clamp(2rem, 4vw, 3.4rem)
    clamp(1.5rem, 3vw, 2.8rem);
}

.pp-how__step + .pp-how__step {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.pp-how__number {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(2.6rem, 4.2vw, 4.7rem);
  font-weight: 400;
  line-height: 0.8;

  color: rgba(185, 138, 93, 0.30);
}

.pp-how__eyebrow {
  display: block;
  margin-bottom: 0.55rem;

  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;

  color: var(--pp-accent, #b98a5d);
}

.pp-how__step h3 {
  margin: 0;

  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.65rem, 2.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1;

  color: rgba(255, 255, 255, 0.96);
}

.pp-how__step p {
  margin: 0.9rem 0 0;

  font-size: 0.9rem;
  line-height: 1.7;

  color: rgba(255, 255, 255, 0.52);
}

.pp-how__statement {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;

  margin-top: clamp(3rem, 6vw, 5rem);
}

.pp-how__statement > span {
  max-width: 14rem;

  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.16em;

  color: rgba(255, 255, 255, 0.42);
}

.pp-how__statement strong {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  font-weight: 400;
  line-height: 0.95;
  text-align: right;

  color: rgba(255, 255, 255, 0.95);
}

.pp-how__statement strong em {
  font-weight: 400;
  color: var(--pp-accent, #b98a5d);
}


/* ----------------------------------------------------------
   CTA DESPUÉS DE MÁS DE PORTRAIT PRO
   ---------------------------------------------------------- */

.pp-final-cta {
  position: relative;

  padding:
    clamp(3.5rem, 7vw, 6rem)
    0;

  background:
    linear-gradient(
      135deg,
      rgba(185, 138, 93, 0.07),
      rgba(255, 255, 255, 0.015) 45%,
      transparent
    );
}

.pp-final-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(185, 138, 93, 0.26),
      transparent
    );
}

.pp-final-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 6vw, 6rem);
}

.pp-final-cta__inner > div {
  max-width: 45rem;
}

.pp-final-cta__inner > div > span {
  display: block;
  margin-bottom: 0.75rem;

  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.17em;

  color: var(--pp-accent, #b98a5d);
}

.pp-final-cta h2 {
  margin: 0;

  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1;

  color: rgba(255, 255, 255, 0.96);
}

.pp-final-cta h2 em {
  font-weight: 400;
  color: var(--pp-accent, #b98a5d);
}

.pp-final-cta p {
  margin: 1rem 0 0;

  line-height: 1.65;
  color: rgba(255, 255, 255, 0.5);
}

.pp-final-cta__button {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;

  min-width: 18rem;
}

.pp-final-cta__button span {
  padding-left: 1.1rem;
  border-left: 1px solid rgba(0, 0, 0, 0.22);

  font-size: 0.72rem;
  white-space: nowrap;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

  .pp-journey-cta,
  .pp-final-cta__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .pp-journey-cta__button,
  .pp-final-cta__button {
    width: 100%;
    min-width: 0;
  }

  .pp-how__steps {
    grid-template-columns: 1fr;
  }

  .pp-how__step {
    grid-template-columns: 4rem 1fr;
  }

  .pp-how__step + .pp-how__step {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }

}


@media (max-width: 640px) {

  .pp-journey-cta {
    margin-top: 2.75rem;
  }

  .pp-how {
    padding: 5rem 0;
  }

  .pp-how__step {
    grid-template-columns: 3.1rem 1fr;
    gap: 0.8rem;
    padding: 1.8rem 0.25rem;
  }

  .pp-how__number {
    font-size: 2.5rem;
  }

  .pp-how__statement {
    align-items: flex-start;
    flex-direction: column;
  }

  .pp-how__statement strong {
    text-align: left;
  }

  .pp-final-cta {
    padding: 3.5rem 0;
  }

}


/* ==========================================================
   PORTRAIT PRO · CATEGORY META
   ========================================================== */

.pp-category-card__tags {
  margin-top: 1.15rem;
  padding-top: 0.85rem;

  border-top: 1px solid rgba(185, 138, 93, 0.12);

  font-size: 0.52rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.105em;
  text-transform: uppercase;

  color: rgba(185, 138, 93, 0.58);
}

@media (max-width: 640px) {

  .pp-category-card__tags {
    margin-top: 1rem;
    padding-top: 0.75rem;

    font-size: 0.5rem;
    letter-spacing: 0.085em;
  }

}


/* ==========================================================
   PORTRAIT PRO · PURCHASE COMMERCIAL
   ========================================================== */

.pp-purchase__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin: clamp(2rem, 4vw, 3rem) 0;

  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.pp-purchase__stats > div {
  min-width: 0;
  padding: 1.15rem .8rem;
}

.pp-purchase__stats > div:first-child {
  padding-left: 0;
}

.pp-purchase__stats > div + div {
  border-left: 1px solid rgba(255,255,255,.08);
}

.pp-purchase__stats strong {
  display: block;

  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 400;
  line-height: .9;

  color: var(--pp-accent, #b98a5d);
}

.pp-purchase__stats span {
  display: block;
  margin-top: .55rem;

  font-size: .55rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .13em;

  color: rgba(255,255,255,.46);
}


.pp-purchase__payment-type {
  margin: .75rem 0 0 !important;

  font-size: .6rem !important;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .13em;

  color: var(--pp-accent, #b98a5d) !important;
}


.pp-purchase__contents {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.pp-purchase__contents-label {
  display: block;
  margin-bottom: .85rem;

  font-size: .58rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .15em;

  color: rgba(185,138,93,.82);
}

.pp-purchase__contents .pp-purchase__includes {
  margin-top: 0;
}


@media (max-width: 640px) {

  .pp-purchase__stats > div {
    padding: 1rem .45rem;
  }

  .pp-purchase__stats strong {
    font-size: 1.9rem;
  }

  .pp-purchase__stats span {
    font-size: .48rem;
    letter-spacing: .08em;
  }

}



/* ==========================================================
   PORTRAIT PRO · PURCHASE COMPACT OVERRIDE
   ========================================================== */

.pp-purchase__product--compact {
  align-self: center;
}

.pp-purchase__promise {
  margin:
    clamp(1.4rem, 2.5vw, 2rem)
    0
    1rem;
}

.pp-purchase__promise strong,
.pp-purchase__promise span {
  display: block;

  font-family: var(--font-serif, Georgia, serif);
  font-weight: 400;
  line-height: 1.04;
}

.pp-purchase__promise strong {
  font-size:
    clamp(1.55rem, 2.6vw, 2.5rem);

  color:
    rgba(255,255,255,.94);
}

.pp-purchase__promise span {
  margin-top: .12rem;

  font-size:
    clamp(1.55rem, 2.6vw, 2.5rem);

  font-style: italic;

  color:
    var(--pp-accent, #b98a5d);
}


.pp-purchase__product--compact
.pp-purchase__summary {
  max-width: 31rem;

  margin-top: 1rem;
}


.pp-purchase__price--compact {
  margin-top:
    clamp(1.5rem, 2.5vw, 2rem);
}


.pp-purchase__mini-stats {
  display: flex;
  align-items: center;

  gap: 1.5rem;

  margin-top: 1.6rem;
  padding-top: 1.1rem;

  border-top:
    1px solid rgba(255,255,255,.09);
}

.pp-purchase__mini-stats > span {
  display: flex;
  align-items: baseline;

  gap: .4rem;

  font-size: .57rem;
  font-weight: 600;
  letter-spacing: .12em;

  color:
    rgba(255,255,255,.45);
}

.pp-purchase__mini-stats > span + span {
  padding-left: 1.5rem;

  border-left:
    1px solid rgba(255,255,255,.10);
}

.pp-purchase__mini-stats strong {
  font-family:
    var(--font-serif, Georgia, serif);

  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;

  color:
    var(--pp-accent, #b98a5d);
}


.pp-purchase__scope {
  max-width: 31rem;

  margin:
    1rem
    0
    0 !important;

  font-size:
    .67rem !important;

  line-height:
    1.65 !important;

  letter-spacing:
    .035em;

  color:
    rgba(255,255,255,.42) !important;
}


/* Ocultamos el bloque 42/10/1 anterior si su CSS
   sigue presente. El HTML ya fue sustituido. */

.pp-purchase__product--compact
.pp-purchase__stats,

.pp-purchase__product--compact
.pp-purchase__contents {
  display: none;
}


@media (max-width: 640px) {

  .pp-purchase__mini-stats {
    gap: 1rem;
  }

  .pp-purchase__mini-stats > span + span {
    padding-left: 1rem;
  }

}


/* =========================================================
   PORTRAIT PRO · COMPATIBILIDAD
   ========================================================= */

.pp-compat {
  position: relative;

  background:
    rgba(10,10,10,.98);

  border-top:
    1px solid rgba(255,255,255,.07);

  border-bottom:
    1px solid rgba(255,255,255,.07);
}


.pp-compat__inner {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 2.4rem;

  min-height: 112px;
}


.pp-compat__eyebrow {
  margin: 0;

  font-size: .58rem;
  font-weight: 600;

  line-height: 1;

  letter-spacing: .19em;

  color:
    rgba(255,255,255,.38);
}


.pp-compat__platforms {
  display: flex;
  align-items: center;

  gap: 1.6rem;
}


.pp-compat__platform {
  display: flex;
  align-items: center;

  gap: .6rem;

  font-size: .72rem;
  font-weight: 500;

  line-height: 1;

  letter-spacing: .045em;

  color:
    rgba(255,255,255,.76);
}


.pp-compat__icon {
  width: 20px;
  height: 20px;

  flex: 0 0 auto;

  color:
    rgba(255,255,255,.82);
}


.pp-compat__photoshop {
  display: grid;
  place-items: center;

  width: 23px;
  height: 23px;

  border:
    1px solid rgba(185,138,93,.68);

  border-radius: 4px;

  font-size: .62rem;
  font-weight: 600;

  line-height: 1;

  letter-spacing: -.02em;

  color:
    var(--pp-accent, #b98a5d);

  background:
    rgba(185,138,93,.07);
}


.pp-compat__separator {
  width: 1px;
  height: 22px;

  background:
    rgba(255,255,255,.10);
}


.pp-compat__language {
  margin: 0;

  font-size: .61rem;
  font-weight: 400;

  line-height: 1;

  letter-spacing: .08em;

  text-transform: uppercase;

  color:
    rgba(255,255,255,.35);
}


.pp-compat__language strong {
  font-weight: 500;

  color:
    rgba(255,255,255,.68);
}


.pp-compat__language span {
  margin:
    0
    .28rem;

  color:
    var(--pp-accent, #b98a5d);
}


@media (max-width: 760px) {

  .pp-compat__inner {
    flex-direction: column;

    gap: 1rem;

    min-height: 0;

    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }


  .pp-compat__platforms {
    width: 100%;

    justify-content: center;

    gap: 1rem;
  }


  .pp-compat__platform {
    flex-direction: column;

    gap: .45rem;

    min-width: 64px;

    font-size: .64rem;
  }


  .pp-compat__separator {
    height: 32px;
  }


  .pp-compat__icon {
    width: 19px;
    height: 19px;
  }


  .pp-compat__photoshop {
    width: 22px;
    height: 22px;
  }


  .pp-compat__language {
    font-size: .56rem;
  }

}


@media (max-width: 390px) {

  .pp-compat__platforms {
    gap: .7rem;
  }


  .pp-compat__separator {
    height: 28px;
  }


  .pp-compat__platform {
    min-width: 58px;
  }

}


/* Portrait Pro · nota de compra única */

.pp-purchase__payment-note {
  margin:
    .4rem
    0
    0;

  font-size: .58rem;
  font-weight: 400;

  line-height: 1.4;

  letter-spacing: .08em;

  text-transform: uppercase;

  color:
    rgba(255,255,255,.38);
}


/* ----------------------------------------------------------
   PORTRAIT PRO · RESULTADO EN POCOS PASOS
   ---------------------------------------------------------- */

.pp-result-flow {
  display: flex;
  align-items: center;

  gap: .8rem;

  margin-top: 1.35rem;
}


.pp-result-flow__step {
  display: flex;
  align-items: baseline;

  gap: .38rem;

  white-space: nowrap;
}


.pp-result-flow__step strong {
  font-family:
    var(--font-serif, Georgia, serif);

  font-size: 1rem;
  font-weight: 400;

  color:
    var(--pp-accent, #b98a5d);
}


.pp-result-flow__step span {
  font-size: .59rem;
  font-weight: 600;

  line-height: 1;

  letter-spacing: .12em;

  color:
    rgba(255,255,255,.66);
}


.pp-result-flow__arrow {
  font-size: .75rem;

  color:
    rgba(255,255,255,.22);
}


.pp-result-flow__step--final span {
  color:
    rgba(255,255,255,.90);
}


.pp-result-flow__step--final strong {
  font-family:
    inherit;

  font-size: .72rem;
}


@media (max-width: 760px) {

  .pp-result-flow {
    display: grid;

    grid-template-columns:
      1fr
      auto
      1fr;

    gap:
      .8rem
      .65rem;

    max-width: 22rem;

    margin-top: 1.5rem;
  }


  .pp-result-flow__step {
    justify-content: flex-start;
  }


  .pp-result-flow__arrow:nth-of-type(2) {
    display: none;
  }


  .pp-result-flow__step--final {
    grid-column:
      1
      / -1;

    padding-top: .75rem;

    border-top:
      1px solid rgba(255,255,255,.08);
  }

}


/* ==========================================================
   PORTRAIT PRO · QUALITY BREAK
   Interrupción visual después de Fondo Automático
   ========================================================== */

.pp-quality-break {
  position: relative;

  width: 100%;

  background:
    #f1efe9;

  color:
    #111;
}


.pp-quality-break__inner {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top:
    clamp(3.5rem, 6vw, 5.5rem);

  padding-bottom:
    clamp(3.5rem, 6vw, 5.5rem);

  text-align: center;
}


.pp-quality-break h2 {
  max-width: 56rem;

  margin: 0;

  font-family:
    var(--font-serif, Georgia, serif);

  font-size:
    clamp(2.5rem, 5vw, 5rem);

  font-weight: 400;

  line-height: .98;

  letter-spacing: -.025em;

  color:
    #111;
}


.pp-quality-break h2 span {
  display: block;

  color:
    var(--pp-accent, #b98a5d);
}


.pp-quality-break__flow {
  display: flex;
  align-items: center;
  justify-content: center;

  gap:
    clamp(.7rem, 1.6vw, 1.4rem);

  width: 100%;

  margin-top:
    clamp(2rem, 3.5vw, 3rem);
}


.pp-quality-break__step {
  display: flex;
  align-items: baseline;

  gap: .42rem;

  white-space: nowrap;
}


.pp-quality-break__step strong {
  font-family:
    var(--font-serif, Georgia, serif);

  font-size:
    clamp(1rem, 1.5vw, 1.3rem);

  font-weight: 400;

  color:
    var(--pp-accent, #b98a5d);
}


.pp-quality-break__step span {
  font-size:
    clamp(.58rem, .75vw, .7rem);

  font-weight: 700;

  line-height: 1;

  letter-spacing: .13em;

  color:
    rgba(17,17,17,.68);
}


.pp-quality-break__arrow {
  font-size: .85rem;

  color:
    rgba(17,17,17,.22);
}


.pp-quality-break__step--final span {
  color:
    rgba(17,17,17,.92);
}


.pp-quality-break__step--final strong {
  font-family: inherit;

  font-size: .78rem;
}


.pp-quality-break__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 1.25rem;

  min-width: 19rem;

  margin-top:
    clamp(2rem, 3.5vw, 3rem);

  padding:
    1rem
    1.4rem;

  border:
    1px solid #111;

  border-radius: 3px;

  background:
    #111;

  font-size: .65rem;
  font-weight: 700;

  line-height: 1;

  letter-spacing: .11em;

  text-decoration: none;

  color:
    #f5f2eb;

  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease;
}


.pp-quality-break__button span {
  padding-left: 1.1rem;

  border-left:
    1px solid rgba(255,255,255,.22);

  font-size: .7rem;

  white-space: nowrap;

  color:
    var(--pp-accent, #b98a5d);
}


@media (hover: hover) {

  .pp-quality-break__button:hover {
    transform:
      translateY(-2px);

    background:
      #1a1a1a;
  }

}


@media (max-width: 760px) {

  .pp-quality-break__inner {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }


  .pp-quality-break h2 {
    max-width: 22rem;

    font-size:
      clamp(2.35rem, 11vw, 3.4rem);
  }


  .pp-quality-break__flow {
    display: grid;

    grid-template-columns:
      1fr
      auto
      1fr;

    gap:
      1rem
      .7rem;

    max-width: 22rem;

    margin-top: 2.25rem;

    text-align: left;
  }


  .pp-quality-break__step {
    justify-content: flex-start;
  }


  .pp-quality-break__step span {
    font-size: .6rem;
  }


  .pp-quality-break__arrow {
    text-align: center;
  }


  .pp-quality-break__step--final {
    grid-column:
      1
      / -1;

    justify-content: center;

    margin-top: .15rem;
    padding-top: 1rem;

    border-top:
      1px solid rgba(17,17,17,.10);
  }


  .pp-quality-break__button {
    width: min(100%, 22rem);

    min-width: 0;

    margin-top: 2.25rem;
  }

}




/* ==========================================================
   PORTRAIT PRO · QUALITY BREAK · COMPACT
   ========================================================== */

.pp-quality-break__inner {
  padding-top:
    clamp(2.4rem, 4vw, 3.6rem);

  padding-bottom:
    clamp(2.4rem, 4vw, 3.6rem);
}


.pp-quality-break h2 {
  max-width: 46rem;

  font-size:
    clamp(2.15rem, 3.8vw, 3.8rem);

  line-height: .96;
}


.pp-quality-break__flow {
  margin-top:
    clamp(1.4rem, 2.4vw, 2rem);
}


.pp-quality-break__button {
  min-width: 18rem;

  margin-top:
    clamp(1.4rem, 2.4vw, 2rem);

  padding:
    1rem
    1.5rem;

  border-radius:
    999px;
}


@media (max-width: 760px) {

  .pp-quality-break__inner {
    padding-top: 2.6rem;
    padding-bottom: 2.6rem;
  }


  .pp-quality-break h2 {
    max-width: 20rem;

    font-size:
      clamp(2rem, 9.5vw, 2.8rem);
  }


  .pp-quality-break__flow {
    margin-top: 1.6rem;
  }


  .pp-quality-break__button {
    margin-top: 1.6rem;

    border-radius: 999px;
  }

}



/* ==========================================================
   PORTRAIT PRO · QUALITY BREAK · MOBILE 4 STEPS
   ========================================================== */

@media (max-width: 760px) {

  .pp-quality-break__flow {
    grid-template-columns:
      1fr
      1fr;

    column-gap: 2.2rem;
    row-gap: 1.25rem;

    max-width: 22rem;
  }


  .pp-quality-break__arrow {
    display: none;
  }


  .pp-quality-break__step {
    position: relative;

    justify-content: flex-start;

    min-width: 0;
  }


  /* Flecha entre 01 → 02 y 03 → 04 */

  .pp-quality-break__step:nth-of-type(1)::after,
  .pp-quality-break__step:nth-of-type(3)::after {
    content: "→";

    position: absolute;

    left: calc(100% + .7rem);
    top: 50%;

    transform: translateY(-50%);

    font-size: .75rem;

    color:
      rgba(17,17,17,.22);
  }


  .pp-quality-break__step--final {
    grid-column:
      1
      / -1;

    justify-content: center;

    margin-top: .15rem;
    padding-top: 1rem;

    border-top:
      1px solid rgba(17,17,17,.10);
  }

}



/* =========================================================
   PORTRAIT PRO · FAQ
========================================================= */

.pp-faq {
  position: relative;
  background: #11110f;
  padding: clamp(5rem, 8vw, 8rem) 0;
  overflow: hidden;
}

.pp-faq::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(90%, 76rem);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(190, 158, 101, 0.32),
    transparent
  );
}

.pp-faq__inner {
  position: relative;
  z-index: 1;
}


/* HEADER */

.pp-faq__header {
  max-width: 52rem;
  margin: 0 auto clamp(2.8rem, 5vw, 4.5rem);
  text-align: center;
}

.pp-faq__eyebrow {
  display: block;
  margin-bottom: 1rem;

  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.22em;

  color: #bda06c;
}

.pp-faq__header h2 {
  margin: 0;

  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;

  color: #f3f0e9;
}

.pp-faq__header h2 span {
  display: block;
  color: #bda06c;
}


/* LISTA */

.pp-faq__list {
  width: min(100%, 62rem);
  margin: 0 auto;
}


/* TARJETA */

.pp-faq__item {
  position: relative;

  margin: 0 0 0.75rem;

  background: rgba(255, 255, 255, 0.025);

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1rem;

  overflow: hidden;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.pp-faq__item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(190, 158, 101, 0.28);
}

.pp-faq__item[open] {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(190, 158, 101, 0.42);
}


/* PREGUNTA */

.pp-faq__question {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

  min-height: 5rem;
  padding: 1.35rem 1.6rem;

  cursor: pointer;
  list-style: none;

  color: #f1eee7;

  font-size: clamp(1rem, 1.5vw, 1.12rem);
  font-weight: 500;
  line-height: 1.4;

  transition: color 180ms ease;
}

.pp-faq__question::-webkit-details-marker {
  display: none;
}

.pp-faq__question::marker {
  content: "";
}

.pp-faq__item[open] .pp-faq__question {
  color: #d0b27a;
}


/* ICONO + / − */

.pp-faq__icon {
  position: relative;

  flex: 0 0 2rem;

  width: 2rem;
  height: 2rem;

  border: 1px solid rgba(190, 158, 101, 0.38);
  border-radius: 50%;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 220ms ease;
}

.pp-faq__icon::before,
.pp-faq__icon::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 0.72rem;
  height: 1px;

  background: #c7a96f;

  transform: translate(-50%, -50%);

  transition:
    opacity 180ms ease,
    transform 220ms ease;
}

.pp-faq__icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}

.pp-faq__item[open] .pp-faq__icon {
  background: rgba(190, 158, 101, 0.11);
  border-color: rgba(190, 158, 101, 0.7);
  transform: rotate(180deg);
}

.pp-faq__item[open] .pp-faq__icon::after {
  opacity: 0;
}


/* RESPUESTA */

.pp-faq__answer {
  padding:
    0
    clamp(1.6rem, 3vw, 2.2rem)
    clamp(1.5rem, 3vw, 2rem);
}

.pp-faq__answer p {
  max-width: 49rem;
  margin: 0;

  color: rgba(239, 235, 226, 0.68);

  font-size: 0.98rem;
  line-height: 1.75;
}

.pp-faq__answer strong {
  color: #d1b57d;
  font-weight: 600;
}


/* PRECIO ESPECIAL */

.pp-faq__upgrade-link {
  display: inline-flex;
  align-items: center;

  margin-top: 1.2rem;

  color: #c7a96f;

  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.13em;

  text-decoration: none;

  border-bottom: 1px solid rgba(199, 169, 111, 0.35);

  padding-bottom: 0.3rem;

  transition:
    color 180ms ease,
    border-color 180ms ease;
}

.pp-faq__upgrade-link:hover {
  color: #ead3a5;
  border-color: #ead3a5;
}


/* CTA FINAL */

.pp-faq__cta {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: clamp(3rem, 5vw, 4.5rem);

  text-align: center;
}

.pp-faq__cta > p {
  margin: 0 0 1.15rem;

  color: rgba(241, 238, 231, 0.68);

  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

.pp-faq__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;

  min-height: 3.35rem;
  padding: 0.95rem 1.6rem;

  background: #bda06c;
  color: #11110f;

  border-radius: 999px;

  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;

  text-decoration: none;

  transition:
    transform 180ms ease,
    background 180ms ease;
}

.pp-faq__button span {
  padding-left: 0.85rem;

  border-left: 1px solid rgba(17, 17, 15, 0.24);

  font-weight: 600;
  letter-spacing: 0.03em;
}

.pp-faq__button:hover {
  transform: translateY(-2px);
  background: #ccb17d;
}


/* ACCESIBILIDAD */

.pp-faq__question:focus-visible,
.pp-faq__button:focus-visible,
.pp-faq__upgrade-link:focus-visible {
  outline: 2px solid #d1b57d;
  outline-offset: 4px;
}


/* =========================================================
   PORTRAIT PRO · FAQ · MOBILE
========================================================= */

@media (max-width: 760px) {

  .pp-faq {
    padding: 4.5rem 0;
  }

  .pp-faq__header {
    margin-bottom: 2.5rem;
  }

  .pp-faq__header h2 {
    max-width: 21rem;
    margin-inline: auto;

    font-size: clamp(2.25rem, 10vw, 3.2rem);
    line-height: 1;
  }

  .pp-faq__eyebrow {
    font-size: 0.67rem;
    letter-spacing: 0.18em;
  }

  .pp-faq__item {
    margin-bottom: 0.65rem;
    border-radius: 0.9rem;
  }

  .pp-faq__question {
    gap: 1rem;

    min-height: 4.5rem;
    padding: 1.15rem 1.2rem;

    font-size: 0.96rem;
    line-height: 1.35;
  }

  .pp-faq__icon {
    flex-basis: 1.8rem;

    width: 1.8rem;
    height: 1.8rem;
  }

  .pp-faq__answer {
    padding:
      0
      1.2rem
      1.35rem;
  }

  .pp-faq__answer p {
    font-size: 0.92rem;
    line-height: 1.65;
  }

  .pp-faq__cta {
    margin-top: 2.8rem;
  }

  .pp-faq__button {
    width: 100%;
    max-width: 22rem;

    min-height: 3.4rem;
  }

}


/* RESPETA USUARIOS SIN ANIMACIONES */

@media (prefers-reduced-motion: reduce) {

  .pp-faq__item,
  .pp-faq__icon,
  .pp-faq__icon::before,
  .pp-faq__icon::after,
  .pp-faq__button,
  .pp-faq__upgrade-link {
    transition: none;
  }

}


/* =========================================================
   PORTRAIT PRO · FAQ · DENSIDAD FINAL
========================================================= */

.pp-faq__item {
  margin-bottom: 0.35rem;
  border-radius: 0.8rem;
}

.pp-faq__question {
  min-height: 0;
  padding: 0.72rem 1.25rem;
  gap: 1.25rem;
}

.pp-faq__icon {
  flex: 0 0 1.55rem;
  width: 1.55rem;
  height: 1.55rem;
}

.pp-faq__icon::before,
.pp-faq__icon::after {
  width: 0.58rem;
}

.pp-faq__answer {
  padding:
    0.15rem
    1.25rem
    1rem;
}


/* MOBILE */

@media (max-width: 760px) {

  .pp-faq__item {
    margin-bottom: 0.35rem;
  }

  .pp-faq__question {
    min-height: 0;
    padding: 0.78rem 1rem;
  }

  .pp-faq__icon {
    flex-basis: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
  }

  .pp-faq__answer {
    padding:
      0.1rem
      1rem
      0.95rem;
  }

}