/* ------------------------------------------------------------------
   ECHO Barcelona — hoja de estilos base
   Base visual tomada del sitio original echobarcelona.com: paleta,
   tipografías y radios de borde. Confirmar con la propietaria antes
   de dar por definitiva la marca (logo pendiente).
------------------------------------------------------------------- */

:root {
  --color-bg: #ffffff;
  --color-bg-cream: #fdf9f6;
  --color-bg-soft: #fafafa;
  --color-ink: #0a0a0a;
  --color-ink-soft: #3a3733;
  --color-muted: #757575;
  --color-line: rgba(10, 10, 10, 0.08);
  --color-line-strong: rgba(10, 10, 10, 0.14);

  --color-brand: #972629;
  --color-brand-dark: #4c0c10;
  --color-brand-soft: #cfa2a3;
  --color-brand-tint: #ffedef;

  --color-invert-ink: #ffffff;

  --font-heading: "Satoshi", "Satoshi Placeholder", "Inter", sans-serif;
  --font-body: "Open Sauce One", "Open Sauce One Placeholder", "Inter", sans-serif;

  --wrap: none;
  --gutter: clamp(1rem, 4vw, 3.75rem);

  --radius-pill: 999px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;

  --shadow-card: 0 3px 6px rgba(10, 10, 10, 0.08), 0 24px 48px -14px rgba(76, 12, 16, 0.4);
  --shadow-card-hover: 0 8px 16px rgba(10, 10, 10, 0.1), 0 36px 64px -16px rgba(151, 38, 41, 0.5);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-brand);
  color: #fff;
}

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

a {
  color: inherit;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-invert-ink);
  padding: 0.75em 1.25em;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 200;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Typography ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.5rem, 4.5vw + 1rem, 4.25rem);
  font-weight: 900;
}

h2 {
  font-size: clamp(1.9rem, 2.4vw + 1rem, 2.6rem);
  font-weight: 800;
}

/* Scoped override — keeps this one heading ("Así hacemos crecer tu
   negocio, paso a paso") on a single line on desktop without affecting
   the default h2 size used everywhere else. Still wraps on mobile. */
.h2-fit-line {
  font-size: clamp(1.4rem, 1.4vw + 1rem, 1.85rem);
}

/* Scoped override — tighter gap below this one heading ("¿Seguimos la
   conversación?") without affecting the default h2 spacing used
   everywhere else. */
.h2-tight-gap {
  margin-bottom: 0.05em;
}

/* Scoped override — smaller gap below the quienes-somos closing CTA
   before the newsletter footer, without affecting .section padding
   used everywhere else. Compound selector so it beats .section's
   later padding-block rule regardless of source order. */
.section.cta-outro-section {
  padding-bottom: clamp(0.5rem, 1vw, 0.85rem);
}

h3 {
  font-size: clamp(1.2rem, 1vw + 1rem, 1.4rem);
  font-weight: 700;
}

p {
  margin: 0 0 1em;
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-brand);
  background: var(--color-brand-tint);
  padding: 0.4em 1em;
  border-radius: var(--radius-pill);
  margin-bottom: 1.25em;
}

/* Small solid capsule nested inside a larger light one, with a visible
   inset margin on every side (confirmed by sampling badge reference.png
   pixel-by-pixel: there's light background showing above/below/left/right
   of the "#001" chip, not a flush seam). */
.eyebrow-split {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.32em 1em 0.32em 0.32em;
  font-size: 0.95rem;
  background: var(--color-bg);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 20px -10px rgba(184, 93, 95, 0.45);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.eyebrow-split:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 28px -10px rgba(184, 93, 95, 0.6);
}

.eyebrow-split:hover .eyebrow-tag {
  transform: scale(1.08);
}

.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4em 0.95em;
  background: linear-gradient(180deg, #d47f81 0%, #b85d5f 55%, #963f41 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2),
    0 3px 6px -2px rgba(76, 12, 16, 0.45);
  transition: transform 0.3s var(--ease);
}

.eyebrow-text {
  display: inline-flex;
  align-items: center;
  color: #2f2f2f;
  font-weight: 700;
}

.lede {
  font-size: clamp(1.05rem, 0.5vw + 1rem, 1.25rem);
  max-width: 46ch;
  color: var(--color-ink-soft);
}

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.page-home .section {
  padding-block: clamp(1.75rem, 4vw, 3.25rem);
}

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

.section-dark {
  background: var(--color-brand-dark);
  color: rgba(255, 255, 255, 0.85);
}

.section-dark h2,
.section-dark h1 {
  color: #fff;
}

.section-dark p {
  color: rgba(255, 255, 255, 0.75);
}

/* Every section heading site-wide (outside Hero) shares this centered
   format: small label, big H2, short muted subtext — all centered. */
.section-head {
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
  text-align: center;
}

.history-head {
  max-width: 66rem;
}

.history-head p {
  max-width: none;
}

.section-head-center {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.section-head .eyebrow,
.section-head p,
.section-head .lede,
.section-head .section-label,
.status-block .eyebrow,
.status-block p,
.status-block .lede,
.status-block .section-label {
  margin-inline: auto;
}

/* ---------- Service detail page: cards + video placeholder ---------- */
.service-sections-section,
.quienes-somos-section,
.contact-form-section {
  position: relative;
  z-index: 2;
  box-shadow: inset 0 -24px 40px -20px rgba(10, 10, 10, 0.3);
  background-color: var(--color-bg-cream);
  background-image: repeating-radial-gradient(
    circle at 100% 0%,
    rgba(151, 38, 41, 0.06) 0,
    rgba(151, 38, 41, 0.06) 1.5px,
    transparent 1.5px,
    transparent 26px
  );
}

/* First patterned section right after the hero on /contacto/: add a
   matching shadow on the top edge too, so the hero->pattern transition
   reads the same way the pattern->solid transition does at the bottom. */
.contact-form-section {
  box-shadow: inset 0 24px 40px -20px rgba(10, 10, 10, 0.3), inset 0 -24px 40px -20px rgba(10, 10, 10, 0.3);
}

.quienes-somos-section {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.quienes-somos-block {
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.service-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.service-timeline::before {
  content: "";
  position: absolute;
  left: calc(100% / 6);
  right: calc(100% / 6);
  top: 1.75rem;
  height: 1px;
  background: var(--color-line-strong);
}

.service-timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.service-timeline-number {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-brand);
  background: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--color-brand);
}


.service-timeline-body h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4em;
}

.service-timeline-body p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.service-video-row {
  display: flex;
  align-items: stretch;
  gap: 1.75rem;
}

.service-video-row .service-video-placeholder-lg {
  flex: 1 1 60%;
  max-width: none;
  margin-inline: 0;
}

.service-video-row .hero-includes-card {
  flex: 0 0 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-video-placeholder {
  position: relative;
  overflow: hidden;
  max-width: 46rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(2.5rem, 5vw, 3.5rem) 2rem;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-card);
  background: linear-gradient(155deg, var(--color-brand-dark), #0a0a0a);
  color: #fff;
}

.service-video-placeholder > * {
  position: relative;
}

.service-video-placeholder-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  margin-bottom: 0.5rem;
  animation: service-video-play-pulse 2.4s ease-out infinite;
}

@keyframes service-video-play-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.25);
  }
  50% {
    box-shadow: 0 0 0 0.8rem rgba(255, 255, 255, 0);
  }
}

.service-video-placeholder-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-soft);
}

.service-video-placeholder-text {
  margin: 0;
  max-width: 32ch;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

.service-video-placeholder-lg {
  max-width: 58rem;
  padding: clamp(3.5rem, 8vw, 6rem) 2rem;
}

.service-sections-head {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.service-video-placeholder-lg .service-video-placeholder-play {
  width: 4.4rem;
  height: 4.4rem;
}

.service-video-placeholder-lg .service-video-placeholder-text {
  max-width: 40ch;
  font-size: 0.98rem;
}

.service-video-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.service-video-badge {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.2em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  box-shadow: 0 10px 20px -10px rgba(10, 10, 10, 0.25);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.service-video-badge:hover {
  transform: translateY(-3px) scale(1.04);
  background: var(--color-brand);
  color: #fff;
  box-shadow: var(--shadow-card-hover);
}

.service-video-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-brand);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}

.service-video-badge:hover .service-video-badge-icon {
  color: #fff;
  transform: scale(1.15);
}

.service-video-badge-icon svg {
  width: 14px;
  height: 14px;
}

/* Small label above a section H2: a square bordeaux marker + short
   uppercase, tracked, dark text — no pill/background, unlike the Hero's
   own approved badge (left untouched everywhere it appears). */
.section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 1em;
}

.section-label::before {
  content: "";
  flex-shrink: 0;
  width: 0.45em;
  height: 0.45em;
  border-radius: 2px;
  background: var(--color-brand);
}

/* ---------- Home: "Introducción" two-column intro block ---------- */
.intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* ---------- Introducción + Proceso, unified as one panel ---------- */
.intro-panel {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  perspective: 1200px;
}

.intro-panel-top {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* Tilt "физика": the frame gently rotates to follow the cursor, like it's
   a physical card responding to your mouse — the interactive touch this
   section was missing. */
.intro-media-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  will-change: transform;
}

.intro-panel-media {
  aspect-ratio: 4 / 3;
}

.intro-media-frame.is-tilting {
  box-shadow: var(--shadow-card-hover);
}

.intro-media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.intro-panel-copy .section-label {
  margin-bottom: 0.75em;
}

.intro-pullquote {
  position: relative;
  margin-top: 1.25em;
  padding-left: 1.1em;
  border-left: 3px solid var(--color-brand);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-ink);
}

.intro-pullquote em {
  font-style: normal;
  color: var(--color-brand);
}

.intro-panel-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--color-line);
}

.intro-panel-step {
  display: flex;
  gap: 1rem;
}

.intro-panel-step-number {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-brand-soft);
}

.intro-panel-step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.3em;
}

.intro-panel-step p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .intro-panel-top,
  .intro-panel-steps {
    grid-template-columns: 1fr;
  }
}


.intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 1em;
}

.intro-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 0.45em;
  height: 0.45em;
  border-radius: 2px;
  background: var(--color-brand);
}

.intro-heading {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 0.6em;
}

.intro-heading em {
  font-style: normal;
  font-weight: 800;
  color: var(--color-brand);
}

.intro-copy p {
  color: var(--color-muted);
}

.intro-copy p + p {
  margin-top: 1em;
}

/* A little fanned-out "deck of cards" behind the quote card — playful,
   and it gently un-fans further on hover. */
.intro-card-stack {
  position: relative;
}

.intro-card-backer {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  z-index: 0;
  transition: transform 0.4s var(--ease);
}

.intro-card-backer-a {
  background: var(--color-brand);
  transform: rotate(-4deg) translate(0.6rem, 0.6rem);
}

.intro-card-backer-b {
  background: var(--color-brand-soft);
  transform: rotate(3deg) translate(-0.5rem, 0.7rem);
}

.intro-card-stack:hover .intro-card-backer-a {
  transform: rotate(-7deg) translate(1rem, 1rem);
}

.intro-card-stack:hover .intro-card-backer-b {
  transform: rotate(6deg) translate(-0.9rem, 1.1rem);
}

.intro-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--color-bg-cream);
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 5vw, 3rem);
  box-shadow: 0 30px 50px -20px rgba(151, 38, 41, 0.35);
}

/* "Echo" ripple pattern: concentric rings radiating from the quote mark,
   a quiet nod to the agency name rather than a generic texture. */
.intro-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(
    circle at 88% 8%,
    rgba(151, 38, 41, 0.04) 0,
    rgba(151, 38, 41, 0.04) 1px,
    transparent 1px,
    transparent 22px
  );
  pointer-events: none;
}

.intro-card > * {
  position: relative;
}

.intro-card-text {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-top: -0.4em;
  margin-bottom: 1.5em;
}

.intro-card-text em {
  font-style: normal;
  display: inline-block;
  background: var(--color-brand);
  color: #fff;
  padding: 0.05em 0.4em;
  border-radius: 0.3em;
  box-shadow: 0 6px 14px -6px rgba(151, 38, 41, 0.55);
}

.intro-card-label {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.55);
}

/* "Live" pulse instead of a static marker — a small dot with an echoing
   ring expanding outward, on brand with the ripple motif used elsewhere. */
.intro-card-dot {
  position: relative;
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-brand);
}

.intro-card-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-brand);
  animation: intro-card-dot-pulse 2s ease-out infinite;
}

@keyframes intro-card-dot-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .intro-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------- Buttons & links ---------- */
.button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 2em;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* Click "ping": a short ring expands from the center on click, using
   currentColor so it adapts automatically to both the solid and outline
   button variants. */
.button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--color-brand-dark);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

.button.is-pinging::after {
  animation: button-ping 0.6s ease-out;
}

@keyframes button-ping {
  0% {
    width: 0;
    height: 0;
    opacity: 0.45;
  }
  70% {
    opacity: 0.2;
  }
  100% {
    width: 220%;
    height: 220%;
    opacity: 0;
  }
}

.button:hover,
.button:focus-visible {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(151, 38, 41, 0.45);
}

.button-outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line-strong);
}

.button-outline:hover,
.button-outline:focus-visible {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
  box-shadow: none;
}

.button-small {
  padding: 0.7em 1.5em;
  font-size: 0.85rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row-center {
  justify-content: center;
  margin-top: 1.5rem;
}

.text-link {
  position: relative;
  text-decoration: none;
  font-weight: 700;
  color: var(--color-brand);
  padding-bottom: 0.15em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.35s var(--ease);
}

.text-link:hover,
.text-link:focus-visible {
  background-size: 100% 1px;
}

/* ---------- Scroll-to-top button with a progress ring ---------- */
.scroll-top {
  position: fixed;
  bottom: 1.75rem;
  left: 1.75rem;
  z-index: 300;
  width: 3.4rem;
  height: 3.4rem;
  border: none;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: 0 10px 24px -10px rgba(10, 10, 10, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(10, 10, 10, 0.4);
  transition: transform 0.25s var(--ease);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: translateY(-2px) scale(1.05);
}

.whatsapp-float-ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-brand);
  opacity: 0.6;
  animation: whatsapp-float-pulse 2s ease-out infinite;
}

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

.scroll-top-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.scroll-top-ring-bg {
  fill: none;
  stroke: var(--color-line);
  stroke-width: 2;
}

.scroll-top-ring-progress {
  fill: none;
  stroke: var(--color-brand-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 131.9;
  stroke-dashoffset: 131.9;
}

.scroll-top-butterfly {
  display: flex;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--color-brand);
  animation: scroll-top-flap 1.6s ease-in-out infinite;
}

@keyframes scroll-top-flap {
  0%,
  100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.7);
  }
}

/* ---------- Announcement bar ---------- */
.announce-bar {
  position: relative;
  max-height: 2.75rem;
  overflow: hidden;
  background: linear-gradient(120deg, var(--color-brand-dark), var(--color-brand), var(--color-brand-dark));
  background-size: 200% 100%;
  animation: announce-bar-sheen 8s ease-in-out infinite;
  color: #fff;
  transition: max-height 0.3s var(--ease), opacity 0.3s var(--ease);
}

@keyframes announce-bar-sheen {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.announce-bar.is-hidden {
  max-height: 0;
  opacity: 0;
}

.announce-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  padding-block: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

.announce-bar-dot {
  flex-shrink: 0;
  position: relative;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #fff;
}

.announce-bar-dot::after {
  content: "";
  position: absolute;
  inset: -0.3rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  animation: announce-bar-dot-ping 1.8s ease-out infinite;
}

@keyframes announce-bar-dot-ping {
  0% {
    transform: scale(0.4);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.announce-bar-inner span:not(.announce-bar-dot) {
  color: rgba(255, 255, 255, 0.92);
}

.announce-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.85em;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.announce-bar-cta svg {
  transition: transform 0.2s var(--ease);
}

.announce-bar-cta:hover,
.announce-bar-cta:focus-visible {
  background: #fff;
  color: var(--color-brand);
  transform: translateY(-1px);
}

.announce-bar-cta:hover svg,
.announce-bar-cta:focus-visible svg {
  transform: translateX(3px);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-line);
}

.header-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  color: var(--color-ink);
  white-space: nowrap;
}

.brand-logo {
  display: block;
  height: 34px;
  width: auto;
}

.brand-logo-footer {
  height: 26px;
}

.brand-sub {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2.25rem);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.6vw, 1.75rem);
}

.site-nav > ul > li > a {
  position: relative;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  padding-block: 0.3em;
  transition: color 0.25s var(--ease);
}

.site-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.site-nav > ul > li > a:hover,
.site-nav > ul > li > a:focus-visible,
.site-nav > ul > li > a[aria-current="page"] {
  color: var(--color-ink);
}

.site-nav > ul > li > a:hover::after,
.site-nav > ul > li > a:focus-visible::after,
.site-nav > ul > li > a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  white-space: nowrap;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
  transform: translateY(-2px);
  animation: nav-cta-glow 1.4s var(--ease) infinite alternate;
}

@keyframes nav-cta-glow {
  from {
    box-shadow: 0 0 0 0 rgba(151, 38, 41, 0.55), 0 8px 18px -8px rgba(151, 38, 41, 0.5);
  }
  to {
    box-shadow: 0 0 0 9px rgba(151, 38, 41, 0), 0 10px 26px -6px rgba(151, 38, 41, 0.85);
  }
}

/* ---------- Header: Servicios mega menu ---------- */
.nav-item-mega {
  position: static;
}

.nav-mega-trigger {
  display: flex;
  align-items: center;
  gap: 0.35em;
  position: relative;
  background: none;
  border: none;
  padding-block: 0.3em;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}

.nav-mega-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.nav-item-mega.is-open .nav-mega-trigger {
  color: var(--color-ink);
}

.nav-item-mega.is-open .nav-mega-trigger::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-mega-chevron {
  transition: transform 0.25s var(--ease);
}

.nav-item-mega.is-open .nav-mega-chevron {
  transform: rotate(180deg);
}

.nav-mega-panel {
  position: absolute;
  z-index: 95;
  top: calc(100% + 0.75rem);
  left: var(--gutter);
  right: var(--gutter);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}

.nav-item-mega.is-open .nav-mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-mega-backdrop {
  position: fixed;
  inset: 0;
  /* Below the desktop dropdown panels (z-index: 95) so hovering
     Servicios/Nosotros doesn't dim-and-block the panel itself — above
     ordinary page content (z-index up to ~3) so it still dims the page
     behind either the dropdown or the mobile drawer. */
  z-index: 50;
  background: rgba(10, 10, 10, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.nav-mega-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Lock page scroll behind the open mobile menu — otherwise the page
   underneath keeps scrolling independently of the drawer, which is
   what made it feel like a floating panel over a broken layout. */
body.nav-open {
  overflow: hidden;
}

.nav-mega-inner {
  display: flex;
  align-items: stretch;
  gap: 2.5rem;
  padding: 2.25rem;
}

.nav-mega-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem 1.5rem;
}

.nav-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.9rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}

.nav-mega-item:hover,
.nav-mega-item:focus-visible {
  background: var(--color-bg-cream);
}

.nav-mega-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-sm);
  background: var(--color-brand-tint);
  color: var(--color-brand);
}

.nav-mega-item-icon svg {
  width: 19px;
  height: 19px;
}

.nav-mega-item-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  min-width: 0;
}

.nav-mega-item-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--color-ink);
}

.nav-mega-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-brand);
  padding: 0.15em 0.5em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.nav-mega-item-desc {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--color-muted);
}

.nav-mega-featured {
  position: relative;
  overflow: hidden;
  flex: 0 0 15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.75rem;
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, var(--color-brand), var(--color-brand-dark));
  color: #fff;
}

.nav-mega-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 1.5px, transparent 1.5px, transparent 22px);
  pointer-events: none;
}

.nav-mega-featured > * {
  position: relative;
}

.nav-mega-featured-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-soft);
}

.nav-mega-featured h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #fff;
}

.nav-mega-featured p:not(.nav-mega-featured-label) {
  flex-grow: 1;
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

.nav-mega-featured-cta {
  align-self: flex-start;
  background: #fff;
  border-color: #fff;
  color: var(--color-brand);
  animation: footer-newsletter-button-echo 2.4s ease-out infinite;
}

.nav-mega-featured-cta:hover,
.nav-mega-featured-cta:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--color-brand);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px) scale(1.04);
}

.nav-mega-accordion {
  display: none;
}

/* ---------- Header: Nosotros dropdown ---------- */
.nav-item-dropdown {
  position: static;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.35em;
  position: relative;
  background: none;
  border: none;
  padding-block: 0.3em;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}

.nav-dropdown-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.nav-item-dropdown.is-open .nav-dropdown-trigger {
  color: var(--color-ink);
}

.nav-item-dropdown.is-open .nav-dropdown-trigger::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-dropdown-chevron {
  transition: transform 0.25s var(--ease);
}

.nav-item-dropdown.is-open .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-panel {
  position: absolute;
  z-index: 95;
  top: calc(100% + 0.75rem);
  left: 50%;
  width: min(58rem, calc(100% - 2 * var(--gutter)));
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}

.nav-item-dropdown.is-open .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown-inner {
  display: flex;
  align-items: stretch;
  gap: 2.5rem;
  padding: 2.25rem;
}

.nav-dropdown-links {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
}

.nav-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.9rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible,
.nav-dropdown-item[aria-current="page"] {
  background: var(--color-bg-cream);
}

.nav-dropdown-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-sm);
  background: var(--color-brand-tint);
  color: var(--color-brand);
}

.nav-dropdown-item-icon svg {
  width: 19px;
  height: 19px;
}

.nav-dropdown-item-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  min-width: 0;
}

.nav-dropdown-item-name {
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--color-ink);
}

.nav-dropdown-item-desc {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-muted);
}

.nav-dropdown-featured {
  position: relative;
  overflow: hidden;
  flex: 0 0 15rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 1.75rem;
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, var(--color-brand), var(--color-brand-dark));
  color: #fff;
  text-decoration: none;
  transition: transform 0.25s var(--ease);
}

.nav-dropdown-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.09) 0, rgba(255, 255, 255, 0.09) 1.5px, transparent 1.5px, transparent 20px);
  pointer-events: none;
}

.nav-dropdown-featured > * {
  position: relative;
}

.nav-dropdown-featured:hover,
.nav-dropdown-featured:focus-visible {
  transform: translateY(-2px);
}

.nav-dropdown-featured-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.nav-dropdown-featured-icon svg {
  width: 18px;
  height: 18px;
}

.nav-dropdown-featured-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.nav-dropdown-featured-label {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-soft);
}

.nav-dropdown-featured h3 {
  margin: 0.2em 0 0;
  font-size: 0.92rem;
  line-height: 1.3;
  color: #fff;
}

.nav-dropdown-featured-cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #fff;
  color: var(--color-brand);
  font-size: 0;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.nav-dropdown-featured-cta svg {
  flex-shrink: 0;
}

.nav-dropdown-featured:hover .nav-dropdown-featured-cta,
.nav-dropdown-featured:focus-visible .nav-dropdown-featured-cta {
  transform: translateX(2px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
}

.nav-toggle-bar {
  width: 100%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
  background: linear-gradient(180deg, var(--color-bg-cream), var(--color-bg) 70%);
}

.hero-service,
.hero-about {
  z-index: 3;
  box-shadow: 0 20px 40px -22px rgba(10, 10, 10, 0.18);
}

.hero-about .lede {
  max-width: none;
}

.hero-includes-card {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.hero-includes-label {
  margin: 0 0 1em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.hero-includes-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero-includes-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65em;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.hero-includes-list svg {
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--color-brand);
}

/* ---------- Service detail page: benefits ---------- */
.service-benefits-panel {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 3.75rem);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.service-benefits-intro {
  max-width: 34rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.service-benefits-intro p {
  margin: 0;
  color: var(--color-ink-soft);
}

.service-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 2.75rem;
}

.service-benefit {
  position: relative;
  padding-top: 2.25rem;
  border-top: 1px solid var(--color-line);
}

.service-benefit-num {
  position: absolute;
  top: -0.6rem;
  right: 0;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-brand-soft);
  line-height: 1;
}

.service-benefit h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4em;
}

.service-benefit p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

/* Home hero: single centered column (no side illustration), tall enough
   that centering the content block vertically is actually noticeable.
   Background is transparent here (not the shared .hero gradient) so the
   page-wide fixed glow/rain layers show through it exactly the same as
   every other section, with no visible seam at the hero's own edge. */
.page-home .hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 82vh;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  background: none;
}

/* Decorative glow layer sits behind everything else in the Hero; lift
   the actual content above it. */
.hero > .wrap {
  position: relative;
  z-index: 1;
}

/* ---------- Home: soft pink/bordeaux glow, fixed over the whole page ---------- */
.page-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-glow-spot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(151, 38, 41, 0.09) 0%,
    rgba(207, 162, 163, 0.05) 55%,
    rgba(151, 38, 41, 0) 80%
  );
  filter: blur(100px);
}

.page-glow-spot-a {
  width: 42rem;
  height: 42rem;
  top: -14rem;
  left: -12rem;
}

.page-glow-spot-b {
  width: 38rem;
  height: 38rem;
  bottom: -16rem;
  right: -12rem;
}

.page-glow-spot-c {
  width: 32rem;
  height: 32rem;
  top: 38%;
  left: 55%;
  opacity: 0.7;
}

/* ---------- Home: falling service icons, fixed over the whole page ---------- */
.page-rain {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s var(--ease);
}

.page-rain.is-hidden {
  opacity: 0;
}

.page-rain-icon {
  position: absolute;
  top: -4rem;
  left: var(--x, 50%);
  width: 2rem;
  height: 2rem;
  color: var(--color-brand);
  opacity: 0;
}

.page-rain-icon.is-falling {
  animation: page-rain-fall var(--fall-duration, 8s) cubic-bezier(0.45, 0, 1, 1) 1;
}

.page-rain-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.page-rain-sway {
  animation: page-rain-sway var(--sway-duration, 2.6s) ease-in-out infinite;
}

@keyframes page-rain-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  6% {
    opacity: var(--icon-opacity, 0.15);
  }
  92% {
    opacity: var(--icon-opacity, 0.15);
  }
  100% {
    transform: translateY(110vh) rotate(var(--rotate, 30deg));
    opacity: 0;
  }
}

@keyframes page-rain-sway {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(var(--sway, 14px));
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(calc(var(--sway, 14px) * -1));
  }
}

/* Sections/footer content sits above the rain layer (z-index: 1); each
   section's own background stays below it since the section box itself
   is never given a competing z-index. */
.page-home main > section > .wrap,
.page-home main > .carousel-section > .carousel,
.page-home .site-footer {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .page-rain-icon {
    animation: none !important;
    top: 6%;
    opacity: var(--icon-opacity, 0.15);
  }

  .page-rain-sway {
    animation: none !important;
  }
}

.hero-scroll-cue {
  width: fit-content;
  margin-inline: auto;
  margin-top: clamp(2rem, 5vw, 3rem);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05em;
  color: var(--color-muted);
  text-decoration: none;
  animation: hero-scroll-cue-bounce 2s ease-in-out infinite;
}

.hero-scroll-cue-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
  color: var(--color-brand);
}

@keyframes hero-scroll-cue-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-inner {
  max-width: 52rem;
}

.page-home .hero-inner {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}

.page-home .hero-inner .lede {
  max-width: 100%;
  margin-inline: auto;
}

.hero h1 {
  margin-bottom: 0.4em;
}

.page-home .eyebrow-split {
  margin-top: -2.25rem;
  margin-bottom: 2.1em;
  font-size: 0.85rem;
}

.page-home .hero h1 {
  margin-bottom: 0.3em;
}

/* ---------- Hero metrics (4-up, no card background) ---------- */
.hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

.hero-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  transition: transform 0.3s var(--ease);
}

.hero-metric:hover {
  transform: translateY(-4px);
}

.hero-metric-number {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.6vw + 1rem, 2.25rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-ink);
}

.hero-metric-label {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

.hero-metric-label svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  color: var(--color-brand);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

.hero-metric:hover .hero-metric-label svg {
  color: var(--color-brand-dark);
  transform: scale(1.15);
}

/* ---------- Video carousel ---------- */
.carousel-section {
  position: relative;
  margin-top: -1.5rem;
  padding-block: clamp(2.5rem, 4.5vw, 3.5rem) clamp(3rem, 5.5vw, 4rem);
  overflow: hidden;
  border-block: 1px solid var(--color-line);
  background-color: var(--color-bg);
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(151, 38, 41, 0.07) 0,
    rgba(151, 38, 41, 0.07) 1.5px,
    transparent 1.5px,
    transparent 26px
  );
  box-shadow: inset 0 16px 28px -20px rgba(10, 10, 10, 0.35), inset 0 -16px 28px -20px rgba(10, 10, 10, 0.35);
}

/* A real scrollbar-style rail + thumb: the thumb's position reflects the
   carousel's actual scroll progress (not the cursor), and it's always
   visible — a conventional, self-explanatory control rather than a
   floating tooltip that has to be decoded. */
.carousel-drag-rail {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 3vw, 2.1rem);
  transform: translateX(-50%);
  width: min(60%, 26rem);
  height: 3px;
  border-radius: 2px;
  background: var(--color-line-strong);
  z-index: 1;
}

/* A real scrubber: drag the thumb (or click the rail) to jump the
   carousel to that point — not just a passive position indicator. */
.carousel-drag-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.35em;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-brand);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 10px -3px rgba(151, 38, 41, 0.55);
  cursor: grab;
  transition: width 0.25s var(--ease), height 0.25s var(--ease), padding 0.25s var(--ease), background 0.2s var(--ease), left 0.05s linear;
}

/* Bigger invisible hit-area so a 1.1rem dot is still easy to grab. */
.carousel-drag-thumb::before {
  content: "";
  position: absolute;
  inset: -0.75rem;
}

.carousel-drag-thumb svg,
.carousel-drag-thumb span {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}

.carousel-drag-thumb.is-active {
  width: auto;
  height: auto;
  padding: 0.5em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--color-brand-dark);
  cursor: grabbing;
  transition: width 0.25s var(--ease), height 0.25s var(--ease), padding 0.25s var(--ease), background 0.2s var(--ease), left 0.05s linear;
}

.carousel-drag-thumb.is-active svg,
.carousel-drag-thumb.is-active span {
  opacity: 1;
}

.carousel {
  width: 100%;
}

.carousel-track {
  display: flex;
  width: max-content;
  will-change: transform;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.carousel-track.is-dragging {
  cursor: grabbing;
}

.carousel-group {
  display: contents;
}

.carousel-item {
  flex: none;
  width: clamp(220px, 30vw, 340px);
  aspect-ratio: 3 / 4;
  margin-right: 1.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-brand-tint), var(--color-bg-cream));
  box-shadow: 0 24px 36px -14px rgba(0, 0, 0, 0.4), 0 -14px 24px -16px rgba(0, 0, 0, 0.25);
}

.carousel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Cómo trabajamos: video + steps ---------- */
.how-we-work-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: stretch;
  max-width: 85%;
  margin-inline: auto;
}

.how-we-work-media {
  max-width: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
}

.how-we-work-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Process timeline: connected steps, no boxes ---------- */
.process-timeline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.process-step {
  position: relative;
  display: flex;
  gap: 1.5rem;
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

.process-step:last-child {
  padding-bottom: 0;
}

.process-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 2.75rem;
  bottom: 0;
  width: 1px;
  background: var(--color-line-strong);
}

.process-step-marker {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid var(--color-brand);
  background: var(--color-bg-cream);
  color: var(--color-brand);
  font-family: var(--font-heading);
  font-weight: 800;
}

.process-step-body h3 {
  margin-bottom: 0.3em;
}

.process-step-body p {
  margin: 0;
  color: var(--color-muted);
}

.services-section {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(151, 38, 41, 0.07) 0,
    rgba(151, 38, 41, 0.07) 1.5px,
    transparent 1.5px,
    transparent 26px
  );
  /* Recessed/sunken look: inner shadows at the top and bottom edges make
     this section read as "deeper", so the sections before/after it feel
     like they float above it rather than just sitting flush. */
  box-shadow: inset 0 16px 28px -20px rgba(10, 10, 10, 0.35), inset 0 -16px 28px -20px rgba(10, 10, 10, 0.35);
}

.page-home .services-section {
  padding-bottom: clamp(6rem, 11vw, 8.5rem);
}

/* ---------- Service cards: asymmetric mosaic on desktop ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: -5rem;
}

.page-home .card-grid {
  margin-top: -2rem;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: card-badge-pulse 2.2s ease-out infinite;
}

@keyframes card-badge-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65);
  }
  70% {
    box-shadow: 0 0 0 0.6rem rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-brand);
  transform: translateY(-4px);
}

/* Fixed height (not flex-grow) so the icon area is the same size on every
   card regardless of how tall the card itself is — that keeps the index
   number and title starting at the same offset across a row, even when
   neighboring cards differ in height within the mosaic. */
.card-media {
  height: clamp(4.5rem, 8vw, 6rem);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: clamp(1.5rem, 3vw, 1.9rem);
}

.card-media svg {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-brand);
  transition: transform 0.4s var(--ease);
}

/* Each card gets its own distinct icon animation on hover, instead of one
   generic scale+rotate repeated ten times. */
.card:nth-child(1):hover .card-media svg {
  animation: icon-pulse 0.6s var(--ease);
}

.card:nth-child(2):hover .card-media svg {
  animation: icon-drop 0.6s var(--ease);
}

.card:nth-child(3):hover .card-media svg {
  animation: icon-twinkle 0.6s var(--ease);
}

.card:nth-child(4):hover .card-media svg {
  animation: icon-grow 0.5s var(--ease);
  transform-origin: bottom center;
}

.card:nth-child(5):hover .card-media svg {
  animation: icon-flip 0.6s var(--ease);
}

.card:nth-child(6):hover .card-media svg {
  animation: icon-wiggle 0.5s var(--ease);
}

.card:nth-child(7):hover .card-media svg {
  animation: icon-spin 0.6s var(--ease);
}

.card:nth-child(8):hover .card-media svg {
  animation: icon-scan 0.6s var(--ease);
}

.card:nth-child(9):hover .card-media svg {
  animation: icon-flicker 0.7s var(--ease);
}

.card:nth-child(10):hover .card-media svg {
  animation: icon-fly 0.6s var(--ease);
}

.card:hover .card-media svg {
  color: var(--color-brand-dark);
}

@keyframes icon-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
  }
  55% {
    transform: scale(1.05);
  }
  75% {
    transform: scale(1.2);
  }
}

@keyframes icon-drop {
  0% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-0.5rem);
  }
  60% {
    transform: translateY(0.15rem);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes icon-twinkle {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.25) rotate(15deg);
  }
}

@keyframes icon-grow {
  0% {
    transform: scaleY(1);
  }
  40% {
    transform: scaleY(0.75);
  }
  100% {
    transform: scaleY(1.2);
  }
}

@keyframes icon-flip {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

@keyframes icon-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-12deg);
  }
  75% {
    transform: rotate(12deg);
  }
}

@keyframes icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes icon-scan {
  0%,
  100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-0.35rem) rotate(-8deg);
  }
  70% {
    transform: translateX(0.35rem) rotate(8deg);
  }
}

@keyframes icon-flicker {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.15);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.95);
    opacity: 1;
  }
  75% {
    transform: scale(1.2);
    opacity: 0.75;
  }
}

@keyframes icon-fly {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  60% {
    transform: translate(0.4rem, -0.5rem) rotate(12deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: clamp(1.5rem, 2.5vw, 1.9rem);
  padding-top: 0;
}

.card-index {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-brand-soft);
  margin-bottom: 0.75em;
}

.card h3,
.card-body h2 {
  font-size: clamp(1.2rem, 1vw + 1rem, 1.4rem);
  margin-bottom: 0.4em;
}

.card p {
  font-size: 0.95rem;
  margin-bottom: 1.25em;
}

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: auto;
  padding: 0.5em 1em;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-pill);
  color: var(--color-brand);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.card-cta svg {
  transition: transform 0.3s var(--ease);
}

.card-cta:hover,
.card-cta:focus-visible {
  background: var(--color-brand);
  color: #fff;
}

.card-cta:hover svg,
.card-cta:focus-visible svg {
  transform: translateX(3px);
}

/* A couple of cards get an inverted, contrasting treatment so the mosaic
   isn't ten identical light tiles in a row. */
.card--dark {
  background: #7e1f22;
  border-color: #7e1f22;
}

.card--dark .card-media svg {
  color: #fff;
}

.card--dark:hover .card-media svg {
  color: var(--color-brand-soft);
}

.card--dark h3,
.card--dark .card-body h2 {
  color: #fff;
}

.card--dark p {
  color: rgba(255, 255, 255, 0.75);
}

.card--dark .card-index {
  color: var(--color-brand-soft);
}

.card--dark .card-cta {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.card--dark .card-cta:hover,
.card--dark .card-cta:focus-visible {
  background: #fff;
  color: var(--color-brand-dark);
}

.card--dark .card-badge {
  background: #fff;
  color: var(--color-brand-dark);
}

/* A third tone — soft light pink, so the mosaic reads as cream / soft
   pink / dark bordeaux, not just two. */
.card--brand {
  background: var(--color-brand-soft);
  border-color: var(--color-brand-soft);
}

.card--brand .card-media svg {
  color: var(--color-brand-dark);
}

.card--brand:hover .card-media svg {
  color: var(--color-brand);
}

.card--brand h3,
.card--brand .card-body h2 {
  color: var(--color-ink);
}

.card--brand p {
  color: var(--color-ink-soft);
}

.card--brand .card-index {
  color: var(--color-brand-dark);
}

.card--brand .card-cta {
  border-color: var(--color-brand-dark);
  color: var(--color-brand-dark);
}

.card--brand .card-cta:hover,
.card--brand .card-cta:focus-visible {
  background: var(--color-brand-dark);
  color: #fff;
}

.card--brand .card-badge {
  background: var(--color-brand-dark);
  color: #fff;
}

/* Mosaic only makes sense with room to breathe — one big feature card,
   two small squares, three wide ones, all in a 4-column bento grid. */
@media (min-width: 901px) {
  .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(clamp(9rem, 13vw, 12rem), auto);
    grid-auto-flow: dense;
  }

  .card-grid > .card:nth-child(2),
  .card-grid > .card:nth-child(5) {
    grid-column: span 2;
    grid-row: span 1;
  }

  .card-grid > .card:nth-child(1),
  .card-grid > .card:nth-child(3),
  .card-grid > .card:nth-child(4),
  .card-grid > .card:nth-child(6) {
    grid-column: span 1;
    grid-row: span 1;
    align-self: stretch;
  }
}

/* ---------- FAQ accordion ---------- */
.faq-list {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
}

.faq-item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 0.25rem 1.5rem;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-brand);
  transition: transform 0.3s var(--ease);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  padding-bottom: 1.25rem;
  margin: 0;
  font-size: 0.95rem;
}

/* ---------- Home FAQ: two-column layout with a custom accordion ---------- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.faq-intro-text {
  color: var(--color-muted);
  font-weight: 400;
  margin-bottom: 1.75rem;
}

.button-muted {
  background: #b85d5f;
  border-color: #b85d5f;
  color: #fff;
}

.button-muted:hover,
.button-muted:focus-visible {
  background: #a34d4f;
  border-color: #a34d4f;
  color: #fff;
}

.faq-panel {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.faq-row {
  position: relative;
  border-bottom: 1px solid var(--color-line);
  transition: background-color 0.25s var(--ease);
}

.faq-row:last-child {
  border-bottom: none;
}

.faq-row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--color-brand);
  transform: scaleY(0);
  transition: transform 0.25s var(--ease);
}

.faq-row:hover {
  background: var(--color-bg-cream);
}

.faq-row.is-open {
  background: var(--color-bg-cream);
}

.faq-row.is-open::before {
  transform: scaleY(1);
}

.faq-row-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.4rem 1.5rem;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
}

.faq-row-index {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--color-brand-soft);
}

.faq-row-question-text {
  flex: 1;
  transition: color 0.25s var(--ease), font-weight 0.25s var(--ease);
}

.faq-row.is-open .faq-row-question-text {
  color: var(--color-brand-dark);
  font-weight: 700;
}

.faq-row-icon {
  position: relative;
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--color-brand);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

.faq-row-icon::before,
.faq-row-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.faq-row-icon::before {
  width: 0.7rem;
  height: 2px;
}

.faq-row-icon::after {
  width: 2px;
  height: 0.7rem;
}

.faq-row.is-open .faq-row-icon {
  transform: rotate(45deg);
  background: var(--color-brand-dark);
}

.faq-row-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease-in-out;
}

.faq-row-answer p {
  margin: 0;
  padding: 0 1.5rem 1.4rem 3.65rem;
  color: var(--color-muted);
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .faq-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------- Illustration placeholder ----------
   Composición abstracta a partir de formas y color de marca — ocupa el
   lugar de futuras ilustraciones/fotografía definitivas. Esferas con
   acabado "cristal/gel" a base de radial-gradient, a juego con la
   textura del logo. Sustituir por arte final cuando esté disponible. */
.illustration {
  position: relative;
  width: 100%;
  max-width: 38rem;
  aspect-ratio: 1;
  margin-inline: auto;
}

.illustration-orbit {
  position: absolute;
  inset: 0;
  display: block;
}

.illustration-shape {
  position: absolute;
  border-radius: 50%;
}

.illustration-shape-a {
  inset: 6% 18% auto auto;
  width: 62%;
  height: 62%;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 9%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 72% 78%, rgba(151, 38, 41, 0.4) 0%, transparent 46%),
    radial-gradient(circle at 22% 82%, rgba(207, 162, 163, 0.55) 0%, transparent 42%),
    radial-gradient(circle at 50% 50%, #ffe1e3 0%, var(--color-brand-tint) 55%, var(--color-brand-soft) 100%);
  box-shadow: 0 24px 40px -20px rgba(76, 12, 16, 0.35);
  animation: illustration-float-a 9s var(--ease) infinite;
}

.illustration-shape-b {
  inset: auto auto 4% 6%;
  width: 44%;
  height: 44%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 10%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 70% 72%, rgba(76, 12, 16, 0.4) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, #e69aa0 0%, var(--color-brand-soft) 60%, var(--color-brand) 100%);
  opacity: 0.75;
  box-shadow: 0 18px 28px -16px rgba(76, 12, 16, 0.4);
  animation: illustration-float-b 7s var(--ease) infinite;
}

.illustration-ring {
  position: absolute;
  inset: 12%;
  border: 1.5px dashed var(--color-brand-soft);
  border-radius: 50%;
  animation: illustration-spin 22s linear infinite;
}

.illustration-core {
  position: absolute;
  inset: 32%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 11%, rgba(255, 255, 255, 0) 26%),
    radial-gradient(circle at 74% 80%, rgba(76, 12, 16, 0.65) 0%, transparent 48%),
    radial-gradient(circle at 20% 78%, rgba(207, 162, 163, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 50% 45%, #c8383f 0%, var(--color-brand) 55%, var(--color-brand-dark) 100%);
  box-shadow: 0 26px 44px -16px rgba(76, 12, 16, 0.55), inset 0 2px 6px rgba(255, 255, 255, 0.35);
  animation: illustration-pulse 5s var(--ease) infinite;
}

.illustration-core svg {
  width: 38%;
  height: 38%;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(76, 12, 16, 0.4));
}

.illustration-sm {
  max-width: 9rem;
  margin: 0 auto 1.5rem;
}

@keyframes illustration-float-a {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-17px, 20px);
  }
}

@keyframes illustration-float-b {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(17px, -17px);
  }
}

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

@keyframes illustration-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

/* ---------- Blog carousel ---------- */
.blog-carousel-section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--color-bg-cream);
}

.blog-carousel-heading {
  text-align: center;
  font-size: clamp(1.8rem, 1.2vw + 1.5rem, 2.5rem);
  font-weight: 800;
  color: var(--color-ink);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.blog-carousel-viewport {
  overflow: hidden;
}

.blog-carousel-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: clamp(1.5rem, 10vw, 14rem);
  padding-block: 0.5rem 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.blog-carousel-track::-webkit-scrollbar {
  display: none;
}

.blog-carousel-group {
  display: contents;
}

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.45s var(--ease), box-shadow 0.3s var(--ease), opacity 0.45s var(--ease);
}

/* Carousel context only: fixed card width, snap, and the dimmed/scaled
   "not the active slide" resting state. Grid cards elsewhere on the page
   stay full-width and fully visible. */
.blog-carousel-track .blog-card {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: min(78vw, 21rem);
  opacity: 0.55;
  transform: scale(0.92);
}

.blog-carousel-track:not(.is-ready) .blog-card {
  opacity: 1;
  transform: none;
}

.blog-card.is-active {
  opacity: 1;
  transform: scale(1);
}

.blog-card:hover {
  transform: translateY(-4px) scale(1);
  opacity: 1;
  box-shadow: var(--shadow-card-hover);
}

.blog-card-top {
  position: relative;
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  color: #fff;
  box-shadow: inset 0 -3.5rem 3rem -2rem rgba(0, 0, 0, 0.4);
}

.blog-card--brand .blog-card-top {
  background: linear-gradient(155deg, var(--color-brand), var(--color-brand-dark));
}

.blog-card--soft .blog-card-top {
  background: linear-gradient(155deg, var(--color-brand-soft), var(--color-brand));
}

.blog-card--dark .blog-card-top {
  background: linear-gradient(155deg, #1c1c1c, var(--color-brand-dark));
}

.blog-card--dark .blog-card-top::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  right: -2.5rem;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(151, 38, 41, 0.85), rgba(151, 38, 41, 0) 70%);
  filter: blur(4px);
}

.blog-card-badge {
  position: relative;
  align-self: flex-start;
  margin-bottom: auto;
  padding: 0.3em 0.85em;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.2);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.blog-card-top h3 {
  position: relative;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0;
  color: #fff;
}

.blog-card-kicker {
  position: relative;
  margin: 0.4em 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.blog-card-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.15rem 1.4rem 1.4rem;
  background: var(--color-bg);
}

.blog-card-bottom p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.blog-card-date {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  text-transform: uppercase;
}

.blog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--color-brand);
  font-size: 0.82rem;
  font-weight: 700;
}

.blog-card-cta svg {
  transition: transform 0.3s var(--ease);
}

.blog-card:hover .blog-card-cta svg,
.blog-card:focus-visible .blog-card-cta svg {
  transform: translateX(3px);
}

.blog-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.blog-carousel-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-line-strong);
  cursor: pointer;
  transition: width 0.3s var(--ease), background-color 0.3s var(--ease);
}

.blog-carousel-dot.is-active {
  width: 1.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.blog-carousel-play {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
}

.blog-carousel-play-icon {
  display: none;
}

.blog-carousel-pause-icon {
  display: block;
}

.blog-carousel-play.is-paused .blog-carousel-play-icon {
  display: block;
}

.blog-carousel-play.is-paused .blog-carousel-pause-icon {
  display: none;
}

/* ---------- Blog: "sigue leyendo" grid + topic filters ---------- */
.blog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.blog-filter-btn {
  padding: 0.5em 1.1em;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.blog-filter-btn:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.blog-filter-btn.is-active {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: #fff;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

.blog-grid .blog-card {
  width: auto;
}

.blog-grid .blog-card.is-filtered-out {
  display: none;
}

.blog-grid-empty {
  margin: 2rem 0 0;
  text-align: center;
  color: var(--color-muted);
}

@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .blog-carousel-track {
    padding-inline: 1.25rem;
  }

  .blog-card {
    width: 82vw;
  }
}

/* ---------- Placeholder / status blocks ---------- */
.status-block {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  background: var(--color-bg-cream);
}

/* ---------- Quiénes somos: founders ---------- */
.founders-row {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: 1.75rem;
  align-items: stretch;
}

.founder-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.founders-photo {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  text-align: center;
  background: linear-gradient(155deg, var(--color-brand), var(--color-brand-dark));
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.founders-photo:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.founders-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.09) 0, rgba(255, 255, 255, 0.09) 1.5px, transparent 1.5px, transparent 22px);
  pointer-events: none;
}

.founders-photo > * {
  position: relative;
}

.founders-photo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.founders-photo-icon svg {
  width: 30px;
  height: 30px;
}

.founders-photo-label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

.founder-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
}

.founder-role {
  margin: -0.6rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-brand);
}

.founder-bio {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.founder-quote {
  margin: 0;
  padding-left: 1.1em;
  border-left: 3px solid var(--color-brand);
}

.founder-quote p {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-ink);
}

/* ---------- Quiénes somos: values ---------- */
.values-panel {
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 3.75rem);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.values-panel-intro {
  max-width: 34rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.values-panel-intro p {
  margin: 0;
  color: var(--color-ink-soft);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 2.25rem;
}

.value-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1.5rem;
  margin-top: 1.6rem;
  border-top: 1px solid var(--color-line);
}

.value-item-num {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  right: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-brand-soft);
  line-height: 1;
}

.value-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  background: var(--color-brand-tint);
  color: var(--color-brand);
}

.value-item-icon svg {
  width: 18px;
  height: 18px;
}

.value-item h3 {
  font-size: 1rem;
  margin: 0.2em 0 0;
}

.value-item p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

/* ---------- Quiénes somos: methodology (two-column with photo) ---------- */
.methodology-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.methodology-copy {
  max-width: none;
  margin: 0;
  text-align: left;
}

.methodology-copy .section-label,
.methodology-copy p {
  margin-inline: 0;
}

.methodology-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--color-line-strong);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.methodology-photo:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.methodology-photo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--color-brand-tint);
  color: var(--color-brand);
}

.methodology-photo-icon svg {
  width: 26px;
  height: 26px;
}

.methodology-photo-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
}

/* ---------- Forms ---------- */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.form {
  display: grid;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.field label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-ink-soft);
}

.field input,
.field select,
.field textarea {
  border: 1px solid var(--color-line-strong);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 0.9em 1.1em;
  font-size: 1rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--color-brand);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px var(--color-brand-tint);
}

.field textarea {
  resize: vertical;
  min-height: 9rem;
}

.field-required::after {
  content: " *";
  color: var(--color-brand);
}

/* ---------- Service tags: multi-select as pill toggles ---------- */
.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.service-tag {
  position: relative;
  display: inline-flex;
}

.service-tag input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.service-tag label {
  display: inline-flex;
  align-items: center;
  padding: 0.55em 1.1em;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.service-tag label:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.service-tag input:checked + label {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

.service-tag input:focus-visible + label {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.service-tags-error {
  margin: 0.6em 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-brand);
}

.form-note {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-ink-soft);
  cursor: pointer;
}

.form-consent input {
  flex-shrink: 0;
  margin-top: 0.2em;
  accent-color: var(--color-brand);
}

.form-consent a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.hidden-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-info {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-card);
}

.contact-form-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-card);
}

.contact-info-list {
  display: grid;
  gap: 1.1rem;
  margin: 0;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.contact-info-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-brand-tint);
  color: var(--color-brand);
}

.contact-info-item-icon svg {
  width: 16px;
  height: 16px;
}

.contact-info-item-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-info-item dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.15em;
}

.contact-info-item dd {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.contact-info-item a {
  text-decoration: none;
}

.contact-info-item a:hover {
  color: var(--color-brand);
}

.contact-info-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand);
}

/* ---------- Contact: "Otras vías" card — promises, channels, details ---------- */
.contact-info-heading {
  margin: 0.2em 0 1.5rem;
  font-size: 1.3rem;
}

.contact-info-divider {
  margin: 1.75rem 0;
  border-top: 1px solid var(--color-line);
}

.contact-info-promises {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.contact-info-promise {
  padding-top: 0.6rem;
  border-top: 2px solid var(--color-brand);
}

.contact-info-promise-title {
  margin: 0 0 0.2em;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-ink);
}

.contact-info-promise-text {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.contact-quick-channels-label {
  margin: 0 0 0.75em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink-soft);
}

.contact-quick-channels-label {
  margin: 0 0 0.75em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink-soft);
}

.contact-quick-channels-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.contact-quick-channel {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.2em;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.contact-quick-channel-icon {
  display: flex;
  color: var(--color-brand);
}

.contact-quick-channel:hover,
.contact-quick-channel:focus-visible {
  border-color: var(--color-brand);
  background: var(--color-brand-tint);
}

.contact-form-head {
  margin-bottom: 1.5rem;
  text-align: left;
  max-width: none;
}

@media (max-width: 420px) {
  .contact-info-promises {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-ink-soft);
  padding-top: clamp(3.5rem, 7vw, 5rem);
  border-top: 1px solid var(--color-line);
}

.site-footer .brand {
  color: var(--color-ink);
}

.site-footer .brand-sub {
  color: var(--color-muted);
}

/* ---------- Footer: newsletter panel (full width, spacious) ---------- */
.footer-newsletter-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(-1.5rem, -3vw, -2.5rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background-color: #7e1f22;
  box-shadow: var(--shadow-card-hover);
}

/* "Echo" ripple motif. */
.footer-newsletter-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(
    circle at 100% 0%,
    rgba(255, 255, 255, 0.08) 0,
    rgba(255, 255, 255, 0.08) 1.5px,
    transparent 1.5px,
    transparent 28px
  );
  pointer-events: none;
}

.footer-newsletter-panel > * {
  position: relative;
}

.footer-newsletter-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-soft);
  margin-bottom: 0.6em;
}

.footer-newsletter-copy h2 {
  color: #fff;
  font-size: clamp(1.35rem, 1vw + 1.15rem, 1.75rem);
  margin-bottom: 0.35em;
}

.footer-newsletter-copy p {
  margin: 0;
  max-width: 36ch;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.8);
}

.footer-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-newsletter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.footer-newsletter-row input {
  flex: 1 1 9rem;
  min-width: 0;
  padding: 0.8em 1.2em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.footer-newsletter-row input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.footer-newsletter-row input:focus {
  outline: none;
  border-color: var(--color-brand-soft);
  background: rgba(255, 255, 255, 0.14);
}

.footer-newsletter-row .button {
  flex: 0 0 auto;
  white-space: nowrap;
  background: #fff;
  border-color: #fff;
  color: var(--color-brand);
  animation: footer-newsletter-button-echo 2.4s ease-out infinite;
}

.footer-newsletter-row .button:hover,
.footer-newsletter-row .button:focus-visible {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: #fff;
}

@keyframes footer-newsletter-button-echo {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  }
  70% {
    box-shadow: 0 0 0 0.9rem rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.footer-newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.footer-newsletter-consent input {
  flex-shrink: 0;
  margin-top: 0.2em;
  accent-color: var(--color-brand-soft);
}

.footer-newsletter-consent a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.footer-newsletter-consent a:hover,
.footer-newsletter-consent a:focus-visible {
  color: #fff;
}

/* ---------- Footer: soft glow + top row + bottom row ---------- */
/* Same quiet brand-glow language as the hero's page-glow, scaled down and
   anchored behind the logo instead of a literal graphic. */
.footer-glow {
  position: absolute;
  left: clamp(-3rem, -1vw, -1.5rem);
  top: 50%;
  transform: translateY(-50%);
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(151, 38, 41, 0.16) 0%, rgba(151, 38, 41, 0) 70%);
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
  animation: footer-glow-breathe 6s ease-in-out infinite;
}

@keyframes footer-glow-breathe {
  0%, 100% {
    opacity: 0.7;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
  }
}

.footer-inner {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.footer-inner > *:not(.footer-glow) {
  position: relative;
  z-index: 1;
}

.footer-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.footer-nav-row {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  flex-wrap: wrap;
}

.footer-nav-row a {
  position: relative;
  color: var(--color-ink-soft);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.25s var(--ease);
}

.footer-nav-row a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3em;
  width: 100%;
  height: 1.5px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.footer-nav-row a:hover,
.footer-nav-row a:focus-visible {
  color: var(--color-brand);
}

.footer-nav-row a:hover::after,
.footer-nav-row a:focus-visible::after {
  transform: scaleX(1);
}

.footer-socials {
  display: flex;
  gap: 0.6rem;
}

.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-brand-tint);
  color: var(--color-brand);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

.footer-social-icon:hover,
.footer-social-icon:focus-visible {
  background: var(--color-brand);
  color: #fff;
  transform: translateY(-2px);
}

.footer-divider {
  height: 1px;
  background: var(--color-line);
}

.footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.footer-tagline {
  margin: 0;
  font-size: 0.92rem;
  max-width: 32ch;
}

.footer-contact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.footer-chip {
  padding: 0.5em 1em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.footer-chip:not(.footer-chip-static):hover,
.footer-chip:not(.footer-chip-static):focus-visible {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-top: 1px solid var(--color-line);
  padding-block: 1.25rem;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-right: clamp(2rem, 6vw, 5rem);
}

.footer-legal-links a {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--color-brand);
}

/* ---------- Legal pages (Aviso Legal / Privacidad / Cookies) ---------- */
.hero-legal {
  position: relative;
  z-index: 2;
  padding-block: 0;
}

.legal-hero-card {
  background: var(--color-bg);
  box-shadow: 0 20px 40px -22px rgba(10, 10, 10, 0.16);
  padding-block: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 1.75rem);
}

.hero-legal .hero-layout {
  gap: clamp(2rem, 4vw, 3rem);
}

.legal-body-section {
  position: relative;
  padding-top: clamp(2rem, 4vw, 2.75rem);
  background-color: var(--color-bg-cream);
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(151, 38, 41, 0.07) 0,
    rgba(151, 38, 41, 0.07) 1.5px,
    transparent 1.5px,
    transparent 26px
  );
}

.hero-legal .hero-inner {
  max-width: 40rem;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.legal-meta p {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  padding: 0.45em 0.9em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-bg-cream);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-ink);
}

.legal-meta p span {
  font-weight: 500;
  color: var(--color-muted);
}

.legal-layout {
  display: grid;
  grid-template-columns: 21rem minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 6rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: 0 16px 32px -20px rgba(10, 10, 10, 0.16);
}

.legal-toc-label {
  margin: 0 0 1em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.legal-toc li {
  border-top: 1px solid var(--color-line);
}

.legal-toc li:first-child {
  border-top: none;
}

.legal-toc ol a {
  display: block;
  padding-block: 0.6em;
  padding-left: 0.8em;
  border-left: 2px solid transparent;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-ink-soft);
  text-decoration: none;
  overflow-wrap: break-word;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.legal-toc ol a:hover,
.legal-toc ol a:focus-visible {
  color: var(--color-brand);
}

.legal-toc ol a.is-active {
  color: var(--color-brand);
  font-weight: 700;
  border-left-color: var(--color-brand);
}

.blog-sources {
  margin-top: 2.5em;
  padding-top: 1.5em;
  border-top: 1px solid var(--color-line);
}

.blog-sources-label {
  margin: 0 0 0.8em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.blog-sources ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.blog-sources li {
  font-size: 0.9rem;
}

.blog-sources a {
  color: var(--color-brand);
}

.blog-share {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}

.blog-share-icons {
  display: flex;
  gap: 0.5rem;
}

.blog-share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-ink-soft);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.blog-share-icon:hover,
.blog-share-icon:focus-visible {
  background: var(--color-brand);
  color: #fff;
}

.blog-contact-card {
  margin-top: 1.75rem;
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-md);
  background: var(--color-bg-cream);
}

.blog-contact-card .button {
  width: 100%;
  justify-content: center;
  color: #fff;
}

.blog-contact-card-title {
  margin: 0 0 0.3em;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-ink);
}

.blog-contact-card-text {
  margin: 0 0 0.9em;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.legal-content {
  max-width: none;
}

.legal-content-card {
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: 0 20px 40px -22px rgba(10, 10, 10, 0.16);
}

/* Scoped override — blog posts only: less space before "Artículos
   relacionados", and an inset shadow along the bottom edge of the
   patterned section so it reads as dropping down into the solid
   section below (same "pattern meets solid" technique used by
   .quienes-somos-section). Legal pages (aviso legal, privacidad,
   cookies) keep the default .legal-body-section spacing/shadow. */
.section.blog-body-section {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: inset 0 -24px 40px -20px rgba(10, 10, 10, 0.3);
}

.section.blog-related-section {
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.legal-content h2 {
  font-size: clamp(1.15rem, 0.4vw + 1.05rem, 1.4rem);
  margin-top: 2.5em;
  margin-bottom: 0.6em;
  scroll-margin-top: 6rem;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 1.05rem;
  margin-top: 1.75em;
  margin-bottom: 0.5em;
}

.legal-content p {
  max-width: none;
  margin-bottom: 1em;
  color: var(--color-ink-soft);
  text-align: justify;
  text-justify: inter-word;
}

.legal-content ul {
  margin: 0 0 1em;
  padding-left: 1.25em;
  color: var(--color-ink-soft);
}

.legal-content li {
  margin-bottom: 0.4em;
}

.legal-content a {
  color: var(--color-brand);
}

.legal-content .legal-data-card {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg-cream);
}

.legal-data-card li {
  padding-block: 0.5em;
  border-top: 1px solid var(--color-line);
}

.legal-data-card li:first-child {
  border-top: none;
  padding-top: 0;
}

.legal-data-card li:last-child {
  padding-bottom: 0;
}

.legal-data-card strong {
  display: inline-block;
  min-width: 11rem;
  color: var(--color-ink);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-illustration {
    order: -1;
    max-width: 17rem;
    margin-inline: auto;
  }

  .founders-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .founders-photo {
    order: 2;
    aspect-ratio: 16 / 9;
  }

  .methodology-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .methodology-photo {
    order: -1;
    max-width: 22rem;
    margin-inline: auto;
  }

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

  .service-benefits {
    grid-template-columns: 1fr;
  }

  .service-timeline {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .service-timeline::before {
    left: 1.75rem;
    right: auto;
    top: 1.75rem;
    bottom: 1.75rem;
    height: auto;
    width: 1px;
  }

  .service-timeline-item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .service-video-row {
    flex-direction: column;
  }

  .service-video-row .hero-includes-card {
    flex: 0 0 auto;
  }

  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 0.5rem;
  }

  .legal-toc ol {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }

  .how-we-work-layout {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .page-home .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.5rem;
  }

  .form-layout {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 720px) {
  .nav-toggle {
    display: flex;
  }

  /* The announce bar's fixed max-height was tuned for a single line;
     on narrow screens the text + CTA wrap onto 2-3 lines and were
     getting cropped by overflow:hidden. Give it room to breathe. */
  .announce-bar {
    max-height: 6rem;
  }

  .values-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: 1.75rem 1rem;
  }

  .site-nav {
    position: fixed;
    z-index: 321;
    inset: 0 0 auto auto;
    top: 0;
    height: 100vh;
    width: min(78vw, 20rem);
    background: var(--color-bg);
    border-left: 1px solid var(--color-line);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem var(--gutter);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    box-shadow: -24px 0 48px -20px rgba(10, 10, 10, 0.25);
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .site-nav > ul > li > a {
    font-size: 1.1rem;
  }

  .nav-item-mega {
    width: 100%;
  }

  .nav-mega-trigger {
    width: 100%;
    justify-content: space-between;
    font-size: 1.1rem;
  }

  .nav-mega-panel {
    display: none;
  }

  .nav-mega-accordion {
    flex-direction: column;
    gap: 0.15rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease);
  }

  .nav-item-mega.is-open .nav-mega-accordion {
    display: flex;
    max-height: 30rem;
    padding-top: 0.5rem;
  }

  .nav-mega-accordion a {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5rem 0.25rem;
    font-size: 0.95rem;
    color: var(--color-ink-soft);
    text-decoration: none;
  }

  .nav-mega-accordion a:hover,
  .nav-mega-accordion a:focus-visible {
    color: var(--color-brand);
  }

  .nav-item-dropdown {
    width: 100%;
  }

  .nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    font-size: 1.1rem;
  }

  /* Same simple flat-list accordion as Servicios (.nav-mega-accordion) —
     the rich desktop panel (icons, descriptions, featured card) is
     replaced by it on mobile instead of being squeezed into place. */
  .nav-dropdown-panel {
    display: none;
  }

  .nav-item-dropdown.is-open .nav-mega-accordion {
    display: flex;
    max-height: 30rem;
    padding-top: 0.5rem;
  }

  .nav-cta {
    margin-top: 1.5rem;
  }

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

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-top-row,
  .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-glow {
    width: 14rem;
    height: 14rem;
  }

  .footer-newsletter-panel {
    grid-template-columns: 1fr;
  }

  .footer-newsletter-row .button {
    width: 100%;
  }
}

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