/* ==========================================================================
   Atril Mejoras Visuales — mejoras.css
   Se carga DESPUÉS de los estilos del tema «Atril Jurídico» y solo
   redefine variables y añade capas de interacción. No reemplaza el tema.
   Prefijo de clases propias: am-
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografía (SIL Open Font License)
   Las reglas @font-face las imprime el plugin en línea (atril-mejoras-visuales.php),
   apuntando a assets/fonts/ si las fuentes ya se descargaron al servidor, o al
   CDN de jsDelivr como respaldo.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   2. Tokens: se sobrescriben las variables del tema y se añade el acento
   -------------------------------------------------------------------------- */
:root {
  --atril-serif: "Newsreader Variable", Newsreader, Georgia, "Times New Roman", serif;
  --atril-sans: "Inter Variable", Inter, "Segoe UI", Aptos, Arial, sans-serif;

  /* Acento bronce: cálido, discreto, combina con la paleta oliva */
  --atril-accent: #8c6b3f;        /* texto pequeño sobre blanco: 4.9:1 */
  --atril-accent-soft: #b08d57;   /* líneas, bordes, detalles */
  --atril-accent-light: #dcc7a3;  /* sobre fondos oscuros */
  --atril-accent-tint: #f6efe3;   /* fondos muy tenues */

  --atril-shadow: 0 24px 60px -24px rgba(36, 37, 32, 0.28);
  --am-shadow-hover: 0 30px 56px -26px rgba(36, 37, 32, 0.38);
  --am-ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --am-dur: 420ms;
  --am-dur-fast: 220ms;
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-optical-sizing: auto; }

/* Titulares: Newsreader respira mejor con menos tracking negativo que Georgia */
h1, h2, h3, .hero h1, .section-heading h2 {
  font-family: var(--atril-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  font-feature-settings: "kern" 1, "liga" 1;
}
h1 { letter-spacing: -0.02em; line-height: 1.04; }
h1 .am-em, .am-em {
  font-style: italic;
  font-weight: 450;
  color: var(--atril-accent);
}
p, li, a, button, input, textarea, select { font-family: var(--atril-sans); }
h1, h2, h3, .hero h1 { font-family: var(--atril-serif); }

/* --------------------------------------------------------------------------
   3. Acento aplicado con disciplina
   -------------------------------------------------------------------------- */
.eyebrow { color: var(--atril-accent); }
.eyebrow::before { background: var(--atril-accent-soft); }
.eyebrow--light { color: var(--atril-accent-light); }
.eyebrow--light::before { background: var(--atril-accent-light); }
.service-kicker, .ajpc-kicker, .ajpc-category { color: var(--atril-accent); }
.service-card--featured .service-kicker { color: var(--atril-accent-light); }
.route-index { color: var(--atril-accent); font-family: var(--atril-serif); font-style: italic; font-size: 1.1rem; }
.route-card:hover .route-index { color: var(--atril-accent-light); }
.hero-seal .eyebrow, .hero-seal > span:first-child, .hero-seal small { color: var(--atril-accent-light); }
.booking-steps li > span:first-child {
  border-color: var(--atril-accent-soft) !important;
  color: var(--atril-accent-light);
}

/* --------------------------------------------------------------------------
   4. Enlaces y botones: subrayado que se dibuja, flecha que avanza
   -------------------------------------------------------------------------- */
.text-link, .card-link, .service-card > a, .editorial-card > a, .ajpc-all, .site-footer a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 380ms var(--am-ease), color var(--am-dur-fast) ease;
}
.text-link:hover, .text-link:focus-visible,
.service-card > a:hover, .editorial-card > a:hover,
.ajpc-all:hover, .site-footer a:hover,
.route-card:hover .card-link {
  background-size: 100% 1px;
}
.service-card > a, .editorial-card > a { padding-bottom: 2px; text-decoration: none !important; }
.service-card > a span, .editorial-card > a span { display: inline-block; transition: transform var(--am-dur-fast) var(--am-ease); }
.service-card > a:hover span, .editorial-card > a:hover span { transform: translateX(5px); }

.button, .wp-element-button, .atril-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--am-dur-fast) var(--am-ease),
              box-shadow var(--am-dur) var(--am-ease),
              background-color var(--am-dur-fast) ease,
              border-color var(--am-dur-fast) ease;
}
/* brillo diagonal que recorre el botón una sola vez al pasar el cursor */
.button::after, .atril-submit::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.16) 50%, transparent 80%);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
  z-index: -1;
}
.button:hover::after, .atril-submit:hover::after {
  transform: translateX(420%) skewX(-18deg);
  transition: transform 700ms var(--am-ease);
}
.button:hover, .atril-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(36, 37, 32, 0.55), inset 0 0 0 1px var(--atril-accent-soft);
}
.button:active, .atril-submit:active { transform: translateY(0) scale(0.985); transition-duration: 80ms; }

/* --------------------------------------------------------------------------
   5. Tarjetas: elevación, sombra y una línea de acento que crece
   -------------------------------------------------------------------------- */
.service-card, .editorial-card, .ajpc-card, .booking-card {
  position: relative;
  transition: transform var(--am-dur) var(--am-ease),
              box-shadow var(--am-dur) var(--am-ease),
              border-color var(--am-dur) var(--am-ease);
}
.service-card, .editorial-card { overflow: hidden; }
.service-card::before, .editorial-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--atril-accent-soft), var(--atril-accent-light));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--am-ease);
}
.service-card:hover, .editorial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--am-shadow-hover);
  border-color: var(--atril-accent-soft);
}
.service-card:hover::before, .editorial-card:hover::before { transform: scaleX(1); }

/* Route cards: más compactas y con el mismo acento */
.route-card {
  min-height: 200px;
  padding: 26px 24px;
  transition: transform var(--am-dur) var(--am-ease),
              background-color var(--am-dur) ease,
              color var(--am-dur) ease,
              box-shadow var(--am-dur) var(--am-ease);
}
.route-card:hover { box-shadow: var(--am-shadow-hover); }
.route-card h3 { min-height: 0; margin: 0.45rem 0 0.55rem; font-size: 1.5rem; }

/* Carrusel de publicaciones */
.ajpc-visual { overflow: hidden; }
.ajpc-visual img {
  transition: transform 700ms var(--am-ease), filter 700ms var(--am-ease);
  will-change: transform;
}
.ajpc-card:hover .ajpc-visual img { transform: scale(1.05); }
.ajpc-card:hover { transform: translateY(-4px); box-shadow: var(--am-shadow-hover); }
.ajpc-prev, .ajpc-next, .ajpc-toggle {
  transition: border-color var(--am-dur-fast) ease, color var(--am-dur-fast) ease,
              background-color var(--am-dur-fast) ease, transform var(--am-dur-fast) var(--am-ease);
}
.ajpc-prev:not([disabled]):hover, .ajpc-next:not([disabled]):hover, .ajpc-toggle:hover {
  border-color: var(--atril-accent-soft);
  color: var(--atril-accent);
  transform: translateY(-2px);
}
.ajpc .ajpc-intro { text-align: left; }

/* --------------------------------------------------------------------------
   6. Header que reacciona al scroll
   -------------------------------------------------------------------------- */
.site-header {
  transition: box-shadow var(--am-dur) var(--am-ease), background-color var(--am-dur) ease;
}
.header-shell { transition: min-height var(--am-dur) var(--am-ease); }
.brand-mark { transition: width var(--am-dur) var(--am-ease); }
.site-header.am-scrolled {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px -22px rgba(36, 37, 32, 0.45);
  border-bottom-color: rgba(176, 141, 87, 0.35);
}
.site-header.am-scrolled .header-shell { min-height: 68px; }
.site-header.am-scrolled .brand-mark { width: 44px; }
.primary-navigation .menu a { transition: color var(--am-dur-fast) ease; }
.primary-navigation .menu a:hover { text-decoration-color: var(--atril-accent-soft); }

/* --------------------------------------------------------------------------
   7. Hero: entrada escalonada, aro decorativo que respira, tarjeta con tilt
   -------------------------------------------------------------------------- */
.hero::before {
  border-color: rgba(176, 141, 87, 0.35);
}
.hero-visual {
  transition: transform 600ms var(--am-ease), box-shadow 600ms var(--am-ease), outline-color 600ms ease;
  transform-style: preserve-3d;
  outline: 1px solid rgba(176, 141, 87, 0);
  outline-offset: 12px;
  box-shadow: var(--atril-shadow);
}
.hero-identity:hover .hero-visual { outline-color: rgba(176, 141, 87, 0.6); }
.hero-visual.am-tilting { transition: transform 120ms linear, outline-color 600ms ease; }

/* Palabras del titular */
.am-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.am-w > span { display: inline-block; }

/* --------------------------------------------------------------------------
   8. Aparición al hacer scroll (las clases las coloca efectos.js;
      sin JavaScript nada se oculta)
   -------------------------------------------------------------------------- */
html.am-js .am-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 640ms var(--am-ease), transform 760ms var(--am-ease);
  transition-delay: calc(var(--am-i, 0) * 85ms);
  will-change: opacity, transform;
}
html.am-js .am-reveal.am-in { opacity: 1; transform: none; }
html.am-js .am-reveal--fade { transform: none; }

/* --------------------------------------------------------------------------
   9. Ritmo vertical más ágil
   -------------------------------------------------------------------------- */
.section { padding: clamp(64px, 8vw, 100px) 24px; }
.section-heading { margin-bottom: clamp(28px, 4vw, 44px); }

/* --------------------------------------------------------------------------
   10. Bloque de consulta: aviso plegable y botón visible
   -------------------------------------------------------------------------- */
.am-details {
  border: 1px solid rgba(77, 77, 69, 0.18);
  border-radius: 12px;
  background: var(--atril-accent-tint);
  margin: 0 0 18px;
  overflow: hidden;
}
.am-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-family: var(--atril-sans);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--atril-ink);
}
.am-details > summary::-webkit-details-marker { display: none; }
.am-details > summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--atril-accent);
  border-bottom: 2px solid var(--atril-accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--am-dur-fast) var(--am-ease);
}
.am-details[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.am-details > summary:hover { color: var(--atril-accent); }
.am-details > .atril-privacy-summary {
  margin: 0;
  padding: 0 16px 16px;
  border: 0;
  background: transparent;
}
.am-details > .atril-privacy-summary .atril-privacy-summary__title { display: none; }
.booking-steps li { transition: transform var(--am-dur) var(--am-ease); }
.booking-steps li:hover { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   11. Cierre antes del footer y footer
   -------------------------------------------------------------------------- */
.am-cta {
  background: var(--atril-accent-tint);
  border-top: 1px solid rgba(176, 141, 87, 0.35);
}
.am-cta__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}
.am-cta h2 { margin: 0 0 0.4rem; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.am-cta p:last-child { margin: 0; color: var(--atril-muted); max-width: 56ch; }
@media (max-width: 680px) {
  .am-cta__shell { grid-template-columns: 1fr; }
  .am-cta .button { width: 100%; }
}
.site-footer { border-top: 1px solid rgba(176, 141, 87, 0.45); }
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--atril-accent-light); }

/* --------------------------------------------------------------------------
   12. Movimiento ambiental (solo si el usuario no pidió reducir movimiento)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.am-js .hero::before {
    animation: am-breathe 16s ease-in-out infinite alternate;
  }
  html.am-js .hero-copy > .eyebrow,
  html.am-js .hero-copy > .hero-lead,
  html.am-js .hero-copy > .button-row,
  html.am-js .hero-copy > .hero-note {
    animation: am-rise 760ms var(--am-ease) both;
  }
  html.am-js .hero-copy > .eyebrow { animation-delay: 80ms; }
  html.am-js .hero-copy > .hero-lead { animation-delay: 520ms; }
  html.am-js .hero-copy > .button-row { animation-delay: 640ms; }
  html.am-js .hero-copy > .hero-note { animation-delay: 760ms; }
  html.am-js .hero-identity { animation: am-rise 900ms var(--am-ease) 300ms both; }
  html.am-js .am-w > span { animation: am-word 780ms var(--am-ease) both; animation-delay: calc(140ms + var(--am-i, 0) * 70ms); }
  html.am-js .site-header { animation: am-fade 600ms ease both; }
}
@keyframes am-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes am-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-word { from { transform: translateY(112%); } to { transform: none; } }
@keyframes am-breathe {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-14px, 10px) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  html.am-js .am-reveal { opacity: 1; transform: none; transition: none; }
  .button::after, .atril-submit::after { display: none; }
  .hero-visual, .service-card, .editorial-card, .route-card, .ajpc-card { transition: none; }
}

/* --------------------------------------------------------------------------
   13. Móvil: menos relleno, tarjetas más densas
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  .section { padding: 56px 20px; }
  .route-card { min-height: 0; padding: 22px 20px; }
  .service-card, .editorial-card { padding: 30px 24px; }
  .hero-visual { outline: 0; }
}

/* --------------------------------------------------------------------------
   14. Páginas interiores (v1.1): hero de página, tarjetas y publicaciones
   -------------------------------------------------------------------------- */
.page-hero .eyebrow { color: var(--atril-accent-light); }
.page-hero .eyebrow::before { background: var(--atril-accent-light); }
.page-hero::before, .page-hero::after { border-color: rgba(176, 141, 87, 0.28); }

/* Tarjetas de Servicios, Cursos, Videos, El despacho, Contacto y Publicaciones */
.aj-service, .aj-catalog-education, .atril-video-card, .contact-card,
.four-grid > article, .three-grid > article, .two-grid > article, .ajp-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--am-dur) var(--am-ease),
              box-shadow var(--am-dur) var(--am-ease),
              border-color var(--am-dur) var(--am-ease);
}
.aj-service::before, .aj-catalog-education::before, .atril-video-card::before, .contact-card::before,
.four-grid > article::before, .three-grid > article::before, .two-grid > article::before, .ajp-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--atril-accent-soft), var(--atril-accent-light));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--am-ease);
  z-index: 1;
  pointer-events: none;
}
.aj-service:hover, .aj-catalog-education:hover, .atril-video-card:hover, .contact-card:hover,
.four-grid > article:hover, .three-grid > article:hover, .two-grid > article:hover, .ajp-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--am-shadow-hover);
  border-color: var(--atril-accent-soft);
}
.aj-service:hover::before, .aj-catalog-education:hover::before, .atril-video-card:hover::before, .contact-card:hover::before,
.four-grid > article:hover::before, .three-grid > article:hover::before, .two-grid > article:hover::before, .ajp-card:hover::before {
  transform: scaleX(1);
}
.atril-label, .aj-service-kicker, .four-grid > article > span:first-child, .three-grid > article > span:first-child { color: var(--atril-accent); }

/* Línea de tiempo gremial (El despacho) */
.atril-gremial-period { transition: transform var(--am-dur) var(--am-ease); }
.atril-gremial-period:hover { transform: translateX(4px); }
.atril-gremial-period dt { color: var(--atril-accent); }

/* Portada de Publicaciones: usa su propia plantilla, así que se le asignan las fuentes */
.ajp-publicaciones h1, .ajp-publicaciones h2, .ajp-publicaciones h3 {
  font-family: var(--atril-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.ajp-publicaciones, .ajp-publicaciones p, .ajp-publicaciones a, .ajp-publicaciones button,
.ajp-publicaciones input, .ajp-publicaciones select, .ajp-publicaciones label { font-family: var(--atril-sans); }
.ajp-kicker, .ajp-category, .ajp-card-kicker { color: var(--atril-accent); }
.ajp-visual { overflow: hidden; }
.ajp-visual img { transition: transform 700ms var(--am-ease); will-change: transform; }
.ajp-card:hover .ajp-visual img { transform: scale(1.05); }

/* Entrada del hero de página */
@media (prefers-reduced-motion: no-preference) {
  html.am-js .page-hero .eyebrow,
  html.am-js .page-hero p:not(.eyebrow),
  html.am-js .page-hero .button,
  html.am-js .page-hero .button-row,
  html.am-js .page-hero .professional-portrait,
  html.am-js .ajp-hero > * {
    animation: am-rise 760ms var(--am-ease) both;
  }
  html.am-js .page-hero .eyebrow { animation-delay: 60ms; }
  html.am-js .page-hero p:not(.eyebrow) { animation-delay: 420ms; }
  html.am-js .page-hero .button, html.am-js .page-hero .button-row { animation-delay: 540ms; }
  html.am-js .page-hero .professional-portrait { animation-delay: 240ms; }
  html.am-js .ajp-hero > :nth-child(2) { animation-delay: 120ms; }
  html.am-js .ajp-hero > :nth-child(3) { animation-delay: 240ms; }
  html.am-js .ajp-hero > :nth-child(4) { animation-delay: 360ms; }
}
@media (prefers-reduced-motion: reduce) {
  .aj-service, .aj-catalog-education, .atril-video-card, .contact-card,
  .four-grid > article, .three-grid > article, .two-grid > article, .ajp-card, .atril-gremial-period { transition: none; }
}

/* v1.1.1: acentos que el tema sobreescribía por especificidad */
.atril-video-card p.atril-label, p.atril-label,
.ajp-publicaciones .ajp-kicker, .ajp-publicaciones .ajp-category, .ajp-publicaciones .ajp-card-kicker { color: var(--atril-accent); }