/* =============================================================================
   Estudio Jurídico FEMAFE — tema de marca
   -----------------------------------------------------------------------------
   Único CSS que edita el proyecto cliente (carga al final, después de
   wwwroot/css/zwf/*.css). Paleta y tipografía del kit oficial de marca
   (Ficha Técnica FEMAFE): verde bosque #2C4139, oliva grisáceo #525446,
   gris cálido #DEDDD9, arena pálido #F8DEA5. Títulos en condensada
   (Archivo Narrow ≈ Helvetica LT Std Cond), cuerpo serif (Lora ≈ Avignon Pro),
   antetítulos / botones / labels en Inter. Esquinas rectas.
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap");

:root {
  /* ---- Marca / acción primaria + enlaces (verde bosque del kit) -------- */
  --zwf-color-primary: #2c4139;
  --zwf-color-primary-hover: #22332c;
  --zwf-color-primary-active: #1a2721;
  --zwf-color-primary-contrast: #ffffff;
  --zwf-color-primary-subtle: #e9ede9;

  /* ---- Secundario: oliva grisáceo (texto de apoyo, íconos) ------------ */
  --zwf-color-secondary: #525446;

  /* ---- Acento: arena pálido — SÓLO decorativo (arcos, subrayados,
         trama). No da contraste para texto ni relleno de botón. --------- */
  --zwf-color-accent: #f8dea5;
  --zwf-color-accent-hover: #efcd80;
  --zwf-color-accent-contrast: #2c4139;

  /* ---- Texto y superficies (claro, neutro cálido) -------------------- */
  --zwf-color-ink: #2b2f28;
  --zwf-color-ink-muted: #5b6157;
  --zwf-color-ink-subtle: #8b9084;
  --zwf-color-ink-inverse: #f4f2ea;

  --zwf-color-paper: #ffffff;
  --zwf-color-surface: #f4f3ee;           /* gris muy claro para alternar secciones */
  --zwf-color-surface-2: #deddd9;         /* gris cálido oficial — paneles / filetes */
  --zwf-color-surface-inverse: #2c4139;   /* SÓLO el footer (único bloque oscuro) */

  --zwf-color-border: #deddd9;
  --zwf-color-border-strong: #c7c6c0;

  --zwf-color-info: #2c4139;
  --zwf-color-focus: #525446;
  --zwf-color-selection: #e5e9e4;

  /* Banda cálida para la CTA (trama sobre arena del kit) */
  --femafe-arena-bg: #fbf4e1;

  /* ---- Tipografía --------------------------------------------------------- */
  --zwf-font-sans: "Lora", Georgia, "Times New Roman", serif;
  --zwf-font-heading: "Archivo Narrow", "Arial Narrow", "Helvetica Neue Condensed",
    system-ui, sans-serif;
  --femafe-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Forma y ancho ------------------------------------------------------- */
  --zwf-radius-sm: 0px;
  --zwf-radius-md: 0px;
  --zwf-radius-lg: 0px;
  --zwf-radius-full: 999px;
  --zwf-container: 75rem;

  /* Crema para texto sobre el footer verde */
  --femafe-cream: #f4f2ea;
}

/* El manual de marca es light-first (blanco / gris #DEDDD9, verde como tinta).
   No hay modo oscuro. El framework (tokens.css) redefine los --zwf-color-* bajo
   `@media (prefers-color-scheme: dark) :root:not([data-theme="light"])` y bajo
   `:root[data-theme="dark"]` — selectores de mayor especificidad que un `:root`
   plano — así que hay que re-afirmar la paleta clara con esos mismos selectores
   (y ganamos por orden de fuente, ya que este archivo carga último). */
:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: light;
    --zwf-color-primary: #2c4139;
    --zwf-color-primary-hover: #22332c;
    --zwf-color-primary-active: #1a2721;
    --zwf-color-primary-contrast: #ffffff;
    --zwf-color-primary-subtle: #e9ede9;
    --zwf-color-secondary: #525446;
    --zwf-color-accent: #f8dea5;
    --zwf-color-accent-hover: #efcd80;
    --zwf-color-accent-contrast: #2c4139;
    --zwf-color-ink: #2b2f28;
    --zwf-color-ink-muted: #5b6157;
    --zwf-color-ink-subtle: #8b9084;
    --zwf-color-ink-inverse: #f4f2ea;
    --zwf-color-paper: #ffffff;
    --zwf-color-surface: #f4f3ee;
    --zwf-color-surface-2: #deddd9;
    --zwf-color-surface-inverse: #2c4139;
    --zwf-color-border: #deddd9;
    --zwf-color-border-strong: #c7c6c0;
    --zwf-color-info: #2c4139;
    --zwf-color-focus: #525446;
    --zwf-color-selection: #e5e9e4;
  }
}
:root[data-theme="dark"] {
  color-scheme: light;
  --zwf-color-primary: #2c4139;
  --zwf-color-primary-hover: #22332c;
  --zwf-color-primary-active: #1a2721;
  --zwf-color-primary-contrast: #ffffff;
  --zwf-color-primary-subtle: #e9ede9;
  --zwf-color-secondary: #525446;
  --zwf-color-accent: #f8dea5;
  --zwf-color-accent-hover: #efcd80;
  --zwf-color-accent-contrast: #2c4139;
  --zwf-color-ink: #2b2f28;
  --zwf-color-ink-muted: #5b6157;
  --zwf-color-ink-subtle: #8b9084;
  --zwf-color-ink-inverse: #f4f2ea;
  --zwf-color-paper: #ffffff;
  --zwf-color-surface: #f4f3ee;
  --zwf-color-surface-2: #deddd9;
  --zwf-color-surface-inverse: #2c4139;
  --zwf-color-border: #deddd9;
  --zwf-color-border-strong: #c7c6c0;
  --zwf-color-info: #2c4139;
  --zwf-color-focus: #525446;
  --zwf-color-selection: #e5e9e4;
}

/* =============================================================================
   Ajustes de componentes al estilo "Juris"
   ============================================================================= */

/* Títulos en condensada (Archivo Narrow): peso alto, verde de marca (como el
   prototipo light-first). Los grandes van en MAYÚSCULA como el wordmark. */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: 0; color: var(--zwf-color-primary); }
h1, .zwf-hero__heading {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 700;
}
.zwf-prose h2, .zwf-prose h3 { text-transform: none; }
/* En bloques oscuros (footer, CTA inverse) los títulos van en claro. */
.zwf-footer :is(h1, h2, h3, h4),
.zwf-block--cta[data-theme="inverse"] .zwf-cta :is(h2, h3) { color: var(--femafe-cream); }

/* Antetítulos: Inter, mayúscula, oliva, con arco de marca delante */
.zwf-eyebrow {
  font-family: var(--femafe-font-ui);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: var(--zwf-text-xs);
  color: var(--zwf-color-secondary);
}

/* Botones: Inter, mayúscula, bold, rectos, con tracking */
.zwf-btn {
  font-family: var(--femafe-font-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-radius: 0;
  padding-block: 0.85rem;
  padding-inline: 1.75rem;
}
/* Primario: verde bosque de la marca (usa el token) */
.zwf-btn--primary {
  background: var(--zwf-color-primary);
  border-color: var(--zwf-color-primary);
  color: var(--zwf-color-primary-contrast);
}
.zwf-btn--primary:hover,
.zwf-btn--primary:focus-visible {
  background: var(--zwf-color-primary-hover);
  border-color: var(--zwf-color-primary-hover);
  color: var(--zwf-color-primary-contrast);
}
/* Secundario: contorno verde */
.zwf-btn--secondary {
  background: transparent;
  border: 2px solid var(--zwf-color-primary);
  color: var(--zwf-color-primary);
}
.zwf-btn--secondary:hover,
.zwf-btn--secondary:focus-visible {
  background: var(--zwf-color-primary);
  color: var(--zwf-color-primary-contrast);
}

/* Header */
.zwf-header { border-bottom: 1px solid var(--zwf-color-border); }
.zwf-nav__link {
  font-family: var(--femafe-font-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--zwf-text-sm);
  font-weight: 500;
}

/* Barra de contacto sobre el header (partial shadow _Header) — clara */
.zwf-topbar {
  background: var(--zwf-color-surface);
  color: var(--zwf-color-secondary);
  border-bottom: 1px solid var(--zwf-color-border);
  font-family: var(--femafe-font-ui);
  font-size: var(--zwf-text-xs);
  letter-spacing: 0.02em;
}
.zwf-topbar__inner {
  max-width: var(--zwf-container);
  margin-inline: auto;
  padding: 0.5rem var(--zwf-gutter);
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.zwf-topbar a { color: inherit; text-decoration: none; }
.zwf-topbar a:hover { color: var(--zwf-color-primary); }
.zwf-topbar__spacer { margin-inline-start: auto; }
.zwf-topbar__social { display: inline-flex; gap: 0.9rem; }
.zwf-topbar__social a { display: inline-flex; }
.zwf-topbar__social svg { width: 1rem; height: 1rem; fill: currentColor; }

/* Footer verde bosque con texto crema — único bloque oscuro del sitio */
.zwf-footer { background: var(--zwf-color-surface-inverse); color: rgba(239, 236, 224, 0.78); }
.zwf-footer a { color: rgba(239, 236, 224, 0.92); }
.zwf-footer a:hover { color: #fff; }
.zwf-footer__org { color: var(--femafe-cream); font-family: var(--zwf-font-heading); }

/* Tarjetas y secciones: rectas, borde fino */
.zwf-card, .zwf-cta { border-radius: 0; }
.zwf-card { border: 1px solid var(--zwf-color-border); }

/* Imagen destacada de una página de detalle: se muestra ENTERA (sin recorte 21:9).
   Apaisada → ocupa el ancho; cuadrada/vertical → se centra y la limita el alto. */
.zwf-detail-header__figure img {
  aspect-ratio: auto;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-block-size: 34rem;
  margin-inline: auto;
  object-fit: contain;
  border-radius: 0;
}

/* ---- Marca: logo oficial del kit (SVG, lockup horizontal) ---------------- */
.zwf-brand { display: inline-flex; align-items: center; }
.femafe-logo { display: block; width: auto; height: 2.5rem; flex: none; }
.femafe-logo--footer { height: 2.9rem; }
/* Header: logo verde (sobre blanco). Footer: logo blanco (sobre verde). */
.zwf-footer .femafe-logo { content: url("/img/femafe/logo-white.svg"); }

/* =============================================================================
   Fotografía de fondo (wwwroot/img/femafe/)
   ============================================================================= */

/* Hero de la home — HERO PARTIDO (variante A del prototipo).
   El framework usa la variante `image-background` (foto a sangre + fondo verde);
   la reconvertimos: fondo claro, el texto vive a la IZQUIERDA sobre ese fondo, y
   la foto REAL de la oficina (hero.jpg = oficina.jpg, vertical) va en un PANEL a
   la derecha con filete arena. Sin velo. */
body[data-template="zwfHomePage"] .zwf-hero,
body[data-template="zwfHomePage"] .zwf-hero[data-variant="image-background"] {
  position: relative;
  min-block-size: clamp(28rem, 58vh, 38rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--zwf-color-surface);
  color: var(--zwf-color-ink);
}
/* Panel de foto a la derecha (no a sangre) */
body[data-template="zwfHomePage"] .zwf-hero__bg {
  position: absolute;
  inset-block: 0;
  inset-inline: auto 0;
  inline-size: min(46%, 32rem);
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 28%;          /* muestra el cartel + la puerta */
  opacity: 1;
  border-inline-start: 6px solid var(--zwf-color-accent);
}
/* Sin velo: el texto va sobre el fondo claro */
body[data-template="zwfHomePage"] .zwf-hero[data-variant="image-background"]::after { display: none; }
/* El contenido queda en la mitad izquierda; el padding reserva el panel de foto */
@media (min-width: 52.0625em) {
  body[data-template="zwfHomePage"] .zwf-hero__inner {
    padding-inline-end: min(52%, 37rem);
  }
}
body[data-template="zwfHomePage"] .zwf-hero[data-variant="image-background"] .zwf-hero__heading {
  color: var(--zwf-color-primary);
}
body[data-template="zwfHomePage"] .zwf-hero[data-variant="image-background"] .zwf-hero__subheading {
  color: var(--zwf-color-ink-muted);
}

/* Móvil: foto arriba en banda, texto debajo */
@media (max-width: 52em) {
  body[data-template="zwfHomePage"] .zwf-hero,
  body[data-template="zwfHomePage"] .zwf-hero[data-variant="image-background"] {
    display: block;
    min-block-size: 0;
    padding-block: 0;
  }
  body[data-template="zwfHomePage"] .zwf-hero__bg {
    position: relative;
    inline-size: 100%;
    block-size: 13rem;
    border-inline-start: 0;
    border-block-end: 5px solid var(--zwf-color-accent);
    object-position: 50% 32%;
  }
  body[data-template="zwfHomePage"] .zwf-hero__inner {
    padding-block: clamp(2rem, 7vw, 3rem);
  }
  body[data-template="zwfHomePage"] .zwf-hero__inner > * { max-inline-size: none; }
}

/* Banda CTA "primary": banda cálida arena (no verde sólido). Titular y botón
   siguen en verde. */
.zwf-block--cta[data-theme="primary"] .zwf-cta {
  background: var(--femafe-arena-bg);
  color: var(--zwf-color-ink);
}
.zwf-block--cta[data-theme="primary"] .zwf-cta :is(h2, h3) { color: var(--zwf-color-primary); }
.zwf-block--cta[data-theme="primary"] .zwf-cta p { color: var(--zwf-color-ink-muted); }

/* "El Estudio": foto real de la oficina (Rosales 42) junto al texto de intro
   (la foto es vertical, se muestra entera — nada de recortes). */
.zwf-about-split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 48em) {
  .zwf-about-split { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}
.zwf-about-split__figure { margin: 0; }
.zwf-about-split__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--zwf-color-border);
}

/* =============================================================================
   Página de un área de práctica — imagen + texto conectados
   ============================================================================= */

/* El _DetailHeader ya no muestra su figura aquí: la imagen la coloca la plantilla. */
body[data-template="zwfServicePage"] .zwf-detail-header__figure { display: none; }

.zwf-service-body { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); }
@media (min-width: 52em) {
  .zwf-service-body.has-media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: start;
  }
}
.zwf-service-body__media { margin: 0; }
.zwf-service-body__media img {
  display: block;
  width: 100%;
  height: auto;
  max-block-size: 30rem;
  object-fit: cover;
  border: 1px solid var(--zwf-color-border);
}
@media (min-width: 52em) {
  .zwf-service-body__media { position: sticky; top: 6.5rem; }
}
.zwf-service-body__content > :first-child { margin-top: 0; }
/* Los bloques del Block Grid traen su propio section/container: lo neutralizamos
   dentro de la columna para que no dupliquen padding ni ancho. */
.zwf-service-body__content .zwf-block { padding-block: 0; margin-block: 1.5rem; }
.zwf-service-body__content .zwf-block .zwf-container {
  padding-inline: 0;
  max-width: none;
}
.zwf-service-body__content .zwf-block--cta .zwf-cta { padding: clamp(1.25rem, 3vw, 1.75rem); }

/* =============================================================================
   Áreas de práctica — grilla de tarjetas + modal
   ============================================================================= */
.femafe-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.femafe-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--zwf-color-paper);
  border: 1px solid var(--zwf-color-border);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.28s ease, border-color 0.28s ease;
}
.femafe-tile:hover,
.femafe-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--zwf-color-primary);
  box-shadow: 0 16px 36px rgba(20, 28, 16, 0.16);
  outline: none;
}
.femafe-tile__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--zwf-color-surface-2);
}
.femafe-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;   /* sesga hacia arriba: no corta caras */
  transition: transform 0.4s ease;
}
.femafe-tile:hover .femafe-tile__media img { transform: scale(1.04); }

/* Grilla de personas: tarjetas algo más chicas, foto en retrato */
.femafe-tiles--people { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.femafe-tiles--people .femafe-tile__media { aspect-ratio: 4 / 5; }
.femafe-tiles--people .femafe-tile__title { font-size: 1.05rem; }
.femafe-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.35rem 1.4rem;
  flex: 1;
}
.femafe-tile__title {
  font-family: var(--zwf-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--zwf-color-ink);
  transition: color 0.2s ease;
}
.femafe-tile:hover .femafe-tile__title { color: var(--zwf-color-primary); }
.femafe-tile__text {
  font-size: var(--zwf-text-sm);
  color: var(--zwf-color-ink-muted);
}
.femafe-tile__more {
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: var(--zwf-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zwf-color-primary);
}
.femafe-tile__more::after {
  content: " \2192";
  display: inline-block;
  transition: transform 0.25s ease;
}
.femafe-tile:hover .femafe-tile__more::after { transform: translateX(5px); }

/* ---- Modal ---------------------------------------------------------------- */
html.femafe-modal-open { overflow: hidden; }

.femafe-modal {
  /* Centrado: el reset de ZWF (`* { margin: 0 }`) pisa el `margin: auto` que el
     navegador aplica a un <dialog> modal, así que lo re-declaramos. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(50rem, calc(100vw - 2rem));
  max-height: min(88vh, 52rem);
  padding: 0;
  border: 0;
  border-top: 4px solid var(--zwf-color-accent);
  background: var(--zwf-color-paper);
  color: var(--zwf-color-ink);
  box-shadow: 0 30px 80px rgba(14, 19, 9, 0.5);
  overflow: hidden;            /* una sola barra de scroll: la de __scroll */
}
.femafe-modal::backdrop {
  background: rgba(14, 19, 9, 0.55);
  backdrop-filter: blur(2px);
}
@media (prefers-reduced-motion: no-preference) {
  .femafe-modal[open] {
    animation: femafe-dialog-in 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes femafe-dialog-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
}
.femafe-modal__close-form { position: sticky; top: 0; z-index: 2; height: 0; }
.femafe-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  border: 0;
  background: var(--zwf-color-surface);
  color: var(--zwf-color-ink-muted);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.femafe-modal__close:hover { background: var(--zwf-color-primary); color: #fff; }
.femafe-modal__scroll {
  overflow-y: auto;
  max-height: min(88vh, 52rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  scrollbar-width: thin;
  scrollbar-color: var(--zwf-color-border-strong) transparent;
}
.femafe-modal__scroll::-webkit-scrollbar { width: 8px; }
.femafe-modal__scroll::-webkit-scrollbar-thumb {
  background: var(--zwf-color-border-strong);
  border-radius: 999px;
}
.femafe-modal__scroll > .zwf-eyebrow { margin-bottom: 0.6rem; }
.femafe-modal h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0 0 0.9rem;
}
.femafe-modal__media {
  /* Móvil: imagen entera, al ancho del texto. */
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1.3rem;
  border: 1px solid var(--zwf-color-border);
}
@media (min-width: 48em) {
  /* Escritorio: modal más ancho + recorte suave arriba/abajo (sin cortar la
     cabeza — el encuadre se sube con object-position). */
  .femafe-modal__media {
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    object-position: 50% 22%;
  }
}

/* Modal de una persona: la foto es un retrato contenido (no a sangre ni
   recortado), centrado y con tope de alto. */
.femafe-modal--person .femafe-modal__media {
  aspect-ratio: auto;
  object-fit: contain;
  width: auto;
  max-width: 100%;
  max-block-size: 24rem;
  margin: 0 auto 1.4rem;
}
.femafe-modal__lead {
  font-size: 1.05rem;
  color: var(--zwf-color-ink);
  font-weight: 500;
  margin: 0 0 1rem;
}
.femafe-modal--person .femafe-modal__lead { margin-bottom: 0.35rem; }
.femafe-modal__matricula {
  font-family: var(--femafe-font-ui);
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--zwf-color-ink-subtle);
  margin: 0 0 1.2rem;
}
.femafe-modal__prose .zwf-block,
.femafe-modal__prose .zwf-section { padding-block: 0; margin-block: 0.75rem; }
.femafe-modal__prose .zwf-container { padding-inline: 0; max-width: none; }
/* El bloque CTA sembrado es redundante con los botones del modal. */
.femafe-modal__prose .zwf-block--cta { display: none; }
.femafe-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

/* =============================================================================
   Movimiento (solo si el JS lo activa y no hay prefers-reduced-motion)
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* IMPORTANTE: el contenido NUNCA se oculta por CSS. `.femafe-reveal` no cambia
     nada; sólo cuando el JS agrega `.is-in` (el elemento entró en pantalla) se
     dispara una animación de entrada. Si el observer no corre, todo se ve igual. */
  html.femafe-motion .femafe-reveal.is-in {
    animation: femafe-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--femafe-delay, 0ms) both;
  }
  @keyframes femafe-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  /* Hero: leve zoom continuo de la foto (Ken Burns) */
  html.femafe-motion body[data-template="zwfHomePage"] .zwf-hero__bg {
    animation: femafe-kenburns 22s ease-out forwards;
  }
  @keyframes femafe-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
  }
}

/* =============================================================================
   Pulido de componentes: más "diseñado", con microinteracciones
   ============================================================================= */

/* Header: sombra al scrollear + condensado */
.zwf-header { transition: box-shadow 0.25s ease, background-color 0.25s ease; }
.zwf-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(20, 28, 16, 0.12);
}
@media (min-width: 64em) {
  .zwf-header.is-scrolled .zwf-header__inner { padding-block: 0.35rem; }
}

/* Enlaces del nav: subrayado que crece */
.zwf-nav__link {
  position: relative;
  padding-block: 0.35rem;
}
.zwf-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--zwf-color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.zwf-nav__link:hover::after,
.zwf-nav__link[aria-current]::after { transform: scaleX(1); }

/* Antetítulo con arco de marca delante (media circunferencia = el monograma) */
.zwf-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; }
.zwf-eyebrow::before {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 0.7rem;
  border: 2px solid var(--zwf-color-accent-hover);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

/* Títulos dentro de prosa: regla corta debajo (detalle del kit, en arena) */
.zwf-prose > h2 {
  padding-bottom: 0.4rem;
  border-bottom: 3px solid var(--zwf-color-accent);
  display: table; /* la regla mide el ancho del texto, no del contenedor */
}

/* Tarjetas de listado: elevación + borde azul + flecha */
.zwf-card {
  transition:
    transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}
.zwf-card:hover,
.zwf-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--zwf-color-primary);
  box-shadow: 0 16px 36px rgba(20, 28, 16, 0.16);
}
.zwf-card__title { transition: color 0.2s ease; }
.zwf-card:hover .zwf-card__title { color: var(--zwf-color-primary); }
.zwf-card__title::after {
  content: " \2192";
  display: inline-block;
  transition: transform 0.25s ease;
  color: var(--zwf-color-primary);
}
.zwf-card:hover .zwf-card__title::after { transform: translateX(5px); }
.zwf-card__media img { transition: transform 0.4s ease; }
.zwf-card:hover .zwf-card__media img { transform: scale(1.04); }

/* Ítems del feature grid: círculo del icono se rellena al pasar */
.zwf-feature__icon {
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.zwf-feature:hover .zwf-feature__icon {
  background-color: var(--zwf-color-primary);
  color: #fff;
  transform: translateY(-2px);
}

/* Botones: leve realimentación al click + flecha en el secundario */
.zwf-btn {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.zwf-btn:active { transform: translateY(1px); }
.zwf-btn--primary { position: relative; }

/* Enlaces dentro de prosa: subrayado animado */
.zwf-prose a:not(.zwf-btn) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}
.zwf-prose a:not(.zwf-btn):hover { background-size: 100% 1.5px; }

/* Acordeón (FAQ): apertura más suave, marcador que gira */
.zwf-accordion__item { transition: border-color 0.2s ease; }
.zwf-accordion__item:hover { border-color: var(--zwf-color-border-strong); }

/* Estadísticas: número grande con la condensada de marca */
.zwf-stat__value {
  font-family: var(--zwf-font-heading);
  font-weight: 700;
  color: var(--zwf-color-primary);
}

/* Labels de UI en Inter (chips, "ver más", metadatos) */
.femafe-tile__more,
.zwf-card__title::after,
.zwf-badge,
.zwf-chip,
.zwf-tag { font-family: var(--femafe-font-ui); }

/* =============================================================================
   Trama de marca (monogramas repetidos) — bandas oscuras y separadores
   ============================================================================= */

/* Capa de trama reutilizable: se pinta con ::before para poder bajarle opacidad
   sin afectar al contenido. El contenido queda por encima (position/z-index). */
.zwf-footer,
.zwf-block--cta[data-theme="primary"] .zwf-cta,
body[data-template="zwfErrorPage"] .zwf-section--error {
  position: relative;
  isolation: isolate;
}
.zwf-footer::before,
.zwf-block--cta[data-theme="primary"] .zwf-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/img/femafe/trama-verde.svg") center / 300px repeat;
  opacity: 0.07;
  pointer-events: none;
}

/* Separador con trama para secciones sobre fondo claro (lo activa la plantilla
   agregando la clase a una <section>). */
.zwf-section--trama { position: relative; isolation: isolate; }
.zwf-section--trama::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/img/femafe/trama-arena.svg") center / 320px repeat;
  opacity: 0.5;
  pointer-events: none;
}

/* Viñetas de prosa: punto de marca en oliva */
.zwf-prose ul > li::marker { color: var(--zwf-color-secondary); }

/* Foco visible coherente con la marca */
:where(a, button, .zwf-btn, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--zwf-color-focus);
  outline-offset: 2px;
}

/* =============================================================================
   Página 404 con trama + sello
   ============================================================================= */
body[data-template="zwfErrorPage"] .zwf-section--error {
  background: var(--zwf-color-surface);
  overflow: hidden;
}
body[data-template="zwfErrorPage"] .zwf-section--error::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/img/femafe/trama-arena.svg") center / 340px repeat;
  opacity: 0.6;
}
body[data-template="zwfErrorPage"] .femafe-404-sello {
  display: block;
  width: clamp(6rem, 16vw, 10rem);
  margin: 0 auto 1.5rem;
  opacity: 0.9;
}

/* =============================================================================
   Formularios (contacto / newsletter) — el partial _Form.cshtml usa estas
   clases y no había CSS para ellas: label+input quedaban en línea y los
   controles con ancho por defecto. Layout apilado, controles a todo el ancho.
   ============================================================================= */
.zwf-form-wrap { max-width: 42rem; }
.zwf-form__heading {
  font-family: var(--zwf-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 0.4rem;
}
.zwf-form__intro {
  color: var(--zwf-color-ink-muted);
  margin: 0 0 1.5rem;
}

.zwf-form {
  display: grid;
  gap: 1.1rem;
}
.zwf-form__row {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}
.zwf-form__label {
  font-family: var(--femafe-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--zwf-color-secondary);
}
.zwf-form__req { color: var(--zwf-color-primary); margin-inline-start: 0.15rem; }

.zwf-form__control {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-family: var(--femafe-font-ui);
  color: var(--zwf-color-ink);
  background: var(--zwf-color-paper);
  border: 1px solid var(--zwf-color-border-strong);
  border-radius: 0;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.zwf-form__control::placeholder { color: var(--zwf-color-ink-subtle); }
.zwf-form__control:focus {
  outline: none;
  border-color: var(--zwf-color-primary);
  box-shadow: 0 0 0 3px rgba(44, 65, 57, 0.16);
}
:root[data-theme="dark"] .zwf-form__control:focus {
  box-shadow: 0 0 0 3px rgba(157, 183, 154, 0.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .zwf-form__control:focus {
    box-shadow: 0 0 0 3px rgba(157, 183, 154, 0.22);
  }
}
textarea.zwf-form__control {
  min-height: 8rem;
  resize: vertical;
}

.zwf-form__check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-family: var(--femafe-font-ui);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--zwf-color-ink-muted);
  cursor: pointer;
}
.zwf-form__check input {
  margin: 0.15rem 0 0;
  flex: none;
  width: 1rem;
  height: 1rem;
  accent-color: var(--zwf-color-primary);
}

.zwf-form__row--actions { margin-top: 0.4rem; }
.zwf-form__row--actions .zwf-btn { width: 100%; }
@media (min-width: 32em) {
  .zwf-form__row--actions .zwf-btn { width: auto; min-width: 14rem; }
}

.zwf-form__errors {
  border: 1px solid #c0493b;
  background: rgba(192, 73, 59, 0.08);
  color: #b23f31;
  padding: 0.9rem 1rem;
  margin: 0 0 1.25rem;
  font-family: var(--femafe-font-ui);
  font-size: 0.9rem;
}
.zwf-form__errors p { margin: 0; font-weight: 600; }
.zwf-form__errors ul { margin: 0.35rem 0 0; padding-inline-start: 1.1rem; }
.zwf-form__success {
  border: 1px solid var(--zwf-color-primary);
  background: var(--zwf-color-primary-subtle);
  color: var(--zwf-color-primary);
  padding: 1rem 1.15rem;
  font-family: var(--femafe-font-ui);
}