/* ==========================================================================
   Sistema visual "Editorial fueguino" — Hernández & Asociados
   Capa de detalles que Tailwind no expresa: textura, motion, drop-cap.
   ========================================================================== */

/* Grano sutil de fondo (textura patagónica) */
body {
  background-image: radial-gradient(rgba(31,42,46,0.025) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* Tipografía display */
h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.015em; }
h1 { font-weight: 600; }

/* Smooth scroll para anchors del menú */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

/* ==========================================================================
   Snap-scroll por sección: cada section.snap-section ancla al viewport
   con padding del header sticky. Usamos "proximity" en vez de "mandatory"
   para que el snap sea sugerencia (si la sección es más alta que el
   viewport, el usuario puede scrollear sin pelearse con el snap).
   Solo en desktop — en móvil el snap puede ser molesto.
   ========================================================================== */
.snap-section {
  scroll-snap-align: start;
  scroll-margin-top: 5rem;
}

/* En mobile, las secciones arrancan desde arriba (no centradas verticalmente)
   para evitar el "aire grande" cuando el contenido es chico.
   En desktop mantenemos el centrado del flexbox del HTML.
   La regla pisa el `justify-center` que viene en la clase de cada section. */
@media (max-width: 767px) {
  .snap-section {
    justify-content: flex-start !important;
    padding-top: 5.25rem;  /* compensa header sticky 65px + algo de aire */
    padding-bottom: 1.5rem;
  }
}


@media (min-width: 768px) {
  html { scroll-snap-type: y proximity; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}

/* ==========================================================================
   Motion: stagger reveal en page load
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: reveal-in 800ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes reveal-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respetar el "reduce motion" del usuario */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Drop-cap editorial para el primer párrafo de notas individuales
   Activado con la clase .article-body en el contenedor del contenido
   ========================================================================== */
.article-body > p:first-of-type::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 4.5em;
  line-height: 0.85;
  float: left;
  padding-right: 0.12em;
  padding-top: 0.05em;
  color: #B5651D; /* ochre */
  font-feature-settings: "ss01";
}

/* Headings dentro del cuerpo de un artículo: numeración manual con ::before */
.article-body h2 {
  position: relative;
  padding-left: 3.5rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-top: 3rem;
  margin-bottom: 1rem;
  line-height: 1.15;
  counter-increment: article-section;
}

.article-body { counter-reset: article-section; }

.article-body h2::before {
  content: counter(article-section, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.4em;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.7em;
  font-weight: 400;
  color: #B5651D;
  letter-spacing: 0;
}

.article-body h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.article-body p,
.article-body ul,
.article-body ol {
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 1.1rem 0;
}

.article-body ul { list-style: disc; padding-left: 1.5rem; }
.article-body ol { list-style: decimal; padding-left: 1.5rem; }
.article-body li { margin: 0.4rem 0; }

.article-body blockquote {
  border-left: 3px solid #B5651D;
  padding-left: 1.25rem;
  margin: 2rem 0;
  font-style: italic;
  color: rgba(31, 42, 46, 0.85);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.5;
}

.article-body a {
  color: #B5651D;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-body a:hover { text-decoration-thickness: 2px; }

.article-body img {
  width: 100%;
  margin: 2rem 0;
  border: 1px solid #C7C3B9;
}

.article-body hr {
  border: 0;
  border-top: 1px solid #C7C3B9;
  margin: 3rem 0;
}

/* Línea decorativa reusable */
.rule { height: 1px; background: #C7C3B9; }

/* ==========================================================================
   Drawer mobile: overlay desde la derecha + backdrop.
   Usa CSS directo porque algunas utilities Tailwind (fixed, inset, z-50,
   shadow-2xl) no están incluidas en el build estático actual.
   .hidden de Tailwind (display:none) gana cuando está cerrado, así que solo
   aplicamos display:flex con :not(.hidden) para no pisar el cierre.
   ========================================================================== */
#mobile-menu-backdrop:not(.hidden) {
  position: fixed;
  inset: 0;
  background: rgba(31, 42, 46, 0.45);
  z-index: 40;
  display: block;
  animation: backdrop-in 220ms ease-out;
}

#mobile-menu:not(.hidden) {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 86%;
  max-width: 24rem;
  background: #F5F1EA;
  z-index: 50;
  box-shadow: -16px 0 40px -12px rgba(31, 42, 46, 0.25);
  display: flex;
  flex-direction: column;
  animation: drawer-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid rgba(199, 195, 185, 0.6);
  flex-shrink: 0;
}
.mobile-menu__close {
  color: #1F2A2E;
  padding: 0.5rem;
  margin-right: -0.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu__close svg { width: 1.75rem; height: 1.75rem; }
.mobile-menu__close:hover { color: #B5651D; }

/* Iconos del toggle del header (burger / X) */
#mobile-menu-toggle svg { width: 1.75rem; height: 1.75rem; }

/* ==========================================================================
   Hero: foto del fundador con tratamiento editorial.
   En mobile la foto domina la mitad inferior del viewport con aspect 4:5,
   el badge "Fundador" hace overlap con la esquina inferior izquierda.
   ========================================================================== */
.hero-photo {
  position: relative;
  width: 78%;
  max-width: 320px;
  margin: 0.5rem auto 0;
}
.hero-photo__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.hero-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-photo__caption {
  position: absolute;
  left: -0.75rem;
  bottom: -0.75rem;
  background: #F5F1EA;
  border: 1px solid #C7C3B9;
  padding: 0.5rem 0.75rem;
  max-width: 240px;
  z-index: 2;
}

@media (min-width: 1024px) {
  .hero-photo {
    width: 88%;
    max-width: 380px;
    margin: 0 0 0 auto;  /* alinea la foto al borde derecho de la columna */
  }
  .hero-photo__frame { aspect-ratio: 4 / 5; }
  .hero-photo__caption {
    left: -1.25rem;
    bottom: -2rem;     /* mayor overlap fuera de la foto, más editorial */
    padding: 0.85rem 1.1rem;
    max-width: 260px;
  }
}

/* ==========================================================================
   Fotos del equipo: tratamiento de retrato editorial 4:5 consistente entre
   mobile y desktop. Antes usaban h-[40svh] que las aplastaba como banners
   horizontales en columnas anchas de desktop.
   En desktop limitamos el ancho de cada card para que el retrato no domine.
   ========================================================================== */
.team-photo__frame {
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
}
.team-photo__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 1024px) {
  .team-photo__frame {
    max-width: 360px;
    margin: 0 auto;  /* centra la foto dentro de la card cuando la card es más ancha */
  }
}

/* Mobile chico (iPhone SE 375x667 y Android compactos): viewport demasiado
   chico para el hero default. Reducimos padding y foto para que entre. */
@media (max-width: 380px) {
  .snap-section {
    padding-top: 4.25rem !important;
    padding-bottom: 1rem !important;
  }
  .hero-photo { width: 60%; max-width: 200px; margin-top: 0.25rem; }
}

/* ==========================================================================
   Filtro de áreas en /notas — en mobile scroll horizontal con fade visual
   en el borde derecho que indica "hay más contenido". En desktop dejamos
   wrap a 2 filas si no entra todo en una.
   ========================================================================== */
.notas-filter {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;          /* Firefox */
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent 100%);
          mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent 100%);
}
.notas-filter::-webkit-scrollbar { display: none; }  /* WebKit */

@media (min-width: 1024px) {
  /* En desktop preferimos que se vean todas las tabs sin scroll lateral.
     Wrap a 2 filas cuando no entren en una. Sin fade. */
  .notas-filter {
    flex-wrap: wrap;
    overflow-x: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ==========================================================================
   Equipo desktop: alineación al borde izquierdo de cada columna para que
   las dos cards (fundador col-span-7 + socio col-span-5) compongan visualmente.
   ========================================================================== */
@media (min-width: 1024px) {
  .team-photo__frame {
    margin: 0;  /* alineadas al borde izquierdo de su columna */
  }
}

/* ==========================================================================
   Flecha hover en cards de equipo y áreas: oculta por default, aparece al
   hover del padre con clase `group`. Reemplaza opacity-0/group-hover:opacity-100
   de Tailwind que no están en el build estático actual.
   ========================================================================== */
.hover-arrow {
  opacity: 0;
  transition: opacity 200ms ease;
}
.group:hover .hover-arrow {
  opacity: 1;
}

.mobile-menu__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
}
.mobile-menu__link {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(199, 195, 185, 0.4);
  font-size: 1.875rem;
  line-height: 1.1;
  color: #1F2A2E;
  text-decoration: none;
  letter-spacing: -0.015em;
  transition: color 200ms ease;
}
.mobile-menu__link:hover { color: #B5651D; }

.mobile-menu__cta-wrap { margin-top: auto; padding-top: 2rem; }
.mobile-menu__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  background: #1F2A2E;
  color: #F5F1EA;
  padding: 1rem 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.mobile-menu__cta:hover { background: #B5651D; }

@keyframes drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #mobile-menu, #mobile-menu-backdrop { animation: none; }
}