/* JL · interacción y movimiento. Mejora progresiva: no oculta contenido. */
:root {
  --motion-ease: cubic-bezier(.2,.75,.2,1);
  --motion-spring: cubic-bezier(.16,1,.3,1);
}

/* Marca completa: sin recorte, sin contracción dentro del flex. */
.logo { overflow: visible; }
.logo img {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  max-width: none;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  clip-path: none;
  transition: filter .4s ease, transform .5s var(--motion-spring);
}
.logo:hover img, .logo:focus-visible img {
  filter: drop-shadow(0 0 12px #f0bd5240);
  transform: rotate(-5deg) scale(1.045);
}
.footer-brand .logo img { width: 86px; height: 86px; flex-basis: 86px; }

/* Lectura y navegación: la página conserva el desplazamiento nativo. */
.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
  z-index: 60;
}
.site-header {
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.site-header.is-scrolled {
  background: rgba(12,15,13,.97);
  border-bottom-color: #f0bd5235;
  box-shadow: 0 8px 36px #0004;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--motion-spring);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a[aria-current]::after,
.main-nav a.is-section-active::after { transform: scaleX(1); }
.main-nav a.is-section-active { color: var(--accent); }
.mobile-nav:not([hidden]) { animation: menu-unfold .24s var(--motion-ease); }
@keyframes menu-unfold { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
.footer-col a { transition: color .2s, translate .3s var(--motion-spring); }
.footer-col a:hover { translate: 4px 0; }

/* Botones: reflejo que responde al gesto, flecha y presión física. */
.btn, .catalog-card-action {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background .25s, border-color .25s, color .25s,
    box-shadow .3s, transform .35s var(--motion-spring);
}
.btn::after, .catalog-card-action::after {
  content: '';
  position: absolute;
  inset: -50% auto -50% -80%;
  width: 45%;
  background: linear-gradient(90deg, transparent, #ffffff26, transparent);
  transform: skewX(-22deg);
  pointer-events: none;
}
.btn:hover::after, .catalog-card-action:hover::after { animation: button-reflection .75s ease both; }
@keyframes button-reflection { to { left: 145%; } }
.btn > span, .catalog-card-action > span, .service-link > span {
  display: inline-block;
  transition: transform .35s var(--motion-spring);
}
.btn:hover > span, .btn:focus-visible > span { transform: translate(3px,-3px); }
.catalog-card-action:hover > span, .service-link:hover > span { transform: translate(3px,-2px); }
.btn-primary:hover { box-shadow: 0 8px 28px #f0bd5228; }
.btn:active, .catalog-card-action:active { transform: translateY(1px) scale(.98); }
.filter-btn, .compare-tabs button, .catalog-filters button {
  transition: background .2s, border-color .2s, color .2s, transform .3s var(--motion-spring);
}
.filter-btn:hover, .compare-tabs button:hover, .catalog-filters button:hover { border-color: var(--accent); transform: translateY(-2px); }
.filter-btn:active, .compare-tabs button:active, .catalog-filters button:active { transform: scale(.96); }

/* La portada mantiene la foto real. Luz ambiental geométrica, sin tapar texto. */
.hero, .catalog-hero { position: relative; isolation: isolate; }
.hero::before, .catalog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 85% 30%, #f0bd520b, transparent 60%);
}
.hero-photo {
  --photo-y: 0px;
  transition: border-radius .65s var(--motion-spring), box-shadow .5s;
  box-shadow: 0 18px 70px #0003;
}
.hero-photo > img {
  transform: scale(1.045) translateY(var(--photo-y));
  transition: transform .45s var(--motion-ease), filter .45s;
}
.hero-photo:hover { border-radius: 68px 20px 20px 20px; box-shadow: 0 22px 80px #0006; }
.hero-photo:hover > img { filter: saturate(1.08); }
.photo-arrow { transition: transform .4s var(--motion-spring); }
.hero-photo:hover .photo-arrow { transform: translate(5px,-5px); }
.status-dot { position: relative; }
.status-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid #f0bd5270;
  border-radius: 50%;
  animation: status-wave 3.6s ease-out infinite;
}
@keyframes status-wave { 0% { transform: scale(.6); opacity: .7; } 65%,100% { transform: scale(1.5); opacity: 0; } }

/* Profundidad y luz local. Las variables se actualizan solo con puntero fino. */
.service-card, .catalog-card, .story-card {
  position: relative;
  isolation: isolate;
  transition: border-color .35s, box-shadow .4s, transform .45s var(--motion-spring);
}
.service-card::before, .catalog-card::before, .story-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(320px circle at var(--light-x,50%) var(--light-y,30%), #f0bd5216, transparent 75%);
  transition: opacity .35s;
  z-index: -1;
}
.service-card:hover::before, .catalog-card:hover::before, .story-card:hover::before,
.service-card:focus-within::before, .catalog-card:focus-within::before { opacity: 1; }
.service-card:hover, .catalog-card:hover, .story-card:hover {
  transform: perspective(1100px) translateY(-6px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  border-color: #f0bd528c;
  box-shadow: 0 18px 36px #0004;
}
.service-card:focus-within, .catalog-card:focus-within { border-color: var(--accent); }
.service-number { transition: letter-spacing .35s, color .35s; }
.service-card:hover .service-number { letter-spacing: .15em; color: #ffe0a0; }
.catalog-card-image img { transition: transform .6s var(--motion-spring); }
.catalog-card:hover .catalog-card-image img { transform: scale(1.055); }
.catalog-card-body { position: relative; }
.catalog-grid[aria-busy=true] { opacity: .7; }
.catalog-grid { transition: opacity .2s; }

/* El recorrido se ilumina al entrar en cada paso. */
.process-step, .catalog-process-grid li {
  position: relative;
  transition: border-color .3s, transform .4s var(--motion-spring);
}
.process-step::before, .catalog-process-grid li::before {
  content: '';
  position: absolute;
  height: 2px;
  left: 0; right: 0; top: -1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--motion-spring);
}
.process-step:hover::before, .catalog-process-grid li:hover::before,
.process-step.is-in-view::before, .catalog-process-grid li.is-in-view::before { transform: scaleX(1); }
.process-step:hover, .catalog-process-grid li:hover { transform: translateY(-4px); }
.step-number { transition: transform .35s; }
.process-step:hover .step-number { transform: translateX(6px); }

.gallery-open { transition: box-shadow .4s; }
.gallery-open img { transition: transform .7s var(--motion-spring), filter .5s; }
.gallery-open:hover img { transform: scale(1.075); filter: saturate(1.1); }
.gallery-open:hover { box-shadow: 0 12px 35px #0005; }
.gallery-plus { transition: transform .4s var(--motion-spring); }
.gallery-open:hover .gallery-plus { transform: rotate(45deg); }
.team-avatar { transition: border-color .4s, box-shadow .4s, transform .6s var(--motion-spring); }
.team-avatar img { transition: transform .7s var(--motion-spring); }
.team-card:hover .team-avatar { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 12px 36px #f0bd5212; }
.team-card:hover .team-avatar img { transform: scale(1.035); }
.brands li { transition: color .3s, transform .3s; }
.brands li:hover { color: var(--accent); transform: translateY(-3px); }
.cta-banner { transition: box-shadow .5s, transform .5s var(--motion-spring); }
.cta-banner:hover { box-shadow: 0 20px 65px #f0bd5215; }
.whatsapp-float { transition: transform .35s var(--motion-spring), box-shadow .35s, background .3s; }
.whatsapp-float:hover { transform: translateY(-4px); box-shadow: 0 8px 34px #f0bd5240; }
.whatsapp-float:active { transform: scale(.96); }
.verify-modal[open], .lightbox[open] { animation: dialog-in .3s var(--motion-spring); }
@keyframes dialog-in { from { opacity: 0; translate: 0 16px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* Transiciones entre páginas como mejora nativa en navegadores compatibles. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .18s ease both; }
::view-transition-new(root) { animation: page-in .32s var(--motion-ease) both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 760px) {
  .logo img { width: 48px; height: 48px; flex-basis: 48px; }
  .footer-brand .logo img { width: 76px; height: 76px; flex-basis: 76px; }
  .hero-photo:hover { border-radius: 60px 12px 12px 12px; }
}
@media (hover: none), (pointer: coarse) {
  .service-card:hover, .catalog-card:hover, .story-card:hover,
  .process-step:hover, .catalog-process-grid li:hover { transform: none; }
  .hero-photo > img { transform: none; }
  .btn:hover::after, .catalog-card-action:hover::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .hero-photo > img, .service-card:hover, .catalog-card:hover, .story-card:hover,
  .team-card:hover .team-avatar, .team-card:hover .team-avatar img,
  .gallery-open:hover img, .catalog-card:hover .catalog-card-image img,
  .logo:hover img, .logo:focus-visible img { transform: none; }
  .status-dot::after { display: none; }
}
/* Foto panorámica del taller en la portada */
.page-home .hero-photo {
  aspect-ratio: 4 / 3;
  max-height: none;
  border-radius: 32px 16px 16px 16px;
}

.page-home .hero-photo > img {
  object-position: center;
}

.page-home .hero-photo:hover {
  border-radius: 24px;
}