/* ================================================================
   Bable Pet Chile — styles.css
   Folha de estilo GLOBAL — reutilizada por todas as páginas do site.
   Stack: HTML/CSS/JS puro (sem build). Mobile-first.
   Paleta OFICIAL Bable Pet — azul #0226A1 (trabalho) + vermelho
   #CD1D2B (faísca de CTA). Fontes Quicksand/Nunito (substitutas
   gratuitas da MADE Tommy Soft até licenciar os arquivos).
   Idioma do site: es-CL.
   ================================================================ */

/* ============================================
   SEÇÃO: RESET & BASE
   Normalização leve + box-sizing global
============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* compensar header sticky em âncoras */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--color-brand-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md);
  font-weight: 600;
}

p {
  margin: 0 0 var(--space-md);
}

/* ============================================
   SEÇÃO: :ROOT — DESIGN TOKENS
   Editar aqui para mudar cores, fontes e espaçamentos globais.
   Todas as variáveis do design system.
============================================ */
:root {
  /* === Identidade de marca Bable Pet (manual oficial — azul + vermelho) === */

  /* Cores — Brand */
  --color-brand-primary: #0226A1;      /* Azul Bable — cor de trabalho */
  --color-brand-secondary: #021F84;    /* Azul escuro — hovers, fim de gradiente */
  --color-accent: #CD1D2B;             /* Vermelho Bable — faísca de CTA */
  --color-accent-warm: #B0121F;        /* Vermelho escuro — hover de CTA */

  /* Cores — Texto */
  --color-text-primary: #14161F;       /* Preto Bable */
  --color-text-secondary: #4E5470;     /* Neutro azulado */
  --color-text-muted: #6E7491;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-accent: #FFFFFF;     /* Texto sobre vermelho */
  --color-link-on-dark: #9AACEA;       /* Azul claro sobre fundo escuro */

  /* Cores — Fundo */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F6F7FB;       /* Neutro claro azulado */
  --color-bg-dark: #14161F;            /* Footer preto Bable */
  --color-bg-card: #FFFFFF;

  /* Cores — UI */
  --color-border: #DFE2EE;
  --color-border-focus: #0226A1;
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1EAF55;
  --color-error: #CD1D2B;
  --color-success: #1E9E63;

  /* Tipografia */
  --font-heading: 'Quicksand', sans-serif;
  --font-body: 'Nunito', sans-serif;

  --text-display: clamp(40px, 7vw, 68px);
  --text-h1: clamp(34px, 5.2vw, 50px);
  --text-h2: clamp(27px, 4vw, 36px);
  --text-h3: clamp(21px, 2.8vw, 26px);
  --text-h4: clamp(18px, 2.5vw, 20px);
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 13px;

  /* Espaçamento (base 4px) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 120px;

  /* Layout */
  --container-max: 1200px;
  --container-padding: clamp(16px, 4vw, 48px);

  /* Raios */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(7, 21, 63, 0.08);
  --shadow-md: 0 8px 24px rgba(7, 21, 63, 0.10);
  --shadow-lg: 0 18px 48px rgba(7, 21, 63, 0.14);
  --shadow-cta: 0 2px 12px rgba(37, 211, 102, 0.30);
  --shadow-accent: 0 2px 12px rgba(205, 29, 43, 0.30);

  /* Transições */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Header */
  --header-height-mobile: 60px;
  --header-height-desktop: 72px;

  /* === Capa Visual 2.0 — momentos-joia, formas orgânicas e movimento === */
  --gradient-firma: linear-gradient(105deg, #CD1D2B 0%, #7E1670 38%, #0226A1 72%);
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --blob-a: 42% 58% 60% 40% / 45% 45% 55% 55%;
  --blob-b: 63% 37% 38% 62% / 53% 38% 62% 47%;
  --blob-c: 38% 62% 57% 43% / 58% 42% 58% 42%;
  --shadow-blue-glow: 0 24px 60px -22px rgba(2, 38, 161, 0.35);
  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   SEÇÃO: ACESSIBILIDADE
   Skip-link, focus visível, prefers-reduced-motion
============================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-brand-primary);
  color: var(--color-text-on-dark);
  border-radius: 0 0 var(--radius-md) 0;
  font-family: var(--font-heading);
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   SEÇÃO: LAYOUT — CONTAINER & UTILITÁRIOS
============================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--space-2xl);
}

.section--bg-secondary {
  background-color: var(--color-bg-secondary);
}

.section--bg-primary {
  background-color: var(--color-bg-primary);
}

.section--dark {
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--color-text-on-dark);
}

.section__header {
  margin-bottom: var(--space-xl);
}

.section__header--center {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.section__label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.section__title {
  font-size: var(--text-h2);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.section__intro {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.section--dark .section__intro {
  color: var(--color-text-on-dark);
  opacity: 0.9;
}

.text-center {
  text-align: center;
}

/* ============================================
   SEÇÃO: BADGE / SELO "ORIGEN BRASILEÑO"
   Componente 5.11 do design system
============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: var(--radius-full);
  background-color: rgba(205, 29, 43, 0.12);
  border: 1px solid var(--color-accent);
  color: var(--color-accent); /* texto rojo sobre tinte rojo pálido — WCAG AA (≈5.5:1). Antes: blanco ilegible. */
  font-size: var(--text-caption);
  font-weight: 600;
  padding: 4px 12px;
}

.badge--on-dark {
  background-color: rgba(205, 29, 43, 0.18);
  color: var(--color-text-on-dark); /* blanco solo sobre fondo oscuro */
}

.badge--soon {
  background-color: rgba(205, 29, 43, 0.18);
}

/* ============================================
   SEÇÃO: BOTÕES (componentes 5.1 / 5.2 / 5.3)
============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 14px 28px;
  min-height: 48px;
  transition: all var(--transition-base);
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: translateY(0);
}

.btn .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Primário — WhatsApp (5.1) */
.btn-whatsapp {
  background-color: var(--color-whatsapp);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-cta);
}

.btn-whatsapp:hover {
  background-color: var(--color-whatsapp-hover);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}

/* Secundário — Reservo / outline (5.2) */
.btn-outline {
  background-color: transparent;
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
  font-weight: 500;
  font-size: 15px;
  padding: 12px 24px;
  min-height: 44px;
}

.btn-outline:hover {
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-dark);
}

/* Outline sobre fundo escuro */
.btn-outline--on-dark {
  border-color: var(--color-text-on-dark);
  color: var(--color-text-on-dark);
}

.btn-outline--on-dark:hover {
  background-color: var(--color-text-on-dark);
  color: var(--color-brand-secondary);
}

/* Brand primary (sólido verde) */
.btn-brand-primary {
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-dark);
  box-shadow: var(--shadow-md);
}

.btn-brand-primary:hover {
  background-color: var(--color-brand-secondary);
  color: var(--color-text-on-dark);
  transform: translateY(-1px);
}

/* Acento — CTA Franquicias (5.3) */
.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-accent);
}

.btn-accent:hover {
  background-color: var(--color-accent-warm);
  color: var(--color-text-on-accent);
  transform: translateY(-1px);
}

.btn--full {
  width: 100%;
}

/* Botão WhatsApp pequeno (header) */
.btn-wa-sm {
  padding: 10px 20px;
  min-height: 40px;
  font-size: 15px;
}

/* ============================================
   SEÇÃO: HEADER / NAV (componente 5.6)
   Editar aqui para mudar o cabeçalho fixo e a navegação.
============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-height-mobile);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-brand-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.site-logo img,
.site-logo__img {
  height: 40px;
  max-height: 40px;
  width: auto;
}

.site-logo:hover {
  text-decoration: none;
}

/* Navegação desktop */
.main-nav {
  display: none;
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.main-nav__link {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-sm) 0;
  transition: color var(--transition-fast);
}

.main-nav__link:hover,
.main-nav__link[aria-current="page"] {
  color: var(--color-brand-primary);
  text-decoration: none;
}

.header-cta {
  display: none;
}

/* Hamburger (mobile) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
}

.nav-toggle .icon {
  width: 28px;
  height: 28px;
}

/* Drawer mobile */
.mobile-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(82vw, 360px);
  background-color: var(--color-bg-primary);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  z-index: 200;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow-y: auto;
}

.mobile-drawer.is-open {
  transform: translateX(0);
}

.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.mobile-drawer__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
}

.mobile-drawer__close .icon {
  width: 26px;
  height: 26px;
}

.mobile-drawer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.mobile-drawer__link {
  display: block;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text-primary);
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.mobile-drawer__link:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-brand-primary);
  text-decoration: none;
}

.mobile-drawer__cta {
  margin-top: var(--space-md);
}

/* Backdrop do drawer */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(5, 16, 58, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  z-index: 150;
}

.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   SEÇÃO: HERO (componente 5.7)
   Editar aqui para mudar o banner principal.
============================================ */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-bg-dark);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(5, 16, 58, 0.55);
  z-index: 2;
}

.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: var(--space-4xl);
  max-width: 720px;
}

.hero__title {
  font-size: var(--text-h1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin: var(--space-md) 0;
}

.hero__subtitle {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--color-text-on-dark);
  opacity: 0.92;
  margin-bottom: var(--space-xl);
  max-width: 60ch;
}

.hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ============================================
   SEÇÃO: TWIN-DOORS (duas portas de entrada)
============================================ */
.twin-doors__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.door-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
  transition: all var(--transition-base);
}

.door-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.door-card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
}

.door-card__icon .icon {
  width: 30px;
  height: 30px;
}

.door-card--owner .door-card__icon .icon {
  color: var(--color-brand-primary);
}

.door-card--franchise .door-card__icon .icon {
  color: var(--color-accent);
}

.door-card__title {
  font-size: var(--text-h3);
  margin: 0;
}

.door-card__text {
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
}

.door-card__cta {
  margin-top: var(--space-sm);
}

/* ============================================
   SEÇÃO: SERVICIOS (cards 5.4)
============================================ */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
  transition: all var(--transition-base);
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.service-card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-accent);
}

.service-card__icon .icon {
  width: 28px;
  height: 28px;
}

.service-card__title {
  font-size: var(--text-h3);
  margin: 0;
}

.service-card__text {
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
}

/* Lista de preços (componente 5.15) */
.price-list {
  display: flex;
  flex-direction: column;
}

.price-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.price-list__name {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-primary);
}

.price-list__price {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-brand-primary);
  white-space: nowrap;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-brand-primary);
  margin-top: var(--space-sm);
}

.card-link:hover {
  text-decoration: underline;
}

/* ============================================
   SEÇÃO: DIFERENCIAIS (cards 5.5)
============================================ */
.differentials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.differential-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.section--bg-secondary .differential-card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
}

.differential-card__icon {
  color: var(--color-brand-primary);
}

.differential-card__icon .icon {
  width: 36px;
  height: 36px;
}

.differential-card__title {
  font-size: var(--text-h4);
  margin: 0;
}

.differential-card__text {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   SEÇÃO: ATENCION-AGIL + RESERVO (widget 5.13)
============================================ */
.reservo-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.reservo-block__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.reservo-block__divider {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.25);
  margin-block: var(--space-md);
}

.reservo-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-on-dark);
  opacity: 0.78;
}

.reservo-label .icon {
  width: 18px;
  height: 18px;
}

.reservo-frame {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-primary);
}

.reservo-frame iframe {
  width: 100%;
  height: 600px;
  border: 0;
}

/* ============================================
   SEÇÃO: MEMBRESIA-TEASER
============================================ */
.membership__benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-block: var(--space-lg);
  max-width: 640px;
  margin-inline: auto;
}

.membership__benefit {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body);
  color: var(--color-text-primary);
}

.membership__benefit .icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.membership__note {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.membership__cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

/* ============================================
   SEÇÃO: QUIENES-SOMOS-PREVIEW
============================================ */
.about-preview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.about-preview__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.about-preview__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-preview__title {
  font-size: var(--text-h2);
  line-height: 1.25;
}

.about-preview__text {
  color: var(--color-text-secondary);
}

/* ============================================
   SEÇÃO: REVIEWS / SOCIAL PROOF
============================================ */
.reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.review-card__stars {
  color: var(--color-accent);
  font-size: 18px;
  letter-spacing: 2px;
}

.review-card__text {
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0;
}

.review-card__author {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  margin: 0;
}

/* ============================================
   SEÇÃO: FAQ (accordion 5.14)
============================================ */
.faq {
  max-width: 820px;
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text-primary);
  padding: 18px 0;
}

.faq__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
  transition: transform var(--transition-base);
}

.faq__question[aria-expanded="true"] .faq__icon {
  transform: rotate(180deg);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--transition-base), opacity var(--transition-base);
}

.faq__answer-inner {
  padding: 0 0 18px;
  color: var(--color-text-secondary);
}

.faq__item.is-open .faq__answer {
  max-height: 600px;
  opacity: 1;
}

/* ============================================
   SEÇÃO: CTA-FINAL
============================================ */
.cta-final {
  text-align: center;
}

.cta-final__title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text-on-dark);
}

.cta-final__text {
  color: var(--color-text-on-dark);
  opacity: 0.9;
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.cta-final__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* ============================================
   SEÇÃO: FOOTER (componente 5.9)
   Editar aqui para mudar o rodapé.
============================================ */
.site-footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding-block: var(--space-3xl) var(--space-xl);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.footer-brand__logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-sm);
}

.footer-brand__claim {
  font-size: var(--text-body);
  color: var(--color-text-on-dark);
  opacity: 0.92;
  margin-bottom: var(--space-md);
}

.footer-brand__origin {
  font-size: var(--text-caption);
  color: var(--color-text-on-dark);
  opacity: 0.75;
  margin-top: var(--space-md);
}

.footer-col__title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-md);
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-col__list a,
.footer-info a {
  color: var(--color-link-on-dark);
  text-decoration: none;
  font-size: var(--text-body-sm);
}

.footer-col__list a:hover,
.footer-info a:hover {
  color: var(--color-text-on-dark);
  text-decoration: underline;
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-size: var(--text-body-sm);
}

.footer-info dt {
  font-weight: 600;
  color: var(--color-text-on-dark);
  opacity: 0.85;
  margin-bottom: 2px;
}

.footer-info dd {
  margin: 0;
  color: var(--color-link-on-dark);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-lg);
  font-size: var(--text-caption);
  color: var(--color-text-on-dark);
  opacity: 0.85;
}

.site-footer__legal {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.site-footer__legal a {
  color: var(--color-link-on-dark);
}

/* ============================================
   SEÇÃO: WHATSAPP-BTN (botão flutuante, componente 5.10)
============================================ */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-whatsapp);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.55);
  text-decoration: none;
}

.whatsapp-float .icon {
  width: 28px;
  height: 28px;
}

/* Pulse animation */
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-whatsapp);
  z-index: -1;
  animation: wa-pulse 2.4s ease-out infinite;
}

@keyframes wa-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70% {
    transform: scale(1.7);
    opacity: 0;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* ============================================
   SEÇÃO: FORMULÁRIOS (componente 5.12)
   Usado em /contacto, /franquicias, /membresia.
============================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 560px;
}

.form__group {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-lg);
}

.form__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.form__input,
.form__textarea,
.form__select {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form__textarea {
  min-height: 120px;
  resize: vertical;
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(2, 38, 161, 0.15);
}

.form__input.has-error,
.form__textarea.has-error,
.form__select.has-error {
  border-color: var(--color-error);
}

.form__error {
  font-size: var(--text-caption);
  color: var(--color-error);
  margin-top: 4px;
  min-height: 1em;
}

.form__feedback {
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-size: var(--text-body-sm);
  margin-bottom: var(--space-md);
}

.form__feedback--success {
  background-color: rgba(21, 128, 61, 0.12);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.form__feedback--error {
  background-color: rgba(185, 28, 28, 0.10);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

.form__feedback[hidden] {
  display: none;
}

/* ============================================
   SEÇÃO: PÁGINAS UTILITÁRIAS (404, gracias, legal)
============================================ */
.page-hero {
  background-color: var(--color-bg-secondary);
  padding-block: var(--space-3xl);
  text-align: center;
}

.page-hero__title {
  font-size: var(--text-h1);
}

.page-hero__text {
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin-inline: auto;
}

.simple-content {
  max-width: 760px;
  margin-inline: auto;
}

.simple-content h2 {
  font-size: var(--text-h3);
  margin-top: var(--space-xl);
}

/* ============================================
   SEÇÃO: BLOG (index + artigos-âncora)
============================================ */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.blog-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.blog-card__media img {
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.blog-card__body {
  padding: var(--space-lg);
}

.blog-card__title {
  font-size: var(--text-h4);
  margin-bottom: var(--space-sm);
}

.article-body {
  max-width: 760px;
  margin-inline: auto;
}

.article-body p,
.article-body li {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
}

.article-body h2 {
  font-size: var(--text-h2);
  margin-top: var(--space-2xl);
}

.article-body ul {
  list-style: disc;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

/* Breadcrumb */
.breadcrumb {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  padding-block: var(--space-md);
}

.breadcrumb a {
  color: var(--color-text-muted);
}

.breadcrumb a:hover {
  color: var(--color-brand-primary);
}

/* ============================================
   SEÇÃO: COOKIE CONSENT (banner)
============================================ */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding: var(--space-md) var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent__text {
  font-size: var(--text-body-sm);
  margin: 0;
}

.cookie-consent__text a {
  color: var(--color-link-on-dark);
}

.cookie-consent__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ============================================
   BREAKPOINTS — MOBILE-FIRST (min-width)
============================================ */

/* sm — 480px */
@media (min-width: 480px) {
  .hero__cta-group,
  .reservo-block__cta,
  .membership__cta-group,
  .cta-final__group {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .membership__benefits {
    grid-template-columns: 1fr 1fr;
  }

  .cookie-consent {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* md — 768px */
@media (min-width: 768px) {
  .section {
    padding-block: var(--space-3xl);
  }

  .twin-doors__grid,
  .services__grid,
  .reviews__grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .differentials__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__top {
    grid-template-columns: 1.4fr 1fr 1.2fr;
  }

  .about-preview__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* lg — 1024px */
@media (min-width: 1024px) {
  .site-header__inner {
    min-height: var(--header-height-desktop);
  }

  .nav-toggle {
    display: none;
  }

  .main-nav {
    display: block;
  }

  .header-cta {
    display: inline-flex;
  }

  .services__grid,
  .reviews__grid,
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .differentials__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero {
    min-height: 70vh;
    max-height: 800px;
  }

  .reservo-block {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
  }
}

/* xl — 1440px */
@media (min-width: 1440px) {
  :root {
    --container-max: 1280px;
  }
}

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /franquicias (franquicias.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   Componentes reutilizam .service-card / .differential-card /
   .faq / .form / .btn já definidos acima.
   ================================================================ */

/* ============================================
   SEÇÃO: OPORTUNIDAD — stat cards (franquicias)
============================================ */
.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.stat-card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-accent);
}

.stat-card__icon .icon {
  width: 28px;
  height: 28px;
}

.stat-card__number {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-brand-primary);
}

.stat-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-text-primary);
}

.stat-card__label {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   SEÇÃO: MODELO-3EN1 — grid 1→2→4 + card destacado
   Reutiliza .service-card. Card membresía em destaque (acento).
============================================ */
.modelo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.service-card--highlight {
  border-color: var(--color-accent);
  border-width: 2px;
  background-color: rgba(205, 29, 43, 0.06);
}

/* ============================================
   SEÇÃO: EXPANSION-REGIONAL — texto + CTA
============================================ */
.expansion-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.expansion-block__cta {
  display: flex;
}

/* ============================================
   SEÇÃO: QUIENES-SOMOS-FRANQ — fundadores
============================================ */
.founders__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.founder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

.founder-card__photo {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.founder-card__name {
  font-size: var(--text-h3);
  margin: var(--space-sm) 0 0;
}

.founder-card__bio {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  max-width: 36ch;
  margin: 0;
}

/* ============================================
   SEÇÃO: INVERSION — card central com borda acento
============================================ */
.inversion-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-lg);
  background-color: var(--color-bg-primary);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-accent);
}

.inversion-card__label {
  font-size: var(--text-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.inversion-card__value {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-brand-primary);
}

.inversion-card__note {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

.inversion-pitch {
  max-width: 60ch;
  margin: var(--space-xl) auto;
  text-align: center;
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
}

/* ============================================
   SEÇÃO: PRUEBA-SOCIAL — 2 cards
============================================ */
.prueba__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.prueba-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
}

.prueba-card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-brand-primary);
}

.prueba-card__icon .icon {
  width: 26px;
  height: 26px;
}

.prueba-card__title {
  font-size: var(--text-h4);
  margin: 0;
}

.prueba-card__text {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
}

/* ============================================
   SEÇÃO: FORMULARIO — layout 2 colunas (form + aside WA)
============================================ */
.form-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.form-layout__main .form {
  max-width: none;
}

.form-layout__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.form-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.form-aside__text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h4);
  color: var(--color-text-primary);
  margin: 0;
}

/* Spinner do botão submit (estado "Enviando…") */
.btn-spinner {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(5, 16, 58, 0.35);
  border-top-color: var(--color-text-on-accent);
  animation: btn-spin 0.7s linear infinite;
}

.btn-spinner[hidden] {
  display: none;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   BREAKPOINTS — página franquicias (min-width)
============================================ */
@media (min-width: 768px) {
  .modelo__grid,
  .prueba__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .founders__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .expansion-block {
    grid-template-columns: 1.4fr auto;
  }

  .expansion-block__cta {
    justify-content: flex-end;
  }
}

@media (min-width: 1024px) {
  .modelo__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .form-layout {
    grid-template-columns: 1.5fr 1fr;
  }
}
/* /BLOCO ADICIONADO POR A07 — franquicias */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /providencia (providencia.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   Componentes reutilizam .service-card / .differential-card /
   .faq / .reservo-* / .btn / .badge já definidos acima.
   ================================================================ */

/* Hero — linha de dados (dirección · horarios) sobre fundo escuro */
.hero__datos {
  font-size: var(--text-body-sm);
  color: var(--color-text-on-dark);
  opacity: 0.85;
  margin-top: var(--space-md);
  margin-bottom: 0;
}

/* Variante grande do botão (CTA principal WhatsApp em Agendamiento e CTA final) */
.btn-lg {
  padding: 16px 32px;
  min-height: 56px;
  font-size: 17px;
}

/* Link de card sobre fundo escuro (membresía-teaser) */
.card-link--on-dark {
  color: var(--color-link-on-dark);
}
.card-link--on-dark:hover {
  color: var(--color-text-on-dark);
}

/* Texto divisor "o si prefieres" no bloco de agendamiento */
.reservo-divider-text {
  font-size: var(--text-body-sm);
  color: var(--color-text-on-dark);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================
   SEÇÃO: DR-LEAN (providencia)
============================================ */
.dr-lean__media {
  border-radius: var(--radius-full);
  max-width: 200px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}

.dr-lean__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dr-lean__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.dr-lean__text .badge {
  margin-bottom: var(--space-xs);
}

.dr-lean__cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

/* ============================================
   SEÇÃO: CERTIFICADO-VIAJE-BANNER (providencia)
============================================ */
.cert-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.cert-banner__icon {
  color: var(--color-accent);
}

.cert-banner__icon .icon {
  width: 36px;
  height: 36px;
}

.cert-banner__title {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-sm);
}

.cert-banner__body p {
  color: var(--color-text-secondary);
  margin: 0;
}

.cert-banner__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* ============================================
   SEÇÃO: ORIGEN-CONFIANZA (sellos, providencia)
============================================ */
.origen__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.origen__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.origen__stat-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-secondary);
  color: var(--color-brand-primary);
}

.origen__stat-icon .icon {
  width: 26px;
  height: 26px;
}

.origen__stat-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  margin: 0;
}

/* ============================================
   SEÇÃO: UBICACION-HORARIOS (providencia)
============================================ */
.ubicacion__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.ubicacion__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.ubicacion__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.ubicacion__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  color: var(--color-text-secondary);
}

.ubicacion__item .icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
}

.ubicacion__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 280px;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.map-placeholder .icon {
  width: 40px;
  height: 40px;
}

/* --- BREAKPOINTS específicos /providencia --- */
@media (min-width: 768px) {
  .origen__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .cert-banner {
    flex-direction: row;
    align-items: center;
  }

  .cert-banner__body {
    flex: 1;
  }

  .cert-banner__action {
    align-items: flex-end;
    flex-shrink: 0;
  }
}

@media (min-width: 1024px) {
  .dr-lean__grid {
    grid-template-columns: 0.4fr 0.6fr;
  }

  .dr-lean__media {
    max-width: 240px;
    margin-inline: 0;
  }

  .dr-lean__cta-group {
    flex-direction: row;
    align-items: center;
  }

  .ubicacion__grid {
    grid-template-columns: 0.4fr 0.6fr;
  }
}
/* /BLOCO ADICIONADO POR A07 — providencia */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /providencia/veterinaria (providencia-veterinaria.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   Reutiliza .hero / .section--dark / .service-card / .price-list /
   .faq / .reservo-* / .btn / .badge já definidos acima.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO-VETERINARIA — meta (endereço+horário) sob o CTA
============================================ */
.hero__meta {
  margin-top: var(--space-md);
  margin-bottom: 0;
  font-size: var(--text-caption);
  color: var(--color-text-on-dark);
  opacity: 0.78;
}

/* ============================================
   SEÇÃO: TRUST-BAR-VET — faixa de confiança
============================================ */
.trust-bar {
  background-color: var(--color-brand-secondary);
  color: var(--color-text-on-dark);
  padding-block: var(--space-md);
}

.trust-bar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
}

.trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-text-on-dark);
}

.trust-bar__item .icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* ============================================
   SEÇÃO: DR-LEAN-CREDENCIAL — credencial do veterinário
============================================ */
.credential {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.credential__media {
  display: flex;
  justify-content: center;
}

.credential__avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

/* Placeholder com iniciais "JL" enquanto a foto real não existir */
.credential__avatar-placeholder {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(2, 38, 161, 0.12);
  border: 2px solid var(--color-brand-primary);
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
}

.credential__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.credential__name {
  font-size: var(--text-h2);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-sm);
}

.credential__bio {
  color: var(--color-text-secondary);
}

.credential__cta {
  margin-top: var(--space-md);
}

/* ============================================
   SEÇÃO: CONSULTA-FELINA — bloco escuro 2 colunas
   Reutiliza .section--dark.
============================================ */
.felina-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.felina-block__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.felina-block__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.felina-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   SEÇÃO: MOTIVOS-CONSULTA — grid de cards compactos
   Reutiliza .service-card (variante sem preço).
============================================ */
.motivos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.motivo-card__title {
  font-size: var(--text-h4);
  margin: 0;
}

.motivos__cta-wrap,
.vacunas__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

/* ============================================
   SEÇÃO: VACUNAS — grid de cards
============================================ */
.vacunas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.vacuna-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.vacuna-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.vacuna-card__title {
  font-size: var(--text-h4);
  margin: 0;
}

.vacuna-card__text {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   SEÇÃO: PRECIOS-VET — lista de preços centrada
   Reutiliza .price-list.
============================================ */
.precios-wrap {
  max-width: 640px;
  margin-inline: auto;
}

.precios-nota {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
}

.precios__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

/* ============================================
   SEÇÃO: MEDICAMENTOS-SEO — bloco de texto centrado
============================================ */
.medic-block {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

.medic-block__cta {
  margin-top: var(--space-md);
}

/* ============================================
   SEÇÃO: AGENDAMENTO-VET — CTA WhatsApp grande
   (reaproveita .reservo-block / .reservo-frame)
============================================ */
.btn-wa-lg {
  min-height: 56px;
  font-size: 18px;
  padding: 16px 32px;
}

/* ============================================
   SEÇÃO: BLOG-LINKS-VET — cards de link simples
============================================ */
.blog-links__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.blog-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  transition: all var(--transition-base);
}

.blog-link-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

.blog-link-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  margin: 0;
}

.blog-link-card__arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
}

/* ============================================
   BREAKPOINTS — página veterinaria (min-width)
============================================ */
@media (min-width: 768px) {
  .motivos__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vacunas__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-links__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .credential {
    grid-template-columns: auto 1fr;
    gap: var(--space-2xl);
  }

  .credential__media {
    justify-content: flex-start;
  }

  .credential__avatar,
  .credential__avatar-placeholder {
    width: 180px;
    height: 180px;
  }

  .credential__avatar-placeholder {
    font-size: 60px;
  }

  .felina-block {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .motivos__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .vacunas__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* /BLOCO ADICIONADO POR A07 — veterinaria */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /providencia/peluqueria (providencia-peluqueria.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   Reutiliza .hero / .trust-bar / .service-card / .differential-card /
   .price-list / .faq / .reservo-* / .btn / .badge / .membership__*
   já definidos acima.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO-PELUQUERIA — breadcrumb sobre fundo escuro + subtítulo do H1
============================================ */
.breadcrumb--on-dark {
  color: var(--color-text-on-dark);
  opacity: 0.85;
  padding-block: 0 var(--space-sm);
}

.breadcrumb--on-dark a {
  color: var(--color-text-on-dark);
}

.breadcrumb--on-dark a:hover {
  color: var(--color-link-on-dark);
}

.breadcrumb--on-dark [aria-current="page"] {
  opacity: 0.9;
}

/* Subtítulo visual do H1 (tag visual, não H2) */
.hero__title-sub {
  display: block;
  font-size: 0.62em;
  font-weight: 500;
  opacity: 0.92;
  margin-top: var(--space-xs);
}

/* ============================================
   SEÇÃO: SERVICIOS-PELUQUERIA — grid 1→2→4 + card Taxidog
   Reutiliza .service-card / .services__grid.
============================================ */
.services__grid--peluq {
  margin-bottom: var(--space-xl);
}

.service-card--taxidog {
  position: relative;
  border-color: var(--color-accent);
}

.service-card__badge {
  align-self: flex-start;
}

.servicios__cta-wrap {
  display: flex;
  justify-content: center;
}

.btn--full-sm {
  width: 100%;
}

/* ============================================
   SEÇÃO: DIFERENCIALES-BIENESTAR — foto da sala abaixo do grid
============================================ */
.diferenciales__media {
  margin-top: var(--space-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.diferenciales__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ============================================
   SEÇÃO: CHECKUP-PREVENTIVO — layout foto + texto
============================================ */
.checkup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.checkup__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.checkup__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkup__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.checkup__highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-brand-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: 0;
}

.checkup__highlight .icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
}

/* ============================================
   SEÇÃO: PROCESO-PELUQUERIA — pasos numerados
============================================ */
.proceso__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  counter-reset: proceso;
}

.proceso-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.proceso-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}

.proceso-step__title {
  font-size: var(--text-h4);
  margin: 0;
}

.proceso-step__text {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.proceso__cta-wrap {
  display: flex;
  justify-content: center;
}

/* ============================================
   SEÇÃO: MEMBRESIA-BANNER-PELUQ — texto + lista de benefícios
============================================ */
.membresia-banner__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.membresia-banner__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.membresia-banner__benefits {
  margin-block: 0;
}

.membresia-banner__cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

/* ============================================
   SEÇÃO: CTA-FINAL-PELUQUERIA — datos de ubicación
============================================ */
.cta-final__datos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.cta-final__dato {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
  color: var(--color-text-on-dark);
  opacity: 0.9;
}

.cta-final__dato .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-accent);
}

/* --- BREAKPOINTS específicos /providencia/peluqueria --- */
@media (min-width: 480px) {
  .membresia-banner__cta-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .btn--full-sm {
    width: auto;
  }
}

@media (min-width: 768px) {
  .services__grid--peluq {
    grid-template-columns: repeat(2, 1fr);
  }

  .proceso__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .checkup__grid {
    grid-template-columns: 0.45fr 0.55fr;
  }

  .membresia-banner__grid {
    grid-template-columns: 1fr 1fr;
  }

  .cta-final__datos {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .services__grid--peluq {
    grid-template-columns: repeat(4, 1fr);
  }

  .proceso__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* /BLOCO ADICIONADO POR A07 — peluqueria */

/* ================================================================
   BLOCO ADICIONADO POR A07 — membresia (/membresia)
   Página de conversión. Reutiliza .hero / .badge / .btn / .faq /
   .form / .cta-final / .section / .breadcrumb já definidos acima.
   Componentes próprios: hero variant, concept-icons, benefit-card,
   steps timeline, email-capture (Formspree).
   Mobile-first. NÃO altera regras existentes.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO-MEMBRESIA — variante de altura menor (700px asset)
============================================ */
.hero--membresia {
  min-height: 56vh;
}

@media (min-width: 1024px) {
  .hero--membresia {
    min-height: 60vh;
    max-height: 680px;
  }
}

/* ============================================
   SEÇÃO: CONCEPTO-MEMBRESIA — divider + 3 íconos resumen
============================================ */
.concept-divider {
  width: 64px;
  height: 3px;
  margin: var(--space-xl) auto;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
}

.concept-icons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 720px;
  margin-inline: auto;
}

.concept-icons__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

.concept-icons__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-primary);
  color: var(--color-brand-primary);
  box-shadow: var(--shadow-sm);
}

.concept-icons__icon .icon {
  width: 28px;
  height: 28px;
}

.concept-icons__caption {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .concept-icons {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}

/* ============================================
   SEÇÃO: BENEFICIOS-MEMBRESIA — grid de cards + disclaimer
   1 col (mobile) → 2 col (768) → 3 col (1024, com 4–5 centrados)
============================================ */
.benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.benefit-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.benefit-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.benefit-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-brand-primary);
}

.benefit-card__icon .icon {
  width: 30px;
  height: 30px;
}

.benefit-card__title {
  font-size: var(--text-h4);
  margin-bottom: var(--space-sm);
}

.benefit-card__text {
  margin-bottom: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}

.benefits__disclaimer {
  margin-top: var(--space-xl);
  margin-bottom: 0;
  text-align: center;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .benefits__grid {
    grid-template-columns: repeat(6, 1fr);
  }
  /* Cards 1–3 ocupam 2 colunas cada (linha de 3) */
  .benefit-card:nth-child(1),
  .benefit-card:nth-child(2),
  .benefit-card:nth-child(3) {
    grid-column: span 2;
  }
  /* Cards 4–5 centrados (linha de 2) */
  .benefit-card:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .benefit-card:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

/* ============================================
   SEÇÃO: COMO-FUNCIONA-MEMBRESIA — timeline 3 pasos
   Vertical (mobile) → horizontal (1024)
============================================ */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 900px;
  margin-inline: auto;
  counter-reset: step;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.step__number {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-body-lg);
}

.step__title {
  font-size: var(--text-h4);
  margin-bottom: var(--space-xs);
}

.step__text {
  margin-bottom: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}

.steps__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
  }
  .step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
    position: relative;
  }
  /* Linha conectora entre pasos */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20px;
    left: calc(50% + 28px);
    width: calc(100% - 56px + var(--space-2xl));
    height: 2px;
    background-color: var(--color-border);
    z-index: 0;
  }
  .step__number {
    position: relative;
    z-index: 1;
  }
}

/* ============================================
   SEÇÃO: CAPTACION-EMAIL-MEMBRESIA — form inline sobre fundo escuro
============================================ */
.email-capture__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.email-capture__form {
  margin-top: var(--space-lg);
}

.email-capture__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  text-align: left;
}

.email-capture__field {
  margin-bottom: 0;
}

.email-capture__note {
  margin-top: var(--space-md);
  margin-bottom: 0;
  font-size: var(--text-caption);
  color: var(--color-link-on-dark);
  text-align: center;
}

@media (min-width: 768px) {
  .email-capture__row {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .email-capture__row .btn {
    white-space: nowrap;
  }
}
/* /BLOCO ADICIONADO POR A07 — membresia */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /providencia/certificado-viaje (certificado-viaje.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   Reutiliza .hero / .breadcrumb / .proceso-step / .proceso__grid /
   .faq / .reservo-* / .credential / .btn / .badge / .cta-final
   já definidos acima.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO-CERTIFICADO — badge preço + grupo de dados sobre fundo escuro
============================================ */
.hero__price-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

/* ============================================
   SEÇÃO: QUE-ES-SAG — bloco de texto com nota de espécies
============================================ */
.sag-intro {
  max-width: 65ch;
}

.especies-nota {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-brand-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-lg) 0 0;
}

.section--bg-secondary .especies-nota {
  background-color: var(--color-bg-primary);
}

.especies-nota .icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
}

/* ============================================
   SEÇÃO: PROCESO-PASO-A-PASO — wrap do CTA inline
   (reutiliza .proceso__grid / .proceso-step / .proceso-step__num)
============================================ */
.proceso__cta-inline {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

/* ============================================
   SEÇÃO: REQUISITOS — checklist + alerta variável
============================================ */
.requisitos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-body);
  color: var(--color-text-primary);
}

.checklist__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: rgba(2, 38, 161, 0.12);
  color: var(--color-brand-primary);
}

.checklist__check .icon {
  width: 16px;
  height: 16px;
}

.alerta-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}

.section--bg-primary .alerta-info {
  background-color: var(--color-bg-secondary);
}

.alerta-info__icon {
  flex-shrink: 0;
  color: var(--color-accent);
}

.alerta-info__icon .icon {
  width: 24px;
  height: 24px;
}

.requisitos__cta-wrap {
  display: flex;
  margin-top: var(--space-lg);
}

/* ============================================
   SEÇÃO: PRECIO-CTA — layout 1col → 2col (preço/desc + botão)
============================================ */
.precio-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.precio-cta__value {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text-on-dark);
  margin: 0 0 var(--space-md);
}

.precio-cta__desc {
  color: var(--color-text-on-dark);
  opacity: 0.92;
  margin: 0 0 var(--space-md);
  max-width: 56ch;
}

.precio-cta__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.precio-cta__claim {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-text-on-dark);
  opacity: 0.85;
  margin: 0;
}

/* ============================================
   SEÇÃO: AGENDAR — wrapper centrado do iframe Reservo
   (reutiliza .reservo-frame / .reservo-label)
============================================ */
.agendar-wrap {
  max-width: 800px;
  margin-inline: auto;
}

.agendar-wrap .section__header {
  text-align: center;
}

.agendar-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.agendar-label .icon {
  width: 18px;
  height: 18px;
  color: var(--color-brand-primary);
}

/* ============================================
   SEÇÃO: VINCULO-ARTICULO-BLOG — card de link destacado
============================================ */
.blog-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 760px;
  margin-inline: auto;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-brand-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.blog-feature__icon {
  color: var(--color-accent);
}

.blog-feature__icon .icon {
  width: 36px;
  height: 36px;
}

.blog-feature__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin: 0;
}

.blog-feature__title {
  font-size: var(--text-h4);
  margin: 0;
}

.blog-feature__text {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   SEÇÃO: CROSS-SELL-SERVICIOS — cards de link 1→3
============================================ */
.crosssell__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.crosssell-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  transition: all var(--transition-base);
}

.crosssell-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

.crosssell-card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-sm);
}

.crosssell-card__icon .icon {
  width: 24px;
  height: 24px;
}

.crosssell-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  margin: 0;
}

.crosssell-card__sub {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* --- BREAKPOINTS específicos /certificado-viaje --- */
@media (min-width: 480px) {
  .requisitos__cta-wrap,
  .precio-cta__action {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .requisitos__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .crosssell__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .precio-cta {
    grid-template-columns: 1.5fr 1fr;
  }

  .precio-cta__action {
    justify-content: flex-end;
  }
}
/* /BLOCO ADICIONADO POR A07 — certificado-viaje */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /productos (productos.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO-PRODUCTOS
============================================ */
.productos-hero {
  padding-block: var(--space-3xl);
}

.productos-hero__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.productos-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.productos-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-on-dark);
  margin: 0;
}

.productos-hero__lead {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark);
  opacity: 0.92;
  max-width: 520px;
  margin: 0;
}

.productos-hero__caption {
  font-size: var(--text-caption);
  color: var(--color-text-on-dark);
  opacity: 0.7;
  margin: 0;
}

.productos-hero__media {
  width: 100%;
}

.productos-hero__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* ============================================
   SEÇÃO: VITRINA-CATEGORIAS-GRID
============================================ */
.productos-grid-section {
  padding-block: var(--space-3xl);
}

.productos-categorias__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

/* ============================================
   SEÇÃO: PRODUCTO-CARD (categorías)
============================================ */
.producto-card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.producto-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.producto-card__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.producto-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.producto-card:hover .producto-card__media img {
  transform: scale(1.04);
}

.producto-card__body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1;
}

.badge--brand {
  background-color: rgba(2, 38, 161, 0.12);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}

.producto-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.25;
}

.producto-card__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.65;
}

.producto-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.producto-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  line-height: 1.5;
}

.producto-card__list li .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 2px;
}

.producto-card__legal {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}

/* ============================================
   SEÇÃO: SELLO-VET
============================================ */
.sello-vet__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  text-align: center;
}

.sello-vet__avatar {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 4px solid var(--color-accent);
  box-shadow: var(--shadow-accent);
  flex-shrink: 0;
}

.sello-vet__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sello-vet__title {
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm);
  line-height: 1.25;
}

.sello-vet__text {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
  max-width: 540px;
  margin-inline: auto;
  margin-bottom: var(--space-md);
}

/* ============================================
   SEÇÃO: BANNER-ECOMMERCE
============================================ */
.ecommerce-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.ecommerce-banner__icon .icon {
  width: 40px;
  height: 40px;
  color: var(--color-accent);
}

.ecommerce-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.ecommerce-banner__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 480px;
  margin: 0;
}

/* ============================================
   BREAKPOINTS PRODUCTOS — mobile-first
============================================ */

@media (min-width: 768px) {
  .productos-categorias__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  .sello-vet__grid {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: var(--space-2xl);
  }

  .sello-vet__text {
    margin-inline: 0;
  }
}

@media (min-width: 1024px) {
  .productos-hero__grid {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3xl);
  }

  .productos-hero__content {
    flex: 1;
  }

  .productos-hero__media {
    flex: 1;
  }

  .productos-hero__img {
    aspect-ratio: unset;
    height: 480px;
    border-radius: var(--radius-xl);
  }

  .sello-vet__avatar {
    width: 180px;
    height: 180px;
  }
}
/* /BLOCO ADICIONADO POR A07 — productos */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /blog (blog.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO-BLOG
   Hero text-only, layout 2 colunas no desktop.
   Imagem decorativa oculta em mobile, visível em lg+.
============================================ */
.blog-hero {
  padding-block: var(--space-4xl);
}

.blog-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.blog-hero__breadcrumb {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-md);
}

.blog-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.blog-hero__breadcrumb a:hover {
  color: var(--color-text-on-dark);
  text-decoration: underline;
}

.blog-hero__title {
  font-size: var(--text-h1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin: 0 0 var(--space-md);
}

.blog-hero__lead {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark);
  opacity: 0.92;
  margin-bottom: var(--space-xl);
  max-width: 52ch;
}

.blog-hero__media {
  display: none;
}

.blog-hero__media img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ============================================
   SEÇÃO: CATEGORIAS-BLOG — filtros pildoras
============================================ */
.blog-categorias {
  padding-block: var(--space-lg);
}

.blog-filtros {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-xs);
}

.blog-filtros::-webkit-scrollbar {
  height: 3px;
}

.blog-filtros::-webkit-scrollbar-track {
  background: transparent;
}

.blog-filtros::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

.filtro-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  scroll-snap-align: start;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: 1;
  padding: 8px 16px;
  min-height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.filtro-pill:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}

.filtro-pill--activo {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-on-dark);
}

.filtro-pill--activo:hover {
  background-color: var(--color-brand-secondary);
  border-color: var(--color-brand-secondary);
  color: var(--color-text-on-dark);
}

/* ============================================
   SEÇÃO: ARTICULO-DESTACADO
   Mobile: stack vertical. Desktop: 50/50 horizontal.
============================================ */
.articulo-destacado {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.articulo-destacado__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.articulo-destacado__body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.articulo-destacado__titulo {
  font-size: var(--text-h2);
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0;
}

.articulo-destacado__excerpt {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}

.articulo-destacado__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

.badge--blog-destacado {
  background-color: rgba(205, 29, 43, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.badge--categoria {
  background-color: rgba(2, 38, 161, 0.08);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}

/* ============================================
   SEÇÃO: GRID-ARTICULOS
   1 col mobile -> 2 col 480px -> 3 col 1024px+
============================================ */
.blog-articulos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.card-articulo {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.card-articulo:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.card-articulo__media-link {
  display: block;
  overflow: hidden;
}

.card-articulo__media-link img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.card-articulo:hover .card-articulo__media-link img {
  transform: scale(1.03);
}

.card-articulo__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.card-articulo__titulo {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.2vw, 20px);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0;
}

.card-articulo__titulo a {
  color: inherit;
  text-decoration: none;
}

.card-articulo__titulo a:hover {
  color: var(--color-brand-primary);
  text-decoration: underline;
}

.card-articulo__excerpt {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-articulo__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.card-articulo__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

.blog-sin-resultados {
  text-align: center;
  font-size: var(--text-body);
  color: var(--color-text-muted);
  padding-block: var(--space-xl);
}

/* ============================================
   SEÇÃO: BANNER-CTA-MID (blog)
============================================ */
.blog-banner-cta__inner {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.blog-banner-cta__nota {
  font-size: var(--text-body-sm);
  color: var(--color-text-on-dark);
  opacity: 0.8;
  margin: 0;
}

.blog-banner-cta__link-agenda {
  color: var(--color-text-on-dark);
  opacity: 1;
  text-decoration: underline;
}

.blog-banner-cta__link-agenda:hover {
  opacity: 0.85;
}

/* ============================================
   SEÇÃO: SERVICIOS-RELACIONADOS grid (blog)
============================================ */
.servicios-rel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* ============================================
   SEÇÃO: NEWSLETTER
============================================ */
.newsletter {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.newsletter__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.newsletter__input {
  font-family: var(--font-body);
  font-size: var(--text-body);
  padding: 12px var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  width: 100%;
  min-height: 48px;
  transition: border-color var(--transition-fast);
}

.newsletter__input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(2, 38, 161, 0.15);
}

.newsletter__btn {
  width: 100%;
}

.newsletter__legal {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

/* ============================================
   BREAKPOINTS — blog-specific (mobile-first)
============================================ */

/* sm — 480px */
@media (min-width: 480px) {
  .blog-articulos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* md — 768px */
@media (min-width: 768px) {
  .blog-filtros {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .articulo-destacado {
    grid-template-columns: 1fr 1fr;
  }

  .articulo-destacado__media img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 280px;
  }

  .newsletter__form {
    flex-direction: row;
    align-items: flex-start;
  }

  .newsletter__btn {
    width: auto;
    flex-shrink: 0;
  }

  .servicios-rel__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* lg — 1024px */
@media (min-width: 1024px) {
  .blog-hero__grid {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-3xl);
  }

  .blog-hero__media {
    display: block;
  }

  .blog-articulos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* /BLOCO ADICIONADO POR A07 — blog */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /contacto (contacto.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO-CONTACTO
   Hero compacto (sem imagem de fundo — BG brand-primary sólido)
============================================ */
.hero--contacto {
  min-height: 40vh;
  background-color: var(--color-brand-primary);
  background-image: none;
}

.hero--contacto .hero__overlay {
  background-color: rgba(5, 16, 58, 0.30);
}

/* ============================================
   SEÇÃO: BREADCRUMB — lista
============================================ */
.breadcrumb {
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: '›';
  color: var(--color-text-muted);
}

.breadcrumb__link {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--color-brand-primary);
}

.breadcrumb__item--current {
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* ============================================
   SEÇÃO: INFO-CONTACTO — grid de cards
============================================ */
.info-contacto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.contacto-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  transition: box-shadow var(--transition-base);
}

.contacto-card:hover {
  box-shadow: var(--shadow-md);
}

.contacto-card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-accent);
  flex-shrink: 0;
}

.contacto-card__icon--whatsapp {
  background-color: rgba(37, 211, 102, 0.12);
  color: var(--color-whatsapp);
}

.contacto-card__icon .icon {
  width: 24px;
  height: 24px;
}

.contacto-card__title {
  font-size: var(--text-h3);
  margin: 0;
  color: var(--color-text-primary);
}

.contacto-card__text {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  font-weight: 500;
  margin: 0;
}

.contacto-card__sub {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Tabla de horarios */
.horario-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 0;
}

.horario-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}

.horario-list__row:last-child {
  border-bottom: none;
}

.horario-list__dia {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.horario-list__hora {
  color: var(--color-text-primary);
  font-weight: 600;
  text-align: right;
}

.horario-list__hora--cerrado {
  color: var(--color-text-muted);
  font-weight: 400;
  font-style: italic;
}

/* Lista de servicios en card */
.servicios-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: var(--space-xs) 0;
}

.servicios-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  line-height: 1.5;
}

.servicios-list__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 2px;
}

.servicios-list__icon svg {
  width: 100%;
  height: 100%;
}

/* ============================================
   SEÇÃO: MAPA — iframe + info layout
============================================ */
.mapa__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.mapa__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mapa__iframe {
  width: 100%;
  height: 380px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

/* ============================================
   SEÇÃO: TRANSPORTE — grid de cards
============================================ */
.transporte__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.transporte-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.transporte-card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-brand-primary);
}

.transporte-card__icon .icon {
  width: 24px;
  height: 24px;
}

.transporte-card__title {
  font-size: var(--text-h4);
  margin: 0;
  color: var(--color-text-primary);
}

.transporte-card__text {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   SEÇÃO: CONTACTO-FORM — layout 2 col desktop
============================================ */
.contacto-form__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.contacto-form__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contacto-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

/* ============================================
   SEÇÃO: FAQ — narrow variant para /contacto
============================================ */
.faq--narrow {
  max-width: 760px;
  margin-inline: auto;
}

/* ============================================
   SEÇÃO: CTA-FINAL — variante /contacto
============================================ */
.cta-final--contacto {
  text-align: center;
}

.cta-final--contacto .cta-final__group {
  justify-content: center;
}

/* ============================================
   SEÇÃO: RESERVO-FRAME — variante FAQ
============================================ */
.reservo-frame--faq iframe {
  width: 100%;
  height: 480px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ============================================
   BREAKPOINTS — contacto.html specific (mobile-first)
============================================ */

/* md — 768px */
@media (min-width: 768px) {
  .info-contacto__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .transporte__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .mapa__iframe {
    height: 480px;
  }
}

/* lg — 1024px */
@media (min-width: 1024px) {
  .hero--contacto {
    min-height: 36vh;
  }

  .mapa__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2xl);
  }

  .mapa__info {
    flex: 0 0 38%;
    max-width: 38%;
  }

  .mapa__embed {
    flex: 1;
  }

  .contacto-form__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2xl);
  }

  .contacto-form__header {
    flex: 0 0 38%;
    max-width: 38%;
  }

  .contacto-form {
    flex: 1;
  }

  .hero--contacto .hero__cta-group {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
/* /BLOCO ADICIONADO POR A07 — contacto */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /legal/privacidad (legal-privacidad.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO-LEGAL — cabeçalho da página legal
============================================ */
.legal-hero {
  max-width: 800px;
}

.legal-hero__title {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.legal-hero__date {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.legal-hero__intro {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.65;
  max-width: 72ch;
  margin-bottom: 0;
}

/* ============================================
   SEÇÃO: LAYOUT LEGAL — índice + documento
   Mobile: stack; Tablet+: 2 colunas com índice sticky
============================================ */
.legal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* ============================================
   SEÇÃO: INDICE-NAVEGABLE
============================================ */
.legal-index {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.legal-index__label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.legal-index__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: decimal;
  padding-left: var(--space-lg);
}

.legal-index__list li {
  list-style: decimal;
  font-size: var(--text-body-sm);
  line-height: 1.5;
}

.legal-index__list a {
  color: var(--color-brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: 2px 6px;
  border-left: 3px solid transparent;
  display: block;
}

.legal-index__list a:hover {
  text-decoration: underline;
  color: var(--color-brand-secondary);
}

.legal-index__list a.is-active {
  border-left-color: var(--color-brand-primary);
  background-color: var(--color-bg-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ============================================
   SEÇÃO: DOCUMENTO LEGAL — subsections
============================================ */
.legal-document {
  max-width: 720px;
}

.legal-section {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.legal-section:last-child {
  border-bottom: none;
}

.legal-section p {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.legal-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-brand-primary);
  margin-bottom: var(--space-md);
  margin-top: 0;
  scroll-margin-top: 88px;
}

.legal-section__subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

/* Tabla de finalidades */
.legal-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-md);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  vertical-align: top;
}

.legal-table thead th {
  background-color: var(--color-bg-secondary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
}

.legal-table tbody tr:nth-child(even) {
  background-color: rgba(248, 245, 239, 0.5);
}

.legal-table td {
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* Lista legal genérica */
.legal-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
}

.legal-list li {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
  list-style: disc;
}

/* Lista de provedores (sin bullet) */
.legal-list--providers {
  padding-left: 0;
}

.legal-list--providers li {
  list-style: none;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.legal-list--providers li:last-child {
  border-bottom: none;
}

/* Lista de direitos con iconos check */
.legal-list--rights {
  padding-left: 0;
}

.legal-list--rights li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
}

.legal-list__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
  margin-top: 3px;
}

/* ============================================
   SEÇÃO: CONTACTO-DPO — bloco de ação
============================================ */
.dpo-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 820px;
  margin-inline: auto;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl);
  box-shadow: var(--shadow-md);
}

.dpo-block__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.dpo-block__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-sm);
}

.dpo-block__icon svg {
  width: 28px;
  height: 28px;
}

.dpo-block__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.dpo-block__body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}

.dpo-block__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ============================================
   SEÇÃO: BANNER-RETORNO — links de regreso
============================================ */
.legal-return {
  border-top: 1px solid var(--color-border);
}

.legal-return__text {
  text-align: center;
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.legal-return__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.legal-return__links .card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 15px;
}

.legal-return__links .card-link .icon {
  width: 16px;
  height: 16px;
}

/* ============================================
   BREAKPOINTS — página legal (min-width)
============================================ */

/* md — 768px: índice sticky ao lado do documento */
@media (min-width: 768px) {
  .legal-layout {
    grid-template-columns: 220px 1fr;
    gap: var(--space-2xl);
  }

  .legal-index {
    position: sticky;
    top: 88px;
    align-self: start;
  }

  .dpo-block {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .dpo-block__text {
    flex: 1;
    max-width: 56%;
  }

  .dpo-block__actions {
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .legal-return__links {
    flex-direction: row;
    justify-content: center;
  }
}

/* lg — 1024px: aumentar largura do índice */
@media (min-width: 1024px) {
  .legal-layout {
    grid-template-columns: 260px 1fr;
  }
}
/* /BLOCO ADICIONADO POR A07 — legal-privacidad */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /gracias-formulario (gracias-formulario.html).
   Página de confirmación post-formulario de franquicias (noindex).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   Reutiliza .section--dark / .btn / .btn-whatsapp / .btn-outline.
   ================================================================ */

/* ============================================
   SEÇÃO: GRACIAS-HERO — confirmación centrada sobre fundo escuro
============================================ */
.gracias-hero {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  text-align: center;
  padding-block: var(--space-4xl);
}

.gracias-hero__inner {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gracias-hero__check {
  width: 64px;
  height: 64px;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
}

.gracias-hero__title {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text-on-dark);
  margin: 0 0 var(--space-md);
}

.gracias-hero__subtitle {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark);
  opacity: 0.92;
  margin: 0 0 var(--space-md);
  max-width: 56ch;
}

.gracias-hero__divider {
  width: 40px;
  height: 2px;
  background-color: var(--color-accent);
  border: 0;
  margin: var(--space-lg) auto;
}

.gracias-hero__urgency {
  font-size: var(--text-body);
  color: var(--color-text-on-dark);
  opacity: 0.80;
  margin: 0 0 var(--space-md);
}

.gracias-hero__cta {
  min-height: 52px;
  box-shadow: var(--shadow-cta);
  width: 100%;
}

/* ============================================
   SEÇÃO: PROXIMOS-PASOS — grid 1→3 de cards
============================================ */
.pasos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.paso-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.paso-card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-accent);
}

.paso-card__icon .icon {
  width: 36px;
  height: 36px;
}

.paso-card__title {
  font-size: var(--text-h4);
  margin: 0;
}

.paso-card__text {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.pasos__cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ============================================
   SEÇÃO: MIENTRAS-TANTO — texto + card preview Providencia
============================================ */
.mientras-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  max-width: 900px;
  margin-inline: auto;
}

.mientras-block__text {
  text-align: center;
}

.mientras-block__title {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-md);
}

.mientras-block__intro {
  color: var(--color-text-secondary);
  margin: 0;
}

.preview-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.preview-card__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-brand-primary);
}

.preview-card__icon .icon {
  width: 32px;
  height: 32px;
}

.preview-card__name {
  font-size: var(--text-h4);
  margin: 0;
}

.preview-card__tagline {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.preview-card__link {
  font-size: var(--text-body-sm);
  color: var(--color-brand-primary);
  text-decoration: underline;
  margin-top: var(--space-xs);
}

/* --- BREAKPOINTS específicos /gracias-formulario --- */
@media (min-width: 480px) {
  .gracias-hero__cta {
    width: auto;
    min-width: 280px;
  }

  .pasos__cta-group {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
  }
}

@media (min-width: 768px) {
  .gracias-hero {
    padding-block: var(--space-5xl);
  }

  .pasos__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .mientras-block {
    grid-template-columns: 1fr 1fr;
  }

  .mientras-block__text {
    text-align: left;
  }
}
/* /BLOCO ADICIONADO POR A07 — gracias-formulario */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /legal/terminos (legal-terminos.html).
   Acrescentado ao FINAL sem alterar o existente.
   Mobile-first, usa apenas tokens semânticos do :root.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO-LEGAL
============================================ */
.legal-hero {
  padding-block: var(--space-2xl) var(--space-xl);
}

.legal-hero .breadcrumb {
  padding-block: 0 var(--space-md);
}

.legal-hero__title {
  font-size: var(--text-h1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.legal-hero__fecha {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.legal-hero__empresa {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ============================================
   SEÇÃO: INDICE-LEGAL (mobile inline — hidden on desktop)
============================================ */
.legal-indice-mobile {
  padding-block: var(--space-lg);
}

.legal-indice__titulo {
  font-size: var(--text-h4);
  margin-bottom: var(--space-md);
}

.legal-indice__lista {
  list-style: decimal;
  padding-left: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.legal-indice__lista a {
  font-size: var(--text-body-sm);
  color: var(--color-brand-primary);
  font-family: var(--font-body);
}

.legal-indice__lista a:hover {
  text-decoration: underline;
}

/* ============================================
   SEÇÃO: CONTENIDO-LEGAL — layout 2 colunas (desktop)
============================================ */
.legal-content-wrap {
  padding-block: var(--space-xl) var(--space-3xl);
}

.legal-layout {
  display: block;
}

/* Sidebar: oculta em mobile, sticky em desktop */
.legal-sidebar {
  display: none;
}

/* Prose max-width 720px */
.legal-prose {
  max-width: 720px;
  margin-inline: auto;
}

/* Sections dentro do prose */
.legal-section {
  scroll-margin-top: 96px; /* compensa nav sticky (72px) + margem */
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.legal-section:first-child {
  border-top: none;
  padding-top: 0;
}

.legal-section__title {
  font-size: var(--text-h3);
  line-height: 1.3;
  color: var(--color-brand-secondary);
  margin-bottom: var(--space-md);
}

.legal-section p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.legal-list {
  list-style: disc;
  padding-left: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.legal-list li {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.legal-nota {
  background-color: var(--color-bg-secondary);
  border-left: 3px solid var(--color-brand-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-body-sm) !important;
  color: var(--color-text-secondary);
  margin-top: var(--space-md);
}

.legal-section__cta-group {
  margin-top: var(--space-lg);
}

/* ============================================
   SEÇÃO: CTA-FOOTER-LEGAL
============================================ */
.legal-cta-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: flex-start;
}

.legal-cta-footer__pregunta {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-bottom: 0;
}

.legal-cta-footer__action {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.legal-cta-footer__caption {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ============================================
   BREADCRUMB — extensão (estilo do bread já existe)
============================================ */
.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.breadcrumb__item {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.breadcrumb__item--sep {
  color: var(--color-text-muted);
}

.breadcrumb__item--current {
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* ============================================
   BREAKPOINTS — LEGAL (mobile-first)
============================================ */

/* md — 768px */
@media (min-width: 768px) {
  .legal-cta-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .legal-cta-footer__text {
    flex: 1;
  }

  .legal-cta-footer__action {
    width: auto;
    align-items: flex-end;
  }

  .legal-cta-footer__action .btn {
    width: auto;
  }
}

/* lg — 1024px */
@media (min-width: 1024px) {
  /* Ocultar índice mobile, ativar layout 2 colunas */
  .legal-indice-mobile {
    display: none;
  }

  .legal-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-3xl);
    align-items: start;
  }

  .legal-sidebar {
    display: block;
    position: sticky;
    top: 88px; /* nav 72px + 16px margem */
  }

  .legal-sidebar__titulo {
    font-size: var(--text-h4);
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
  }

  .legal-sidebar__lista {
    list-style: decimal;
    padding-left: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-lg);
  }

  .legal-sidebar__link {
    font-size: var(--text-body-sm);
    font-family: var(--font-body);
    color: var(--color-text-muted);
    text-decoration: none;
    line-height: 1.4;
    transition: color var(--transition-fast);
  }

  .legal-sidebar__link:hover {
    color: var(--color-brand-primary);
    text-decoration: none;
  }

  .legal-sidebar__link--active {
    color: var(--color-brand-primary);
    font-weight: 500;
  }

  .legal-sidebar__wa-btn {
    width: 100%;
    font-size: var(--text-body-sm);
    padding: 10px 16px;
    min-height: 40px;
    justify-content: center;
  }

  .legal-prose {
    margin-inline: 0;
    max-width: 720px;
  }
}
/* /BLOCO ADICIONADO POR A07 — legal-terminos */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /blog/ley-cholito-microchip (blog-ley-cholito-microchip.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   Layout: artigo 2 colunas (editorial ~70% + sidebar sticky ~30%)
   em desktop (≥1024px). Em mobile: 1 coluna, sidebar ao final.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO-ARTICULO — banner do artigo de blog
============================================ */
.blog-article-hero {
  padding-top: var(--space-xl);
}

.article-hero-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-lg);
}

.article-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-md);
}

.article-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.article-meta-item .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
}

.article-hero-title {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: var(--space-md) 0;
}

.article-hero-lead {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.65;
  max-width: 72ch;
  margin-bottom: 0;
}

/* ============================================
   SEÇÃO: LAYOUT-ARTICULO — 2 colunas
============================================ */
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Coluna editorial */
.article-editorial {
  min-width: 0; /* evita overflow em grid */
}

/* ============================================
   SEÇÃO: CTA-INLINE — caixa de destaque no topo do artigo
============================================ */
.article-cta-inline {
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.article-cta-inline p {
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary);
}

.article-cta-inline__price {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-brand-primary) !important;
  margin-bottom: var(--space-md) !important;
}

.article-cta-inline__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ============================================
   SEÇÃO: BODY-ARTICULO — tipografia editorial
============================================ */
.article-body {
  max-width: none;
}

.article-body h2 {
  font-size: var(--text-h2);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  color: var(--color-text-primary);
}

.article-body h3 {
  font-size: var(--text-h3);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary);
}

.article-body p {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.article-body ul {
  list-style: disc;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.article-body ul li {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}

.article-body strong {
  color: var(--color-text-primary);
}

/* Lista ordenada para proceso de aplicación */
.article-ol {
  list-style: decimal;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.article-ol li {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  line-height: 1.6;
  padding-left: var(--space-sm);
}

.article-ol li strong {
  color: var(--color-text-primary);
}

/* Link interno dentro do artigo */
.article-body a {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body a:hover {
  color: var(--color-brand-secondary);
}

/* Botão WhatsApp inline — mid-article */
.article-wa-inline {
  display: flex;
  justify-content: flex-start;
  margin-block: var(--space-2xl);
}

/* ============================================
   SEÇÃO: FAQ-ARTICULO — accordion <details>/<summary>
============================================ */
.article-faq-section {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-top: var(--space-2xl);
}

.article-faq-section h2 {
  font-size: var(--text-h2);
  margin-top: 0;
  margin-bottom: var(--space-lg);
}

.article-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.article-faq__item:last-child {
  border-bottom: none;
}

.article-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text-primary);
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}

.article-faq__question::-webkit-details-marker {
  display: none;
}

.article-faq__question::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230226A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

details[open] > .article-faq__question::after {
  transform: rotate(180deg);
}

.article-faq__answer {
  padding-bottom: var(--space-lg);
}

.article-faq__answer p {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.65;
}

/* ============================================
   SEÇÃO: SIDEBAR
============================================ */
.article-sidebar {
  display: none; /* ocultada em mobile, exibida em ≥1024px */
}

.sidebar-card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.sidebar-card:last-child {
  margin-bottom: 0;
}

.sidebar-card__title {
  font-size: var(--text-h4);
  margin: 0 0 var(--space-md);
  color: var(--color-text-primary);
}

.sidebar-card__subtitle {
  font-size: var(--text-body);
  font-weight: 600;
  margin: 0 0 var(--space-md);
  color: var(--color-text-primary);
}

/* Card autor (Dr. Lean) */
.sidebar-card--author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.sidebar-author-photo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.sidebar-author-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.sidebar-author-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  margin: 0;
}

.sidebar-author-title {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Card Reservo — sem border para não duplicar com .reservo-frame */
.sidebar-card--reservo {
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* Info da unidade */
.sidebar-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sidebar-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.sidebar-info-item .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
  margin-top: 2px;
}

/* ============================================
   SEÇÃO: CTA-FINAL-ARTICULO
============================================ */
.article-cta-final__price {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
}

.article-cta-final__local {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-size: var(--text-caption);
  color: var(--color-text-on-dark);
  opacity: 0.72;
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

.article-cta-final__local .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-accent);
}

/* ============================================
   SEÇÃO: SIDEBAR-MOVIL (visível somente <1024px)
============================================ */
.sidebar-mobile-block {
  /* visível em mobile, ocultada em desktop */
}

.sidebar-mobile-inner {
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sidebar-mobile-inner h3 {
  font-size: var(--text-h3);
  margin: 0;
}

.sidebar-mobile-label {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ============================================
   SEÇÃO: ARTIGOS-RELACIONADOS — grid 2 colunas blog
============================================ */
.blog-grid--relacionados {
  grid-template-columns: 1fr;
}

/* ============================================
   BREAKPOINTS — blog-ley-cholito-microchip
============================================ */

/* sm — 480px */
@media (min-width: 480px) {
  .article-cta-inline__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* md — 768px */
@media (min-width: 768px) {
  .article-hero-img {
    max-height: 480px;
  }

  .blog-grid--relacionados {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* lg — 1024px */
@media (min-width: 1024px) {
  /* Layout 2 colunas: editorial ~70% + sidebar sticky ~30% */
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-3xl);
    align-items: start;
  }

  /* Sidebar visível em desktop */
  .article-sidebar {
    display: block;
    position: sticky;
    top: calc(var(--header-height-desktop) + var(--space-lg));
    max-height: calc(100vh - var(--header-height-desktop) - var(--space-lg) * 2);
    overflow-y: auto;
  }

  /* Ocultar bloco mobile no desktop */
  .sidebar-mobile-block {
    display: none;
  }

  /* Hero imagem mais alta em desktop */
  .article-hero-img {
    max-height: 480px;
  }
}

/* /BLOCO ADICIONADO POR A07 — blog-ley-cholito-microchip */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /blog/calendario-vacunas-perro-chile (blog-calendario-vacunas-perro-chile.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   Reutiliza .badge / .btn / .faq / .breadcrumb / .blog-card / .blog-grid
   / .site-footer / .whatsapp-float / .section já definidos acima.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO-ARTICULO — cabeçalho do artigo blog vacunas
============================================ */
.blog-article-hero {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

.blog-article-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.blog-article-hero__badge {
  margin-bottom: var(--space-sm);
}

.blog-article-hero__title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: var(--space-sm) 0 var(--space-md);
}

.blog-article-hero__lead {
  font-size: var(--text-body-lg);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.blog-article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.blog-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.blog-meta__item .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.blog-meta__sep {
  color: var(--color-border);
}

.blog-article-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.blog-article-hero__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ============================================
   SEÇÃO: CTA-INLINE — caixas CTA topo/meio
============================================ */
.blog-cta-inline {
  padding-block: 0;
}

.blog-cta-inline__box {
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-brand-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-block: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 680px;
}

.blog-cta-inline__lead {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}

.blog-cta-inline__price {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   SEÇÃO: CONTENIDO-ARTICULO — layout 2 colunas
============================================ */
.blog-article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.blog-article-main .article-h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  line-height: 1.3;
}

.blog-article-main p {
  font-size: var(--text-body-lg);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

/* Tabela editorial */
.article-table-wrap {
  margin-block: var(--space-lg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
  background-color: var(--color-bg-primary);
}

.article-table thead {
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-dark);
}

.article-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  padding: 10px 14px;
}

.article-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text-primary);
}

.article-table tbody tr:last-child td {
  border-bottom: none;
}

.article-table tbody tr:nth-child(even) {
  background-color: var(--color-bg-secondary);
}

/* Badges de tipo de vacuna */
.article-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  white-space: nowrap;
}

.article-badge--required {
  background-color: rgba(185, 28, 28, 0.1);
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, 0.3);
}

.article-badge--core {
  background-color: rgba(2, 38, 161, 0.12);
  color: var(--color-brand-primary);
  border: 1px solid rgba(2, 38, 161, 0.25);
}

.article-badge--noncore {
  background-color: rgba(107, 114, 128, 0.1);
  color: var(--color-text-muted);
  border: 1px solid rgba(107, 114, 128, 0.25);
}

/* Nota de tabela */
.article-note {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  background-color: var(--color-bg-secondary);
  border-left: 3px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-sm) var(--space-md);
  margin-block: var(--space-md);
}

/* Lista de preços no artigo */
.article-price-list {
  display: flex;
  flex-direction: column;
  margin-block: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.article-price-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  list-style: none;
}

.article-price-list li:last-child {
  border-bottom: none;
}

.article-price-list li strong {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-brand-primary);
  white-space: nowrap;
}

/* Card Dr. Lean */
.article-vet-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-block: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.article-vet-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(2, 38, 161, 0.12);
  color: var(--color-brand-primary);
  border-radius: var(--radius-md);
}

.article-vet-card__icon .icon {
  width: 28px;
  height: 28px;
}

.article-vet-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.article-vet-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.article-vet-card__credential {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.article-vet-card__quote {
  font-size: var(--text-body-sm);
  font-style: italic;
  color: var(--color-text-secondary);
  margin: 0;
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-sm);
}

/* CTA-INLINE-MID (visível só mobile/tablet) */
.blog-cta-mid {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-block: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.blog-cta-mid__lead {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}

.blog-cta-mid__price {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.blog-cta-mid__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Aside sticky (oculto em mobile, ativado em ≥1024px) */
.blog-aside {
  display: none;
}

.blog-aside__card {
  position: sticky;
  top: 88px; /* 72px nav + 16px gap */
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.blog-aside__title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.blog-aside__price {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.blog-aside__sep {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

.blog-aside__reservo-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

.blog-aside__reservo-label .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.blog-aside__reservo {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
}

.blog-aside__reservo iframe {
  width: 100%;
  display: block;
  border: 0;
}

.blog-aside__related-label {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

.blog-aside__related {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.blog-aside__related-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  font-size: var(--text-body-sm);
  color: var(--color-brand-primary);
  line-height: 1.4;
  text-decoration: none;
}

.blog-aside__related-link .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.blog-aside__related-link:hover {
  text-decoration: underline;
}

/* ============================================
   SEÇÃO: CTA-FINAL-ARTICULO (vacunas)
============================================ */
.blog-cta-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
  padding-block: var(--space-2xl);
}

.blog-cta-final__title {
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--color-text-on-dark);
  margin: 0;
}

.blog-cta-final__body {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark);
  opacity: 0.92;
  max-width: 56ch;
  margin: 0;
}

.blog-cta-final__precio-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
}

.blog-cta-final__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.blog-cta-final__reservo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: 560px;
  margin-top: var(--space-md);
}

.blog-cta-final__reservo-label {
  font-size: 14px;
  color: var(--color-text-on-dark);
  opacity: 0.75;
  margin: 0;
}

.blog-cta-final__reservo {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-primary);
}

.blog-cta-final__reservo iframe {
  width: 100%;
  display: block;
  border: 0;
}

/* ============================================
   SEÇÃO: ARTICULOS-RELACIONADOS — card extras
============================================ */
.blog-card__badge {
  margin-bottom: var(--space-sm);
}

.blog-card__meta {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}

/* Card 3 — oculto em mobile/tablet */
.blog-related__card-third {
  display: none;
}

/* ============================================
   BREAKPOINTS — blog-calendario-vacunas (min-width)
============================================ */
@media (min-width: 480px) {
  .blog-cta-mid__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .blog-cta-mid__actions .btn--full {
    flex: 1;
    min-width: 160px;
  }

  .blog-cta-final__actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (min-width: 768px) {
  .blog-article-hero__inner {
    gap: var(--space-2xl);
  }

  .blog-cta-inline__box {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
  }

  .blog-cta-inline__box .btn {
    width: auto;
    flex-shrink: 0;
    align-self: flex-start;
  }

  .blog-cta-final__inner {
    padding-block: var(--space-3xl);
  }
}

@media (min-width: 1024px) {
  /* Layout 2 colunas: artigo ~70% / aside sticky ~30% */
  .blog-article-layout {
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  /* Imagen hero flota à direita no desktop */
  .blog-article-hero__inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* Aside: visível em desktop */
  .blog-aside {
    display: block;
  }

  /* CTA-INLINE-MID: oculto em desktop */
  .blog-cta-mid {
    display: none;
  }

  /* Reservo em CTA-FINAL: oculto em desktop (aside já cobre) */
  .blog-cta-final__reservo-wrap {
    display: none;
  }

  /* Card 3 relacionados: visível em ≥1024px */
  .blog-related__card-third {
    display: flex;
  }
}

@media (min-width: 1440px) {
  .blog-article-layout {
    gap: var(--space-3xl);
  }
}

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   blog-certificado-viaje-mascotas-sag.html
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   ================================================================ */

/* ============================================
   SEÇÃO: ARTICLE-NOTE-ICON — callout com ícone (nota destacada)
   Variante com ícone inline para artigos de blog
============================================ */
.article-note--icon {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-block: var(--space-xl);
}

.article-note__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 2px;
}

/* Cuando .article-note se usa con flex + ícono (blog-certificado-sag) */
.article-note:has(.article-note__icon) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  border-left-width: 4px;
  border-left-color: var(--color-accent);
  padding: var(--space-lg);
  margin-block: var(--space-xl);
}

.article-note:has(.article-note__icon) p {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ============================================
   SEÇÃO: SIDEBAR-SAG-PRECIO — precio destacado no sidebar
============================================ */
.sidebar-sag-precio {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-md);
}
/* /BLOCO ADICIONADO POR A07 — blog-certificado-viaje-mascotas-sag */
/* /BLOCO ADICIONADO POR A07 — blog-calendario-vacunas-perro-chile */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /blog/consulta-veterinaria-gatos (blog-consulta-veterinaria-gatos.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   Reutiliza .faq / .article-body / .blog-card / .blog-grid /
   .breadcrumb / .badge / .btn / .cta-final já definidos acima.
   ================================================================ */

/* ============================================
   SEÇÃO: BREADCRUMB-LIST — ol com separadores
============================================ */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.breadcrumb__item a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb__item a:hover {
  color: var(--color-brand-primary);
  text-decoration: underline;
}

.breadcrumb__item--current {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.breadcrumb__separator {
  color: var(--color-text-muted);
  user-select: none;
}

/* ============================================
   SEÇÃO: HERO-ARTICULO — layout 2 colunas desktop
============================================ */
.blog-hero-article {
  padding-block: var(--space-2xl);
}

.blog-hero-article__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.blog-hero-article__badge {
  margin-bottom: var(--space-md);
}

.blog-hero-article__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.blog-hero-article__title {
  font-size: var(--text-h1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
}

.blog-hero-article__lead {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}

.blog-hero-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.blog-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.blog-meta__item .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.blog-meta__separator {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

/* Imagen hero: visible solo en desktop lg+ */
.blog-hero-article__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.blog-hero-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Ocultar columna imagen en hero en mobile/tablet (la imagen mobile está abajo) */
.blog-hero-article__media--desktop-only {
  display: none;
}

/* ============================================
   SEÇÃO: IMAGEN-HERO-MOBILE — solo mobile/tablet
============================================ */
.blog-hero-mobile-img {
  width: 100%;
  max-height: 260px;
  overflow: hidden;
}

.blog-hero-mobile-img img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  display: block;
}

/* ============================================
   SEÇÃO: BLOG-LAYOUT — prosa + sidebar
============================================ */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Sidebar (oculto mobile — se muestra en lg+) */
.blog-sidebar {
  display: none;
}

/* ============================================
   SEÇÃO: TOC-MOBILE — tabla de contenidos acordeón
============================================ */
.blog-toc-mobile {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
  overflow: hidden;
}

.blog-toc-mobile__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  padding: var(--space-md) var(--space-lg);
}

.blog-toc-mobile__toggle .faq__icon {
  transition: transform var(--transition-base);
}

.blog-toc-mobile__toggle[aria-expanded="true"] .faq__icon {
  transform: rotate(180deg);
}

.blog-toc-mobile__list {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-lg) var(--space-md);
  gap: var(--space-sm);
}

.blog-toc-mobile__list a {
  font-size: var(--text-body-sm);
  color: var(--color-brand-primary);
  padding: 4px 0;
  text-decoration: none;
}

.blog-toc-mobile__list a:hover {
  text-decoration: underline;
}

/* ============================================
   SEÇÃO: ARTICLE-BODY — estilos prosa del artículo
   (complemento de .article-body ya definido en globals)
============================================ */
.blog-article-main {
  min-width: 0; /* evitar overflow en grid */
}

/* Lista con checkmarks (señales de alerta) */
.blog-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.blog-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
}

.blog-checklist__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
  margin-top: 2px;
}

/* Nota de alerta */
.blog-nota {
  background-color: rgba(2, 38, 161, 0.07);
  border-left: 4px solid var(--color-brand-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
}

.blog-nota p {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  font-weight: 500;
  margin: 0;
}

/* ============================================
   SEÇÃO: PASOS CONSULTA — grid 1→4 cards de proceso
============================================ */
.blog-pasos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.blog-paso-card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
}

.blog-paso-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-dark);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  flex-shrink: 0;
}

.blog-paso-card__title {
  font-size: var(--text-h4);
  margin: 0 0 var(--space-sm);
}

.blog-paso-card__text {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Precio destacado en prosa */
.blog-precio-destaque {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
}

.blog-precio-destaque strong {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-brand-primary);
}

/* ============================================
   SEÇÃO: CTA-INLINE — bloque CTA mitad del artículo
============================================ */
.blog-cta-inline {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin-block: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.blog-cta-inline__title {
  font-size: var(--text-h3);
  margin: 0;
}

.blog-cta-inline__text {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin: 0;
}

.blog-cta-inline__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.blog-cta-inline__secondary {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}

.blog-cta-inline__secondary:hover {
  color: var(--color-brand-primary);
  text-decoration: underline;
}

/* ============================================
   SEÇÃO: VETERINARIO BIO — card autoridad Dr. Lean
============================================ */
.blog-vet-bio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.blog-vet-bio__icon-wrap {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(205, 29, 43, 0.12);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  color: var(--color-accent);
}

.blog-vet-bio__icon {
  width: 26px;
  height: 26px;
}

.blog-vet-bio__name {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 2px;
}

.blog-vet-bio__role {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-brand-primary);
  margin: 0 0 2px;
}

.blog-vet-bio__charge {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

/* ============================================
   SEÇÃO: TABLA VACUNAS — responsive table
============================================ */
.blog-vacunas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}

.blog-vacunas-table caption {
  caption-side: top;
}

.blog-vacunas-table thead {
  background-color: var(--color-bg-secondary);
}

.blog-vacunas-table th,
.blog-vacunas-table td {
  border: 1px solid var(--color-border);
  padding: var(--space-md);
  text-align: left;
  vertical-align: top;
}

.blog-vacunas-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
}

.blog-vacunas-table td {
  color: var(--color-text-secondary);
}

.blog-vacunas-table tbody tr:nth-child(even) {
  background-color: rgba(248, 245, 239, 0.5);
}

.blog-vacuna-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
}

.blog-vacuna-badge--obligatoria {
  background-color: rgba(185, 28, 28, 0.09);
  color: #B91C1C;
  border: 1px solid rgba(185, 28, 28, 0.25);
}

.blog-vacuna-badge--recomendada {
  background-color: rgba(2, 38, 161, 0.09);
  color: var(--color-brand-primary);
  border: 1px solid rgba(2, 38, 161, 0.2);
}

/* ============================================
   SEÇÃO: CTA-FINAL — decoração ícone
============================================ */
.cta-final__icon-deco {
  display: block;
  margin: 0 auto var(--space-lg);
}

.cta-final__small {
  font-size: var(--text-caption);
  color: var(--color-text-on-dark);
  opacity: 0.7;
  margin-top: var(--space-lg);
}

/* ============================================
   BREAKPOINTS — blog-consulta-veterinaria-gatos
============================================ */

/* sm — 480px */
@media (min-width: 480px) {
  .blog-cta-inline__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* md — 768px */
@media (min-width: 768px) {
  .blog-pasos-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-hero-article {
    padding-block: var(--space-3xl);
  }
}

/* lg — 1024px */
@media (min-width: 1024px) {
  /* Hero 2 columnas 70/30 */
  .blog-hero-article__grid {
    grid-template-columns: 1.8fr 1fr;
  }

  /* Imagen desktop visible */
  .blog-hero-article__media--desktop-only {
    display: block;
  }

  /* Imagen mobile oculta */
  .blog-hero-mobile-img {
    display: none;
  }

  /* Layout sidebar + prosa */
  .blog-layout {
    grid-template-columns: 1fr 280px;
    column-gap: var(--space-2xl);
  }

  /* Sidebar sticky */
  .blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    position: sticky;
    top: 88px; /* header 72px + 16px margen */
    align-self: start;
    order: 2; /* aparece a la derecha */
  }

  .blog-article-main {
    order: 1;
  }

  /* TOC mobile oculto en desktop */
  .blog-toc-mobile {
    display: none;
  }

  /* Sidebar cards */
  .blog-sidebar__toc {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
  }

  .blog-sidebar__toc-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
  }

  .blog-sidebar__toc-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .blog-sidebar__toc-link {
    font-size: var(--text-body-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    line-height: 1.4;
    transition: color var(--transition-fast);
  }

  .blog-sidebar__toc-link:hover {
    color: var(--color-brand-primary);
    text-decoration: underline;
  }

  /* Sidebar CTA card */
  .blog-sidebar__cta {
    background-color: var(--color-brand-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .blog-sidebar__cta-title {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-text-on-dark);
    margin: 0;
  }

  .blog-sidebar__cta-meta {
    font-size: var(--text-caption);
    color: var(--color-text-on-dark);
    opacity: 0.85;
    margin: 0;
  }
}
/* /BLOCO ADICIONADO POR A07 — blog-consulta-veterinaria-gatos */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /blog/cuidados-perro-senior (blog-cuidados-perro-senior.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   Reutiliza .blog-cta-inline / .faq / .blog-article-main /
   .btn / .badge / .card-link já definidos acima.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO-ARTICULO — layout texto + imagem (blog senior)
============================================ */
.blog-article-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.blog-article-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.blog-article-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
}

.blog-article-hero__meta {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.blog-article-hero__intro {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.65;
  max-width: 640px;
  margin: 0;
}

.blog-article-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ============================================
   SEÇÃO: CTA-INLINE-TOP (sobre fundo secondary)
   Reutiliza .blog-cta-inline mas com border-left accent.
============================================ */
/* Override do .blog-cta-inline para esta página: border-left brand */
.blog-cta-inline {
  border-left: 4px solid var(--color-brand-primary);
}

.blog-cta-inline__text {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin: 0;
}

.blog-cta-inline__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

/* ============================================
   SEÇÃO: CONTENIDO-ARTICULO — layout 2 colunas (article + sidebar)
   Desktop: 68% artigo + 28% sidebar. Mobile: 1 coluna.
============================================ */
.blog-article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Estilos prosa do artigo senior */
.blog-article-main h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  line-height: 1.25;
}

.blog-article-main h2:first-child {
  margin-top: 0;
}

.blog-article-main p {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-md);
}

/* ============================================
   SEÇÃO: TABLA SENIOR — edad según tamaño
============================================ */
.blog-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
}

.blog-table thead {
  background-color: var(--color-bg-secondary);
}

.blog-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 2px solid var(--color-border);
}

.blog-table td {
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

.blog-table tbody tr:last-child td {
  border-bottom: 0;
}

.blog-table tbody tr:nth-child(even) {
  background-color: var(--color-bg-secondary);
}

/* ============================================
   SEÇÃO: SENALES-GRID — grid de tarjetas de señal de alerta
   Layout: 1 col mobile / 2 col desktop
============================================ */
.senales-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.senal-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.senal-card__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: rgba(2, 38, 161, 0.10);
  color: var(--color-brand-primary);
  flex-shrink: 0;
}

.senal-card__icon .icon {
  width: 22px;
  height: 22px;
}

.senal-card__body h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm);
}

.senal-card__body p {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* ============================================
   SEÇÃO: CALLOUT — blocos destaque (verde escuro e accent)
============================================ */
.blog-callout {
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-block: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Callout escuro (Dr. Lean) */
.blog-callout--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.blog-callout--dark .blog-callout__text {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark);
  margin: 0;
  line-height: 1.55;
}

/* Callout acento (membresía) */
.blog-callout--accent {
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-accent);
}

.blog-callout--accent h3 {
  font-size: var(--text-h3);
  color: var(--color-brand-primary);
  margin: 0;
}

.blog-callout--accent p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   SEÇÃO: SIDEBAR — cards laterais (sticky desktop)
============================================ */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.blog-sidebar__card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Card com fundo de CTA (destaque verde) */
.blog-sidebar__card--cta {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.blog-sidebar__cta-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-on-dark);
  margin: 0;
}

.blog-sidebar__cta-text {
  font-size: 15px;
  color: var(--color-text-on-dark);
  opacity: 0.9;
  margin: 0;
}

/* Card Dr. Lean */
.blog-sidebar__dr {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.blog-sidebar__dr-photo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.blog-sidebar__dr-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.blog-sidebar__dr-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.blog-sidebar__dr-title {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

/* Card precio */
.blog-sidebar__price-label {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.blog-sidebar__price-value {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-brand-primary);
  margin: 0;
}

/* Separador sidebar */
.blog-sidebar__divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* Artículos relacionados (sidebar) */
.blog-sidebar__related-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm);
}

.blog-sidebar__related-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-sidebar__related-list a {
  font-size: var(--text-body-sm);
  color: var(--color-brand-primary);
  text-decoration: none;
  line-height: 1.4;
}

.blog-sidebar__related-list a:hover {
  text-decoration: underline;
}

/* ============================================
   SEÇÃO: CTA-FINAL — dirección + horarios (texto pequeño)
============================================ */
.cta-final__direccion {
  font-size: var(--text-body-sm);
  color: var(--color-text-on-dark);
  opacity: 0.75;
  margin-top: var(--space-xl);
  display: block;
}

/* ============================================
   BREAKPOINTS — blog-cuidados-perro-senior (min-width)
============================================ */
@media (min-width: 480px) {
  .blog-cta-inline__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .blog-article-hero__grid {
    grid-template-columns: 60% 40%;
    gap: var(--space-2xl);
  }

  .senales-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-callout {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .blog-callout--accent {
    flex-direction: column;
  }

  .blog-callout--dark .blog-callout__text {
    max-width: 60ch;
  }
}

@media (min-width: 1024px) {
  .blog-article-layout {
    grid-template-columns: 1fr 320px;
    gap: var(--space-3xl);
  }

  .blog-sidebar {
    position: sticky;
    top: 88px; /* 72px header + 16px gap */
  }

  .blog-article-hero__grid {
    grid-template-columns: 60% 40%;
  }
}
/* /BLOCO ADICIONADO POR A07 — blog-cuidados-perro-senior */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /blog/nutricion-obesidad-mascotas (blog-nutricion-obesidad-mascotas.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO-ARTICULO — banner do artigo de blog
============================================ */
.hero-articulo {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-bg-dark);
  padding-bottom: var(--space-2xl);
}

.hero-articulo__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-articulo__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(5, 16, 58, 0.45);
  z-index: 2;
}

.hero-articulo .container {
  position: relative;
  z-index: 3;
  padding-top: var(--space-3xl);
}

.hero-articulo__content {
  max-width: 760px;
}

.hero-articulo__title {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-on-dark);
  margin: var(--space-md) 0 var(--space-sm);
}

.hero-articulo__meta {
  font-size: var(--text-body-sm);
  color: var(--color-text-on-dark);
  opacity: 0.85;
  margin-bottom: var(--space-md);
}

.hero-articulo__intro {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark);
  opacity: 0.92;
  max-width: 66ch;
  margin-bottom: 0;
}

/* ============================================
   SEÇÃO: CTA-INLINE-TOP — above the fold CTA
============================================ */
.cta-inline-top {
  background-color: var(--color-bg-secondary);
  padding-block: var(--space-lg);
}

.cta-inline-top__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.cta-inline-top__icon {
  color: var(--color-brand-primary);
  display: inline-flex;
}

.cta-inline-top__lead {
  font-size: var(--text-body-lg);
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}

.cta-inline-top__support {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   SEÇÃO: CONTENIDO-ARTICULO — layout 2 col
============================================ */
.contenido-articulo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

/* ============================================
   SEÇÃO: ARTICULO-BODY — conteúdo editorial
============================================ */
.articulo-body h2 {
  font-size: var(--text-h2);
  color: var(--color-brand-primary);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.articulo-body h3 {
  font-size: var(--text-h3);
  color: var(--color-text-primary);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.articulo-body p {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

.articulo-list {
  list-style: disc;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.articulo-list li {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}

/* Lista con check brand-primary */
.articulo-list--check {
  list-style: none;
  padding-left: 0;
}

.articulo-list--check li {
  padding-left: 1.8em;
  position: relative;
}

.articulo-list--check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230226A1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Lista de alimentos proibidos (sin bullet especial, disc rojo suave) */
.articulo-list--danger {
  list-style: disc;
}

.articulo-list--danger li::marker {
  color: var(--color-error);
}

/* Nota de rodapé artigo */
.articulo-note {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: var(--space-sm);
}

/* Tabela BCS */
.articulo-bcs-table {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-block: var(--space-lg);
}

.bcs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}

.bcs-table th {
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-dark);
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-heading);
  font-weight: 600;
}

.bcs-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  vertical-align: top;
}

.bcs-table tr:last-child td {
  border-bottom: none;
}

.bcs-table .articulo-note {
  padding: var(--space-sm) var(--space-md);
}

/* Callout veterinario */
.articulo-callout {
  display: flex;
  gap: var(--space-md);
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-block: var(--space-lg);
}

.articulo-callout__icon {
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 2px;
}

.articulo-callout__body p {
  font-size: var(--text-body);
  margin-bottom: var(--space-sm);
}

.articulo-callout__body p:last-child {
  margin-bottom: 0;
}

.articulo-callout__label {
  color: var(--color-text-primary) !important;
}

/* Grid alimentos prohibidos */
.articulo-alimentos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-block: var(--space-md);
}

.articulo-alimentos-col h3 {
  font-size: var(--text-h4);
  margin-top: 0;
  color: var(--color-brand-primary);
}

/* CTA inline dentro del artículo */
.articulo-cta-inline {
  margin-block: var(--space-2xl);
  display: flex;
  justify-content: center;
}

/* ============================================
   SEÇÃO: SIDEBAR-ARTICULO — sticky desktop
============================================ */
.sidebar-articulo {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.sidebar-card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.sidebar-card--cta {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sidebar-cta__headline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h4);
  color: var(--color-text-on-dark);
  margin: 0;
}

.sidebar-cta__precio {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-on-dark);
  margin: 0;
}

.sidebar-cta__link {
  border-color: var(--color-text-on-dark) !important;
  color: var(--color-text-on-dark) !important;
}

.sidebar-cta__link:hover {
  background-color: var(--color-text-on-dark) !important;
  color: var(--color-brand-secondary) !important;
}

.sidebar-autor {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.sidebar-autor__foto {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar-autor__nombre {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}

.sidebar-autor__titulo {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

.sidebar-related__title {
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md);
}

.sidebar-related__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sidebar-related__list a {
  font-size: var(--text-body-sm);
  color: var(--color-brand-primary);
}

.sidebar-related__list a:hover {
  text-decoration: underline;
}

/* ============================================
   SEÇÃO: CTA-FINAL-ARTICULO — banner final
============================================ */
.cta-final-articulo {
  background-color: var(--color-brand-primary);
  padding-block: var(--space-2xl);
}

.cta-final-articulo__inner {
  text-align: center;
}

.cta-final-articulo__title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-md);
}

.cta-final-articulo__text {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark);
  opacity: 0.9;
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--space-md);
}

.cta-final-articulo__precio {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
}

.cta-final-articulo__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.cta-final-articulo__tagline {
  font-size: var(--text-caption);
  color: var(--color-text-on-dark);
  opacity: 0.7;
  margin: 0;
  line-height: 1.6;
}

/* Sidebar hidden mobile — CTA-FINAL-ARTICULO siempre visible */
.sidebar-articulo {
  display: none;
}

/* card del tercer artículo relacionado: oculto en mobile 2-col */
.blog-card--desktop-only {
  display: none;
}

/* ============================================
   BREAKPOINTS — blog-nutricion-obesidad (min-width)
============================================ */

/* sm — 480px */
@media (min-width: 480px) {
  .cta-final-articulo__group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* md — 768px */
@media (min-width: 768px) {
  .hero-articulo {
    min-height: 420px;
    align-items: center;
  }

  .articulo-alimentos-grid {
    grid-template-columns: 1fr 1fr;
  }

  .blog-card--desktop-only {
    display: flex;
  }
}

/* lg — 1024px */
@media (min-width: 1024px) {
  .contenido-articulo__grid {
    grid-template-columns: 1fr 300px;
    gap: var(--space-3xl);
    align-items: start;
  }

  .sidebar-articulo {
    display: flex;
    position: sticky;
    top: 88px;
  }

  /* En desktop el sidebar reemplaza visualmente el CTA-FINAL-ARTICULO
     — mantenemos el bloque visible siempre para SEO y mobile */
}
/* /BLOCO ADICIONADO POR A07 — blog-nutricion-obesidad-mascotas */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /providencia/veterinaria (providencia-veterinaria.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   Reutiliza tudo já definido para a veterinaria; adiciona apenas a
   barra fixa inferior (mobile sticky bottom bar ≤767px).
   ================================================================ */

/* ============================================
   SEÇÃO: AGENDAMENTO-VET — caption sob o iframe (branco, muted)
============================================ */
.reservo-caption {
  margin-top: var(--space-lg);
  text-align: center;
  font-size: var(--text-caption);
  color: var(--color-text-on-dark);
  opacity: 0.65;
}

/* ============================================
   SEÇÃO: MOBILE-STICKY-BAR — barra de ações rápidas (≤767px)
============================================ */
.mobile-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  display: flex;
  background-color: var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 12px rgba(20, 22, 31, 0.08);
}

.mobile-action-bar__btn {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 56px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body-sm);
  text-decoration: none;
}

.mobile-action-bar__btn .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mobile-action-bar__btn--wa {
  background-color: var(--color-whatsapp);
  color: var(--color-text-on-dark);
}

.mobile-action-bar__btn--agendar {
  background-color: var(--color-bg-primary);
  color: var(--color-brand-primary);
}

/* Em ≤767px a barra fixa some o botão flutuante para não sobrepor */
@media (max-width: 767px) {
  .mobile-action-bar ~ .whatsapp-float,
  body:has(.mobile-action-bar) .whatsapp-float {
    bottom: 72px;
  }
}

/* A partir de 768px a barra de ações some (CTA já visível na página) */
@media (min-width: 768px) {
  .mobile-action-bar {
    display: none;
  }
}
/* /BLOCO ADICIONADO POR A07 — veterinaria sticky bar */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Complementos da página /membresia
   (membresia.html). Acrescentado ao FINAL sem alterar o existente,
   conforme override do projeto. Mobile-first, só tokens semânticos.
   Cobre componentes que NÃO existiam no bloco /membresia anterior:
   tabela comparativa (S05), inputs sobre fundo escuro + 2 colunas na
   captación (S06), divisor "o por WhatsApp" e link de texto no CTA
   final sobre fundo escuro. Reutiliza .email-capture / .badge / .btn.
   ================================================================ */

/* ============================================
   SEÇÃO: COMPARATIVA-MEMBRESIA — tabela semântica responsiva
   Mobile: stack vertical (cada td vira linha com rótulo data-label).
   Tablet+: 2 colunas reais com cabeçalhos diferenciados.
============================================ */
.compare-wrap {
  max-width: 820px;
  margin-inline: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.compare-table__head {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: 600;
  text-align: left;
  padding: var(--space-md) var(--space-lg);
}

.compare-table__head--plain {
  background-color: var(--color-bg-primary);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.compare-table__head--brand {
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-dark);
  border: 1px solid var(--color-brand-primary);
}

.compare-table__cell {
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  vertical-align: top;
}

.compare-table__cell--yes {
  color: var(--color-text-primary);
  font-weight: 500;
}

.compare-table__check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: -3px;
  margin-right: var(--space-xs);
  color: var(--color-success);
}

.compare-caption {
  margin-top: var(--space-lg);
  margin-bottom: 0;
  text-align: center;
  font-style: italic;
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

/* Mobile-first: empilha colunas, mostra rótulo via data-label */
@media (max-width: 639px) {
  .compare-table,
  .compare-table thead,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td {
    display: block;
    width: 100%;
  }
  .compare-table thead {
    position: absolute;
    left: -9999px;
  }
  .compare-table tr {
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .compare-table__cell::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
  }
  .compare-table__cell--yes::before {
    color: var(--color-brand-primary);
  }
}

/* ============================================
   SEÇÃO: CAPTACION-MEMBRESIA — inputs on-dark, 2 colunas, divisor, WA
   .email-capture já existe no bloco anterior; aqui só os complementos.
============================================ */
.email-capture__row--two {
  grid-template-columns: 1fr;
}

.form__label--on-dark {
  color: var(--color-text-on-dark);
  opacity: 0.92;
}

.form__input--on-dark {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--color-text-on-dark);
}

.form__input--on-dark::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.form__input--on-dark:focus {
  border-color: var(--color-text-on-dark);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

/* Divisor "o directamente por WhatsApp" sobre fundo escuro */
.email-capture__divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 560px;
  margin: var(--space-xl) auto var(--space-lg);
  color: var(--color-text-on-dark);
  opacity: 0.7;
  font-size: var(--text-body-sm);
}

.email-capture__divider::before,
.email-capture__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.25);
}

/* Botão WhatsApp da captación — mais proeminente que o form (override) */
.email-capture__wa {
  margin-inline: auto;
}

/* Link de texto branco no CTA final (não botão) */
.cta-final__link {
  color: var(--color-text-on-dark);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cta-final__link:hover {
  color: var(--color-text-on-dark);
  opacity: 0.85;
}

@media (min-width: 640px) {
  .compare-table__head,
  .compare-table__cell {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .email-capture__row--two {
    grid-template-columns: 1fr 1fr;
  }
}
/* /BLOCO ADICIONADO POR A07 — complementos /membresia */


/* ============================================================
   BLOCO ADICIONADO POR A07 — Página Certificado de Viaje (SAG)
   (providencia-certificado-viaje.html)
   Apenas classes específicas desta página. NÃO altera o existente.
   Usa exclusivamente variáveis semânticas de design.
   ============================================================ */

/* Container estreito (legibilidade de blocos de texto / FAQ / agendar) */
.container--narrow {
  max-width: 860px;
}

/* --- BREADCRUMB --- */
.breadcrumb {
  background-color: var(--color-bg-secondary);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}
.breadcrumb__item { display: flex; align-items: center; }
.breadcrumb__item + .breadcrumb__item::before {
  content: "›";
  margin: 0 var(--space-xs);
  color: var(--color-text-muted);
}
.breadcrumb__item a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--color-brand-primary); text-decoration: underline; }
.breadcrumb__item[aria-current="page"] { color: var(--color-text-primary); font-weight: 600; }

/* --- HERO variante certificado (reaproveita .hero base) --- */
.hero--cert { min-height: 78vh; }
@media (min-width: 1024px) {
  .hero--cert { min-height: 70vh; max-height: 800px; }
}

/* --- QUE-ES-SAG (prose + nota especies) --- */
.prose > p {
  font-size: var(--text-body-lg);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
}
.prose > p:last-child { margin-bottom: 0; }
.especies-nota {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}
.especies-nota svg { width: 20px; height: 20px; color: var(--color-brand-primary); flex-shrink: 0; }

/* --- PROCESO PASO A PASO --- */
.process-steps {
  list-style: none;
  margin: 0 0 var(--space-2xl);
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 768px)  { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process-steps { grid-template-columns: repeat(4, 1fr); } }
.step-card {
  position: relative;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.step-card__num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: 1;
  color: var(--color-accent);
}
.step-card__icon {
  display: inline-flex;
  margin: var(--space-sm) 0;
  color: var(--color-brand-primary);
}
.step-card__icon svg { width: 36px; height: 36px; }
.step-card__title {
  font-size: var(--text-h4);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}
.step-card__text {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

/* --- REQUISITOS (checklist + alerta) --- */
.requisitos__grid {
  display: grid;
  gap: var(--space-xl);
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .requisitos__grid { grid-template-columns: 55% 45%; align-items: start; }
}
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-body);
  color: var(--color-text-primary);
}
.checklist__check {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
  margin-top: 2px;
}
.checklist__hint {
  display: block;
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--color-text-muted);
}
.requisitos__aside { display: grid; gap: var(--space-lg); }
.alert-info {
  display: flex;
  gap: var(--space-sm);
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.alert-info__icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--color-accent); }
.alert-info p { margin: 0; font-size: var(--text-body-sm); color: var(--color-text-secondary); line-height: 1.6; }

/* --- VETERINARIO CREDENCIALES --- */
.vet-cred__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 768px) { .vet-cred__grid { grid-template-columns: 40% 60%; } }
.vet-cred__photo {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}
.vet-cred__text .badge { margin-bottom: var(--space-sm); }
.vet-cred__name {
  font-size: var(--text-h3);
  color: var(--color-brand-primary);
  margin: var(--space-md) 0 var(--space-xs);
}
.vet-cred__role {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}
.vet-cred__desc {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0;
}

/* --- PRECIO CTA (sobre fundo escuro) --- */
.precio-cta__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 1024px) {
  .precio-cta__grid { grid-template-columns: 60% 40%; }
}
.precio-cta__price {
  font-size: var(--text-h1);
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
  line-height: 1.1;
}
.precio-cta__desc {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark);
  opacity: 0.92;
  line-height: 1.6;
  margin: 0;
}
.precio-cta__action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.precio-cta__claim {
  font-size: var(--text-body-sm);
  color: var(--color-text-on-dark);
  opacity: 0.75;
  margin: 0;
}
@media (max-width: 1023px) {
  .precio-cta__action .btn { width: 100%; }
}

/* --- AGENDAR (Reservo) --- */
.reservo-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}
.reservo-label svg { width: 18px; height: 18px; flex-shrink: 0; }
.reservo-frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-card);
}
.reservo-frame iframe {
  display: block;
  width: 100%;
  height: 600px;
  border: 0;
}
@media (min-width: 768px)  { .reservo-frame iframe { height: 650px; } }
@media (min-width: 1024px) { .reservo-frame iframe { height: 700px; } }

/* --- VINCULO ARTICULO BLOG --- */
.blog-link-card {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  background-color: var(--color-bg-card);
  transition: box-shadow .2s ease, transform .2s ease;
}
.blog-link-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.blog-link-card__icon { color: var(--color-accent); flex-shrink: 0; }
.blog-link-card__icon svg { width: 36px; height: 36px; }
.blog-link-card__label {
  display: block;
  font-size: var(--text-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}
.blog-link-card__title {
  font-size: var(--text-h4);
  color: var(--color-text-primary);
  margin: var(--space-xs) 0;
}
.blog-link-card__desc {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-sm);
}

/* --- CROSS-SELL SERVICIOS --- */
.cross-sell__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) { .cross-sell__grid { grid-template-columns: repeat(3, 1fr); } }
.cross-sell-card {
  display: block;
  text-decoration: none;
  text-align: center;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.cross-sell-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cross-sell-card__icon { display: inline-flex; color: var(--color-accent); margin-bottom: var(--space-sm); }
.cross-sell-card__icon svg { width: 48px; height: 48px; }
.cross-sell-card__title { font-size: var(--text-h4); color: var(--color-text-primary); margin: 0 0 var(--space-xs); }
.cross-sell-card__text { font-size: var(--text-body-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-sm); }
/* /BLOCO ADICIONADO POR A07 — Página Certificado de Viaje (SAG) */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos da página
   /productos (productos.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa apenas tokens semânticos do :root.
   2026-06-04
   ================================================================ */

/* ============================================
   SEÇÃO: PRODUCTOS-HERO — hero 2 colunas (desktop)
   Mobile: texto em cima, imagem embaixo.
   Desktop (1024px+): 50/50 lado a lado.
============================================ */
.productos-hero {
  background-color: var(--color-brand-secondary);
  padding-block: var(--space-2xl);
  overflow: hidden;
}

.productos-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.productos-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.productos-hero__text .badge {
  background-color: rgba(205, 29, 43, 0.18);
  border-color: var(--color-accent);
  color: var(--color-text-on-dark);
}

.productos-hero__text .hero__title {
  color: var(--color-text-on-dark);
  margin: 0;
}

.productos-hero__text .hero__subtitle {
  margin-bottom: 0;
}

.productos-hero__caption {
  font-size: var(--text-caption);
  color: var(--color-text-on-dark);
  opacity: 0.7;
  margin: 0;
}

.productos-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.productos-hero__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) {
  .productos-hero {
    padding-block: var(--space-3xl);
  }

  .productos-hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

/* ============================================
   SEÇÃO: CATEGORIA-CARD — cada bloco de categoria
   Mobile: imagem em cima, texto embaixo (coluna).
   Desktop (1024px+): 2 colunas 50/50 (imagem + texto).
   .categoria-card--reverse inverte a ordem das colunas no desktop.
============================================ */
.categoria-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.categoria-card__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.categoria-card__media:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.categoria-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.categoria-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.categoria-card__title {
  font-size: var(--text-h2);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text-primary);
}

.categoria-card__desc {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Lista de produtos por categoria */
.categoria-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0;
  margin: 0;
  list-style: none;
}

.categoria-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-body);
  color: var(--color-text-primary);
}

.categoria-card__item-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 3px;
}

/* Nota legal (salud — requerimiento Google Ads §11) */
.categoria-card__legal-note {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}

@media (min-width: 1024px) {
  .categoria-card {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }

  /* Inverte coluna: texto à esquerda, imagem à direita */
  .categoria-card--reverse {
    direction: rtl;
  }

  .categoria-card--reverse > * {
    direction: ltr;
  }
}

/* ============================================
   SEÇÃO: SELLO-VET — sello veterinario
   Mobile: centrado em coluna.
   Desktop (768px+): 2 colunas 35/65 (foto + texto).
============================================ */
.sello-vet__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  text-align: center;
}

.sello-vet__photo {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 4px solid var(--color-accent);
  box-shadow: 0 0 0 4px rgba(205, 29, 43, 0.18), var(--shadow-md);
  margin-inline: auto;
  display: block;
}

.sello-vet__text-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .sello-vet__grid {
    grid-template-columns: 200px 1fr;
    gap: var(--space-2xl);
    text-align: left;
  }

  .sello-vet__photo {
    width: 160px;
    height: 160px;
    margin-inline: 0;
  }

  .sello-vet__photo-col {
    display: flex;
    justify-content: center;
  }
}

/* ============================================
   SEÇÃO: ECOMMERCE-BANNER — banner Fase 2
   Classe js-ecommerce-banner para toggle futuro.
============================================ */
.ecommerce-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space-xl);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.ecommerce-banner__icon {
  width: 40px;
  height: 40px;
  color: var(--color-accent);
}

.ecommerce-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.ecommerce-banner__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   SEÇÃO: CTA-FINAL-PRODUCTOS
   Reutiliza .cta-final global com BG brand-primary.
============================================ */
.productos-cta-final {
  background-color: var(--color-brand-primary);
  padding-block: var(--space-3xl);
}

/* ============================================
   SEÇÃO: BLOG — componentes exclusivos de blog.html
   Adicionado por A07. Não alterar o existente acima.
   data-edit: blog-h1, blog-descripcion, articulo-destacado-titulo,
              card1-titulo...card6-titulo, banner-cta-titulo, banner-cta-subtexto
============================================ */

/* HERO-BLOG */
.blog-hero {
  padding-block: var(--space-4xl);
}

.blog-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.blog-hero__title {
  font-size: var(--text-h1);
  font-weight: 700;
  color: var(--color-text-on-dark);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.blog-hero__lead {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark);
  opacity: 0.92;
  margin-bottom: var(--space-xl);
  max-width: 56ch;
}

.blog-hero__media {
  display: none; /* visible en desktop via media query */
}

.blog-hero__media img {
  border-radius: var(--radius-xl);
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Breadcrumb */
.blog-breadcrumb {
  margin-bottom: var(--space-lg);
}

.blog-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-breadcrumb__link {
  font-size: var(--text-caption);
  color: var(--color-text-on-dark);
  opacity: 0.70;
  text-decoration: none;
}

.blog-breadcrumb__link:hover {
  opacity: 1;
  text-decoration: underline;
}

.blog-breadcrumb__sep {
  font-size: var(--text-caption);
  color: var(--color-text-on-dark);
  opacity: 0.50;
}

.blog-breadcrumb__current {
  font-size: var(--text-caption);
  color: var(--color-text-on-dark);
  font-weight: 500;
}

/* CATEGORIAS — filtros píldora */
.blog-categorias {
  padding-block: var(--space-lg);
}

.blog-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.blog-filtro-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.blog-filtro-btn:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}

.blog-filtro-btn--activo {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-on-dark);
}

.blog-filtro-btn--activo:hover {
  background-color: var(--color-brand-secondary);
  border-color: var(--color-brand-secondary);
  color: var(--color-text-on-dark);
}

/* ARTÍCULO DESTACADO */
.blog-destacado__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.blog-destacado__imagen img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.blog-destacado__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.badge--destacado {
  background-color: rgba(2, 38, 161, 0.10);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}

.blog-destacado__titulo {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
}

.blog-destacado__excerpt {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-md);
}

/* Meta — fecha + ícono */
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.blog-card__meta time {
  font-size: var(--text-caption);
}

/* GRID ARTÍCULOS */
.blog-grid {
  padding-block: var(--space-2xl);
}

.blog-grid .section__title {
  margin-bottom: var(--space-xl);
}

.blog-grid__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.blog-grid__empty {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--color-text-muted);
  font-size: var(--text-body);
}

/* CARD ARTÍCULO */
.card-articulo {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  display: flex;
  flex-direction: column;
}

.card-articulo:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.card-articulo__imagen-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.card-articulo__imagen-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.card-articulo:hover .card-articulo__imagen-link img {
  transform: scale(1.04);
}

.card-articulo__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-sm);
}

.card-articulo__titulo {
  font-size: clamp(18px, 2.2vw, 20px);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.35;
  margin: 0;
}

.card-articulo__titulo a {
  color: inherit;
  text-decoration: none;
}

.card-articulo__titulo a:hover {
  color: var(--color-brand-primary);
  text-decoration: underline;
}

.card-articulo__excerpt {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  flex: 1;
}

.card-articulo__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
  gap: var(--space-md);
}

.card-articulo__footer .blog-card__meta {
  margin-bottom: 0;
}

/* BANNER CTA MID */
.blog-cta-mid__inner {
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.blog-cta-mid__inner .section__title {
  margin-bottom: 0;
}

.blog-cta-mid__inner .section__intro {
  margin-bottom: 0;
}

.blog-cta-mid__nota {
  font-size: var(--text-body-sm);
  color: var(--color-text-on-dark);
  opacity: 0.75;
  margin: 0;
}

.blog-cta-mid__nota-link {
  color: var(--color-text-on-dark);
  text-decoration: underline;
  opacity: 1;
}

.blog-cta-mid__nota-link:hover {
  opacity: 0.85;
}

/* SERVICIOS RELACIONADOS */
.blog-servicios__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.blog-servicio-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.blog-servicio-card__icon {
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-xs);
}

.blog-servicio-card__titulo {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.blog-servicio-card__texto {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
}

/* NEWSLETTER */
.blog-newsletter__inner {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.blog-newsletter__titulo {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.blog-newsletter__subtexto {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin: 0;
}

.blog-newsletter__form {
  width: 100%;
}

.blog-newsletter__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.blog-newsletter__input {
  font-family: var(--font-body);
  font-size: var(--text-body);
  padding: 12px var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  width: 100%;
  transition: border-color var(--transition-fast);
}

.blog-newsletter__input:focus {
  border-color: var(--color-border-focus);
  outline: 3px solid rgba(2, 38, 161, 0.18);
  outline-offset: 0;
}

.blog-newsletter__btn {
  width: 100%;
}

.blog-newsletter__legal {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: var(--space-sm) 0 0;
  text-align: center;
}

/* nav active state */
.main-nav__link--active {
  color: var(--color-brand-primary);
  font-weight: 600;
}

.mobile-drawer__link--active {
  color: var(--color-brand-primary);
  font-weight: 600;
}

/* ============================================
   SEÇÃO: BLOG — MEDIA QUERIES
============================================ */

@media (min-width: 768px) {
  .blog-grid__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-newsletter__fields {
    flex-direction: row;
  }

  .blog-newsletter__btn {
    width: auto;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .blog-newsletter__input {
    flex: 1;
  }

  .blog-servicios__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-hero__inner {
    grid-template-columns: 60fr 40fr;
    gap: var(--space-3xl);
  }

  .blog-hero__media {
    display: block;
  }

  .blog-destacado__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }

  .blog-grid__cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .blog-servicios__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* /SEÇÃO: BLOG */

/* /BLOCO ADICIONADO POR A07 — Página Productos (/productos) */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos do blog artigo
   /blog/ley-cholito-microchip (blog-ley-cholito-microchip.html).
   Layout artigo 2 colunas desktop (editorial ~70% + sidebar ~30%).
   Mobile-first. Usa apenas tokens semânticos do :root.
   Acrescentado ao FINAL sem alterar o existente.
   data-edit="blog-articulo-styles-block" — 2026-06-04
   ================================================================ */

/* ============================================
   SEÇÃO: BREADCRUMB-BLOG
============================================ */
.blog-breadcrumb-wrap {
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-sm);
}

.blog-breadcrumb {
  display: flex;
  align-items: center;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.breadcrumb__item a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__item a:hover {
  color: var(--color-brand-primary);
  text-decoration: underline;
}

.breadcrumb__item--sep {
  color: var(--color-text-muted);
  padding-inline: 2px;
  user-select: none;
}

.breadcrumb__item--current {
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* ============================================
   SEÇÃO: HERO-ARTICULO
   Imagen full-width com overlay escuro.
   Desktop: 1200×480px / Mobile: 800×400px
============================================ */
.blog-hero {
  position: relative;
  background-color: var(--color-bg-dark);
  overflow: hidden;
}

.blog-hero__img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.55;
}

.blog-hero .container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-2xl);
}

.blog-hero__content {
  max-width: 780px;
}

.blog-hero__title {
  font-size: clamp(24px, 4vw, 40px);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-on-dark);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.blog-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  color: rgba(255, 255, 255, 0.80);
  font-size: var(--text-caption);
  margin-bottom: var(--space-md);
}

.blog-meta__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.blog-meta__item .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.blog-hero__lead {
  font-size: var(--text-body-lg);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.65;
  margin-bottom: 0;
  max-width: 680px;
}

@media (min-width: 768px) {
  .blog-hero__img {
    height: 400px;
  }
}

@media (min-width: 1024px) {
  .blog-hero__img {
    height: 480px;
  }
}

/* ============================================
   SEÇÃO: BLOG-LAYOUT — 2 colunas (≥1024px)
============================================ */
.blog-layout {
  padding-block: var(--space-2xl);
  background-color: var(--color-bg-primary);
}

.blog-layout__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 1024px) {
  .blog-layout__inner {
    grid-template-columns: 1fr 340px;
    gap: var(--space-3xl);
  }
}

/* ============================================
   SEÇÃO: BLOG-PROSE — tipografía do artigo
============================================ */
.blog-prose {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-text-primary);
}

.blog-prose h2 {
  font-size: var(--text-h3);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.blog-prose h2:first-child {
  margin-top: 0;
}

.blog-prose h3 {
  font-size: var(--text-body-lg);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.blog-prose p {
  margin-bottom: var(--space-md);
  color: var(--color-text-secondary);
}

.blog-prose strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.blog-prose a {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-prose a:hover {
  color: var(--color-brand-secondary);
}

/* ============================================
   SEÇÃO: BLOG-LIST — listas ul/ol do artigo
============================================ */
.blog-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.blog-list li {
  display: flex;
  gap: var(--space-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.blog-list li::before {
  content: "\2022";
  color: var(--color-accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.blog-list--ol {
  counter-reset: blog-ol;
}

.blog-list--ol li {
  counter-increment: blog-ol;
}

.blog-list--ol li::before {
  content: counter(blog-ol) ".";
  color: var(--color-brand-primary);
  font-weight: 700;
  min-width: 20px;
}

/* ============================================
   SEÇÃO: CTA-INLINE — blocos CTA no artigo
============================================ */
.blog-cta-inline {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.blog-cta-inline--tope {
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-accent);
}

.blog-cta-inline--mid {
  background-color: transparent;
  padding: 0;
  margin-block: var(--space-xl);
}

.blog-cta-inline__text {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.blog-cta-inline__price {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--color-brand-primary);
  margin-bottom: var(--space-md);
}

.blog-cta-inline__btns {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (min-width: 480px) {
  .blog-cta-inline__btns {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ============================================
   SEÇÃO: BLOG-FAQ — accordion <details>/<summary>
   Nativo sem JS externo, accesible.
============================================ */
.blog-faq {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  margin-block: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.blog-faq__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

.blog-faq__item[open] {
  border-color: var(--color-brand-primary);
}

.blog-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  list-style: none;
  user-select: none;
  transition: background-color var(--transition-fast);
}

.blog-faq__question:hover {
  background-color: var(--color-bg-secondary);
}

.blog-faq__question::-webkit-details-marker {
  display: none;
}

.blog-faq__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
  transition: transform var(--transition-base);
}

.blog-faq__item[open] .blog-faq__icon {
  transform: rotate(180deg);
}

.blog-faq__answer {
  padding: 0 var(--space-lg) var(--space-md);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.blog-faq__answer p {
  margin: 0;
}

/* ============================================
   SEÇÃO: SIDEBAR-DESKTOP — sticky coluna direita
   Oculto em mobile. Visível só em ≥1024px.
============================================ */
.blog-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    position: sticky;
    top: calc(var(--header-height-desktop) + var(--space-md));
    align-self: start;
  }
}

.blog-sidebar__card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.blog-sidebar__card--author {
  align-items: center;
  text-align: center;
}

.blog-sidebar__author-photo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--color-accent);
  box-shadow: var(--shadow-md);
  margin: 0 auto;
}

.blog-sidebar__author-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-body-lg);
  color: var(--color-text-primary);
  margin: 0;
}

.blog-sidebar__author-title {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.blog-sidebar__card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  margin: 0;
}

.blog-sidebar__card--reservo {
  gap: var(--space-sm);
}

.blog-sidebar__reservo-frame {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.blog-sidebar__reservo-frame iframe {
  width: 100%;
  border: none;
  display: block;
}

.blog-sidebar__info-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  margin: 0;
}

.blog-sidebar__info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.blog-sidebar__info-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.blog-sidebar__info-list .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
  margin-top: 1px;
}

/* ============================================
   SEÇÃO: CTA-FINAL-ARTICULO — BG brand-primary
============================================ */
.blog-cta-final {
  background-color: var(--color-brand-primary);
  padding-block: var(--space-3xl);
  text-align: center;
}

.blog-cta-final__title {
  font-size: clamp(24px, 3.5vw, 36px);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-md);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.blog-cta-final__text {
  font-size: var(--text-body-lg);
  color: rgba(255, 255, 255, 0.90);
  margin-bottom: var(--space-sm);
  max-width: 560px;
  margin-inline: auto;
}

.blog-cta-final__price {
  font-family: var(--font-heading);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-xl);
}

.blog-cta-final__btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

@media (min-width: 480px) {
  .blog-cta-final__btns {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.blog-cta-final__location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.70);
  flex-wrap: wrap;
  margin: 0;
}

.blog-cta-final__location .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.70);
}

/* ============================================
   SEÇÃO: SIDEBAR-MOVIL — bloco agendamento mobile
   Visível só em <1024px (desktop usa sidebar sticky).
============================================ */
.blog-sidebar-mobile {
  display: block;
}

.blog-sidebar-mobile__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h3);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.blog-sidebar-mobile__text {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.blog-sidebar-mobile__frame {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.blog-sidebar-mobile__frame iframe {
  width: 100%;
  border: none;
  display: block;
}

@media (min-width: 1024px) {
  .blog-sidebar-mobile {
    display: none;
  }
}

/* ============================================
   SEÇÃO: ARTICULOS-RELACIONADOS
   Grid 1 col (mobile) → 2 col (≥768px).
============================================ */
.blog-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .blog-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.blog-related__card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.blog-related__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.blog-related__img-link {
  display: block;
  overflow: hidden;
}

.blog-related__img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.blog-related__card:hover .blog-related__img {
  transform: scale(1.03);
}

.blog-related__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.blog-related__tag {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.blog-related__title {
  font-size: var(--text-body);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.35;
}

.blog-related__title a {
  color: inherit;
  text-decoration: none;
}

.blog-related__title a:hover {
  color: var(--color-brand-primary);
  text-decoration: underline;
}

.blog-related__excerpt {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos específicos do artigo âncora
   blog-calendario-vacunas-perro-chile.html.
   Acrescentado ao FINAL sem alterar o existente, conforme override
   do projeto. Mobile-first, usa tokens semânticos do :root.
   Reutiliza .faq / .price-list / .blog-card / .btn / .badge /
   .breadcrumb / .blog-table-wrap / .blog-article-layout já acima.
   ================================================================ */

/* ============================================
   SEÇÃO: HERO ARTIGO VACUNAS — layout + imagem
============================================ */
.blog-article-hero {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.blog-article-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.blog-article-hero__title {
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: var(--space-md) 0;
}

.blog-article-hero__lead {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-lg);
}

.blog-article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

.blog-article-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.blog-article-hero__meta .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.blog-article-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.blog-article-hero__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ============================================
   SEÇÃO: CORPO — tipografia complementar
   (prose em .blog-article-body que está dentro de
   .blog-article-main — não conflita com os seletores
   diretos .blog-article-main h2/p já definidos acima)
============================================ */
.blog-article-body h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  color: var(--color-text-primary);
}

.blog-article-body p {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-md);
}

.blog-article-body a {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-article-body a:hover {
  color: var(--color-brand-secondary);
}

/* ============================================
   SEÇÃO: TABELA VACUNAS — tag "Obligatoria"
   Complementa .blog-table* já definidos acima.
============================================ */
.blog-table-note {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 0;
  margin-bottom: var(--space-xl);
}

.blog-tag {
  display: inline-block;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
}

.blog-tag--obligatoria {
  background-color: rgba(205, 29, 43, 0.12);
  color: var(--color-accent);
  border: 1px solid rgba(205, 29, 43, 0.35);
}

/* ============================================
   SEÇÃO: CTA-INLINE — blocos de conversão inline
============================================ */
.blog-cta-inline {
  border-left: 4px solid var(--color-brand-primary);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-secondary);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.blog-cta-inline__headline {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.blog-cta-inline__sub {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.blog-cta-inline__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ============================================
   SEÇÃO: CARD DR. LEAN — destaque veterinário
============================================ */
.blog-doctor-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  box-shadow: var(--shadow-sm);
}

.blog-doctor-card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: rgba(2, 38, 161, 0.10);
  color: var(--color-brand-primary);
  flex-shrink: 0;
}

.blog-doctor-card__icon .icon {
  width: 28px;
  height: 28px;
}

.blog-doctor-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.blog-doctor-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h4);
  color: var(--color-text-primary);
  margin: 0;
}

.blog-doctor-card__cred {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.blog-doctor-card__quote {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  font-style: italic;
  margin: var(--space-xs) 0 var(--space-md);
}

/* ============================================
   SEÇÃO: ASIDE CARD — sticky desktop
============================================ */
.blog-article-aside {
  display: none; /* oculto mobile/tablet */
}

.blog-aside-card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: sticky;
  top: 88px; /* 72px header desktop + 16px gap */
}

.blog-aside-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--color-text-primary);
  margin: 0;
}

.blog-aside-card__sub {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.blog-aside-card__sep {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

.blog-aside-card__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

.blog-aside-card__label .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.blog-aside-reservo {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.blog-aside-card__related-title {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

.blog-aside-card__related-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-aside-card__related-list a {
  font-size: var(--text-body-sm);
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-aside-card__related-list a:hover {
  color: var(--color-brand-secondary);
}

/* ============================================
   SEÇÃO: CTA-FINAL Reservo mobile-only
============================================ */
.blog-cta-final-reservo {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

/* Terceiro blog-card visível ≥1024px */
.blog-card--third {
  display: none;
}

/* ============================================
   BREAKPOINTS — artigo vacunas (min-width)
============================================ */

/* sm — 480px */
@media (min-width: 480px) {
  .blog-cta-inline__group {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* md — 768px */
@media (min-width: 768px) {
  .blog-doctor-card {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* lg — 1024px */
@media (min-width: 1024px) {
  .blog-article-hero__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-3xl);
  }

  /* Aside sticky visível em desktop */
  .blog-article-aside {
    display: block;
  }

  /* CTA-INLINE-MID e Reservo no CTA-FINAL ocultos (aside já exibe) */
  .blog-cta-inline--mobile-only,
  .blog-cta-final-reservo--mobile-only {
    display: none;
  }

  /* Terceiro card de artigos relacionados */
  .blog-card--third {
    display: flex;
  }
}
/* /BLOCO ADICIONADO POR A07 — blog-calendario-vacunas-perro-chile */

/* /BLOCO ADICIONADO POR A07 — blog-ley-cholito-microchip.html */

/* ============================================
   BLOCO ADICIONADO POR A07 — blog-cuidados-perro-senior
   Classes específicas desta página. NÃO alterar blocos acima.
   Rota: /blog/cuidados-perro-senior
============================================ */

/* --- Breadcrumb --- */
.blog-breadcrumb {
  background-color: var(--color-bg-secondary);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.breadcrumb__item a {
  color: var(--color-brand-primary);
  text-decoration: none;
}

.breadcrumb__item a:hover {
  text-decoration: underline;
}

.breadcrumb__item--current {
  color: var(--color-text-muted);
}

/* --- Article hero --- */
.article-hero {
  padding-block: var(--space-2xl);
}

.article-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.article-badge {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: 500;
  padding: var(--space-xs) var(--space-md);
  background-color: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
  color: var(--color-brand-primary);
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
}

.article-hero__title {
  font-size: var(--text-h1);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.article-hero__meta {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.article-hero__lead {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.65;
  max-width: 640px;
  margin-bottom: 0;
}

.article-hero__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

/* --- CTA inline top --- */
.cta-inline-top {
  border-left: 4px solid var(--color-brand-primary);
  background-color: var(--color-bg-secondary);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  margin-block: var(--space-xl);
}

.cta-inline-top__text {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.cta-inline-top__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* --- Article layout (2-col desktop) --- */
.article-layout {
  padding-block: var(--space-2xl);
}

.article-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
}

.article-body {
  max-width: 720px;
}

.article-body h2 {
  font-size: var(--text-h2);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-md);
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-border);
}

.article-body h2:first-of-type {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.article-body h4 {
  font-size: var(--text-h4);
  margin-bottom: var(--space-sm);
}

.article-body p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.article-link {
  color: var(--color-brand-primary);
  font-weight: 600;
  text-decoration: none;
}

.article-link:hover {
  text-decoration: underline;
}

/* --- Tabla edad senior --- */
.article-table-wrap {
  overflow-x: auto;
  margin-block: var(--space-lg);
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--text-body-sm);
}

.article-table th {
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-dark);
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-heading);
  font-weight: 600;
}

.article-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.article-table tr:last-child td {
  border-bottom: none;
}

/* --- Señales grid --- */
.signals-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-block: var(--space-xl);
}

.signal-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  align-items: start;
  padding: var(--space-md);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.signal-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  grid-row: 1 / 3;
  grid-column: 1;
}

.signal-card__icon .icon {
  width: 20px;
  height: 20px;
}

.signal-card__title {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  grid-column: 2;
}

.signal-card__text {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
  grid-column: 2;
}

/* --- Callout Dr. Lean --- */
.article-callout {
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg);
  margin-block: var(--space-xl);
}

.article-callout--dark {
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-dark);
}

.article-callout__text {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-lg);
}

/* --- Card acento membresía --- */
.article-card-accent {
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  margin-block: var(--space-xl);
}

.article-card-accent h3 {
  font-size: var(--text-h3);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-md);
}

.article-card-accent p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

/* --- Sidebar --- */
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sidebar-card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.sidebar-card__heading {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}

.sidebar-card__text {
  font-size: 15px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.sidebar-vet__profile {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.sidebar-vet__photo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar-vet__name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}

.sidebar-vet__role {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

.sidebar-price__label {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.sidebar-price__value {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-brand-primary);
  margin: 0;
}

.sidebar-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

.sidebar-related__heading {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.sidebar-related__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-related__link {
  font-size: var(--text-body-sm);
  color: var(--color-brand-primary);
  text-decoration: none;
}

.sidebar-related__link:hover {
  text-decoration: underline;
}

/* --- CTA final blog --- */
.cta-final-blog .cta-final__title,
.cta-final-blog .cta-final__text {
  color: var(--color-text-on-dark);
}

.cta-final__location {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-body-sm);
  color: var(--color-text-on-dark);
  opacity: 0.75;
  margin-top: var(--space-lg);
}

.cta-final__location .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- Reservo bloque secundario (CTA final) --- */
.reservo-block__secondary {
  margin-top: var(--space-2xl);
  text-align: left;
}

/* --- Blog cards grid (artículos relacionados) --- */
.blog-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.blog-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blog-card__img-link {
  display: block;
  overflow: hidden;
}

.blog-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 260;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.blog-card__img-link:hover .blog-card__img {
  transform: scale(1.03);
}

.blog-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.blog-card__title {
  font-size: var(--text-h3);
  margin: 0;
}

.blog-card__title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.blog-card__title a:hover {
  color: var(--color-brand-primary);
}

.blog-card__desc {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Responsive breakpoints para blog-cuidados-perro-senior ── */

/* sm — 640px */
@media (min-width: 640px) {
  .cta-inline-top__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* md — 768px */
@media (min-width: 768px) {
  .article-hero__grid {
    grid-template-columns: 60% 40%;
    align-items: center;
    gap: var(--space-3xl);
  }

  .signals-grid {
    grid-template-columns: 1fr 1fr;
  }

  .blog-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* lg — 1024px */
@media (min-width: 1024px) {
  .article-content-grid {
    grid-template-columns: 68% 1fr;
    align-items: start;
    gap: var(--space-3xl);
  }

  .article-sidebar {
    position: sticky;
    top: 88px; /* 72px header + 16px gap */
  }

  .blog-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cta-final__location {
    font-size: var(--text-body);
  }
}
/* /BLOCO ADICIONADO POR A07 — blog-cuidados-perro-senior */

/* ================================================================
   BLOCO ADICIONADO POR A07 — Estilos especificos da pagina
   /blog/nutricion-obesidad-mascotas (blog-nutricion-obesidad-mascotas.html).
   Acrescentado ao FINAL sem alterar o existente, conforme override do projeto.
   Mobile-first, usa apenas tokens semanticos do :root.
   data-edit: 2026-06-04
   ================================================================ */

/* SECAO: HERO-ARTICULO */
.hero-articulo {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-bg-dark);
}
.hero-articulo__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero-articulo__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(20, 22, 31, 0.45);
  z-index: 2;
}
.hero-articulo > .container {
  position: relative;
  z-index: 3;
  width: 100%;
}
.hero-articulo__content {
  padding-block: var(--space-3xl) var(--space-2xl);
  max-width: 760px;
}
.hero-articulo__title {
  font-size: var(--text-h1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin: var(--space-md) 0 var(--space-sm);
}
.hero-articulo__meta {
  font-size: var(--text-body-sm);
  color: var(--color-text-on-dark);
  opacity: 0.85;
  margin-bottom: var(--space-md);
}
.hero-articulo__intro {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark);
  opacity: 0.92;
  max-width: 60ch;
  margin: 0;
}

/* SECAO: CTA-INLINE-TOP */
.cta-inline-top__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}
.cta-inline-top__icon .icon { width: 36px; height: 36px; color: var(--color-brand-primary); }
.cta-inline-top__lead { font-size: var(--text-body-lg); font-weight: 600; color: var(--color-text-primary); margin: 0; }
.cta-inline-top__support { font-size: var(--text-body-sm); color: var(--color-text-secondary); margin: 0; }

/* SECAO: CONTENIDO-ARTICULO layout */
.contenido-articulo__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* SECAO: ARTICULO-BODY */
.articulo-body { min-width: 0; }
.articulo-body h2 {
  font-size: var(--text-h2);
  color: var(--color-brand-primary);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  line-height: 1.25;
}
.articulo-body h2:first-child { margin-top: 0; }
.articulo-body p { font-size: var(--text-body-lg); color: var(--color-text-secondary); line-height: 1.7; margin-bottom: var(--space-md); }
.articulo-body ul { list-style: disc; padding-left: var(--space-lg); margin-bottom: var(--space-lg); }
.articulo-body ul li { font-size: var(--text-body-lg); color: var(--color-text-secondary); line-height: 1.6; margin-bottom: var(--space-sm); }
.articulo-note { font-size: var(--text-body-sm) !important; color: var(--color-text-muted) !important; font-style: italic; margin-top: var(--space-sm); }

/* Tabla BCS */
.articulo-bcs-table {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-block: var(--space-lg);
  overflow-x: auto;
}
.bcs-table { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.bcs-table caption {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body-sm);
  text-align: left;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  caption-side: top;
  padding-bottom: var(--space-sm);
}
.bcs-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 2px solid var(--color-border);
}
.bcs-table td {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.bcs-table tr:last-child td { border-bottom: none; }

/* Callout consejo veterinario */
.articulo-callout {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-block: var(--space-xl);
}
.articulo-callout__icon .icon { width: 28px; height: 28px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }
.articulo-callout__title { font-family: var(--font-heading); font-weight: 600; color: var(--color-text-primary); margin-bottom: var(--space-xs); font-size: var(--text-body); }
.articulo-callout p:last-child { margin-bottom: 0; }

/* Grid 2 col alimentos prohibidos */
.articulo-dos-col { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-block: var(--space-md); }
.articulo-dos-col__titulo { margin-bottom: var(--space-sm) !important; color: var(--color-text-primary) !important; }

/* Lista checklist */
.articulo-checklist { list-style: none !important; padding-left: 0 !important; display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.articulo-checklist li { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--text-body-lg) !important; color: var(--color-text-secondary) !important; margin-bottom: 0 !important; }
.articulo-checklist__icon { width: 20px; height: 20px; color: var(--color-brand-primary); flex-shrink: 0; margin-top: 3px; }

/* CTA inline */
.articulo-cta-inline { display: flex; justify-content: center; margin-block: var(--space-xl); }

/* SECAO: SIDEBAR-ARTICULO */
.sidebar-articulo { display: none; }
.sidebar-card { background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-lg); margin-bottom: var(--space-lg); }
.sidebar-card:last-child { margin-bottom: 0; }
.sidebar-card--brand { background-color: var(--color-brand-primary); border-color: var(--color-brand-primary); }
.sidebar-card--brand .sidebar-card__lead,
.sidebar-card--brand .sidebar-card__price { color: var(--color-text-on-dark); }
.sidebar-card__lead { font-size: var(--text-body); margin-bottom: var(--space-sm); }
.sidebar-card__price { font-family: var(--font-heading); font-size: var(--text-body-lg); font-weight: 600; margin-bottom: var(--space-md); }
.sidebar-card__secondary-btn { margin-top: var(--space-sm); border-color: var(--color-text-on-dark) !important; color: var(--color-text-on-dark) !important; }
.sidebar-card__secondary-btn:hover { background-color: var(--color-text-on-dark) !important; color: var(--color-brand-primary) !important; }
.sidebar-autor { display: flex; gap: var(--space-md); align-items: flex-start; }
.sidebar-autor__foto { width: 80px; height: 80px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; border: 2px solid var(--color-border); }
.sidebar-autor__nombre { font-family: var(--font-heading); font-size: var(--text-body); margin: 0 0 var(--space-xs); }
.sidebar-autor__rol { font-size: var(--text-caption); color: var(--color-text-secondary); margin: 0; line-height: 1.4; }
.sidebar-card__related-title { font-size: var(--text-body); margin-bottom: var(--space-md); }
.sidebar-card__links { display: flex; flex-direction: column; gap: var(--space-sm); list-style: none; padding: 0; margin: 0; }
.sidebar-card__links a { font-size: var(--text-body-sm); color: var(--color-brand-primary); font-weight: 500; text-decoration: none; }
.sidebar-card__links a:hover { text-decoration: underline; }

/* SECAO: CTA-FINAL-ARTICULO extensiones */
.cta-final-articulo .cta-final__precio { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--color-accent); text-align: center; margin-bottom: var(--space-xl); }
.cta-final-articulo .cta-final__tagline { font-size: var(--text-caption); color: var(--color-text-on-dark); opacity: 0.7; text-align: center; margin-top: var(--space-lg); line-height: 1.6; }
.blog-card__meta { font-size: var(--text-caption); color: var(--color-text-muted); margin-bottom: var(--space-sm); }

/* BREAKPOINTS */
@media (min-width: 480px) {
  .articulo-cta-inline { justify-content: flex-start; }
  .cta-inline-top__inner { align-items: flex-start; text-align: left; }
}
@media (min-width: 768px) {
  .hero-articulo { min-height: 420px; align-items: center; }
  .articulo-dos-col { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .contenido-articulo__layout { grid-template-columns: 1fr 0.42fr; gap: var(--space-3xl); }
  .sidebar-articulo { display: block; position: sticky; top: calc(var(--header-height-desktop) + var(--space-md)); }
  .cta-final-articulo { display: none; }
}

/* ============================================
   SEÇÃO: LEGAL — PÁGINAS DE CUMPLIMIENTO
   Estilos específicos de legal-privacidad.html y legal-terminos.html.
   Añadidos al FINAL del archivo sin modificar el existente.
   Clases: .legal-hero, .legal-layout, .legal-toc, .legal-doc,
           .legal-sec, .legal-dpo, .legal-retorno, etc.
   data-edit: ver mapa completo en design/wireframes/legal-privacidad.md
============================================ */

/* Hero legal */
.legal-hero { padding-block: var(--space-3xl); }
.legal-hero__inner { max-width: 800px; margin-inline: auto; text-align: center; }
.legal-hero__title { font-size: var(--text-h1); color: var(--color-text-primary); margin-bottom: var(--space-sm); }
.legal-hero__fecha { font-size: var(--text-caption); color: var(--color-text-muted); margin-bottom: var(--space-md); }
.legal-hero__intro { font-size: var(--text-body-lg); color: var(--color-text-secondary); line-height: 1.65; margin-bottom: 0; }

/* Breadcrumb */
.legal-breadcrumb { margin-bottom: var(--space-lg); }
.legal-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-xs); list-style: none; padding: 0; margin: 0; font-size: var(--text-caption); color: var(--color-text-muted); }
.legal-breadcrumb__list li a { color: var(--color-brand-primary); }
.legal-breadcrumb__list li a:hover { text-decoration: underline; }
.legal-breadcrumb__list [aria-current="page"] { color: var(--color-text-muted); font-weight: 500; }

/* Layout 2 columnas: TOC + documento */
.legal-content { padding-block: var(--space-3xl); }
.legal-layout { display: flex; flex-direction: column; gap: var(--space-xl); }

/* Índice de navegación (TOC) */
.legal-toc { background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); }
.legal-toc__label { font-size: var(--text-caption); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: var(--space-md); }
.legal-toc__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: none; }
.legal-toc__list li { padding: 0; }
.legal-toc__link { display: block; font-size: var(--text-body-sm); color: var(--color-brand-primary); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); border-left: 3px solid transparent; transition: background-color var(--transition-fast), border-color var(--transition-fast); text-decoration: none; }
.legal-toc__link:hover { background-color: var(--color-bg-secondary); text-decoration: underline; }
.legal-toc__link--active { border-left-color: var(--color-brand-primary); background-color: var(--color-bg-secondary); font-weight: 600; }

/* Documento legal */
.legal-doc { min-width: 0; }

/* Sección individual del documento */
.legal-sec { padding-block: var(--space-xl); border-bottom: 1px solid var(--color-border); }
.legal-sec:last-child { border-bottom: none; padding-bottom: 0; }
.legal-sec__h2 { font-size: var(--text-h3); color: var(--color-brand-primary); margin-bottom: var(--space-md); scroll-margin-top: calc(var(--header-height-mobile) + var(--space-lg)); }
.legal-sec__h3 { font-size: var(--text-h4); color: var(--color-text-primary); margin-top: var(--space-lg); margin-bottom: var(--space-sm); }

/* Texto legal legible — mínimo 16px, line-height 1.65 */
.legal-doc p { font-size: var(--text-body); line-height: 1.65; color: var(--color-text-secondary); }
.legal-doc strong { color: var(--color-text-primary); }

/* Dirección/datos de contacto */
.legal-address { font-style: normal; font-size: var(--text-body); line-height: 1.8; color: var(--color-text-secondary); background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); margin-top: var(--space-md); }
.legal-address a { color: var(--color-brand-primary); }

/* Lista estándar (ul con bullets visuales) */
.legal-list { list-style: none; padding: 0; margin: var(--space-sm) 0 var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.legal-list li { position: relative; padding-left: var(--space-lg); font-size: var(--text-body); line-height: 1.65; color: var(--color-text-secondary); }
.legal-list li::before { content: '—'; position: absolute; left: 0; color: var(--color-brand-primary); font-weight: 600; }
.legal-list a { color: var(--color-brand-primary); }
.legal-list a:hover { text-decoration: underline; }

/* Lista de derechos con icono check */
.legal-rights-list { list-style: none; padding: 0; margin: var(--space-sm) 0 var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.legal-rights-list li { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--text-body); line-height: 1.65; color: var(--color-text-secondary); }
.legal-rights-list__icon { width: 20px; height: 20px; color: var(--color-brand-primary); flex-shrink: 0; margin-top: 3px; }

/* Tabla de finalidades */
.legal-table-wrap { overflow-x: auto; margin-block: var(--space-md); }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.legal-table th { background-color: var(--color-brand-primary); color: var(--color-text-on-dark); font-family: var(--font-heading); font-weight: 600; text-align: left; padding: var(--space-sm) var(--space-md); }
.legal-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); vertical-align: top; line-height: 1.5; }
.legal-table tr:last-child td { border-bottom: none; }
.legal-table tr:nth-child(even) td { background-color: var(--color-bg-secondary); }

/* dl alternativa para pantallas < 480px */
.legal-finalidades-dl { display: none; }

/* código inline en texto legal */
.legal-doc code { font-family: monospace; font-size: var(--text-body-sm); background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1px 6px; color: var(--color-text-primary); }

/* Bloque CONTACTO-DPO */
.legal-dpo { }
.legal-dpo__card { max-width: 820px; margin-inline: auto; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-xl); }
.legal-dpo__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.legal-dpo__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background-color: var(--color-brand-primary); border-radius: var(--radius-full); color: var(--color-text-on-dark); flex-shrink: 0; }
.legal-dpo__icon svg { width: 24px; height: 24px; }
.legal-dpo__title { font-size: var(--text-h3); color: var(--color-text-primary); margin-bottom: 0; }
.legal-dpo__body { font-size: var(--text-body); color: var(--color-text-secondary); line-height: 1.65; margin: 0; }
.legal-dpo__ctas { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Banner de retorno */
.legal-retorno { padding-block: var(--space-xl); border-top: 1px solid var(--color-border); }
.legal-retorno__pregunta { font-size: var(--text-body); color: var(--color-text-muted); text-align: center; margin-bottom: var(--space-md); }
.legal-retorno__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.legal-retorno__link { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-body); color: var(--color-brand-primary); font-weight: 500; text-decoration: none; }
.legal-retorno__link:hover { text-decoration: underline; }
.legal-retorno__link .icon { width: 16px; height: 16px; transform: rotate(-90deg); }

/* BREAKPOINTS LEGAL */
@media (max-width: 479px) {
  /* Tabla colapsa a dl en pantallas muy pequeñas */
  .legal-table-wrap .legal-table { display: none; }
  .legal-finalidades-dl { display: block; font-size: var(--text-body-sm); line-height: 1.65; }
  .legal-finalidades-dl dt { font-weight: 600; color: var(--color-text-primary); margin-top: var(--space-sm); }
  .legal-finalidades-dl dd { color: var(--color-text-secondary); margin-left: var(--space-md); margin-bottom: 0; }
}

@media (min-width: 768px) {
  .legal-layout { flex-direction: row; align-items: flex-start; gap: var(--space-2xl); }
  .legal-toc { width: 220px; flex-shrink: 0; position: sticky; top: calc(var(--header-height-desktop) + var(--space-md)); }
  .legal-doc { flex: 1; max-width: 720px; }
  .legal-sec__h2 { scroll-margin-top: calc(var(--header-height-desktop) + var(--space-lg)); }
  .legal-dpo__card { flex-direction: row; align-items: center; gap: var(--space-2xl); }
  .legal-dpo__text { flex: 1; }
  .legal-dpo__ctas { flex-shrink: 0; min-width: 220px; }
}

@media (min-width: 1024px) {
  .legal-toc { width: 260px; }
  .legal-dpo__ctas { min-width: 260px; }
}
/* /SEÇÃO: LEGAL */


/* ================================================================
   ✦ CAPA VISUAL 2.0 — "Agua en movimiento"
   Camada de elevação estética sobre o design system base.
   Aplica-se às 19 páginas via classes/tokens existentes, sem tocar
   no markup. Para reverter o visual antigo, basta remover este bloco.
   Mantém a marca: azul de trabalho, vermelho só faísca, dourado Store,
   gradiente-firma só em momentos-joia, formas orgânicas, pílulas.
================================================================ */

/* ---- 0. Refino global: seleção, scrollbar, ritmo ---- */
::selection { background: rgba(2, 38, 161, 0.16); color: var(--color-text-primary); }

html { scroll-padding-top: calc(var(--header-height-desktop) + 12px); }

body {
  background:
    radial-gradient(120% 80% at 100% -10%, rgba(2, 38, 161, 0.05), transparent 60%),
    radial-gradient(90% 70% at -10% 8%, rgba(205, 29, 43, 0.04), transparent 55%),
    var(--color-bg-primary);
}

/* Respiro generoso entre seções (manual: 64–96px) */
.section { padding-block: clamp(56px, 8vw, 96px); }

/* ---- 1. Tipografia display: mais presença, tracking apertado ---- */
.hero__title,
.hero-articulo__title { letter-spacing: -0.025em; }

.section__title { font-size: var(--text-h2); letter-spacing: -0.018em; }

/* Eyebrow/label com ponto-blob vermelho à frente (momento-marca) */
.section__label {
  position: relative;
  padding-left: 18px;
  letter-spacing: 0.14em;
  font-weight: 700;
}
.section__label::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 9px; height: 9px; margin-top: -4px;
  background: var(--gradient-firma);
  border-radius: var(--blob-a);
  animation: bbl-morph 9s var(--ease-brand) infinite;
}

/* Utilitário momento-joia: palavra em gradiente-firma */
.txt-firma {
  background: var(--gradient-firma);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- 2. Header: vidro fosco translúcido + borda que reage ao scroll ---- */
.site-header {
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}
.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.86);
  border-bottom-color: var(--color-border);
  box-shadow: 0 6px 24px -16px rgba(7, 21, 63, 0.45);
}
.main-nav__link {
  position: relative;
}
.main-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px;
  background: var(--gradient-firma);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition-base) var(--ease-brand);
}
.main-nav__link:hover::after,
.main-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ---- 3. Botões em pílula (manual 5.1–5.3) + microinteração elástica ---- */
.btn { border-radius: var(--radius-full); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.97); }
.btn-whatsapp,
.btn-accent,
.btn-brand-primary { transition: all var(--transition-base) var(--ease-elastic); }
/* Brilho sutil que varre o CTA principal no hover */
.btn-whatsapp { position: relative; overflow: hidden; }
.btn-whatsapp::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-brand);
}
.btn-whatsapp:hover::after { transform: translateX(120%); }
.btn-whatsapp:hover { box-shadow: 0 10px 28px -8px rgba(37, 211, 102, 0.55); }
.btn-accent:hover  { box-shadow: 0 12px 30px -10px rgba(205, 29, 43, 0.5); }

/* ---- 4. Hero: troca o overlay VERDE (resíduo de template) por
        profundidade azul-marinho + blobs do gradiente-firma à deriva ---- */
.hero { background-color: #05103a; }
.hero .hero__overlay,
.hero-articulo__overlay {
  background:
    radial-gradient(110% 120% at 18% 12%, rgba(2, 38, 161, 0.30), transparent 55%),
    linear-gradient(180deg, rgba(5, 16, 58, 0.42) 0%, rgba(5, 16, 58, 0.78) 100%);
}
/* Dois blobs orgânicos luminosos atrás do conteúdo do hero */
.hero::before,
.hero::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  filter: blur(8px); opacity: 0.5; mix-blend-mode: screen;
}
.hero::before {
  width: 46vw; max-width: 620px; aspect-ratio: 1;
  top: -10%; right: -6%;
  background: radial-gradient(circle at 35% 35%, rgba(205, 29, 43, 0.55), rgba(126, 22, 112, 0.25) 55%, transparent 72%);
  border-radius: var(--blob-a);
  animation: bbl-drift 18s var(--ease-brand) infinite alternate, bbl-morph 12s ease-in-out infinite;
}
.hero::after {
  width: 40vw; max-width: 520px; aspect-ratio: 1;
  bottom: -18%; left: -8%;
  background: radial-gradient(circle at 60% 40%, rgba(46, 80, 196, 0.6), rgba(2, 38, 161, 0.2) 58%, transparent 74%);
  border-radius: var(--blob-b);
  animation: bbl-drift 22s var(--ease-brand) infinite alternate-reverse, bbl-morph 15s ease-in-out infinite;
}
.hero__content { padding-block: clamp(var(--space-4xl), 12vh, 140px); }
.hero__title { font-size: var(--text-display); }
.hero__subtitle { max-width: 56ch; }
.badge {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  letter-spacing: 0.04em;
}

/* Revelação escalonada no carregamento do hero (CSS puro, sem markup) */
@media (prefers-reduced-motion: no-preference) {
  .hero__content > * { animation: bbl-rise 0.7s var(--ease-brand) both; }
  .hero__content > :nth-child(1) { animation-delay: 0.05s; }
  .hero__content > :nth-child(2) { animation-delay: 0.16s; }
  .hero__content > :nth-child(3) { animation-delay: 0.27s; }
  .hero__content > :nth-child(4) { animation-delay: 0.38s; }
}

/* ---- 5. Cards: cantos generosos, sombra azulada fria, lift orgânico ---- */
.door-card,
.card,
.card-articulo,
.card-link {
  border-radius: var(--radius-2xl);
  transition: transform var(--transition-base) var(--ease-brand),
              box-shadow var(--transition-base) var(--ease-brand),
              border-color var(--transition-base);
}
.door-card:hover,
.card:hover,
.card-articulo:hover,
.card-link:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-blue-glow);
  border-color: rgba(2, 38, 161, 0.18);
}
/* Realce-blob no canto do card em hover (gota orgânica de luz) */
.door-card { position: relative; overflow: hidden; }
.door-card::before {
  content: ""; position: absolute; top: -40px; right: -40px;
  width: 130px; height: 130px;
  background: radial-gradient(circle at 50% 50%, rgba(2, 38, 161, 0.12), transparent 70%);
  border-radius: var(--blob-c);
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--transition-base), transform var(--transition-slow) var(--ease-elastic);
}
.door-card:hover::before { opacity: 1; transform: scale(1); }

/* Campos de formulário: foco com halo da marca (manual 5.5) */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 4px rgba(2, 38, 161, 0.12);
}

/* ---- 6. Footer: hairline superior em gradiente-firma ---- */
.site-footer { position: relative; }
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-firma);
  opacity: 0.9;
}

/* ---- 7. Revelação por scroll (classe injetada pelo main.js) ---- */
.reveal-init { opacity: 0; transform: translateY(22px); }
.reveal-init.is-visible {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease-brand), transform 0.6s var(--ease-brand);
}

/* ---- 8. Backdrop do drawer: azul-marinho da marca (era verde) ---- */
.nav-backdrop { background-color: rgba(5, 16, 58, 0.5); }

/* ---- 9. Keyframes ---- */
@keyframes bbl-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bbl-morph {
  0%   { border-radius: var(--blob-a); }
  50%  { border-radius: var(--blob-b); }
  100% { border-radius: var(--blob-a); }
}
@keyframes bbl-drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(-24px, 26px) rotate(14deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .section__label::before { animation: none; }
  .btn-whatsapp::after { display: none; }
}

/* Desktop: hero ainda mais editorial */
@media (min-width: 1024px) {
  .hero__content { max-width: 760px; }
  .section__title { letter-spacing: -0.02em; }
}
/* ✦ /CAPA VISUAL 2.0 */

/* ================================================================
   ✦ CAPA 2.1 — Credenciales (prueba) + stats franquicia (Home)
   Banda de credenciales reemplaza la sección de reseñas (que tenía
   placeholders [TEXTO_REVIEW_N]); stats dan prueba al inversionista.
================================================================ */

/* Banda de credenciales: ícono + texto en fila, distinta de las
   grillas de cards (evita el "muro de cards" repetido). */
.credentials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 768px) {
  .credentials__grid { grid-template-columns: repeat(3, 1fr); }
}
.credential {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.credential__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-primary);
  color: var(--color-brand-primary);
  box-shadow: var(--shadow-sm);
}
.credential__icon .icon { width: 26px; height: 26px; }
.credential__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h4);
  margin: 0 0 var(--space-xs);
}
.credential__text {
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  margin: 0;
}

/* Franja de stats de confianza para el inversionista (bloque About) */
.about-preview__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-2xl);
  margin: var(--space-lg) 0 var(--space-xl);
}
.about-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about-stat__num {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: 1;
  color: var(--color-brand-primary);
}
.about-stat__label {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}
.credentials__more {
  margin-top: var(--space-2xl);
  text-align: center;
}

/* Reservo: estado de carga + fallback (el iframe opaco cubre esta capa
   al cargar; si se bloquea o tarda, el usuario ve el mensaje + WhatsApp). */
.reservo-frame { position: relative; min-height: 600px; }
.reservo-frame__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-xl);
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
}
.reservo-frame__fallback .icon {
  width: 32px;
  height: 32px;
  color: var(--color-brand-primary);
  opacity: 0.7;
  animation: bbl-pulse 1.6s ease-in-out infinite;
}
.reservo-frame__loading {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0;
}
.reservo-frame__help { margin: 0; font-size: var(--text-body-sm); }
.reservo-frame__iframe { position: relative; z-index: 1; }
@keyframes bbl-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.96); }
  50%      { opacity: 0.85; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .reservo-frame__fallback .icon { animation: none; }
}

/* Banda de cierre para el inversionista (peak-end de la franquicia) */
.franchise-band {
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding-block: clamp(40px, 6vw, 64px);
}
.franchise-band__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}
.franchise-band__title {
  font-size: var(--text-h3);
  margin: var(--space-sm) 0 0;
}
.franchise-band__desc {
  color: var(--color-text-secondary);
  max-width: 62ch;
  margin: var(--space-sm) 0 0;
}
.franchise-band .btn { flex-shrink: 0; }
@media (min-width: 1024px) {
  .franchise-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
  }
}
/* ✦ /CAPA 2.1 */

/* ================================================================
   ✦ CAPA 2.2 — HERO KEN BURNS (zoom/pan lento na foto do hero)
   Dá vida às fotos hiperrealistas dos heroes: a imagem "respira"
   com um zoom suave e contínuo. transform-origin levemente à
   direita (onde fica o cachorro); o lado esquerdo, com o texto +
   overlay, fica estável. scale mínimo 1.06 garante que o pan
   nunca revele bordas (object-fit: cover + overflow de 6%).
================================================================ */
.hero__bg {
  transform-origin: 68% 45%;
  animation: hero-kenburns 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-kenburns {
  from { transform: scale(1.06) translate3d(-1.2%, -0.8%, 0); }
  to   { transform: scale(1.12) translate3d(1.2%,  0.8%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; transform: none; will-change: auto; }
}
/* ✦ /CAPA 2.2 */


/* ============================================
   SEÇÃO: RESULTADOS — ANTES Y DESPUÉS (peluquería)
   Galeria de transformações reais (pares antes/depois).
============================================ */
.resultados {
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF2FB 100%);
}

.ba-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.ba-pair {
  margin: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.ba-pair:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.ba-pair__imgs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ba-shot {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.ba-shot + .ba-shot {
  border-left: 3px solid #fff;
}

.ba-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ba-tag {
  position: absolute;
  top: var(--space-sm);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  color: #fff;
  z-index: 2;
}

.ba-tag--antes {
  left: var(--space-sm);
  background: rgba(20, 22, 31, 0.74);
}

.ba-tag--despues {
  right: var(--space-sm);
  background: var(--color-accent);
  box-shadow: var(--shadow-accent);
}

.ba-pair__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  color: var(--color-accent);
  z-index: 3;
}

.ba-pair__arrow .icon {
  width: 22px;
  height: 22px;
}

.ba-pair__caption {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.ba-pair__caption .icon {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.ba-pair__caption strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

.resultados__cta-wrap {
  text-align: center;
  margin-top: var(--space-2xl);
}

@media (max-width: 720px) {
  .ba-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .ba-pair__arrow {
    width: 38px;
    height: 38px;
  }
  .ba-pair__arrow .icon {
    width: 18px;
    height: 18px;
  }
}