/* ============================================================
   1. VARIABLES BASE (Colores, tipografías, sombras)
   ============================================================ */
:root {
  /* Fondos: Gris oscuro azulado */
  --bg: #0f151c;
  --surface: #17202bde;
  --surface-2: #1c2734;
  --text: #e2e8f0;
  --muted: #a0aec0;

  /* Verdes (Botones principales) */
  --green: #166534;
  --green-light: #2d874e;

  /* Naranjos (Links, Acentos, Footer) */
  --orange: #ea580c;
  --orange-light: #ff7a24;

  --line: rgba(226,232,240,.13);
  --shadow: 0 22px 60px rgba(0,0,0,.28);
  --font-body: "DM Sans", sans-serif;
 --font-display: "Kaushan Script", cursive;

}



/* ============================================================
   2. RESET Y GLOBALES
   ============================================================ */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  position: relative;
  transition: background-color .35s ease;
}
html[data-theme="day"] body {
  background-color: #A8DDD8;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .28), transparent 34%),
    linear-gradient(145deg, rgba(168, 221, 216, .96), rgba(126, 202, 198, .86));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
body.menu-open {
  overflow: hidden;
}
a {
  color: inherit;
}
button, input, textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
.container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  z-index: 10;
  position: relative;
}
.section-shell {
  position: relative;
}
.section {
  padding: clamp(2.5rem, 3vw, 3rem) 0;
}
.section:nth-of-type(odd):not(.hero) {
  background: linear-gradient(110deg, rgba(22,101,52,.1), transparent 55%);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  transform: translateY(-150%);
  padding: .7rem 1rem;
  background: var(--orange);
  color: #fff;
  border-radius: 8px;
}
.skip-link:focus {
  transform: translateY(0);
}

/* BOTÓN VOLVER ARRIBA: contrapunto discreto al WhatsApp del lado derecho. */
.back-to-top {
  position: fixed;
  left: clamp(24px, 4vw, 64px);
  bottom: clamp(96px, 12vh, 130px);
  z-index: 45;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  background: rgba(15, 21, 28, .8);
  color: #fff;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .28);
  backdrop-filter: blur(9px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease,
    background-color .25s ease, box-shadow .25s ease;
}

.back-to-top svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: rgba(234, 88, 12, .9);
  box-shadow: 0 9px 24px rgba(234, 88, 12, .3);
  transform: translateY(-3px);
}

.back-to-top:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

body.menu-open .back-to-top,
body:has(dialog[open]) .back-to-top {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 600px) {
  .back-to-top {
    left: max(14px, calc(env(safe-area-inset-left, 0px) + 10px));
    bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 14px));
    width: 46px;
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

/* ============================================================
   3. FONDO MARCA DE AGUA MAPUCHE
   ============================================================ */
.watermark-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.20;
  background-image: url('data:image/svg+xml;utf8,');
  background-size: 200px 200px;
  background-position: 0 0;
  animation: bgFloat 100s linear infinite;
}
@keyframes bgFloat {
  100% { background-position: 1000px 1000px; }
}

 /* ============================================================
   5. HEADER Y NAVEGACIÓN
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .3s, backdrop-filter .3s, -webkit-backdrop-filter .3s, border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled {
  background: rgba(15,21,28,.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-color: var(--line);
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
.header__inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.brand, .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  white-space: nowrap;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 50px;
  aspect-ratio: 1;
  border: 1px solid var(--orange);
  color: var(--orange-light);
  border-radius: 50% 44% 50% 44%;
  font: 700 .68rem var(--font-body);
  letter-spacing: .06em;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-left: auto;
}
.main-nav a, .footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 1rem; /* Sincronizado al tamaño real deseado */
  transition: color .2s;
}
.main-nav a:hover, .main-nav a:focus-visible, .footer-links a:hover {
  color: var(--orange-light);
}
.header-ecosystem {
  color: #fff;
  font-weight: 700;
  font-size: .984rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.theme-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(15, 21, 28, .58);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.theme-toggle:hover {
  border-color: rgba(255, 255, 255, .48);
  background: rgba(15, 21, 28, .72);
}
.theme-toggle__icon {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  transform: translateY(-50%);
  opacity: .5;
  transition: opacity .25s ease;
}
.theme-toggle__icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle__icon--moon { left: 9px; opacity: 1; }
.theme-toggle__icon--sun { right: 9px; }
.theme-toggle__thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
html[data-theme="day"] .theme-toggle__thumb { transform: translateX(28px); }
html[data-theme="day"] .theme-toggle__icon--moon { opacity: .5; }
html[data-theme="day"] .theme-toggle__icon--sun { opacity: 1; }
.luxury-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 18px 36px;
  border: none;
  border-radius: 0;
  background: linear-gradient(135deg, #b93808 0%, var(--orange) 55%, #ff7a24 100%);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  transform: translateY(0);
  box-shadow: 0 4.4px 16.5px rgba(234,88,12,.31), 0 2px 7px rgba(0,0,0,.2);
  transition: transform .2s, box-shadow .2s, background .3s;
  animation: ecosystem-float-pulse 3.2s ease-in-out infinite;
}
@keyframes ecosystem-float-pulse {
  0%, 100% {
    translate: 0 0;
    scale: 1;
    box-shadow: 0 4.4px 16.5px rgba(234,88,12,.31), 0 2px 7px rgba(0,0,0,.2);
  }
  50% {
    translate: 0 -4px;
    scale: 1.025;
    box-shadow: 0 13px 29px rgba(234,88,12,.48), 0 7px 15px rgba(0,0,0,.3);
  }
}
.luxury-btn__text {
  position: relative;
  z-index: 2;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.luxury-btn__border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.luxury-btn__border-path {
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 0 1000;
  stroke-dashoffset: 0;
  opacity: 0;
}
.luxury-btn.is-activating .luxury-btn__border-path {
  animation: ecosystem-border-draw .62s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes ecosystem-border-draw {
  0% { stroke-dasharray: 0 1000; opacity: 0; }
  12% { opacity: .7; }
  100% { stroke-dasharray: 1000 0; opacity: 1; }
}
.luxury-btn__ornament-left,
.luxury-btn__ornament-right {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  z-index: 2;
  color: #ffe0c2;
  transition: transform .3s;
}
.luxury-btn__ornament-left { left: 18px; }
.luxury-btn__ornament-right { right: 18px; }
.luxury-btn:hover .luxury-btn__ornament-left {
  transform: translateY(-50%) rotate(-180deg);
}
.luxury-btn:hover .luxury-btn__ornament-right {
  transform: translateY(-50%) rotate(180deg);
}
.luxury-btn__shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  animation: ecosystem-shine-effect 4.2s ease-in-out infinite;
}
@keyframes ecosystem-shine-effect {
  0% { transform: translateX(0%); opacity: 0; }
  10% { opacity: .22; }
  50% { transform: translateX(200%); opacity: .22; }
  100% { transform: translateX(200%); opacity: 0; }
}
.luxury-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8.8px 22px rgba(234,88,12,.44), 0 3px 9px rgba(0,0,0,.22);
  background: linear-gradient(135deg, #c94108 0%, #f46319 55%, #ff914d 100%);
}
.luxury-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2.2px 11px rgba(234,88,12,.22), 0 1px 4px rgba(0,0,0,.18);
  background: linear-gradient(135deg, #9f3007 0%, #d9480b 100%);
}
.luxury-btn.is-activating {
  animation: none;
  translate: 0 -2px;
  scale: 1.01;
}
.luxury-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .luxury-btn,
  .luxury-btn__ornament-left,
  .luxury-btn__ornament-right { transition: none; }
  .luxury-btn { animation: none; }
  .luxury-btn__shine,
  .luxury-btn.is-activating .luxury-btn__border-path { animation: none; }
  .luxury-btn.is-activating .luxury-btn__border-path {
    stroke-dasharray: 1000 0;
    opacity: 1;
  }
}

/* Botones con giro 3D, adaptados del diseño de Uiverse.io de Damithkumara.
   data-label permite reutilizar el efecto sin perder el texto real y accesible. */
.uiverse-flip-button.uiverse-flip-button.uiverse-flip-button {
  /* EDITAR AQUÍ: color del borde de los botones con efecto 3D. */
  --flip-button-border: var(--orange);
  /* EDITAR AQUÍ: color de las letras de los botones con efecto 3D. */
  --flip-button-text: var(--orange);
  /* EDITAR AQUÍ: cambia este color para modificar el fondo de todos los botones con efecto 3D. */
  --flip-button-background: #fbfbfc;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .9em 1.8em;
  overflow: hidden;
  color: transparent;
  background: transparent;
  border: 3px solid var(--flip-button-border);
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 4px;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  isolation: isolate;
}

.uiverse-flip-button.uiverse-flip-button.uiverse-flip-button:hover {
  transform: none;
}

.uiverse-flip-button.uiverse-flip-button.uiverse-flip-button::before,
.uiverse-flip-button.uiverse-flip-button.uiverse-flip-button::after {
  content: attr(data-label);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 .55em;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: var(--flip-button-text);
  background-color: var(--flip-button-background);
  font: inherit;
  letter-spacing: inherit;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  transition: all 2s;
}

.uiverse-flip-button.uiverse-flip-button.uiverse-flip-button::after {
  left: -100%;
  opacity: 0;
  transform: scale(0) rotateY(0deg);
}

.uiverse-flip-button.uiverse-flip-button.uiverse-flip-button:hover::before,
.uiverse-flip-button.uiverse-flip-button.uiverse-flip-button:focus-visible::before {
  left: 100%;
  opacity: 0;
  transform: scale(0) rotateY(360deg);
}

.uiverse-flip-button.uiverse-flip-button.uiverse-flip-button:hover::after,
.uiverse-flip-button.uiverse-flip-button.uiverse-flip-button:focus-visible::after {
  left: 0;
  opacity: 1;
  transform: scale(1) rotateY(360deg);
}

.uiverse-flip-button:focus-visible {
  outline: 3px solid var(--flip-button-border);
  outline-offset: 3px;
}

.uiverse-flip-button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

@media (max-width: 620px) {
  .uiverse-flip-button.uiverse-flip-button.uiverse-flip-button {
    min-width: 0;
    padding: .8em .75em;
    font-size: .7rem;
    letter-spacing: 2px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .uiverse-flip-button.uiverse-flip-button.uiverse-flip-button::before,
  .uiverse-flip-button.uiverse-flip-button.uiverse-flip-button::after {
    transition: none;
  }
}
.menu-toggle {
  display: none;
  margin-left: auto;
  border: 0;
  background: transparent;
}
.menu-toggle span:not(.sr-only) {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px;
  background: #fff;
  transition: transform .2s, opacity .2s;
}
/* ============================================================
   6. HERO (Sección de inicio)
   ============================================================ */
.hero {
  min-height: min(780px, 100svh);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #0f151c;
}
.hero__video, .hero__overlay, .hero__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__video {
  object-fit: cover;
  z-index: -3;
  opacity: 0;
  transition: opacity .7s ease;
}
.hero__video.is-ready { opacity: 1; }
.hero__video.is-motion-paused,
.page-fire-hero__video-wrap video.is-motion-paused {
  opacity: 0;
  visibility: hidden;
}
.hero__overlay {
  z-index: -2;
  background: linear-gradient(90deg, rgba(15,21,28,.92) 0%, rgba(15,21,28,.7) 48%, rgba(15,21,28,.35));
}
.hero__texture {
  z-index: -1;
  opacity: .3;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(234,88,12,.25), transparent 20%),
    radial-gradient(circle at 78% 70%, rgba(22,101,52,.35), transparent 25%);
}
.hero__content {
  padding: 2rem 0 5rem;
  text-align: center;
}

.hero__content h1,
.hero__content h2,
.hero__lead {
  margin-left: auto;
  margin-right: auto;

}
.eyebrow {
  margin: 0 0 1rem;
  color: var(--orange-light);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
   text-align: left;
}
h1, h2, h3, p {
  margin-top: 0;
}
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.05;
}
h1 {
  max-width: 650px;
  margin-bottom: 1.35rem;
  font-size: clamp(2.2rem, 5.4vw, 3.4rem);
  letter-spacing: 0.01em;
  line-height: 1.2;
  font-weight: 400;
}
h1 em {
  color: var(--green-light);
  font-weight: 400;
}
h2 {
  max-width: 700px;
  margin-bottom: 1.2rem;
  font-size: clamp(2rem, 4.2vw, 3rem);
  letter-spacing: 0;
  line-height: 1.15;
}
.hero__lead {
  max-width: 600px;
  color: #d1ddd2;
  font-size: clamp(1em, 3vw,1rem);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 2rem;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  padding: .72rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.button:hover {
  transform: translateY(-3px);
}
.button--primary {
  background: var(--green);
  box-shadow: 0 8px 22px rgba(22,101,52,.25);
}
.button--primary:hover {
  background: var(--green-light);
  box-shadow: 0 12px 28px rgba(22,101,52,.38);
}
.button--ghost {
  border-color: rgba(255,255,255,.42);
  background: rgba(23,32,43,.2);
}
.button--ghost:hover {
  background: rgba(255,255,255,.14);
}
.button--small {
  min-height: 40px;
  padding: .5rem .75rem;
  font-size: .8rem;
}
.is-disabled {
  pointer-events: none;
  opacity: .5;
}
.hero__identity {
  margin-top: 3rem;
  color: var(--muted);
  font-size: .88rem;
}
.hero__scroll {
  position: absolute;
  bottom: 1.5rem;
  right: max(20px, calc((100% - 1180px)/2));
  color: var(--muted);
  font-size: .78rem;
  text-decoration: none;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero__scroll span {
  display: inline-block;
  margin-left: .5rem;
  animation: float 1.5s infinite alternate ease-in-out;
}
@keyframes float {
  to { transform: translateY(6px); }
}

/* ============================================================
   7. QUIÉNES SOMOS (Libro 3D - Versión Grande Alternada)
   ============================================================ */
.book-scene {
  perspective: 2500px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Sin los botones inferiores, el contador puede quedar más cerca del libro. */
  margin: 1.8rem 0 .8rem;
}
/* Compacta el contador y acerca esta sección a la siguiente. */
#quienes-somos > .container {
  gap: .75rem !important;
}
#quienes-somos.section { padding-bottom: 1.5rem; }
#nanas.section { padding-top: 1.5rem; }
/* Conserva la base usada por las escalas actuales de tablet y celular. */
.nanas-book {
  position: relative;
  width: 650px;
  height: 400px;
  box-shadow: 0 45px 70px rgba(0,0,0,.6);
}
/* Lleva el libro al ancho máximo seguro en escritorio y conserva su proporción original. */
@media (min-width: 900px) {
  .nanas-book {
    width: 100%;
    max-width: 1180px;
    height: auto;
    aspect-ratio: 13 / 8;
  }
}
.nanas-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #0f151c, #17202b);
  border-radius: 14px 0 0 14px;
}

/* CAMBIO: presenta el texto inicial en la mitad izquierda donde antes estaba el logo. */
.nanas-cover-text {
  width: 100%;
  height: 100%;
  padding: 40px 30px;
  display: flex;
  align-items: center;
  color: #fff;
  background: linear-gradient(145deg, #17202b, #0f151c);
  border: 1px solid rgba(234,88,12,.55);
}
.nanas-cover-text h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin: 0;
  text-align: center;
}

/* CAMBIO: el logo llena la primera hoja derecha, que funciona como portada giratoria. */
.nanas-face.is-logo {
  padding: 0;
}
.nanas-face.is-logo .nanas-book-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #49e1ff29;
}
.nanas-spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 10px;
  transform: translateX(-50%);
  background: linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,.2) 40%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.6));
  z-index: 50;
  pointer-events: none;
}
.nanas-leaf {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.nanas-leaf.flipped {
  transform: rotateY(-180deg);
}
.nanas-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nanas-face:not(.nanas-back) {
  border-radius: 0 14px 14px 0;
  color: #fff;
}
.nanas-face.nanas-back {
  transform: rotateY(180deg);
  border-radius: 14px 0 0 14px;
}

/* Da identidad visual a la portada y a las cuatro páginas de texto nuevas. */
.nanas-face--cover,
.nanas-face--text {
  justify-content: center;
  background: linear-gradient(145deg, rgba(34, 107, 198, 0.98), rgba(15,21,28,.98));
  border: 1px solid var(--line);
}
.nanas-face--cover {
  text-align: center;
  background: linear-gradient(145deg, #17202b, #0f151c);
  border-color: rgba(234,88,12,.55);
}
.nanas-face--green {
  background: linear-gradient(145deg, rgba(22,101,52,.96), rgba(15,70,38,.96));
}
.nanas-face--orange {
  background: linear-gradient(145deg, rgba(234,88,12,.94), rgba(146,52,9,.96));
}
.nanas-face--invitation {
  background: linear-gradient(145deg, rgba(23,32,43,.98), rgba(22,101,52,.88));
  border-color: rgba(45,135,78,.75);
}

/* Modificador para páginas que son solo imagen */
.nanas-face.is-image {
  padding: 0;
  background: #000;
}
.nanas-face.is-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
}

/* Textos dentro del libro */
.nanas-face h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin: 0;
}
.nanas-face p {
  font-size: 1.05rem;
  opacity: .95;
  line-height: 1.6;
}

/* Señal visual y táctil que descubre el giro de cada hoja activa. */
.book-turn-cue {
  position: absolute;
  right: clamp(10px, 2vw, 22px);
  bottom: clamp(10px, 2vw, 22px);
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  isolation: isolate;
  transition: opacity .2s ease, transform .2s ease;
}
.book-turn-cue[hidden] {
  display: none;
}
.book-turn-cue--previous {
  right: auto;
  left: clamp(10px, 2vw, 22px);
  flex-direction: row-reverse;
}
.book-turn-cue__label {
  padding: .35rem .62rem;
  /* COLOR DE "TOCA": fondo verde y letras negras. */
  border: 1px solid var(--green-light);
  border-radius: 999px;
  background: var(--green-light);
  color: #050807;
  box-shadow: 0 4px 14px rgba(22,101,52,.38);
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(5px);
}
.book-turn-cue__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  /* COLOR DEL BOTÓN: fondo blanco, borde y flecha naranjos. */
  border: 2px solid var(--orange);
  border-radius: 50%;
  background: #fff;
  color: var(--orange);
  box-shadow: 0 5px 18px rgba(234,88,12,.48);
  transition: transform .2s ease, box-shadow .2s ease;
}
.book-turn-cue__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: -3px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.book-turn-cue--previous .book-turn-cue__dot::before {
  margin-right: -3px;
  margin-left: 0;
  transform: rotate(-135deg);
}
.book-turn-cue__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border: 2px solid rgba(234,88,12,.72);
  border-radius: inherit;
  animation: book-turn-pulse 2.4s ease-out infinite;
}
.book-turn-cue:hover .book-turn-cue__dot {
  transform: scale(1.08);
  box-shadow: 0 7px 22px rgba(234,88,12,.62);
}
.book-turn-cue:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 999px;
}
.nanas-book.is-turning .book-turn-cue {
  opacity: 0;
  pointer-events: none;
}
@keyframes book-turn-pulse {
  0% { opacity: .75; transform: scale(.82); }
  70%, 100% { opacity: 0; transform: scale(1.35); }
}

/* Conserva el aumento tipográfico aprobado para la experiencia de escritorio. */
@media (min-width: 900px) {
  .nanas-face h3,
  .nanas-cover-text h3 {
    font-size: 2.16rem;
  }
  .nanas-face p {
    font-size: 1.26rem;
  }
}

/* Píldoras dentro del libro */
.pill-list-book {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: auto;
}
.pill-list-book span {
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  padding: .4rem .8rem;
  font-size: 0.85rem;
  background: rgba(0,0,0,0.15);
}

/* Botón Llamado a la Acción (CTA) */
.book-cta-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 12px 20px;
  background: var(--green);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
  transition: background 0.3s, transform 0.2s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.book-cta-btn:hover {
  background: var(--orange); /* Opcional: cambia a naranja al pasar el mouse */
  transform: translateY(-2px);
  color: #fff;
}

/* Navegación del libro */
.book-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#book-pg {
  color: var(--muted);
  font-size: 1rem;
  min-width: 90px;
  text-align: center;
}

/* Escalar el libro en celulares para el nuevo tamaño */
@media (max-width: 768px) {
  .nanas-book {
    transform: scale(0.7); 
    margin: -60px 0;
  }
}
@media (max-width: 500px) {
  .nanas-book {
    transform: scale(0.65);
    margin: -100px 0;

  }
}
@media (max-width: 500px) {
  .nanas-book {
    transform: scale(0.5); 
    margin: -100px 0;
    width: 600px; /* Tu nuevo ancho */
  }

  .nanas-leaf {
    width: 300px; /* La mitad del ancho */
    left: 50%;    /* 👈 ESTA ES LA CLAVE: Fuerza al lomo a estar en el centro exacto */
  }
}

/* Móvil vertical: ambas hojas ocupan exactamente la mitad del libro. */
@media (max-width: 768px) and (orientation: portrait) {
  /* Reduce un 40% el aire superior e inferior exclusivo de la sección del libro. */
  #quienes-somos.section { padding: 2.4rem 0 1.4rem; }

  .book-scene {
    width: 100%;
    /* Mantiene la misma reducción proporcional en móvil vertical. */
    margin: .24rem 0 -.675rem;
  }

  .nanas-book {
    width: min(100%, calc(100vw - 32px));
    height: auto;
    aspect-ratio: 13 / 8;
    margin: 0;
    transform: none;
  }

  .nanas-cover {
    left: 0;
    right: 50%;
    width: auto;
    height: 100%;
  }

  .nanas-leaf {
    left: 50%;
    right: 0;
    width: auto;
    height: 100%;
  }

  .nanas-face {
    padding: clamp(14px, 4vw, 22px);
    gap: 8px;
  }

  .nanas-face h3 {
    font-size: clamp(.9rem, 4vw, 1.2rem);
    line-height: 1.18;
  }

  /* Mantiene el texto de la nueva mitad izquierda legible en pantallas pequeñas. */
  .nanas-cover-text {
    padding: clamp(14px, 4vw, 22px);
  }

  .nanas-cover-text h3 {
    font-size: clamp(.9rem, 4vw, 1.2rem);
    line-height: 1.18;
  }

  .nanas-face p {
    font-size: clamp(.7rem, 2.8vw, .88rem);
    line-height: 1.4;
  }

  .pill-list-book {
    gap: .3rem;
  }

  .pill-list-book span {
    padding: .25rem .45rem;
    font-size: .62rem;
  }

  .book-turn-cue {
    right: 6px;
    bottom: 6px;
    gap: 2px;
    min-width: 44px;
    min-height: 44px;
    justify-content: flex-end;
  }

  .book-turn-cue--previous {
    right: auto;
    left: 6px;
    justify-content: flex-start;
  }

  .book-turn-cue__label {
    padding: .18rem .28rem;
    font-size: .4rem;
  }

  .book-turn-cue__dot {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
    border-width: 1px;
  }

  .book-turn-cue__dot::before {
    width: 5px;
    height: 5px;
    border-width: 1.5px 1.5px 0 0;
  }

  .book-turn-cue__dot::after {
    inset: -3px;
    border-width: 1px;
  }

  #book-pg {
    min-width: 72px;
    font-size: .68rem;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .book-turn-cue,
  .book-turn-cue__dot {
    transition: none;
  }

  .book-turn-cue__dot::after {
    animation: none;
    opacity: .35;
  }
}

/* ============================================================
   8. TERRITORIO Y MAPA INTERACTIVO
   ============================================================ */
.section--territory {
  background: #111820;
}
.section-heading--wide {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  column-gap: 3rem;
  align-items: end;
  margin-bottom: 2.5rem;
}
.section-heading--wide .eyebrow, .section-heading--wide h2 {
  grid-column: 1;
}
.section-heading--wide > p:not(.eyebrow) {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.map-experience {
  display: grid;
  grid-template-columns: minmax(0,1fr) 270px;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.map-toolbar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  padding: .35rem 0 .25rem .45rem;
}

.map-editor {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(360px, 1.2fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255, 122, 36, .5);
  border-radius: 16px;
  background: rgba(13, 17, 27, .88);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.map-editor[hidden],
.map-editor__actions[hidden] { display: none !important; }
.map-editor.has-error { border-color: rgba(220, 38, 38, .55); }
.map-editor__copy {
  display: grid;
  gap: .18rem;
  min-width: 210px;
}
.map-editor__copy strong { color: #fff; }
.map-editor__copy span { color: #c8ddd9; font-size: .86rem; }
.map-editor__copy small { color: #a9bbb9; }
.map-editor__copy small[data-tone="warning"] { color: #fed7aa; }
.map-editor__copy small[data-tone="success"] { color: #86efac; }
.map-editor__copy small[data-tone="error"] { color: #fecaca; }
.map-editor__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
}
.map-editor__actions button,
.map-editor__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .55rem .8rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  font: 700 .78rem var(--font-body);
  line-height: 1.15;
  text-decoration: none;
}
.map-editor__actions button:is(:hover, :focus-visible),
.map-editor__actions a:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .14);
}
.map-editor__actions button:disabled {
  cursor: not-allowed;
  opacity: .42;
}
.map-editor__actions .map-editor__toggle[aria-pressed="true"],
.map-editor__actions [data-map-edit-save]:not(:disabled) {
  border-color: var(--orange);
  background: var(--orange);
}
.map-editor__detail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(170px, .55fr) minmax(210px, .9fr) minmax(260px, 1.25fr);
  gap: .8rem;
  padding: 1rem;
  border: 1px solid rgba(121, 198, 197, .38);
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
}
.map-editor__detail-heading,
.map-editor__detail-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}
.map-editor__detail-heading strong { color: #fff; }
.map-editor__detail-heading button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  color: #fff;
  background: transparent;
  font-size: 1.2rem;
}
.map-editor__detail label {
  display: grid;
  align-content: start;
  gap: .35rem;
  color: #dcebea;
  font-size: .78rem;
  font-weight: 700;
}
.map-editor__detail input,
.map-editor__detail select,
.map-editor__detail textarea {
  width: 100%;
  min-height: 42px;
  padding: .65rem .7rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 10px;
  color: #173b3a;
  background: rgba(255, 255, 255, .94);
  font: 500 .88rem var(--font-body);
}
.map-editor__detail textarea { min-height: 82px; resize: vertical; }
.map-editor__detail-actions { justify-content: flex-start; }
.map-editor__detail-actions button {
  min-height: 40px;
  padding: .55rem .85rem;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, .09);
  font-weight: 800;
}
.map-editor__detail-actions [type="submit"] { border-color: var(--orange); background: var(--orange); }
.map-editor__detail-actions [data-map-pin-hide] { border-color: rgba(248, 113, 113, .5); }
.map-editor__detail small { grid-column: 1 / -1; color: #c8ddd9; }
.map-editor__detail small[data-tone="error"] { color: #fecaca; }
.map-editor__detail small[data-tone="success"] { color: #86efac; }
.map-editor__retired {
  grid-column: 1 / -1;
  display: grid;
  gap: .6rem;
  padding-top: .25rem;
  color: #dcebea;
}
.map-editor__retired-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.map-editor__retired-list button {
  min-height: 38px;
  padding: .5rem .7rem;
  border: 1px solid rgba(134, 239, 172, .42);
  border-radius: 999px;
  color: #dcfce7;
  background: rgba(22, 101, 52, .28);
  font: 700 .76rem var(--font-body);
}
.map-pin[hidden],
.map-editor__detail[hidden],
.map-editor__retired[hidden] { display: none !important; }
.map-stage.is-map-editing .map-pin.is-map-selected {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* --- Mapa y pines vivos --- */
.map-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 17px;
  background: #e8e2d5;
}
.map-stage.is-map-editing {
  outline: 3px dashed rgba(255, 122, 36, .82);
  outline-offset: 4px;
}
.map-stage img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.map-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  transform: translate(-50%,-50%);
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50% 50% 50% 0;
  color: #fff;
  box-shadow: 0 5px 14px rgba(0,0,0,.35);
  transition: transform .2s, opacity .2s;
}
.map-stage.is-map-editing .map-pin {
  cursor: grab;
  touch-action: none;
}
.map-stage.is-map-editing .map-pin.is-dragging {
  z-index: 30;
  cursor: grabbing;
  transform: translate(-50%,-50%) scale(1.16) rotate(-5deg);
  transition: none;
}
.map-stage.is-map-editing .map-pin.is-dragging::after {
  animation-play-state: paused;
}
.map-pin:hover, .map-pin:focus-visible, .map-pin.is-active {
  transform: translate(-50%,-50%) scale(1.22) rotate(-8deg);
  outline: 0;
}
.map-pin.is-hidden {
  opacity: .08;
  pointer-events: none;
  filter: grayscale(1);
}
.pin--nanas {
  background: var(--orange);
}
.pin--territory {
  background: var(--green);
}
.map-pin.is-live {
  z-index: 10;
  background: var(--orange-light);
  box-shadow: 0 0 15px rgba(255,122,36,.6);
}
.map-pin.is-live::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 2px solid var(--orange-light);
  border-radius: inherit;
  transform: translate(-50%,-50%);
  animation: latido 2s ease-out infinite;
  pointer-events: none;
}
@keyframes latido {
  0%   { width: 100%; height: 100%; opacity: 1; border-width: 3px; }
  100% { width: 280%; height: 280%; opacity: 0; border-width: 1px; }
}
.map-detail {
  padding: 1rem .45rem;
  align-self: center;
}
.map-detail__eyebrow {
  margin: 0 0 .4rem;
  color: var(--orange-light);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.map-detail h3 {
  margin-bottom: .65rem;
  font-size: 1.6rem;
}
.map-detail p:not(.map-detail__eyebrow) {
  color: var(--muted);
  font-size: .92rem;
}
.section-note {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .78rem;
}

/* ============================================================
   9. COMUNIDAD - TARJETAS FLIP (Las Ñañas)
   ============================================================ */
.people-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.2rem;
  align-items: stretch;
}
/* Da espacio al aumento de las fotografías sin recortar los textos en escritorio. */
.person-card {
  height: 380px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  perspective: 1000px;
  text-align: left;
  touch-action: manipulation;
}
.person-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 20px; }
.person-card__inner {
  position: relative;
  display: block;
  height: 100%;
  transition: transform .6s;
  transform-style: preserve-3d;
}
.person-card.is-flipped .person-card__inner {
  transform: rotateY(180deg);
}
.person-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: .65rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
.person-card__face--front {
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
}
.person-card__face--front::after {
  content: "";
  position: absolute;
  width: 250px;
  aspect-ratio: 1;
  top: -40px;
  right: -30px;
  border: 1px solid rgba(5, 91, 77, 0.406);
  border-radius: 50%;
}
/* Amplía las fotografías un 30 % y conserva un recorte centrado sin deformarlas. */
.person-card__avatar {
  display: grid;
  place-items: center;
  width: 234px;
  height: 234px;
  border-radius: 10%;
  background: var(--orange);
  overflow: hidden;
  margin-bottom: .55rem;
  border: 4px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.person-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
/* Refuerza la jerarquía tipográfica y el contraste del texto secundario. */
.person-card strong {
  position: relative;
  font-size: clamp(1.5rem, 2vw, 1.6rem);
  line-height: 1.15;
  z-index: 1;
}
.person-card small {
  color: #cbd5e1;
  font-size: clamp(.9375rem, 1.2vw, 1rem);
  line-height: 1.35;
}
.person-card__face--back {
  justify-content: center;
  background: var(--orange);
  color: #fff;
  font: 300 1.25rem/1.35 var(--font-display);
  transform: rotateY(180deg);
}
/* ==========================================================
   RESPONSIVE - TARJETAS LAS ÑAÑAS
   ========================================================== */

/* Adapta fotografías, altura y tipografía al espacio disponible en tablet. */
@media (max-width: 950px) {
  .people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .person-card {
    height: 350px;
  }
  .person-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 1.2rem) / 2);
    justify-self: center;
  }
  .person-card__face {
    padding: 1.5rem;
    gap: .6rem;
  }
  .person-card__avatar {
    width: 208px;
    height: 208px;
  }
  .person-card strong {
    font-size: 1.4rem;
  }
  .person-card small {
    font-size: .95rem;
  }
  .person-card__face--back {
    font-size: 1.15rem;
  }
}

/* Apila las tarjetas en tablets angostas sin alterar su composición interna. */
@media (max-width: 768px) {
  .people-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .person-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }
}
/* ============================================================
   10. ECOSISTEMA (Menú a páginas internas)
   ============================================================ */
.section--ecosystem {
  background: linear-gradient(135deg, rgba(22,101,52,.15), var(--bg));
}
.ecosystem-intro {
  max-width: 730px;
  margin-bottom: 2.3rem;
}
.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
}
.ecosystem-card {
  min-height: 250px;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform .25s, background .25s, border-color .25s;
  text-align: center; /* <-- Agrega solo esta línea aquí */
  
}
.ecosystem-card h3 {
  margin: .9rem 0 .5rem;
  font-size: 1.45rem;
  color: #ff9900; /* <-- Agrega esta línea con el color que quieras */
}
.ecosystem-card:hover {
  transform: translateY(-6px);
  background: rgba(22,101,52,.5);
  border-color: var(--green-light);
}
.ecosystem-card > span {
  color: var(--orange-light);
  font-size: 1.8rem;
}
.ecosystem-card h3 {
  margin: .9rem 0 .5rem;
  font-size: 1.45rem;
}
.ecosystem-card p {
  color: var(--muted);
  font-size: .88rem;
}

/* ============================================================
   11. MEMORICE (Juego)
   ============================================================ */
.memorice-section {
  padding-top: 0;
}
.memorice-box {
  padding: 2rem;
  border: 1px dashed rgba(234,88,12,.55);
  border-radius: 20px;
  background: linear-gradient(100deg, rgba(234,88,12,.1), transparent);
}
.memorice-box h2 {
  margin-bottom: .65rem;
}
.memorice-box p:last-child {
  max-width: 580px;
  color: var(--muted);
}

/* ============================================================
   12. FAQ - ACORDEÓN
   ============================================================ */
.faq-layout {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: clamp(2rem, 8vw, 7rem);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  /* PESO DE LAS PREGUNTAS: 400 evita la negrita sintética. */
  font: 400 1.25rem/1.35 var(--font-display);
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}
#faq-title { font-weight: 400; }
.faq-list summary:hover {
  color: var(--orange-light);
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: "↓";
  flex: 0 0 auto;
  color: var(--green-light);
  font: 400 1.5rem var(--font-body);
  transition: transform .3s ease;
}
.faq-list details[open] summary::after {
  transform: rotate(180deg);
  color: var(--orange-light);
}
.faq-content {
  padding-bottom: 1.2rem;
  color: var(--muted);
  animation: faqSlide .3s ease-out;
}
@keyframes faqSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   13. CONTACTO
   ============================================================ */
.contact-section {
  background: linear-gradient(125deg, rgba(22,101,52,.2), var(--surface-2) 63%);
}
.contact-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 8vw, 8rem);
  align-items: start;
}
.contact-copy a {
  color: var(--orange-light);
  font-weight: 700;
}
.contact-copy > p:not(.eyebrow) {
  max-width: 440px;
  color: var(--text);
}
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.3rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.contact-form label {
  display: grid;
  gap: .38rem;
  color: var(--text);
  font-size: .82rem;
  font-weight: 700;
}
.contact-form label[style="grid-column"], .contact-form .button, .form-feedback {
  grid-column: 1 / -1;
}
.contact-form label:nth-of-type(5) {
  grid-column: 1 / -1;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .68rem .75rem;
  background: var(--bg);
  color: #fff;
  resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--orange);
}
.form-feedback {
  min-height: 1.3rem;
  margin: 0;
  color: var(--green-light);
  font-size: .8rem;
}

/* ============================================================
   14. ESTILOS COMPARTIDOS: VOLUNTARIADO, SERVICIOS, PRODUCTOS
   ============================================================ */


/* --- 14.3 Productos --- */
.product-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin: 2rem 0 1.5rem;
  padding-left: .45rem;
}

/* ============================================================
   FILTROS TIPO RADIO: mapa y catálogo de productos
   Cada variante relaciona el color del filtro con su contenido.
   ============================================================ */
.filter-choice {
  --filter-rest: rgba(17, 24, 34, .66);
  --filter-active: rgba(22, 101, 52, .82);
  --filter-border: rgba(134, 239, 172, .72);
  --filter-dot: #86efac;
  position: relative;
  display: inline-flex;
  min-height: 44px;
  padding: .68rem 1rem .68rem 1.15rem;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--filter-border);
  border-radius: 8px;
  background: var(--filter-rest);
  color: rgba(255, 255, 255, .9);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .015em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 5px 14px rgba(0, 0, 0, .14);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease,
    border-color .25s ease, box-shadow .25s ease, color .25s ease;
}

.filter-choice::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 11px;
  border: 2px solid var(--filter-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
  transform: translate(-50%, -50%);
  transition: top .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.filter-choice:hover {
  color: #fff;
  background: color-mix(in srgb, var(--filter-active) 55%, transparent);
  transform: translateY(-2px);
}

.filter-choice:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.filter-choice.is-active {
  border-color: var(--filter-border);
  background: var(--filter-active);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
    0 8px 20px color-mix(in srgb, var(--filter-active) 42%, transparent);
  animation: filterChoiceSelect .5s ease-in-out;
}

.filter-choice.is-active::before {
  top: 0;
  background: var(--filter-dot);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .16), 0 0 12px var(--filter-dot);
}

/* Todos: verde semitransparente con borde y punto naranjos. */
.filter-choice--all {
  --filter-rest: rgba(22, 101, 52, .28);
  --filter-active: rgba(22, 101, 52, .84);
  --filter-border: #f97316;
  --filter-dot: #fb923c;
}

/* Ñañas mantiene el mismo naranja de sus pines en el mapa. */
.filter-choice--nanas {
  --filter-rest: rgba(234, 88, 12, .25);
  --filter-active: rgba(234, 88, 12, .84);
  --filter-border: #fb923c;
  --filter-dot: #fff3e8;
}

/* Experiencias comparte el verde de los pines territoriales. */
.filter-choice--experiences {
  --filter-rest: rgba(22, 101, 52, .25);
  --filter-active: rgba(22, 101, 52, .84);
  --filter-border: #86efac;
  --filter-dot: #bbf7d0;
}

/* Categorías del catálogo: fruto, cacao e identidad Ñañas. */
.filter-choice--jams {
  --filter-rest: rgba(159, 41, 66, .22);
  --filter-active: rgba(159, 41, 66, .84);
  --filter-border: #fb7185;
  --filter-dot: #fecdd3;
}

.filter-choice--chocolate {
  --filter-rest: rgba(107, 63, 36, .28);
  --filter-active: rgba(107, 63, 36, .88);
  --filter-border: #d6a36b;
  --filter-dot: #f1d0a7;
}

@keyframes filterChoiceSelect {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
  .filter-choice { transition: none; }
  .filter-choice.is-active { animation: none; }
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1rem;
}
.product-card {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 0 1.15rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, opacity .2s;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--orange-light);
}
.product-card.is-hidden {
  display: none;
}
.product-card__visual {
  display: grid;
  place-items: center;
  height: 155px;
  margin: 0 -1.15rem 1.15rem;
  color: #fff;
  font-size: 3.2rem;
}
.product-card__visual--seed {
  background: linear-gradient(130deg, #21583a, #102d1c);
}
.product-card__visual--jam {
  background: linear-gradient(130deg, #a23b18, #542312);
}
.product-card__visual--chocolate {
  background: linear-gradient(130deg, #5c3322, #26140e);
}
.product-card__visual--plant {
  background: linear-gradient(130deg, #435f2e, #1f351a);
}
.product-card__category {
  margin-bottom: .45rem;
  color: var(--orange-light);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.product-card h3 {
  margin-bottom: .6rem;
  font-size: 1.48rem;
}
.product-card p:not(.product-card__category) {
  color: var(--muted);
  font-size: .88rem;
  margin-bottom: 1rem;
}
.product-card strong {
  margin-top: auto;
  color: var(--text);
  font-size: .9rem;
}
.add-to-cart {
  width: 100%;
  margin-top: .9rem;
  padding: .65rem;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: transparent;
  color: var(--green-light);
  font-size: .82rem;
  font-weight: 700;
  transition: background .2s, color .2s;
}
.add-to-cart:hover {
  background: var(--green);
  color: #fff;
}
.cart-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--orange);
  border-radius: 14px;
  background: var(--surface-2);
}
.cart-panel__icon {
  color: var(--orange-light);
  font-size: 1.5rem;
}
.cart-panel strong {
  margin-left: .35rem;
  color: var(--text);
}
.cart-panel strong span {
  color: var(--orange-light);
}
.cart-panel p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

/* ============================================================
   15. FOOTER ÉTNICO
   ============================================================ */
.ethnic-footer {
  position: relative;
  min-height: 242px;
  background: #06080b;
  padding: 2.5rem 0 1.25rem;
  border-top: 2px solid var(--orange);
  overflow: hidden;
}
.footer-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 108px;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
}
.footer-side {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.footer-side h3 {
  color: var(--text);
  font-size: 1.4rem;
  margin: 0;
}
.footer-side p {
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
  max-width: 250px;
}
.left-side {
  align-items: flex-end;
  text-align: right;
}
.right-side {
  align-items: flex-start;
  text-align: left;
}
.ethnic-triangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid var(--green-light);
  margin-bottom: .5rem;
}
.right-tri {
  border-bottom: none;
  border-top: 15px solid var(--green-light);
  margin-bottom: 0;
  margin-top: .5rem;
}
.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-contact-list li {
  color: var(--muted);
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
}
.footer-contact-list .icon,
.footer-contact-link .footer-social-icon,
.footer-location .footer-social-icon {
  color: var(--orange);
}
.footer-contact-link,
.footer-social-link,
.footer-location {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.35;
  text-decoration: none;
}
.footer-contact-link:hover,
.footer-social-link:hover {
  color: var(--text);
}
.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .85rem;
}
.footer-social-link {
  min-height: 32px;
}
.footer-social-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-social-icon--facebook {
  fill: currentColor;
  stroke: none;
}
.footer-location {
  margin: 0;
}

/* --- Anillo central animado (logo) --- */
.footer-center {
  position: relative;
  z-index: 2;
}
.glowing-ring {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--bg);
  display: grid;
  place-items: center;
  box-shadow: 0 0 30px rgba(234,88,12,.3);
}
.glowing-ring::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--orange), #ffb05c, var(--orange));
  z-index: -1;
  animation: spin 4s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}
.ethnic-border {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px dashed var(--bg);
  display: grid;
  place-items: center;
  background: #10151b;
  overflow: hidden;
}
.logo-placeholder {
  display: block;
  width: 112%;
  height: 100%;
  object-fit: contain;
}
.ethnic-footer .footer-copy {
  grid-column: 1 / -1;
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(226,232,240,.05);
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
}

.ethnic-border { overflow: visible; }



/* ============================================================
   16. ANIMACIÓN DE ENTRADA (Reveal / Scroll)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 10;
  transform: none;
}
:focus-visible {
  outline: 3px solid var(--orange-light);
  outline-offset: 3px;
}

/* ============================================================
   17. RESPONSIVE - MEDIA QUERIES
   ============================================================ */

/* --- Tablets (max 950px) --- */
@media (max-width: 950px) {
  .main-nav { gap: .75rem; }
  .main-nav a { font-size: .78rem; }
  .header-ecosystem { font-size: .7rem; }
  .section-heading--wide { display: block; }
  .section-heading--wide > p:not(.eyebrow) { max-width: 620px; }
  .map-experience { grid-template-columns: 1fr; }
  .map-editor { grid-template-columns: 1fr; align-items: start; }
  .map-editor__actions { justify-content: flex-start; }
  .map-editor__detail { grid-template-columns: 1fr 1fr; }
  .map-editor__detail-description { grid-column: 1 / -1; }
  .map-detail { padding: .45rem; }
  .ecosystem-grid, .product-grid { grid-template-columns: repeat(2,1fr); }
  .service-grid { grid-template-columns: repeat(2,1fr); }
  .membership-grid { grid-template-columns: 1fr; }
  .membership-card { min-height: 0; }
  .footer-content { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .footer-center { display: grid; width: 100%; place-items: center; }
  .left-side { align-items: center; text-align: center; }
  .right-side { align-items: center; text-align: center; }
  .ethnic-triangle { display: none; }
  .footer-contact-list li { justify-content: center; }
}

/* --- Móviles grandes / menú hamburguesa (max 720px) --- */
@media (max-width: 720px) {
  html { scroll-padding-top: 68px; }
  .container { width: min(100% - 28px, 1180px); }
  .header__inner { min-height: 66px; }
  .menu-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: .5rem 14px 1rem;
    background: rgba(15,21,28,.98);
    border-bottom: 1px solid var(--line);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s, opacity .25s;
  }
  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .main-nav a {
    padding: .75rem 0;
    font-size: .95rem;
    border-bottom: 1px solid rgba(226,232,240,.07);
  }
  .header-ecosystem { margin-left: auto; }
  .menu-toggle[aria-expanded="true"] span:nth-of-type(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero { min-height: 700px; }
  .hero__content { padding: 7rem 0 4rem; }
  /* TIPOGRAFÍA MÓVIL DEL HERO: mantiene cada bloque dentro del ancho útil. */
  .hero__content .location-tag {
    max-width: 30ch;
    margin-inline: auto;
    font-size: .68rem;
    line-height: 1.45;
    letter-spacing: .11em;
  }
  .hero__content .titulo-nanas {
    max-width: 100%;
    font-size: clamp(2.15rem, 10vw, 2.65rem) !important;
    line-height: 1.12 !important;
  }
  .hero__content .hero__lead {
    max-width: 32ch;
    font-size: clamp(.92rem, 4.2vw, 1rem);
    line-height: 1.55;
  }
  .split-grid, .split-grid--reverse, .faq-layout, .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  /* Reduce proporcionalmente tarjetas, fotografías y textos en celulares. */
  .people-grid { grid-template-columns: 1fr; }
  .person-card { height: 320px; }
  .person-card__face {
    padding: 1.25rem;
    gap: .55rem;
  }
  .person-card__avatar {
    width: 182px;
    height: 182px;
  }
  .person-card strong {
    font-size: 1.25rem;
  }
  .person-card small {
    font-size: .9rem;
  }
  .person-card__face--back {
    font-size: 1.05rem;
  }
}

/* --- Móviles pequeños (max 520px) --- */
@media (max-width: 520px) {
  .header-ecosystem { display: none; }
  .header-ecosystem__name { display: none; }
  .theme-toggle { margin-left: auto; }
  .hero__scroll { right: 14px; }
  .section { padding: 4rem 0; }
  .map-stage { min-height: 250px; }
  .map-pin { width: 29px; height: 29px; font-size: .75rem; }
  .map-editor__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .map-editor__actions a { grid-column: 1 / -1; }
  .map-editor__detail { grid-template-columns: 1fr; }
  .map-editor__detail-description { grid-column: auto; }
  .ecosystem-grid, .service-grid, .product-grid { grid-template-columns: 1fr; }
  .cart-panel { align-items: flex-start; flex-direction: column; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form label { grid-column: 1 / -1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .theme-toggle,
  .theme-toggle__icon,
  .theme-toggle__thumb { transition: none; }
}

/* --- Preferencia de movimiento reducido (accesibilidad) --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero__video { display: none; }
  .hero { background: var(--surface); }
}
/* ============================================================
   18. EFECTO DE PARTÍCULAS (Fondo de estrellas)
   ============================================================ */
.particles-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Conserva el estado de las animaciones decorativas mientras su sección no es visible. */
.section-shell.is-offscreen-paused,
.section-shell.is-offscreen-paused *,
.section-shell.is-offscreen-paused::before,
.section-shell.is-offscreen-paused::after,
.section-shell.is-offscreen-paused *::before,
.section-shell.is-offscreen-paused *::after,
html.is-document-hidden *,
html.is-document-hidden *::before,
html.is-document-hidden *::after {
  animation-play-state: paused !important;
}
.hero h1 {
  font-family: "Kaushan Script", cursive !important;
}

/* ==========================================================
   UBICACIÓN EXACTA DEL BOTÓN EN MÓVIL (SEGÚN IMAGEN)
   ========================================================== */
@media (max-width: 767px) {
    /* Nos aseguramos de que el contenedor principal sea la referencia */
    .header__inner {
        position: relative; 
    }

    .header-ecosystem {
        display: inline-flex !important; /* Forzamos a que aparezca */
        position: absolute !important; /* Lo saca del flujo para moverlo libremente */
        
        /* === COORDENADAS PARA LA CRUZ NARANJA === */
        right: 30px; /* Lo separa del borde derecho, dejándolo justo al lado del menú ☰ */
        top: 70px; /* Posición vertical elegida para móvil */
        transform: translateY(-40%); /* Lo centra verticalmente a la perfección */
        
        /* === AJUSTES DE TAMAÑO PARA QUE QUEPA === */
        min-width: 170px;
        min-height: 41px;
        font-size: .696rem;
        padding: 10px 24px;
        white-space: nowrap; /* Evita que el texto se rompa en dos líneas */
        z-index: 100; /* Lo mantiene por encima de cualquier otro elemento */
    }

    .luxury-btn__text { letter-spacing: 1.2px; }
    .luxury-btn__ornament-left,
    .luxury-btn__ornament-right {
        width: 14px;
        height: 14px;
    }
    .luxury-btn__ornament-left { left: 12px; }
    .luxury-btn__ornament-right { right: 12px; }

    /* ==========================================================
       SOLUCIÓN: PINES DEL MAPA RESPONSIVOS
       ========================================================== */
    /* 1. Obligamos al contenedor a tener el mismo alto que la imagen */
    .map-stage {
        position: relative;
        width: 100%;
        /* Display flex evita espacios "fantasma" debajo de las imágenes */
        display: flex; 
        justify-content: center;
        align-items: center;
    }

    .map-stage img {
        width: 100%;
        height: auto; /* Mantiene la proporción perfecta del mapa */
        display: block;
        object-fit: contain;
    }

    /* 2. Aseguramos que los pines usen las coordenadas con exactitud */
    .map-pin {
        position: absolute;
        top: var(--y);
        left: var(--x);
        /* Esto es clave: centra el punto medio del pin exactamente en la coordenada */
        transform: translate(-50%, -50%); 
        z-index: 10;
    }

    /* 3. Ajuste UX para Celulares: Achicamos los pines para que no tapen el mapa */
    .map-pin {
        /* El !important obliga al navegador a usar la coordenada móvil sí o sí */
        left: var(--x-movil, var(--x)) !important;
        top: var(--y-movil, var(--y)) !important;
        
        /* Aseguramos que mantenga su tamaño ajustado */
        transform: translate(-50%, -50%) scale(0.7) !important; 
    }

    /* =========================================
       ESTILOS PARA LOS GIFS DEL ECOSISTEMA
       ========================================= */
    .icono-gif {
        width: 65px; /* Controla el tamaño exacto del GIF. Ajusta este número según prefieras */
        height: auto;
        margin-bottom: 1rem; /* Separa el GIF del título <h3> */
        display: inline-block;
        transition: transform 0.3s ease; /* Prepara el terreno para una animación suave al pasar el mouse */
    }

    /* Efecto extra: hace que el GIF crezca un poquito cuando el usuario pasa el mouse por la tarjeta */
    .ecosystem-card:hover .icono-gif {
        transform: scale(1.15); 
    }
}

/* =========================================
   ESTILOS FINALES: ECOSISTEMA Y HEADER
   ========================================= */

/* 1. Tamaño por defecto (Para Celulares) */
.icono-gif {
  width: 100px !important;
  height: 100px !important;
  object-fit: contain !important;
  margin: 0 auto 1rem auto !important;
  display: block !important;
}

/* 2. Tamaño para pantallas grandes (Para Computadores/Escritorio) */
@media (min-width: 768px) {
  .icono-gif {
    width: 60px !important; 
    height: 60px !important;
  }
}

/* ==========================================================
   BLINDAJE Y PROTECCIÓN DEL HEADER
   Esta es ahora la ÚNICA fuente de verdad para el tamaño de
   letra del header. Si en el futuro el título se ve raro,
   este es el único bloque que hay que revisar/editar.
   ========================================================== */
/* =========================================
   TÍTULO HERO NUEVO Y LIMPIO
   ========================================= */
.titulo-nanas {
  font-family: 'Kaushan Script', cursive !important;
  font-size: 3.5rem !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  margin: 0 auto 1.35rem auto !important;
  color: #ffffff !important;
  letter-spacing: 0.01em !important;
  transform: none !important; /* Evita que salte por animaciones */
}

.titulo-nanas .texto-verde {
  color: var(--green-light) !important;
  font-weight: 400 !important;
}
.ecosystem-card {
  border: 2px solid var(--green);   /* si quieres el borde visible siempre, no solo en hover */
  transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow .4s ease,
              background .4s ease,
              border-color .4s ease;
}

.ecosystem-card:hover {
  transform: scale(1.06);                                   /* esto sí es zoom real */
  box-shadow: 0 18px 45px rgba(101, 80, 22, 0.4);            /* sombra verde brillante */
  background: rgba(22, 101, 52, 0.5);
  border-color: var(--green-light);
  z-index: 2;
}

/* ============================================================
   CARRUSEL 3D DE SERVICIOS
   Bloque aislado para no alterar otras tarjetas o carruseles.
   ============================================================ */
.services-showcase {
  overflow: clip;
  padding-block: clamp(4.5rem, 7vw, 7rem);
  background: #090d14 !important;
  border-block: 1px solid var(--line);
  isolation: isolate;
}

.services-showcase__container {
  width: min(1380px, calc(100% - 32px));
}

.services-showcase__heading {
  width: min(760px, 100%);
  margin: 0 auto clamp(2.25rem, 4vw, 3.5rem);
  text-align: center;
}

.services-showcase__heading h1,
.services-showcase__heading h2 {
  margin: .35rem 0 .8rem;
  color: var(--text);
  font-family: "Fraunces", serif;
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  line-height: 1.04;
  text-wrap: balance;
}

.services-showcase__heading > p:last-child {
  margin: 0 auto;
  max-width: 700px;
  color: var(--muted);
  font-size: clamp(.98rem, 1.3vw, 1.12rem);
}

/* La rejilla deja las flechas fuera del escenario sin restar profundidad. */
.services-showcase__carousel {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: clamp(.5rem, 1.5vw, 1.25rem);
  width: 100%;
}

.services-showcase__stage {
  position: relative;
  min-width: 0;
  height: 680px;
  perspective: 1350px;
  perspective-origin: 50% 47%;
  transform-style: preserve-3d;
  outline: none;
  touch-action: pan-y pinch-zoom;
}

.services-showcase__stage:focus-visible {
  border-radius: 24px;
  box-shadow: 0 0 0 3px var(--orange-light);
}

.services-showcase__cards {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.services-showcase__card {
  --card-accent: var(--green-light);
  position: absolute;
  top: 20px;
  left: 50%;
  display: grid;
  grid-template-rows: 65% 35%;
  width: min(430px, 42vw);
  height: 580px;
  overflow: hidden;
  color: var(--text);
  background: #0d111b;
  border: 1px solid rgba(226, 232, 240, .12);
  border-radius: 25px;
  box-shadow: 0 26px 68px rgba(0, 0, 0, .42);
  transform-style: preserve-3d;
  transform-origin: center center;
  backface-visibility: hidden;
  transition: transform 1650ms cubic-bezier(.65, 0, .35, 1),
              opacity 1450ms cubic-bezier(.65, 0, .35, 1),
              border-color 1300ms ease-in-out,
              box-shadow 1300ms ease-in-out;
  will-change: transform, opacity;
}

.services-showcase__card[data-category="Arriendo"] { --card-accent: var(--orange); }

.services-showcase__card--active {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  border: 2px solid var(--card-accent);
  transform: translate3d(-50%, 0, 145px) rotateY(0deg) scale(1);
  box-shadow: 0 34px 82px rgba(0, 0, 0, .58), 0 0 28px color-mix(in srgb, var(--card-accent) 18%, transparent);
}

.services-showcase__card--previous {
  z-index: 2;
  opacity: .82;
  cursor: pointer;
  pointer-events: auto;
  transform: translate3d(calc(-50% - 350px), 36px, -180px) rotateY(49deg) scale(.87);
}

.services-showcase__card--next {
  z-index: 2;
  opacity: .82;
  cursor: pointer;
  pointer-events: auto;
  transform: translate3d(calc(-50% + 350px), 36px, -180px) rotateY(-49deg) scale(.87);
}

.services-showcase__card--hidden {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-50%, 52px, -420px) scale(.72);
}

.services-showcase__media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-2);
}

.services-showcase__media::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(13, 17, 27, .72));
  pointer-events: none;
}

.services-showcase__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1650ms cubic-bezier(.65, 0, .35, 1);
}

.services-showcase__card--active .services-showcase__media img { transform: scale(1.025); }

.services-showcase__badge {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 18px;
  padding: .42rem .72rem;
  color: #fff;
  background: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) 86%, #0d111b);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.services-showcase__content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1.35rem 1.7rem 3.4rem;
  background: #0d111b;
}

.services-showcase__content h3 {
  margin: 0 0 .45rem;
  color: var(--text);
  font-family: "Fraunces", serif;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.12;
}

.services-showcase__content p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.services-showcase__detail {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 42px;
  padding: .62rem 1rem;
  color: #fff;
  background: var(--orange);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: .72rem;
  box-shadow: 0 8px 20px rgba(234, 88, 12, .28);
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.services-showcase__detail:is(:hover, :focus-visible) {
  color: #fff;
  background: var(--orange-light);
  box-shadow: 0 10px 24px rgba(234, 88, 12, .38);
  outline: none;
  transform: translateY(-2px);
}

.services-showcase__detail:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .92);
  outline-offset: 3px;
}

.services-showcase__detail span {
  font-size: 1.15em;
  transition: transform .2s ease;
}

.services-showcase__detail:is(:hover, :focus-visible) span { transform: translateX(3px); }

.services-showcase__card--active .services-showcase__detail {
  animation: serviceDetailInvite .82s .38s cubic-bezier(.22, .9, .3, 1) backwards;
}

@keyframes serviceDetailInvite {
  0%, 100% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-5px) scale(1.035); }
  68% { transform: translateY(1px) scale(.995); }
}

.services-showcase__card:not(.services-showcase__card--active) .services-showcase__detail { pointer-events: none; }

.services-showcase__arrow {
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0 0 3px;
  color: var(--text);
  background: rgba(226, 232, 240, .08);
  border: 1px solid rgba(226, 232, 240, .13);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  font-size: 2rem;
  line-height: 1;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.services-showcase__arrow:hover {
  background: var(--green);
  border-color: var(--green-light);
  transform: scale(1.06);
}

.services-showcase__dots {
  position: absolute;
  z-index: 6;
  bottom: 20px;
  left: 50%;
  display: flex;
  justify-content: center;
  gap: 7px;
  transform: translateX(-50%);
}

.services-showcase__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: rgba(226, 232, 240, .25);
  border: 0;
  border-radius: 999px;
  transition: width .25s ease, background .25s ease;
}

.services-showcase__dot[aria-current="true"] { width: 24px; background: var(--green-light); }

/* Control discreto para detener o reanudar el avance automático. */
.services-showcase__autoplay {
  position: absolute;
  z-index: 7;
  bottom: 10px;
  left: calc(50% + 92px);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--text);
  background: rgba(226, 232, 240, .08);
  border: 1px solid rgba(226, 232, 240, .2);
  border-radius: 50%;
  font-size: .72rem;
  line-height: 1;
}

.services-showcase__autoplay:hover { background: var(--green); }
.services-showcase__autoplay:disabled { cursor: not-allowed; opacity: .45; }

/* El diálogo nativo aporta bloqueo del fondo y gestión accesible de la capa superior. */
.services-showcase__modal {
  width: min(590px, calc(100% - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  overflow: auto;
  color: var(--text);
  background: #0d111b;
  border: 1px solid var(--green-light);
  border-radius: 24px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .72);
}

.services-showcase__modal::backdrop { background: rgba(5, 8, 13, .82); backdrop-filter: blur(7px); }
.services-showcase__modal-panel { position: relative; padding: clamp(1.6rem, 5vw, 2.8rem); }

.services-showcase__modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0 0 3px;
  color: var(--text);
  background: rgba(226, 232, 240, .08);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
}

.services-showcase__modal-category {
  margin: 0 3rem .5rem 0;
  color: var(--green-light);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.services-showcase__modal h3 {
  margin: 0 3rem .8rem 0;
  font-family: "Fraunces", serif;
  font-size: clamp(1.8rem, 5vw, 2.65rem);
  line-height: 1.08;
}

.services-showcase__modal h4 { margin: 1.5rem 0 .5rem; font-family: "Fraunces", serif; font-size: 1.1rem; }
.services-showcase__modal p, .services-showcase__modal li { color: var(--muted); }
.services-showcase__modal ul { margin: .5rem 0 1.8rem; padding-left: 1.25rem; }
.services-showcase__modal li::marker { color: var(--orange); }
.services-showcase__contact-actions {
  display: flex;
  align-items: stretch;
  gap: .7rem;
  width: 100%;
}

.services-showcase__consult {
  flex: 1 1 auto;
  min-height: 52px;
  gap: .65rem;
  justify-content: center;
  text-align: center;
  background: var(--orange);
  border-color: var(--orange);
}

.services-showcase__consult > span:first-child {
  font-weight: 800;
  letter-spacing: .01em;
}

.services-showcase__consult-arrow {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform .2s ease;
}

.services-showcase__consult:is(:hover, :focus-visible) .services-showcase__consult-arrow {
  transform: translateX(4px);
}

.services-showcase__whatsapp {
  flex: 0 0 52px;
  display: grid;
  width: 52px;
  min-height: 52px;
  place-items: center;
  color: #fff;
  background: #16a34a;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(13, 92, 47, .32);
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}

.services-showcase__whatsapp svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.services-showcase__whatsapp:is(:hover, :focus-visible) {
  color: #fff;
  background: #12813c;
  outline: 3px solid rgba(255, 255, 255, .9);
  outline-offset: 3px;
  transform: translateY(-2px) scale(1.04);
}

@media (max-width: 1050px) {
  .services-showcase__stage { height: 650px; perspective: 1250px; }
  .services-showcase__card { width: min(390px, 45vw); height: 550px; }
  .services-showcase__card--previous { transform: translate3d(calc(-50% - 280px), 34px, -165px) rotateY(40deg) scale(.86); }
  .services-showcase__card--next { transform: translate3d(calc(-50% + 280px), 34px, -165px) rotateY(-40deg) scale(.86); }
  .services-showcase__content { padding-inline: 1.35rem; }
  .services-showcase__content p { font-size: .84rem; }
}

@media (max-width: 680px) {
  .services-showcase { padding-block: 4rem; }
  .services-showcase__container { width: min(100% - 20px, 1380px); }
  .services-showcase__heading { padding-inline: 6px; margin-bottom: 1.75rem; }
  .services-showcase__carousel { position: relative; display: block; }
  .services-showcase__stage { height: 620px; perspective: none; }
  .services-showcase__card { top: 0; width: min(420px, calc(100% - 44px)); height: 552px; border-radius: 22px; }
  .services-showcase__card--active { transform: translate3d(-50%, 0, 0) scale(1); }
  .services-showcase__card--previous {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(calc(-50% - 100vw), 0, 0) scale(.96);
  }
  .services-showcase__card--next {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(calc(-50% + 100vw), 0, 0) scale(.96);
  }
  .services-showcase__content { padding: 1.2rem 1.3rem 3.25rem; }
  /* Evita la línea intermitente producida por el redondeo subpíxel entre foto y contenido. */
  .services-showcase__content {
    position: relative;
    z-index: 2;
    box-shadow: 0 -3px 0 #0d111b;
  }
  /* En móvil la tarjeta ya se desplaza; se desactiva el zoom interno para evitar capas en conflicto. */
  .services-showcase__media img,
  .services-showcase__card--active .services-showcase__media img {
    transform: scale(1.01);
    transition: none;
  }
  .services-showcase__content h3 { font-size: 1.35rem; }
  .services-showcase__content p { font-size: .83rem; }
  .services-showcase__arrow {
    position: absolute;
    z-index: 8;
    top: 246px;
    width: 42px;
    height: 42px;
    background: rgba(13, 17, 27, .88);
  }
  .services-showcase__arrow--prev { left: 0; }
  .services-showcase__arrow--next { right: 0; }
  .services-showcase__dots { bottom: 20px; }
  .services-showcase__autoplay { bottom: 10px; left: calc(50% + 87px); }
}

@media (max-width: 380px) {
  .services-showcase__stage { height: 585px; }
  .services-showcase__card { width: calc(100% - 34px); height: 518px; grid-template-rows: 62% 38%; }
  .services-showcase__arrow { top: 225px; width: 38px; height: 38px; font-size: 1.7rem; }
  .services-showcase__content { padding: 1rem 1.1rem 3rem; }
  .services-showcase__content h3 { font-size: 1.2rem; }
  .services-showcase__content p { -webkit-line-clamp: 3; font-size: .78rem; }
  .services-showcase__dots { bottom: 20px; gap: 5px; }
  .services-showcase__autoplay { bottom: 10px; left: calc(50% + 76px); }
  .services-showcase__dot { width: 7px; height: 7px; }
  .services-showcase__dot[aria-current="true"] { width: 20px; }
}

/* Celular horizontal: el menú se desplaza hacia arriba y la tarjeta se adapta a la altura útil. */
@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
  .services-page .site-header {
    position: relative;
  }

  .services-page .services-showcase {
    padding-block: 1.25rem;
  }

  .services-page .services-showcase__heading {
    margin-bottom: 1rem;
  }

  .services-page .services-showcase__heading h1 {
    margin-block: .2rem .45rem;
    font-size: clamp(1.65rem, 5vw, 2.3rem);
  }

  .services-page .services-showcase__heading > p:last-child {
    max-width: 620px;
    font-size: .8rem;
    line-height: 1.4;
  }

  .services-page .services-showcase__carousel {
    --services-landscape-card-height: clamp(300px, calc(100svh - 54px), 380px);
    position: relative;
    display: block;
  }

  .services-page .services-showcase__stage {
    height: calc(var(--services-landscape-card-height) + 48px);
    perspective: 1100px;
    perspective-origin: 50% 46%;
  }

  .services-page .services-showcase__card {
    top: 0;
    grid-template-rows: 55% 45%;
    width: min(340px, calc(100% - 64px));
    height: var(--services-landscape-card-height);
    border-radius: 20px;
  }

  .services-page .services-showcase__card--active {
    z-index: 3;
    opacity: 1;
    transform: translate3d(-50%, 0, 90px) rotateY(0deg) scale(1);
  }

  .services-page .services-showcase__card--previous {
    z-index: 2;
    opacity: .8;
    pointer-events: auto;
    transform: translate3d(calc(-50% - clamp(205px, 28vw, 245px)), 12px, -150px) rotateY(48deg) scale(.82);
  }

  .services-page .services-showcase__card--next {
    z-index: 2;
    opacity: .8;
    pointer-events: auto;
    transform: translate3d(calc(-50% + clamp(205px, 28vw, 245px)), 12px, -150px) rotateY(-48deg) scale(.82);
  }

  .services-page .services-showcase__content {
    position: relative;
    z-index: 2;
    padding: .65rem 1rem 2.4rem;
    box-shadow: 0 -3px 0 #0d111b;
  }

  .services-page .services-showcase__content h3 {
    margin-bottom: .25rem;
    font-size: 1.08rem;
  }

  .services-page .services-showcase__content p {
    font-size: .74rem;
    line-height: 1.3;
    -webkit-line-clamp: 2;
  }

  .services-page .services-showcase__detail {
    font-size: .8rem;
  }

  .services-page .services-showcase__media img,
  .services-page .services-showcase__card--active .services-showcase__media img {
    transform: scale(1.01);
    transition: none;
  }

  .services-page .services-showcase__arrow {
    position: absolute;
    z-index: 8;
    top: calc((var(--services-landscape-card-height) - 42px) / 2);
    width: 42px;
    height: 42px;
    background: rgba(13, 17, 27, .88);
  }

  .services-page .services-showcase__arrow--prev { left: 6px; }
  .services-page .services-showcase__arrow--next { right: 6px; }
  .services-page .services-showcase__dots { bottom: 16px; }
  .services-page .services-showcase__autoplay { bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .services-showcase__card,
  .services-showcase__media img,
  .services-showcase__dot,
  .services-showcase__arrow,
  .services-showcase__detail,
  .services-showcase__detail span,
  .services-showcase__consult-arrow,
  .services-showcase__whatsapp { transition: none !important; }
  .services-showcase__detail { animation: none !important; }
}

/* ============================================================
   LETREROS RÚSTICOS DE ENCABEZADOS
   Estructura común y tamaños independientes según cada proporción.
   ============================================================ */
.section-sign,
.section-sign.section-heading--wide {
  --section-sign-shift: clamp(-6rem, -8vw, -1.25rem);
  --section-sign-angle-start: -6deg;
  --section-sign-angle-end: -9deg;
  --section-sign-angle-rest: -7deg;
  display: flex;
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  text-align: center;
  perspective: 1200px;
}

.section-sign__image {
  display: block;
  width: 100%;
  height: auto;
  margin: .2rem auto 0;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .18));
  transform: translateX(var(--section-sign-shift)) perspective(1200px) rotateY(var(--section-sign-angle-start)) translateZ(0);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
  animation: sectionSignDepth 6s ease-in-out infinite alternate;
}

/* Movimiento perpendicular sutil: un extremo avanza y el opuesto retrocede. */
@keyframes sectionSignDepth {
  from {
    transform: translateX(var(--section-sign-shift)) perspective(1200px) rotateY(var(--section-sign-angle-start)) translateZ(0);
  }
  to {
    transform: translateX(var(--section-sign-shift)) perspective(1200px) rotateY(var(--section-sign-angle-end)) translateZ(12px);
  }
}

/* Reduce los tres letreros un 20 % y equilibra su distancia con el contenido siguiente. */
.section-sign--voluntariado .section-sign__image {
  width: min(62.4vw, 288px);
}

.section-sign--servicios .section-sign__image {
  width: min(72vw, 592px);
}

.section-sign--productos .section-sign__image {
  width: min(72vw, 560px);
}

.section-sign--servicios { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section-sign--productos { margin-bottom: 1rem; }

@media (max-width: 620px) {
  /* AJUSTE MANUAL MÓVIL: cambia estos anchos sin superar 90vw para evitar overflow. */
  .section-sign--voluntariado .section-sign__image { width: min(48vw, 224px); }
  .section-sign--servicios .section-sign__image,
  .section-sign--productos .section-sign__image { width: min(90vw, 100%); }
}

/* Servicios en tablet y ventanas PC angostas: desplazamiento visible hacia arriba. */
@media (min-width: 621px) and (max-width: 1099px) {
  .section-sign--servicios {
    position: relative;
    top: -5rem;
    margin-bottom: -3rem;
  }
}

/* PC compacto: el ancho disponible permite la composición lateral desde 1100 px. */
@media (min-width: 1100px) and (max-width: 1279px) {
  /* AJUSTE MANUAL PC COMPACTO: height cambia el tamaño y left la posición horizontal. */
  .section-sign--servicios {
    --section-sign-height: 353px;
    --section-sign-left: -30%;
  }

  .section-sign--productos {
    --section-sign-height: 361px;
    --section-sign-left: -30%;
  }

  .section-sign--servicios,
  .section-sign--productos {
    --section-sign-shift: 0px;
    position: relative;
    left: var(--section-sign-left);
    /* AJUSTE MANUAL VERTICAL PC COMPACTO: aumenta el valor para bajarlos. */
    top: clamp(2.5rem, 5vw, 4rem);
    z-index: 4;
    align-items: flex-start;
    margin: 0;
    text-align: left;
  }

  /* AJUSTE VERTICAL DE SERVICIOS: un valor más negativo lo sube todavía más. */
  .section-sign--servicios { top: -5rem; }

  .section-sign--servicios .eyebrow,
  .section-sign--productos .eyebrow {
    width: 100%;
    margin-bottom: .25rem;
    text-align: center;
  }

  .section-sign--servicios .section-sign__image,
  .section-sign--productos .section-sign__image {
    width: auto;
    max-width: none;
    height: var(--section-sign-height);
  }

  .services-showcase__container,
  .section--products > .container {
    display: grid;
    width: min(1380px, calc(100% - 24px));
    max-width: 1380px;
    column-gap: clamp(3rem, 5vw, 4rem);
    align-items: start;
  }

  /* Las columnas laterales respetan el ancho derivado de la altura del PNG. */
  .services-showcase__container { grid-template-columns: 392px minmax(0, 1fr); }
  .section--products > .container { grid-template-columns: 390px minmax(0, 1fr); }

  .services-showcase__heading,
  .section-sign--productos {
    grid-column: 1;
    margin: 0;
  }

  .services-showcase__carousel,
  .section--products .product-filters,
  .section--products .product-grid,
  .section--products .cart-panel { grid-column: 2; }

  /* Las flechas permanecen fuera del escenario; sólo las tarjetas se recortan. */
  .services-showcase__carousel {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 1rem;
    overflow: visible;
  }
  .services-showcase__stage { overflow: clip; }
  .section-sign--productos { grid-row: 1 / span 3; }
  .section--products .product-filters { margin-top: 0; }
  .section--products .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* En escritorio, el letrero ocupa una esquina lateral y el contenido continúa a su derecha. */
@media (min-width: 1280px) {
  /* AJUSTE MANUAL ESCRITORIO:
     height controla la altura; left negativo mueve hacia la izquierda. */
  .section-sign--voluntariado {
    --section-sign-height: 432px;
    --section-sign-left: -30%;
  }

  .section-sign--servicios {
    --section-sign-height: 460px;
    --section-sign-left: -30%;
  }

  .section-sign--productos {
    --section-sign-height: 440px;
    --section-sign-left: -30%;
  }

  .section-sign,
  .section-sign.section-heading--wide {
    --section-sign-shift: 0px;
    position: relative;
    left: var(--section-sign-left);
    /* AJUSTE MANUAL VERTICAL ESCRITORIO: centra visualmente el letrero junto al contenido. */
    top: clamp(3.5rem, 5vw, 5rem);
    z-index: 4;
    align-items: flex-start;
    margin: 0;
    text-align: left;
  }

  /* AJUSTE VERTICAL DE SERVICIOS: independiente de los otros dos letreros. */
  .section-sign--servicios { top: -5rem; }

  /* El texto naranja acompaña el techo del letrero y se desplaza junto con él. */
  .section-sign .eyebrow {
    width: 100%;
    margin-bottom: .25rem;
    text-align: center;
  }
  .section-sign__image {
    width: auto;
    max-width: 100%;
    height: var(--section-sign-height);
  }

  /* Servicios y Productos crecen hacia la izquierda sin ensanchar su columna. */
  .section-sign--servicios .section-sign__image,
  .section-sign--productos .section-sign__image { max-width: none; }

  /* Voluntariado: cartel lateral junto a controles, planes y nota. */
  .participation .participation__container {
    display: grid;
    width: min(1380px, calc(100% - 32px));
    max-width: 1380px;
    grid-template-columns: minmax(240px, 288px) minmax(0, 1fr);
    column-gap: clamp(5rem, 7vw, 7rem);
    align-items: start;
  }

  .participation__heading.section-sign {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
    text-align: left;
  }

  .participation .membership-controls,
  .participation .membership-grid,
  .participation .membership-note { grid-column: 2; }
  .participation .membership-controls { margin-top: 0; }

  /* Servicios: conserva el escenario 3D completo en la columna principal. */
  .services-showcase__container {
    display: grid;
    grid-template-columns: 510px minmax(0, 1fr);
    column-gap: clamp(4rem, 5vw, 5rem);
    align-items: start;
  }

  .services-showcase__heading {
    grid-column: 1;
    margin: 0;
  }

  .services-showcase__carousel {
    grid-column: 2;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 1rem;
    overflow: visible;
  }
  .services-showcase__stage { overflow: clip; }

  /* Productos: el letrero queda en la esquina y la tienda mantiene su estructura. */
  .section--products > .container {
    display: grid;
    width: min(1380px, calc(100% - 32px));
    max-width: 1380px;
    grid-template-columns: 476px minmax(0, 1fr);
    column-gap: clamp(4rem, 5vw, 5rem);
    align-items: start;
  }

  .section-sign--productos {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .section--products .product-filters,
  .section--products .product-grid,
  .section--products .cart-panel { grid-column: 2; }
  .section--products .product-filters { margin-top: 0; }
  .section--products .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  /* Conserva la orientación solicitada, pero elimina el movimiento continuo. */
  .section-sign__image {
    animation: none;
    transform: translateX(var(--section-sign-shift)) perspective(1200px) rotateY(var(--section-sign-angle-rest));
  }
}

/* ============================================================
   HERO DE FUEGO — SERVICIOS Y PRODUCTOS
   Replica la primera sección visual de Inicio/Ecosistema y coloca el letrero
   como título protagonista sobre el video a ancho completo.
   ============================================================ */
.page-fire-hero {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: min(88vh, 780px);
  overflow: hidden;
  place-items: center;
  isolation: isolate;
}

.page-fire-hero__video-wrap,
.page-fire-hero__overlay {
  position: absolute;
  inset: 0;
}

.page-fire-hero__video-wrap {
  z-index: 0;
  overflow: hidden;
  contain: paint;
  background:
    radial-gradient(circle at 50% 55%, rgba(234, 88, 12, .24), transparent 58%),
    #090d14;
}

.page-fire-hero__video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.15) brightness(.84);
  transition: opacity .25s ease;
}

.page-fire-hero__overlay {
  z-index: 1;
  background:
    radial-gradient(ellipse 62% 54% at 50% 60%, rgba(234, 88, 12, .2), transparent 72%),
    linear-gradient(180deg, rgba(9, 13, 20, .38), rgba(9, 13, 20, .62) 58%, rgba(9, 13, 20, .95));
}

.page-fire-hero__content {
  position: relative;
  z-index: 2;
  width: min(760px, calc(100% - 32px));
  padding-block: clamp(6.5rem, 12vw, 9rem) 5.5rem;
  text-align: center;
  perspective: 1400px;
}

.page-fire-hero__content .eyebrow {
  margin-bottom: clamp(.5rem, 1.5vw, 1rem);
  color: var(--orange-light);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.page-fire-hero__sign {
  display: block;
  width: min(100%, 660px);
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .46)) drop-shadow(0 0 18px rgba(234, 88, 12, .13));
  transform-origin: 48% 70%;
  backface-visibility: hidden;
  will-change: transform;
  animation: pageFireSignDepth 8s ease-in-out infinite alternate;
}

/* Perspectiva hacia el lado opuesto de los letreros interiores anteriores. */
@keyframes pageFireSignDepth {
  from { transform: perspective(1400px) rotateY(6deg) translateZ(0); }
  to { transform: perspective(1400px) rotateY(9deg) translateZ(14px); }
}

.page-fire-hero__seam {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 3;
  height: 46px;
  background: #090d14;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 L0 8 Q5 0 10 8 T20 8 T30 8 T40 8 T50 8 T60 8 T70 8 T80 8 T90 8 T100 8 T110 8 T120 8 L120 20 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 L0 8 Q5 0 10 8 T20 8 T30 8 T40 8 T50 8 T60 8 T70 8 T80 8 T90 8 T100 8 T110 8 T120 8 L120 20 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* El contenido vuelve a ocupar todo el ancho debajo del hero. */
.services-page .services-showcase__container,
.products-page .section--products > .container {
  display: block;
  width: min(1180px, calc(100% - 32px));
  max-width: 1180px;
}

.services-page .services-showcase__carousel {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}

.products-page .section--products .product-filters,
.products-page .section--products .product-grid,
.products-page .section--products .cart-panel {
  grid-column: auto;
}

.products-page .section--products .product-filters {
  justify-content: center;
  margin-top: 0;
}

@media (max-width: 620px) {
  .page-fire-hero { min-height: min(72svh, 620px); }
  .page-fire-hero__video-wrap video { filter: none; }
  .page-fire-hero__content { width: min(94%, 560px); padding-block: 5.5rem 4rem; }
  .page-fire-hero__sign { width: min(100%, 520px); }
}

@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
  .page-fire-hero { min-height: 100svh; }
  .page-fire-hero__content { width: min(64vw, 560px); padding-block: 2rem; }
}

@media (min-width: 1280px) {
  .products-page .section--products .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-fire-hero__video-wrap video { display: none; }
  .page-fire-hero__video-wrap {
    background: radial-gradient(circle at 50% 65%, rgba(234, 88, 12, .32), transparent 45%), #11151b;
  }
  .page-fire-hero__sign {
    animation: none;
    transform: perspective(1400px) rotateY(7deg);
  }
}

/* ============================================================
   CTA VEGETAL DE VOLUNTARIADO
   Adaptación reutilizable del botón de Uiverse.io de Shell0110, con las
   hojas SVG aportadas por MuhammadHasann y el verde original del sitio.
   ============================================================ */
.plant-cta {
  position: relative;
  z-index: 4;
  display: inline-flex;
  min-height: 64px;
  padding: 16px 44px;
  overflow: visible;
  align-items: center;
  justify-content: center;
  color: var(--green);
  background: rgba(255, 255, 255, .86);
  border: 3px solid var(--green-light);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(45, 135, 78, .1);
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: color .3s ease-in-out, background .3s ease-in-out, border-radius .3s ease-in-out, box-shadow .3s ease-in-out, padding .3s ease-in-out, transform .3s ease-in-out;
}

.plant-cta__label {
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

.plant-cta__leaf {
  position: absolute;
  top: 10%;
  left: 50%;
  z-index: 1;
  display: block;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: translate(-50%, 0);
  transform-origin: 50% 100%;
  transition: top .5s ease-in-out, left .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;
}

.plant-cta__leaf svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
}

.plant-cta__leaf--1 { --leaf-sway: 5deg; --leaf-settle: 1deg; color: #7b9b3a; }
.plant-cta__leaf--2 { --leaf-sway: 10deg; --leaf-settle: 4deg; color: #556729; }
.plant-cta__leaf--3 { --leaf-sway: -3deg; --leaf-settle: -1deg; color: #556729; }
.plant-cta__leaf--4,
.plant-cta__leaf--5 { --leaf-sway: -4deg; --leaf-settle: -1deg; color: #3c4819; }

.plant-cta:is(:hover, :focus-visible, .is-blooming) {
  padding-inline: 32px;
  color: #f0ede8;
  background: linear-gradient(#795738, #5b3c11);
  border-radius: 8px 8px 24px 24px;
  box-shadow: 2px 2px 5px #000, inset 2px 2px 10px #5b3c11;
  transform: translateY(2px);
}

.plant-cta:is(:hover, :focus-visible, .is-blooming) .plant-cta__leaf {
  animation: plantLeafSway 1s ease .45s forwards;
}

.plant-cta:is(:hover, :focus-visible, .is-blooming) .plant-cta__leaf--1 {
  top: -250%;
  left: 50%;
  width: 50px;
  height: 123px;
}

.plant-cta:is(:hover, :focus-visible, .is-blooming) .plant-cta__leaf--2 {
  top: -200%;
  left: 90%;
  width: 75px;
  height: 99px;
}

.plant-cta:is(:hover, :focus-visible, .is-blooming) .plant-cta__leaf--3 {
  top: -130%;
  left: 20%;
  width: 60px;
  height: 78px;
}

.plant-cta:is(:hover, :focus-visible, .is-blooming) .plant-cta__leaf--4 {
  top: -300%;
  left: 10%;
  width: 85px;
  height: 171px;
}

.plant-cta:is(:hover, :focus-visible, .is-blooming) .plant-cta__leaf--5 {
  top: -350%;
  left: 90%;
  width: 85px;
  height: 173px;
}

@keyframes plantLeafSway {
  0%, 100% { transform: translate(-50%, 0) rotate(0deg); }
  38% { transform: translate(-50%, 0) rotate(var(--leaf-sway)); }
  68% { transform: translate(-50%, 0) rotate(var(--leaf-settle)); }
}

.page-fire-hero__cta {
  position: absolute;
  right: clamp(7rem, 12vw, 13.5rem);
  bottom: clamp(10rem, 24vh, 13rem);
  z-index: 5;
  margin: 0;
}

.volunteer-opening-cta-wrap {
  display: flex;
  margin-top: 1.25rem;
  justify-content: center;
  transform: translateX(clamp(1rem, 3vw, 2.5rem));
}

@media (max-width: 620px) {
  .page-fire-hero { overflow: visible; }

  .plant-cta {
    min-height: 56px;
    padding: 13px 28px;
    font-size: 1rem;
  }
  .plant-cta:is(:hover, :focus-visible, .is-blooming) { padding-inline: 23px; }
  .page-fire-hero__cta {
    right: auto;
    bottom: -1rem;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 24px);
    transform: translateX(-50%);
  }
  .volunteer-opening-cta-wrap {
    margin-top: 1.5rem;
    transform: none;
  }
}

/* En teléfonos pequeños se ocultan solo las hojas decorativas del CTA de voluntariado. */
@media (max-width: 430px) {
  .plant-cta[href]:not([data-mi-ruka]) .plant-cta__leaf { display: none; }
}

/* En escritorio recoge las hojas derechas para conservar el margen visual. */
@media (min-width: 621px) {
  .page-fire-hero__cta .plant-cta:is(:hover, :focus-visible, .is-blooming) .plant-cta__leaf--2,
  .page-fire-hero__cta .plant-cta:is(:hover, :focus-visible, .is-blooming) .plant-cta__leaf--5 {
    left: 78%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plant-cta,
  .plant-cta__leaf { transition: none; }
  .plant-cta__leaf { display: none; }
}

/* ============================================================
   MODO DÍA: propuesta "agua y papel"
   Conserva intacta la paleta nocturna y aclara solo la experiencia diurna.
   ============================================================ */
html[data-theme="day"] {
  --day-ink: #173B3A;
  --day-muted: #365C59;
  --day-accent: #984018;
  --day-paper: rgba(248, 253, 252, .78);
  --day-paper-strong: rgba(252, 255, 254, .9);
  --day-line: rgba(23, 86, 82, .18);
  --day-shadow: 0 10px 28px rgba(29, 92, 88, .11);
}

html[data-theme="day"] .site-header.is-scrolled {
  background: rgba(239, 250, 248, .86);
  border-color: var(--day-line);
  box-shadow: 0 8px 24px rgba(29, 92, 88, .1);
}

html[data-theme="day"] .site-header.is-scrolled .brand,
html[data-theme="day"] .site-header.is-scrolled .main-nav a {
  color: var(--day-ink);
}

html[data-theme="day"] .site-header .brand,
html[data-theme="day"] .site-header .main-nav a {
  color: var(--day-ink);
  font-weight: 700;
}

html[data-theme="day"] .site-header .main-nav a:hover,
html[data-theme="day"] .site-header .main-nav a:focus-visible {
  color: var(--day-accent);
}

html[data-theme="day"] .site-header .menu-toggle span:not(.sr-only) {
  background: var(--day-ink);
}

html[data-theme="day"] #quienes-somos,
html[data-theme="day"] #nanas,
html[data-theme="day"] #territorio,
html[data-theme="day"] #sumate,
html[data-theme="day"] #preguntas,
html[data-theme="day"] #contacto {
  color: var(--day-ink);
}

html[data-theme="day"] .section:nth-of-type(odd):not(.hero),
html[data-theme="day"] .section--territory,
html[data-theme="day"] .section--ecosystem,
html[data-theme="day"] .contact-section {
  background: rgba(255, 255, 255, .1);
}

html[data-theme="day"] .section--territory,
html[data-theme="day"] .section--ecosystem,
html[data-theme="day"] .contact-section {
  border-block: 1px solid rgba(255, 255, 255, .24);
}

html[data-theme="day"] .section-heading > p:not(.eyebrow),
html[data-theme="day"] .ecosystem-card p,
html[data-theme="day"] .map-detail p:not(.map-detail__eyebrow),
html[data-theme="day"] .section-note,
html[data-theme="day"] .faq-content,
html[data-theme="day"] .memorice-box p:last-child,
html[data-theme="day"] .person-card small {
  color: var(--day-muted);
}

html[data-theme="day"] .eyebrow,
html[data-theme="day"] .map-detail__eyebrow,
html[data-theme="day"] .ecosystem-card h3,
html[data-theme="day"] .contact-copy a {
  color: var(--day-accent);
}

html[data-theme="day"] .map-experience,
html[data-theme="day"] .ecosystem-card,
html[data-theme="day"] .contact-form,
html[data-theme="day"] .cart-panel,
html[data-theme="day"] .product-card {
  border-color: var(--day-line);
  background: var(--day-paper);
  box-shadow: var(--day-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html[data-theme="day"] .map-experience {
  border-radius: 22px;
}

html[data-theme="day"] .person-card__face--front {
  border-color: rgba(234, 88, 12, .58);
  border-radius: 26px;
  background: var(--day-paper);
  box-shadow: 0 10px 28px rgba(29, 92, 88, .11), inset 0 0 0 1px rgba(255, 255, 255, .32);
}

html[data-theme="day"] .person-card__face--front::after {
  border-color: rgba(23, 86, 82, .16);
}

html[data-theme="day"] .person-card__avatar {
  border-radius: 18px;
  border-color: rgba(255, 255, 255, .7);
  box-shadow: 0 7px 18px rgba(29, 92, 88, .14);
}

html[data-theme="day"] .person-card__face--front strong {
  color: var(--day-ink);
}

html[data-theme="day"] .ecosystem-card {
  min-height: 0;
  padding-block: 1.6rem;
  border-color: rgba(22, 101, 52, .62);
  border-radius: 22px;
  background: rgba(248, 253, 252, .28);
  box-shadow: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

html[data-theme="day"] .ecosystem-card:hover,
html[data-theme="day"] .ecosystem-card:focus-visible,
html[data-theme="day"] .ecosystem-card:active {
  transform: translateY(-3px);
  border-color: var(--green-light);
  background: rgba(22, 101, 52, .3);
  box-shadow: 0 10px 24px rgba(22, 101, 52, .16), inset 0 0 0 1px rgba(134, 239, 172, .14);
}

html[data-theme="day"] .faq-list details {
  border-color: var(--day-line);
}

html[data-theme="day"] .contact-copy > p:not(.eyebrow),
html[data-theme="day"] .contact-form label {
  color: var(--day-ink);
}

html[data-theme="day"] .contact-form {
  border-radius: 24px;
}

html[data-theme="day"] .contact-form input,
html[data-theme="day"] .contact-form textarea {
  border-color: var(--day-line);
  background: rgba(255, 255, 255, .74);
  color: var(--day-ink);
}

html[data-theme="day"] .contact-form input::placeholder,
html[data-theme="day"] .contact-form textarea::placeholder {
  color: #597673;
}

@media (max-width: 720px) {
  html[data-theme="day"] .main-nav.is-open {
    background: rgba(239, 250, 248, .98);
    border-color: var(--day-line);
  }

  html[data-theme="day"] .main-nav.is-open a {
    color: var(--day-ink);
    border-color: var(--day-line);
  }

  html[data-theme="day"] .site-header.is-scrolled .menu-toggle span:not(.sr-only) {
    background: var(--day-ink);
  }
}

/* ============================================================
   ESCALA TIPOGRAFICA Y ECOSISTEMA MOVIL
   Mantiene los encabezados proporcionados y reduce estas tres
   tarjetas aproximadamente un 30 % sin comprometer la lectura.
   ============================================================ */
.section-heading > p:not(.eyebrow),
.ecosystem-intro > p:not(.eyebrow) {
  max-width: 68ch;
  font-size: clamp(.96rem, 1.25vw, 1.08rem);
  line-height: 1.65;
}

@media (max-width: 720px) {
  .section-heading h2,
  .ecosystem-intro h2,
  .services-showcase__heading h1,
  .services-showcase__heading h2 {
    font-size: clamp(1.85rem, 7.4vw, 2.35rem);
    line-height: 1.12;
    text-wrap: balance;
  }

  .section--ecosystem .ecosystem-grid {
    gap: .7rem;
  }

  .section--ecosystem .ecosystem-card,
  html[data-theme="day"] .section--ecosystem .ecosystem-card {
    min-height: 175px;
    padding: .95rem;
    border-radius: 15px;
  }

  .section--ecosystem .ecosystem-card .icono-gif {
    width: 70px !important;
    height: 70px !important;
    margin-bottom: .7rem !important;
  }

  .section--ecosystem .ecosystem-card h3 {
    margin: .6rem 0 .35rem;
    font-size: 1.02rem;
    line-height: 1.22;
  }

  .section--ecosystem .ecosystem-card p {
    font-size: .8rem;
    line-height: 1.45;
  }
}

/* Rendimiento móvil: evita repintados de pantalla completa durante el scroll. */
@media (max-width: 767px) {
  html { scroll-behavior: auto; }

  html[data-theme="day"] body {
    background-attachment: scroll;
  }

  .watermark-bg {
    display: none;
    animation: none;
  }

  .site-header.is-scrolled {
    background: rgba(15, 21, 28, .98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  }

  .back-to-top,
  .theme-toggle,
  .filter-choice,
  .nn-card,
  .nn-eco-card,
  .activity-card,
  .membership-card,
  .volunteer-person,
  .volunteer-fire-hero .sweepstakes-content,
  .services-showcase__arrow,
  .services-showcase__autoplay,
  .services-showcase__modal-close {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .section-sign__image,
  .page-fire-hero__sign,
  .services-showcase__card {
    will-change: auto;
  }
}