/* Pure HTML + CSS mockup (no frameworks) */
:root {
  --bg-dark: #262626;
  --text: #f2f2f2;
  --muted: #cfcfcf;
  --yellow: #f1c24a;
  --yellow-2: #f6cf62;
  --purple: #c8b7da;
  --green: #bfe0a8;
  --ink: #2b2b2b;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg-dark);
  color: var(--text);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* HERO */
.hero {
  position: relative;
  width: 100%;
  margin: 0 auto;
  min-height: 520px;
  background: #262626 url("https://podernarrativo.org//recursos-colecciones/assets/img/hero-bg-yellow.png") center/cover no-repeat;
  overflow: hidden;
}

.topbar {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #111;
  font-weight: 700;
  width: 65px;
}

.brand__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #111;
  opacity: .2;
}

.brand__name {
  letter-spacing: .2px;
  font-size: 14px;
}

.menuBtn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #2a2a2a;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  display: grid;
  place-items: center;
}

.menuBtn__lines {
  width: 18px;
  height: 12px;
  display: block;
  background:
    linear-gradient(#fff, #fff) 0 0/100% 2px no-repeat,
    linear-gradient(#fff, #fff) 0 50%/100% 2px no-repeat,
    linear-gradient(#fff, #fff) 0 100%/100% 2px no-repeat;
}

.hero__inner {
  min-height: 447px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 16px 78px;
}

.hero__titleImg {
  width: min(660px, 85vw);
}

.hero__tear {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  width: 100%;
  height: 149px;
  pointer-events: none;
}

/* MAIN */
.main {
  position: relative;
  background: var(--bg-dark);
  overflow: hidden;
}

.intro,
.section-cta,
.section-note {
  width: min(700px, 92vw);
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
}

.section-desc {
  width: 100%;
  background: url("https://podernarrativo.org//recursos-colecciones/assets/img/bg-dotted-hills.png") center / contain no-repeat;
  text-align: center;
  padding: 10px 0;
  min-height: 348px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro {
  padding: 56px 0 10px;
}

.intro__lead {
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.4px;
  margin: 0 auto 26px;
  width: min(860px, 100%);
}

.hl {
  color: var(--yellow);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  margin: 12px auto 26px;
  padding: 0;
}

.cta img {
  width: min(560px, 92vw);
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .35));
}

.cta__label {
  position: absolute;
  left: 50%;
  bottom: 65px;
  transform: translateX(35%);
  color: #1a1a1a;
  font-weight: 600;
  font-size: 14px;
  background: rgba(200, 183, 218, .95);
  padding: 8px 14px;
  border-radius: 999px;
}

.intro__sub {
  margin: 0 auto 22px;
  width: min(700px, 92vw);
  background-color: #262626;
  border-radius: 94px;
  min-height: 167px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.intro__sub p {
  color: var(--muted);
  font-size: 21px;
  line-height: 1.55;
  padding: 10px 30px;
}

.introNote {
  position: relative;
  width: min(980px, 100%);
  margin: 44px auto 60px;
}

.introNote__img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .25));
}

.introNote__copy {
  position: absolute;
  left: 210px;
  right: 56px;
  top: 40px;
  bottom: 28px;
  display: flex;
  align-items: center;
}

.introNote__copy p {
  margin: 0;
  color: #2b2b2b;
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.35;
}

.introNote__copy b {
  font-weight: 800;
}

.introNote__copy i {
  font-style: italic;
}

/* COLLECTIONS */
.collections {
  width: min(700px, 92vw);
  margin: 10px auto 40px;
  padding-bottom: 20px;
}

.cardRow {
  display: grid;
  grid-template-columns: 320px 1fr;
  align-items: center;
  margin: 26px 0;
  position: relative;
}

.collectionCard img {
  width: 179px;
  height: 184px;
  display: block;
  margin-top: -110px;
  margin-bottom: -63px;
}

.collectionCard--placeholder {
  padding: 22px 18px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.collectionCard__phTitle {
  font-size: 28px;
  line-height: 1.02;
  font-weight: 800;
  color: #2a2a2a;
}

.collectionCard__phSub {
  font-size: 13px;
  color: #444;
  opacity: .9;
}

.cardRow__right {
  position: relative;
  min-height: 250px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.paper {
  position: relative;
  padding: 50px 40px 53px 94px;
  max-width: 362px;
  min-height: 190px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border-radius: 18px;
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25);
}

.paper .btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 200px;
  margin: 0 auto;
  text-align: center;
}

.paper--purple {
  background-image: url("https://podernarrativo.org//recursos-colecciones/assets/img/paper-bg-purple.png");
}

.paper--green {
  background-image: url("https://podernarrativo.org//recursos-colecciones/assets/img/paper-bg-green.png");
}

.paper--empty {
  background: transparent;
  box-shadow: none;
}

.paper__text {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #000;
}

.btn {
  display: inline-block;
  background: var(--yellow-2);
  color: #1c1c1c;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .25);
}

.paper__soon {
  font-weight: 800;
  margin-top: 6px;
  color: #5b5656;
}

/* vertical sticker text (right side) */
.stickerVertical {
  position: absolute;
  right: -70px;
  top: -10px;
  transform: rotate(-90deg);
  transform-origin: top right;
  display: flex;
  gap: 12px;
  color: var(--yellow);
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 22px;
  opacity: .9;
  white-space: nowrap;
}

/* FOOTER */
.footer {
  width: min(1100px, 92vw);
  margin: 32px auto 26px;
  padding: 18px 0 34px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  color: #cfcfcf;
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer a {
  color: #fff;
  opacity: .9;
}

.footer a:hover {
  opacity: 1;
}

/* RESPONSIVE */




.arrowBtn {
  position: absolute;
  left: -34px;
  top: 50%;
  width: 68px;
  height: 68px;
  transform: translateY(-50%);
  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  background-image: url("https://podernarrativo.org//recursos-colecciones/assets/img/icon-arrow-circle.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25));
}

.arrowBtn--right {
  transform: translateY(-50%) rotate(180deg);
}





/* =========================
   Collection Feature Section
   ========================= */


/* ================================
   Collection (Row1 + Row2)
   ================================ */
.collection {
  background: var(--bg-dark);
  color: var(--text);
}

.collection__container {
  width: min(919px, calc(100% - 40px));
  margin: 0 auto;
}

.collection__row1 {
  padding: 10px 0 28px;
}

.collection__row1 .collection__container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.collection__left {
  flex: 1;
  min-width: 0;
}

.collection__tag {
  display: inline-block;
  background: var(--yellow);
  color: #1f1f1f;
  font-weight: 800;
  padding: 10px 16px;
  letter-spacing: .2px;
  margin-bottom: 18px;
  font-size: 32px;
}

.collection__title {
  font-size: 67px;
  line-height: .92;
  font-weight: 300;
  margin: 0 0 18px;
}

.collection__em {
  color: var(--yellow);
}

.collection__desc {
  max-width: 420px;
  color: #d5d5d5;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

.collection__emInline {
  color: var(--yellow);
  font-weight: 800;
}

.collection__right {
  position: relative;
  width: 360px;
  flex: 0 0 360px;
  display: flex;
  justify-content: flex-end;
}

.collection__snail {
  width: 185%;
  height: auto;
  display: block;
  max-width: 189%;
  margin-right: -139px;
}

.collection__clock {
  position: absolute;
  width: 120px;
  height: auto;
  left: 48%;
  top: 76px;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25));
}

.collection__globe {
  position: absolute;
  width: 92px;
  height: auto;
  left: 78%;
  top: 265px;
  transform: translateX(-50%);
  opacity: .95;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .22));
}

/* Row 2 */
.collection__row2 {
  position: relative;
  padding: 0px 0 64px;
}

.collection__row2bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Cards wrapper (700px, not full width) */
.collection__cards {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 15px;
}

/* Individual card */
.collectionCard {
  position: relative;
  flex: 0 0 300px;
  width: 300px;
  min-height: 300px;
  text-decoration: none;
  color: #222;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0 8px 12px;
  align-items: center;
}

.collectionCard__paper {
  position: absolute;
  inset: 0;
  background-image: url("https://podernarrativo.org//recursos-colecciones/assets/img/paper-texture-card.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 156%;
  z-index: 0;
}

/* Card image (floats above paper) */
.collectionCard__img {
  z-index: 2;
}

/* Text */
.collectionCard__text {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 18px;
  line-height: 1.35;
  margin: 0;
  padding: 0 8px;
  font-weight: 600;
}

/* Responsive */




/* ================================
   Explore at your pace (Accordion)
   ================================ */

.pace {
  background: #ffffff;
  color: #1f1f1f;
  padding: 64px 0 48px;
}

.pace__container {
  width: min(900px, calc(100% - 40px));
  margin: 0 auto;
}

.pace__title {
  margin: 0 0 18px;
  font-weight: 800;
  letter-spacing: -0.6px;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.02;
  text-align: center;
}

.pace__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 10px 0 26px;
}

.pace__clock {
  width: 86px;
  height: auto;
  display: block;
}

.pace__question {
  margin: 0;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.25;
  font-weight: 600;
  text-align: left;
}

.accordion {
  margin-top: 22px;
}

/* IMPORTANT: item has NO dark background */
.accordionItem {
  margin-bottom: 14px;
}

/* Button is independent (black pill) */
.accordionBtn {
  width: 100%;
  border: 0;
  background: #222222;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0px 0px 0px 26px;
  text-align: left;
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
}

.accordionBtn__text {
  font-size: clamp(16px, 2.3vw, 20px);
  line-height: 1.2;
  font-weight: 500;
}

.accordionBtn__text strong {
  font-weight: 800;
}

.accordionBtn__icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 54px;
}

.accordionBtn__icon img {
  width: 35px;
  height: auto;
  display: block;
  transform: rotate(180deg);
  transition: transform .2s ease;
}

/* Panel is WHITE and separate from button */
.accordionPanel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  background: transparent;
}

.accordionPanel__inner {
  background: #ffffff;
  color: #1f1f1f;
  padding: 18px 0 0;
}

/* Open state: rotate arrow */
.accordionItem.is-open .accordionBtn__icon img {
  transform: rotate(270deg);
}

/* Content inside the white panel */
.paceContent {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 44px;
  align-items: start;
  padding: 6px 0 18px;
}

.paceContent__tag {
  display: inline-block;
  background: var(--yellow);
  color: #1a1a1a;
  font-style: italic;
  font-weight: 500;
  padding: 3px 8px;
  margin-bottom: 18px;
  font-size: 22px;
}

.paceContent__title {
  margin: 0;
  font-size: 36px;
  line-height: 1.03;
  font-weight: 300;
  color: #222;
}

.paceContent__title b {
  font-weight: 800;
}

.paceContent__subtitle {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  color: #222;
}

.paceContent__right p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.55;
  color: #333;
}

.paceContent__right b {
  font-weight: 800;
}

/* Responsive */



/* ================================
   NEW: Accordion Item 1 extra content
   Ants row + Slider
   ================================ */

.paceExtra {
  padding: 10px 0 18px;
}

/* Ants row */
.paceAnts {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: center;
  margin: 8px 0 22px;
}

.paceAnts__media {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.paceAnts__img {
  width: 100%;
  height: auto;
}

.paceAnts__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: #333;
}

/* Slider shell */
.paceSlider {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 10px;
}

.paceSlider__viewport {
  overflow: hidden;
  border-radius: 1px;
}

.paceSlider__track {
  display: flex;
  width: 100%;
  transform: translateX(0%);
  transition: transform 260ms ease;
}

.paceSlider__arrow {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: transparent;
  display: grid;
  place-items: center;
  user-select: none;
  padding: 0;
}

.paceSlider__arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.2s ease;
}


.paceSlider__arrow--prev img {
  transform: rotate(180deg);
}


.paceSlide {
  flex: 0 0 100%;
  padding: 0;
}

/* Slide 1: quote texture + button */
.paceSlide--quote {
  /* TODO: replace with your real yellow texture image */
  background: url("https://podernarrativo.org//recursos-colecciones/assets/img/bg-item1-slide.png") center / cover no-repeat;
}

.paceSlide__quoteBox {
  padding: 22px 22px 18px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.paceSlide__quote {
  margin: 0;
  color: #2b2b2b;
  font-size: 25px;
  line-height: 1.55;
  text-align: center;
}

.paceSlide__quote b {
  font-weight: 800;
}

.paceSlide__cta {
  align-self: center;
  display: inline-flex;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: #222;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 12px 22px rgba(0, 0, 0, .20);
}

.paceSlide__cta:hover {
  text-decoration: none;
  opacity: .95;
}

/* Slide 2: 2 columns video + text */
.paceSlide--video {
  background: #fff;
}

.paceSlide__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 20px;
  padding: 18px;
  align-items: start;
}

.paceSlide__video {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--yellow);
  min-height: 220px;
  position: relative;
}

.paceSlide__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.paceSlide__title {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  color: #222;
  text-align: center;
}

.paceSlide__p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.55;
  color: #333;
}

/* Responsive */



/* ================================
   NEW Slider (Accordion Item 2)
   ================================ */

.narrativeSlider {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 12px;
}

.narrativeSlider__viewport {
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
}

.narrativeSlider__track {
  display: flex;
  width: 100%;
  transform: translateX(0%);
  transition: transform 260ms ease;
}

.narrativeSlide {
  flex: 0 0 100%;
}

/* Arrows using arrow-slider.png (right arrow image) */
.narrativeSlider__arrow {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: transparent;
  display: grid;
  place-items: center;
  padding: 0;
}

.narrativeSlider__arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.2s ease;
}

/* Left arrow uses same image rotated */
.narrativeSlider__arrow--prev img {
  transform: rotate(180deg);
}

.narrativeSlider__arrow:hover img {
  transform: scale(1.05);
}

.narrativeSlider__arrow--prev:hover img {
  transform: rotate(180deg) scale(1.05);
}

/* Bullets */
.narrativeSlider__dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.narrativeSlider__dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: none;
  background: #1f1f1f;
  opacity: 0.25;
  cursor: pointer;
  padding: 0;
}

.narrativeSlider__dot.is-active {
  background: var(--yellow);
  opacity: 1;
}

/* Slide 1 layout (Puntos clave...) */
.pointsSlide {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  padding: 22px;
  align-items: start;
}

.pointsSlide__tag {
  display: inline-block;
  background: var(--yellow);
  font-style: italic;
  font-size: 16px;
  padding: 4px 8px;
  margin-bottom: 12px;
}

.pointsSlide__title {
  margin: 8px 0 14px;
  font-size: 36px;
  line-height: 1.05;
  font-weight: 400;
  color: #222;
}

.pointsSlide__title strong {
  font-weight: 900;
}

.pointsSlide__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #333;
  max-width: 420px;
}

.pointsSlide__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #333;
}

.pointsSlide__ants {
  margin-top: 14px;
}

.pointsSlide__ants img {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
}

/* Responsive */


/* ================================
   NEW: Slide 2 (Nosotros más amplio)
   ================================ */

.narrativeSlide--wider {
  background: #fff;
}

.widerSlide {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  padding: 22px;
  align-items: start;
}

/* Left */
.widerSlide__tag {
  display: inline-block;
  background: var(--yellow);
  font-style: italic;
  font-size: 16px;
  padding: 4px 8px;
  margin-bottom: 12px;
}

.widerSlide__title {
  margin: 8px 0 14px;
  font-size: 36px;
  line-height: 1.05;
  font-weight: 400;
  color: #222;
}

.widerSlide__title strong {
  font-weight: 900;
}

.widerSlide__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #333;
  max-width: 520px;
}

/* Right bullets */
.widerSlide__bullets {
  list-style: none;
  padding: 0;
  margin: 10px 0 18px;
  display: grid;
  gap: 18px;
}

.widerSlide__bullets li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
}

.widerSlide__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
}

.widerSlide__icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.widerSlide__bullets span {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

/* Yellow note */
.widerSlide__note {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--yellow);
  color: #2b2b2b;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
}

/* Responsive */


/* ================================
   NEW: Slide 3 (Llave maestra)
   ================================ */

.narrativeSlide--keys {
  background: #fff;
}

.keysSlide {
  padding: 22px;
}

.keysSlide__top {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  align-items: start;
}

/* Tag */
.keysSlide__tag {
  display: inline-block;
  background: var(--yellow);
  font-style: italic;
  font-size: 16px;
  padding: 4px 8px;
  margin-bottom: 12px;
}

/* Title */
.keysSlide__title {
  margin: 8px 0 10px;
  font-size: 35px;
  line-height: 1.05;
  font-weight: 400;
  color: #222;
}

.keysSlide__title strong {
  font-weight: 900;
}

.keysSlide__regular {
  font-weight: 400;
}

/* Keys image */
.keysSlide__icons {
  margin-top: 12px;
}

.keysSlide__icons img {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}

/* Right paragraph */
.keysSlide__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #333;
}

/* Cards row */
.keysSlide__cards {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Card base */
.keysCard {
  border-radius: 0;
  padding: 18px 16px 16px;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("https://podernarrativo.org//recursos-colecciones/assets/img/bg-cards.png");
  background-position: center;
  background-size: cover;
}

/* Title as pill / badge (not a button) */
.keysCard__title {
  margin: -30px 0 12px;
  padding: 6px 18px;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 900;
  text-align: center;
  border-radius: 999px;
  display: inline-block;
}


.keysCard__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #333;
  text-align: center;
}

/* Card colors (match look & feel) */
.keysCard--emotional .keysCard__title {
  background: #ff9b87;
  color: #1f1f1f;
}

.keysCard--politic .keysCard__title {
  background: #c7b7dd;
  color: #1f1f1f;
}

.keysCard--strategy .keysCard__title {
  background: #b9d9a3;
  color: #1f1f1f;
}

/* Responsive */




/* ================================
   NEW: Ecos de interconexión (Flip Cards)
   ================================ */

.ecos {
  margin-top: 40px;
  padding: 10px 0 30px;
}

.ecos__title {
  text-align: center;
  font-size: 34px;
  font-weight: 500;
  margin: 0 0 22px;
  color: #222;
}

.ecos__title strong {
  font-weight: 900;
}

/* Grid */
.ecosGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
  align-items: center;
  padding: 21px;
}

/* Card wrapper */
.flipCard {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 14px;
  outline: none;
}

/* 3D scene */
.flipCard__scene {
  perspective: 1200px;
}

/* Inner flip */
.flipCard__inner {
  position: relative;
  width: 100%;
  max-height: 390px;
  transform-style: preserve-3d;
  transition: transform 600ms ease;
  background-image: url("https://podernarrativo.org//recursos-colecciones/assets/img/bg-card.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.flipCard__face.flipCard__front {
  position: absolute;
}

/* Hover + keyboard focus */
.flipCard:hover .flipCard__inner,
.flipCard:focus-within .flipCard__inner {
  transform: rotateY(180deg);
}

/* Faces */
.flipCard__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 18px 0;
}

/* Paper texture background */
.flipCard__paper {
  position: absolute;
  inset: 0;
  background: url("https://podernarrativo.org//recursos-colecciones/assets/img/bg-card.png") center / cover no-repeat;
  z-index: 0;
}

/* Make content above paper */
.flipCard__front,
.flipCard__back {
  position: relative;
}

.flipCard__front>*,
.flipCard__back>* {
  position: relative;
  z-index: 1;
}

/* Back face rotation */
.flipCard__back {
  transform: rotateY(180deg);
}

/* Media */
.flipCard__media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 260px;
}

.flipCard__img {
  max-height: 280px;
  width: auto;
  display: block;
}

.flipCard__media--wide {
  min-height: 280px;
  align-items: center;
}

.flipCard__imgWide {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

/* Quote strip */
.flipCard__quote {
  margin-top: -40px;
  padding: 16px 16px 14px;
  color: #fff;
  position: relative;
  width: 128%;
  margin-left: -31px;
}

.flipCard__quote::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://podernarrativo.org//recursos-colecciones/assets/img/bg2-frase.png") center / cover no-repeat;
  z-index: 0;
}

.flipCard__quoteText,
.flipCard__quoteAuthor {
  position: relative;
  z-index: 1;
  margin: 0;
}

.flipCard__quoteText {
  font-size: 12px;
  line-height: 1.35;
}

.flipCard__quoteAuthor {
  margin-top: 6px;
  font-size: 14px;
}

/* Back content text */
.flipCard__backContent {
  padding: 10px 8px 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #222;
  min-height: 400px;
}

.flipCard__backContent p {
  margin: 0 0 14px;
}

.flipCard__backContent p:last-child {
  margin-bottom: 0;
}

/* Button always visible (outside flip) */
.flipCard__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  border-radius: 999px;
  background: #1e1e1e;
  color: var(--yellow);
  font-weight: 800;
  text-decoration: none;
  padding: 0 18px;
  width: max-content;
  margin: 0 auto;
}

.flipCard__btn:hover {
  text-decoration: underline;
}

/* Responsive */



/* ================================
   NEW: Gift section (Regalo)
   ================================ */

.gift {
  position: relative;
  padding: 34px 0;
}

.gift__bg {
  position: absolute;
  inset: 0;
  background: url("https://podernarrativo.org//recursos-colecciones/assets/img/bg-crema.png") center / cover no-repeat;
  z-index: 0;
}

.gift__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 26px 28px;
}

.gift__left {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gift__img {
  width: 123%;
  height: auto;
  display: block;
  max-width: none;
  margin-bottom: -60px;
  margin-left: 53px;
}

/* Right content */
.gift__right {
  padding: 10px 0;
}

.gift__title {
  margin: 0 0 6px;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 900;
  color: #222;
}

.gift__text {
  margin: 0 0 18px;
  font-size: 22px;
  line-height: 1.35;
  color: #222;
  max-width: 520px;
}

.gift__text strong {
  font-weight: 900;
}

/* Button */
.gift__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  min-width: 190px;
  border-radius: 999px;
  background: #1e1e1e;
  color: var(--yellow);
  font-weight: 900;
  text-decoration: none;
  padding: 0 18px;
}

.gift__btn:hover {
  text-decoration: underline;
}

/* Responsive */



/* ================================
   NEW: References section (Recomendaciones)
   ================================ */

.refs {
  padding: 26px 0 46px;
}

.refs__inner {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr;
  gap: 34px;
  align-items: start;
}

/* Left */
.refs__title {
  margin: 0;
  font-size: 40px;
  line-height: 1.05;
  font-weight: 400;
  color: #222;
}

.refs__title strong {
  font-weight: 900;
}

.refs__art {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.refs__art img {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
}

/* Right items */
.refItem {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 24px;
}

.refItem:last-child {
  margin-bottom: 0;
}

/* Number (black circle image) */
.refItem__num {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}

.refItem__num img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

/* Head with yellow brush stripe */
.refItem__head {
  position: relative;
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 900;
  color: #222;
  display: inline-block;
  padding: 8px 10px 8px 10px;
}

.refItem__stripe {
  position: absolute;
  inset: 0;
  background: var(--yellow);
  z-index: 0;
  transform: skewX(-8deg);
  border-radius: 6px;
}

/* keep text above stripe */
.refItem__headText {
  position: relative;
  z-index: 1;
}

/* Author */
.refItem__author {
  margin: 0 0 10px;
  font-size: 16px;
  color: #222;
}

/* Body text */
.refItem__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #222;
  max-width: 560px;
}

.refItem__link {
  color: #d19a00;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.refItem__link:hover {
  text-decoration-thickness: 2px;
}

/* Responsive */




/* ================================
   NEW: Faros header
   ================================ */

.farosHead {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 26px;
  align-items: start;
  padding: 10px 0 18px;
}

.farosHead__title {
  margin: 0;
  font-size: 46px;
  line-height: 1.02;
  font-weight: 400;
  color: #222;
}

.farosHead__title strong {
  font-weight: 900;
}

/* Highlight text with marker bars */
.farosHead__highlight {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.25;
  font-style: italic;
  font-weight: 600;
  color: #222;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

.farosHead__highlight span {
  display: inline-block;
  background: var(--yellow);
  padding: 4px 8px;
  width: fit-content;
}

/* Responsive */



/* ================================
   NEW: Faros section (2 cols + vertical slider)
   ================================ */

.farosSection {
  padding: 18px 0 34px;
}

.farosSection__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 34px;
  align-items: start;
}

/* ================================
   Vertical Slider (Faros)
   ================================ */

/* Wrapper general del slider */
.vslider {
  position: relative;
  width: 100%;
  max-width: 560px;
  /* ajusta si en el diseño el bloque es más ancho */
  height: 420px;
  /* alto visible (debe coincidir con el slide) */
  overflow: hidden;
  display: grid;
  grid-template-rows: 44px 1fr 44px;
  /* up btn | viewport | down btn */
  justify-items: center;
  align-items: center;
  gap: 14px;
  /* separación entre flecha y viewport */
}

/* Viewport (la ventana visible) */
.vslider__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  /* por si no quieres bordes redondeados */
}

/* Track que se mueve */
.vslider__track {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  /* suaviza y evita flicker */
  backface-visibility: hidden;
}

/* Cada slide debe medir EXACTAMENTE lo mismo que el alto visible */
.vslider__slide {
  width: 100%;
  height: 420px;
  /* mismo valor que .vslider */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Imagen dentro del slide */
.vslider__slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  /* usa contain si no quieres recorte */
  user-select: none;
  -webkit-user-drag: none;
  transform: translateZ(0);
  /* evita saltos al animar */
}

/* ================================
   Nav buttons (yellow circle + arrow image)
   ================================ */

.vslider__nav {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Estilo círculo */
  background-color: #d79b00;

  /* Imagen arrow (flecha apunta a la derecha por defecto) */
  background-image: url("https://podernarrativo.org//recursos-colecciones/assets/img/arrow-slider.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;

  /* UX */
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* Flecha hacia arriba: rotamos -90° */
.vslider__nav--up {
  transform: rotate(-90deg);
}

/* Flecha hacia abajo: rotamos 90° */
.vslider__nav--down {
  transform: rotate(90deg);
}

.vslider__nav:hover {
  filter: brightness(0.95);
}

.vslider__nav:active {
  filter: brightness(0.9);
}

/* Accesibilidad */
.vslider__nav:focus {
  outline: none;
}

.vslider__nav:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.25);
  outline-offset: 3px;
}

/* ================================
   Responsive
   ================================ */

/* En pantallas pequeñas, reduce alto si lo necesitas */




/* ---------- Right content ---------- */
.farosContent__title {
  margin: 0 0 14px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 500;
  color: #222;
}

.farosContent__title strong {
  font-weight: 900;
}

.farosContent__body p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.65;
  color: #222;
  max-width: 560px;
}

.farosContent__link {
  color: #d19a00;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.farosContent__ctas {
  margin-top: 10px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Reuseable pill button */
.btnPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  border: 0;
}

.btnPill--yellow {
  background: #f3cd5c;
  color: #1f1f1f;
}

.btnPill--yellow:hover {
  text-decoration: underline;
}

/* Responsive */




/* =========================
   Cartas sobre interconexión
   ========================= */

.letters {
  background: #ffffff;
  padding: 56px 0 40px;
}

.letters__container {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

.letters__grid {
  display: grid;
  grid-template-columns: 40% 60%;
  /* 40% / 60% */
  gap: 56px;
  align-items: start;
}

/* ---------- Left column ---------- */
.letters__title {
  margin: 0;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.letters__titleThin {
  font-size: 41px;
  font-weight: 300;
  color: #2b2b2b;
}

.letters__titleBold {
  font-size: 47px;
  font-weight: 800;
  color: #2b2b2b;
}

.letters__byline {
  margin: 18px 0 0;
  line-height: 1.2;
  font-size: clamp(28px, 3vw, 42px);
  font-style: italic;
  font-weight: 500;
  color: #2b2b2b;
}

/* Highlighter blocks (two lines) */
.letters__highlight {
  display: inline;
  background: #f2c84b;
  padding: 6px 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- Right column ---------- */
.letters__right {
  max-width: 680px;
}

.letters__text {
  margin: 0;
  font-size: 20px;
  line-height: 1.45;
  color: #2b2b2b;
}

.letters__text+.letters__text {
  margin-top: 22px;
}

.letters__text--quote {
  margin-top: 26px;
}

/* ---------- Bottom composition ---------- */
.letters__bottom {
  position: relative;
  margin-top: 28px;
  min-height: 360px;
}

/* Decorative art (letters + birds) */
.letters__art {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(820px, 78%);
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* CTA styled as brush/highlight (link, not a button) */
.letters__cta {
  position: absolute;
  right: 0;
  bottom: 92px;
  display: inline-block;
  padding: 18px 26px;
  font-size: clamp(24px, 2.4vw, 40px);
  font-weight: 800;
  color: #111;
  text-decoration: none;
  line-height: 1.05;
  z-index: 2;
}

.letters__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f2c84b;

  /* “brush” feel sin imagen */
  border-radius: 10px;
  transform: skewX(-6deg);
  z-index: -1;

  /* bordes un poco irregulares */
  clip-path: polygon(0% 18%, 2% 8%, 10% 10%, 18% 6%, 30% 10%, 42% 7%, 54% 10%,
      66% 8%, 78% 12%, 90% 8%, 100% 12%,
      98% 84%, 92% 92%, 82% 88%, 70% 94%, 58% 88%, 46% 92%,
      34% 88%, 22% 92%, 10% 88%, 4% 92%, 0% 86%);
}

.letters__cta:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* ---------- Responsive ---------- */
/* ==========================================================================
   MEDIA QUERIES (Moved to bottom)
   ========================================================================== */

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

  .cardRow__right {
    min-height: unset;
    justify-content: center;
  }

  .stickerVertical {
    display: none;
  }

  .footer {
    flex-direction: column;
    text-align: center;
  }

  .arrowBtn {
    left: -10px;
  }

  .gift__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .gift__img {
    max-width: 540px;
  }

  .gift__text {
    font-size: 18px;
  }
}

@media (max-width: 520px) {
  .hero {
    min-height: 460px;
  }

  .hero__inner {
    min-height: 460px;
    padding-top: 86px;
  }

  .intro {
    padding-top: 42px;
  }

  .cta__label {
    left: 50%;
    transform: translateX(-10%);
    bottom: 16px;
    font-size: 13px;
  }

  .letters {
    padding: 44px 0 24px;
  }

  .letters__container {
    width: min(1120px, calc(100% - 28px));
  }

  .letters__bottom {
    min-height: 380px;
  }

  .letters__cta {
    padding: 14px 18px;
  }
}

@media (max-width: 820px) {
  .introNote__copy {
    position: static;
    padding: 16px 12px 0;
    color: #f4f4f4;
  }

  .pace__lead {
    justify-content: flex-start;
  }

  .pace__question {
    text-align: left;
  }

  .paceContent {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .accordionBtn {
    padding: 16px 14px 16px 18px;
  }

  .accordionBtn__icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .paceAnts {
    grid-template-columns: 1fr;
  }

  .paceAnts__img {
    width: 190px;
  }

  .paceSlider {
    grid-template-columns: 46px 1fr 46px;
  }

  .paceSlider__arrow {
    width: 46px;
    height: 46px;
    font-size: 30px;
  }

  .paceSlide__grid {
    grid-template-columns: 1fr;
  }

  .paceSlide__video {
    min-height: 200px;
  }

  .narrativeSlider {
    grid-template-columns: 46px 1fr 46px;
  }

  .narrativeSlider__arrow {
    width: 46px;
    height: 46px;
  }

  .pointsSlide {
    grid-template-columns: 1fr;
  }

  .pointsSlide__title {
    font-size: 32px;
  }

  .pointsSlide__ants img {
    max-width: 260px;
  }

  .widerSlide {
    grid-template-columns: 1fr;
  }

  .widerSlide__title {
    font-size: 32px;
  }

  .widerSlide__bullets li {
    grid-template-columns: 40px 1fr;
  }

  .widerSlide__icon {
    width: 40px;
    height: 40px;
  }

  .widerSlide__icon img {
    width: 34px;
    height: 34px;
  }

  .keysSlide__top {
    grid-template-columns: 1fr;
  }

  .keysSlide__title {
    font-size: 32px;
  }

  .keysSlide__icons img {
    max-width: 200px;
  }

  .keysSlide__cards {
    grid-template-columns: 1fr;
  }

  .keysCard__title {
    font-size: 20px;
  }
}

@media (max-width: 860px) {
  .collection__title {
    font-size: 64px;
  }

  .collection__right {
    width: 300px;
    flex-basis: 300px;
  }

  .collection__snail {
    width: 300px;
  }

  .collection__clock {
    width: 105px;
    top: 62px;
  }

  .collection__globe {
    width: 82px;
    top: 220px;
    left: 80%;
  }
}

@media (max-width: 720px) {
  .collection__row1 {
    padding: 42px 0 18px;
  }

  .collection__row1 .collection__container {
    flex-direction: column;
    align-items: flex-start;
  }

  .collection__right {
    width: 100%;
    flex-basis: auto;
    justify-content: flex-start;
  }

  .collection__snail {
    width: min(360px, 100%);
  }

  .collection__clock {
    left: 52%;
    top: 56px;
  }

  .collection__globe {
    left: 78%;
    top: 240px;
  }

  .collection__cards {
    flex-direction: column;
    gap: 18px;
    align-items: center;
  }

  .collectionCard {
    width: min(360px, 100%);
    flex-basis: auto;
  }
}

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

  .flipCard__inner {
    min-height: 420px;
  }

  .flipCard__imgWide {
    max-width: 360px;
  }

  .refs__inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .refs__title {
    font-size: 32px;
  }

  .refs__art img {
    max-width: 320px;
  }

  .farosHead {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .farosHead__title {
    font-size: 36px;
  }

  .farosHead__highlight {
    font-size: 18px;
  }

  .farosSection__inner {
    grid-template-columns: 1fr;
  }

  .vslider__viewport {
    max-width: 620px;
  }
}

@media (max-width: 600px) {
  .vslider {
    max-width: 100%;
    height: 360px;
  }

  .vslider__slide {
    height: 360px;
  }
}

@media (max-width: 420px) {
  .vslider {
    height: 320px;
  }

  .vslider__slide {
    height: 320px;
  }

  .vslider__nav {
    width: 40px;
    height: 40px;
    background-size: 16px 16px;
  }
}

@media (max-width: 920px) {
  .letters__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .letters__right {
    max-width: none;
  }

  .letters__bottom {
    min-height: 420px;
  }

  .letters__art {
    width: min(860px, 100%);
  }

  .letters__cta {
    right: 0;
    left: 0;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    bottom: 36px;
  }
}