:root {
  --bg: #11100d;
  --bg-soft: #191711;
  --paper: #e7dcc4;
  --paper-dark: #cbb98f;
  --ink: #f7f0df;
  --muted: rgba(247, 240, 223, 0.68);
  --line: rgba(247, 240, 223, 0.18);
  --accent: #e4873c;
  --accent-soft: rgba(228, 135, 60, 0.18);
  --accent-blue: #516b67;
  --shadow: rgba(0, 0, 0, 0.45);
  --max: 1180px;
  --font-title: "Palast VAR", "Palast", Georgia, "Times New Roman", serif;
  --font-body: Helvetica, Arial, sans-serif;
}

/*
@font-face {
  font-family: "Palast VAR";
  src: url("fonts/PalastVAR.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
*/

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

body::selection {
  background: var(--accent);
  color: var(--bg);
}

h1,
h2,
h3 {
  font-family: var(--font-title);
  font-weight: 400;
}

p {
  margin-top: 0;
}

button {
  font-family: var(--font-body);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.16;
  background-image:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.22) 0 1px, transparent 1px),
    radial-gradient(circle at 75% 80%, rgba(255,255,255,0.14) 0 1px, transparent 1px);
  background-size: 42px 42px, 31px 31px;
  mix-blend-mode: overlay;
}

/* HERO */

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 120px 24px 80px;
  overflow: hidden;
}

.hero-visual {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 42%, rgba(228, 135, 60, 0.18), transparent 36%),
    linear-gradient(140deg, #14120d 0%, #252013 45%, #0e1211 100%);
}

.map-grid {
  position: absolute;
  inset: -20%;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(247,240,223,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,240,223,0.18) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: rotate(-8deg);
}



.hero-content {
  width: min(100%, var(--max));
  text-align: center;
}

.eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--accent);
}

.hero-title {
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(58px, 10vw, 142px);
  line-height: 0.88;
  letter-spacing: -0.07em;
  text-wrap: balance;
}

.hero-lead {
  max-width: 680px;
  margin: 34px auto 0;
  font-family: var(--font-title);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.18;
  color: var(--muted);
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 64px;
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
}

.scroll-cue span {
  width: 42px;
  height: 1px;
  background: var(--ink);
  display: inline-block;
  transform-origin: left;
  animation: pulseLine 1.8s infinite ease-in-out;
}

@keyframes pulseLine {
  0%, 100% {
    transform: scaleX(0.4);
    opacity: 0.35;
  }

  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* QUOTE SECTION / 00 */

.quote-section {
  position: relative;
  min-height: 260vh;
  overflow: visible;
}

.quote-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 24px;
  overflow: hidden;
}

.quote-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(247,240,223,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,240,223,0.08) 1px, transparent 1px);
  background-size: 74px 74px;
  transform: rotate(-4deg) scale(1.1);
}

.quote-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(17,16,13,0.95), rgba(17,16,13,0.5), rgba(17,16,13,0.96)),
    linear-gradient(180deg, rgba(17,16,13,0.2), rgba(17,16,13,0.95));
}


.quote-content {
  position: relative;
  z-index: 1;
  width: min(100%, var(--max));
  margin: 0 auto;
}

.quote-number {
  margin-bottom: 34px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.quote-title {
  max-width: 980px;
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(48px, 8vw, 118px);
  line-height: 0.92;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.quote-mark {
  margin-top: 70px;
  font-family: var(--font-title);
  font-size: clamp(110px, 16vw, 220px);
  line-height: 0.55;
  color: var(--accent);
}

.quote-body {
  max-width: 760px;
  margin: 0;
  padding-left: clamp(0px, 8vw, 120px);
  font-family: var(--font-title);
  font-size: clamp(28px, 4.2vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-wrap: balance;
}

.scroll-words .scroll-word {
  display: inline-block;
  opacity: 0.08;
  transform: translateY(28px) scale(0.96);
  will-change: opacity, transform, filter;
}

/* CHAPTERS */

.chapter,
.chapter-group {
  width: min(100% - 48px, var(--max));
  margin: 0 auto;
}

.chapter {
  position: relative;
  padding: 130px 0;
  border-top: 1px solid var(--line);
}

.chapter-split {
  display: grid;
  grid-template-columns: 0.45fr 1.3fr 0.9fr;
  gap: 42px;
  align-items: start;
}

.chapter-number {
  font-family: var(--font-title);
  font-size: clamp(56px, 8vw, 112px);
  line-height: 0.8;
  color: var(--accent);
  letter-spacing: -0.07em;
}

.chapter-copy {
  max-width: 840px;
}

.chapter-copy h2 {
  margin: 0;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.chapter-copy p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 28px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--muted);
}

/* CARDS */

.definition-card,
.type-card,
.focus-card,
.data-card,
.comparison-card,
.mini-banner,
.config-panel,
.route-line,
.word-column {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 24px 70px var(--shadow);
}

.definition-card {
  padding: 28px;
}

.definition-card span,
.type-card span,
.focus-card span,
.route-line span {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.definition-card p,
.type-card p,
.focus-card p,
.route-line p,
.word-column span {
  color: var(--muted);
  line-height: 1.5;
}

/* COOKIE TYPES */

.cookie-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 60px;
}

.type-card {
  min-height: 220px;
  padding: 24px;
}

/* MINI BANNER */

.mini-banner {
  padding: 32px;
  background: var(--paper);
  color: #18150f;
}

.mini-label {
  margin-bottom: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #8a6738;
}

.mini-banner h3 {
  margin: 0 0 14px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.mini-banner p {
  line-height: 1.5;
}

.mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.mini-actions button,
.config-row button,
.config-actions button {
  border: 0;
  padding: 13px 16px;
  cursor: pointer;
  background: #18150f;
  color: var(--paper);
}

.mini-actions button:nth-child(2),
.config-actions .secondary {
  background: transparent;
  color: #18150f;
  outline: 1px solid #18150f;
}

.mini-actions button:nth-child(3) {
  background: transparent;
  color: #18150f;
  text-decoration: underline;
}

/* ANATOMY / FULLSCREEN SCROLL */

.anatomy-fullscreen-section {
  position: relative;
  width: 100vw;
  min-height: 900vh;
  margin-left: calc(50% - 50vw);
  border-top: 1px solid rgba(17, 16, 13, 0.08);
  background: #ffffff;
  color: #11100d;
}

.anatomy-fullscreen-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
}

.anatomy-fullscreen-image-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #ffffff;
}

.anatomy-layer-image,
.anatomy-annotation {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  transform:
    translate(-50%, -50%)
    translate(var(--anatomy-x, 0%), var(--anatomy-y, 0%))
    scale(var(--anatomy-scale, 1));
  transform-origin: center center;
  will-change: transform, opacity;
}

.anatomy-layer-image {
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.anatomy-layer-image.is-visible {
  opacity: 1;
}

.anatomy-image-second {
  z-index: 2;
}

/* ANOTACIONES TIPO MANUAL */

.anatomy-annotation {
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.anatomy-annotation.is-visible {
  opacity: 1;
}

.annotation-path {
  fill: none;
  stroke: #e4873c;
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 34 30;
}

.annotation-path-one {
  stroke-dashoffset: var(--annotation-offset-one, 0);
}

/* BARRAS ANIMADAS SOBRE EL TEXTO DEL BANNER */

.anatomy-text-lines {
  position: absolute;
  left: 48.7%;
  top: 48.5%;
  width: 100vw;
  height: 100vh;
  transform:
    translate(-50%, -50%)
    translate(var(--anatomy-x, 0%), var(--anatomy-y, 0%))
    scale(var(--anatomy-scale, 1));
  transform-origin: center center;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform, opacity;
}

.anatomy-text-lines.is-visible {
  opacity: 1;
}

.text-line {
  position: absolute;
  left: 37%;
  width: 20%;
  height: 4px;
  background: #e3863d;
  transform-origin: left center;
  border-radius: 999px;
  animation: textLinePulse 2s ease-in-out infinite;
}

/*
  Ajustes de posición:
  - left: mueve las dos líneas a izquierda/derecha.
  - width: alarga o acorta las dos líneas.
  - top de cada línea: sube o baja cada barra por separado.
*/

.text-line-bottom {
  top: 55.4%;
  left: 37%;
  width: 20%;
  animation-delay: 0.18s;
}

@keyframes textLinePulse {
  0%, 100% {
    transform: scaleX(0.72);
  }

  50% {
    transform: scaleX(1);
  }
}

/* LÍNEA ANIMADA DEBAJO DE LOS BOTONES */

.anatomy-button-line {
  position: absolute;
  left: 53.3%;
  top: 41.3%;
  width: 100vw;
  height: 100vh;
  transform:
    translate(-50%, -50%)
    translate(var(--anatomy-x, 0%), var(--anatomy-y, 0%))
    scale(var(--anatomy-scale, 1));
  transform-origin: center center;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform, opacity;
}

.anatomy-button-line.is-visible {
  opacity: 1;
}

.button-line {
  position: absolute;
  left: 35.6%;
  top: 65%;
  width: 26.8%;
  height: 4px;
  background: #e3863d;
  border-radius: 999px;
  transform-origin: center center;
  animation: buttonLinePulse 2s ease-in-out infinite;
}

/*
  Ajustes rápidos:
  - top: sube o baja la línea.
  - left: mueve la línea a izquierda/derecha.
  - width: alarga o acorta la línea.
  - height: cambia el grosor de la línea.
*/
@keyframes buttonLinePulse {
  0%, 100% {
    transform: scaleX(0.72);
  }

  50% {
    transform: scaleX(1);
  }
}


.anatomy-screen-header {
  position: absolute;
  top: 34px;
  left: 36px;
  z-index: 7;
  display: flex;
  align-items: baseline;
  gap: 18px;
  color: #11100d;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.anatomy-screen-header.is-faded {
  opacity: 0;
  transform: translateY(-12px);
}

.anatomy-section-number {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(42px, 5vw, 88px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--accent);
}

.anatomy-section-kicker {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}

.anatomy-progress {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 26px;
  z-index: 7;
  height: 2px;
  background: rgba(17, 16, 13, 0.12);
}

.anatomy-progress span {
  display: block;
  width: calc(var(--anatomy-progress, 0) * 100%);
  height: 100%;
  background: var(--accent);
}

/* TEXTOS FLOTANTES ANATOMÍA */

.anatomy-floating-copy {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.anatomy-copy-step {
  position: absolute;
  width: min(380px, calc(100vw - 72px));
  padding: 20px 22px 20px;
  background: rgba(17, 16, 13, 0.94);
  border: 1px solid rgba(228, 135, 60, 0.42);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0.35s ease;
  transform: translateX(var(--copy-slide-x, 0px)) translateY(18px) scale(0.98);
}

.anatomy-copy-step.is-active {
  opacity: 1;
  visibility: visible;
}

.anatomy-copy-step.pos-top-left {
  top: 104px;
  left: 36px;
}

.anatomy-copy-step.pos-top-right {
  top: 104px;
  right: 36px;
}

.anatomy-copy-step.pos-bottom-left {
  bottom: 66px;
  left: 36px;
}

.anatomy-copy-step.pos-bottom-right {
  bottom: 66px;
  right: 36px;
}

.anatomy-copy-step.pos-middle-left {
  top: 50%;
  left: 36px;
  transform: translateX(var(--copy-slide-x, 0px)) translateY(calc(-50% + 18px)) scale(0.98);
}

.anatomy-copy-step.pos-middle-right {
  top: 50%;
  right: 36px;
  transform: translateX(var(--copy-slide-x, 0px)) translateY(calc(-50% + 18px)) scale(0.98);
}

.anatomy-copy-step.is-active.pos-top-left,
.anatomy-copy-step.is-active.pos-top-right,
.anatomy-copy-step.is-active.pos-bottom-left,
.anatomy-copy-step.is-active.pos-bottom-right {
  transform: translateX(var(--copy-slide-x, 0px)) scale(1);
}

.anatomy-copy-step.is-active.pos-middle-left,
.anatomy-copy-step.is-active.pos-middle-right {
  transform: translateX(var(--copy-slide-x, 0px)) translateY(-50%) scale(1);
}

.anatomy-copy-step .eyebrow {
  color: var(--accent);
  margin-bottom: 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
}

.anatomy-copy-step h2 {
  margin: 0;
  color: var(--accent);
  font-size: clamp(28px, 2.8vw, 46px);
  line-height: 0.96;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.anatomy-copy-step p:not(.eyebrow) {
  margin: 14px 0 0;
  color: rgba(228, 135, 60, 0.92);
  font-size: 14px;
  line-height: 1.45;
  max-width: 32ch;
}

/* FOCUS */

.focus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 60px;
}

.focus-card {
  min-height: 230px;
  padding: 24px;
}

/* ROUTES */

.route-comparison {
  display: grid;
  gap: 18px;
  margin-top: 60px;
}

.route-line {
  padding: 28px;
}

.route-line p {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -0.04em;
  color: var(--ink);
}

/* CONFIG */

.config-section {
  display: grid;
  grid-template-columns: 0.45fr 1.2fr 1fr;
  gap: 42px;
  align-items: start;
}

.config-panel {
  padding: 28px;
  background: var(--paper);
  color: #18150f;
}

.config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0,0,0,0.16);
}

.config-row span {
  font-weight: 700;
}

.config-row strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.56;
}

.config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* WORDS */

.words-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 60px;
}

.word-column {
  padding: 30px;
}

.word-column h3 {
  margin: 0 0 30px;
  font-size: clamp(34px, 4vw, 62px);
  letter-spacing: -0.05em;
}

.word-column span {
  display: block;
  padding: 14px 0;
  font-size: 18px;
}

/* DATA */

.data-section {
  min-height: 100vh;
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 60px;
}

.data-card {
  padding: 28px;
  min-height: 260px;
}

.data-card strong {
  display: block;
  margin-bottom: 24px;
  font-family: var(--font-title);
  font-size: clamp(64px, 8vw, 120px);
  line-height: 0.8;
  letter-spacing: -0.08em;
  color: var(--accent);
}

.data-card p {
  color: var(--muted);
  line-height: 1.5;
}

/* FINAL */

.final-comparison {
  padding-bottom: 160px;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 60px;
}

.comparison-card {
  padding: 42px;
  min-height: 560px;
}

.comparison-card.push {
  background: linear-gradient(180deg, rgba(228, 135, 60, 0.16), rgba(255,255,255,0.035));
}

.comparison-card.care {
  background: linear-gradient(180deg, rgba(81, 107, 103, 0.25), rgba(255,255,255,0.035));
}

.comparison-card h3 {
  margin: 0;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.comparison-card ul {
  margin: 40px 0 0;
  padding-left: 20px;
}

.comparison-card li {
  margin-bottom: 14px;
  color: var(--muted);
  line-height: 1.45;
}

/* ANIMATION */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.split-random .char {
  display: inline-block;
  opacity: 0;
  transform:
    translateY(calc(var(--random-y) * 1px))
    rotate(calc(var(--random-r) * 1deg));
  transition:
    opacity 0.8s ease,
    transform 1.2s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i) * 18ms);
}

.split-random.is-visible .char {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* RESPONSIVE */

@media (max-width: 980px) {
  .chapter-split,
  .config-section,
  .cookie-types,
  .focus-grid,
  .data-grid,
  .comparison-grid,
  .words-grid {
    grid-template-columns: 1fr;
  }

  .chapter {
    padding: 96px 0;
  }

  .hero-title {
    font-size: clamp(54px, 16vw, 110px);
  }

  .anatomy-fullscreen-section {
    min-height: 960vh;
  }

  .anatomy-screen-header {
    left: 20px;
    top: 24px;
  }

  .anatomy-progress {
    left: 20px;
    right: 20px;
  }

  .anatomy-copy-step {
    width: min(340px, calc(100vw - 40px));
  }

  .anatomy-copy-step.pos-top-left,
  .anatomy-copy-step.pos-top-right {
    top: 96px;
  }

  .anatomy-copy-step.pos-top-left,
  .anatomy-copy-step.pos-middle-left,
  .anatomy-copy-step.pos-bottom-left {
    left: 20px;
  }

  .anatomy-copy-step.pos-top-right,
  .anatomy-copy-step.pos-middle-right,
  .anatomy-copy-step.pos-bottom-right {
    right: 20px;
  }

  .anatomy-copy-step.pos-bottom-left,
  .anatomy-copy-step.pos-bottom-right {
    bottom: 54px;
  }
}

@media (max-width: 700px) {
  .quote-section {
    min-height: 230vh;
  }

  .quote-sticky {
    padding: 100px 18px;
  }

  .quote-body {
    padding-left: 0;
  }

  .quote-mark {
    margin-top: 60px;
  }
}

@media (max-width: 560px) {
  .chapter,
  .chapter-group {
    width: min(100% - 32px, var(--max));
  }

  .hero {
    padding-inline: 18px;
  }

  .mini-actions,
  .config-actions {
    flex-direction: column;
  }

  .mini-actions button,
  .config-actions button {
    width: 100%;
  }

  .anatomy-copy-step {
    width: calc(100vw - 32px);
    padding: 18px 18px 18px;
  }

  .anatomy-copy-step.pos-top-left,
  .anatomy-copy-step.pos-top-right,
  .anatomy-copy-step.pos-middle-left,
  .anatomy-copy-step.pos-middle-right,
  .anatomy-copy-step.pos-bottom-left,
  .anatomy-copy-step.pos-bottom-right {
    left: 16px;
    right: auto;
  }

  .anatomy-copy-step.pos-top-left,
  .anatomy-copy-step.pos-top-right {
    top: 92px;
  }

  .anatomy-copy-step.pos-middle-left,
  .anatomy-copy-step.pos-middle-right {
    top: 50%;
  }

  .anatomy-copy-step.pos-bottom-left,
  .anatomy-copy-step.pos-bottom-right {
    bottom: 48px;
  }

  .anatomy-copy-step h2 {
    font-size: clamp(26px, 7vw, 34px);
    line-height: 0.98;
  }

  .anatomy-copy-step p:not(.eyebrow) {
    font-size: 13px;
    max-width: 100%;
  }
}

/* APARTADO 10 / BOTONES SÍNTESIS FINAL */

.synthesis-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.synthesis-buttons {
  display: flex;
  justify-content: center;
  gap: clamp(34px, 5vw, 72px);
  margin-top: clamp(90px, 11vw, 150px);
  flex-wrap: wrap;
}

.synthesis-button {
  appearance: none;
  border: 1px #e3863d;
  background: #e3863d;
  color: #0d0d0b;
  padding: 18px 34px;
  border-radius: 999px;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 0 18px rgba(255, 90, 0, 0.28),
    0 14px 34px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.synthesis-button:hover,
.synthesis-button.is-active {
  transform: translateY(-3px);
  box-shadow:
    0 0 28px rgba(255, 90, 0, 0.5),
    0 18px 42px rgba(0, 0, 0, 0.36);
}

.synthesis-button:active {
  transform: translateY(0);
}

/* Capa oscura detrás de la ventana falsa */

.synthesis-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #0f0e0b;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.synthesis-section.has-fake-popup-open::after {
  opacity: 1;
  visibility: visible;
}

/* Ventana falsa de navegador */

.fake-popup-window {
  position: absolute;
  top: clamp(22px, 3vw, 42px);
  bottom: clamp(22px, 3vw, 42px);
  left: clamp(22px, 3vw, 42px);
  right: clamp(22px, 3vw, 42px);
  z-index: 30;

  display: flex;
  flex-direction: column;

  background: #f4efe4;
  border: 2px solid rgba(255, 90, 0, 0.9);
  border-radius: 18px;
  overflow: hidden;

  box-shadow:
    0 0 34px rgba(255, 90, 0, 0.22),
    0 30px 90px rgba(0, 0, 0, 0.5);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform-origin: left bottom;
  transform: translate(-18px, 18px) scale(0.08);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.78s cubic-bezier(.16, 1, .3, 1);
}

.fake-popup-window.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, 0) scale(1);
}

.fake-popup-topbar {
  height: 54px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  gap: 14px;

  padding: 0 18px;
  background: #11100d;
  border-bottom: 2px solid rgba(255, 90, 0, 0.9);
}

.fake-popup-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fake-popup-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5a00;
}

.fake-popup-address {
  flex: 1;
  height: 28px;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 0 14px;
  border: 1px solid rgba(255, 90, 0, 0.5);
  border-radius: 999px;

  color: rgba(244, 239, 228, 0.78);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
}

.fake-popup-lock {
  flex-shrink: 0;
  font-size: 0.9rem;
  line-height: 1;
}

.fake-popup-url {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fake-popup-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #f4efe4;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

/* Loading circular */

.fake-popup-loader {
  position: absolute;
  inset: 54px 0 0;
  z-index: 5;

  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;

  padding: clamp(32px, 5vw, 72px);
  background: #f4efe4;

  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

.fake-popup-window.is-loading .fake-popup-loader {
  opacity: 1;
  visibility: visible;
}

.fake-popup-loader p {
  order: 2;
  margin: 0;
  color: #11100d;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fake-loader-track {
  order: 1;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2px solid rgba(17, 16, 13, 0.14);
  border-top-color: #e4873c;
  border-right-color: #e4873c;
  animation: fakeSpinner 0.9s linear infinite;
}

.fake-loader-track span {
  display: none;
}

@keyframes fakeSpinner {
  to {
    transform: rotate(360deg);
  }
}

/* Contenido de la web falsa */

.fake-popup-content {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: clamp(22px, 3vw, 44px);
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
  overflow: auto;
  background: #f4efe4;
}

.fake-popup-window.is-loaded .fake-popup-content {
  opacity: 1;
  transform: translateY(0);
}

.fake-webpage {
  display: none;
  width: 100%;
  min-height: 100%;
  color: #11100d;
}

.fake-webpage.is-active {
  display: block;
}

.fake-web-kicker {
  margin: 0 0 18px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e4873c;
}

.fake-web-title {
  margin: 0;
  max-width: 10ch;
  font-family: var(--font-title);
  font-size: clamp(56px, 7vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: #11100d;
}

.fake-web-text {
  max-width: 620px;
  margin: 28px 0 48px;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.5;
  color: rgba(17, 16, 13, 0.72);
}

.fake-web-list {
  display: grid;
  gap: 0;
  max-width: 760px;
  
}

.fake-web-item {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid rgba(17, 16, 13, 0.16);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.25;
  color: #11100d;
}

/* Web falsa de Cuidar */

.fake-webpage-cuidar {
  position: relative;
  min-height: 100%;
  background: #f4efe4;
}

.care-site-kicker {
  margin: 0 0 18px;
  color: #e4873c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


.care-site-lines {
  display: grid;
  gap: 18px;
  max-width: 720px;
  margin-top: 56px;
}

.care-site-lines span {
  height: 1px;
  background: rgba(17, 16, 13, 0.16);
}

/* Cookie Cuidar dentro del fake popup */

.care-cookie-screen {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  min-height: 100%;
  padding: clamp(24px, 4vw, 54px);
  background: rgba(244, 239, 228, 0.8);
  z-index: 8;
}
 /*
.care-cookie-screen.is-active {
  display: grid;
  place-items: center;
}
*/
.care-cookie-banner {
  width: min(1040px, 96%);
  padding: clamp(34px, 4vw, 58px);
  border: 3px solid #11100d;
  border-radius: 54px;
  background: #f4efe4;
  color: #11100d;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.13);
  transform: translateY(18px) scale(0.98);
  animation: careCookieAppear 0.45s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes careCookieAppear {
  to {
    transform: translateY(0) scale(1);
  }
}

.care-cookie-kicker,
.care-config-kicker {
  margin: 0 0 28px;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.care-cookie-text {
  max-width: 900px;
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.18;
}

.care-cookie-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 4vw, 44px);
  margin-top: clamp(34px, 5vw, 54px);
}

.care-cookie-button {
  appearance: none;
  border: 2.5px solid #11100d;
  background: transparent;
  color: #11100d;
  border-radius: 999px;
  padding: 16px 28px;
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.care-cookie-button:hover {
  transform: translateY(-3px);
  background: #11100d;
  color: #f4efe4;
}

.care-cookie-button:active {
  transform: translateY(0);
}

.care-cookie-config.is-active {
  display: grid;
  align-items: start;
  justify-items: center;
  padding-top: clamp(12px, 2vw, 26px);
  padding-bottom: clamp(24px, 3vw, 42px);
}

.care-config-panel {
  width: min(600px, 94%);
  padding: clamp(28px, 4vw, 42px);
  border: 2.5px solid #11100d;
  border-radius: 32px;
  background: #f4efe4;
  color: #11100d;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.13);
}

.care-config-text {
  margin: 0 0 28px;
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.55;
  font-weight: 500;
}

.care-config-options {
  display: grid;
  gap: 18px;
}

.care-config-row {
  appearance: none;
  width: 100%;
  min-height: 68px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1.8px solid #11100d;
  background: transparent;
  color: #11100d;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease;
}

.care-config-row:hover {
  transform: translateX(4px);
  background: rgba(17, 16, 13, 0.04);
}

.care-toggle {
  flex: 0 0 auto;
  position: relative;
  width: 70px;
  height: 38px;
  border: 2px solid #11100d;
  border-radius: 999px;
  background: #f4efe4;
}

.care-toggle::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #11100d;
  transition: transform 0.22s ease;
}

.care-toggle.is-on::before {
  transform: translateX(31px);
}

.care-config-actions {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}

.care-config-actions .care-cookie-button {
  width: 100%;
  padding: 12px 22px;
  font-size: clamp(19px, 2.2vw, 30px);
}

@media (max-width: 760px) {
  .care-cookie-actions {
    grid-template-columns: 1fr;
  }

  .care-cookie-banner {
    border-radius: 36px;
  }

  .care-cookie-button {
    width: 100%;
  }

  .fake-popup-window {
    top: 18px;
    bottom: 18px;
    left: 18px;
    right: 18px;
  }
}

@media (max-width: 560px) {
  .fake-popup-topbar {
    padding: 0 12px;
    gap: 10px;
  }

  .fake-popup-address {
    font-size: 0.58rem;
  }

  .care-cookie-screen {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal,
  .split-random .char,
  .scroll-words .scroll-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* AJUSTE COOKIE CUIDAR COMO BANNER INFERIOR */

.fake-popup-content {
  position: relative;
  overflow: hidden;
}

.fake-webpage-cuidar {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

.care-cookie-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  display: none;
  pointer-events: none;
}

.care-cookie-screen.is-active {
  display: grid;
  align-items: end;
  justify-items: center;
  padding: clamp(18px, 3vw, 36px);
  pointer-events: auto;
}

.care-cookie-banner {
  width: min(100%, 1040px);
  max-width: 100%;
  padding: clamp(26px, 3vw, 42px) clamp(32px, 4vw, 56px);
  border: 2.5px solid #11100d;
  border-radius: clamp(34px, 5vw, 58px);
  background: #f4efe4;
  color: #11100d;
  box-shadow: 0 22px 60px rgba(17, 16, 13, 0.18);
  overflow: hidden;
}

.care-cookie-kicker {
  margin: 0 0 22px;
  font-size: clamp(17px, 1.6vw, 26px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.care-cookie-text {
  max-width: 900px;
  margin: 0;
  font-size: clamp(21px, 2.3vw, 32px);
  line-height: 1.18;
}

.care-cookie-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 36px);
  margin-top: clamp(28px, 4vw, 48px);
}

.care-cookie-button {
  width: 100%;
  min-width: 0;
  padding: clamp(12px, 1.5vw, 18px) clamp(16px, 2vw, 28px);
  font-size: clamp(21px, 2.4vw, 36px);
  white-space: nowrap;
}

/* AJUSTE BOTONES COOKIE CUIDAR */

.care-cookie-text {
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1.22;
}

.care-cookie-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
}

.care-cookie-button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;

  padding: clamp(12px, 1.4vw, 17px) clamp(12px, 1.8vw, 24px);

  font-size: clamp(18px, 2vw, 30px);
  line-height: 1;
  letter-spacing: 0.035em;
  white-space: nowrap;

  overflow: hidden;
  text-align: center;
}

.care-cookie-button:hover {
  background: #e3863d;
  border-color: #e3863d;
  color: #11100d;
}

/* BLOQUEAR SCROLL DE LA WEB CUANDO EL FAKE POPUP ESTÁ ABIERTO */

html.is-fake-popup-open,
body.is-fake-popup-open {
  overflow: hidden;
}

/* Permite que el contenido del fake popup pueda desplazarse sin mover la web de atrás */

.fake-popup-window {
  overscroll-behavior: contain;
}

.fake-popup-content {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* QUITAR VELO / BORROSO CUANDO APARECE LA COOKIE CUIDAR */

.fake-webpage-cuidar,
.fake-webpage-cuidar * {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.care-cookie-screen {
  background: transparent !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.care-cookie-screen::before,
.care-cookie-screen::after {
  display: none !important;
  content: none !important;
}


/* POSICIÓN PANEL CONFIGURAR COOKIES */

.fake-webpage-cuidar .care-cookie-config.is-active {
  display: grid;
  align-items: start !important;
  justify-items: center;
  padding-top: 0 !important;
  padding-bottom: 24px !important;
}

.fake-webpage-cuidar .care-cookie-config.is-active .care-config-panel {
  transform: none !important;
  margin-top: 18px !important;
}

/* INTERRUPTOR ACTIVO: SOLO INTERIOR NARANJA */

.care-toggle.is-on {
  border-color: #11100d;
  background: #f4efe4;
}

.care-toggle.is-on::before {
  background: #e4873c;
  transform: translateX(31px);
}

/* QUITAR SOMBRA DEL PANEL DE CONFIGURAR */

.care-config-panel {
  box-shadow: none !important;
}

.care-cookie-banner {
  box-shadow: none !important;
}

/* COOKIE EMPUJAR DENTRO DEL FAKE POPUP */

.fake-webpage-empujar {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: #f4efe4;
}

/* Web falsa de fondo */

.push-fake-site {
  padding: clamp(58px, 8vw, 110px) clamp(34px, 7vw, 96px);
  color: #11100d;
}

.push-fake-kicker {
  margin: 0 0 18px;
  color: rgba(255, 90, 0, 0.36);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.push-fake-title {
  max-width: 720px;
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(64px, 9vw, 136px);
  line-height: 0.88;
  letter-spacing: -0.07em;
  color: rgba(17, 16, 13, 0.18);
}

.push-fake-text {
  max-width: 620px;
  margin-top: 34px;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.45;
  color: rgba(17, 16, 13, 0.72);
}

/* Pantallas cookie empujar */

.push-cookie-screen {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}

.push-cookie-screen.is-active {
  display: grid;
  align-items: end;
  justify-items: center;
  padding: clamp(18px, 3vw, 36px);
  pointer-events: auto;
}

/* Banner inicial empujar */

.push-cookie-banner {
  width: min(100%, 1040px);
  padding: clamp(28px, 3.4vw, 46px) clamp(34px, 4.5vw, 64px);
  border: 2.5px solid #11100d;
  border-radius: clamp(38px, 5vw, 64px);
  background: #f4efe4;
  color: #11100d;
}

.push-cookie-kicker {
  margin: 0 0 26px;
  font-size: clamp(17px, 1.6vw, 25px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.push-cookie-text {
  max-width: 780px;
  margin: 0;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.22;
}

.push-config-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: #11100d;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.push-config-link:hover {
  color: #e3863d;
}

.push-cookie-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(34px, 4vw, 54px);
}

.push-accept-button {
  appearance: none;
  width: min(440px, 80%);
  border: 2.5px solid #11100d;
  background: #e88636;
  color: #11100d;
  border-radius: 32px;
  padding: clamp(16px, 2vw, 24px) 34px;
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0 0 5px #f4efe4;
  transition:
    transform 0.18s ease,
    background 0.18s ease;
}

.push-accept-button:hover {
  transform: translateY(-3px);
  background: #e88636;
}

.push-accept-button:active {
  transform: translateY(0);
}

/* Configuración empujar */

.push-cookie-config.is-active {
  align-items: center;
}

.push-config-panel {
  width: min(560px, 94%);
  padding: clamp(28px, 4vw, 42px);
  border: 2.5px solid #11100d;
  border-radius: 32px;
  background: #f4efe4;
  color: #11100d;
}

.push-config-kicker {
  margin: 0 0 22px;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.push-config-text {
  margin: 0 0 28px;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.45;
}

.push-config-options {
  display: grid;
  gap: 12px;
}

.push-config-row {
  appearance: none;
  width: 100%;
  min-height: 58px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1.8px solid #11100d;
  background: transparent;
  color: #11100d;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.push-config-row:hover {
  background: rgba(255, 90, 0, 0.08);
}

/* Interruptores empujar */

.push-toggle {
  flex: 0 0 auto;
  position: relative;
  width: 66px;
  height: 36px;
  border: 2px solid #11100d;
  border-radius: 999px;
  background: #f4efe4;
}

.push-toggle::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #11100d;
  transition: transform 0.22s ease, background 0.22s ease;
}

.push-toggle.is-on::before {
  transform: translateX(30px);
  background: #e4873c;
}

/* Botonera configuración empujar */

.push-config-actions {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.push-config-button {
  appearance: none;
  width: 100%;
  border: 2.5px solid #11100d;
  background: transparent;
  color: #11100d;
  border-radius: 999px;
  padding: 13px 20px;
  font-size: clamp(20px, 2.2vw, 31px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.push-config-primary {
  background: #e4873c;
  box-shadow: inset 0 0 0 4px #f4efe4;
}

.push-config-button:hover {
  background: #e4873c;
}

.push-config-secondary {
  appearance: none;
  border: 0;
  background: transparent;
  color: #11100d;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
  justify-self: center;
  margin-top: 4px;
}

.push-config-secondary:hover {
  color: #e4873c;
}

/* AJUSTE ESTABLE DE OVERLAYS SOBRE IMAGEN ANATOMÍA  HAY QUE QUITAR ESTO, JON*/

.anatomy-text-lines,
.anatomy-button-line {
  width: min(100vw, calc(100vh * 1.58));
  height: min(100vh, calc(100vw / 1.58));
}

/* POSICIÓN FINAL LÍNEA SOBRE TEXTO */

.text-line-bottom {
  top: 56% !important;
  left: 38% !important;
  width: 15% !important;
  height: 5px !important;
}

/* INTRO CORTINILLA / ACEPTAR SIN MIRAR */

.intro-curtain-section {
  position: relative;
  height: 220vh;
  background: #f4efe4;
}

.intro-curtain-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.intro-curtain-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}

.intro-curtain-orange {
  z-index: 2;
  background: #e4873c;
  color: #11100d;
  transform: translateY(0);
  will-change: transform;
}

.intro-curtain-white {
  z-index: 1;
  background: #f4efe4;
  color: #11100d;
}

.intro-curtain-title,
.intro-curtain-phrase {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: -0.075em;
  line-height: 0.86;
}

.intro-curtain-title {
  font-size: clamp(92px, 15vw, 260px);
}

.intro-curtain-phrase {
  max-width: 11ch;
  font-size: clamp(58px, 8.8vw, 160px);
}

@media (max-width: 760px) {
  .intro-curtain-title {
    font-size: clamp(72px, 21vw, 132px);
  }

  .intro-curtain-phrase {
    font-size: clamp(42px, 12vw, 86px);
  }
}

/* AJUSTE TÍTULO INTRO NARANJA */

.intro-curtain-orange {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding-top: clamp(90px, 12vh, 140px);
  padding-left: clamp(90px, 12vw, 160px);
}

.intro-curtain-title {
  margin: 0;
  max-width: 5ch;
  font-family: var(--font-title);
  font-size: clamp(58px, 5.8vw, 104px);
  line-height: 0.86;
  letter-spacing: -0.055em;
  color: #11100d;
}

/* AJUSTE FRASE INTRO BLANCA */

/* AJUSTE FINAL INTRO NARANJA + BLANCA */

.intro-curtain-orange {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding-top: clamp(90px, 12vh, 140px);
  padding-left: clamp(90px, 12vw, 160px);
}

.intro-curtain-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(58px, 5.8vw, 104px);
  line-height: 0.86;
  letter-spacing: -0.055em;
  color: #11100d;
}

/* AJUSTE FINO FRASE BLANCA INTRO */

.intro-curtain-white {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 0 40px;
}

.intro-curtain-phrase {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(52px, 5.2vw, 94px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: #11100d;
  max-width: none;
  transform: translate(90px, 70px);
}

/* FONDO BLANCO PURO EN LA FRASE INTRO */

.intro-curtain-white {
  background: #ffffff !important;
}

/* AJUSTE PORTADA: TÍTULO COMO SUBTÍTULO */

.hero-title {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(46px, 6vw, 96px) !important;
  font-weight: 400 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.055em !important;
  max-width: 980px !important;
}

/* AJUSTE PORTADA: SUBTÍTULO MÁS PEQUEÑO Y A LA IZQUIERDA */

.hero-content {
  align-items: flex-start !important;
  text-align: left !important;
}

.hero-title {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(30px, 4.2vw, 64px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
  max-width: 720px !important;
  text-align: left !important;
}

.hero-title .char {
  font-family: Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
}

.hero-lead {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(14px, 1.15vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.015em !important;
  max-width: 520px !important;
  text-align: left !important;
  margin-top: 24px !important;
}

/* EVITAR QUE EL HERO PARTA PALABRAS */

.split-random .word {
  display: inline-block;
  white-space: nowrap;
}

/* MOVER TEXTO "BAJAR PARA DESPLEGAR EL ANÁLISIS" */

.scroll-cue {
  transform: translateX(230px) !important;
}

/* FRASE GRANDE EN HELVÉTICA */

.helvetica-statement,
.helvetica-statement .scroll-word {
  font-family: Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.95 !important;
  font-size: clamp(20px, 2vw, 70px) !important;
}

/* NÚMEROS DE APARTADO EN HELVÉTICA CON / */

.chapter-number {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(96px, 12vw, 190px) !important;
  font-weight: 700 !important;
  line-height: 0.8 !important;
  letter-spacing: -0.08em !important;
}

.chapter-number::after {
  content: "/";
  margin-left: 0.04em;
}

/* NÚMERO 04 CON MISMO ESTILO QUE LOS DEMÁS */

.section-number-slash {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(90px, 10vw, 180px) !important;
  font-weight: 700 !important;
  line-height: 0.8 !important;
  letter-spacing: -0.08em !important;
  color: #e3863d !important;
}

.section-number-slash::after {
  content: "/";
  margin-left: 0.04em;
}

/* AJUSTE FONDO HERO MÁS EDITORIAL */

.hero {
  background: #0f0e0b !important;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244, 239, 228, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 239, 228, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.28;
  pointer-events: none;
}

.hero::after {
  display: none !important;
}

/* SECCIÓN 01 / COOKIE: SIN LÍNEAS Y ALINEADA A ESQUINA */

.cookie-chapter {
  position: relative !important;
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 640px) 1fr !important;
  column-gap: clamp(28px, 4vw, 70px) !important;
  align-items: flex-start !important;
  padding: clamp(70px, 9vh, 110px) clamp(42px, 6vw, 90px) !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Quitar líneas de arriba y abajo */
.cookie-chapter::before,
.cookie-chapter::after {
  display: none !important;
  content: none !important;
}

.cookie-chapter {
  border: none !important;
}

/* Número a la esquina */
.cookie-chapter .chapter-number {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  align-self: start !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(96px, 13vw, 210px) !important;
  font-weight: 800 !important;
  line-height: 0.78 !important;
  letter-spacing: -0.1em !important;
  color: #e88636 !important;
}

/* AJUSTE: 01/ pegado a la izquierda */

.cookie-chapter {
  padding-left: 0 !important;
}

.cookie-chapter .chapter-number {
  transform: translateX(-0.80em) !important;
}

/* Añadir la barra */
.cookie-chapter .chapter-number::after {
  content: "/";
  margin-left: 0.03em;
}

/* Texto junto al número, también hacia la esquina */
.cookie-chapter .chapter-copy {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 640px !important;
  align-self: start !important;
}

.cookie-chapter .chapter-copy h2 {
  margin: 0 0 clamp(24px, 3vw, 42px) 0 !important;
  max-width: 620px !important;
  text-align: left !important;
}

.cookie-chapter .chapter-copy p {
  margin: 0 !important;
  max-width: 580px !important;
  text-align: left !important;
}

/* La caja derecha queda más limpia */
.cookie-chapter .definition-card {
  align-self: start !important;
  margin-top: clamp(10px, 2vh, 30px) !important;
}

/* QUITAR TODAS LAS LÍNEAS DE SEPARACIÓN ENTRE APARTADOS */

.chapter,
.section,
.panel,
.content-section,
.chapter-split {
  border-top: none !important;
  border-bottom: none !important;
}

.chapter::before,
.chapter::after,
.section::before,
.section::after,
.panel::before,
.panel::after,
.content-section::before,
.content-section::after,
.chapter-split::before,
.chapter-split::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
}

/* Por si las líneas están hechas con elementos internos */
.divider,
.section-divider,
.chapter-divider,
.line,
.horizontal-line,
.chapter-line,
.section-line,
.top-line,
.bottom-line {
  display: none !important;
}

/* =========================
   SECCIÓN OJOS / MIRADA
========================= */

.look-section {
  position: relative;
  min-height: 100vh;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8vh 8vw;
}

.look-text {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.look-text h2 {
  margin: 0;
  font-family: "Times New Roman", Georgia, serif; /* cambia por tu tipografía romana si quieres */
  font-size: clamp(3.4rem, 6vw, 6.6rem);
  line-height: 0.95;
  font-weight: 400;
  color: #000000;
  letter-spacing: -0.03em;
}

/* CONTENEDOR OJOS */
.eyes-wrap {
  position: absolute;
  right: 7vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(32vw, 420px);
  display: flex;
  gap: 2.2vw;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

/* CADA OJO */
.eye {
  position: relative;
  width: clamp(120px, 12vw, 190px);
  height: clamp(72px, 7.2vw, 110px);
}

/* FORMA DEL OJO */
.eye-white {
  position: absolute;
  inset: 0;
  background: #fff;
  border: 3px solid #000;
  border-radius: 100px / 70px;
  overflow: hidden;
}

/* PUPILA */
.pupil {
  position: absolute;
  width: clamp(30px, 3.2vw, 44px);
  height: clamp(30px, 3.2vw, 44px);
  border-radius: 50%;
  background: #000;
  left: 24%;
  top: 28%;
  transform: translate(0, 0);
  transition: transform 0.12s linear;
}

/* BRILLO INTERIOR OPCIONAL */
.pupil::after {
  content: "";
  position: absolute;
  width: 22%;
  height: 22%;
  top: 18%;
  left: 18%;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
}

/* PESTAÑAS */
.lash {
  position: absolute;
  top: -10px;
  width: 3px;
  height: 22px;
  background: #000;
  border-radius: 2px;
  transform-origin: bottom center;
}

.eye .lash-1 {
  left: 28%;
  transform: rotate(-28deg);
}

.eye .lash-2 {
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
}

.eye .lash-3 {
  right: 28%;
  transform: rotate(28deg);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .look-section {
    padding: 8vh 6vw 10vh;
    align-items: flex-start;
  }

  .look-text {
    max-width: 100%;
    z-index: 2;
  }

  .look-text h2 {
    font-size: clamp(2.8rem, 10vw, 4.8rem);
  }

  .eyes-wrap {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    margin-top: 48px;
    justify-content: flex-start;
    gap: 24px;
  }
}

.accept-look-section {
  position: relative;
  min-height: 100vh;
  background: #ffffff;
  overflow: hidden;
}

/* El texto se queda donde ya lo tenías */
.accept-look-title {
  position: relative;
  z-index: 2;
}

/* Ojos abajo a la izquierda */
.eyes-wrapper {
  position: absolute;
  left: 8vw;
  bottom: 10vh;
  display: flex;
  gap: 28px;
  z-index: 1;
}

.eye {
  width: 150px;
  height: 82px;
  border: 3px solid #000;
  border-radius: 50%;
  position: relative;
  background: #fff;
}

.eye::before,
.eye::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 18px;
  background: #000;
  top: -15px;
}

.eye::before {
  left: 38px;
  transform: rotate(-18deg);
}

.eye::after {
  right: 38px;
  transform: rotate(18deg);
}

.pupil {
  position: absolute;
  width: 34px;
  height: 34px;
  background: #000;
  border-radius: 50%;
  left: 34px;
  top: 20px;
  transform: translate(var(--eye-x, 0px), var(--eye-y, 0px));
  transition: transform 0.08s linear;
}

/* OJOS DENTRO DE LA CORTINILLA */

.intro-curtain-white {
  position: absolute !important;
  overflow: hidden !important;
}

.intro-eyes {
  position: absolute !important;
  left: 8vw !important;
  bottom: 8vh !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

.intro-eyes .eyes-wrapper {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  gap: 28px !important;
  transform: none !important;
}

.intro-eyes .eye {
  width: 150px;
  height: 82px;
  border: 3px solid #000;
  border-radius: 50%;
  position: relative;
  background: #fff;
}

.intro-eyes .eye::before,
.intro-eyes .eye::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 18px;
  background: #000;
  top: -15px;
}

.intro-eyes .eye::before {
  left: 38px;
  transform: rotate(-18deg);
}

.intro-eyes .eye::after {
  right: 38px;
  transform: rotate(18deg);
}

.intro-eyes .pupil {
  position: absolute;
  width: 34px;
  height: 34px;
  background: #000;
  border-radius: 50%;
  left: 48px;
  top: 24px;
  transform: translate(16px, -8px);
  transition: transform 0.08s linear;
}

.intro-eyes .pupil::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: 7px;
  left: 7px;
  border-radius: 50%;
  background: #fff;
  transform: translate(var(--shine-x, 9px), var(--shine-y, -2px));
  transition: transform 0.08s linear;
}

.push-cookie-screen[hidden] {
  display: none !important;
}

/* =========================
   ANIMACIÓN ENTRADA COOKIES
========================= */

@keyframes cookieAppear {
  0% {
    opacity: 0;
    transform: translateY(42px) scale(0.96);
  }

  70% {
    opacity: 1;
    transform: translateY(-6px) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Primera pantalla CUIDAR */
.care-cookie-intro.is-active .care-cookie-banner {
  animation: cookieAppear 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Primera pantalla EMPUJAR */
.push-cookie-intro.is-active .push-cookie-banner {
  animation: cookieAppear 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Configuración CUIDAR */
.care-cookie-config.is-active .care-config-panel {
  animation: cookieAppear 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Configuración EMPUJAR */
.push-cookie-config.is-active .push-config-panel {
  animation: cookieAppear 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* La barra superior de la fake web siempre por encima de las cookies */
.fake-popup-topbar {
  position: relative;
  z-index: 9999 !important;
}

.fake-popup-close {
  position: relative;
  z-index: 10000 !important;
  pointer-events: auto !important;
}

.fake-popup-content {
  position: relative;
  z-index: 1;
}

/* BOTONES EMPUJAR / CUIDAR MÁS GRANDES */

.synthesis-button {
  min-width: 280px !important;
  min-height: 96px !important;
  padding: 24px 48px !important;

  font-size: 32px !important;
  letter-spacing: 0.14em !important;

  border-radius: 999px !important;
}

/* =========================
   09 / DATOS EDITORIAL
========================= */

.data-section-editorial {
  background: #ffffff !important;
  color: #111111 !important;
  min-height: auto !important;
  padding: clamp(90px, 12vh, 150px) clamp(42px, 8vw, 120px) !important;
  display: block !important;
}

.data-section-editorial .chapter-number,
.data-section-editorial .chapter-copy,
.data-section-editorial .data-grid {
  display: none !important;
}

/* CABECERA */
.data-editorial-header {
  max-width: 780px;
  margin-bottom: clamp(70px, 9vh, 120px);
}

.data-editorial-number {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(96px, 13vw, 210px);
  line-height: 0.78;
  font-weight: 800;
  letter-spacing: -0.08em;
  color: #e88636;
}

.data-editorial-kicker {
  margin: 10px 0 34px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e88636;
}

.data-editorial-header h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(72px, 8vw, 130px);
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: -0.055em;
  color: #111111;
}

.data-editorial-intro {
  margin: 36px 0 0;
  max-width: 760px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(20px, 1.7vw, 27px);
  line-height: 1.42;
  color: #111111;
}

/* LISTA DE GRÁFICOS */
.data-editorial-list {
  display: grid;
  gap: clamp(80px, 10vh, 130px);
  max-width: 1180px;
}

/* CADA GRÁFICO */
.data-editorial-item {
  width: 100%;
}

/* BARRA */
.data-bar {
  position: relative;
  width: 100%;
  height: clamp(108px, 12vw, 170px);
  border: 4px solid #111111;
  background: #ffffff;
  overflow: hidden;
  transform: rotate(var(--bar-rotate, -0.35deg));
}

/* parte negra proporcional */
.data-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value);
  background: #111111;
  z-index: 1;
}

/* pequeño efecto manual irregular */
.data-editorial-item:nth-child(2) .data-bar {
  --bar-rotate: 0.45deg;
}

.data-editorial-item:nth-child(3) .data-bar {
  --bar-rotate: -0.55deg;
}

.data-editorial-item:nth-child(4) .data-bar {
  --bar-rotate: 0.3deg;
}

.data-editorial-item:nth-child(5) .data-bar {
  --bar-rotate: -0.25deg;
}

/* porcentaje */
.data-bar strong {
  position: relative;
  z-index: 2;
  display: block;
  padding-left: clamp(26px, 4vw, 56px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(74px, 10vw, 150px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.075em;
  color: #ffffff;
}

/* zona blanca derecha */
.data-bar span {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% - var(--value));
  height: 100%;
  background: #ffffff;
  z-index: 1;
  border-left: 4px solid #111111;
}

/* TEXTO DEBAJO */
.data-caption {
  margin-top: 22px;
  font-family: Helvetica, Arial, sans-serif;
  color: #111111;
}

.data-caption h3 {
  margin: 0 0 6px;
  font-size: clamp(21px, 2vw, 32px);
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
}

.data-caption p {
  margin: 0;
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.25;
}

/* RESPONSIVE */
@media (max-width: 800px) {
  .data-section-editorial {
    padding: 72px 24px;
  }

  .data-editorial-list {
    gap: 48px;
  }

  .data-bar {
    height: 100px;
    border-width: 3px;
  }

  .data-bar span {
    border-left-width: 3px;
  }

  .data-caption h3 {
    line-height: 1.08;
  }
}

/* SECCIÓN 09 A ANCHO COMPLETO */

.data-section-editorial {
  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* =========================
   DATOS 09 / CARGA CON SCROLL
========================= */

.data-bar::before {
  width: var(--fill, 0%) !important;
  transition: width 0.08s linear;
}

.data-bar strong {
  color: #ffffff !important;
  opacity: var(--number-opacity, 0);
  transition: opacity 0.12s linear;
}

.data-editorial-item.is-loading .data-bar strong {
  opacity: 1;
}

/* Quitar línea vertical que marca el final del porcentaje */
.data-bar span {
  border-left: none !important;
}

/* =========================
   01 / QUÉ ES UNA COOKIE - DEMO SCROLL
========================= */

.cookie-story-section {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 260vh;
  background: #ffffff;
  color: #111111;
}

.cookie-story-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  padding: clamp(72px, 10vh, 120px) clamp(36px, 8vw, 120px);
  box-sizing: border-box;
  overflow: hidden;
}

.cookie-story-header {
  display: grid;
  grid-template-columns: minmax(180px, 340px) minmax(360px, 720px);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}

.cookie-story-number {
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(110px, 16vw, 240px);
  line-height: 0.78;
  font-weight: 800;
  letter-spacing: -0.1em;
  color: #e88636;
}

.cookie-story-copy h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(68px, 7.8vw, 128px);
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: -0.055em;
  color: #111111;
}

.cookie-story-copy p {
  margin: 34px 0 0;
  max-width: 760px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(20px, 1.55vw, 26px);
  line-height: 1.42;
  color: #111111;
}

/* zona de demo */
.cookie-scroll-demo {
  position: relative;
  max-width: 1280px;
  height: 48vh;
  margin: clamp(60px, 8vh, 100px) auto 0;
}

/* pasos */
.cookie-demo-step {
  position: absolute;
  width: min(30vw, 360px);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.cookie-story-section[data-cookie-step="1"] .cookie-demo-step-one,
.cookie-story-section[data-cookie-step="2"] .cookie-demo-step-one,
.cookie-story-section[data-cookie-step="3"] .cookie-demo-step-one,
.cookie-story-section[data-cookie-step="2"] .cookie-demo-step-two,
.cookie-story-section[data-cookie-step="3"] .cookie-demo-step-two,
.cookie-story-section[data-cookie-step="3"] .cookie-demo-step-three {
  opacity: 1;
  transform: translateY(0);
}

.cookie-demo-step-one {
  left: 0;
  top: 0;
}

.cookie-demo-step-two {
  right: 8%;
  top: 34%;
}

.cookie-demo-step-three {
  left: 18%;
  bottom: 0;
}

.cookie-demo-kicker {
  margin: 0 0 14px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #111111;
}

.cookie-demo-text {
  margin: 0 0 24px;
  max-width: 260px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.25;
  font-weight: 600;
  color: #111111;
}

/* dibujos */
.cookie-demo-drawing {
  position: relative;
  width: 100%;
  height: 150px;
}

/* navegador */
.browser-drawing {
  border: 3px solid #111111;
  border-radius: 10px;
}

.browser-top {
  height: 28px;
  border-bottom: 3px solid #111111;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
}

.browser-top span {
  width: 7px;
  height: 7px;
  border: 2px solid #111111;
  border-radius: 50%;
}

.browser-body {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  padding: 28px;
}

.browser-body div {
  height: 74px;
  border: 3px solid #111111;
  border-radius: 8px;
}

.browser-body p,
.browser-body p::before,
.browser-body p::after {
  display: block;
  height: 4px;
  background: #111111;
  content: "";
}

.browser-body p {
  margin-top: 18px;
  width: 110px;
}

.browser-body p::before {
  width: 140px;
  margin-top: 18px;
}

.browser-body p::after {
  width: 100px;
  margin-top: 18px;
}

/* archivo */
.file-drawing {
  width: 140px;
  height: 170px;
  border: 3px solid #111111;
  margin: 0 auto;
}

.file-drawing span {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 42px;
  height: 42px;
  border-left: 3px solid #111111;
  border-bottom: 3px solid #111111;
  background: #ffffff;
}

.file-drawing i {
  display: block;
  width: 52px;
  height: 4px;
  background: #111111;
  margin-left: 32px;
  margin-top: 34px;
}

.file-drawing i + i {
  margin-top: 18px;
}

/* portátil */
.laptop-drawing {
  width: 250px;
  height: 150px;
}

.laptop-drawing div {
  width: 200px;
  height: 110px;
  border: 3px solid #111111;
  border-radius: 10px 10px 4px 4px;
  margin: 0 auto;
}

.laptop-drawing span {
  display: block;
  width: 250px;
  height: 18px;
  border: 3px solid #111111;
  border-top: none;
  border-radius: 0 0 18px 18px;
}

/* flechas */
.cookie-demo-arrow {
  position: absolute;
  width: 250px;
  height: 180px;
  opacity: 0;
  transition: opacity 0.35s ease;
  overflow: visible;
}

.cookie-demo-arrow path,
.cookie-demo-arrow polyline {
  fill: none;
  stroke: #111111;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
}

.cookie-demo-arrow-one {
  left: 32%;
  top: 8%;
}

.cookie-demo-arrow-two {
  right: 30%;
  bottom: 4%;
}

.cookie-story-section[data-cookie-step="2"] .cookie-demo-arrow-one,
.cookie-story-section[data-cookie-step="3"] .cookie-demo-arrow-one,
.cookie-story-section[data-cookie-step="3"] .cookie-demo-arrow-two {
  opacity: 1;
}

.cookie-story-section[data-cookie-step="2"] .cookie-demo-arrow-one path,
.cookie-story-section[data-cookie-step="2"] .cookie-demo-arrow-one polyline,
.cookie-story-section[data-cookie-step="3"] .cookie-demo-arrow-one path,
.cookie-story-section[data-cookie-step="3"] .cookie-demo-arrow-one polyline,
.cookie-story-section[data-cookie-step="3"] .cookie-demo-arrow-two path,
.cookie-story-section[data-cookie-step="3"] .cookie-demo-arrow-two polyline {
  animation: drawCookieArrow 0.75s ease forwards;
}

@keyframes drawCookieArrow {
  to {
    stroke-dashoffset: 0;
  }
}

/* responsive básico */
@media (max-width: 900px) {
  .cookie-story-header {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cookie-scroll-demo {
    height: 90vh;
  }

  .cookie-demo-step {
    width: 78vw;
  }

  .cookie-demo-step-one {
    left: 0;
    top: 0;
  }

  .cookie-demo-step-two {
    right: 0;
    top: 36%;
  }

  .cookie-demo-step-three {
    left: 0;
    bottom: 0;
  }

  .cookie-demo-arrow {
    transform: scale(0.78);
  }
}

/* =========================
   01B / COOKIE SISTEMA SOLAR
   Bloque independiente. No toca la sección 01 anterior.
========================= */

.memory-solar-section {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 420vh;
  background: #ffffff;
  color: #111111;
}

.memory-solar-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
}

.memory-solar-heading {
  position: absolute;
  top: clamp(48px, 8vh, 92px);
  left: clamp(36px, 8vw, 120px);
  z-index: 10;
}

.memory-solar-heading p {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(24px, 2vw, 38px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #111111;
}

.memory-solar-system {
  position: absolute;
  inset: 0;
}

/* Sol central */

.memory-solar-sun {
  position: absolute;
  left: 50%;
  top: 53%;
  width: clamp(125px, 11vw, 175px) !important;
  height: clamp(125px, 11vw, 175px) !important;
  border-radius: 50%;
  background: #e88636;
  color: #111111;
  transform: translate(-50%, -50%);
  z-index: 5;

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

  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(20px, 1.7vw, 30px) !important;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =========================
   SISTEMA SOLAR / 5 ÓRBITAS
========================= */

.memory-solar-ring {
  left: 50% !important;
  top: 53% !important;
  transform: translate(-50%, -50%) !important;
  border: 1px solid rgba(17, 17, 17, 0.14) !important;
}

/* Órbita 01 */
.memory-solar-ring-one {
  width: clamp(300px, 28vw, 430px) !important;
  height: clamp(300px, 28vw, 430px) !important;
}

/* Órbita 02 */
.memory-solar-ring-two {
  width: clamp(430px, 40vw, 610px) !important;
  height: clamp(430px, 40vw, 610px) !important;
}

/* Órbita 03 */
.memory-solar-ring-three {
  width: 720px !important;
  height: 720px !important;
}

/* Órbita 04 */
.memory-solar-ring-four {
  width: clamp(710px, 68vw, 1040px) !important;
  height: clamp(710px, 68vw, 1040px) !important;
}

/* Órbita 05 */
.memory-solar-ring-five {
  width: clamp(840px, 80vw, 1220px) !important;
  height: clamp(840px, 80vw, 1220px) !important;
}

/* Planetas */

.memory-solar-planet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(105px, 9vw, 165px) !important;
  height: clamp(105px, 9vw, 165px) !important;
  z-index: 8;

  opacity: 0.72;
  transform: translate(-50%, -50%) scale(0.94);
  transition:
    opacity 0.2s ease,
    filter 0.2s ease;
  will-change: left, top, transform;
}

.memory-solar-planet img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.memory-solar-planet.is-active {
  opacity: 1;
  filter:
    drop-shadow(0 0 18px rgba(232, 134, 54, 0.48))
    drop-shadow(0 0 34px rgba(232, 134, 54, 0.18));
}

/* Texto de planeta activo */

.memory-solar-caption {
  position: absolute;
  z-index: 12;
  min-width: 260px;
  max-width: 340px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
  pointer-events: none;
}

.memory-solar-caption.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.memory-solar-caption-line {
  display: block;
  width: 52px;
  height: 2px;
  margin-bottom: 12px;
  background: #111111;
}

.memory-solar-caption-title {
  margin: 0 0 7px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.35vw, 22px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #111111;
}

.memory-solar-caption-text {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.25;
  color: #111111;
}

@media (max-width: 900px) {
  .memory-solar-section {
    min-height: 460vh;
  }

  .memory-solar-heading {
    top: 42px;
    left: 28px;
  }

  .memory-solar-ring-three {
    width: 620px;
    height: 620px;
  }

  .memory-solar-caption {
    max-width: 250px;
  }
}

/* AJUSTE SISTEMA SOLAR: PLANETAS MÁS GRANDES */

.memory-solar-planet {
  width: clamp(120px, 10vw, 178px) !important;
  height: clamp(120px, 10vw, 178px) !important;
}

.memory-solar-planet.is-active {
  filter:
    drop-shadow(0 0 22px rgba(232, 134, 54, 0.55))
    drop-shadow(0 0 42px rgba(232, 134, 54, 0.24)) !important;
}

/* =========================
   AJUSTE SISTEMA SOLAR / ÓRBITAS Y PLANETAS
========================= */

.memory-solar-ring {
  left: var(--orbit-x, 50%) !important;
  top: var(--orbit-y, 53%) !important;
  width: var(--orbit-w, 300px) !important;
  height: var(--orbit-h, 300px) !important;

  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  border: 1.4px solid rgba(17, 17, 17, 0.16) !important;
  pointer-events: none !important;
}

/* Planetas más grandes */
.memory-solar-planet {
  width: clamp(140px, 12vw, 210px) !important;
  height: clamp(140px, 12vw, 210px) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #e88636 !important;
}

/* Si tus imágenes tienen mucho margen blanco, esto las acerca */
.memory-solar-planet img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: scale(2.5);
  transform-origin: center center;
}

/* Planeta activo */
.memory-solar-planet.is-active {
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 22px rgba(232, 134, 54, 0.52))
    drop-shadow(0 0 46px rgba(232, 134, 54, 0.24)) !important;
}

/* =========================
   AJUSTE FINO SISTEMA SOLAR
========================= */

/* Tamaño real de cada planeta */
.memory-solar-planet {
  width: clamp(124px, 10vw, 185px);
  height: clamp(124px, 10vw, 185px);
  background: transparent !important;
  overflow: visible !important;
}

/* La imagen se ve completa, sin recortarse ni ampliarse por dentro */
.memory-solar-planet img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* Órbitas más discretas */
.memory-solar-ring {
  border: 1.2px solid rgba(17, 17, 17, 0.16) !important;
}

/* =========================
   FIX ÓRBITAS ALREDEDOR DE COOKIE
   Pegar al final del CSS
========================= */

.memory-solar-ring {
  position: absolute !important;
  left: 50% !important;
  top: 53% !important;
  transform: translate(-50%, -50%) !important;

  border-radius: 50% !important;
  border: 1.2px solid rgba(17, 17, 17, 0.16) !important;

  pointer-events: none !important;
  z-index: 1 !important;
}

/* 01 / sesión iniciada */
.memory-solar-ring-one {
  width: 420px !important;
  height: 420px !important;
}

/* 02 / idioma elegido */
.memory-solar-ring-two {
  width: 590px !important;
  height: 590px !important;
}

/* 03 / productos en el carrito - órbita elíptica */
.memory-solar-ring-three {
  width: 840px !important;
  height: 500px !important;
}

/* 04 / visitas a la página */
.memory-solar-ring-four {
  width: 880px !important;
  height: 880px !important;
}

/* 05 / anuncios personalizados */
.memory-solar-ring-five {
  width: 1040px !important;
  height: 1040px !important;
}

/* Aseguramos que COOKIE y planetas queden por encima de las órbitas */
.memory-solar-sun {
  z-index: 5 !important;
}

.memory-solar-planet {
  z-index: 8 !important;
}

.memory-solar-caption {
  z-index: 12 !important;
}

/* =========================
   AJUSTE FINAL SISTEMA SOLAR
========================= */

/* Órbita 03 circular */
.memory-solar-ring-three {
  width: 720px !important;
  height: 720px !important;
}

/* Sol COOKIE más pequeño */
.memory-solar-sun {
  width: clamp(125px, 11vw, 175px) !important;
  height: clamp(125px, 11vw, 175px) !important;
  font-size: clamp(20px, 1.7vw, 30px) !important;
}

/* Planetas más grandes */
.memory-solar-planet {
  width: clamp(105px, 9vw, 165px) !important;
  height: clamp(105px, 9vw, 165px) !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Imagen completa dentro del planeta */
.memory-solar-planet img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* Ajuste flecha 01 → 02 */
.cookie-demo-arrow-one {
  top: 20% !important;
}

/* Ajuste flecha 02 → 03 */
.cookie-demo-arrow-two {
  right: 37% !important;
}

/* Mover primera flecha 01 → 02 hacia la derecha */
.cookie-demo-arrow-one {
  left: 38% !important;
}

/* =========================
   SECCIÓN 01 / IMÁGENES PNG
========================= */

.cookie-demo-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Imagen 01 / Web */
.cookie-demo-img-web {
  max-width: 390px;
}

/* Imagen 02 / Archivo cookie */
.cookie-demo-img-file {
  max-width: 230px;
  margin: 0 auto;
}

/* Imagen 03 / Portátil */
.cookie-demo-img-laptop {
  max-width: 280px;
}

/* =========================
   AJUSTE SECCIÓN 01 / PNGS
========================= */

/* Damos más aire vertical a la zona de los 3 pasos */
.cookie-scroll-demo {
  height: 58vh !important;
}

/* Las imágenes sustituyen a los dibujos CSS */
.cookie-demo-img {
  display: block !important;
  height: auto !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* 01 / WEB */
.cookie-demo-step-one {
  left: 2% !important;
  top: 0 !important;
  width: 360px !important;
}

.cookie-demo-img-web {
  width: 380px !important;
  max-width: none !important;
  margin-top: 18px !important;
}

/* 02 / LA WEB GUARDA UNA COOKIE */
.cookie-demo-step-two {
  right: 6% !important;
  top: 30% !important;
  width: 330px !important;
}

.cookie-demo-img-file {
  width: 220px !important;
  max-width: none !important;
  margin: 24px auto 0 !important;
}

/* 03 / PARA RECORDAR ALGO */
.cookie-demo-step-three {
  left: 22% !important;
  top: 58% !important;
  bottom: auto !important;
  width: 390px !important;
}

.cookie-demo-img-laptop {
  width: 320px !important;
  max-width: none !important;
  margin-top: 22px !important;
}

/* Flecha 01 → 02 */
.cookie-demo-arrow-one {
  left: 39% !important;
  top: 18% !important;
}

/* Flecha 02 → 03 */
.cookie-demo-arrow-two {
  right: 36% !important;
  bottom: 13% !important;
}

/* =========================
   SECCIÓN 01 / SUBIR SOLO IMÁGENES PNG
========================= */

/* Imagen 01 / Web */
.cookie-demo-img-web {
  transform: translateY(-85px) !important;
}

/* Imagen 02 / Archivo */
.cookie-demo-img-file {
  transform: translateY(-55px) !important;
}

/* Imagen 03 / Portátil */
.cookie-demo-img-laptop {
  transform: translateY(-95px) !important;
}

/* Ajuste imagen 01 / WEB: alinear dibujo con el título */
.cookie-demo-img-web {
  margin-left: -26px !important;
}

/* Ajuste bloque 03 / PARA RECORDAR ALGO */
.cookie-demo-step-three {
  left: 14% !important;
  top: 60% !important;
  bottom: auto !important;
}

/* =========================
   SECCIÓN 01 / ALINEAR IMÁGENES 02 Y 03 CON TEXTO
========================= */

/* Imagen 02 / Archivo */
.cookie-demo-img-file {
  margin-left: -75px !important;
  margin-right: auto !important;
}

/* Imagen 03 / Portátil */
.cookie-demo-img-laptop {
  margin-left: -55px !important;
  margin-right: auto !important;
}

/* =========================
   02 / QUÉ ESTAMOS ACEPTANDO
   Fondo blanco + texto negro
========================= */

.cookie-accepting-section {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: #f7f4ec !important;
  color: #111111 !important;

  min-height: 100vh !important;
  padding:
    clamp(90px, 11vw, 150px)
    max(6vw, calc((100vw - 1180px) / 2))
    clamp(90px, 11vw, 150px) !important;

  border: none !important;
}

/* Número 02/ en naranja */
.cookie-accepting-section .chapter-number {
  color: #e88636 !important;
}

/* Título y párrafo en negro */
.cookie-accepting-section h2,
.cookie-accepting-section p,
.cookie-accepting-section .chapter-copy,
.cookie-accepting-section .chapter-copy p {
  color: #111111 !important;
}

/* Eliminar / ocultar los cuadrados de categorías */
.cookie-accepting-section .cookie-card,
.cookie-accepting-section .cookie-category-card,
.cookie-accepting-section .category-card,
.cookie-accepting-section .categories-card,
.cookie-accepting-section .cookie-types-card,
.cookie-accepting-section .cookie-types-grid,
.cookie-accepting-section .categories-grid,
.cookie-accepting-section .chapter-cards {
  display: none !important;
}

/* =========================
   02 / QUÉ ESTAMOS ACEPTANDO
   Estilo como sección 01
========================= */

.cookie-accepting-section {
  position: relative;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: #ffffff !important;
  color: #111111 !important;

  padding:
    clamp(90px, 8vw, 130px)
    max(6vw, calc((100vw - 1180px) / 2))
    clamp(100px, 10vw, 150px) !important;
}

.cookie-accepting-inner {
  max-width: 1180px;
  margin: 0 auto;
}

/* Cabecera igual que sección 01 */
.cookie-accepting-header {
  display: grid;
  grid-template-columns: minmax(240px, 34vw) minmax(420px, 1fr);
  column-gap: clamp(60px, 8vw, 130px);
  align-items: start;
}

/* 02/ naranja */
.cookie-accepting-number {
  color: #e88636;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(130px, 17vw, 250px);
  line-height: 0.78;
  font-weight: 900;
  letter-spacing: -0.08em;
}

/* Bloque título + párrafo */
.cookie-accepting-copy {
  max-width: 720px;
}

/* Título como sección 01 */
.cookie-accepting-copy h2 {
  margin: 0 0 42px 0;
  color: #111111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(76px, 8.8vw, 145px);
  line-height: 0.84;
  font-weight: 500;
  letter-spacing: -0.055em;
}

/* Párrafo negro */
.cookie-accepting-copy p {
  margin: 0;
  color: #111111;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(20px, 1.65vw, 28px);
  line-height: 1.34;
  font-weight: 400;
  max-width: 660px;
}

/* La lista de iconos debajo del párrafo */
.cookie-accepting-section .accepting-types-list {
  margin-top: clamp(70px, 8vw, 120px);
  max-width: 760px;
}

/* =========================
   02 / REDUCIR ICONOS LISTA
========================= */

.accepting-type-icon {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  display: block !important;
}

/* =========================
   02 / ACEPTAR QUE SE ABRE
========================= */

.cookie-accepting-section {
  position: relative;
  width: 100%;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 260vh;
  background: #f3f1ec;
  color: #111111;
}

.cookie-accepting-inner {
  position: sticky;
  top: 0;
  min-height: 100vh;
  padding: clamp(44px, 6vw, 80px) clamp(36px, 6vw, 72px);
  overflow: hidden;
  background: #f3f1ec;
}

.cookie-accepting-header {
  display: grid;
  grid-template-columns: clamp(180px, 18vw, 240px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.cookie-accepting-number {
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(120px, 15vw, 210px);
  line-height: 0.88;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: #e88636;
}

.cookie-accepting-copy h2 {
  margin: 0;
  color: #111111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(64px, 8vw, 110px);
  line-height: 0.92;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.accept-explode-intro {
  display: grid;
  grid-template-columns: clamp(190px, 18vw, 240px) minmax(320px, 640px);
  gap: clamp(26px, 3vw, 48px);
  align-items: center;
  margin-top: clamp(28px, 3vw, 42px);
}

.accept-explode-intro p {
  margin: 0;
  color: #111111;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.5;
  font-weight: 400;
  max-width: 760px;
}

.accept-explode-button-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.accept-explode-button {
  appearance: none;
  border: none;
  border-radius: 999px;
  background: #e88636;
  color: #111111;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 18px 34px;
  min-width: 210px;
  cursor: default;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    filter 0.45s ease;
}

.accept-explode-stage {
  display: grid;
  grid-template-columns: clamp(190px, 18vw, 240px) minmax(0, 1fr);
  gap: clamp(26px, 3vw, 48px);
  margin-top: clamp(80px, 9vh, 120px);
  align-items: start;
}

.accept-explode-slices {
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
  padding-top: 8px;
}

.accept-explode-slice {
  width: clamp(150px, 14vw, 190px);
  height: 18px;
  border-radius: 999px;
  background: #e88636;
  transform: scaleX(0.2);
  transform-origin: left center;
  opacity: 0;
  transition:
    transform 0.45s ease,
    opacity 0.45s ease;
}

/* Lista */
.accept-explode-list {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vh, 34px);
}

.accept-explode-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 24px;
  align-items: start;

  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.accept-explode-icon {
  width: 58px;
  height: 58px;
  object-fit: contain;
  display: block;
}

.accept-explode-copy h3 {
  margin: 0 0 8px 0;
  color: #111111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 2vw, 34px);
  line-height: 1.02;
  font-weight: 700;
}

.accept-explode-main {
  margin: 0 0 4px 0;
  color: #111111;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(19px, 1.55vw, 24px);
  line-height: 1.35;
  font-weight: 400;
}

.accept-explode-tags {
  margin: 0;
  color: #111111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.3;
  font-style: italic;
  opacity: 0.82;
}

/* ---------- Estados por scroll ---------- */

/* Paso 1: el botón se rompe y aparece el primer bloque */
.cookie-accepting-section[data-accept-step="1"] .accept-explode-button,
.cookie-accepting-section[data-accept-step="2"] .accept-explode-button,
.cookie-accepting-section[data-accept-step="3"] .accept-explode-button,
.cookie-accepting-section[data-accept-step="4"] .accept-explode-button,
.cookie-accepting-section[data-accept-step="5"] .accept-explode-button {
  opacity: 0;
  transform: scale(0.92);
  filter: blur(2px);
}

.cookie-accepting-section[data-accept-step="1"] .accept-explode-slices,
.cookie-accepting-section[data-accept-step="2"] .accept-explode-slices,
.cookie-accepting-section[data-accept-step="3"] .accept-explode-slices,
.cookie-accepting-section[data-accept-step="4"] .accept-explode-slices,
.cookie-accepting-section[data-accept-step="5"] .accept-explode-slices {
  opacity: 1;
  transform: translateY(0);
}

/* Cada “trozo” se activa progresivamente */
.cookie-accepting-section[data-accept-step="1"] .accept-explode-slice:nth-child(1),
.cookie-accepting-section[data-accept-step="2"] .accept-explode-slice:nth-child(1),
.cookie-accepting-section[data-accept-step="3"] .accept-explode-slice:nth-child(1),
.cookie-accepting-section[data-accept-step="4"] .accept-explode-slice:nth-child(1),
.cookie-accepting-section[data-accept-step="5"] .accept-explode-slice:nth-child(1),

.cookie-accepting-section[data-accept-step="2"] .accept-explode-slice:nth-child(2),
.cookie-accepting-section[data-accept-step="3"] .accept-explode-slice:nth-child(2),
.cookie-accepting-section[data-accept-step="4"] .accept-explode-slice:nth-child(2),
.cookie-accepting-section[data-accept-step="5"] .accept-explode-slice:nth-child(2),

.cookie-accepting-section[data-accept-step="3"] .accept-explode-slice:nth-child(3),
.cookie-accepting-section[data-accept-step="4"] .accept-explode-slice:nth-child(3),
.cookie-accepting-section[data-accept-step="5"] .accept-explode-slice:nth-child(3),

.cookie-accepting-section[data-accept-step="4"] .accept-explode-slice:nth-child(4),
.cookie-accepting-section[data-accept-step="5"] .accept-explode-slice:nth-child(4),

.cookie-accepting-section[data-accept-step="5"] .accept-explode-slice:nth-child(5) {
  opacity: 1;
  transform: scaleX(1);
}

/* Categorías que aparecen una a una */
.cookie-accepting-section[data-accept-step="1"] .accept-item-1,
.cookie-accepting-section[data-accept-step="2"] .accept-item-1,
.cookie-accepting-section[data-accept-step="3"] .accept-item-1,
.cookie-accepting-section[data-accept-step="4"] .accept-item-1,
.cookie-accepting-section[data-accept-step="5"] .accept-item-1,

.cookie-accepting-section[data-accept-step="2"] .accept-item-2,
.cookie-accepting-section[data-accept-step="3"] .accept-item-2,
.cookie-accepting-section[data-accept-step="4"] .accept-item-2,
.cookie-accepting-section[data-accept-step="5"] .accept-item-2,

.cookie-accepting-section[data-accept-step="3"] .accept-item-3,
.cookie-accepting-section[data-accept-step="4"] .accept-item-3,
.cookie-accepting-section[data-accept-step="5"] .accept-item-3,

.cookie-accepting-section[data-accept-step="4"] .accept-item-4,
.cookie-accepting-section[data-accept-step="5"] .accept-item-4,

.cookie-accepting-section[data-accept-step="5"] .accept-item-5 {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  .cookie-accepting-header,
  .accept-explode-intro,
  .accept-explode-stage {
    grid-template-columns: 1fr;
  }

  .cookie-accepting-section {
    min-height: auto;
  }

  .cookie-accepting-inner {
    position: relative;
    min-height: auto;
  }

  .accept-explode-slices {
    display: none;
  }

  .accept-explode-button {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .accept-explode-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================
   02 / FONDO BLANCO COMPLETO
========================= */

.cookie-accepting-section,
.cookie-accepting-section .cookie-accepting-inner {
  background: #ffffff !important;
}

.cookie-accepting-section {
  color: #111111 !important;
}

/* =========================
   SECCIONES BLANCAS A ANCHO COMPLETO
   01 + sistema solar + 02
========================= */

.cookie-story-section,
.memory-solar-section,
.cookie-accepting-section {
  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: #ffffff !important;
  color: #111111 !important;

  box-sizing: border-box !important;
}

/* Fondos internos sticky */
.cookie-story-sticky,
.memory-solar-sticky,
.cookie-accepting-inner {
  width: 100% !important;
  max-width: none !important;
  background: #ffffff !important;
  color: #111111 !important;
  box-sizing: border-box !important;
}

/* =========================
   SECCIONES BLANCAS A ANCHO COMPLETO
   01 + sistema solar + 02
========================= */

.cookie-story-section,
.memory-solar-section,
.cookie-accepting-section {
  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: #ffffff !important;
  color: #111111 !important;

  box-sizing: border-box !important;
}

/* Fondos internos sticky */
.cookie-story-sticky,
.memory-solar-sticky,
.cookie-accepting-inner {
  width: 100% !important;
  max-width: none !important;
  background: #ffffff !important;
  color: #111111 !important;
  box-sizing: border-box !important;
}

/* =========================
   02 / RECIBO DE ACEPTACIÓN
========================= */

/* Ocultamos la demo anterior si todavía queda en el HTML */
.accept-explode-stage {
  display: none !important;
}

.accept-receipt-area {
  margin-top: clamp(70px, 9vw, 130px);
  display: grid;
  grid-template-columns: clamp(190px, 18vw, 260px) minmax(420px, 720px);
  column-gap: clamp(42px, 7vw, 110px);
  align-items: start;
}

/* Botón inicial */
.accept-receipt-action {
  position: sticky;
  top: 38vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.accept-receipt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  padding: 18px 34px;
  border-radius: 999px;
  background: #e88636;
  color: #111111;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    filter 0.35s ease;
}

.accept-receipt-action p {
  margin: 0;
  color: #111111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.4vw, 24px);
  font-style: italic;
  opacity: 0.7;
}

/* Ticket */
.accept-receipt-ticket {
  position: relative;
  width: min(100%, 700px);
  background: #ffffff;
  border: 2px solid #111111;
  color: #111111;
  padding: clamp(26px, 3vw, 42px);
  box-shadow: 12px 12px 0 #e88636;

  opacity: 0;
  transform: translateY(34px) scale(0.98);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

/* líneas perforadas */
.accept-receipt-ticket::before,
.accept-receipt-ticket::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  height: 1px;
  border-top: 2px dashed #111111;
  opacity: 0.35;
}

.accept-receipt-ticket::before {
  top: 16px;
}

.accept-receipt-ticket::after {
  bottom: 16px;
}

.accept-receipt-top {
  padding-bottom: 24px;
  margin-bottom: 18px;
  border-bottom: 2px solid #111111;
}

.accept-receipt-top span {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(25px, 2.7vw, 42px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.accept-receipt-top small {
  display: block;
  margin-top: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 1.3vw, 22px);
  font-style: italic;
}

/* Líneas del recibo */
.accept-receipt-lines {
  display: flex;
  flex-direction: column;
}

.accept-receipt-line {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1.5px solid rgba(17, 17, 17, 0.22);

  opacity: 0;
  transform: translateY(18px);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity 0.42s ease,
    transform 0.42s ease,
    clip-path 0.42s ease;
}

.accept-receipt-line img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  margin-top: 2px;
}

.accept-receipt-line h3 {
  margin: 0 0 6px 0;
  color: #111111;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.accept-receipt-line p {
  margin: 0 0 4px 0;
  color: #111111;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.25;
}

.accept-receipt-line small {
  display: block;
  color: #111111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.2;
  font-style: italic;
  opacity: 0.72;
}

.accept-receipt-bottom {
  padding-top: 26px;
  color: #111111;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.15;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;

  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.42s ease,
    transform 0.42s ease;
}

/* ---------- Estados por scroll ---------- */

.cookie-accepting-section[data-receipt-step="1"] .accept-receipt-ticket,
.cookie-accepting-section[data-receipt-step="2"] .accept-receipt-ticket,
.cookie-accepting-section[data-receipt-step="3"] .accept-receipt-ticket,
.cookie-accepting-section[data-receipt-step="4"] .accept-receipt-ticket,
.cookie-accepting-section[data-receipt-step="5"] .accept-receipt-ticket {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cookie-accepting-section[data-receipt-step="1"] .accept-receipt-button,
.cookie-accepting-section[data-receipt-step="2"] .accept-receipt-button,
.cookie-accepting-section[data-receipt-step="3"] .accept-receipt-button,
.cookie-accepting-section[data-receipt-step="4"] .accept-receipt-button,
.cookie-accepting-section[data-receipt-step="5"] .accept-receipt-button {
  opacity: 0.22;
  transform: scale(0.88);
  filter: blur(1px);
}

/* Imprimir líneas una a una */
.cookie-accepting-section[data-receipt-step="1"] .receipt-line-1,
.cookie-accepting-section[data-receipt-step="2"] .receipt-line-1,
.cookie-accepting-section[data-receipt-step="3"] .receipt-line-1,
.cookie-accepting-section[data-receipt-step="4"] .receipt-line-1,
.cookie-accepting-section[data-receipt-step="5"] .receipt-line-1,

.cookie-accepting-section[data-receipt-step="2"] .receipt-line-2,
.cookie-accepting-section[data-receipt-step="3"] .receipt-line-2,
.cookie-accepting-section[data-receipt-step="4"] .receipt-line-2,
.cookie-accepting-section[data-receipt-step="5"] .receipt-line-2,

.cookie-accepting-section[data-receipt-step="3"] .receipt-line-3,
.cookie-accepting-section[data-receipt-step="4"] .receipt-line-3,
.cookie-accepting-section[data-receipt-step="5"] .receipt-line-3,

.cookie-accepting-section[data-receipt-step="4"] .receipt-line-4,
.cookie-accepting-section[data-receipt-step="5"] .receipt-line-4,

.cookie-accepting-section[data-receipt-step="5"] .receipt-line-5 {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
}

.cookie-accepting-section[data-receipt-step="5"] .accept-receipt-bottom {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  .accept-receipt-area {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }

  .accept-receipt-action {
    position: relative;
    top: auto;
  }

  .accept-receipt-ticket,
  .accept-receipt-line,
  .accept-receipt-bottom {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .accept-receipt-button {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =========================
   02 / FACTURA SIN BOTÓN
========================= */

/* La factura pasa a ser el elemento principal */
.accept-receipt-area {
  margin-top: clamp(70px, 8vw, 120px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

/* Por si queda el botón antiguo en algún sitio */
.accept-receipt-action {
  display: none !important;
}

/* Factura más editorial */
.accept-receipt-ticket {
  width: min(100%, 680px) !important;
  background: #ffffff !important;
  border: 2px solid #111111 !important;
  color: #111111 !important;

  padding: clamp(28px, 3vw, 44px) !important;

  box-shadow: 14px 14px 0 #e88636 !important;
}

/* Línea superior tipo factura */
.accept-receipt-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;

  margin-bottom: 24px;
  padding-bottom: 14px;

  border-bottom: 1.5px solid rgba(17, 17, 17, 0.35);

  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111111;
}

/* Cabecera factura */
.accept-receipt-top {
  padding-bottom: 26px !important;
  margin-bottom: 10px !important;
  border-bottom: 2px solid #111111 !important;
}

.accept-receipt-top span {
  font-size: clamp(30px, 3.4vw, 52px) !important;
  letter-spacing: -0.055em !important;
}

.accept-receipt-top small {
  color: #111111 !important;
  opacity: 0.72 !important;
}

/* Líneas más compactas y de factura */
.accept-receipt-line {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  column-gap: 22px !important;
  padding: 22px 0 !important;
  border-bottom: 1.5px dashed rgba(17, 17, 17, 0.32) !important;
}

.accept-receipt-line img {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
}

.accept-receipt-line h3 {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  text-transform: none !important;
}

.accept-receipt-line p {
  font-size: clamp(17px, 1.25vw, 21px) !important;
}

.accept-receipt-line small {
  font-size: clamp(15px, 1.05vw, 18px) !important;
}

/* Total */
.accept-receipt-total {
  display: flex;
  justify-content: space-between;
  gap: 24px;

  margin-top: 26px;
  padding: 20px 0;

  border-top: 2px solid #111111;
  border-bottom: 2px solid #111111;

  font-family: Helvetica, Arial, sans-serif;
  color: #111111;
}

.accept-receipt-total span {
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.accept-receipt-total strong {
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 900;
  text-align: right;
}

/* Frase final */
.accept-receipt-bottom {
  padding-top: 24px !important;
  font-size: clamp(17px, 1.25vw, 22px) !important;
  letter-spacing: 0.02em !important;
  text-align: center;
  opacity: 0.88;
}

/* =========================
   02 / FACTURA - AUMENTAR ICONOS
========================= */

.accept-receipt-line {
  grid-template-columns: 102px minmax(0, 1fr) !important;
  column-gap: 26px !important;
}

.accept-receipt-line img {
  width: 95px !important;
  height: 95px !important;
  max-width: 66px !important;
  max-height: 66px !important;
  object-fit: contain !important;
  display: block !important;
  margin-top: 0 !important;
}

/* =========================
   02 / FACTURA - FORZAR ICONOS GRANDES
========================= */

.cookie-accepting-section .accept-receipt-line {
  grid-template-columns: 110px minmax(0, 1fr) !important;
  column-gap: 28px !important;
  align-items: center !important;
}

.cookie-accepting-section .accept-receipt-line img {
  width: 92px !important;
  height: 92px !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 92px !important;
  min-height: 92px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  transform: scale(1.35) !important;
  transform-origin: center center !important;
}

/* =========================
   06 / EL RECORRIDO
========================= */

.cookie-route-section {
  position: relative;
  min-height: 320vh;
  background: #ffffff;
  color: #111111;
}

.cookie-route-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #ffffff;
  padding:
    clamp(38px, 5vw, 70px)
    max(6vw, calc((100vw - 1180px) / 2))
    clamp(44px, 5vw, 80px);
}

.cookie-route-top {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: flex-start;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1;
  color: #111111;
}

.cookie-route-note {
  text-align: right;
}

.cookie-route-content {
  position: relative;
  margin-top: clamp(70px, 9vh, 120px);
}

/* Bloques */
.cookie-route-block {
  position: relative;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  column-gap: clamp(60px, 8vw, 120px);
  align-items: start;
}

.cookie-route-long {
  margin-top: clamp(110px, 14vh, 170px);
}

.cookie-route-heading h2 {
  margin: 0 0 28px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 4.4vw, 76px);
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: -0.055em;
  color: #111111;
}

.cookie-route-heading p {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(18px, 1.6vw, 25px);
  line-height: 1.05;
  font-weight: 900;
  color: #111111;
}

/* Recorrido */
.cookie-route-path {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 160px;
  padding-top: 28px;
}

.cookie-route-path-short {
  grid-template-columns: 180px 120px 130px 120px 110px;
  margin-top: clamp(50px, 6vw, 90px) !important;
  min-height: 210px !important;
}

.cookie-route-path-long {
  grid-template-columns: 210px 100px 130px 100px 120px 100px 120px 100px 90px;
}

.route-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;

  opacity: 0;
  transform: translateX(-34px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.route-label {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1;
  font-weight: 400;
  color: #111111;
  white-space: nowrap;
}

.route-button-label {
  min-width: 170px;
  padding: 8px 22px;
  border: 3px solid #111111;
  border-radius: 999px;
  font-weight: 400;
}

.route-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #111111;
  display: block;
}

/* Flechas */
.route-arrow {
  position: relative;
  height: 54px;
  align-self: end;
  margin-bottom: 13px;

  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.route-arrow::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 4px;
  background: #111111;
  transform: translateY(-50%);
  border-radius: 999px;
}

.route-arrow::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 38px;
  height: 38px;
  border-right: 4px solid #111111;
  border-top: 4px solid #111111;
  border-radius: 0 28px 0 0;
  transform: translateY(-50%) rotate(45deg);
}

/* Textos de apoyo */
.cookie-route-caption {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.cookie-route-caption-short {
  margin-top: 70px;
  width: min(520px, 100%);
  padding: 34px 42px;
  background: #eeeeee;
  grid-column: 1 / 3;
}

.cookie-route-caption-long {
  margin-top: 76px;
  grid-column: 1 / 3;
  max-width: 760px;
}

.cookie-route-caption p {
  margin: 0 0 22px 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(18px, 1.4vw, 23px);
  line-height: 1.25;
  font-weight: 700;
  color: #111111;
}

.cookie-route-caption p:last-child {
  margin-bottom: 0;
}

/* =========================
   ESTADOS POR SCROLL
========================= */

/* Corto */
.cookie-route-section[data-route-step="1"] .route-short-1,
.cookie-route-section[data-route-step="2"] .route-short-1,
.cookie-route-section[data-route-step="3"] .route-short-1,
.cookie-route-section[data-route-step="4"] .route-short-1,
.cookie-route-section[data-route-step="5"] .route-short-1,
.cookie-route-section[data-route-step="6"] .route-short-1,
.cookie-route-section[data-route-step="7"] .route-short-1,
.cookie-route-section[data-route-step="8"] .route-short-1,
.cookie-route-section[data-route-step="9"] .route-short-1,
.cookie-route-section[data-route-step="10"] .route-short-1 {
  opacity: 1;
  transform: translateX(0);
}

.cookie-route-section[data-route-step="2"] .route-short-arrow-1,
.cookie-route-section[data-route-step="3"] .route-short-arrow-1,
.cookie-route-section[data-route-step="4"] .route-short-arrow-1,
.cookie-route-section[data-route-step="5"] .route-short-arrow-1,
.cookie-route-section[data-route-step="6"] .route-short-arrow-1,
.cookie-route-section[data-route-step="7"] .route-short-arrow-1,
.cookie-route-section[data-route-step="8"] .route-short-arrow-1,
.cookie-route-section[data-route-step="9"] .route-short-arrow-1,
.cookie-route-section[data-route-step="10"] .route-short-arrow-1,
.cookie-route-section[data-route-step="2"] .route-short-2,
.cookie-route-section[data-route-step="3"] .route-short-2,
.cookie-route-section[data-route-step="4"] .route-short-2,
.cookie-route-section[data-route-step="5"] .route-short-2,
.cookie-route-section[data-route-step="6"] .route-short-2,
.cookie-route-section[data-route-step="7"] .route-short-2,
.cookie-route-section[data-route-step="8"] .route-short-2,
.cookie-route-section[data-route-step="9"] .route-short-2,
.cookie-route-section[data-route-step="10"] .route-short-2 {
  opacity: 1;
  transform: translateX(0);
}

.cookie-route-section[data-route-step="3"] .route-short-arrow-2,
.cookie-route-section[data-route-step="4"] .route-short-arrow-2,
.cookie-route-section[data-route-step="5"] .route-short-arrow-2,
.cookie-route-section[data-route-step="6"] .route-short-arrow-2,
.cookie-route-section[data-route-step="7"] .route-short-arrow-2,
.cookie-route-section[data-route-step="8"] .route-short-arrow-2,
.cookie-route-section[data-route-step="9"] .route-short-arrow-2,
.cookie-route-section[data-route-step="10"] .route-short-arrow-2,
.cookie-route-section[data-route-step="3"] .route-short-3,
.cookie-route-section[data-route-step="4"] .route-short-3,
.cookie-route-section[data-route-step="5"] .route-short-3,
.cookie-route-section[data-route-step="6"] .route-short-3,
.cookie-route-section[data-route-step="7"] .route-short-3,
.cookie-route-section[data-route-step="8"] .route-short-3,
.cookie-route-section[data-route-step="9"] .route-short-3,
.cookie-route-section[data-route-step="10"] .route-short-3,
.cookie-route-section[data-route-step="4"] .cookie-route-caption-short,
.cookie-route-section[data-route-step="5"] .cookie-route-caption-short,
.cookie-route-section[data-route-step="6"] .cookie-route-caption-short,
.cookie-route-section[data-route-step="7"] .cookie-route-caption-short,
.cookie-route-section[data-route-step="8"] .cookie-route-caption-short,
.cookie-route-section[data-route-step="9"] .cookie-route-caption-short,
.cookie-route-section[data-route-step="10"] .cookie-route-caption-short {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* Largo */
.cookie-route-long {
  opacity: 0;
  transform: translateY(42px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.cookie-route-section[data-route-step="5"] .cookie-route-long,
.cookie-route-section[data-route-step="6"] .cookie-route-long,
.cookie-route-section[data-route-step="7"] .cookie-route-long,
.cookie-route-section[data-route-step="8"] .cookie-route-long,
.cookie-route-section[data-route-step="9"] .cookie-route-long,
.cookie-route-section[data-route-step="10"] .cookie-route-long {
  opacity: 1;
  transform: translateY(0);
}

.cookie-route-section[data-route-step="5"] .route-long-1,
.cookie-route-section[data-route-step="6"] .route-long-1,
.cookie-route-section[data-route-step="7"] .route-long-1,
.cookie-route-section[data-route-step="8"] .route-long-1,
.cookie-route-section[data-route-step="9"] .route-long-1,
.cookie-route-section[data-route-step="10"] .route-long-1 {
  opacity: 1;
  transform: translateX(0);
}

.cookie-route-section[data-route-step="6"] .route-long-arrow-1,
.cookie-route-section[data-route-step="6"] .route-long-2,
.cookie-route-section[data-route-step="7"] .route-long-arrow-1,
.cookie-route-section[data-route-step="7"] .route-long-2,
.cookie-route-section[data-route-step="8"] .route-long-arrow-1,
.cookie-route-section[data-route-step="8"] .route-long-2,
.cookie-route-section[data-route-step="9"] .route-long-arrow-1,
.cookie-route-section[data-route-step="9"] .route-long-2,
.cookie-route-section[data-route-step="10"] .route-long-arrow-1,
.cookie-route-section[data-route-step="10"] .route-long-2 {
  opacity: 1;
  transform: translateX(0);
}

.cookie-route-section[data-route-step="7"] .route-long-arrow-2,
.cookie-route-section[data-route-step="7"] .route-long-3,
.cookie-route-section[data-route-step="8"] .route-long-arrow-2,
.cookie-route-section[data-route-step="8"] .route-long-3,
.cookie-route-section[data-route-step="9"] .route-long-arrow-2,
.cookie-route-section[data-route-step="9"] .route-long-3,
.cookie-route-section[data-route-step="10"] .route-long-arrow-2,
.cookie-route-section[data-route-step="10"] .route-long-3 {
  opacity: 1;
  transform: translateX(0);
}

.cookie-route-section[data-route-step="8"] .route-long-arrow-3,
.cookie-route-section[data-route-step="8"] .route-long-4,
.cookie-route-section[data-route-step="9"] .route-long-arrow-3,
.cookie-route-section[data-route-step="9"] .route-long-4,
.cookie-route-section[data-route-step="10"] .route-long-arrow-3,
.cookie-route-section[data-route-step="10"] .route-long-4 {
  opacity: 1;
  transform: translateX(0);
}

.cookie-route-section[data-route-step="9"] .route-long-arrow-4,
.cookie-route-section[data-route-step="9"] .route-long-5,
.cookie-route-section[data-route-step="10"] .route-long-arrow-4,
.cookie-route-section[data-route-step="10"] .route-long-5 {
  opacity: 1;
  transform: translateX(0);
}

.cookie-route-section[data-route-step="10"] .cookie-route-caption-long {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   06 / ESTRUCTURA COMO RESTO DE SECCIONES
========================= */

.cookie-route-section {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: #ffffff !important;
  color: #111111 !important;
  box-sizing: border-box !important;
}

.cookie-route-sticky {
  background: #ffffff !important;
  color: #111111 !important;

  padding:
    clamp(80px, 8vw, 130px)
    max(6vw, calc((100vw - 1180px) / 2))
    clamp(90px, 9vw, 140px) !important;

  box-sizing: border-box !important;
}

/* Ocultamos la cabecera antigua si todavía queda */
.cookie-route-top {
  display: none !important;
}

/* Cabecera nueva: igual que 01 / 02 */
.cookie-route-main-header {
  display: grid !important;
  grid-template-columns: minmax(240px, 34vw) minmax(420px, 1fr) !important;
  column-gap: clamp(60px, 8vw, 130px) !important;
  align-items: start !important;

  max-width: 1180px !important;
  margin: 0 auto !important;
}

/* 06/ grande naranja */
.cookie-route-main-number {
  color: #e88636 !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(130px, 17vw, 250px) !important;
  line-height: 0.78 !important;
  font-weight: 900 !important;
  letter-spacing: -0.08em !important;
}

/* Título principal */
.cookie-route-main-copy h2 {
  margin: 0 0 42px 0 !important;
  color: #111111 !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(76px, 8.8vw, 145px) !important;
  line-height: 0.84 !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important;

  max-width: 780px !important;
}

/* Párrafo introductorio */
.cookie-route-main-copy p {
  margin: 0 !important;
  color: #111111 !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(20px, 1.65vw, 28px) !important;
  line-height: 1.34 !important;
  font-weight: 400 !important;

  max-width: 760px !important;
}

/* El contenido de recorridos viene debajo de la cabecera */
.cookie-route-content {
  max-width: 1180px !important;
  margin: clamp(90px, 10vw, 150px) auto 0 auto !important;
}

/* Cada bloque deja de ser título izquierda / recorrido derecha */
.cookie-route-block {
  display: block !important;
  max-width: none !important;
}

/* El título del recorrido queda arriba */
.cookie-route-heading {
  max-width: 520px !important;
  margin-bottom: clamp(52px, 6vw, 86px) !important;
}

.cookie-route-heading h2 {
  margin: 0 0 26px 0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(46px, 5vw, 84px) !important;
  line-height: 0.9 !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important;
  color: #111111 !important;
}

.cookie-route-heading p {
  margin: 0 !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(19px, 1.7vw, 28px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  color: #111111 !important;
}

/* El recorrido aparece debajo del título, ocupando el ancho */
.cookie-route-path {
  width: 100% !important;
  margin-top: 0 !important;
  justify-content: center !important;
}

/* Recorrido corto centrado */
.cookie-route-path-short {
  display: grid !important;
  grid-template-columns: 210px 140px 150px 140px 120px !important;
  justify-content: center !important;
}

/* Recorrido largo centrado */
.cookie-route-path-long {
  display: grid !important;
  grid-template-columns: 220px 105px 150px 105px 135px 105px 130px 105px 110px !important;
  justify-content: center !important;
}

/* Separación entre recorrido corto y largo */
.cookie-route-long {
  margin-top: clamp(140px, 18vw, 230px) !important;
}

/* Cajas de texto debajo de cada recorrido */
.cookie-route-caption-short,
.cookie-route-caption-long {
  margin-top: clamp(70px, 8vw, 110px) !important;
}

/* =========================
   06 / TITULO PRINCIPAL EN TRES LÍNEAS
========================= */

.cookie-route-main-copy h2 {
  max-width: 760px !important;
  font-size: clamp(68px, 7.4vw, 118px) !important;
  line-height: 0.86 !important;
  letter-spacing: -0.055em !important;
}

/* =========================
   06 / TÍTULO EN TRES LÍNEAS FIJAS
========================= */

.cookie-route-main-header {
  grid-template-columns: minmax(220px, 30vw) minmax(620px, 1fr) !important;
  column-gap: clamp(40px, 5vw, 90px) !important;
}

.cookie-route-main-copy {
  min-width: 0 !important;
}

.cookie-route-main-title,
.cookie-route-main-copy h2 {
  max-width: none !important;
  width: max-content !important;

  font-size: clamp(68px, 7.2vw, 120px) !important;
  line-height: 0.86 !important;
  letter-spacing: -0.055em !important;
}

.cookie-route-main-title span {
  display: block !important;
  white-space: nowrap !important;
}

/* =========================
   06 / CONTROL DEFINITIVO DE APARICIONES
   Solo aparece el recorrido cuando toca
========================= */

/* Al inicio, el bloque de recorridos no se ve */
.cookie-route-section .cookie-route-content {
  opacity: 0 !important;
  transform: translateY(34px) !important;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease !important;
}

/* Cuando el JS lo activa */
.cookie-route-section .cookie-route-content.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Títulos de recorrido ocultos hasta su momento */
.cookie-route-section .cookie-route-short .cookie-route-heading,
.cookie-route-section .cookie-route-long .cookie-route-heading {
  opacity: 0 !important;
  transform: translateY(26px) !important;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease !important;
}

.cookie-route-section .cookie-route-short .cookie-route-heading.is-visible,
.cookie-route-section .cookie-route-long .cookie-route-heading.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Recorrido largo oculto hasta que toque */
.cookie-route-section .cookie-route-long {
  opacity: 0 !important;
  transform: translateY(42px) !important;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease !important;
}

.cookie-route-section .cookie-route-long.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Puntos y flechas siempre ocultos si no tienen .is-visible */
.cookie-route-section .route-step:not(.is-visible),
.cookie-route-section .route-arrow:not(.is-visible) {
  opacity: 0 !important;
  transform: translateX(-34px) !important;
}

/* Puntos y flechas visibles solo cuando el JS los activa */
.cookie-route-section .route-step.is-visible,
.cookie-route-section .route-arrow.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Transición común */
.cookie-route-section .route-step,
.cookie-route-section .route-arrow {
  transition:
    opacity 0.5s ease,
    transform 0.5s ease !important;
}

/* Damos más recorrido vertical para que todo respire */
.cookie-route-section {
  min-height: 620vh !important;
}

/* Ajuste de posición general del bloque cuando aparece */
.cookie-route-content {
  margin-top: clamp(46px, 5vw, 76px) !important;
}

/* =========================
   06 / SEPARAR TÍTULO DEL RECORRIDO Y PUNTOS
========================= */

.cookie-route-short .cookie-route-path {
  margin-top: clamp(90px, 10vw, 150px) !important;
}

.cookie-route-long .cookie-route-path {
  margin-top: clamp(90px, 10vw, 150px) !important;
}

.cookie-route-sticky {
  overflow: visible !important;
}

.cookie-words-board {
  margin-top: clamp(70px, 8vw, 115px);
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 140px minmax(320px, 1fr);
  column-gap: clamp(22px, 3vw, 42px);
  align-items: stretch;
}

.cookie-words-side {
  border: 2px solid #111111;
  border-radius: 22px;
  padding: clamp(26px, 3vw, 36px) clamp(26px, 3vw, 34px);
  background: #ffffff;
  box-sizing: border-box;
}

.cookie-words-side-title {
  margin: 0 0 clamp(26px, 2.2vw, 34px) 0;
  font-family: Georgia, "Times New Roman", serif; /* sustituye por tu tipografía serif real */
  font-size: clamp(22px, 2vw, 30px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #e88636;
}

.cookie-words-middle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(86px, 8vw, 110px) 0 clamp(36px, 3vw, 46px);
}

.cookie-words-arrow-row {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cookie-words-arrow {
  width: 100%;
  max-width: 110px;
  height: auto;
  display: block;
}

.cookie-words-list {
  display: flex;
  flex-direction: column;
}

.cookie-words-item {
  padding: clamp(18px, 2vw, 26px) 0;
}

.cookie-words-item + .cookie-words-item {
  border-top: 1px dashed rgba(17, 17, 17, 0.18);
}

.cookie-words-term {
  margin: 0 0 4px 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(28px, 2.2vw, 38px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #111111;
}

.cookie-words-desc {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.28;
  font-weight: 400;
  color: #111111;
}

.cookie-words-left .cookie-words-term,
.cookie-words-left .cookie-words-desc {
  color: rgba(17, 17, 17, 0.72);
}

.cookie-words-right .cookie-words-term,
.cookie-words-right .cookie-words-desc {
  color: #111111;
}

/* ==============================
   RESCATE 08 / PALABRAS QUE EMPUJAN
   Y PALABRAS QUE CUIDAN
============================== */

.cookie-words-section {
  position: relative !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: #ffffff !important;
  color: #111111 !important;
  padding: clamp(90px, 10vw, 140px) 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.cookie-words-inner {
  width: min(1280px, calc(100vw - 96px)) !important;
  margin: 0 auto !important;
}

/* Cabecera */
.cookie-words-header {
  display: grid !important;
  grid-template-columns: clamp(180px, 18vw, 280px) minmax(0, 1fr) !important;
  column-gap: clamp(28px, 4vw, 80px) !important;
  align-items: start !important;
}

.cookie-words-number {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(120px, 15vw, 230px) !important;
  line-height: 0.9 !important;
  font-weight: 900 !important;
  letter-spacing: -0.06em !important;
  color: #e88636 !important;
}

.cookie-words-copy h2 {
  margin: 0 !important;
  font-family: "Times New Roman", Georgia, serif !important;
  font-size: clamp(70px, 8vw, 130px) !important;
  line-height: 0.88 !important;
  font-weight: 400 !important;
  letter-spacing: -0.05em !important;
  color: #111111 !important;
}

.cookie-words-copy p {
  margin: clamp(32px, 3vw, 42px) 0 0 !important;
  max-width: 560px !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(20px, 1.8vw, 27px) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: #111111 !important;
}

/* Grid de dos cajas */
.cookie-words-grid {
  --arrow-col: 120px;
  --grid-gap: 34px;
  --side-col: calc((100% - var(--arrow-col) - (var(--grid-gap) * 2)) / 2);

  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--side-col) var(--arrow-col) var(--side-col) !important;
  column-gap: var(--grid-gap) !important;
  row-gap: 0 !important;

  margin-top: clamp(80px, 8vw, 110px) !important;
  padding: clamp(34px, 3.5vw, 44px) clamp(28px, 2.5vw, 36px) !important;
  box-sizing: border-box !important;
}

/* Cajas izquierda y derecha */
.cookie-words-grid::before,
.cookie-words-grid::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  border: 2px solid #111111 !important;
  border-radius: 18px !important;
  pointer-events: none !important;
}

.cookie-words-grid::before {
  left: 0 !important;
  width: var(--side-col) !important;
}

.cookie-words-grid::after {
  left: calc(var(--side-col) + var(--grid-gap) + var(--arrow-col) + var(--grid-gap)) !important;
  width: var(--side-col) !important;
}

/* Títulos empujan / cuidan */
.cookie-words-col-title {
  position: relative !important;
  z-index: 2 !important;
  padding: 22px 26px 18px !important;

  font-family: "Times New Roman", Georgia, serif !important;
  font-size: clamp(22px, 1.8vw, 34px) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: lowercase !important;

  color: #e88636 !important;
}

.cookie-words-col-title-left {
  grid-column: 1 !important;
}

.cookie-words-col-title-right {
  grid-column: 3 !important;
}

/* Items */
.cookie-words-item {
  position: relative !important;
  z-index: 2 !important;
  padding: 26px 26px 28px !important;
  min-height: 122px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.cookie-words-item-left {
  grid-column: 1 !important;
  border-top: 1px dashed rgba(17, 17, 17, 0.18) !important;
}

.cookie-words-item-right {
  grid-column: 3 !important;
  border-top: 1px dashed rgba(17, 17, 17, 0.18) !important;
}

/* Quitar línea superior de la primera pareja */
.cookie-words-grid .cookie-words-item-left:nth-of-type(1),
.cookie-words-grid .cookie-words-item-right:nth-of-type(2) {
  border-top: none !important;
}

.cookie-words-item h3 {
  margin: 0 0 4px !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(28px, 2.35vw, 42px) !important;
  line-height: 0.95 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
}

.cookie-words-item-left h3 {
  color: #4c4c4c !important;
}

.cookie-words-item-right h3 {
  color: #111111 !important;
}

.cookie-words-item p {
  margin: 0 !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(16px, 1.2vw, 24px) !important;
  line-height: 1.28 !important;
  font-weight: 400 !important;
}

.cookie-words-item-left p {
  color: #4c4c4c !important;
}

.cookie-words-item-right p {
  color: #111111 !important;
}

/* Flechas */
.cookie-words-arrow {
  position: relative !important;
  align-self: center !important;
  justify-self: center !important;
  width: 96px !important;
  height: 40px !important;

  color: #111111 !important;
  opacity: 0.95 !important;

  transition:
    color 0.35s ease,
    transform 0.35s ease !important;
}

.cookie-words-arrow::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 72px !important;
  height: 2px !important;
  background-color: currentColor !important;
  transform: translateY(-50%) !important;
}

.cookie-words-arrow::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;

  width: 22px !important;
  height: 22px !important;

  border-top: 2px solid currentColor !important;
  border-right: 2px solid currentColor !important;
  border-radius: 0 12px 0 0 !important;

  transform: translateY(-50%) rotate(45deg) !important;
}

/* Flechas negras por defecto aunque haya clases antiguas */
.cookie-words-arrow.is-visible {
  color: #111111 !important;
  transform: none !important;
}

/* Solo se ponen naranjas cuando el JS les añade esta clase */
.cookie-words-arrow.is-arrow-active {
  color: #e88636 !important;
  transform: translateX(6px) !important;
}

/* Responsive */
@media (max-width: 1080px) {
  .cookie-words-header {
    grid-template-columns: 1fr !important;
    row-gap: 22px !important;
  }

  .cookie-words-grid {
    --arrow-col: 80px;
    --grid-gap: 22px;
    padding: 22px !important;
  }

  .cookie-words-item h3 {
    font-size: clamp(22px, 2.6vw, 32px) !important;
  }
}

@media (max-width: 860px) {
  .cookie-words-inner {
    width: min(100%, calc(100vw - 48px)) !important;
  }

  .cookie-words-grid {
    display: block !important;
    padding: 20px !important;
  }

  .cookie-words-grid::before,
  .cookie-words-grid::after {
    display: none !important;
  }

  .cookie-words-col-title,
  .cookie-words-item {
    border: 2px solid #111111 !important;
    border-radius: 16px !important;
    margin-bottom: 18px !important;
    padding: 20px !important;
  }

  .cookie-words-arrow {
    display: none !important;
  }

  .cookie-words-col-title-right {
    margin-top: 32px !important;
  }
}

/* =========================
   05 / MÁS ESPACIO PARA SECUENCIA
========================= */

.chapter-focus {
  min-height: 170vh !important;
  padding-top: clamp(110px, 10vw, 170px) !important;
  padding-bottom: clamp(180px, 18vw, 300px) !important;
}

.chapter-focus .chapter-copy {
  max-width: 760px !important;
}

.chapter-focus .focus-grid {
  margin-top: clamp(80px, 9vw, 150px) !important;
}

/* =========================
   05 / SECUENCIA PERCEPTIVA
========================= */

.chapter-focus {
  position: relative !important;
  min-height: 360vh !important;
  padding-bottom: clamp(180px, 18vw, 300px) !important;
}

/* Zona de la secuencia */
.chapter-focus .focus-sequence {
  position: relative !important;
  margin-top: clamp(64px, 7vw, 110px) !important;
  min-height: clamp(360px, 44vw, 620px) !important;
}

/* Todas las escenas empiezan ocultas */
.chapter-focus .focus-sequence-card {
  position: absolute !important;
  inset: 0 auto auto 0 !important;

  opacity: 0 !important;
  transform: translateY(26px) !important;
  pointer-events: none !important;

  transition:
    opacity 0.5s ease,
    transform 0.5s ease !important;
}

/* Escena 1: pregunta inicial con el mismo estilo que "Y bien..." */
.chapter-focus .focus-sequence-intro {
  left: 50% !important;
  top: clamp(70px, 8vw, 120px) !important;
  width: min(820px, 82vw) !important;
  text-align: center !important;
  transform: translate(-50%, 26px) !important;

  background: transparent !important;
  color: #fff8ea !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Frase pequeña superior */
.chapter-focus .focus-intro-lead {
  margin: 0 0 clamp(34px, 3.5vw, 56px) 0 !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(36px, 4vw, 72px) !important;
  line-height: 0.95 !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important;

  color: #fff8ea !important;
  white-space: nowrap !important;
}

/* Pregunta principal */
.chapter-focus .focus-intro-question {
  margin: 0 !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(52px, 6vw, 104px) !important;
  line-height: 0.9 !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important;

  color: #fff8ea !important;
}

/* Escena 2: imagen del banner */
.chapter-focus .focus-sequence-banner {
  left: 50% !important;
  top: 50% !important;
  width: min(860px, 78vw) !important;
  transform: translate(-50%, -50%) !important;
}

.chapter-focus .focus-sequence-banner img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Escena 3 y 4: pregunta / respuesta */
.chapter-focus .focus-sequence-question,
.chapter-focus .focus-sequence-answer {
  left: 50% !important;
  top: clamp(70px, 8vw, 120px) !important;
  width: min(760px, 80vw) !important;
  text-align: center !important;
  transform: translate(-50%, 26px) !important;
}

.chapter-focus .focus-sequence-question h3 {
  margin: 0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(52px, 6vw, 104px) !important;
  line-height: 0.9 !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important;
  color: #fff8ea !important;
}

.chapter-focus .focus-sequence-answer p {
  margin: 0 !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(26px, 2.8vw, 48px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  color: #fff8ea !important;
}

.chapter-focus .focus-sequence-answer span {
  display: inline-block !important;
  background: #e88636 !important;
  color: #111111 !important;
  padding: 0.02em 0.18em !important;
}

/* Escenas visibles */
.chapter-focus[data-focus-scene="1"] .focus-sequence-intro {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
  pointer-events: auto !important;
}

.chapter-focus[data-focus-scene="2"] .focus-sequence-banner {
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto !important;
}

.chapter-focus[data-focus-scene="3"] .focus-sequence-question {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
  pointer-events: auto !important;
}

.chapter-focus[data-focus-scene="4"] .focus-sequence-answer {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
  pointer-events: auto !important;
}

/* Los cuadros de factores empiezan ocultos */
.chapter-focus .focus-grid {
  opacity: 0 !important;
  transform: translateY(60px) !important;
  pointer-events: none !important;

  margin-top: clamp(90px, 10vw, 150px) !important;

  transition:
    opacity 0.65s ease,
    transform 0.65s ease !important;
}

/* Aparecen al final de la secuencia */
.chapter-focus[data-focus-scene="5"] .focus-grid {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* En escena 5, las tarjetas se fuerzan visibles aunque tengan reveal */
.chapter-focus[data-focus-scene="5"] .focus-card {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Evita que las tarjetas aparezcan antes por la clase reveal */
.chapter-focus:not([data-focus-scene="5"]) .focus-card {
  opacity: 0 !important;
}

/* =========================
   05 / SECUENCIA SUJETA AL SCROLL
========================= */

.chapter-focus {
  min-height: 460vh !important;
}

.chapter-focus .focus-sequence {
  position: sticky !important;
  top: 18vh !important;
  margin-top: clamp(70px, 8vw, 120px) !important;
  min-height: clamp(430px, 48vw, 680px) !important;
  z-index: 5 !important;
}

/* =========================
   05 / CENTRAR SECUENCIA EN PANTALLA
========================= */

.chapter-focus .focus-sequence {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Centrado real de la primera pregunta */
.chapter-focus .focus-sequence-intro {
  left: 50% !important;
  top: 50% !important;
  width: min(980px, 88vw) !important;
  text-align: center !important;
  transform: translate(-50%, -50%) !important;
}

/* Cuando aparece, que no pierda el centrado */
.chapter-focus[data-focus-scene="1"] .focus-sequence-intro {
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto !important;
}

/* 05 / subir pregunta "Y bien" */
.chapter-focus .focus-sequence-question {
  top: 42% !important;
  transform: translate(-50%, -50%) !important;
}

.chapter-focus[data-focus-scene="3"] .focus-sequence-question {
  transform: translate(-50%, -50%) !important;
}

/* =========================
   05 / CUADROS COMO ESCENA FINAL
========================= */

.chapter-focus .focus-sequence .focus-sequence-factors {
  position: absolute !important;
  inset: auto !important;

  left: 50% !important;
  top: 50% !important;
  width: min(1180px, 88vw) !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;

  margin: 0 !important;

  opacity: 0 !important;
  transform: translate(-50%, -42%) !important;
  pointer-events: none !important;

  transition:
    opacity 0.65s ease,
    transform 0.65s ease !important;
}

.chapter-focus[data-focus-scene="5"] .focus-sequence .focus-sequence-factors {
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto !important;
}

.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* =========================
   05 / EFECTO CONCEPTUAL TARJETAS
========================= */

.chapter-focus .focus-sequence-factors .focus-card {
  position: relative !important;
  overflow: hidden !important;

  opacity: 0 !important;
  transform: translateY(34px) scale(0.96) !important;

  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    border-color 0.55s ease,
    background-color 0.55s ease,
    filter 0.55s ease !important;
}

/* Entrada una a una */
.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card:nth-child(1) {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition-delay: 0.05s !important;
}

.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card:nth-child(2) {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition-delay: 0.18s !important;
}

.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card:nth-child(3) {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition-delay: 0.31s !important;
}

.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card:nth-child(4) {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition-delay: 0.44s !important;
}

/* COLOR: aparece una franja naranja */
.chapter-focus .focus-sequence-factors .focus-card:nth-child(1)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #e88636;
  opacity: 0.9;
  transition: width 0.55s ease 0.25s;
}

.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card:nth-child(1)::before {
  width: 8px;
}

/* TAMAÑO: crece la letra, no el cuadrado */
.chapter-focus .focus-sequence-factors .focus-card:nth-child(2) span,
.chapter-focus .focus-sequence-factors .focus-card:nth-child(2) p {
  transition:
    font-size 0.55s ease,
    line-height 0.55s ease,
    color 0.55s ease !important;
}

.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card:nth-child(2) span {
  font-size: clamp(18px, 1.6vw, 26px) !important;
  line-height: 1 !important;
}

.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card:nth-child(2) p {
  font-size: clamp(20px, 1.65vw, 28px) !important;
  line-height: 1.18 !important;
}

/* POSICIÓN: el texto se desplaza hacia la parte baja del cuadrado */
.chapter-focus .focus-sequence-factors .focus-card:nth-child(3) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    justify-content 0.55s ease !important;
}

.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card:nth-child(3) {
  justify-content: flex-end !important;
}

/* CONTRASTE: el texto aparece lo más blanco posible */
.chapter-focus .focus-sequence-factors .focus-card:nth-child(4) span,
.chapter-focus .focus-sequence-factors .focus-card:nth-child(4) p {
  color: rgba(255, 248, 234, 0.35) !important;
  transition: color 0.65s ease 0.35s !important;
}

.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card:nth-child(4) span,
.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card:nth-child(4) p {
  color: #fff8ea !important;
}

/* Títulos destacados en naranja, excepto contraste para que sea blanco */
.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card:nth-child(1) span,
.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card:nth-child(2) span,
.chapter-focus[data-focus-scene="5"] .focus-sequence-factors .focus-card:nth-child(3) span {
  color: #e88636 !important;
}

/* =========================
   06 / RECORRIDO - CABECERA SEPARADA DEL STICKY
========================= */

.cookie-route-section {
  position: relative !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: #ffffff !important;
  color: #111111 !important;
  overflow: hidden !important;
}

/* Cabecera 06: ya NO es sticky */
.cookie-route-main-header {
  position: relative !important;
  z-index: 2 !important;

  width: min(1180px, calc(100vw - 96px)) !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: minmax(220px, 30vw) minmax(620px, 1fr) !important;
  column-gap: clamp(40px, 5vw, 90px) !important;
  align-items: start !important;

  padding:
    clamp(90px, 8vw, 140px)
    0
    clamp(130px, 14vw, 220px) !important;

  box-sizing: border-box !important;
}

.cookie-route-main-number {
  color: #e88636 !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(110px, 14vw, 205px) !important;
  line-height: 0.78 !important;
  font-weight: 900 !important;
  letter-spacing: -0.08em !important;
}

.cookie-route-main-title,
.cookie-route-main-copy h2 {
  margin: 0 0 34px 0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(68px, 7.2vw, 120px) !important;
  line-height: 0.86 !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important;
  color: #111111 !important;
}

.cookie-route-main-title span {
  display: block !important;
  white-space: nowrap !important;
}

.cookie-route-main-copy p {
  margin: 0 !important;
  max-width: 720px !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(19px, 1.45vw, 24px) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: #111111 !important;
}

/* Zona donde empieza realmente la animación */
.cookie-route-stage {
  position: relative !important;
  min-height: 520vh !important;
  background: #ffffff !important;
}

/* Sticky solo para los recorridos */
.cookie-route-stage .cookie-route-sticky {
  position: sticky !important;
  top: 0 !important;

  min-height: 100vh !important;
  height: 100vh !important;
  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;

  background: #ffffff !important;

  padding:
    clamp(40px, 5vw, 70px)
    max(6vw, calc((100vw - 1180px) / 2)) !important;

  box-sizing: border-box !important;
}

/* Contenido de recorridos */
.cookie-route-stage .cookie-route-content {
  width: min(1180px, calc(100vw - 96px)) !important;
  margin: 0 auto !important;

  opacity: 0 !important;
  transform: translateY(34px) !important;

  transition:
    opacity 0.55s ease,
    transform 0.55s ease !important;
}

.cookie-route-stage .cookie-route-content.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Bloques */
.cookie-route-stage .cookie-route-block {
  display: block !important;
}

.cookie-route-stage .cookie-route-long {
  margin-top: clamp(120px, 13vw, 190px) !important;

  opacity: 0 !important;
  transform: translateY(42px) !important;

  transition:
    opacity 0.55s ease,
    transform 0.55s ease !important;
}

.cookie-route-stage .cookie-route-long.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Títulos de recorrido */
.cookie-route-stage .cookie-route-heading {
  opacity: 0 !important;
  transform: translateY(28px) !important;

  transition:
    opacity 0.55s ease,
    transform 0.55s ease !important;
}

.cookie-route-stage .cookie-route-heading.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.cookie-route-heading h2 {
  margin: 0 0 22px 0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(46px, 5vw, 82px) !important;
  line-height: 0.9 !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important;
  color: #111111 !important;
}

.cookie-route-heading p {
  margin: 0 !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(18px, 1.6vw, 25px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  color: #111111 !important;
}

/* Caminos */
.cookie-route-path {
  display: grid !important;
  align-items: end !important;
  min-height: 150px !important;
  padding-top: clamp(32px, 4vw, 60px) !important;
}

.cookie-route-path-short {
  grid-template-columns: 210px 140px 150px 140px 120px !important;
  justify-content: center !important;
}

.cookie-route-path-long {
  grid-template-columns: 220px 105px 150px 105px 135px 105px 130px 105px 110px !important;
  justify-content: center !important;
}

/* Pasos y flechas ocultos por defecto */
.cookie-route-stage .route-step,
.cookie-route-stage .route-arrow {
  opacity: 0 !important;
  transform: translateX(-34px) !important;

  transition:
    opacity 0.48s ease,
    transform 0.48s ease !important;
}

.cookie-route-stage .route-step.is-visible,
.cookie-route-stage .route-arrow.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Etiquetas */
.route-step {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 28px !important;
}

.route-label {
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(19px, 1.55vw, 26px) !important;
  line-height: 1 !important;
  font-weight: 400 !important;

  color: #111111 !important;
  white-space: nowrap !important;
}

.route-button-label {
  min-width: 170px !important;
  padding: 8px 22px !important;
  border: 3px solid #111111 !important;
  border-radius: 999px !important;
}

.route-dot {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #111111 !important;
  display: block !important;
}

/* Flechas */
.route-arrow {
  position: relative !important;
  height: 54px !important;
  align-self: end !important;
  margin-bottom: 13px !important;
}

.route-arrow::before {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  top: 50% !important;

  height: 4px !important;
  background: #111111 !important;
  border-radius: 999px !important;

  transform: translateY(-50%) !important;
}

.route-arrow::after {
  content: "" !important;
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;

  width: 38px !important;
  height: 38px !important;

  border-right: 4px solid #111111 !important;
  border-top: 4px solid #111111 !important;
  border-radius: 0 28px 0 0 !important;

  transform: translateY(-50%) rotate(45deg) !important;
}

/* Texto final del recorrido largo */
.cookie-route-caption-long {
  opacity: 0 !important;
  transform: translateY(24px) !important;

  margin-top: clamp(60px, 7vw, 100px) !important;
  max-width: 760px !important;

  transition:
    opacity 0.5s ease,
    transform 0.5s ease !important;
}

.cookie-route-caption-long.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.cookie-route-caption-long p {
  margin: 0 !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(18px, 1.35vw, 23px) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;

  color: #111111 !important;
}

/* =========================
   04 / MARCAS SEGUNDA CAPA
========================= */

.anatomy-second-marks {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

/* Todas las marcas ocultas por defecto */
.anatomy-second-mark {
  position: absolute;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* =========================
   TEXTO 2 / INFORMACIÓN PREVIA
   Resaltado tipo lectura
========================= */

.mark-info-highlight {
  left: 36.6%;
  top: 45.4%;
  width: 31%;
  height: 4.6%;

  background: rgba(232, 134, 54, 0.42);
  border-radius: 999px;

  transform-origin: left center;
  transform: scaleX(0);
}

.anatomy-fullscreen-section[data-anatomy-mark="info"] .mark-info-highlight {
  opacity: 1;
  transform: scaleX(1);
  transition:
    opacity 0.25s ease,
    transform 0.75s ease;
}

/* =========================
   TEXTO 3 / CATEGORÍAS
   Marco agrupador
========================= */

.mark-categories-box {
  left: 39.5%;
  top: 31%;
  width: 43%;
  height: 43%;

  border: 4px solid #e88636;
  border-radius: 22px;
}

.anatomy-fullscreen-section[data-anatomy-mark="categories"] .mark-categories-box {
  opacity: 1;
  transform: scale(1);
}

/* =========================
   TEXTO 4 / ACCIONES VISIBLES
   Marco ondulado animado
========================= */

.mark-actions-wave {
  left: 41.5%;
  top: 74.5%;
  width: 40%;
  height: 18%;
}

.mark-actions-wave svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mark-actions-wave path {
  fill: none;
  stroke: #e88636;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
}

.anatomy-fullscreen-section[data-anatomy-mark="actions"] .mark-actions-wave {
  opacity: 1;
  transform: scale(1);
}

.anatomy-fullscreen-section[data-anatomy-mark="actions"] .mark-actions-wave path {
  animation:
    drawActionsWave 0.9s ease forwards,
    wobbleActionsWave 2.2s ease-in-out 0.9s infinite;
}

@keyframes drawActionsWave {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes wobbleActionsWave {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(3px, -2px) scale(1.015);
  }
}

/* =========================
   TEXTO 5 / INTERRUPTORES
   Halos
========================= */

.mark-switch-halos {
  left: 75.5%;
  top: 31%;
  width: 9%;
  height: 43%;
}

.mark-switch-halos span {
  position: absolute;
  right: 0;

  width: 58px;
  height: 38px;

  border: 4px solid #e88636;
  border-radius: 999px;

  opacity: 0;
  transform: scale(0.75);
}

.mark-switch-halos span:nth-child(1) { top: 0%; }
.mark-switch-halos span:nth-child(2) { top: 18%; }
.mark-switch-halos span:nth-child(3) { top: 36%; }
.mark-switch-halos span:nth-child(4) { top: 54%; }
.mark-switch-halos span:nth-child(5) { top: 72%; }
.mark-switch-halos span:nth-child(6) { top: 90%; }

.anatomy-fullscreen-section[data-anatomy-mark="switches"] .mark-switch-halos {
  opacity: 1;
  transform: scale(1);
}

.anatomy-fullscreen-section[data-anatomy-mark="switches"] .mark-switch-halos span {
  animation: switchHaloIn 0.35s ease forwards;
}

.anatomy-fullscreen-section[data-anatomy-mark="switches"] .mark-switch-halos span:nth-child(1) { animation-delay: 0.05s; }
.anatomy-fullscreen-section[data-anatomy-mark="switches"] .mark-switch-halos span:nth-child(2) { animation-delay: 0.14s; }
.anatomy-fullscreen-section[data-anatomy-mark="switches"] .mark-switch-halos span:nth-child(3) { animation-delay: 0.23s; }
.anatomy-fullscreen-section[data-anatomy-mark="switches"] .mark-switch-halos span:nth-child(4) { animation-delay: 0.32s; }
.anatomy-fullscreen-section[data-anatomy-mark="switches"] .mark-switch-halos span:nth-child(5) { animation-delay: 0.41s; }
.anatomy-fullscreen-section[data-anatomy-mark="switches"] .mark-switch-halos span:nth-child(6) { animation-delay: 0.50s; }

@keyframes switchHaloIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================
   TEXTO 6 / ACTIVADAS / DESACTIVADAS
========================= */

.mark-switch-states {
  left: 75.5%;
  top: 31%;
  width: 9%;
  height: 43%;
}

.mark-switch-states span {
  position: absolute;
  right: 0;

  width: 62px;
  height: 40px;

  border-radius: 999px;
  opacity: 0;
  transform: scale(0.85);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.mark-switch-states .state-on {
  top: 0%;
  border: 4px solid #e88636;
  background: rgba(232, 134, 54, 0.22);
}

.mark-switch-states .state-off {
  top: 18%;
  border: 4px solid rgba(17, 17, 17, 0.35);
  background: rgba(17, 17, 17, 0.05);
}

.anatomy-fullscreen-section[data-anatomy-mark="states"] .mark-switch-states {
  opacity: 1;
  transform: scale(1);
}

.anatomy-fullscreen-section[data-anatomy-mark="states"] .mark-switch-states span {
  opacity: 1;
  transform: scale(1);
}

/* =========================
   TEXTO 3 / CATEGORÍAS DE COOKIES
   Llave vertical tipo "{"
   Entra de arriba abajo / sale de abajo arriba
========================= */

.mark-categories-brace {
  position: absolute;
  left: 56%;
  top: 13%;
  width: 4.5%;
  height: 60%;
  z-index: 8;
  pointer-events: none;

  opacity: 0;
  transform: translateY(0) scale(1);

  /* Oculto desde abajo */
  clip-path: inset(0 0 100% 0);

  transition:
    clip-path 0.75s ease,
    opacity 0s linear 0.75s;
}

.mark-categories-brace svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.mark-categories-brace path {
  fill: none;
  stroke: #e88636;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* Quitamos el dibujado por trazo para que mande el clip-path */
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}

/* Cuando toca el paso "categories" */
.anatomy-fullscreen-section[data-anatomy-mark="categories"] .mark-categories-brace {
  opacity: 1;

  /* Se revela completo */
  clip-path: inset(0 0 0 0);

  transition:
    opacity 0.15s ease,
    clip-path 0.75s ease;
}

/* =========================
   00 / NUEVA MAQUETA EDITORIAL
========================= */

.quote-section {
  background: #11100d;
}

.quote-sticky {
  align-items: flex-start !important;
  padding: clamp(70px, 9vh, 110px) clamp(28px, 9vw, 170px) !important;
}

.quote-content {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-items: start;
}

/* Cabecera superior: 00/ + título */
.quote-chapter-heading {
  width: 100%;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  gap: clamp(34px, 6vw, 90px);
  margin-top: 0;
}

.quote-big-number {
  margin: 0;
  justify-self: end;

  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(90px, 10vw, 170px);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.08em;
  color: #e4873c;
}

.quote-chapter-title h2 {
  margin: clamp(34px, 4vw, 62px) 0 0;

  font-family: var(--font-title);
  font-size: clamp(46px, 5.4vw, 88px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.055em;
  color: var(--ink);
}

/* Frase animada: misma interacción, nueva escala */
.quote-title-small {
  max-width: 560px !important;
  margin: auto 0 0 !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(30px, 3.1vw, 54px) !important;
  font-weight: 800 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  color: var(--ink) !important;
}

/* Asegura que las palabras animadas también sean Helvetica */
.quote-title-small .scroll-word {
  font-family: Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
}

/* Comillas */
.quote-mark {
  margin: 26px 0 0 !important;
  font-family: var(--font-title);
  font-size: clamp(90px, 10vw, 150px) !important;
  line-height: 0.55;
  color: #e4873c;
}

/* Frase inferior */
.helvetica-statement,
.helvetica-statement .scroll-word {
  max-width: 1060px !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(22px, 2.2vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  color: var(--ink) !important;
}

/* Ajuste responsive */
@media (max-width: 760px) {
  .quote-sticky {
    padding: 64px 24px 80px !important;
  }

  .quote-chapter-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .quote-big-number {
    justify-self: start;
    font-size: clamp(86px, 24vw, 140px);
  }

  .quote-chapter-title h2 {
    margin-top: 0;
    font-size: clamp(42px, 13vw, 74px);
  }

  .quote-title-small {
    margin-top: 110px !important;
    font-size: clamp(28px, 9vw, 46px) !important;
  }

  .helvetica-statement,
  .helvetica-statement .scroll-word {
    font-size: clamp(20px, 6vw, 32px) !important;
  }
}

/* =========================
   AJUSTES FINOS 00
========================= */

/* 00/ un poco menos pegado */
.quote-big-number {
  letter-spacing: -0.035em !important;
}



/* Frase animada: la dejamos protagonista */
.quote-title-small {
  max-width: 640px !important;
  font-weight: 800 !important;
  line-height: 0.98 !important;
}

/* Frase inferior: más secundaria, menos peso */
.helvetica-statement,
.helvetica-statement .scroll-word {
  max-width: 1040px !important;

  font-size: clamp(19px, 1.75vw, 30px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;

  color: rgba(247, 240, 223, 0.86) !important;
}

/* Para que las palabras animadas de la frase inferior no hereden tanta fuerza */
.helvetica-statement .scroll-word {
  font-weight: 400 !important;
}

/* 00/ un poco más respirado */
.quote-big-number {
  letter-spacing: 0.01em !important;
}

/* Frase inferior más secundaria */
.helvetica-statement,
.helvetica-statement .scroll-word {
  font-size: clamp(18px, 1.65vw, 28px) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  color: rgba(247, 240, 223, 0.78) !important;
}

.helvetica-statement .scroll-word {
  font-weight: 400 !important;
}

/* =========================
   AJUSTE ALTURA BLOQUE 00
========================= */

/* Subimos el bloque de lectura: frase animada + comillas + frase final */
/* Mover frase, comilla y texto inferior un poco a la izquierda */
.quote-title-small,
.quote-mark,
.helvetica-statement {
  transform: translateX(-80px) !important;
}

/* Evitar que la frase inferior se parta en 3 líneas */
.helvetica-statement {
  max-width: 1500px !important;
  white-space: nowrap !important;
}

/* =========================
   01 / AJUSTE CABECERA COMO 00
========================= */

.cookie-story-number {
  font-size: clamp(90px, 10vw, 170px) !important;
  line-height: 0.78 !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

.cookie-story-copy h2 {
  font-size: clamp(46px, 5.4vw, 88px) !important;
  line-height: 0.86 !important;
  font-weight: 700 !important;
  letter-spacing: -0.055em !important;
}

/* Acercar 01/ al título */
.cookie-story-header {
  gap: clamp(18px, 3vw, 46px) !important;
}

/* =========================
   01 / DIAGRAMA COOKIE
   Recuperar estilo anterior
========================= */

.cookie-diagram-block {
  min-height: 100vh !important;
  padding: clamp(70px, 10vh, 130px) clamp(28px, 8vw, 150px) !important;
  background: #f4f3f1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cookie-diagram {
  position: relative !important;
  width: min(1080px, 88vw) !important;
  height: 720px !important;
  margin: 0 auto !important;
  color: #0d0d0d !important;
}

/* Bloques de texto */
.diagram-item {
  position: absolute !important;
  font-family: Helvetica, Arial, sans-serif !important;
  color: #0d0d0d !important;
}

.diagram-item h3 {
  margin: 0 0 26px !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(20px, 1.5vw, 27px) !important;
  font-weight: 800 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.045em !important;
  color: #0d0d0d !important;
}

.diagram-item p {
  margin: 0 0 22px !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(14px, 1vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: #0d0d0d !important;
}

/* Posiciones como en tu imagen */
.diagram-web {
  left: 0 !important;
  top: 0 !important;
  width: 360px !important;
}

.diagram-cookie-file {
  right: 40px !important;
  top: 150px !important;
  width: 300px !important;
}

.diagram-memory {
  left: 0 !important;
  bottom: 0 !important;
  width: 310px !important;
}

/* Flechas */
.diagram-arrow {
  position: absolute !important;
  width: 135px !important;
  height: 70px !important;
}

.diagram-arrow-right {
  left: 465px !important;
  top: 315px !important;
  border-top: 4px solid #0d0d0d !important;
}

.diagram-arrow-right::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -15px;
  width: 28px;
  height: 28px;
  border-top: 4px solid #0d0d0d;
  border-right: 4px solid #0d0d0d;
  transform: rotate(45deg);
}

.diagram-arrow-left {
  left: 430px !important;
  bottom: 150px !important;
  border-top: 4px solid #0d0d0d !important;
}

.diagram-arrow-left::after {
  content: "";
  position: absolute;
  left: -2px;
  top: -15px;
  width: 28px;
  height: 28px;
  border-left: 4px solid #0d0d0d;
  border-bottom: 4px solid #0d0d0d;
  transform: rotate(45deg);
}

/* Dibujo navegador */
.draw-browser {
  position: relative !important;
  width: 360px !important;
  height: 205px !important;
  border: 3px solid #0d0d0d !important;
  border-radius: 8px 8px 20px 20px !important;
  background: transparent !important;
}

.draw-browser::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  width: 100%;
  height: 3px;
  background: #0d0d0d;
}

.draw-browser::after {
  content: "×  ○  −";
  position: absolute;
  left: 10px;
  top: 5px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.browser-card {
  position: absolute;
  left: 42px;
  top: 72px;
  width: 70px;
  height: 94px;
  border: 3px solid #0d0d0d;
  border-radius: 8px;
}

.browser-line {
  position: absolute;
  left: 160px;
  height: 4px;
  background: #0d0d0d;
  border-radius: 20px;
}

.browser-line.line-a {
  top: 82px;
  width: 120px;
}

.browser-line.line-b {
  top: 112px;
  width: 108px;
}

.browser-line.line-c {
  top: 142px;
  width: 86px;
}

/* Dibujo archivo */
.draw-file {
  position: relative !important;
  width: 120px !important;
  height: 160px !important;
  margin-top: 26px !important;
}

.draw-file::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 112px;
  height: 150px;
  border: 3px solid #0d0d0d;
  border-radius: 6px;
}

.draw-file::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 0;
  width: 34px;
  height: 34px;
  background: #f4f3f1;
  border-left: 3px solid #0d0d0d;
  border-bottom: 3px solid #0d0d0d;
}

.draw-file span {
  position: absolute;
  left: 34px;
  height: 3px;
  background: #0d0d0d;
  border-radius: 20px;
}

.draw-file span:nth-child(1) {
  top: 78px;
  width: 20px;
}

.draw-file span:nth-child(2) {
  top: 104px;
  width: 66px;
}

.draw-file span:nth-child(3) {
  top: 128px;
  width: 54px;
}

/* Dibujo portátil */
.draw-laptop {
  position: relative !important;
  width: 270px !important;
  height: 170px !important;
  margin-top: 26px !important;
}

.laptop-screen {
  position: absolute;
  left: 28px;
  top: 0;
  width: 210px;
  height: 132px;
  border: 3px solid #0d0d0d;
  border-radius: 10px 10px 4px 4px;
}

.laptop-base {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 270px;
  height: 22px;
  border: 3px solid #0d0d0d;
  border-radius: 0 0 14px 14px;
}

.laptop-base::before {
  content: "";
  position: absolute;
  left: 110px;
  top: -3px;
  width: 52px;
  height: 8px;
  border: 3px solid #0d0d0d;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #f4f3f1;
}

/* =========================
   01 / BAJAR DIBUJOS
========================= */

.cookie-scroll-demo {
  transform: translateY(120px) !important;
}

/* =========================
   01 / MÁS AIRE DESDE EL NEGRO
========================= */

.cookie-story-sticky {
  padding-top: clamp(260px, 50vh, 280px) !important;
}

/* =========================
   01 / CABECERA MÁS PAUSADA
========================= */

/* Contenedor: título a la izquierda, número a la derecha */
.cookie-story-header {
  width: min(780px, 74vw) !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: 1fr 0.8fr !important;
  column-gap: clamp(60px, 8vw, 140px) !important;
  align-items: start !important;
}

/* Número más a la derecha */
.cookie-story-number {
  grid-column: 2 !important;
  grid-row: 1 !important;

  justify-self: end !important;
  margin: 0 !important;
}

/* Título y texto más a la izquierda */
.cookie-story-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;

  justify-self: start !important;
  margin-top: clamp(16px, 5vh, 10px) !important;
  max-width: 420px !important;
}

/* Título */
.cookie-story-copy h2 {
  margin: 0 !important;
  max-width: 420px !important;
}

/* Texto más pequeño y más compacto */
.cookie-story-copy p {
  max-width: 390px !important;
  margin-top: 18px !important;

  font-size: clamp(13px, 1vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.035em !important;
}

/* =========================
   01 / TÍTULO EN DOS LÍNEAS
========================= */

.cookie-story-copy {
  max-width: 520px !important;
}

.cookie-story-copy h2 {
  max-width: 520px !important;
  white-space: nowrap !important;
}

/* =========================
   01 / AJUSTES FINALES
========================= */

/* 1. Evitar que la barra del 01/ se corte */
.cookie-story-number {
  line-height: 0.92 !important;
  padding-right: 0.08em !important;
  overflow: visible !important;
}

.cookie-story-header {
  overflow: visible !important;
}

/* 2. Texto inferior del título: un poco más respirado */
.cookie-story-copy p {
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
}

/* 3. Bajar los dibujos para que no se vea "01/ WEB" todavía */
/* =========================
   01 / BAJAR DIBUJOS SIN COMER LO SIGUIENTE
========================= */

/* Bajamos los dibujos con espacio real */
.cookie-scroll-demo {
  transform: none !important;
  margin-top: clamp(130px, 18vh, 220px) !important;
}

/* Damos más fondo blanco al apartado para que no se pise con lo siguiente */
.cookie-story-section {
  padding-bottom: clamp(180px, 24vh, 320px) !important;
}

/* =========================
   01 / AJUSTE POSICIÓN FINAL
========================= */

/* Número un poco más arriba */
.cookie-story-number {
  transform: translateY(-50px) !important;
}

/* Título + texto un poco más abajo */
.cookie-story-copy {
  transform: translateY(50px) !important;
}

/* =========================
   02 / MISMA TIPOGRAFÍA QUE 01
   Sin cambiar posición
========================= */

/* Número 02/ como el 01/ */
#que-estamos-aceptando .cookie-accepting-number {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(90px, 10vw, 170px) !important;
  font-weight: 800 !important;
  line-height: 0.92 !important;
  letter-spacing: 0.01em !important;
  color: #e98732 !important;

  overflow: visible !important;
  padding-right: 0.08em !important;
}

/* Título 02 con el mismo tratamiento que el 01 */
#que-estamos-aceptando .cookie-accepting-copy h2 {
  font-family: var(--font-title) !important;
  font-size: clamp(46px, 5.4vw, 88px) !important;
  font-weight: 700 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.055em !important;
  color: #0d0d0d !important;

  max-width: 520px !important;
  white-space: nowrap !important;
}

/* Texto inferior como el del 01 */
#que-estamos-aceptando .cookie-accepting-copy p {
  max-width: 430px !important;
  margin-top: 18px !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(13px, 1vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  color: #0d0d0d !important;
}

/* =========================
   02 / BAJAR TÍTULO Y TEXTO
========================= */

#que-estamos-aceptando .cookie-accepting-copy {
  transform: translateY(82px) !important;
}

/* =========================
   02 / MÁS AIRE ANTES DE LA FACTURA
========================= */

#que-estamos-aceptando .cookie-accepting-header + * {
  margin-top: clamp(150px, 18vh, 260px) !important;
}

/* =========================
   03 / MISMO SISTEMA QUE 01
========================= */

#apartado-03.chapter-split {
  background: #0d0d0d !important;
  color: #f7f0df !important;

  min-height: 100vh !important;
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 1fr 0.8fr !important;
  column-gap: clamp(60px, 8vw, 140px) !important;
  align-items: start !important;

  max-width: 780px !important;
  margin: 0 auto !important;
  padding-top: clamp(190px, 22vh, 290px) !important;
}

/* Número 03/ como el 01/ */
#apartado-03 .chapter-number {
  grid-column: 2 !important;
  grid-row: 1 !important;

  justify-self: end !important;
  margin: 0 !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(90px, 10vw, 170px) !important;
  font-weight: 800 !important;
  line-height: 0.92 !important;
  letter-spacing: 0.01em !important;
  color: #e98732 !important;

  overflow: visible !important;
  padding-right: 0.08em !important;
  transform: translateY(-34px) !important;
}

/* Título + texto como el 01 */
#apartado-03 .chapter-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;

  justify-self: start !important;
  max-width: 420px !important;

  transform: translateY(34px) !important;
}

/* Título */
#apartado-03 .chapter-copy h2 {
  margin: 0 !important;
  max-width: 420px !important;

  font-family: var(--font-title) !important;
  font-size: clamp(46px, 5.4vw, 88px) !important;
  font-weight: 700 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.055em !important;
  color: #f7f0df !important;
}

/* Texto */
#apartado-03 .chapter-copy p {
  max-width: 390px !important;
  margin-top: 18px !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(13px, 1vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  color: rgba(247, 240, 223, 0.78) !important;
}

/* =========================
   03 / FONDO NEGRO A PANTALLA COMPLETA
========================= */

#apartado-03.chapter-split {
  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding-left: calc((100vw - min(780px, 74vw)) / 2) !important;
  padding-right: calc((100vw - min(780px, 74vw)) / 2) !important;

  box-sizing: border-box !important;
}

/* 03 / título en 2 líneas */
#apartado-03 .chapter-copy {
  max-width: 540px !important;
}

#apartado-03 .chapter-copy h2 {
  max-width: 540px !important;
  white-space: nowrap !important;
}

/* =========================
   04 / TÍTULO DEBAJO DEL NÚMERO
========================= */

.anatomy-screen-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Título 04 igual que los anteriores */
.anatomy-section-title {
  margin: clamp(14px, 2vh, 28px) 0 0 !important;

  font-family: var(--font-title) !important;
  font-size: clamp(34px, 4vw, 62px) !important;
  font-weight: 700 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.055em !important;
  color: #0d0d0d !important;
}

/* Por si el estilo antiguo sigue afectando */
.anatomy-section-kicker {
  display: none !important;
}

/* 04 / más tracking en el número */
.anatomy-screen-header .section-number-slash {
  letter-spacing: 0.035em !important;
}

/* =========================
   05 / TÍTULO Y TEXTO COMO LOS ANTERIORES
========================= */

#apartado-05 .chapter-copy {
  position: relative !important;
  left: clamp(180px, 25vw, 330px) !important;
  max-width: 540px !important;
}

/* Título igual que los anteriores */
#apartado-05 .chapter-copy h2 {
  margin: 0 !important;
  max-width: 540px !important;

  font-family: var(--font-title) !important;
  font-size: clamp(46px, 5.4vw, 88px) !important;
  font-weight: 700 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.055em !important;
  color: #f7f0df !important;
}

/* Texto igual que los anteriores */
#apartado-05 .chapter-copy p {
  max-width: 390px !important;
  margin-top: 18px !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(13px, 1vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  color: rgba(247, 240, 223, 0.78) !important;
}

/* 05 / más tracking en el número */
#apartado-05 .chapter-number {
  letter-spacing: 0.0001em !important;
}

/* =========================
   06 / CABECERA COMO REFERENCIA
========================= */

#apartado-06 .cookie-route-main-header {
  width: min(760px, 72vw) !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: 0.75fr 1fr !important;
  column-gap: clamp(60px, 7vw, 120px) !important;
  align-items: start !important;
}

/* Número 06/ */
#apartado-06 .cookie-route-main-number {
  grid-column: 1 !important;
  grid-row: 1 !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(90px, 10vw, 170px) !important;
  font-weight: 800 !important;
  line-height: 0.92 !important;
  letter-spacing: 0.035em !important;
  color: #e98732 !important;

  transform: translateY(-20px) !important;
}

/* Título + texto */
#apartado-06 .cookie-route-main-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;

  max-width: 520px !important;
  transform: translateY(46px) !important;
}

/* Título */
#apartado-06 .cookie-route-main-title {
  margin: 0 !important;
  max-width: 520px !important;

  font-family: var(--font-title) !important;
  font-size: clamp(42px, 4.8vw, 76px) !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.05em !important;
  color: #0d0d0d !important;
}

/* Para que cada span actúe como línea */
#apartado-06 .cookie-route-main-title span {
  display: block !important;
}

/* Texto */
#apartado-06 .cookie-route-main-copy p {
  max-width: 370px !important;
  margin-top: 18px !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(13px, 1vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  color: #0d0d0d !important;
}

/* =========================
   08 / MISMO SISTEMA QUE 06
========================= */

/* Número 08/ */
#apartado-08 .chapter-number,
#apartado-08 .section-number,
#apartado-08 [class*="number"] {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(90px, 10vw, 170px) !important;
  font-weight: 800 !important;
  line-height: 0.92 !important;
  letter-spacing: 0.035em !important;
  color: #e98732 !important;
}

/* Bloque título + texto */
#apartado-08 .chapter-copy,
#apartado-08 [class*="copy"] {
  max-width: 520px !important;
}

/* Título 08 */
#apartado-08 h2 {
  margin: 0 !important;
  max-width: 520px !important;

  font-family: var(--font-title) !important;
  font-size: clamp(42px, 4.8vw, 76px) !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.05em !important;
  color: #0d0d0d !important;
}

/* Texto */
#apartado-08 p {
  max-width: 370px !important;
  margin-top: 18px !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(13px, 1vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  color: #0d0d0d !important;
}

/* 08 / subir un poco el número */
#apartado-08 .chapter-number,
#apartado-08 .section-number,
#apartado-08 [class*="number"] {
  transform: translateY(-72px) !important;
}

/* =========================
   09 / CABECERA COMO LOS ANTERIORES
   sin romper los datos de abajo
========================= */

#apartado-09 .data-editorial-header {
  width: min(760px, 72vw) !important;
  margin: 0 auto clamp(90px, 12vh, 170px) !important;

  display: grid !important;
  grid-template-columns: 0.75fr 1fr !important;
  column-gap: clamp(60px, 7vw, 120px) !important;
  align-items: start !important;
}

/* Número 09/ */
#apartado-09 .data-editorial-number {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;

  margin: 0 !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(90px, 10vw, 170px) !important;
  font-weight: 800 !important;
  line-height: 0.92 !important;
  letter-spacing: 0.035em !important;
  color: #e98732 !important;

  transform: translateY(-20px) !important;
}

/* Título */
#apartado-09 .data-editorial-header h2 {
  grid-column: 2 !important;
  grid-row: 1 !important;

  margin: 0 !important;
  max-width: 520px !important;

  font-family: var(--font-title) !important;
  font-size: clamp(42px, 4.8vw, 76px) !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.05em !important;
  color: #0d0d0d !important;

  transform: translateY(46px) !important;
}

/* Texto */
#apartado-09 .data-editorial-intro {
  grid-column: 2 !important;
  grid-row: 2 !important;

  max-width: 370px !important;
  margin-top: 18px !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(13px, 1vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  color: #0d0d0d !important;

  transform: translateY(46px) !important;
}

/* =========================
   09 / MÁS AIRE ENTRE CABECERA Y DATOS
========================= */

#apartado-09 .data-editorial-header {
  margin-bottom: clamp(210px, 24vh, 340px) !important;
}

/* =========================
   09 / MÁS AIRE ARRIBA DEL APARTADO
========================= */

#apartado-09 {
  padding-top: clamp(260px, 28vh, 420px) !important;
}

/* =========================
   10 / ARREGLO TÍTULO EN 2 LÍNEAS
========================= */

#apartado-10 .chapter-copy,
#apartado-10 [class*="copy"] {
  max-width: 760px !important;
  width: 760px !important;
  transform: translateY(34px) !important;
}

/* Título en dos líneas, no palabra por palabra */
#apartado-10 h2 {
  max-width: 760px !important;
  width: 760px !important;

  font-family: var(--font-title) !important;
  font-size: clamp(42px, 5vw, 82px) !important;
  font-weight: 700 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.05em !important;
  color: #f7f0df !important;

  white-space: normal !important;
}

/* Por si antes había spans haciendo saltos raros */
#apartado-10 h2 span {
  display: inline !important;
}

/* Texto debajo */
#apartado-10 p {
  max-width: 430px !important;
  margin-top: 22px !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(13px, 1vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  color: rgba(247, 240, 223, 0.78) !important;
}
/* =========================
   10 / MOVER TÍTULO Y TEXTO A LA DERECHA
========================= */

#apartado-10 .chapter-copy,
#apartado-10 [class*="copy"] {
  transform: translate(210px, 34px) !important;
}

/* =========================
   10 / MÁS AIRE EN BOTONES
========================= */

/* Más aire entre el texto y los dos botones */
#apartado-10 .choice-buttons,
#apartado-10 .final-buttons,
#apartado-10 .chapter-buttons,
#apartado-10 .chapter-actions,
#apartado-10 [class*="buttons"],
#apartado-10 [class*="actions"] {
  margin-top: clamp(280px, 15vh, 190px) !important;
  margin-bottom: clamp(80px, 14vh, 220px) !important;
}

/* Más aire hasta el final del bloque negro */
#apartado-10 {
  padding-bottom: clamp(180px, 22vh, 320px) !important;
}

/* =========================
   09 / TÍTULOS DE DATOS EN HELVÉTICA
========================= */

#apartado-09 .data-section h3,
#apartado-09 .data-card h3,
#apartado-09 .data-stat h3,
#apartado-09 .data-block h3,
#apartado-09 [class*="stat"] h3,
#apartado-09 [class*="data"] h3 {
  font-family: Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(15px, 1.5vw, 28px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase !important;
  color: #0d0d0d !important;
}

/* =========================
   01 / MAPA RESPONSIVE ESTABLE
   Pasos + imágenes + flechas en el mismo sistema
========================= */

.cookie-scroll-demo {
  position: relative !important;

  width: min(1180px, 82vw) !important;
  max-width: none !important;

  /* El mapa mantiene siempre la misma proporción */
  height: auto !important;
  aspect-ratio: 1280 / 650;

  margin: clamp(90px, 12vh, 140px) auto 0 !important;
  overflow: visible !important;
}

/* Todos los elementos viven dentro del mismo mapa */
.cookie-demo-step,
.cookie-demo-arrow {
  position: absolute !important;
}

/* PASO 01 / WEB */
.cookie-demo-step-one {
  left: 2% !important;
  top: 3% !important;
  width: 31% !important;
}

/* PASO 02 / LA WEB GUARDA UNA COOKIE */
.cookie-demo-step-two {
  left: 70% !important;
  right: auto !important;
  top: 30% !important;
  width: 30% !important;
}

/* PASO 03 / PARA RECORDAR ALGO */
.cookie-demo-step-three {
  left: 5% !important;
  top: 68% !important;
  bottom: auto !important;
  width: 33% !important;
}

/* Imágenes: sin desplazamientos en píxeles */
.cookie-demo-img-web,
.cookie-demo-img-file,
.cookie-demo-img-laptop {
  max-width: none !important;
  transform: none !important;
}

/* Imagen 01 */
.cookie-demo-img-web {
  width: 100% !important;
  margin-top: -25% !important;
  margin-left: -7% !important;
}

/* Imagen 02 */
.cookie-demo-img-file {
  width: 100% !important;
  margin-top: -30% !important;
  margin-left: -35% !important;
  margin-right: auto !important;
}

/* Imagen 03 */
.cookie-demo-img-laptop {
  width: 78% !important;
  margin-top: -20% !important;
  margin-left: -10% !important;
  margin-right: auto !important;
}

/* Flechas dentro del mismo mapa */
.cookie-demo-arrow {
  width: 22% !important;
  height: auto !important;
  overflow: visible !important;
}

/* Flecha 01 → 02 */
.cookie-demo-arrow-one {
  left: 39% !important;
  top: 20% !important;
  right: auto !important;
  bottom: auto !important;
}

/* Flecha 02 → 03 */
.cookie-demo-arrow-two {
  left: 40% !important;
  top: 70% !important;
  right: auto !important;
  bottom: auto !important;
}

/* =========================
   04 / MAPA RESPONSIVE ESTABLE
   Imagen + marcas en el mismo sistema
========================= */

.anatomy-fullscreen-image-stage {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* Cada capa funciona como un mapa proporcional */
.anatomy-layer-map {
  position: absolute;
  left: 50%;
  top: 50%;

  width: min(100vw, calc(100vh * 1.58));
  aspect-ratio: 1.58 / 1;

  transform:
    translate(-50%, -50%)
    translate(var(--anatomy-x, 0%), var(--anatomy-y, 0%))
    scale(var(--anatomy-scale, 1));

  transform-origin: center center;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Orden de capas */
.anatomy-first-map {
  z-index: 1;
}

.anatomy-second-map {
  z-index: 2;
}

/* Las imágenes ya no se colocan según pantalla, sino según su mapa */
.anatomy-layer-map .anatomy-layer-image {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
  transform: none !important;
  max-width: none !important;

  opacity: 0;
  transition: opacity 0.35s ease;
}

.anatomy-layer-map .anatomy-layer-image.is-visible {
  opacity: 1;
}

/* Las marcas de la primera imagen también viven dentro del mapa */
.anatomy-layer-map .anatomy-annotation,
.anatomy-layer-map .anatomy-text-lines,
.anatomy-layer-map .anatomy-button-line {
  position: absolute !important;
  inset: 0 !important;

  left: 0 !important;
  top: 0 !important;

  width: 100% !important;
  height: 100% !important;

  transform: none !important;
  transform-origin: center center !important;
}

/* Las marcas de segunda capa ocupan exactamente el mapa de 2capa */
.anatomy-second-marks {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  transform: none !important;
  transform-origin: center center !important;

  pointer-events: none !important;
  z-index: 5;
}

/* =========================
   04 / RECOLOCAR MARCAS SOBRE MAPA ESTABLE
   Todo en % respecto a la imagen 2capa
========================= */

/* Base común de todas las marcas */
.anatomy-second-mark {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 8 !important;
}

/* =========================
   TEXTO 1 / INFORMACIÓN PREVIA
   Sombreado sobre el texto inicial
========================= */

.mark-info-highlight {
  left: 42% !important;
  top: 29.5% !important;
  width: 15% !important;
  height: 5% !important;

  background: rgba(232, 134, 54, 0.22) !important;
  border-radius: 10px !important;

  box-shadow: 0 0 26px rgba(232, 134, 54, 0.24) !important;

  opacity: 0;
  transform: scale(0.96) !important;
  transform-origin: center center;
  transition:
    opacity 0.3s ease,
    transform 0.35s ease;
}

.anatomy-fullscreen-section[data-anatomy-mark="info"] .mark-info-highlight {
  opacity: 1;
  transform: scale(1) !important;
}


/* =========================
   TEXTO 2 / CATEGORÍAS
   Llave vertical
========================= */

.mark-categories-brace {
  left: 40.5% !important;
  top: 34.5% !important;
  width: 2.5% !important;
  height: 28% !important;

  opacity: 0;
  transform: none !important;

  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 0.75s ease,
    opacity 0s linear 0.75s;
}

.mark-categories-brace svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  display: block !important;
}

.mark-categories-brace path {
  fill: none !important;
  stroke: #e88636 !important;
  stroke-width: 6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.anatomy-fullscreen-section[data-anatomy-mark="categories"] .mark-categories-brace {
  opacity: 1;
  clip-path: inset(0 0 0 0);

  transition:
    opacity 0.15s ease,
    clip-path 0.75s ease;
}


/* =========================
   TEXTO 3 / ACCIONES VISIBLES
   Marco ondulado uniforme
========================= */

.mark-actions-wave {
  position: absolute;
  left: 39.5%;
  top: 59%;
  width: 20%;
  height: 17%;
  z-index: 8;
  pointer-events: none;

  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.mark-actions-wave svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.mark-actions-wave path {
  fill: none;
  stroke: #e88636;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;

  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.anatomy-fullscreen-section[data-anatomy-mark="actions"] .mark-actions-wave {
  opacity: 1;
  transform: scale(1);
}

.anatomy-fullscreen-section[data-anatomy-mark="actions"] .mark-actions-wave path {
  animation:
    drawActionsWave 0.85s ease forwards,
    floatActionsWave 2.4s ease-in-out 0.85s infinite;
}

@keyframes drawActionsWave {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes floatActionsWave {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-1px) rotate(-0.25deg);
  }
  50% {
    transform: translateY(1px) rotate(0.25deg);
  }
  75% {
    transform: translateY(-1px) rotate(-0.15deg);
  }
}


/* =========================
   TEXTO 4 / INTERRUPTORES
   Halos sobre switches
========================= */

.mark-switch-halos {
  left: 53.7% !important;
  top: 35% !important;
  width: 18% !important;
  height: 25% !important;

  opacity: 0;
  transition: opacity 0.3s ease;
}

.mark-switch-halos span {
  position: absolute !important;
  width: 38px !important;
  height: 24px !important;

  border: 3px solid #e88636 !important;
  border-radius: 999px !important;

  transform: scale(0.85);
  opacity: 0;
  animation: none;
}

/* Ajustes individuales de los 6 interruptores */
.mark-switch-halos span:nth-child(1) {
  left: 4% !important;
  top: 4% !important;
}

.mark-switch-halos span:nth-child(2) {
  left: 4% !important;
  top: 22% !important;
}

.mark-switch-halos span:nth-child(3) {
  left: 4% !important;
  top: 40% !important;
}

.mark-switch-halos span:nth-child(4) {
  left: 4% !important;
  top: 58% !important;
}

.mark-switch-halos span:nth-child(5) {
  left: 4% !important;
  top: 76% !important;
}

.mark-switch-halos span:nth-child(6) {
  left: 4% !important;
  top: 94% !important;
}

.anatomy-fullscreen-section[data-anatomy-mark="switches"] .mark-switch-halos {
  opacity: 1;
}

.anatomy-fullscreen-section[data-anatomy-mark="switches"] .mark-switch-halos span {
  opacity: 1;
  transform: scale(1);
  animation: switchHaloPulse 1.8s ease-in-out infinite;
}


/* =========================
   TEXTO 5 / ESTADOS ON / OFF
========================= */

.mark-switch-states {
  left: 53.7% !important;
  top: 33.9% !important;
  width: 15% !important;
  height: 18% !important;

  opacity: 0;
  transition: opacity 0.3s ease;
}

.mark-switch-states span {
  position: absolute !important;
  width: 52px !important;
  height: 34px !important;

  border: 3px solid #e88636 !important;
  border-radius: 999px !important;
  transform: scale(0.80) !important;
  transform-origin: center center !important;
}

.mark-switch-states span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e88636;
  transform: translateY(-50%);
}

/* Estado activado */
.mark-switch-states .state-on {
  left: 2% !important;
  top: 10% !important;
}

.mark-switch-states .state-on::after {
  right: 6px;
}

/* Estado desactivado */
.mark-switch-states .state-off {
  left: 2% !important;
  top: 34% !important;
}

.mark-switch-states .state-off::after {
  left: 6px;
}

.anatomy-fullscreen-section[data-anatomy-mark="states"] .mark-switch-states {
  opacity: 1;
}


/* Animaciones */
@keyframes drawActionsWave {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes wobbleActionsWave {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateY(-1px) rotate(-0.25deg);
  }

  50% {
    transform: translateY(1px) rotate(0.25deg);
  }

  75% {
    transform: translateY(-1px) rotate(-0.2deg);
  }
}

@keyframes switchHaloPulse {
  0%, 100% {
    transform: scale(0.94);
  }

  50% {
    transform: scale(1.08);
  }
}

/* =========================
   04 / MARCAS PRIMERA CAPA
   Todo en % respecto a 1capa.png
========================= */

/* Base: las marcas de la primera capa viven dentro del mapa */
.anatomy-first-map .anatomy-annotation-first-banner,
.anatomy-first-map .anatomy-text-lines-first,
.anatomy-first-map .anatomy-button-line-first {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 8 !important;

  transform: none !important;
  transform-origin: center center !important;
}

/* =========================
   TEXTO 1 / CÍRCULO
   Círculo manual sobre la primera zona del banner
========================= */

.anatomy-first-map .anatomy-annotation-first-banner {
  inset: auto !important;

  left: 4.5% !important;
  top: 11% !important;
  width: 90% !important;
  height: 82% !important;

  overflow: visible !important;
}

/* El trazo del círculo */
.anatomy-first-map .anatomy-annotation-first-banner path {
  fill: none !important;
  stroke: #e88636 !important;
  stroke-width: 3.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


/* =========================
   TEXTO 2 / FRASE "USAMOS COOKIES..."
   Línea / subrayado sobre texto
========================= */

.anatomy-first-map .anatomy-text-lines-first {
  inset: auto !important;

  left: 38% !important;
  top: 53% !important;
  width: 14% !important;
  height: 6% !important;
}

.anatomy-first-map .anatomy-text-lines-first .text-line {
  position: absolute !important;

  left: 0 !important;
  top: 50% !important;
  width: 100% !important;
  height: 4px !important;

  background: #e88636 !important;
  border-radius: 999px !important;
}


/* =========================
   TEXTO 3 / OPCIONES VISIBLES
   Línea debajo de los botones
========================= */

.anatomy-first-map .anatomy-button-line-first {
  inset: auto !important;

  left: 37.7% !important;
  top: 59.5% !important;
  width: 25.1% !important;
  height: 5% !important;
}

.anatomy-first-map .anatomy-button-line-first .button-line {
  position: absolute !important;

  left: 0 !important;
  top: 50% !important;
  width: 100% !important;
  height: 4px !important;

  background: #e88636 !important;
  border-radius: 999px !important;
}

/* =========================
   03 / IMAGEN BANNER COOKIE
   Sin mover texto ni número
========================= */

#apartado-03 {
  position: relative !important;
  overflow: hidden !important;
}

/* Imagen colocada libremente dentro de la sección */
#apartado-03 .banner-cookie-visual {
  position: absolute !important;

  left: 38.8% !important;
  top: 72% !important;

  width: min(840px, 58vw) !important;
  max-width: none !important;

  transform: translateY(-50%) !important;

  z-index: 1 !important;
  pointer-events: none !important;
}

#apartado-03 .banner-cookie-visual img {
  display: block !important;
  width: 100% !important;
  height: auto !important;

  object-fit: contain !important;
  user-select: none !important;
}

/* Aseguramos que texto y número sigan por encima si se cruzan */
#apartado-03 .chapter-number,
#apartado-03 .chapter-copy {
  position: relative !important;
  z-index: 2 !important;
}

/* =========================
   06 / FIX SINCRONÍA SCROLL
   Recorrido estable y sin mezclarse con 08
========================= */

#apartado-06.cookie-route-section {
  position: relative !important;
  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: #ffffff !important;
  color: #111111 !important;

  overflow: visible !important;
  z-index: 5 !important;
}

/* Cabecera 06: pasa primero, sin mezclarse con la animación */
#apartado-06 .cookie-route-main-header {
  position: relative !important;
  z-index: 2 !important;

  width: min(1180px, calc(100vw - 96px)) !important;
  margin: 0 auto !important;

  padding:
    clamp(90px, 8vw, 140px)
    0
    clamp(100px, 10vw, 150px) !important;

  box-sizing: border-box !important;
}

/* La zona animada tiene su propio recorrido vertical */
#apartado-06 .cookie-route-stage {
  position: relative !important;

  min-height: 460vh !important;

  background: #ffffff !important;
  color: #111111 !important;

  z-index: 6 !important;
  overflow: visible !important;
}

/* Sticky solo para los recorridos */
#apartado-06 .cookie-route-sticky {
  position: sticky !important;
  top: 0 !important;

  height: 100vh !important;
  min-height: 100vh !important;

  display: flex !important;
  align-items: center !important;

  overflow: hidden !important;
  background: #ffffff !important;

  padding:
    clamp(40px, 5vw, 70px)
    max(6vw, calc((100vw - 1180px) / 2)) !important;

  box-sizing: border-box !important;
  z-index: 7 !important;
}

/* El contenido aparece cuando el JS lo active */
#apartado-06 .cookie-route-content {
  width: min(1180px, calc(100vw - 96px)) !important;
  margin: 0 auto !important;

  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(28px) !important;

  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    visibility 0.45s ease !important;
}

#apartado-06 .cookie-route-content.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Ocultar todo por defecto */
#apartado-06 .cookie-route-heading,
#apartado-06 .route-step,
#apartado-06 .route-arrow,
#apartado-06 .cookie-route-caption-long {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(24px) !important;

  transition:
    opacity 0.42s ease,
    transform 0.42s ease,
    visibility 0.42s ease !important;
}

/* Visible solo cuando el JS añade .is-visible */
#apartado-06 .cookie-route-heading.is-visible,
#apartado-06 .route-step.is-visible,
#apartado-06 .route-arrow.is-visible,
#apartado-06 .cookie-route-caption-long.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Recorrido largo oculto hasta su momento */
#apartado-06 .cookie-route-long {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(34px) !important;

  margin-top: clamp(90px, 10vw, 140px) !important;

  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    visibility 0.45s ease !important;
}

#apartado-06 .cookie-route-long.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Que la sección 08 no se cuele visualmente por debajo */
#recorridos {
  position: relative !important;
  background: #ffffff !important;
}

/* =========================
   06 / FIX TÍTULO RECORRIDO CORTO CORTADO
========================= */

/* Mientras el recorrido largo no toca, no ocupa espacio */
#apartado-06 .cookie-route-long:not(.is-visible) {
  display: none !important;
}

/* Cuando toca, vuelve a aparecer */
#apartado-06 .cookie-route-long.is-visible {
  display: block !important;
}

/* Bajamos un poco el bloque corto para que el título respire */
#apartado-06 .cookie-route-short {
  padding-top: clamp(40px, 5vh, 70px) !important;
}

/* =========================
   06 / FIX SALTO ENTRE RECORRIDO CORTO Y LARGO
   Sin display none, transición suave
========================= */

/* Creamos un tablero fijo dentro del sticky */
#apartado-06 .cookie-route-content {
  position: relative !important;
  min-height: min(760px, 82vh) !important;
}

/* Los dos recorridos viven en el mismo tablero */
#apartado-06 .cookie-route-short,
#apartado-06 .cookie-route-long {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;

  display: block !important;

  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    visibility 0.55s ease !important;
}

/* Recorrido corto: un poco más abajo para que no se corte */
#apartado-06 .cookie-route-short {
  top: clamp(34px, 5vh, 70px) !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Recorrido largo: preparado, pero invisible */
#apartado-06 .cookie-route-long,
#apartado-06 .cookie-route-long:not(.is-visible) {
  top: clamp(34px, 5vh, 70px) !important;

  display: block !important;

  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(70px) !important;

  margin-top: 0 !important;
}

/* Cuando toca el recorrido largo, entra como scroll suave */
#apartado-06 .cookie-route-long.is-visible {
  display: block !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Cuando entra el recorrido largo, el corto sale suavemente */
#apartado-06 .cookie-route-content:has(.cookie-route-long.is-visible) .cookie-route-short {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-55px) !important;
}

/* =========================
   06 / REDUCIR ESPACIO ANTES DE LA SIGUIENTE SECCIÓN
========================= */

/* Quitamos alturas antiguas demasiado largas */
#apartado-06.cookie-route-section {
  min-height: auto !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Esta es la duración real de la animación */
#apartado-06 .cookie-route-stage {
  min-height: 360vh !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* El sticky no deja aire extra al final */
#apartado-06 .cookie-route-sticky {
  margin-bottom: 0 !important;
  padding-bottom: clamp(30px, 4vw, 60px) !important;
}

/* El contenido interno tampoco añade espacio final */
#apartado-06 .cookie-route-content {
  margin-bottom: 0 !important;
}

/* =========================
   10 / FIX SECCIÓN FAKE WEB FINAL
   Recuperar fondo negro y ancho completo
========================= */

#apartado-10,
.synthesis-section {
  position: relative !important;

  width: 100vw !important;
  max-width: none !important;
  min-height: 100vh !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: #0f0e0b !important;
  color: #f7f0df !important;

  overflow: hidden !important;
  box-sizing: border-box !important;

  padding:
    clamp(120px, 14vh, 190px)
    max(7vw, calc((100vw - 1180px) / 2))
    clamp(120px, 14vh, 190px) !important;
}

/* Recuperar color del título y texto */
#apartado-10 h2,
.synthesis-section h2 {
  color: #f7f0df !important;
}

#apartado-10 p,
.synthesis-section p {
  color: rgba(247, 240, 223, 0.78) !important;
}

/* Mantener los botones por encima del fondo */
#apartado-10 .synthesis-buttons,
.synthesis-section .synthesis-buttons {
  position: relative !important;
  z-index: 3 !important;
}

/* Mantener el popup por encima cuando se abre */
#apartado-10 .fake-popup-window,
.synthesis-section .fake-popup-window {
  z-index: 30 !important;
}

#apartado-10::after,
.synthesis-section::after {
  z-index: 20 !important;
}

/* =========================
   10 / FAKE POPUP EMPUJAR - FIX ESTILO
   No toca la lógica, solo composición
========================= */

/* La ventana baja un poco para que no se corte la barra superior */
#apartado-10 .fake-popup-window,
.synthesis-section .fake-popup-window {
  top: clamp(38px, 5vh, 64px) !important;
  bottom: clamp(28px, 4vh, 46px) !important;
  left: clamp(22px, 3vw, 42px) !important;
  right: clamp(22px, 3vw, 42px) !important;

  height: auto !important;
  max-height: none !important;

  overflow: hidden !important;
}

/* El contenido interior ocupa bien el alto disponible */
#apartado-10 .fake-popup-content,
.synthesis-section .fake-popup-content {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Página empujar */
#apartado-10 .fake-webpage-empujar,
.synthesis-section .fake-webpage-empujar {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;

  overflow: hidden !important;
  background: #f4efe4 !important;
}

/* Fondo de la fake web, detrás del banner */
#apartado-10 .push-fake-site,
.synthesis-section .push-fake-site {
  position: relative !important;
  z-index: 1 !important;

  padding: clamp(70px, 8vw, 120px) clamp(54px, 8vw, 120px) !important;
}

/* El overlay de cookie ocupa toda la fake web */
#apartado-10 .push-cookie-screen,
.synthesis-section .push-cookie-screen {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  align-items: center !important;
  justify-items: center !important;

  padding: clamp(42px, 5vw, 76px) !important;

  z-index: 10 !important;
  pointer-events: none !important;
}

/* Cuando está activa, se comporta como pantalla central */
#apartado-10 .push-cookie-screen.is-active,
.synthesis-section .push-cookie-screen.is-active {
  display: grid !important;
  pointer-events: auto !important;
}

/* Banner empujar: recuperamos composición limpia */
#apartado-10 .push-cookie-banner,
.synthesis-section .push-cookie-banner {
  position: relative !important;
  z-index: 12 !important;

  width: min(860px, 72vw) !important;
  min-height: clamp(430px, 54vh, 620px) !important;

  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  align-content: center !important;

  padding:
    clamp(48px, 5vw, 76px)
    clamp(54px, 6vw, 92px) !important;

  border: 2.5px solid #11100d !important;
  border-radius: clamp(36px, 5vw, 58px) !important;

  background: #f4efe4 !important;
  color: #11100d !important;

  overflow: visible !important;
  box-shadow: none !important;
}

/* Kicker visible */
#apartado-10 .push-cookie-kicker,
.synthesis-section .push-cookie-kicker {
  display: block !important;

  margin: 0 0 clamp(20px, 2vw, 30px) 0 !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(17px, 1.3vw, 23px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;

  color: #11100d !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Texto: que deje de quedar escondido/cortado */
#apartado-10 .push-cookie-text,
.synthesis-section .push-cookie-text {
  display: block !important;

  max-width: 680px !important;
  margin: 0 auto !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(20px, 1.7vw, 27px) !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  text-align: center !important;

  color: #11100d !important;
  background: transparent !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Enlace configurar dentro del texto */
#apartado-10 .push-config-link,
.synthesis-section .push-config-link {
  color: #11100d !important;
  font: inherit !important;
  font-weight: 900 !important;
  text-decoration: underline !important;
  background: transparent !important;
}

/* Botón aceptar centrado y dominante */
#apartado-10 .push-cookie-actions,
.synthesis-section .push-cookie-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: end !important;

  margin-top: clamp(70px, 8vh, 120px) !important;
}

#apartado-10 .push-accept-button,
.synthesis-section .push-accept-button {
  width: min(420px, 82%) !important;

  padding: clamp(18px, 2vw, 26px) 34px !important;

  border: 2.5px solid #11100d !important;
  border-radius: 24px !important;

  background: #e88636 !important;
  color: #11100d !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  box-shadow: inset 0 0 0 5px #f4efe4 !important;
}

/* =========================
   10 / EMPUJAR - BANNER INFERIOR + POPUP SIN CORTAR
========================= */

/* La fake popup se coloca respecto a la pantalla, no a la sección */
#apartado-10 .fake-popup-window,
.synthesis-section .fake-popup-window {
  position: fixed !important;

  top: clamp(24px, 4vh, 46px) !important;
  bottom: clamp(24px, 4vh, 46px) !important;
  left: clamp(24px, 3vw, 44px) !important;
  right: clamp(24px, 3vw, 44px) !important;

  height: auto !important;
  max-height: none !important;

  overflow: hidden !important;
}

/* La pantalla de la cookie EMPUJAR vuelve abajo */
#apartado-10 .push-cookie-screen,
.synthesis-section .push-cookie-screen {
  position: absolute !important;
  inset: 0 !important;

  display: none !important;
  align-items: end !important;
  justify-items: center !important;

  padding:
    clamp(24px, 3vw, 42px)
    clamp(34px, 5vw, 72px)
    clamp(34px, 5vh, 64px) !important;

  pointer-events: none !important;
  z-index: 10 !important;
}

#apartado-10 .push-cookie-screen.is-active,
.synthesis-section .push-cookie-screen.is-active {
  display: grid !important;
  pointer-events: auto !important;
}

/* Banner inferior: ancho, rectangular, con esquinas suaves */
#apartado-10 .push-cookie-banner,
.synthesis-section .push-cookie-banner {
  width: min(1040px, 92%) !important;
  min-height: auto !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  column-gap: clamp(34px, 5vw, 70px) !important;
  row-gap: 14px !important;
  align-items: center !important;

  padding:
    clamp(30px, 3vw, 46px)
    clamp(38px, 5vw, 70px) !important;

  border: 2.5px solid #11100d !important;
  border-radius: clamp(32px, 3.8vw, 54px) !important;

  background: #f4efe4 !important;
  color: #11100d !important;

  box-shadow: none !important;
  overflow: visible !important;
}

/* Título pequeño */
#apartado-10 .push-cookie-kicker,
.synthesis-section .push-cookie-kicker {
  grid-column: 1 / 2 !important;
  grid-row: 1 !important;

  margin: 0 !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(17px, 1.4vw, 24px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;

  color: #11100d !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Texto visible y alineado a la izquierda */
#apartado-10 .push-cookie-text,
.synthesis-section .push-cookie-text {
  grid-column: 1 / 2 !important;
  grid-row: 2 !important;

  max-width: 720px !important;
  margin: 0 !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(18px, 1.65vw, 26px) !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  text-align: left !important;

  color: #11100d !important;
  background: transparent !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Botón a la derecha */
#apartado-10 .push-cookie-actions,
.synthesis-section .push-cookie-actions {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 3 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
}

#apartado-10 .push-accept-button,
.synthesis-section .push-accept-button {
  width: min(360px, 28vw) !important;

  padding:
    clamp(16px, 1.8vw, 24px)
    clamp(28px, 3vw, 44px) !important;

  border: 2.5px solid #11100d !important;
  border-radius: 24px !important;

  background: #e88636 !important;
  color: #11100d !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(31px, 3.4vw, 50px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  box-shadow: inset 0 0 0 5px #f4efe4 !important;
}

/* =========================
   10 / EMPUJAR - BANNER MÁS ALTO
   Texto arriba + botón abajo
========================= */

#apartado-10 .fake-webpage-empujar .push-cookie-banner,
.synthesis-section .fake-webpage-empujar .push-cookie-banner {
  width: min(1120px, 86%) !important;
  min-height: clamp(250px, 28vh, 340px) !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto 1fr auto !important;

  align-items: start !important;
  justify-items: center !important;

  padding:
    clamp(34px, 4vh, 52px)
    clamp(56px, 6vw, 92px)
    clamp(30px, 4vh, 48px) !important;

  border-radius: clamp(34px, 4vw, 54px) !important;
}

/* Kicker arriba */
#apartado-10 .fake-webpage-empujar .push-cookie-kicker,
.synthesis-section .fake-webpage-empujar .push-cookie-kicker {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 100% !important;
  margin: 0 0 clamp(18px, 2vh, 28px) 0 !important;

  text-align: left !important;
}

/* Texto debajo del kicker */
#apartado-10 .fake-webpage-empujar .push-cookie-text,
.synthesis-section .fake-webpage-empujar .push-cookie-text {
  grid-column: 1 !important;
  grid-row: 2 !important;

  width: 100% !important;
  max-width: 720px !important;

  margin: 0 !important;
  text-align: left !important;
}

/* Botón abajo dentro del banner */
#apartado-10 .fake-webpage-empujar .push-cookie-actions,
.synthesis-section .fake-webpage-empujar .push-cookie-actions {
  grid-column: 1 !important;
  grid-row: 4 !important;

  width: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: end !important;

  margin: clamp(42px, 7vh, 86px) 0 0 !important;
}

/* =========================
   10 / EMPUJAR - MÁS ANCHO Y MENOS ALTO
========================= */

#apartado-10 .fake-webpage-empujar .push-cookie-banner,
.synthesis-section .fake-webpage-empujar .push-cookie-banner {
  width: min(1180px, 88%) !important;
  min-height: clamp(210px, 23vh, 285px) !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto 1fr auto !important;

  align-items: start !important;
  justify-items: center !important;

  padding:
    clamp(26px, 3vh, 38px)
    clamp(66px, 7vw, 110px)
    clamp(24px, 3vh, 36px) !important;

  border-radius: clamp(30px, 3.4vw, 48px) !important;
}

/* Reducimos la distancia texto → botón para que no se haga tan alto */
#apartado-10 .fake-webpage-empujar .push-cookie-actions,
.synthesis-section .fake-webpage-empujar .push-cookie-actions {
  margin: clamp(20px, 3vh, 34px) 0 0 !important;
}

/* =========================
   10 / EMPUJAR - CONFIGURACIÓN SIN CORTARSE
========================= */

/* Pantalla de configuración empujar: centrada y con aire */
#apartado-10 .fake-webpage-empujar .push-cookie-config.is-active,
.synthesis-section .fake-webpage-empujar .push-cookie-config.is-active {
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;

  padding:
    clamp(34px, 5vh, 62px)
    clamp(34px, 5vw, 72px) !important;

  overflow: hidden !important;
}

/* Panel más bajo y contenido más compacto */
#apartado-10 .fake-webpage-empujar .push-config-panel,
.synthesis-section .fake-webpage-empujar .push-config-panel {
  width: min(560px, 46vw) !important;

  max-height: calc(100vh - 190px) !important;
  min-height: auto !important;

  display: grid !important;
  grid-template-rows: auto auto 1fr auto !important;

  padding:
    clamp(24px, 3vh, 36px)
    clamp(28px, 3.6vw, 44px) !important;

  border: 2.5px solid #11100d !important;
  border-radius: 32px !important;

  background: #f4efe4 !important;
  color: #11100d !important;

  overflow: hidden !important;
  box-shadow: none !important;
}

/* Título */
#apartado-10 .fake-webpage-empujar .push-config-kicker,
.synthesis-section .fake-webpage-empujar .push-config-kicker {
  margin: 0 0 clamp(14px, 2vh, 22px) 0 !important;

  font-size: clamp(20px, 2vw, 30px) !important;
  line-height: 1 !important;
}

/* Texto introductorio */
#apartado-10 .fake-webpage-empujar .push-config-text,
.synthesis-section .fake-webpage-empujar .push-config-text {
  margin: 0 0 clamp(18px, 2.4vh, 28px) 0 !important;

  font-size: clamp(15px, 1.25vw, 18px) !important;
  line-height: 1.32 !important;
}

/* Filas de cookies más compactas */
#apartado-10 .fake-webpage-empujar .push-config-options,
.synthesis-section .fake-webpage-empujar .push-config-options {
  gap: 10px !important;
}

#apartado-10 .fake-webpage-empujar .push-config-row,
.synthesis-section .fake-webpage-empujar .push-config-row {
  min-height: 48px !important;

  padding: 9px 14px !important;

  font-size: clamp(14px, 1.15vw, 17px) !important;
  line-height: 1.1 !important;
}

/* Interruptores un poco más pequeños */
#apartado-10 .fake-webpage-empujar .push-toggle,
.synthesis-section .fake-webpage-empujar .push-toggle {
  width: 54px !important;
  height: 30px !important;
}

#apartado-10 .fake-webpage-empujar .push-toggle::before,
.synthesis-section .fake-webpage-empujar .push-toggle::before {
  width: 18px !important;
  height: 18px !important;
  top: 4px !important;
  left: 4px !important;
}

#apartado-10 .fake-webpage-empujar .push-toggle.is-on::before,
.synthesis-section .fake-webpage-empujar .push-toggle.is-on::before {
  transform: translateX(25px) !important;
}

/* Botones inferiores: visibles y menos altos */
#apartado-10 .fake-webpage-empujar .push-config-actions,
.synthesis-section .fake-webpage-empujar .push-config-actions {
  margin-top: clamp(16px, 2.4vh, 24px) !important;
  gap: 9px !important;
}

#apartado-10 .fake-webpage-empujar .push-config-button,
.synthesis-section .fake-webpage-empujar .push-config-button {
  padding: 9px 18px !important;

  font-size: clamp(18px, 1.8vw, 27px) !important;
  line-height: 1 !important;

  border-radius: 999px !important;
}

#apartado-10 .fake-webpage-empujar .push-config-secondary,
.synthesis-section .fake-webpage-empujar .push-config-secondary {
  margin-top: 2px !important;
  font-size: 0.82rem !important;
}

/* =========================
   10 / EMPUJAR - CONFIG PANEL CON BOTONERA ABAJO
========================= */

/* Panel de configurar: alto controlado y estructura vertical */
#apartado-10 .fake-webpage-empujar .push-config-panel,
.synthesis-section .fake-webpage-empujar .push-config-panel {
  width: min(560px, 44vw) !important;
  height: min(760px, calc(100vh - 150px)) !important;

  display: grid !important;
  grid-template-rows: auto auto auto 1fr auto !important;

  padding:
    clamp(26px, 3vh, 38px)
    clamp(28px, 3.5vw, 44px) !important;

  overflow: hidden !important;
}

/* Título y texto arriba */
#apartado-10 .fake-webpage-empujar .push-config-kicker,
.synthesis-section .fake-webpage-empujar .push-config-kicker {
  margin: 0 0 16px 0 !important;
  color: #11100d !important;
  background: transparent !important;
}

#apartado-10 .fake-webpage-empujar .push-config-text,
.synthesis-section .fake-webpage-empujar .push-config-text {
  margin: 0 0 22px 0 !important;
  color: #11100d !important;
  background: transparent !important;
}

/* Opciones arriba, compactas */
#apartado-10 .fake-webpage-empujar .push-config-options,
.synthesis-section .fake-webpage-empujar .push-config-options {
  display: grid !important;
  gap: 10px !important;
  align-self: start !important;
}

/* La botonera se va abajo del panel */
#apartado-10 .fake-webpage-empujar .push-config-actions,
.synthesis-section .fake-webpage-empujar .push-config-actions {
  grid-row: 5 !important;
  align-self: end !important;

  display: grid !important;
  gap: 10px !important;

  width: 100% !important;
  margin-top: 0 !important;
}

/* Botones: texto visible, centrado y sin cortarse */
#apartado-10 .fake-webpage-empujar .push-config-button,
.synthesis-section .fake-webpage-empujar .push-config-button {
  min-height: 58px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 20px !important;

  color: #11100d !important;
  background: transparent !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(20px, 2vw, 30px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  text-align: center !important;

  white-space: normal !important;
  overflow: visible !important;
}

/* Botón principal naranja */
#apartado-10 .fake-webpage-empujar .push-config-primary,
.synthesis-section .fake-webpage-empujar .push-config-primary {
  background: #e88636 !important;
  color: #11100d !important;
}

/* Enlace rechazar: que se vea bien */
#apartado-10 .fake-webpage-empujar .push-config-secondary,
.synthesis-section .fake-webpage-empujar .push-config-secondary {
  display: block !important;

  margin-top: 4px !important;

  color: #11100d !important;
  background: transparent !important;

  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  text-align: center !important;
  text-decoration: underline !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* =========================
   10 / EMPUJAR - BOTONERA CONFIG ABAJO DEL PANEL
========================= */

#apartado-10 .fake-webpage-empujar .push-config-panel,
.synthesis-section .fake-webpage-empujar .push-config-panel {
  position: relative !important;

  /* dejamos espacio real para la botonera inferior */
  padding-bottom: clamp(190px, 24vh, 230px) !important;
}

/* Opciones: se quedan arriba */
#apartado-10 .fake-webpage-empujar .push-config-options,
.synthesis-section .fake-webpage-empujar .push-config-options {
  margin-bottom: 0 !important;
}

/* Botonera fija abajo dentro del panel */
#apartado-10 .fake-webpage-empujar .push-config-actions,
.synthesis-section .fake-webpage-empujar .push-config-actions {
  position: absolute !important;

  left: clamp(28px, 3.5vw, 44px) !important;
  right: clamp(28px, 3.5vw, 44px) !important;
  bottom: clamp(34px, 5vh, 54px) !important;

  display: grid !important;
  gap: 10px !important;

  width: auto !important;
  margin: 0 !important;
}

/* =========================
   10 / CUIDAR - BANNER MISMA MEDIDA QUE EMPUJAR
   Texto visible + botonera abajo
========================= */

/* Pantalla de cookie CUIDAR dentro de la fake web */
#apartado-10 .fake-webpage-cuidar .care-cookie-screen,
.synthesis-section .fake-webpage-cuidar .care-cookie-screen {
  position: absolute !important;
  inset: 0 !important;

  display: none !important;
  align-items: end !important;
  justify-items: center !important;

  padding:
    clamp(24px, 3vw, 42px)
    clamp(34px, 5vw, 72px)
    clamp(34px, 5vh, 64px) !important;

  background: transparent !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

#apartado-10 .fake-webpage-cuidar .care-cookie-screen.is-active,
.synthesis-section .fake-webpage-cuidar .care-cookie-screen.is-active {
  display: grid !important;
  pointer-events: auto !important;
}

/* Banner CUIDAR: misma proporción que EMPUJAR */
#apartado-10 .fake-webpage-cuidar .care-cookie-banner,
.synthesis-section .fake-webpage-cuidar .care-cookie-banner {
  position: relative !important;

  width: min(1180px, 88%) !important;
  min-height: clamp(210px, 23vh, 285px) !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto 1fr auto !important;

  align-items: start !important;
  justify-items: center !important;

  padding:
    clamp(26px, 3vh, 38px)
    clamp(66px, 7vw, 110px)
    clamp(24px, 3vh, 36px) !important;

  border: 2.5px solid #11100d !important;
  border-radius: clamp(30px, 3.4vw, 48px) !important;

  background: #f4efe4 !important;
  color: #11100d !important;

  overflow: visible !important;
  box-shadow: none !important;
}

/* Título pequeño visible */
#apartado-10 .fake-webpage-cuidar .care-cookie-kicker,
.synthesis-section .fake-webpage-cuidar .care-cookie-kicker {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 100% !important;
  margin: 0 0 clamp(16px, 2vh, 24px) 0 !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(17px, 1.4vw, 24px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  text-align: left !important;

  color: #11100d !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Texto visible */
#apartado-10 .fake-webpage-cuidar .care-cookie-text,
.synthesis-section .fake-webpage-cuidar .care-cookie-text {
  grid-column: 1 !important;
  grid-row: 2 !important;

  width: 100% !important;
  max-width: 760px !important;
  margin: 0 !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(18px, 1.65vw, 26px) !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  text-align: left !important;

  color: #11100d !important;
  background: transparent !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Botonera abajo del banner */
#apartado-10 .fake-webpage-cuidar .care-cookie-actions,
.synthesis-section .fake-webpage-cuidar .care-cookie-actions {
  grid-column: 1 !important;
  grid-row: 4 !important;

  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2.2vw, 34px) !important;

  align-self: end !important;
  margin: clamp(22px, 3vh, 38px) 0 0 !important;
}

/* Botones CUIDAR */
#apartado-10 .fake-webpage-cuidar .care-cookie-button,
.synthesis-section .fake-webpage-cuidar .care-cookie-button {
  width: 100% !important;
  min-height: 58px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px 22px !important;

  border: 2.5px solid #11100d !important;
  border-radius: 999px !important;

  background: transparent !important;
  color: #11100d !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(22px, 2.1vw, 34px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: center !important;

  white-space: nowrap !important;
  overflow: visible !important;
}

/* Hover igual que antes, pero sin romper el estilo */
#apartado-10 .fake-webpage-cuidar .care-cookie-button:hover,
.synthesis-section .fake-webpage-cuidar .care-cookie-button:hover {
  background: #e88636 !important;
  border-color: #e88636 !important;
  color: #11100d !important;
}

/* =========================
   10 / CUIDAR - CONFIGURACIÓN REAL
   Segunda capa con nombres correctos
========================= */

/* Pantalla configuración cuidar */
#apartado-10 .fake-webpage-cuidar .care-cookie-config.is-active,
.synthesis-section .fake-webpage-cuidar .care-cookie-config.is-active {
  position: absolute !important;
  inset: 0 !important;

  display: grid !important;
  place-items: center !important;

  padding:
    clamp(28px, 4vh, 52px)
    clamp(34px, 5vw, 72px) !important;

  background: transparent !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

/* Panel: misma lógica que EMPUJAR */
#apartado-10 .fake-webpage-cuidar .care-config-panel,
.synthesis-section .fake-webpage-cuidar .care-config-panel {
  position: relative !important;

  width: min(560px, 44vw) !important;
  height: min(760px, calc(100vh - 150px)) !important;

  display: grid !important;
  grid-template-rows: auto auto auto 1fr auto !important;

  padding:
    clamp(26px, 3vh, 38px)
    clamp(28px, 3.5vw, 44px)
    clamp(190px, 24vh, 230px) !important;

  border: 2.5px solid #11100d !important;
  border-radius: 32px !important;

  background: #f4efe4 !important;
  color: #11100d !important;

  overflow: hidden !important;
  box-shadow: none !important;
  transform: none !important;
  margin: 0 !important;
}

/* Título visible */
#apartado-10 .fake-webpage-cuidar .care-config-kicker,
.synthesis-section .fake-webpage-cuidar .care-config-kicker {
  display: block !important;

  margin: 0 0 14px 0 !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(22px, 2vw, 32px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;

  color: #11100d !important;
  background: transparent !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Texto visible */
#apartado-10 .fake-webpage-cuidar .care-config-text,
.synthesis-section .fake-webpage-cuidar .care-config-text {
  display: block !important;

  margin: 0 0 22px 0 !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1.32 !important;
  font-weight: 700 !important;

  color: #11100d !important;
  background: transparent !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Lista de opciones arriba */
#apartado-10 .fake-webpage-cuidar .care-config-options,
.synthesis-section .fake-webpage-cuidar .care-config-options {
  display: grid !important;
  gap: 10px !important;

  align-self: start !important;
  margin: 0 !important;
}

/* Filas compactas */
#apartado-10 .fake-webpage-cuidar .care-config-row,
.synthesis-section .fake-webpage-cuidar .care-config-row {
  min-height: 48px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding: 9px 14px !important;

  border: 1.5px solid #11100d !important;
  background: transparent !important;
  color: #11100d !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(14px, 1.1vw, 17px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* Interruptores */
#apartado-10 .fake-webpage-cuidar .care-toggle,
.synthesis-section .fake-webpage-cuidar .care-toggle {
  width: 54px !important;
  height: 30px !important;

  border: 2px solid #11100d !important;
  border-radius: 999px !important;
  background: #f4efe4 !important;
}

#apartado-10 .fake-webpage-cuidar .care-toggle::before,
.synthesis-section .fake-webpage-cuidar .care-toggle::before {
  width: 18px !important;
  height: 18px !important;
  top: 4px !important;
  left: 4px !important;
}

#apartado-10 .fake-webpage-cuidar .care-toggle.is-on::before,
.synthesis-section .fake-webpage-cuidar .care-toggle.is-on::before {
  transform: translateX(25px) !important;
  background: #e88636 !important;
}

/* Botonera fija abajo dentro del panel */
#apartado-10 .fake-webpage-cuidar .care-config-actions,
.synthesis-section .fake-webpage-cuidar .care-config-actions {
  position: absolute !important;

  left: clamp(28px, 3.5vw, 44px) !important;
  right: clamp(28px, 3.5vw, 44px) !important;
  bottom: clamp(34px, 5vh, 54px) !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;

  width: auto !important;
  margin: 0 !important;
}

/* Botones inferiores */
#apartado-10 .fake-webpage-cuidar .care-config-actions .care-cookie-button,
.synthesis-section .fake-webpage-cuidar .care-config-actions .care-cookie-button {
  width: 100% !important;
  min-height: 58px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 20px !important;

  border: 2.5px solid #11100d !important;
  border-radius: 999px !important;

  background: transparent !important;
  color: #11100d !important;

  font-family: Helvetica, Arial, sans-serif !important;
  font-size: clamp(19px, 1.8vw, 27px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: center !important;

  white-space: normal !important;
  overflow: visible !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* En cuidar dejamos los tres botones equilibrados */
#apartado-10 .fake-webpage-cuidar .care-config-actions .care-cookie-button:hover,
.synthesis-section .fake-webpage-cuidar .care-config-actions .care-cookie-button:hover {
  background: #e88636 !important;
  border-color: #e88636 !important;
  color: #11100d !important;
}

/* =========================
   10 / CUIDAR CONFIG - MÁS ESPACIO VERTICAL
========================= */

/* Panel más alto y con más hueco reservado abajo */
#apartado-10 .fake-webpage-cuidar .care-config-panel,
.synthesis-section .fake-webpage-cuidar .care-config-panel {
  height: min(840px, calc(100vh - 115px)) !important;

  padding:
    clamp(28px, 3vh, 38px)
    clamp(28px, 3.5vw, 44px)
    clamp(245px, 30vh, 285px) !important;
}

/* Opciones algo más compactas para que no choquen con los botones */
#apartado-10 .fake-webpage-cuidar .care-config-options,
.synthesis-section .fake-webpage-cuidar .care-config-options {
  gap: 8px !important;
}

#apartado-10 .fake-webpage-cuidar .care-config-row,
.synthesis-section .fake-webpage-cuidar .care-config-row {
  min-height: 43px !important;
  padding: 7px 14px !important;

  font-size: clamp(13px, 1vw, 16px) !important;
}

/* Botonera un poco más baja y más compacta */
#apartado-10 .fake-webpage-cuidar .care-config-actions,
.synthesis-section .fake-webpage-cuidar .care-config-actions {
  bottom: clamp(24px, 3.5vh, 38px) !important;
  gap: 8px !important;
}

#apartado-10 .fake-webpage-cuidar .care-config-actions .care-cookie-button,
.synthesis-section .fake-webpage-cuidar .care-config-actions .care-cookie-button {
  min-height: 50px !important;
  padding: 8px 18px !important;

  font-size: clamp(18px, 1.6vw, 24px) !important;
  line-height: 1 !important;
}

/* =========================
   03 / IMAGEN RESPONSIVE POR ANCHO Y ALTO
   No toca título, texto ni número
========================= */

#apartado-03 {
  position: relative !important;
  overflow: hidden !important;
}

/* Solo aseguramos capas, sin mover texto ni número */
#apartado-03 .chapter-copy {
  position: relative !important;
  z-index: 4 !important;
}

#apartado-03 .chapter-number {
  position: relative !important;
  z-index: 5 !important;
}

/* Imagen anclada abajo a la derecha y limitada también por altura */
#apartado-03 .banner-cookie-visual {
  position: absolute !important;

  left: auto !important;
  top: auto !important;

  right: max(8vw, calc((100vw - 1180px) / 2)) !important;
  bottom: clamp(34px, 5vh, 72px) !important;

  width: min(680px, 40vw, 66vh) !important;
  max-width: none !important;

  transform: none !important;

  z-index: 1 !important;
  pointer-events: none !important;
}

#apartado-03 .banner-cookie-visual img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* =========================
   AVISO SOLO MÓVIL
========================= */

.desktop-only-notice {
  display: none;
}

/* Solo aparece en pantallas pequeñas */
@media (max-width: 820px) {
  body {
    overflow: hidden;
  }

 .desktop-only-notice {
  position: fixed;
  inset: 0;
  z-index: 999999;

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

  padding: 32px;

  background: #0f0e0b;
  color: #f7f0df;
  text-align: center;
}

  .desktop-only-notice > div {
    max-width: 420px;
  }

  .desktop-only-kicker {
    margin: 0 0 18px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #e88636;
  }

  .desktop-only-notice h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 12vw, 72px);
    line-height: 0.9;
    letter-spacing: -0.055em;
    color: #f7f0df;
  }

  .desktop-only-notice p:not(.desktop-only-kicker) {
    margin: 28px 0 0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: #f7f0df;
  }
}

/* =========================
   10 / FIX PORTÁTIL - SEGUNDAS CAPAS COOKIES
   Evita cortes por altura baja
========================= */

@media (max-height: 900px) {

  /* EMPUJAR + CUIDAR: paneles de configuración más compactos */
  #apartado-10 .fake-webpage-empujar .push-config-panel,
  .synthesis-section .fake-webpage-empujar .push-config-panel,
  #apartado-10 .fake-webpage-cuidar .care-config-panel,
  .synthesis-section .fake-webpage-cuidar .care-config-panel {
    width: min(540px, 42vw) !important;
    height: min(650px, calc(100vh - 115px)) !important;

    padding:
      22px
      30px
      170px !important;

    overflow: hidden !important;
  }

  /* Títulos */
  #apartado-10 .fake-webpage-empujar .push-config-kicker,
  .synthesis-section .fake-webpage-empujar .push-config-kicker,
  #apartado-10 .fake-webpage-cuidar .care-config-kicker,
  .synthesis-section .fake-webpage-cuidar .care-config-kicker {
    margin-bottom: 10px !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  /* Textos introductorios */
  #apartado-10 .fake-webpage-empujar .push-config-text,
  .synthesis-section .fake-webpage-empujar .push-config-text,
  #apartado-10 .fake-webpage-cuidar .care-config-text,
  .synthesis-section .fake-webpage-cuidar .care-config-text {
    margin-bottom: 14px !important;
    font-size: 14px !important;
    line-height: 1.18 !important;
  }

  /* Listas de opciones */
  #apartado-10 .fake-webpage-empujar .push-config-options,
  .synthesis-section .fake-webpage-empujar .push-config-options,
  #apartado-10 .fake-webpage-cuidar .care-config-options,
  .synthesis-section .fake-webpage-cuidar .care-config-options {
    gap: 7px !important;
  }

  /* Filas */
  #apartado-10 .fake-webpage-empujar .push-config-row,
  .synthesis-section .fake-webpage-empujar .push-config-row,
  #apartado-10 .fake-webpage-cuidar .care-config-row,
  .synthesis-section .fake-webpage-cuidar .care-config-row {
    min-height: 39px !important;
    padding: 6px 12px !important;

    font-size: 13px !important;
    line-height: 1.05 !important;
  }

  /* Interruptores */
  #apartado-10 .fake-webpage-empujar .push-toggle,
  .synthesis-section .fake-webpage-empujar .push-toggle,
  #apartado-10 .fake-webpage-cuidar .care-toggle,
  .synthesis-section .fake-webpage-cuidar .care-toggle {
    width: 48px !important;
    height: 27px !important;
  }

  #apartado-10 .fake-webpage-empujar .push-toggle::before,
  .synthesis-section .fake-webpage-empujar .push-toggle::before,
  #apartado-10 .fake-webpage-cuidar .care-toggle::before,
  .synthesis-section .fake-webpage-cuidar .care-toggle::before {
    width: 16px !important;
    height: 16px !important;
    top: 3.5px !important;
    left: 4px !important;
  }

  #apartado-10 .fake-webpage-empujar .push-toggle.is-on::before,
  .synthesis-section .fake-webpage-empujar .push-toggle.is-on::before,
  #apartado-10 .fake-webpage-cuidar .care-toggle.is-on::before,
  .synthesis-section .fake-webpage-cuidar .care-toggle.is-on::before {
    transform: translateX(21px) !important;
  }

  /* Botoneras abajo, pero más compactas */
  #apartado-10 .fake-webpage-empujar .push-config-actions,
  .synthesis-section .fake-webpage-empujar .push-config-actions,
  #apartado-10 .fake-webpage-cuidar .care-config-actions,
  .synthesis-section .fake-webpage-cuidar .care-config-actions {
    bottom: 22px !important;
    gap: 7px !important;
  }

  #apartado-10 .fake-webpage-empujar .push-config-button,
  .synthesis-section .fake-webpage-empujar .push-config-button,
  #apartado-10 .fake-webpage-cuidar .care-config-actions .care-cookie-button,
  .synthesis-section .fake-webpage-cuidar .care-config-actions .care-cookie-button {
    min-height: 43px !important;
    padding: 7px 16px !important;

    font-size: 20px !important;
    line-height: 1 !important;
  }

  #apartado-10 .fake-webpage-empujar .push-config-secondary,
  .synthesis-section .fake-webpage-empujar .push-config-secondary {
    font-size: 12px !important;
    margin-top: 2px !important;
  }
}

/* =========================
   10 / FIX FINAL SEGUNDAS CAPAS
   El panel se adapta a la altura real de la fake popup
========================= */

/* Pantallas de configuración dentro de la fake popup */
#apartado-10 .fake-webpage-empujar .push-cookie-config.is-active,
.synthesis-section .fake-webpage-empujar .push-cookie-config.is-active,
#apartado-10 .fake-webpage-cuidar .care-cookie-config.is-active,
.synthesis-section .fake-webpage-cuidar .care-cookie-config.is-active {
  position: absolute !important;
  inset: 0 !important;

  display: grid !important;
  place-items: center !important;

  padding: 18px 28px 24px !important;

  overflow: hidden !important;
  background: transparent !important;
}

/* Paneles: ahora se adaptan al alto disponible real */
#apartado-10 .fake-webpage-empujar .push-config-panel,
.synthesis-section .fake-webpage-empujar .push-config-panel,
#apartado-10 .fake-webpage-cuidar .care-config-panel,
.synthesis-section .fake-webpage-cuidar .care-config-panel {
  width: min(540px, 42vw) !important;

  height: calc(100% - 34px) !important;
  max-height: 720px !important;
  min-height: 0 !important;

  position: relative !important;

  padding:
    22px
    30px
    142px !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Textos superiores más compactos */
#apartado-10 .fake-webpage-empujar .push-config-kicker,
.synthesis-section .fake-webpage-empujar .push-config-kicker,
#apartado-10 .fake-webpage-cuidar .care-config-kicker,
.synthesis-section .fake-webpage-cuidar .care-config-kicker {
  margin-bottom: 9px !important;

  font-size: 23px !important;
  line-height: 1 !important;
}

#apartado-10 .fake-webpage-empujar .push-config-text,
.synthesis-section .fake-webpage-empujar .push-config-text,
#apartado-10 .fake-webpage-cuidar .care-config-text,
.synthesis-section .fake-webpage-cuidar .care-config-text {
  margin-bottom: 13px !important;

  font-size: 14px !important;
  line-height: 1.16 !important;
}

/* Opciones compactas */
#apartado-10 .fake-webpage-empujar .push-config-options,
.synthesis-section .fake-webpage-empujar .push-config-options,
#apartado-10 .fake-webpage-cuidar .care-config-options,
.synthesis-section .fake-webpage-cuidar .care-config-options {
  gap: 6px !important;
}

#apartado-10 .fake-webpage-empujar .push-config-row,
.synthesis-section .fake-webpage-empujar .push-config-row,
#apartado-10 .fake-webpage-cuidar .care-config-row,
.synthesis-section .fake-webpage-cuidar .care-config-row {
  min-height: 36px !important;

  padding: 5px 12px !important;

  font-size: 13px !important;
  line-height: 1.05 !important;
}

/* Interruptores más pequeños */
#apartado-10 .fake-webpage-empujar .push-toggle,
.synthesis-section .fake-webpage-empujar .push-toggle,
#apartado-10 .fake-webpage-cuidar .care-toggle,
.synthesis-section .fake-webpage-cuidar .care-toggle {
  width: 46px !important;
  height: 25px !important;
}

#apartado-10 .fake-webpage-empujar .push-toggle::before,
.synthesis-section .fake-webpage-empujar .push-toggle::before,
#apartado-10 .fake-webpage-cuidar .care-toggle::before,
.synthesis-section .fake-webpage-cuidar .care-toggle::before {
  width: 15px !important;
  height: 15px !important;
  top: 3px !important;
  left: 4px !important;
}

#apartado-10 .fake-webpage-empujar .push-toggle.is-on::before,
.synthesis-section .fake-webpage-empujar .push-toggle.is-on::before,
#apartado-10 .fake-webpage-cuidar .care-toggle.is-on::before,
.synthesis-section .fake-webpage-cuidar .care-toggle.is-on::before {
  transform: translateX(20px) !important;
}

/* Botoneras siempre dentro del panel */
#apartado-10 .fake-webpage-empujar .push-config-actions,
.synthesis-section .fake-webpage-empujar .push-config-actions,
#apartado-10 .fake-webpage-cuidar .care-config-actions,
.synthesis-section .fake-webpage-cuidar .care-config-actions {
  position: absolute !important;

  left: 30px !important;
  right: 30px !important;
  bottom: 20px !important;

  display: grid !important;
  gap: 7px !important;

  margin: 0 !important;
}

/* Botones más compactos */
#apartado-10 .fake-webpage-empujar .push-config-button,
.synthesis-section .fake-webpage-empujar .push-config-button,
#apartado-10 .fake-webpage-cuidar .care-config-actions .care-cookie-button,
.synthesis-section .fake-webpage-cuidar .care-config-actions .care-cookie-button {
  min-height: 39px !important;

  padding: 6px 16px !important;

  font-size: 19px !important;
  line-height: 1 !important;
}

/* =========================
   10 / MÁS AIRE ENTRE TEXTO Y OPCIONES
========================= */

#apartado-10 .fake-webpage-empujar .push-config-text,
.synthesis-section .fake-webpage-empujar .push-config-text,
#apartado-10 .fake-webpage-cuidar .care-config-text,
.synthesis-section .fake-webpage-cuidar .care-config-text {
  margin-bottom: 24px !important;
}

/* =========================
   10 / MÁS AIRE REAL ENTRE TEXTO Y OPCIONES
   Segunda capa empujar + cuidar
========================= */

#apartado-10 .fake-webpage-empujar .push-config-options,
.synthesis-section .fake-webpage-empujar .push-config-options,
#apartado-10 .fake-webpage-cuidar .care-config-options,
.synthesis-section .fake-webpage-cuidar .care-config-options {
  padding-top: 28px !important;
  margin-top: 0 !important;
}

/* Compensamos un poco para que no se apriete abajo */
#apartado-10 .fake-webpage-empujar .push-config-row,
.synthesis-section .fake-webpage-empujar .push-config-row,
#apartado-10 .fake-webpage-cuidar .care-config-row,
.synthesis-section .fake-webpage-cuidar .care-config-row {
  min-height: 44px !important;
}

/* =========================
   10 / BAJAR CATEGORÍAS HACIA LOS BOTONES
   Segunda capa empujar + cuidar
========================= */

#apartado-10 .fake-webpage-empujar .push-config-options,
.synthesis-section .fake-webpage-empujar .push-config-options,
#apartado-10 .fake-webpage-cuidar .care-config-options,
.synthesis-section .fake-webpage-cuidar .care-config-options {
  padding-top: 40px !important;
}

/* =========================
   10 / EMPUJAR CONFIG - ACEPTAR TODO MÁS ALTO
========================= */

#apartado-10 .fake-webpage-empujar .push-config-primary,
.synthesis-section .fake-webpage-empujar .push-config-primary {
  min-height: 54px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* =========================
   10 / EMPUJAR CONFIG - GUARDAR MÁS ESTRECHO
========================= */

#apartado-10 .fake-webpage-empujar .push-config-actions .push-config-button:not(.push-config-primary),
.synthesis-section .fake-webpage-empujar .push-config-actions .push-config-button:not(.push-config-primary) {
  width: 82% !important;
  justify-self: center !important;
}

/* =========================
   10 / CUIDAR CONFIG - AJUSTE FINO ESPACIOS
========================= */

/* Más aire entre "CONFIGURAR COOKIES" y el texto de arriba */
#apartado-10 .fake-webpage-cuidar .care-config-kicker,
.synthesis-section .fake-webpage-cuidar .care-config-kicker {
  margin-bottom: 18px !important;
}

/* Subir las categorías para dejar más aire antes de los botones */
#apartado-10 .fake-webpage-cuidar .care-config-options,
.synthesis-section .fake-webpage-cuidar .care-config-options {
  padding-top: 8px !important;
}

/* =========================
   10 / CONFIGURACIONES FIJAS
   EMPUJAR + CUIDAR sin movimiento entre resoluciones
========================= */

/* EMPUJAR + CUIDAR: panel fijo, no elástico */
#apartado-10 .fake-webpage-empujar .push-config-panel,
.synthesis-section .fake-webpage-empujar .push-config-panel,
#apartado-10 .fake-webpage-cuidar .care-config-panel,
.synthesis-section .fake-webpage-cuidar .care-config-panel {
  width: 560px !important;
  height: 720px !important;

  min-width: 560px !important;
  max-width: 560px !important;
  min-height: 720px !important;
  max-height: 720px !important;

  aspect-ratio: auto !important;

  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Título fijo */
#apartado-10 .fake-webpage-empujar .push-config-kicker,
.synthesis-section .fake-webpage-empujar .push-config-kicker,
#apartado-10 .fake-webpage-cuidar .care-config-kicker,
.synthesis-section .fake-webpage-cuidar .care-config-kicker {
  position: absolute !important;
  left: 45px !important;
  top: 40px !important;
  width: 470px !important;

  margin: 0 !important;

  font-size: 28px !important;
  line-height: 1 !important;
}

/* Texto fijo */
#apartado-10 .fake-webpage-empujar .push-config-text,
.synthesis-section .fake-webpage-empujar .push-config-text,
#apartado-10 .fake-webpage-cuidar .care-config-text,
.synthesis-section .fake-webpage-cuidar .care-config-text {
  position: absolute !important;
  left: 45px !important;
  top: 92px !important;
  width: 470px !important;

  margin: 0 !important;

  font-size: 14px !important;
  line-height: 1.18 !important;
}

/* Categorías fijas */
#apartado-10 .fake-webpage-empujar .push-config-options,
.synthesis-section .fake-webpage-empujar .push-config-options,
#apartado-10 .fake-webpage-cuidar .care-config-options,
.synthesis-section .fake-webpage-cuidar .care-config-options {
  position: absolute !important;
  left: 45px !important;
  top: 205px !important;
  width: 470px !important;

  display: grid !important;
  gap: 8px !important;

  padding: 0 !important;
  margin: 0 !important;
}

/* Filas fijas */
#apartado-10 .fake-webpage-empujar .push-config-row,
.synthesis-section .fake-webpage-empujar .push-config-row,
#apartado-10 .fake-webpage-cuidar .care-config-row,
.synthesis-section .fake-webpage-cuidar .care-config-row {
  min-height: 39px !important;
  height: 39px !important;

  padding: 6px 12px !important;

  font-size: 13px !important;
  line-height: 1.05 !important;
}

/* Botonera fija */
#apartado-10 .fake-webpage-empujar .push-config-actions,
.synthesis-section .fake-webpage-empujar .push-config-actions,
#apartado-10 .fake-webpage-cuidar .care-config-actions,
.synthesis-section .fake-webpage-cuidar .care-config-actions {
  position: absolute !important;

  left: 45px !important;
  right: auto !important;
  bottom: 38px !important;

  width: 470px !important;

  display: grid !important;
  gap: 8px !important;

  margin: 0 !important;
}

/* Botones fijos */
#apartado-10 .fake-webpage-empujar .push-config-button,
.synthesis-section .fake-webpage-empujar .push-config-button,
#apartado-10 .fake-webpage-cuidar .care-config-actions .care-cookie-button,
.synthesis-section .fake-webpage-cuidar .care-config-actions .care-cookie-button {
  min-height: 38px !important;
  height: 38px !important;

  padding: 6px 16px !important;

  font-size: 20px !important;
  line-height: 1 !important;
}

/* =========================
   10 / CONFIGURACIONES MÁS PEQUEÑAS
   Reduce empujar + cuidar sin mover el interior
========================= */

#apartado-10 .fake-webpage-empujar .push-config-panel,
.synthesis-section .fake-webpage-empujar .push-config-panel,
#apartado-10 .fake-webpage-cuidar .care-config-panel,
.synthesis-section .fake-webpage-cuidar .care-config-panel {
  transform: scale(0.80) !important;
  transform-origin: center center !important;
}