/**
 * Pulido global — Fase 4
 * Tipografía, espaciado, animaciones, legal, micro-interacciones.
 * Solo presentación visual.
 */

/* ─── Entrada suave de página ─── */
body.is-preload #main {
  opacity: 0;
  transform: translateY(10px);
}

body:not(.is-preload) #main {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  body.is-preload #main,
  body:not(.is-preload) #main {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── Scroll y anclas (header sticky) ─── */
html {
  scroll-padding-top: 5.5rem;
}

section[id],
article[id],
[id="tabla-comparativa"],
[id="faq"] {
  scroll-margin-top: 5.5rem;
}

/* ─── Selección de texto ─── */
::selection {
  background: rgba(var(--brand-rgb), 0.18);
  color: var(--premium-text);
}

/* ─── Prosa editorial global ─── */
#main > .inner > section > p,
#main > .inner > section > ul:not(.actions):not(.menu):not(.legal-links),
#main > .inner > section > ol {
  font-size: 1.0125rem;
  line-height: 1.72;
}

#main > .inner > section > p + p {
  margin-top: var(--space-4);
}

#main a:not(.button):not(.site-logo):not(.site-footer__logo):not(.image) {
  color: var(--premium-accent);
  text-decoration: underline;
  text-decoration-color: rgba(var(--brand-rgb), 0.28);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition:
    color var(--premium-transition),
    text-decoration-color var(--premium-transition);
}

#main a:not(.button):not(.site-logo):not(.site-footer__logo):not(.image):hover,
#main a:not(.button):not(.site-logo):not(.site-footer__logo):not(.image):focus-visible {
  color: var(--premium-accent-hover);
  text-decoration-color: rgba(var(--brand-rgb), 0.55);
}

/* ─── Imágenes: aparición suave ─── */
#main img {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  #main img[loading="lazy"] {
    animation: polish-img-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes polish-img-in {
    from {
      opacity: 0;
      transform: scale(0.985);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}

/* ─── Badges ─── */
.badge {
  letter-spacing: 0.07em;
  font-weight: 600;
}

/* ─── CTA urgencia ─── */
.cta-urgency {
  font-weight: 500;
  opacity: 0.88;
}

/* ─── Tarjetas: elevación sutil ─── */
@media (prefers-reduced-motion: no-preference) {
  .product-card,
  .comparison-card,
  .choice-box,
  .review-box,
  .buy-box,
  .check-item,
  .guide-card,
  .faq-item {
    transition:
      transform var(--premium-transition),
      box-shadow var(--premium-transition),
      border-color var(--premium-transition);
  }

  .product-card:hover,
  .comparison-card:hover,
  .choice-box:hover,
  .review-box:hover,
  .buy-box:hover,
  .check-item:hover,
  .guide-card:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card:hover,
  .comparison-card:hover,
  .choice-box:hover,
  .review-box:hover,
  .buy-box:hover,
  .check-item:hover,
  .guide-card:hover {
    transform: none;
  }
}

/* ─── Bloques confianza / misión ─── */
.origin-story,
.comparativa-origin,
.mission-block {
  border-radius: var(--premium-radius) !important;
  border: 1px solid rgba(var(--brand-rgb), 0.12) !important;
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--premium-white) 100%) !important;
  padding: clamp(1.5rem, 3vw, 2rem) !important;
  box-shadow: var(--premium-shadow) !important;
}

.mission-block.trust-note h2,
.origin-story h2,
.comparativa-origin h2 {
  font-size: clamp(1.125rem, 2vw, 1.35rem);
  color: var(--premium-accent);
}

.mission-block a,
.origin-story a,
.comparativa-origin a {
  font-weight: 600;
}

.story-timeline {
  border-left-color: rgba(var(--brand-rgb), 0.2) !important;
}

.story-timeline li::before {
  background: var(--premium-accent) !important;
}

/* ─── SEO related block ─── */
.seo-related-block {
  box-shadow: var(--premium-shadow) !important;
}

.seo-related-block h3 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--premium-text-muted);
  font-weight: 600;
}

/* ─── Páginas legales ─── */
.page-legal #main > .inner {
  max-width: var(--read-wide);
}

.page-legal #main > .inner > section:first-of-type {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--premium-bg-muted);
}

.page-legal header.main {
  margin-bottom: var(--space-4);
}

.page-legal header.main h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.025em;
}

.page-legal #main > .inner > section[id] {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--premium-bg-muted);
}

.page-legal #main > .inner > section[id]:last-of-type {
  padding-bottom: var(--space-7);
}

.page-legal header.major h2 {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  margin-bottom: var(--space-4);
}

.page-legal header.major h2::after {
  width: 1.75rem;
  height: 2px;
  background: rgba(var(--brand-rgb), 0.35);
}

.page-legal section[id] > p {
  max-width: none;
  color: var(--premium-text-muted);
}

.page-legal section[id] > ul {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-legal section[id] > ul li {
  padding: var(--space-3) var(--space-4);
  background: var(--premium-bg);
  border: 1px solid var(--premium-bg-muted);
  border-radius: var(--premium-radius-sm);
  font-size: 0.9875rem;
  color: var(--premium-text-muted);
}

.page-legal section[id] > ul li strong {
  color: var(--premium-text);
  font-weight: 600;
}

.page-legal #main > .inner > section > p {
  max-width: none;
}

/* ─── Botón volver arriba (marca) ─── */
#back-to-top {
  background: var(--premium-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(var(--brand-rgb), 0.32) !important;
}

#back-to-top:hover,
#back-to-top:focus-visible {
  background: var(--premium-accent-hover) !important;
  box-shadow: 0 6px 22px rgba(var(--brand-rgb), 0.38) !important;
}

#back-to-top:focus-visible {
  outline: 3px solid rgba(var(--brand-rgb), 0.35) !important;
  outline-offset: 3px;
}

/* ─── Header: sombra al scroll (solo CSS: sticky ya tiene sombra base) ─── */
#header {
  transition:
    box-shadow var(--nav-transition),
    border-color var(--nav-transition),
    background var(--nav-transition);
}

/* ─── Espaciado secciones: ritmo más uniforme ─── */
#main > .inner > section + section {
  border-top: none;
}

.page-editorial #main > .inner > section {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.page-home #main > .inner > section:not(#banner):not(.section-band):not(:has(.story-intro)) {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

/* ─── FAQ items ─── */
.faq-item,
.faq-grid > div,
.faq-grid > article {
  border-radius: var(--premium-radius-sm);
}

/* ─── Tablas: hover más suave ─── */
.comparison-table tbody tr {
  transition: background-color var(--premium-transition);
}

/* ─── Focus visible contenido ─── */
#main :focus-visible {
  outline-offset: 3px;
}

/* ─── Home: coherencia footer/header con resto ─── */
.page-home .site-footer-min {
  margin-top: 0 !important;
}

.page-home #header .site-header__bar {
  border-bottom: 1px solid rgba(var(--brand-rgb), 0.06);
}