/* ============================================================
   DIOS CUENTA CONTIGO — Día de la Iglesia Diocesana
   Medidas y tipos leídos del Figma (frame DESKTOP_1, 1728px).
   Cada tamaño va en vw sobre esa referencia: 1728px = 100vw,
   así que 72px de Figma = 4.17vw.
   ============================================================ */

@font-face {
  font-family: "HWT Artz";
  src: url("../fonts/hwt-artz.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow SC";
  src: url("../fonts/BarlowSemiCondensed-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow SC";
  src: url("../fonts/Barlow-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow SC";
  src: url("../fonts/Barlow-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --blue: #2075c0;
  --blue-deep: #073da1;
  --blue-light: #79c1d9;
  --cyan: #5ec2db;
  --soft: #eceff4;
  --red: #d52e52;
  --field: #edf0f3;
  --ink: #272727;
  --white: #fff;

  /* el Figma usa las dos: Barlow para los textos de ancho normal y
     Barlow Semi Condensed para los condensados */
  --font-display: "HWT Artz", "Barlow SC", system-ui, sans-serif;
  --font-body: "Barlow", "Barlow SC", system-ui, -apple-system, sans-serif;
  --font-cond: "Barlow Semi Condensed", "Barlow SC", system-ui, sans-serif;

  /* retícula: 154px de margen; los bloques estrechos, 1132px entre 298px */
  --gutter: clamp(20px, 8.91vw, 154px);
  --gutter-narrow: clamp(20px, 17.25vw, 298px);
  --wrap-narrow: 1132px;

  /* tipos (px del Figma -> vw sobre 1728) */
  --fs-h1: clamp(46px, 7.01vw, 121px);          /* 121,17 */
  --fs-h2: clamp(34px, 4.17vw, 72px);           /* 72     */
  --fs-pilar: clamp(26px, 4.05vw, 70px);        /* 115,93 del Figma, bajado */
  --fs-juntos: clamp(30px, 3.7vw, 64px);        /* 64     */
  --fs-eyebrow: clamp(18px, 1.16vw, 20px);      /* 20; 18 en el Figma móvil */
  --fs-eyebrow-hero: clamp(21px, 1.85vw, 32px); /* 32     */
  --fs-hero-text: clamp(18px, 1.5vw, 26px);     /* 26     */
  --fs-body: 18px;                              /* fijo a 18px */
  --fs-figure: clamp(26px, 2.31vw, 40px);       /* 40     */
  --fs-num: clamp(17px, 1.39vw, 24px);          /* 24     */
  --fs-small: clamp(14px, 1.04vw, 18px);        /* 18     */
  --fs-pilar-text: clamp(17px, 1.39vw, 24px);   /* 24     */

  /* Slider: la proporción es la del Figma (561/706) y el ancho manda.
     Bajando el ancho baja la altura en la misma proporción y asoma
     más la tercera card. */
  --card-ratio: 561 / 706;
  --card-w: clamp(220px, 29vw, 501px);

  --ease: cubic-bezier(0.33, 1, 0.68, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.2;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ancho de los bloques estrechos (1132px del Figma) */
.narrow {
  width: min(100% - 2 * var(--gutter-narrow), var(--wrap-narrow));
  margin-inline: auto;
}

/* ---------------- Tipos compartidos ---------------- */

.h-display {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 0.85;
  text-transform: uppercase;
  color: var(--ink);
}
.h-display--light { color: var(--white); }
.h-display--center { text-align: center; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  line-height: 0.85;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow--light { color: var(--blue-light); }

.is-blue { color: var(--blue); }
.is-blue-light { color: var(--blue-light); }

/* flechas redondas: el SVG trae el círculo y la flecha mirando abajo */
.nav-btn {
  display: block;
  line-height: 0;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-btn img {
  width: clamp(46px, 4.09vw, 71px);
  height: clamp(46px, 4.09vw, 71px);   /* el SVG va con preserveAspectRatio="none" */
}
.nav-btn--prev img { transform: rotate(90deg); }
.nav-btn--next img { transform: rotate(-90deg); }
.nav-btn:hover:not(:disabled) { transform: translateY(-2px); }
.nav-btn:disabled { opacity: 0.35; cursor: default; }

/* ---------------- Cabecera ---------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  padding-block: clamp(14px, 1.47vw, 25px);
  transition: background 0.3s var(--ease), padding 0.3s var(--ease);
}
.site-header.is-stuck,
.site-header.has-nav { background: var(--blue); }
.site-header.is-stuck { padding-block: clamp(12px, 12px, 16.5px); }
.site-header.is-stuck .brand__xtantos { width: clamp(66px, 6.2vw, 107px); }
.site-header.is-stuck .brand__cee { width: clamp(63px, 5.9vw, 102px); }
.site-header.is-stuck .brand__sep { height: clamp(30px, 2.49vw, 43px); }

.site-header__inner {
  width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: clamp(14px, 1.85vw, 32px); }
.brand__xtantos { width: clamp(96px, 7.99vw, 138px); height: auto; }
.brand__cee { width: clamp(92px, 7.59vw, 131px); height: auto; }
.brand__sep { width: 1px; height: clamp(38px, 4.29vw, 74px); background: rgba(255,255,255,0.5); }
.brand__xtantos, .brand__cee, .brand__sep { transition: width 0.3s var(--ease), height 0.3s var(--ease); }

.menu-toggle { display: flex; align-items: center; gap: clamp(10px, 0.93vw, 16px); color: var(--white); }
.menu-toggle__label {
  font-family: var(--font-display);
  font-size: 20px;                              /* 41x20 en escritorio y en móvil */
  text-transform: uppercase;
}
.menu-toggle__bars { display: grid; gap: 7px; width: clamp(44px, 3.01vw, 52px); }
.menu-toggle__bars i {
  display: block; height: 2px; background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child { transform: translateY(9px) rotate(14deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child { transform: translateY(-9px) rotate(-14deg); }

.main-nav { margin-top: clamp(22px, 2.66vw, 46px); border-top: 1px solid rgba(255,255,255,0.5); }
.site-header.has-nav { padding-bottom: 0; }
/* Con la cabecera encogida el aire de arriba baja a 12px, así que el hueco
   hasta la línea del menú baja en la misma proporción; si no, queda 12
   arriba y 38 abajo y se ve descompensado. */
.site-header.is-stuck .main-nav { margin-top: clamp(14px, 1.5vw, 26px); }
.main-nav__list {
  width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3.24vw, 56px);
  padding-block: clamp(24px, 2.72vw, 47px) clamp(24px, 2.49vw, 43px);
  color: var(--white);
  font-size: var(--fs-body);
}
.main-nav a { padding-block: 4px; border-bottom: 1px solid transparent; }
.main-nav a:hover { border-bottom-color: currentColor; }

/* ---------------- Hero sticky ----------------
   El bloque de texto arranca al 26% del alto y el botón de play
   tiene su centro al 66,3% / 48,2%, como en el Figma. */

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0a0d14;
}
.hero__media, .hero__scrim { position: absolute; inset: 0; }
.hero__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  background: #0a0d14;
}
/* El degradado lateral es el del Figma; el velo plano de 40% es el .overlay
   de did25, necesario para leer el texto sobre un vídeo que cambia de plano. */
.hero__scrim {
  background:
    linear-gradient(90deg, rgba(8,10,14,0.6) 0%, rgba(8,10,14,0.3) 38%, rgba(8,10,14,0.06) 66%, rgba(8,10,14,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 22%),
    rgba(0, 0, 0, 0.4);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
  color: var(--white);
}
.hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow-hero);
  line-height: 1;
  text-transform: uppercase;
  color: var(--cyan);
}
.hero__title {
  margin-top: clamp(10px, 1.39vw, 24px);
  max-width: clamp(260px, 34.43vw, 595px);   /* caja de 595 en el Figma */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 0 2px 26px rgba(0,0,0,0.3);
}
.hero__text {
  margin-top: clamp(16px, 1.39vw, 24px);
  max-width: clamp(300px, 27.37vw, 473px);
  font-size: var(--fs-hero-text);
  line-height: 1.1;
}

.play {
  position: absolute;
  z-index: 3;
  left: 66.35%;
  top: 48.2%;
  translate: -50% -50%;
  line-height: 0;
  transition: transform 0.3s var(--ease);
}
.play img { width: clamp(64px, 6.65vw, 115px); height: auto; }
.play:hover { transform: scale(1.06); }

/* ---------------- Capa que tapa el hero ---------------- */

.over { position: relative; z-index: 1; background: var(--white); }

/* ---------------- Actividad en las diócesis ----------------
   Columna de texto desde el gutter y foto desde el 50% al borde,
   con 10px de aire arriba, abajo y a la derecha (como el Figma). */

.diocesis {
  position: relative;
  background: var(--blue);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-block: clamp(48px, 5.5vw, 95px);
}
.diocesis__copy {
  padding-left: var(--gutter);
  padding-right: clamp(16px, 2.6vw, 45px);
  color: var(--white);
}
.diocesis__copy .h-display {
  margin-top: clamp(10px, 1.1vw, 19px);
  max-width: clamp(280px, 31.13vw, 538px);   /* caja de 538 */
}
.diocesis__text {
  margin-top: clamp(18px, 2.3vw, 40px);
  max-width: clamp(280px, 30.38vw, 525px);
  font-size: var(--fs-body);
  line-height: 1.3;
}

.diocesis__media {
  position: relative;
  align-self: stretch;
  margin: calc(clamp(48px, 5.5vw, 95px) * -1 + 10px) 10px calc(clamp(48px, 5.5vw, 95px) * -1 + 10px) 0;
  border-radius: clamp(10px, 1.16vw, 20px);
  overflow: hidden;
}
/* las fotos van apiladas desde el CSS (sin esperar al JS) y la activa
   entra con un fundido; hasta que el JS arranca se ve la primera */
.diocesis__slides { position: absolute; inset: 0; }
.diocesis__slides li { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease); }
.diocesis__slides li:first-child { opacity: 1; }
.is-pase .diocesis__slides li:first-child { opacity: 0; }
.is-pase .diocesis__slides li.is-on { opacity: 1; }
.diocesis__slides img { width: 100%; height: 100%; object-fit: cover; }
.barras li { transition: background 0.4s var(--ease); }

/* las 4 barras del pase */
.barras {
  position: absolute;
  z-index: 2;
  top: clamp(10px, 0.93vw, 16px);
  left: 50%;
  translate: -50% 0;
  display: flex;
  gap: clamp(3px, 0.29vw, 5px);
}
.barras li {
  width: clamp(40px, 4.63vw, 80px);
  height: clamp(5px, 0.46vw, 8px);
  border-radius: 500px;
  background: rgba(255, 255, 255, 0.6);
}
.barras .is-on { background: var(--blue-deep); }

/* buscador: marco blanco de 435x105 con el campo gris dentro */
.buscador {
  margin-top: clamp(22px, 3.65vw, 63px);
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.75vw, 13px);
  width: min(100%, 435px);
  padding: clamp(7px, 0.75vw, 13px);
  border-radius: clamp(12px, 1.16vw, 20px);
  background: var(--white);
}
.buscador__input {
  flex: 1 1 auto;
  min-width: 0;
  height: clamp(48px, 4.57vw, 79px);
  padding: 0 clamp(14px, 1.1vw, 19px);
  border: 0;
  border-radius: 500px;
  background: var(--field);
  font-family: var(--font-cond);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
}
.buscador__input::placeholder { color: #000; opacity: 1; }
.buscador__btn { flex: 0 0 auto; line-height: 0; transition: transform 0.25s var(--ease); }
.buscador__btn img { width: clamp(44px, 4.11vw, 71px); height: auto; }
.buscador__btn:hover { transform: scale(1.05); }

/* desplegable de diócesis */
.buscador { position: relative; }
.buscador__popover {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: none;
  max-height: clamp(220px, 26vw, 340px);
  overflow-y: auto;
  padding: clamp(6px, 0.5vw, 9px);
  border-radius: clamp(12px, 1.16vw, 20px);
  background: var(--white);
  box-shadow: 0 18px 44px rgba(7, 61, 161, 0.22);
  text-align: left;
}
.buscador__popover.is-open { display: block; }
.buscador__diocesis {
  padding: clamp(9px, 0.75vw, 13px) clamp(12px, 1.1vw, 19px);
  border-radius: clamp(8px, 0.58vw, 10px);
  font-family: var(--font-cond);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.buscador__diocesis:hover,
.buscador__diocesis:focus-visible { background: var(--blue); color: var(--white); }
.buscador__diocesis.is-pendiente { color: #8a8f99; cursor: default; }
.buscador__diocesis.is-pendiente:hover { background: none; color: #8a8f99; }
.buscador__vacio {
  padding: clamp(9px, 0.75vw, 13px) clamp(12px, 1.1vw, 19px);
  font-family: var(--font-cond);
  font-size: var(--fs-small);
  color: #6b7280;
}

/* ---------------- Visor de la revista y selector de idioma ---------------- */

.modal, .modal-bi {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s linear;
}
.modal[hidden], .modal-bi[hidden] { display: none; }
.modal.is-open, .modal-bi.is-open { opacity: 1; pointer-events: all; }

.modal__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); }

.modal__content, .modal-bi__content {
  position: relative;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-50px);
  transition: all 0.3s ease-out;
}
.modal__content.is-shown, .modal-bi__content.is-shown { opacity: 1; transform: translateY(0); }

/* Dos formatos, como el iframe--3-4 / iframe--16-9 de la referencia.
   La revista va a 67,5vh x 90vh (3/4 mandando la altura) y el vídeo a 16/9;
   en los dos casos hay tope para que no se salgan de la ventana. */
.modal__content.is-3-4 {
  aspect-ratio: 3 / 4;
  height: min(90vh, 92vw * 4 / 3);
  width: auto;
}
.modal__content.is-16-9 {
  aspect-ratio: 16 / 9;
  width: min(92vw, 90vh * 16 / 9);
  height: auto;
}
#visor { width: 100%; height: 100%; border: 0; }

.modal__close {
  position: fixed;
  top: 1rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: calc(32px + 2vw);
  height: calc(32px + 2vw);
  min-width: 4.675rem;
  border-radius: 50%;
  line-height: 0;
  transition: transform 0.25s var(--ease);
}
.modal__close svg { width: 100%; height: 100%; }
.modal__close:hover { transform: scale(1.08); }

.modal-bi__content {
  width: min(92vw, 520px);
  padding: clamp(28px, 2.6vw, 45px);
  border-radius: clamp(16px, 2.31vw, 40px);
  background: var(--white);
  text-align: center;
}
.modal-bi__content h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 1.97vw, 34px);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--ink);
}
.modal-bi__botones {
  margin-top: clamp(18px, 1.74vw, 30px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 0.7vw, 12px);
}

/* ---------------- Labor de la Iglesia: slider ----------------
   Mismo carrusel que la landing de HERENCIA: scroll nativo con snap,
   flechas, y GSAP encogiendo la card y ampliando la foto al pasar. */

.labor {
  background: var(--white);
  padding-block: clamp(56px, 6.94vw, 120px) clamp(56px, 6.94vw, 120px);
}
.labor .h-display {
  margin-top: clamp(10px, 1.1vw, 19px);
  max-width: clamp(200px, 17.94vw, 310px);   /* caja de 310: parte en dos lineas */
}

.link-arrow {
  margin-top: clamp(20px, 1.74vw, 30px);
  display: inline-flex;
  align-items: center;
  gap: clamp(9px, 0.75vw, 13px);
  font-family: var(--font-cond);
  font-size: var(--fs-body);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.link-arrow__ico {
  flex: 0 0 auto;
  width: clamp(38px, 2.78vw, 48px);
  height: auto;
  transition: transform 0.25s var(--ease);
}
.link-arrow__strong { color: var(--blue); font-weight: 500; }
.link-arrow:hover .link-arrow__ico { transform: translate(2px, -2px); }
.link-arrow:hover .link-arrow__strong { text-decoration: underline; }

.carousel {
  --card-gap: clamp(8px, 0.87vw, 15px);
  margin-top: clamp(28px, 3.65vw, 63px);
}
/* la primera card arranca donde el titular: en pantallas de más de 1728px
   el bloque estrecho se centra y el margen crece más allá de los 298px */
.carousel {
  --track-pad: max(var(--gutter-narrow), (100% - var(--wrap-narrow)) / 2);
}
.carousel__track {
  display: flex;
  gap: var(--card-gap);
  padding-inline: var(--track-pad);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* sin esto el snap lleva la primera card al borde y se come el margen */
  scroll-padding-inline: var(--track-pad);
  scrollbar-width: none;
  padding-bottom: 1px;
}
.carousel__track::-webkit-scrollbar { display: none; }

.card {
  position: relative;
  flex: 0 0 var(--card-w);
  aspect-ratio: var(--card-ratio);
  scroll-snap-align: start;
}
.card__inner {
  position: absolute;
  inset: 0;
  border-radius: clamp(10px, 1.16vw, 20px);
  overflow: hidden;
  background: #16283a;
}
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.card__panel {
  position: absolute;
  z-index: 2;
  left: clamp(6px, 0.69vw, 12px);
  right: clamp(6px, 0.69vw, 12px);
  bottom: clamp(6px, 0.69vw, 12px);
  min-height: clamp(84px, 8.56vw, 148px);  /* 148px del Figma */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(10px, 1.16vw, 20px);
  padding: clamp(10px, 0.98vw, 17px) clamp(12px, 1.79vw, 31px) clamp(10px, 0.98vw, 17px) clamp(10px, 0.98vw, 17px);
  border-radius: clamp(8px, 0.81vw, 14px);
  background: var(--blue-deep);
  color: var(--white);
}
.card__num {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  opacity: 0.4;
}
/* texto de 336 en un panel de 485 (437 sin los rellenos): arranca en x=118 */
.card__text {
  flex: 0 1 76.9%;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
}
.card__text strong { font-weight: 700; color: var(--cyan); }

.carousel__nav {
  display: flex;
  gap: clamp(8px, 0.96vw, 17px);
  margin-top: clamp(12px, 0.93vw, 16px);
}

/* ---------------- Los 4 pilares ---------------- */

.pilares {
  background: var(--soft);
  padding-block: clamp(56px, 6.42vw, 111px) clamp(56px, 6.42vw, 111px);
}
.pilares__head { text-align: center; }
.pilares__head .h-display {
  margin-top: clamp(6px, 0.58vw, 10px);
  margin-inline: auto;
  max-width: clamp(280px, 31.13vw, 538px);   /* caja de 538: parte en dos lineas */
}
.pilares__lead {
  margin: clamp(14px, 1.04vw, 18px) auto 0;
  font-family: var(--font-cond);
  font-size: var(--fs-body);
  line-height: 1.3;
}

/* ---------------- Los 4 pilares: slider ----------------
   Los slides no se desplazan: están apilados en el mismo hueco y el que
   entra se descubre con una máscara (clip-path) por encima del saliente.
   La foto se asienta desde un zoom leve, el panel entra un pelín después
   que la foto, y el titular y el texto suben escalonados. */

.slider { margin-top: clamp(32px, 5.56vw, 96px); }

.slider__viewport {
  position: relative;
  width: min(100% - 2 * var(--gutter-narrow), 990px);
  margin-inline: auto;
  aspect-ratio: 1132 / 695;
  overflow: hidden;
  border-radius: clamp(12px, 1.16vw, 20px);
  background: var(--blue-deep);
}
.slider__track { display: contents; }

.pilar {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Solo barre la foto. El panel no lleva máscara: es un bloque azul igual en
   todos los slides, así que basta con que el activo quede por encima; lo que
   se anima ahí es el texto, no el fondo.
   --oculto lo fija el JS según la dirección. */
.pilar__media { clip-path: var(--oculto, inset(0 0 0 100%)); }

.pilar.is-saliendo { z-index: 1; }
.pilar.is-saliendo .pilar__media { clip-path: inset(0); }

.pilar.is-activo { z-index: 2; }
.pilar.is-activo .pilar__media { clip-path: inset(0); }

.pilar__media { background: #d7dce8; overflow: hidden; }

.pilar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 1.1s var(--ease);
}
.pilar.is-activo .pilar__media img { transform: scale(1); }

/* titular y texto juntos y centrados en vertical, no uno arriba y otro
   abajo (lo pidió el cliente) */
.pilar__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 1.62vw, 28px);
  padding: clamp(20px, 1.68vw, 29px) clamp(20px, 1.85vw, 32px) clamp(20px, 2.31vw, 40px);
  background: var(--blue-deep);
  color: var(--white);
}

.pilar__title, .pilar__text {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s var(--ease), transform 0.7s var(--ease);
}
.pilar.is-activo .pilar__title { opacity: 1; transform: none; transition-delay: 0.2s; }
.pilar.is-activo .pilar__text { opacity: 1; transform: none; transition-delay: 0.32s; }

.pilar__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-pilar);
  line-height: 0.9;
  text-transform: uppercase;
}
/* el resaltado siempre en su propia línea, como en el Figma */
.pilar__title span { display: block; }
.pilar__text {
  max-width: 432px;
  font-family: var(--font-cond);
  font-size: var(--fs-pilar-text);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.slider__nav {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 0.84vw, 15px);
  margin-top: clamp(12px, 0.98vw, 17px);
}

/* ---------------- Juntos llegamos más lejos ----------------
   Caja blanca de 1132x408 partida por una línea vertical. */

.juntos { margin-top: clamp(40px, 7.7vw, 133px); }
.juntos__box {
  width: min(100% - 2 * var(--gutter-narrow), var(--wrap-narrow));
  margin-inline: auto;
  min-height: clamp(280px, 23.61vw, 408px);
  display: grid;
  grid-template-columns: 523fr 609fr;        /* la linea cae en x=821 de 1132 */
  align-items: center;
  border-radius: clamp(16px, 2.31vw, 40px);
  background: var(--white);
}
.juntos__claim {
  grid-column: 1;
  min-width: 0;
  padding: clamp(24px, 2.31vw, 40px);
  text-align: center;
  border-right: 1px solid #d9dde4;
}
.juntos__tag {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  line-height: 0.85;
  text-transform: uppercase;
  color: var(--blue);
}
.juntos__title {
  margin-top: clamp(10px, 1.45vw, 25px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-juntos);
  line-height: 0.9;
  text-transform: uppercase;
  overflow-wrap: break-word;
  color: #000;
}

.juntos__acciones {
  grid-column: 2;
  min-width: 0;
  padding: clamp(16px, 1.85vw, 32px) clamp(16px, 2.9vw, 50px);
  text-align: center;
}
.juntos__text {
  margin-inline: auto;
  max-width: clamp(260px, 23.84vw, 412px);
  font-size: var(--fs-body);
  line-height: 1.2;
  color: #000;
}
.juntos__btns {
  margin-top: clamp(16px, 1.79vw, 31px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(4px, 0.35vw, 6px);
}
.btn-dir {
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, 0.4vw, 7px);
  height: clamp(48px, 3.53vw, 61px);
  white-space: nowrap;
  padding-inline: clamp(14px, 1.22vw, 21px);
  border-radius: clamp(8px, 0.58vw, 10px);
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-cond);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.1;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn-dir img { width: clamp(26px, 1.97vw, 34px); height: auto; transform: rotate(-90deg); }
.btn-dir:hover { background: var(--blue-deep); transform: translateY(-2px); }

/* botón de 258x52 en rojo, debajo de los directorios */
.btn-dono {
  display: inline-grid;
  place-items: center;
  width: min(100%, clamp(220px, 14.93vw, 258px));
  height: clamp(46px, 3.01vw, 52px);
  margin-top: clamp(14px, 1.5vw, 26px);
  border-radius: 500px;
  background: var(--red);
  color: var(--white);
  font-size: clamp(17px, 1.16vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn-dono:hover { background: #b9213f; transform: translateY(-2px); }

/* ---------------- Footer ---------------- */

.site-footer {
  background: var(--blue);
  color: var(--white);
  padding-block: clamp(48px, 5.79vw, 100px) clamp(42px, 4.86vw, 84px);
  text-align: center;
}
.site-footer__inner {
  width: min(100% - 2 * var(--gutter), 1273px);
  margin-inline: auto;
}
.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(32px, 4.63vw, 80px);
  padding-bottom: clamp(32px, 3.24vw, 56px);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  text-align: left;
}

.newsletter { max-width: 483px; }
.newsletter__title { font-size: 18px; font-weight: 400; line-height: 1.22; }
.newsletter__row { display: flex; margin-top: 8px; }
.newsletter__email {
  width: 300px; max-width: 100%; min-width: 0; height: 56px; padding: 0 19px;
  border: 0; border-radius: 4px;
  font-family: var(--font-body); font-size: 18px;
  color: var(--ink); background: var(--white);
}
.newsletter__email::placeholder { color: var(--ink); opacity: 0.6; font-size: 18px; }
.newsletter__submit {
  flex: 0 0 auto; height: 56px; padding: 0 38px;
  border-radius: 4px; background: var(--blue-light); color: var(--ink);
  font-family: var(--font-body); font-size: 18px; font-weight: 700;
  transform: translateX(-6px);
  transition: background 0.25s var(--ease);
}
.newsletter__submit:hover { background: #8fcfe3; }
.newsletter__trap { position: absolute; left: -5000px; }

.share { text-align: center; }
.share__title { font-size: var(--fs-body); line-height: 1.22; }
.share__list {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 1.16vw, 20px); margin-top: clamp(14px, 1.16vw, 20px);
}
.share__ico { display: block; transition: transform 0.5s var(--ease); }
.share__ico img { width: auto; height: clamp(28px, 2.31vw, 40px); }
.share__ico:hover { transform: scale(1.12); }
.share__cta {
  display: inline-block;
  margin-top: clamp(16px, 1.39vw, 24px);
  padding: clamp(11px, 0.81vw, 14px) clamp(24px, 2.2vw, 38px);
  border-radius: 50px;
  background: var(--blue-light);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.share__cta:hover { background: #8fcfe3; transform: translateY(-2px); }

.site-footer__bottom { padding-top: clamp(36px, 4.05vw, 70px); text-align: center; }
.site-footer .site-footer__legal {
  margin-top: clamp(20px, 1.85vw, 32px);
  font-size: var(--fs-small);
  line-height: 1.12;
  color: rgba(255,255,255,0.75);
}
.site-footer__rrss {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px;
}
.rrss__ico {
  display: grid; place-items: center;
  width: clamp(40px, 3.06vw, 53px);
  aspect-ratio: 1; border-radius: 50%;
  background: #1a1a1a;
}
.rrss__ico img { width: auto; height: clamp(15px, 1.27vw, 22px); transition: transform 0.5s var(--ease); }
.rrss__ico:hover img { transform: scale(1.2); }

/* ---------------- Responsive ---------------- */

@media (max-width: 1024px) {
  .diocesis { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); }
  .diocesis__copy { padding-inline: var(--gutter); }
  .diocesis__copy .h-display, .diocesis__text { max-width: none; }
  .diocesis__media {
    margin: 0 var(--gutter);
    aspect-ratio: 16 / 11;
  }

  .slider__viewport { aspect-ratio: 4 / 5; }
  .pilar { grid-template-columns: 1fr; grid-template-rows: 1fr 1.3fr; }

  .juntos__box { grid-template-columns: 1fr; }
  .juntos__claim {
    grid-column: 1;
    margin-inline: clamp(10px, 2.8vw, 40px);
    border-right: 0;
    border-bottom: 1px solid #d9dde4;
  }
  .juntos__acciones { grid-column: 1; }
  /* en una columna los botones van al tamaño del Figma: 257x61 con texto
     de 18px, y donoamiiglesia.es a 20px */
  .btn-dir { height: 61px; font-size: 18px; }
  .btn-dir img { width: 34px; }
  .btn-dono { height: 52px; font-size: 20px; }

  .site-footer__top { flex-direction: column; align-items: center; text-align: center; }
  .newsletter { max-width: 100%; width: 100%; }
  .newsletter__row { justify-content: center; }
}

/* ---------------- Móvil: medidas del frame MOBILE del Figma (360px) ----------------
   Los valores van en px tal cual los marca el Figma: con 360px de referencia
   no hace falta escalar. Fuentes: cada titular de sección parte en líneas
   de 41px (48px de cuerpo a 0,85), el hero a 64px, los cuerpos a 18px. */

@media (max-width: 700px) {
  :root {
    --gutter: max(14px, 3.89vw);             /* 14px sobre 360 */
    --gutter-narrow: var(--gutter);
    --fs-h2: 48px;
    --fs-juntos: 48px;
    --fs-pilar: 40px;        /* 48 en el Figma, bajado a petición del cliente */
  }

  /* cabecera: logos de 89 y 78px; con los de escritorio el de la CEE se
     montaba sobre el "Menú" */
  .brand { gap: 12px; }
  .brand__xtantos, .site-header.is-stuck .brand__xtantos { width: 89px; }
  .brand__cee, .site-header.is-stuck .brand__cee { width: 78px; }
  .brand__sep { height: 55px; }
  .site-header.is-stuck .brand__sep { height: 40px; }

  /* hero centrado, con el play de 100px debajo del texto */
  .hero { flex-direction: column; justify-content: center; }
  .hero__media { object-position: 50% 28%; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(8,10,14,0.5) 0%, rgba(8,10,14,0.2) 40%),
      rgba(8,10,14,0.45);
  }
  .hero__inner { text-align: center; }
  .hero__eyebrow { font-size: 18px; }
  .hero__title { margin-top: 16px; max-width: none; font-size: 64px; }
  .hero__text { margin-top: 6px; max-width: 322px; margin-inline: auto; font-size: 18px; }
  .play { position: relative; left: auto; top: auto; translate: 0 0; margin-top: 18px; }
  .play img { width: 100px; }

  /* actividad en las diócesis: 50px arriba, 14 abajo, foto de 332x378 */
  .diocesis { gap: 50px; padding-block: 50px 14px; }
  .diocesis__copy .h-display { margin-top: 10px; }
  /* 13 líneas de 24px en 312 de alto: condensada a 19px */
  .diocesis__text { margin-top: 31px; font-family: var(--font-cond); font-size: 19px; line-height: 1.26; }
  .buscador { margin-top: 43px; padding: 10px 12px; gap: 10px; }
  .buscador__input { height: 60px; font-size: 14px; }
  .buscador__btn img { width: 54px; }
  .diocesis__media { aspect-ratio: 332 / 378; }
  .barras { top: 8px; gap: 4px; }
  .barras li { width: 55px; height: 4px; }

  /* labor de la Iglesia: 76px de aire y una card a todo el ancho */
  .labor { padding-block: 76px; }
  .labor .h-display { margin-top: 16px; max-width: 215px; }   /* "LABOR DE / LA IGLESIA" */
  .link-arrow { margin-top: 23px; gap: 7px; font-size: 16px; }
  .link-arrow__ico { width: 39px; }
  .carousel { margin-top: 53px; }
  .card { flex-basis: calc(100vw - 2 * var(--gutter)); aspect-ratio: 332 / 418; }
  /* el Figma marca 8/9/10px de relleno; el cliente pidió más aire */
  .card__panel { left: 6px; right: 6px; bottom: 6px; min-height: 98px; padding: 14px 16px 16px 14px; }
  .card__num, .card__text { font-size: 16px; }
  .card__text { flex-basis: 88%; }
  .carousel__nav { justify-content: center; gap: 17px; margin-top: 14px; }

  /* flechas de 70px en los dos sliders */
  .nav-btn img { width: 70px; height: 70px; }

  /* los 4 pilares: foto arriba (332x256) y panel debajo con el alto que pida
     el texto. Los slides se apilan en la misma celda de rejilla, así el alto
     lo marca el más largo y ninguno se corta. */
  .pilares { padding-block: 61px 67px; }
  /* la caja del titular mide 340 en el Figma, 4px más que el margen */
  .pilares__head .h-display { max-width: none; margin-inline: -4px; }
  .pilares__lead br { display: none; }
  .slider { margin-top: 60px; }
  .slider__viewport { aspect-ratio: auto; }
  .slider__track { display: grid; }
  .pilar {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .pilar__media { aspect-ratio: 332 / 256; }
  .pilar__panel { justify-content: flex-start; gap: 9px; padding: 24px 12px 42px; }
  .pilar__title span { display: inline; }
  .pilar__text { font-size: 18px; }
  .pilar__text br { display: none; }
  .slider__nav { gap: 14px; margin-top: 9px; }

  /* juntos: caja de 332x601 con 10px de aire a los lados */
  .juntos { margin-top: 76px; }
  /* el titular ocupa 311 de los 332: la línea va a 10px y el texto al borde */
  .juntos__claim { margin-inline: 10px; padding: 47px 0 40px; }
  .juntos__title span { display: block; }
  .juntos__acciones { padding: 34px 10px 62px; }
  .juntos__btns { margin-top: 24px; flex-direction: column; align-items: center; gap: 6px; }
  .btn-dir { width: min(100%, 258px); justify-content: center; }
  .btn-dono { margin-top: 15px; }

  /* footer */
  .site-footer { padding-block: 68px 89px; }
  .site-footer__top { gap: 64px; padding-bottom: 64px; }
  .newsletter__row { margin-top: 10px; }
  .newsletter__email { flex: 1 1 auto; width: auto; height: 62px; }
  .newsletter__submit { height: 62px; padding: 0 31px; }
  .share__title { white-space: nowrap; font-size: clamp(15px, 5vw, 18px); }
  .share__list { margin-top: 15px; gap: 21px; }
  .share__ico img { height: 35px; }
  .share__cta {
    display: inline-grid; place-items: center;
    width: 227px; max-width: 100%; height: 54px; padding: 0;
    margin-top: 25px; font-size: 16px;
  }
  .site-footer__bottom { padding-top: 57px; }
  .site-footer__rrss { gap: 3px; }           /* 6 x 52 + 5 x 3 = 327, cabe en los 332 */
  .rrss__ico { width: 52px; }
  .site-footer .site-footer__legal { margin-top: 32px; font-size: 18px; }
}

/* ---------------- Sin animación ---------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { position: relative; }
  .pilar__media { clip-path: none; transition: none; }
  .pilar:not(.is-activo) { visibility: hidden; }
  .pilar.is-activo { visibility: visible; }
  .pilar__media img { transform: none; transition: none; }
  .pilar__title, .pilar__text { opacity: 1; transform: none; transition: none; }
  .site-header, .brand__xtantos, .brand__cee, .brand__sep,
  .share__ico, .share__cta, .newsletter__submit, .btn-dir,
  .nav-btn, .play, .buscador__btn, .link-arrow__ico, .btn-dono,
  .rrss__ico img { transition: none; }
}