/* =========================================================================
   Sitio público — Franciscanos Capuchinos del Norte de México

   La paleta NO se define aquí: el layout la imprime como variables CSS en
   :root a partir de los tres colores del panel (Configuración → Identidad y
   colores). Este archivo sólo las consume.

   Sobre los dos naranjas:
     --naranja       color de marca. Adornos: puntos, líneas, trazos de icono,
                     bordes. No lleva texto encima.
     --naranja-ink   el mismo, oscurecido. Es el que se usa cuando hay que LEER
                     algo: antetítulos sobre fondo claro y botones con texto
                     blanco. El naranja de marca a ese tamaño no alcanza el
                     contraste mínimo y se vuelve ilegible a plena luz.
   ========================================================================= */

:root {
  --display: "Fraunces", Georgia, serif;
  --body: "Spectral", Georgia, serif;
  --script: "Tangerine", "Brush Script MT", cursive;
  --line: rgba(var(--cafe-rgb), .16);
  --shadow: 0 18px 50px -22px rgba(var(--cafe-rgb), .5);
  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; scroll-padding-top: 90px }

body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--cafe);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--cafe);
}

.eyebrow, .kicker {
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--naranja-ink);
  display: inline-block;
}

.script { font-family: var(--script); font-weight: 700; line-height: .9 }

/* Enlace para saltar el menú: sólo aparece al tabular. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cafe); color: #fff; padding: .8em 1.2em;
}
.skip-link:focus { left: 0 }

:focus-visible { outline: 2px solid var(--naranja-ink); outline-offset: 3px; border-radius: 2px }

/* ---------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--body); font-size: .96rem; font-weight: 600; letter-spacing: .02em;
  padding: .82em 1.5em; border-radius: 2px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .25s, color .25s, border-color .25s;
}
.btn .arr { transition: transform .25s }
.btn:hover .arr { transform: translateX(4px) }

.btn-orange { background: var(--naranja-ink); color: #fff }
.btn-orange:hover { background: var(--naranja-ink-hover) }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5) }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12) }
.btn-cafe { background: var(--cafe); color: #fff }
.btn-cafe:hover { background: var(--cafe-deep) }
.btn-wa { background: transparent; color: var(--cafe); border-color: var(--cafe) }
.btn-wa:hover { background: var(--cafe); color: #fff }

/* --------------------------------------------------------------- cabecera */
header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Sin color-mix (navegadores viejos) el fondo debe seguir siendo opaco. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  header { background: var(--cream) }
}

.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 0 }
.brand img { height: 52px; width: auto }
.brand-text { font-family: var(--display); font-size: 1.05rem; max-width: 22ch; display: block }

.menu { display: flex; align-items: center; gap: 30px; list-style: none }
.menu a { font-size: .94rem; color: var(--muted); position: relative; padding: 4px 0; transition: color .2s }
.menu a:hover, .menu a.active { color: var(--cafe) }
.menu a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--naranja);
}
.menu-cta-movil { display: none }

.nav-cta { display: flex; align-items: center; gap: 14px }

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 8px;
}
.burger span {
  width: 24px; height: 2px; background: var(--cafe); display: block;
  transition: transform .25s, opacity .25s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

/* ----------------------------------------------------------------- portada */
.hero { position: relative; background: var(--cafe-deepest); color: #fff; overflow: hidden; padding: 0 }
.hero-carousel { position: absolute; inset: 0; overflow: hidden }
.hero-track { position: absolute; inset: 0 }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease, transform 7s ease;
  transform: scale(1.06);
}
.hero-slide.active { opacity: 1; transform: scale(1) }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(102deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .66) 40%, rgba(0, 0, 0, .34) 70%, rgba(0, 0, 0, .28) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 40%);
}

.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 96px 28px 130px }
.hero .greet {
  font-family: var(--script); font-weight: 700; font-size: 2.6rem;
  color: var(--naranja-soft); line-height: .8; display: block; margin-bottom: 6px;
}
.hero h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); font-weight: 500; color: #fff; max-width: 15ch }
.hero h1 em { font-style: italic; color: var(--naranja-soft); font-weight: 400 }
.hero .lede {
  font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: #f3d8bf; margin-top: 22px; max-width: 30ch; line-height: 1.35;
}
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px }

.hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .38); color: #fff;
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding-bottom: 4px;
  transition: background .2s, border-color .2s;
}
.hero-nav:hover { background: var(--naranja-ink); border-color: var(--naranja-ink) }
.hero-nav.prev { left: 22px }
.hero-nav.next { right: 22px }

.hero-dots { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 5; display: flex; gap: 10px; justify-content: center }
.hero-dots button {
  width: 34px; height: 4px; border-radius: 2px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .4); transition: background .25s;
}
.hero-dots button.active { background: var(--naranja) }

/* Entrada suave del texto de portada. */
.fade { opacity: 0; transform: translateY(18px); animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards }
.d2 { animation-delay: .16s } .d3 { animation-delay: .28s } .d4 { animation-delay: .4s } .d5 { animation-delay: .52s }
@keyframes rise { to { opacity: 1; transform: none } }

/* --------------------------------------------------------------- secciones */
section { padding: 96px 0 }
.sec-head { text-align: center; max-width: 660px; margin: 0 auto 58px }
.sec-head h2 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 12px 0 0 }
.sec-head p { color: var(--muted); margin-top: 14px }

/* ------------------------------------------------------ nuestra presencia */
.presencia { background: var(--cream) }
.pres-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 34px; align-items: stretch }

.map-panel {
  background: var(--parchment); border: 1px solid var(--line); border-radius: 8px;
  padding: 20px; display: flex; align-items: center; justify-content: center;
}
.mx-map { width: 100%; height: auto; display: block }
.mx-map .st { fill: var(--parchment-2); stroke: var(--parchment); stroke-width: 1; transition: fill .25s }
/* Estado con casa: un tono intermedio. El color plano es el respaldo para los
   navegadores sin color-mix, que si no lo dejarían igual que los demás. */
.mx-map .st.hil { fill: var(--parchment-2) }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .mx-map .st.hil { fill: color-mix(in srgb, var(--parchment-2) 70%, var(--naranja) 30%) }
}
.mx-map .st.on { fill: var(--naranja) }

.marker { cursor: pointer }
.marker .dot { fill: var(--cafe); transition: r .2s ease }
.marker .core { fill: var(--naranja); transition: r .2s ease }
.marker .ping { fill: var(--naranja); opacity: 0; transform-box: fill-box; transform-origin: center }
.marker .lbl {
  font-family: var(--body); font-weight: 600; font-size: 15px; fill: var(--cafe);
  paint-order: stroke; stroke: var(--parchment); stroke-width: 4px; stroke-linejoin: round;
  pointer-events: none;
}
.marker:hover .dot { r: 12 }
.marker:hover .core { r: 5 }
.marker.active .dot { r: 13; fill: var(--naranja-ink) }
.marker.active .core { r: 5; fill: #fff }
.marker.active .ping { animation: ping 1.8s ease-out infinite }
@keyframes ping { 0% { transform: scale(1); opacity: .55 } 100% { transform: scale(3.4); opacity: 0 } }
.marker:focus-visible { outline: none }
.marker:focus-visible .dot { r: 13; stroke: var(--cafe); stroke-width: 2 }

/* Las fichas están todas en el HTML; sólo una se muestra a la vez. */
.conv-cards { display: grid }
.conv-card {
  grid-area: 1 / 1;
  background: var(--parchment-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 34px 30px; display: none; flex-direction: column;
}
.conv-card.active { display: flex }
.conv-card .cc-city { font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--naranja-ink); font-weight: 600 }
.conv-card h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 10px 0 0; line-height: 1.15 }
.conv-card .cc-addr { color: var(--muted); margin-top: 16px; line-height: 1.55; font-size: .98rem }
.conv-card .cc-phone { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 1.15rem; font-weight: 600 }
.conv-card .cc-phone svg { width: 18px; height: 18px; color: var(--naranja-ink); flex: 0 0 18px }
.conv-card .cc-fb { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .9rem; color: var(--muted) }
.conv-card .cc-fb svg { width: 16px; height: 16px; color: var(--cafe); flex: 0 0 16px }
.conv-card .cc-fb a { text-decoration: underline }
.conv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 26px }
.conv-actions .btn { padding: .7em 1.1em; font-size: .9rem }

.conv-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--cream); color: var(--cafe);
  padding: .6em 1.1em; border-radius: 40px; cursor: pointer;
  font-family: var(--body); font-size: .92rem; transition: background .2s, color .2s, border-color .2s;
}
.chip .pin { color: var(--naranja-ink); font-size: .7em }
.chip:hover { border-color: var(--cafe) }
.chip.active { background: var(--cafe); color: #fff; border-color: var(--cafe) }
.chip.active .pin { color: var(--naranja-soft) }

/* ----------------------------------------------------------------- misión */
.mision { background: var(--parchment) }
.pillars { display: grid; grid-template-columns: repeat(var(--columnas, 4), 1fr); border-top: 1px solid var(--line) }
.pillar { padding: 40px 28px; border-left: 1px solid var(--line) }
.pillar:first-child { border-left: 0 }
.pillar .num { font-family: var(--display); font-size: .85rem; color: var(--naranja-ink); letter-spacing: .1em }
.pillar .icon { width: 48px; height: 48px; color: var(--cafe); margin: 18px 0 16px }
.pillar h3 { font-size: 1.32rem; margin-bottom: 8px }
.pillar p { font-size: .94rem; color: var(--muted); line-height: 1.55 }

/* -------------------------------------------------------- cita del logotipo */
.conversion { background: var(--cream); text-align: center }
.conversion .wrap { max-width: 820px }
.cord { display: block; width: 100%; max-width: 340px; margin: 0 auto 36px; color: var(--naranja) }
.conversion blockquote {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.35; color: var(--cafe);
}
.conversion cite {
  display: block; margin-top: 22px; font-style: normal; font-size: .8rem;
  letter-spacing: .28em; text-transform: uppercase; color: var(--naranja-ink); font-weight: 600;
}

/* ---------------------------------------------------------------- revista */
.revista { background: var(--parchment) }
.revista-head { text-align: center; max-width: 640px; margin: 0 auto }
.revista-head h2 {
  font-family: var(--script); font-weight: 700;
  font-size: clamp(4rem, 9vw, 6rem); line-height: .8; margin: 2px 0 0;
}
.revista-head .edicion { font-weight: 600; letter-spacing: .02em; margin: 14px 0 6px }
.revista-head .revista-lede { color: var(--muted) }

.flip-stage { display: flex; align-items: center; justify-content: center; gap: 14px; perspective: 2400px; margin: 34px 0 20px }

.flipbook {
  position: relative;
  width: calc(var(--pw) * 2); height: var(--ph);
  transform-style: preserve-3d;
  transition: transform .55s ease;
  flex: 0 0 auto;
}
/* Con el libro cerrado sólo se ve una página: se recentra para que no quede de lado. */
.flipbook.at-start { transform: translateX(calc(var(--pw) / -2)) }
.flipbook.at-end { transform: translateX(calc(var(--pw) / 2)) }

.leaf {
  position: absolute; top: 0; left: 50%;
  width: var(--pw); height: var(--ph);
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.4, .15, .2, 1);
  cursor: pointer;
}
.leaf .face {
  position: absolute; inset: 0;
  backface-visibility: hidden; overflow: hidden;
  background: #fff; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
}
/* "contain" y no "cover": una página de revista recortada pierde texto. */
.leaf .face img { width: 100%; height: 100%; object-fit: contain; background: #fff }
.leaf .back { transform: rotateY(180deg) }
.leaf .back.vacia { background: var(--cafe-deep) }
.leaf.flipped { transform: rotateY(-180deg) }

.flip-spine {
  position: absolute; top: 0; left: 50%; width: 3px; height: var(--ph);
  transform: translateX(-1.5px);
  background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .04));
  z-index: 999; pointer-events: none;
}

.flip-nav {
  position: relative; z-index: 20; flex: 0 0 46px; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--cream); color: var(--cafe);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding-bottom: 3px;
  transition: background .2s, color .2s, border-color .2s;
}
.flip-nav:hover:not(:disabled) { background: var(--naranja-ink); border-color: var(--naranja-ink); color: #fff }
.flip-nav:disabled { opacity: .35; cursor: default }

.flip-bar { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 8px }
.flip-indicator { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
.flip-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center }

/* --------------------------------------------- lector de revista (página) */
.reader { background: var(--cafe-deepest); color: #fff; min-height: 72vh; padding: 0; display: flex; flex-direction: column }
.reader-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 26px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.reader-bar h1 { font-size: 1.15rem; font-weight: 500; color: #fff; margin-top: 4px }
.reader-back { font-size: .84rem; letter-spacing: .18em; text-transform: uppercase; color: var(--naranja-soft); font-weight: 600 }
.reader-back:hover { text-decoration: underline }
.reader-stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 32px 20px; perspective: 2600px }
.reader .flip-nav { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); color: #fff }
.reader .flip-indicator { color: var(--naranja-soft); text-align: center; padding-bottom: 34px }

/* -------------------------------------------------------- vida franciscana */
.vida { background: var(--cafe-deep); color: #fff }
.vida .sec-head h2 { color: #fff }
.vida .eyebrow { color: var(--naranja-soft) }
.vida .sec-head p { color: rgba(255, 255, 255, .75) }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px }
.card-foto {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 3px; overflow: hidden; display: block;
  transition: transform .35s, border-color .35s;
}
a.card-foto:hover { transform: translateY(-6px); border-color: var(--naranja) }
.card-foto .ph { aspect-ratio: 4 / 3; width: 100%; object-fit: cover }
.card-foto .ph-vacia { background: var(--cafe-deepest) }
.card-foto .cap { padding: 16px 18px 20px }
.card-foto .cap span { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--naranja-soft) }
.card-foto .cap h3 { color: #fff; font-size: 1.1rem; margin-top: 6px }

/* ------------------------------------------------ vocaciones y donativos */
.llamada { padding: 0 }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) }
.duo > div { padding: 88px 56px }
.duo .vocacion { background: var(--parchment-2) }
.duo .apoyo { background: var(--cafe); color: #fff }
.duo .ico { width: 46px; height: 46px; margin-bottom: 20px; color: var(--naranja-ink) }
.duo h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); max-width: 14ch }
.duo .apoyo h2 { color: #fff }
.duo p { margin: 16px 0 28px; max-width: 34ch }
.duo .vocacion p { color: var(--muted) }
.duo .apoyo p { color: rgba(255, 255, 255, .88) }

/* ------------------------------------------------------------ pie de página */
footer { background: var(--cafe-deepest); color: #fff; padding: 72px 0 36px }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px }
.foot-brand img { height: 84px; width: auto; margin-bottom: 16px }
.foot-brand-text { font-family: var(--display); font-size: 1.2rem; color: #fff; margin-bottom: 16px; max-width: 20ch }
.foot-brand .pyb { font-family: var(--script); font-weight: 700; font-size: 2.2rem; color: var(--naranja-soft); line-height: .8 }

.foot-title {
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--naranja-soft); margin-bottom: 18px;
  font-family: var(--body); font-weight: 600;
}
footer ul { list-style: none }
footer ul li { margin-bottom: 11px }
footer ul a, .foot-text { font-size: .94rem; color: rgba(255, 255, 255, .8) }
footer ul a { transition: color .2s }
footer ul a:hover { color: var(--naranja-soft) }
.foot-text { margin-bottom: 18px }

.contact-line { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: rgba(255, 255, 255, .8); margin-bottom: 12px }
a.contact-line:hover { color: var(--naranja-soft) }
.contact-line svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 4px; color: var(--naranja-soft) }

.socials { display: flex; gap: 12px; margin-top: 22px }
.socials a {
  width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%; display: grid; place-items: center;
  transition: background .2s, border-color .2s;
}
.socials a:hover { background: var(--naranja-ink); border-color: var(--naranja-ink) }
.socials svg { width: 16px; height: 16px }

.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 54px; padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: .82rem; color: rgba(255, 255, 255, .6);
}

/* ---------------------------------------------------------- página de error */
.pagina-error { max-width: 640px; margin: 0 auto; padding: 120px 28px; text-align: center }
.pagina-error h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 16px }
.pagina-error p { color: var(--muted); margin-bottom: 28px }

/* ============================== RESPONSIVO ============================== */
@media (max-width: 1100px) {
  .flipbook { --pw: 200px !important; --ph: 275px !important }
}

@media (max-width: 980px) {
  .pillars { grid-template-columns: repeat(2, 1fr) }
  .pillar:nth-child(odd) { border-left: 0 }
  .pillar:nth-child(n+3) { border-top: 1px solid var(--line) }
  .gallery { grid-template-columns: repeat(2, 1fr) }
  .foot-grid { grid-template-columns: 1fr 1fr }
}

@media (max-width: 900px) {
  .pres-grid { grid-template-columns: 1fr; gap: 22px }
  .marker .lbl { font-size: 20px }
  .flipbook { --pw: 180px !important; --ph: 248px !important }
}

@media (max-width: 680px) {
  /* Menú desplegable: en pantalla chica la lista se despliega bajo el logo. */
  .nav { flex-wrap: wrap }
  .burger { display: flex; order: 3 }
  .nav-donar { display: none }
  #menuPrincipal {
    order: 4; flex-basis: 100%;
    display: none; border-top: 1px solid var(--line); margin-top: 6px;
  }
  #menuPrincipal.abierto { display: block }
  .menu { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0 14px }
  .menu li { border-bottom: 1px solid var(--line) }
  .menu li:last-child { border-bottom: 0 }
  .menu a { display: block; padding: 14px 2px; font-size: 1rem }
  .menu a.active::after { display: none }
  .menu-cta-movil { display: block }
  .menu-cta-movil a { color: var(--naranja-ink); font-weight: 600 }

  .hero-inner { padding: 64px 28px 104px }
  .hero-nav { display: none }
  .pillars { grid-template-columns: 1fr }
  .pillar { border-left: 0; border-top: 1px solid var(--line) }
  .pillar:first-child { border-top: 0 }
  .gallery { grid-template-columns: 1fr }
  .duo > div { padding: 60px 32px }
  .foot-grid { grid-template-columns: 1fr }
  section { padding: 68px 0 }
  .flip-stage { gap: 6px }
}

@media (max-width: 560px) {
  .flipbook { --pw: 128px !important; --ph: 176px !important }
  .reader-stage { gap: 6px }
}

/* Quien pidió menos movimiento no ve animaciones ni desplazamiento suave. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important }
  .fade { opacity: 1; transform: none }
  .hero-slide { transform: none }
}

/* ---------------------------------------------------------------------------
   Publicidad (Google AdSense)
   El bloque sólo se imprime cuando hay un anuncio configurado, así que estas
   reglas nunca dejan un hueco vacío. min-height evita que la página "salte"
   cuando el anuncio termina de cargar.
--------------------------------------------------------------------------- */
.ad-slot { display: block; padding: 28px 0; background: var(--cream) }
.ad-slot .adsbygoogle { display: block; min-height: 100px }
.ad-label {
  display: block;
  margin-bottom: 8px;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.ad-footer { background: var(--parchment) }
.ad-revista { background: transparent }

@media (max-width: 560px) {
  .ad-slot { padding: 18px 0 }
}
/* ---------------------------------------------------------------------------
   Texto sólo para lectores de pantalla (etiquetas de campos que se ven por su
   placeholder, leyendas de grupos de opciones).
--------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   NUESTROS FRAILES (directorio)
--------------------------------------------------------------------------- */
.frailes { background: var(--cream); padding: 96px 0 }
.frailes-bar {
  background: var(--cafe-deep); color: #fff; border-radius: 8px 8px 0 0;
  padding: 18px 26px; text-align: center;
}
.frailes-bar h2 { color: #fff; font-size: clamp(1.2rem, 2.4vw, 1.6rem); letter-spacing: .04em; font-weight: 500 }
.frailes-bar h2 span {
  color: var(--naranja-soft); font-family: var(--body); font-size: .7em;
  letter-spacing: .16em; text-transform: uppercase;
}
.frailes-layout {
  display: grid; grid-template-columns: 230px 1fr;
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px;
  overflow: hidden; background: var(--parchment);
}
.frailes-filtros { background: var(--parchment-2); padding: 24px 20px; border-right: 1px solid var(--line) }
.fr-search {
  width: 100%; padding: .7em .9em; border: 1px solid var(--line); border-radius: 4px;
  background: var(--cream); font-family: var(--body); font-size: .92rem;
  color: var(--cafe); margin-bottom: 20px;
}
.fr-search::placeholder { color: var(--muted) }
.fr-filtros { list-style: none }
.fr-filtros li { margin-bottom: 4px }
.fr-fbtn {
  width: 100%; text-align: left; background: none; border: 0; padding: .55em .7em;
  border-radius: 4px; font-family: var(--body); font-size: .94rem; color: var(--muted);
  cursor: pointer; transition: background .18s, color .18s;
}
.fr-fbtn:hover { background: var(--cream); color: var(--cafe) }
.fr-fbtn.active { background: var(--cafe); color: #fff; font-weight: 600 }

.frailes-main { padding: 26px }
.frailes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.fr-card {
  display: block; width: 100%; font: inherit;
  background: var(--cream); border: 1px solid var(--line); border-radius: 8px;
  padding: 22px 16px; text-align: center; cursor: pointer;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.fr-card:hover { transform: translateY(-4px); border-color: var(--naranja); box-shadow: var(--shadow) }
.fr-card.active { border-color: var(--naranja); box-shadow: 0 0 0 2px var(--naranja) inset }
.fr-card .av { width: 84px; height: 84px; margin: 0 auto 12px; display: block; border-radius: 50% }
.fr-card .fr-name { font-family: var(--display); font-size: 1.06rem; color: var(--cafe); font-weight: 500; display: block }
.fr-card .fr-role {
  display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--naranja-ink); font-weight: 600; margin-top: 4px;
}
.fr-card .fr-loc { display: block; font-size: .84rem; color: var(--muted); margin-top: 3px }
.frailes-empty { padding: 30px; text-align: center; color: var(--muted) }
.fr-vertodos { margin-top: 24px }

/* Sin foto: las iniciales sobre el color de la marca. */
.av-ini {
  display: flex; align-items: center; justify-content: center;
  background: var(--parchment-2); color: var(--cafe);
  font-family: var(--display); font-size: 1.6rem; letter-spacing: .04em;
}
.fr-card img.av, .fp-top img.av { object-fit: cover; object-position: center 22%; background: var(--parchment-2) }

.fraile-perfil {
  margin-top: 34px; background: var(--parchment); border: 1px solid var(--line);
  border-radius: 10px; padding: 34px;
}
.fp-top { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap }
.fp-top .av { width: 120px; height: 120px; flex: 0 0 120px; border-radius: 50%; border: 3px solid var(--parchment-2) }
.fp-id { flex: 1; min-width: 240px }
.fp-id h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--cafe); margin: 0 }
.fp-id .fp-role { color: var(--naranja-ink); font-weight: 600; letter-spacing: .04em; margin-top: 2px }
.fp-meta { margin-top: 16px; display: flex; flex-direction: column; gap: 9px }
.fp-meta div { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .96rem }
.fp-meta svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--naranja-ink) }
.fp-secs { margin-top: 26px }
.fp-sec { padding: 20px 0 }
.fp-sec:first-child { padding-top: 4px }
.fp-sec + .fp-sec { border-top: 1px solid var(--line) }
.fp-sec h4 {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--naranja-ink); font-weight: 600; margin-bottom: 8px;
}
.fp-sec p { color: var(--cafe); line-height: 1.65 }

@media (max-width: 860px) {
  .frailes-layout { grid-template-columns: 1fr }
  .frailes-filtros { border-right: 0; border-bottom: 1px solid var(--line) }
  .fr-filtros { display: flex; flex-wrap: wrap; gap: 6px }
  .fr-filtros li { margin: 0 }
  .fr-fbtn { width: auto; border: 1px solid var(--line); border-radius: 30px; padding: .45em .9em; font-size: .86rem }
  .frailes-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 520px) {
  .frailes-grid { grid-template-columns: 1fr }
}

/* ---------------------------------------------------------------------------
   MURO DE INTENCIONES
--------------------------------------------------------------------------- */
.muro { background: var(--parchment); padding: 96px 0 }
.muro-grid { display: grid; grid-template-columns: 360px 1fr; gap: 34px; align-items: start }
.muro-form {
  background: var(--cream); border: 1px solid var(--line); border-radius: 10px;
  padding: 28px; position: sticky; top: 86px;
}
.muro-form h3 { font-size: 1.4rem; color: var(--cafe) }
.mf-sub { color: var(--muted); font-size: .92rem; margin: 6px 0 18px }
.mf-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; border: 0; padding: 0 }
.mf-tipo {
  flex: 1; min-width: 96px; text-align: center;
  border: 1px solid var(--line); background: var(--parchment); color: var(--muted);
  border-radius: 30px; padding: .5em .6em; font-size: .84rem; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.mf-tipo:hover { border-color: var(--cafe); color: var(--cafe) }
.mf-tipo.active { background: var(--cafe); color: #fff; border-color: var(--cafe) }
/* El radio real se esconde pero sigue ahí: teclado, lectores y envío sin JS. */
.mf-tipo input { position: absolute; opacity: 0; width: 0; height: 0 }
.mf-tipo:focus-within { outline: 2px solid var(--naranja-ink); outline-offset: 2px }
.mf-in {
  width: 100%; padding: .7em .9em; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; font-family: var(--body); font-size: .95rem; color: var(--cafe);
  margin-bottom: 12px; resize: vertical;
}
.mf-in::placeholder { color: var(--muted) }
.mf-check {
  display: flex; align-items: center; gap: 8px; font-size: .86rem;
  color: var(--muted); margin-bottom: 18px; cursor: pointer;
}
.mf-check input { accent-color: var(--naranja-ink) }
.muro-form .btn { width: 100%; justify-content: center }
.mf-ok {
  margin-top: 14px; background: #eaf6e8; border: 1px solid #bcd9b6; color: #2f5a29;
  border-radius: 6px; padding: .8em 1em; font-size: .9rem;
}
.mf-error {
  margin-bottom: 14px; background: #fdecea; border: 1px solid #e6b7b1; color: #8a2f22;
  border-radius: 6px; padding: .8em 1em; font-size: .9rem;
}
/* La trampa para robots: fuera de la vista, pero no display:none (algunos la ignoran). */
.mf-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

.muro-stats {
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 16px;
}
.muro-wall { display: flex; flex-direction: column; gap: 16px }
.muro-vacio { color: var(--muted) }
.int-card {
  background: var(--cream); border: 1px solid var(--line); border-left: 4px solid var(--naranja);
  border-radius: 8px; padding: 20px 22px; transition: box-shadow .25s;
}
.int-card:hover { box-shadow: var(--shadow) }
.int-card.t-gracias { border-left-color: #C8841F }
.int-card.t-especial { border-left-color: var(--cafe) }
.int-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px }
.int-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  padding: .3em .7em; border-radius: 30px;
  background: rgba(var(--cafe-rgb), .08); color: var(--naranja-ink);
}
.int-badge svg { width: 13px; height: 13px }
.t-gracias .int-badge { background: rgba(200, 132, 31, .14); color: #8a570f }
.t-especial .int-badge { background: rgba(var(--cafe-rgb), .1); color: var(--cafe) }
.int-enc {
  display: inline-flex; align-items: center; gap: 5px; font-size: .7rem;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: #2f7a2f; margin-left: auto;
}
.int-enc svg { width: 14px; height: 14px }
.int-pend { margin-left: auto; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--muted) }
.int-msg { color: var(--cafe); line-height: 1.55; font-size: 1.02rem }
.int-meta { margin-top: 12px; font-size: .84rem; color: var(--muted) }
.int-resp {
  margin-top: 16px; background: var(--parchment-2); border-radius: 6px;
  padding: 14px 16px; border-left: 3px solid var(--naranja);
}
.int-resp .rl {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--naranja-ink); font-weight: 600; display: flex; align-items: center;
  gap: 6px; margin-bottom: 6px;
}
.int-resp .rl svg { width: 13px; height: 13px }
.int-resp p { color: var(--cafe); font-style: italic; line-height: 1.5; font-size: .95rem }
.int-resp .rby { font-style: normal; font-weight: 600; color: var(--cafe); font-size: .85rem; margin-top: 6px }
.muro-note { margin-top: 22px; font-size: .85rem; color: var(--muted); line-height: 1.5 }

@media (max-width: 860px) {
  .muro-grid { grid-template-columns: 1fr; gap: 26px }
  .muro-form { position: static }
}
@media (max-width: 560px) {
  .frailes, .muro { padding: 64px 0 }
}
/* Lo oculto por JS (atributo hidden) no debe mostrarse aunque la clase tenga display. */
[hidden] { display: none !important; }
/* Firma de la agencia: discreta, debajo del copyright. */
.foot-credit {
  margin-top: 18px; display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 10px; font-size: .78rem; color: rgba(255, 255, 255, .45);
}
/* Firma de la agencia: discreta, debajo del copyright. */
.foot-credit {
  margin-top: 18px; display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 10px; font-size: .78rem; color: rgba(255, 255, 255, .45);
}
.foot-credit a { color: rgba(255, 255, 255, .7); transition: color .2s }
.foot-credit a:hover { color: var(--naranja-soft) }
.foot-credit-ico { display: inline-flex; width: 16px; height: 16px }
.foot-credit-ico svg { width: 100%; height: 100% }
/* "Enviar WhatsApp" debajo del teléfono en la ficha del convento. */
.conv-card .cc-wa {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 1rem; font-weight: 600; color: var(--cafe); text-decoration: none; transition: color .2s;
}
.conv-card .cc-wa svg { width: 18px; height: 18px; color: #25D366; flex: 0 0 18px }
.conv-card .cc-wa:hover { color: var(--naranja-ink) }
.conv-card .cc-wa:hover span { text-decoration: underline }


/* Portada: velo café (de la paleta del panel) en vez de negro, más ligero a la derecha. */
.hero-overlay {
  background:
    linear-gradient(102deg,
      rgba(var(--cafe-rgb), .80) 0%,
      rgba(var(--cafe-rgb), .58) 40%,
      rgba(var(--cafe-rgb), .22) 70%,
      rgba(var(--cafe-rgb), .12) 100%),
    linear-gradient(0deg, rgba(var(--cafe-rgb), .50) 0%, rgba(var(--cafe-rgb), 0) 40%);
}
/* ------------------------------------------------------------------
   Paginación (Frailes y Vida franciscana)
   ------------------------------------------------------------------ */
.fr-pager {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 8px; margin-top: 32px;
}
.fr-pg {
  min-width: 42px; height: 42px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: .95rem; line-height: 1; cursor: pointer;
  background: var(--cream); color: var(--cafe);
  border: 1px solid var(--line); border-radius: 8px;
  transition: background .2s, color .2s, border-color .2s;
}
.fr-pg:hover:not(:disabled) { border-color: var(--naranja); color: var(--naranja-ink) }
.fr-pg.active { background: var(--cafe); border-color: var(--cafe); color: #fff; font-weight: 600 }
.fr-pg:disabled { opacity: .35; cursor: default }
#frailesGrid, #vidaGaleria { scroll-margin-top: 120px }

/* Sobre el fondo oscuro de Vida franciscana. */
.vida .fr-pg { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3) }
.vida .fr-pg:hover:not(:disabled) { border-color: var(--naranja-soft); color: var(--naranja-soft) }
.vida .fr-pg.active { background: #fff; border-color: #fff; color: var(--cafe) }

/* Lector de la revista: el libro abierto se agranda a lo que dé la pantalla,
   con la proporción real de las páginas (--ratio lo pone la vista). */
.reader .flipbook {
  --ph: clamp(220px, min(calc(100vh - 290px), calc((100vw - 190px) / 2 / var(--ratio, .728))), 1100px) !important;
  --pw: calc(var(--ph) * var(--ratio, .728)) !important;
}
.reader-stage { padding: 24px 20px }

/* Celular: las flechas pasan debajo para que las páginas usen todo el ancho. */
@media (max-width: 680px) {
  .reader-stage { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 16px 28px }
  .reader .flipbook {
    grid-column: 1 / -1; justify-self: center;
    --ph: clamp(180px, min(calc(100vh - 340px), calc((100vw - 32px) / 2 / var(--ratio, .728))), 1100px) !important;
  }
  .reader .flip-nav { justify-self: center }
}
#muroWall { scroll-margin-top: 120px }
/* La sombra iba en CADA hoja y con muchas páginas se sumaban hasta verse un
   marco negro. Ahora es una sola, del libro completo. */
.leaf .face { box-shadow: none }
.flipbook::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .38);
}
/* Cerrado sólo se ve una página: la sombra se ajusta a esa mitad. */
.flipbook.at-start::after { left: 50% }
.flipbook.at-end::after { right: 50% }
/* Vocaciones y donativos: imagen opcional junto al texto. */
.duo > .con-img {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px; align-items: end;
}

.duo .duo-img {
  width: 100%; max-height: 420px; object-fit: cover;
  border-radius: 10px; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6);
}
@media (max-width: 900px) {
  .duo > .con-img { grid-template-columns: 1fr; gap: 28px }
  .duo .duo-img { max-height: 280px }
}
/* Columna de la foto: imagen y, debajo, el botón secundario. */
.duo-media { display: flex; flex-direction: column; align-items: flex-start; gap: 20px }

.duo-btn2 {
  background: transparent; color: var(--cafe); border: 1px solid var(--cafe);
  transition: background .2s, color .2s;
}
.duo-btn2:hover { background: var(--cafe); color: #fff }
.duo .apoyo .duo-btn2 { color: #fff; border-color: rgba(255, 255, 255, .5) }
.duo .apoyo .duo-btn2:hover { background: #fff; color: var(--cafe); border-color: #fff }