/* ==========================================================================
   atlas-motion.css — capa de elevación de diseño (2026-07-13).
   Additiva sobre los estilos inline del sitio: reveals, micro-interacciones,
   tipografía fluida, ambiente del hero y sticky mobile CTA.
   Se carga DESPUÉS de atlas-responsive.css en todas las páginas.
   Sin JS o con prefers-reduced-motion, todo el contenido es visible:
   el estado oculto inicial solo existe bajo html.atlas-motion.
   ========================================================================== */

/* ------------------------------------------------------------------
   0. TIPOGRAFÍA DE MARCA — Fraunces reemplaza a Spectral como display.
   El sitio declara font-family inline ('Spectral',serif), así que el
   swap se hace por selector de atributo; si Fraunces no carga, cae a
   Spectral/serif sin romper nada. Fraunces (opsz variable) es cálida,
   literaria y con carácter — "bookish" para una marca de lectura.
   ------------------------------------------------------------------ */
[style*="Spectral"] {
  font-family: 'Fraunces', 'Spectral', Georgia, serif !important;
}

/* ------------------------------------------------------------------
   1. TIPOGRAFÍA FLUIDA — los display sizes fijos en px pasan a clamp()
   para que escalen con el viewport en vez de saltar en un breakpoint.
   ------------------------------------------------------------------ */
h1[style] {
  font-size: clamp(33px, 2.2rem + 1.9vw, 56px) !important;
  line-height: 1.08 !important;
}
h2[style] {
  font-size: clamp(26px, 1.55rem + 1.35vw, 42px) !important;
  line-height: 1.14 !important;
}
@media (max-width: 380px) {
  h1[style] { font-size: 34px !important; line-height: 1.14 !important; }
}

/* Titulares con mejor rasterizado y kerning */
h1[style], h2[style], h3[style] {
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

/* ------------------------------------------------------------------
   1b. VIEW TRANSITIONS — fundido suave entre páginas del sitio.
   Una regla, cero JS; navegadores sin soporte navegan normal.
   ------------------------------------------------------------------ */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ------------------------------------------------------------------
   1c. GRANO — textura de papel sutil, SOLO en el hero (un overlay fijo
   sobre toda la página forzaba composición cara encima del iframe
   cross-origin del calendario y congelaba el render en máquinas
   modestas — verificado 2026-07-13; no repetir ese patrón).
   ------------------------------------------------------------------ */
section:first-of-type::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ------------------------------------------------------------------
   2. SCROLL REVEALS — atlas-motion.js marca los elementos con .ar y un
   --ar-delay escalonado; al entrar al viewport agrega .in.
   Easing suave tipo spring, distancia corta (calma, no circo).
   ------------------------------------------------------------------ */
html.atlas-motion .ar {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--ar-delay, 0ms);
  /* sin will-change: 40+ capas compuestas congelan el compositor
     en máquinas modestas; la transición es barata igual */
}
html.atlas-motion .ar.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.atlas-motion .ar { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------
   3. HEADER — vidrio más presente + sombra solo al scrollear
   ------------------------------------------------------------------ */
header { transition: box-shadow 0.25s ease; }
header.hdr-scrolled {
  box-shadow: 0 10px 30px -18px rgba(22, 41, 47, 0.35);
}

/* subrayado animado en los links del nav (desktop) */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: #2C6E63;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-link:hover::after { transform: scaleX(1); }

/* ------------------------------------------------------------------
   4. HERO — ambiente: aura suave de marca detrás del contenido.
   Dos radiales muy tenues (teal + naranja) con drift lentísimo.
   Solo en la primera sección de cada página (hero) vía :first-of-type.
   ------------------------------------------------------------------ */
section:first-of-type { position: relative; isolation: isolate; overflow: hidden; }
section:first-of-type::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background:
    radial-gradient(38% 42% at 82% 12%, rgba(224, 122, 63, 0.09), transparent 70%),
    radial-gradient(46% 52% at 8% 88%, rgba(44, 110, 99, 0.08), transparent 70%),
    radial-gradient(30% 34% at 50% 0%, rgba(212, 175, 55, 0.05), transparent 72%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  section:first-of-type::before {
    animation: atlas-aura 26s ease-in-out infinite alternate;
  }
  @keyframes atlas-aura {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-2.5%, 2%, 0) scale(1.06); }
  }
}

/* Foto de Laura en el hero: arco editorial (solo desktop, donde hay aire) */
@media (min-width: 901px) {
  section:first-of-type img[src*="laura-director"] {
    border-radius: 260px 260px 26px 26px !important;
  }
}

/* halo decorativo detrás del retrato */
section:first-of-type div[style*="position:relative"] { isolation: isolate; }

/* ------------------------------------------------------------------
   5. BOTONES — micro-interacciones: la flecha se desliza, el botón
   respira. Nada se mueve más de 3px.
   ------------------------------------------------------------------ */
.hv-lift svg, .hv-lift1 svg, .hv-border-teal svg, .hv-ink svg {
  transition: transform 0.22s cubic-bezier(0.65, 0, 0.35, 1);
}
.hv-lift:hover svg, .hv-lift1:hover svg, .hv-ink:hover svg { transform: translateX(3px); }
.hv-lift, .hv-lift1, .hv-ink {
  transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.15s ease;
}
.hv-lift:hover { box-shadow: 0 16px 34px -10px rgba(224, 122, 63, 0.75); }
.hv-lift:active, .hv-lift1:active, .hv-ink:active { transform: translateY(0) scale(0.985); }

/* tarjetas: el chip del ícono responde al hover de la tarjeta */
.hv-card > div:first-child { transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1); }
.hv-card:hover > div:first-child { transform: scale(1.08) rotate(-2deg); }

/* ------------------------------------------------------------------
   6. STICKY MOBILE CTA — barra inferior en teléfonos (inyectada por JS).
   Acción principal + botón de llamada. Safe-area para iPhone.
   ------------------------------------------------------------------ */
.atlas-mcta {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  gap: 10px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  pointer-events: none;
}
.atlas-mcta.mcta-visible {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 680px) {
  .atlas-mcta { display: flex; }
  /* que el footer no quede tapado por la barra */
  footer > div { padding-bottom: 96px !important; }
}
.atlas-mcta .mcta-book {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #E07A3F;
  color: #fff;
  text-decoration: none;
  font-family: 'Public Sans', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: 999px;
  box-shadow: 0 14px 34px -8px rgba(22, 41, 47, 0.5);
}
.atlas-mcta .mcta-book:active { transform: scale(0.98); }
.atlas-mcta .mcta-tel {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: 52px;
  border-radius: 999px;
  background: #16292F;
  color: #FBF7F0;
  box-shadow: 0 14px 34px -8px rgba(22, 41, 47, 0.5);
}

/* ------------------------------------------------------------------
   7. DETALLES GLOBALES
   ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* scroll-margin para anclas bajo el header sticky */
#book, #calendar, [id] { scroll-margin-top: 84px; }

/* las imágenes cargan con un fade sutil */
@media (prefers-reduced-motion: no-preference) {
  html.atlas-motion img { transition: opacity 0.4s ease; }
}