/* ==========================================================================
   Editorial Morada de Autoras — hoja de estilos
   Sistema de marca oficial: fucsia / morado / ciruela + complementarios
   Tipografía: Fraunces (display) + Libre Franklin (texto/UI)
   ========================================================================== */

:root {
  /* Identidad (usar en al menos 60% de las composiciones) */
  --fucsia: #E537E8;
  --morado: #720EA1;
  --ciruela: #21153A;

  /* Complementarios */
  --naranja: #F18A16;
  --verde: #159F83;
  --lila-claro: #DCC9F7;
  --violeta: #AB49D0;

  /* Neutros */
  --lila-pastel: #F1E9FF;
  --blanco: #FFFFFF;

  /* Alias funcionales */
  --texto: var(--ciruela);
  --fondo: var(--lila-pastel);

  --grad-fucsia-morado: linear-gradient(135deg, var(--fucsia), var(--morado));
  --grad-morado-ciruela: linear-gradient(135deg, var(--morado), var(--ciruela));
  --grad-lila-blanco: linear-gradient(135deg, var(--lila-pastel), var(--blanco));

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Libre Franklin", "Segoe UI", sans-serif;

  --radius: 4px;
  --container: 1180px;

  --shadow-soft: 0 12px 40px rgba(33, 21, 58, 0.14);
  --shadow-deep: 0 20px 60px rgba(33, 21, 58, 0.35);
  /* Sombra de hover: ciruela + un toque de morado en vez de negro puro,
     para que la elevación se sienta parte de la paleta de marca. */
  --shadow-hover: 0 22px 48px rgba(33, 21, 58, 0.28), 0 8px 20px rgba(114, 14, 161, 0.2);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--morado);
  margin-bottom: 14px;
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--ciruela);
}

section {
  position: relative;
  padding: 88px 0;
}

/* Resalta cada mención de "Morada de Autoras" dentro del texto corrido.
   Sobre fondo oscuro (nav, hero, footer, CTA final) el morado casi no
   contrasta con el ciruela, así que ahí se usa fucsia en su lugar vía
   ".brand-name--on-dark" (mismo peso en negritas, distinto color). */
.brand-name {
  font-weight: 700;
  color: var(--morado);
}

.brand-name--on-dark {
  font-weight: 700;
  color: var(--fucsia);
}

/* ==========================================================================
   Texturas de fondo — trama sutil, sin imágenes externas
   ========================================================================== */

.texture-ink {
  background-color: var(--ciruela);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(229, 55, 232, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(114, 14, 161, 0.28) 0%, transparent 50%),
    repeating-linear-gradient(135deg, rgba(241, 233, 255, 0.02) 0px, rgba(241, 233, 255, 0.02) 1px, transparent 1px, transparent 3px);
}

.texture-paper {
  background-color: var(--fondo);
  background-image:
    radial-gradient(circle at 10% 10%, rgba(114, 14, 161, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(229, 55, 232, 0.07) 0%, transparent 45%),
    repeating-radial-gradient(circle at 50% 50%, rgba(33, 21, 58, 0.012) 0, rgba(33, 21, 58, 0.012) 1px, transparent 1px, transparent 4px);
}

.texture-gradient {
  background: linear-gradient(135deg, var(--fucsia) 0%, var(--morado) 55%, var(--ciruela) 100%);
}

/* ==========================================================================
   Skip link (accesibilidad)
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blanco);
  color: var(--ciruela);
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 6px 0;
}

.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   Nav
   ========================================================================== */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(33, 21, 58, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(229, 55, 232, 0.18);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
}

.site-nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-nav__logo img {
  height: 38px;
  width: auto;
}

.site-nav__logo-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--blanco);
  white-space: nowrap;
}

@media (max-width: 420px) {
  .site-nav__logo-text {
    display: none;
  }
}

.site-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad-fucsia-morado);
  color: var(--blanco);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.site-nav__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(229, 55, 232, 0.35);
}

.site-nav__cta:focus-visible {
  outline: 2px solid var(--fucsia);
  outline-offset: 3px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 140px;
  padding-bottom: 100px;
  color: var(--blanco);
  position: relative;
  overflow: hidden;
}

/* Slideshow de fondo del hero: 5 fotos apiladas, crossfade por opacity
   controlado desde script.js (rota la clase .is-active cada 5s). */
.hero__bg-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  opacity: 0;
  transition: opacity 1s ease;
}

.hero__bg-slide.is-active {
  opacity: 1;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 15% 20%, rgba(229, 55, 232, 0.3) 0%, transparent 45%),
    linear-gradient(180deg, rgba(33, 21, 58, 0.88) 0%, rgba(33, 21, 58, 0.76) 45%, rgba(33, 21, 58, 0.92) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.hero__logo {
  height: clamp(56px, 9vw, 88px);
  width: auto;
  margin-bottom: 28px;
}

.hero__welcome {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--fucsia);
  margin: 0 0 18px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5.6vw, 3.6rem);
  line-height: 1.16;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

.hero__title em {
  font-style: italic;
  color: var(--fucsia);
}

.hero__subtitle {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 580px;
  margin: 0 0 40px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn--primary {
  background: var(--grad-fucsia-morado);
  color: var(--blanco);
}

.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(229, 55, 232, 0.4);
}

.btn--outline {
  background: transparent;
  color: var(--blanco);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

.btn:focus-visible {
  outline: 2px solid var(--fucsia);
  outline-offset: 3px;
}

.btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.hero__scroll-cue {
  position: absolute;
  z-index: 2;
  bottom: 36px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__scroll-cue::after {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--fucsia), transparent);
}

/* ==========================================================================
   Sabemos dónde estás hoy
   ========================================================================== */

.sabemos {
  background: var(--fondo);
}

.sabemos__intro {
  max-width: 780px;
}

.sabemos-list {
  list-style: none;
  margin: 40px 0 44px;
  padding: 0;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sabemos-list li {
  position: relative;
  padding-left: 34px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ciruela);
}

.sabemos-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grad-fucsia-morado);
}

.sabemos__close {
  max-width: 780px;
  background: var(--blanco);
  border-left: 4px solid var(--fucsia);
  border-radius: 0 8px 8px 0;
  padding: 28px 32px;
  font-size: 1.05rem;
  color: var(--ciruela);
  box-shadow: var(--shadow-soft);
}

/* ==========================================================================
   Historia
   ========================================================================== */

.historia {
  background: var(--blanco);
}

.historia__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

.historia__intro .eyebrow {
  display: block;
}

.historia__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

.historia__text p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 20px;
  max-width: 620px;
}

.historia__portrait {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.portrait-frame {
  margin: 0;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(114, 14, 161, 0.25);
  background: var(--ciruela);
}

.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  z-index: 2;
  pointer-events: none;
}

.portrait-frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s ease;
}

.portrait-frame:hover img {
  transform: scale(1.03);
}

.portrait-frame figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(33, 21, 58, 0.92) 60%);
  padding: 46px 22px 18px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  z-index: 3;
}

.portrait-frame__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--blanco);
}

.portrait-frame__role {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fucsia);
}

/* Datos clave — fila centrada con divisores */
.historia__facts {
  list-style: none;
  margin: 64px 0 0;
  padding: 40px 0 0;
  border-top: 1px solid rgba(114, 14, 161, 0.2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 0;
}

.historia__facts li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 0 40px;
  flex: 1 1 200px;
  max-width: 260px;
  position: relative;
}

.historia__facts li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(114, 14, 161, 0.25);
}

.historia__facts-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--morado);
}

.historia__facts-label {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--texto);
  opacity: 0.75;
  max-width: 170px;
}

@media (max-width: 640px) {
  .historia__facts li {
    padding: 0 12px;
  }
  .historia__facts li + li::before {
    display: none;
  }
}

.historia__quote {
  max-width: 720px;
  margin: 48px auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  line-height: 1.4;
  color: var(--morado);
  padding: 8px 0;
}

/* ==========================================================================
   Dos caminos
   ========================================================================== */

.caminos {
  background: var(--ciruela);
  color: var(--blanco);
}

.caminos .section-heading {
  color: var(--blanco);
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.caminos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}

.camino-card {
  background: var(--blanco);
  color: var(--ciruela);
  border-radius: 10px;
  padding: 40px 32px;
  box-shadow: var(--shadow-deep);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.camino-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--grad-fucsia-morado);
}

.camino-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  color: var(--ciruela);
  margin: 0 0 16px;
  line-height: 1.3;
}

.camino-card__text {
  font-size: 1rem;
  color: var(--ciruela);
  opacity: 0.85;
  margin: 0 0 28px;
  flex-grow: 1;
}

.camino-card .btn {
  align-self: center;
}

@media (min-width: 760px) {
  .caminos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Un refugio, no una fábrica
   ========================================================================== */

.refugio {
  background: var(--lila-pastel);
}

.refugio__intro {
  max-width: 820px;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ciruela);
}

.refugio-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.refugio-list li {
  display: flex;
  gap: 18px;
  background: var(--blanco);
  border-radius: 8px;
  padding: 26px 28px;
  box-shadow: var(--shadow-soft);
}

.refugio-list__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.refugio-list li:nth-child(1) .refugio-list__icon { background: var(--fucsia); }
.refugio-list li:nth-child(2) .refugio-list__icon { background: var(--naranja); }
.refugio-list li:nth-child(3) .refugio-list__icon { background: var(--verde); }
.refugio-list li:nth-child(4) .refugio-list__icon { background: var(--violeta); }

.refugio-list p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ciruela);
}

@media (min-width: 760px) {
  .refugio-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Servicios
   ========================================================================== */

.servicios {
  background: var(--blanco);
}

.servicios__intro {
  max-width: 680px;
  margin-bottom: 48px;
}

.servicios__intro p {
  font-size: 1.08rem;
  color: var(--texto);
}

.servicios-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(114, 14, 161, 0.15);
  border: 1px solid rgba(114, 14, 161, 0.15);
  border-radius: 10px;
  overflow: hidden;
}

.servicios-list li {
  background: var(--blanco);
  padding: 32px;
}

.servicios-list h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--morado);
  margin: 0 0 10px;
}

.servicios-list p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--ciruela);
  opacity: 0.85;
}

.servicios__close {
  margin: 40px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--fucsia);
}

@media (min-width: 760px) {
  .servicios-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .servicios-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Estante — catálogo (sección signature)
   ========================================================================== */

.estante {
  background: var(--ciruela);
  color: var(--blanco);
  overflow: hidden;
}

.estante .section-heading {
  color: var(--blanco);
}

.estante__intro {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 48px;
}

.shelf-hint {
  display: none;
}

@media (max-width: 640px) {
  .shelf-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: 0 auto 16px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(229, 55, 232, 0.45);
    color: var(--fucsia);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .shelf-hint.is-hidden {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }
}

.shelf-hint__arrow {
  display: inline-block;
  animation: shelf-hint-nudge 1.3s ease-in-out infinite;
}

@keyframes shelf-hint-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.shelf-wrap {
  position: relative;
}

.shelf {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 20px 4px 36px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.shelf::-webkit-scrollbar {
  height: 8px;
}

.shelf::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.shelf::-webkit-scrollbar-thumb {
  background: var(--fucsia);
  border-radius: 999px;
}

.spine {
  scroll-snap-align: start;
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 320px;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.38s ease;
  box-shadow: -3px 0 6px rgba(0, 0, 0, 0.25), inset 1px 0 0 rgba(255, 255, 255, 0.08);
  background: linear-gradient(175deg, var(--spine-top, var(--morado)) 0%, var(--ciruela) 130%);
}

.spine:hover,
.spine:focus-visible,
.spine.is-open {
  width: 230px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  z-index: 5;
}

.spine::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: rgba(255, 255, 255, 0.25);
}

.spine:focus-visible {
  outline: 2px solid var(--fucsia);
  outline-offset: 3px;
}

/* Lomo cerrado: título vertical centrado, rotado con transform (no
   writing-mode) para controlar con precisión la dirección de lectura:
   rotate(-90deg) hace que el texto se lea de arriba hacia abajo
   inclinando la cabeza hacia la DERECHA, tal como pidió la clienta. */
.spine__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.spine__label-text {
  display: block;
  flex-shrink: 0;
  width: 280px;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  transform: rotate(-90deg);
  transform-origin: center;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.spine:hover .spine__label,
.spine:focus-visible .spine__label,
.spine.is-open .spine__label {
  opacity: 0;
}

/* Lomo abierto: portada completa (object-fit: contain, sin recortar) +
   ficha con título y autora. */
.spine__reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.38s ease 0.06s, transform 0.4s ease 0.06s;
}

.spine:hover .spine__reveal,
.spine:focus-visible .spine__reveal,
.spine.is-open .spine__reveal {
  opacity: 1;
  transform: scale(1);
}

.spine__cover {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  padding: 10px 10px 4px;
  box-sizing: border-box;
}

.spine__info {
  flex: 0 0 auto;
  padding: 8px 14px 14px;
  background: rgba(33, 21, 58, 0.9);
}

.spine__title {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--blanco);
}

.spine__author {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--fucsia);
}

/* ==========================================================================
   Testimonios
   ========================================================================== */

.testimonios {
  background: var(--blanco);
}

.testi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.testi-card {
  background: var(--lila-pastel);
  border: 1px solid rgba(114, 14, 161, 0.15);
  border-radius: 8px;
  padding: 32px 28px;
  position: relative;
}

.testi-card__quote {
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--fucsia);
  opacity: 0.6;
  margin: 0 0 4px;
  display: block;
}

.testi-card p.testi-body {
  font-size: 0.98rem;
  color: var(--texto);
  margin: 0 0 20px;
}

.testi-card__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--morado);
  margin: 0;
}

/* ==========================================================================
   Equipo editorial
   ========================================================================== */

.equipo {
  background: var(--lila-pastel);
}

.equipo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 48px;
}

.equipo-card {
  background: var(--blanco);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

/* Hover: se levanta ligeramente y gana sombra. Solo en dispositivos con
   hover real (mouse/trackpad) para no dejar el efecto "pegado" tras el
   primer tap en móvil. */
@media (hover: hover) {
  .equipo-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-8px);
  }
}

.equipo-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: var(--grad-morado-ciruela);
}

.equipo-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Filtro uniforme para que las 4 fotos (de fuentes y luz distintas)
     se sientan del mismo sistema visual en vez de 4 fotos sueltas. */
  filter: saturate(1.08) contrast(1.04);
}

/* Fotos nuevas (ago. 2026): las 4 comparten encuadre de origen (busto/
   torso, misma pose con blazer morado) y una proporción muy cercana a
   3:4, así que "center top" uniforme ya funciona bien para las 4 sin
   necesitar un ajuste distinto por persona. */

.equipo-card__avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.92);
}

.equipo-card__body {
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.equipo-card__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ciruela);
  margin: 0;
}

.equipo-card__role {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fucsia);
  font-weight: 700;
  margin: 0 0 12px;
}

.equipo-card__bio {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ciruela);
  opacity: 0.85;
  margin: 0 0 14px;
  flex-grow: 1;
}

.equipo-card__book {
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--morado);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(114, 14, 161, 0.15);
}

.equipo__cta {
  text-align: center;
  margin-top: 48px;
}

@media (min-width: 640px) {
  .equipo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .equipo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   Redes
   ========================================================================== */

.redes {
  background: var(--ciruela);
  color: var(--blanco);
  text-align: center;
  padding: 64px 0;
}

.redes p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 24px;
}

.redes__ig {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--blanco);
  text-decoration: none;
  border-bottom: 1px solid var(--fucsia);
  padding: 10px 8px 8px;
  border-radius: 4px;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.redes__ig:hover {
  color: var(--fucsia);
}

.redes__ig:focus-visible {
  outline: 2px solid var(--fucsia);
  outline-offset: 4px;
}

.redes__ig svg {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  background: var(--blanco);
}

.faq-list {
  max-width: 820px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  border: 1px solid rgba(114, 14, 161, 0.18);
  border-radius: 8px;
  background: var(--lila-pastel);
  overflow: hidden;
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ciruela);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.faq-item__question:focus-visible {
  outline: 2px solid var(--fucsia);
  outline-offset: -2px;
}

.faq-item__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grad-fucsia-morado);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.25s ease;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-in-out;
}

.faq-item__answer p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ciruela);
  opacity: 0.85;
}

.faq__close {
  text-align: center;
  margin-top: 40px;
  font-size: 1rem;
  color: var(--ciruela);
}

.faq__close a {
  color: var(--fucsia);
  font-weight: 700;
  text-decoration: underline;
}

/* ==========================================================================
   Contacto — formulario nativo (Netlify Forms)
   ========================================================================== */

.contacto {
  background: var(--ciruela);
  color: var(--blanco);
}

.contacto .section-heading {
  color: var(--blanco);
  text-align: center;
}

.contacto__intro {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 44px;
  color: rgba(255, 255, 255, 0.8);
}

.contacto-form {
  max-width: 620px;
  margin: 0 auto;
  background: var(--blanco);
  border-radius: 12px;
  padding: 40px clamp(24px, 5vw, 48px);
  box-shadow: var(--shadow-deep);
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ciruela);
}

.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--lila-claro);
  background: var(--lila-pastel);
  color: var(--ciruela);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field textarea {
  min-height: 130px;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--fucsia);
  box-shadow: 0 0 0 3px rgba(229, 55, 232, 0.15);
  background: var(--blanco);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(33, 21, 58, 0.4);
}

.contacto-form .btn {
  justify-self: center;
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}

@media (min-width: 560px) {
  .contacto-form .btn {
    width: auto;
    justify-self: start;
  }
}

/* Honeypot anti-spam de Netlify: oculto siempre, no eliminar del DOM */
.hidden[hidden] {
  display: none;
}

/* ==========================================================================
   CTA final
   ========================================================================== */

.cta-final {
  color: var(--blanco);
  text-align: center;
  padding: 100px 0;
}

.cta-final__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.8vw, 2.4rem);
  max-width: 760px;
  margin: 0 auto 16px;
  line-height: 1.35;
  color: var(--blanco);
}

.cta-final__closing {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 0 auto 40px;
  color: var(--blanco);
}

.cta-final .btn--primary {
  background: var(--blanco);
  color: var(--morado);
}

.cta-final .btn--primary:hover {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ciruela);
  color: rgba(255, 255, 255, 0.75);
  padding: 64px 0 32px;
}

.footer-video-slot {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 56px;
  /* Reservado para el video del footer. Ver comentario en index.html
     junto al contenedor real para instrucciones de inserción. */
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 24px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.footer-brand img {
  height: 34px;
  width: auto;
}

.footer-brand span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--blanco);
}

.footer-col p,
.footer-col a {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  display: block;
  margin: 0 0 8px;
}

.footer-col a:hover {
  color: var(--fucsia);
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fucsia);
  margin: 0 0 16px;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Sin fondo ni borde visibles: el "botón" es solo el ícono, del mismo
   color claro que el resto del texto del footer. El área de 44x44px
   sigue existiendo como zona de toque (vía flex), no como un círculo
   dibujado. border-radius queda solo para que el anillo de :focus-visible
   salga redondo, no cuadrado. */
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  line-height: 0;
  transition: color 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.footer-social svg {
  width: 20px;
  height: 20px;
  display: block;
}

.footer-social[aria-label*="WhatsApp"] svg {
  width: 18px;
  height: 18px;
}

.footer-social:hover {
  color: var(--fucsia);
  transform: translateY(-2px);
}

.footer-social:focus-visible {
  outline: 2px solid var(--fucsia);
  outline-offset: 3px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

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

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

/* Delay escalonado: cuando varios .reveal son hijos directos de la misma
   fila/grid (tarjetas de equipo, testimonios, dos caminos, bullets de
   servicios/refugio/sabemos), suelen entrar en el viewport en el mismo
   frame de scroll. El transition-delay por nth-child hace que aparezcan
   uno tras otro en vez de todos a la vez, sin tocar el JS. */

/* Equipo: transform/box-shadow más rápidos (250ms) porque .equipo-card
   los reutiliza para el hover — la entrada solo necesita el fade (opacity,
   600ms) para sentirse pausada; la posición ya se asienta a los 250ms. */
.equipo-card.reveal {
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* :not(.reveal-settled) hace que el delay solo aplique a esta entrada
   única (script.js agrega .reveal-settled al terminar la transición) y
   no se quede "pegado" a las transiciones del hover después. */
.equipo-card.reveal:not(.reveal-settled):nth-child(2) { transition-delay: 0.12s; }
.equipo-card.reveal:not(.reveal-settled):nth-child(3) { transition-delay: 0.24s; }
.equipo-card.reveal:not(.reveal-settled):nth-child(4) { transition-delay: 0.36s; }

.servicios-list li.reveal:nth-child(2) { transition-delay: 0.08s; }
.servicios-list li.reveal:nth-child(3) { transition-delay: 0.16s; }
.servicios-list li.reveal:nth-child(4) { transition-delay: 0.24s; }
.servicios-list li.reveal:nth-child(5) { transition-delay: 0.32s; }

.refugio-list li.reveal:nth-child(2) { transition-delay: 0.09s; }
.refugio-list li.reveal:nth-child(3) { transition-delay: 0.18s; }
.refugio-list li.reveal:nth-child(4) { transition-delay: 0.27s; }

.sabemos-list li.reveal:nth-child(2) { transition-delay: 0.08s; }
.sabemos-list li.reveal:nth-child(3) { transition-delay: 0.16s; }
.sabemos-list li.reveal:nth-child(4) { transition-delay: 0.24s; }
.sabemos-list li.reveal:nth-child(5) { transition-delay: 0.32s; }

.testi-card.reveal:nth-child(2) { transition-delay: 0.12s; }
.testi-card.reveal:nth-child(3) { transition-delay: 0.24s; }

.camino-card.reveal:nth-child(2) { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* .equipo-card.reveal es más específico que .reveal (2 clases vs. 1),
     así que necesita su propio reset acá o le ganaría a esta regla y la
     tarjeta quedaría animando igual con la preferencia activada. */
  .equipo-card.reveal {
    transform: none;
    transition: none;
  }
  .equipo-card:hover {
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   Contadores animados (estadísticas de .historia__facts)
   ========================================================================== */

.js-counter {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Página "Gracias"
   ========================================================================== */

.gracias {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px;
  color: var(--blanco);
}

.gracias__card {
  max-width: 520px;
}

.gracias__card img {
  height: 56px;
  width: auto;
  margin: 0 auto 32px;
}

.gracias__card h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0 0 18px;
}

.gracias__card p {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 36px;
  line-height: 1.6;
}

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

@media (min-width: 640px) {
  .testi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

@media (min-width: 860px) {
  .historia__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .testi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .site-nav__cta span.long {
    display: none;
  }
  .spine {
    height: 260px;
    width: 46px;
  }
  .spine:hover,
  .spine.is-open {
    width: 190px;
  }
  .spine__label-text {
    width: 220px;
    max-width: 220px;
    font-size: 0.78rem;
  }
}