html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: clip;
  max-width: 100%;
}

[id] {
  scroll-margin-top: clamp(4.5rem, 12vh, 7rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--citta-surface);
  color: var(--citta-text);
  font-family: var(--citta-font-body);
  font-size: var(--citta-body);
  line-height: var(--citta-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--citta-font-display);
  color: var(--citta-text);
  line-height: var(--citta-leading-title);
  letter-spacing: var(--citta-tracking-title);
  font-weight: 800;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

::selection {
  background: var(--citta-tint-accent-strong);
  color: var(--citta-text);
}

:focus-visible {
  outline: 2px solid var(--citta-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.u-display {
  font-family: var(--citta-font-display);
  font-weight: 900;
  font-size: var(--citta-display-1);
  line-height: var(--citta-leading-display);
  letter-spacing: var(--citta-tracking-display);
}

.u-display-2 {
  font-size: var(--citta-display-2);
  line-height: 1;
  letter-spacing: var(--citta-tracking-display);
  font-weight: 900;
}

.u-eyebrow {
  font-family: var(--citta-font-body);
  font-size: var(--citta-micro);
  font-weight: 600;
  letter-spacing: var(--citta-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--citta-text-muted);
}

.u-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--citta-text-muted);
  max-width: 56ch;
}

.u-ink-accent { color: var(--citta-accent); }
.u-ink-action { color: var(--citta-action); }
.u-ink-muted { color: var(--citta-text-muted); }

.u-panel {
  border-radius: var(--citta-r-xl);
  padding: clamp(1.75rem, 4.5vw, 4rem);
}

.u-panel-sm {
  border-radius: var(--citta-r-lg);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.u-surface-raised { background: var(--citta-surface-raised); }
.u-surface-sunken { background: var(--citta-surface-sunken); }

.u-tint-accent { background: var(--citta-tint-accent); }
.u-tint-accent-strong { background: var(--citta-tint-accent-strong); }
.u-tint-action { background: var(--citta-tint-action); }
.u-tint-action-strong { background: var(--citta-tint-action-strong); }

.u-fill-accent {
  background: var(--citta-accent);
  color: var(--citta-on-accent);
}

.u-fill-action {
  background: var(--citta-action);
  color: var(--citta-on-action);
}

.u-fill-inverse {
  background: var(--citta-surface-inverse);
  color: var(--citta-text-inverse);
}

.u-fill-inverse h1,
.u-fill-inverse h2,
.u-fill-inverse h3,
.u-fill-inverse h4,
.u-fill-action h1,
.u-fill-action h2,
.u-fill-action h3,
.u-fill-action h4 {
  color: inherit;
}

.u-pill {
  border-radius: var(--citta-r-pill);
}

.u-hairline {
  border: 1px solid var(--citta-line);
}

.u-media {
  border-radius: var(--citta-r-lg);
  overflow: hidden;
}

.u-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u-float-card {
  border-radius: var(--citta-r-md);
  background: var(--citta-surface);
  box-shadow: var(--citta-shadow-md);
  padding: var(--citta-s2) var(--citta-s3);
}

.u-shadow-sm { box-shadow: var(--citta-shadow-sm); }
.u-shadow-md { box-shadow: var(--citta-shadow-md); }
.u-shadow-lg { box-shadow: var(--citta-shadow-lg); }

.u-grid-paper {
  position: relative;
  isolation: isolate;
}

.u-grid-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--citta-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--citta-line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.45;
}

.u-grain {
  position: relative;
  isolation: isolate;
}

.u-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.u-glow {
  position: relative;
  isolation: isolate;
}

.u-glow::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 65% 35%, var(--citta-tint-accent) 0%, transparent 62%);
}

.u-pin {
  position: sticky;
  top: clamp(1.5rem, 8vh, 6rem);
}

.u-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 999;
  transform-origin: 0 50%;
  background: var(--citta-accent);
  scale: 0 1;
  animation: citta-progress linear;
  animation-timeline: scroll(root);
}

@keyframes citta-progress {
  to { scale: 1 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .m-reveal,
  .m-rise,
  .m-scale,
  .m-stagger > * {
    opacity: 0;
    transform: translate3d(0, 1.75rem, 0);
    transition: opacity 0.7s var(--citta-ease), transform 0.7s var(--citta-ease);
  }

  .m-scale {
    transform: scale3d(0.95, 0.95, 1);
  }

  .m-stagger > *:nth-child(2) { transition-delay: 0.07s; }
  .m-stagger > *:nth-child(3) { transition-delay: 0.14s; }
  .m-stagger > *:nth-child(4) { transition-delay: 0.21s; }
  .m-stagger > *:nth-child(5) { transition-delay: 0.28s; }
  .m-stagger > *:nth-child(n + 6) { transition-delay: 0.34s; }

  .m-reveal.is-in,
  .m-rise.is-in,
  .m-scale.is-in,
  .m-stagger.is-in > * {
    opacity: 1;
    transform: none;
  }

  @supports (animation-timeline: view()) {
    .m-parallax {
      animation: citta-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .m-parallax-slow {
      animation: citta-parallax-slow linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes citta-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes citta-rise {
  from { opacity: 0; transform: translateY(2.25rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes citta-scale {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes citta-parallax {
  from { transform: translateY(7%); }
  to { transform: translateY(-7%); }
}

@keyframes citta-parallax-slow {
  from { transform: translateY(3.5%); }
  to { transform: translateY(-3.5%); }
}

.citta-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.citta-skip {
  position: absolute;
  left: -9999px;
}

.citta-skip:focus {
  left: var(--citta-s2);
  top: var(--citta-s2);
  z-index: 1000;
  padding: var(--citta-s1) var(--citta-s3);
  border-radius: var(--citta-r-pill);
  background: var(--citta-surface-inverse);
  color: var(--citta-text-inverse);
}

.citta-nav-toggle {
  display: none;
}

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

  .citta-nav[data-collapsible='true'] {
    position: absolute;
    left: var(--citta-s2);
    right: var(--citta-s2);
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: var(--citta-s3);
    border-radius: var(--citta-r-lg);
    background: var(--citta-surface);
    box-shadow: var(--citta-shadow-lg);
    display: none;
  }

  .citta-nav[data-collapsible='true'].is-open {
    display: flex;
  }
}

body.elementor-editor-active .m-reveal,
body.elementor-editor-active .m-rise,
body.elementor-editor-active .m-scale,
body.elementor-editor-active .m-stagger > *,
body.elementor-editor-active .m-parallax,
body.elementor-editor-active .m-parallax-slow,
body.elementor-editor-preview .m-reveal,
body.elementor-editor-preview .m-rise,
body.elementor-editor-preview .m-scale,
body.elementor-editor-preview .m-stagger > *,
body.elementor-editor-preview .m-parallax,
body.elementor-editor-preview .m-parallax-slow {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

body.elementor-editor-active .citta-header,
body.elementor-editor-preview .citta-header {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .u-progress {
    animation: none !important;
    scale: 0 1;
  }
}

.citta-topbar {
  font-size: 0.78rem;
}

body .citta-topbar,
body .citta-topbar .elementor-icon-list-item,
body .citta-topbar .elementor-icon-list-text {
  color: color-mix(in srgb, var(--citta-text-inverse) 78%, transparent);
}

body .citta-topbar__list .elementor-icon-list-item {
  font-size: 0.78rem;
  margin-right: 26px;
  position: relative;
}

body .citta-topbar__list .elementor-icon-list-item + .elementor-icon-list-item::before {
  content: '·';
  position: absolute;
  left: -15px;
  color: var(--citta-accent);
}

body .citta-topbar__phone .elementor-button {
  background: transparent;
  color: var(--citta-text-inverse);
  padding: 2px 0;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 0;
}

body .citta-topbar__phone .elementor-button:hover {
  color: var(--citta-accent);
  transform: none;
}

@media (max-width: 700px) {
  body .citta-topbar__list {
    display: none;
  }
}

body .citta-brand__mark img {
  width: 54px;
  height: 54px;
  display: block;
}

body .citta-brand__name {
  font-family: var(--citta-font-display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  display: block;
}

/* Razón social: sin negrita, sin mayúsculas y sin tracking de etiqueta. */
body .citta-brand__sub {
  display: block;
  font-family: var(--citta-font-body);
  font-weight: 400;
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--citta-text-muted);
}

body .citta-nav .elementor-icon-list-items {
  gap: 2px;
}

body .citta-nav .elementor-icon-list-item > a {
  padding: 8px 16px;
  border-radius: var(--citta-r-pill);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--citta-text-muted);
  transition: background 0.25s var(--citta-ease), color 0.25s var(--citta-ease);
}

body .citta-nav .elementor-icon-list-item > a:hover {
  background: var(--citta-tint-accent);
  color: var(--citta-text);
}

body .citta-btn .elementor-button {
  border-radius: var(--citta-r-pill);
  font-family: var(--citta-font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0;
  padding: 14px 26px;
  transition: transform 0.25s var(--citta-ease), background 0.25s var(--citta-ease), color 0.25s var(--citta-ease);
}

body .citta-btn .elementor-button:hover {
  transform: translateY(-2px);
}

body .citta-btn--action .elementor-button {
  background: var(--citta-action);
  color: var(--citta-on-action);
}

body .citta-btn--action .elementor-button:hover {
  background: var(--citta-action-hover);
  color: var(--citta-on-action);
}

body .citta-btn--accent .elementor-button {
  background: var(--citta-accent);
  color: var(--citta-on-accent);
}

body .citta-btn--accent .elementor-button:hover {
  background: var(--citta-accent-hover);
}

body .citta-btn--dark .elementor-button {
  background: var(--citta-secondary);
  color: var(--citta-primary);
}

body .citta-btn--ghost .elementor-button {
  background: transparent;
  color: var(--citta-text);
  border: 1px solid var(--citta-line-strong);
}

body .citta-btn--ghost .elementor-button:hover {
  background: var(--citta-surface-sunken);
  color: var(--citta-text);
}

body .citta-btn--link .elementor-button {
  background: transparent;
  color: var(--citta-text);
  padding: 4px 0;
  border-bottom: 1px solid var(--citta-line-strong);
  border-radius: 0;
}

body .citta-btn--link .elementor-button:hover {
  border-color: var(--citta-accent);
  color: var(--citta-accent);
  transform: none;
}

body .citta-checks .elementor-icon-list-item {
  font-size: 0.85rem;
  color: var(--citta-text-muted);
  margin-right: 22px;
}

body .citta-checks .elementor-icon-list-icon svg,
body .citta-checks .elementor-icon-list-icon i {
  color: var(--citta-accent);
  font-size: 12px;
}

/*
 * Cuadrada, no 9/11. El retrato vertical dejaba el hero en 1053 px de alto y
 * empujaba la tarjeta de ruta muy por debajo del pliegue. Cuadrado sigue siendo
 * un recorte honesto para una foto de personas y recorta 107 px de altura.
 */
body .citta-hero__media img {
  border-radius: var(--citta-r-xl);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

/*
 * El titular del hero es una frase larga (una oración completa, no tres
 * palabras), así que no puede ir al tamaño de display-1: a 96 px se iba a seis
 * líneas y volvía a romper el pliegue.
 */
body .citta-hero .u-display .elementor-heading-title {
  font-size: clamp(1.95rem, 3.5vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

body .citta-route__title {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
}

body .citta-route__list .elementor-icon-list-item,
body .citta-facts .elementor-icon-list-item {
  border-top: 1px solid var(--citta-line);
  padding-top: 10px;
}

body .citta-route__list .elementor-icon-list-text b,
body .citta-facts .elementor-icon-list-text b {
  display: block;
  font-family: var(--citta-font-display);
  font-weight: 700;
  font-size: 0.95rem;
}

body .citta-route__list .elementor-icon-list-text span,
body .citta-facts .elementor-icon-list-text span {
  display: block;
  font-size: 0.8rem;
  color: var(--citta-text-muted);
}

body .citta-facts .elementor-icon-list-item {
  margin-right: 26px;
}

body .citta-service {
  transition: transform 0.35s var(--citta-ease);
}

body .citta-service:hover {
  transform: translateY(-6px);
}

body .citta-service__num {
  font-family: var(--citta-font-display);
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--citta-accent);
  display: block;
}

body .citta-service__title {
  font-size: 1.3rem;
  margin: 0;
}

body .citta-service__text {
  font-size: 0.92rem;
  color: var(--citta-text-muted);
}

body .citta-step__num {
  font-family: var(--citta-font-display);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--citta-accent);
  display: block;
}

body .citta-step__title {
  font-size: 1.1rem;
  margin: 0;
}

body .citta-step__text {
  font-size: 0.88rem;
  color: var(--citta-text-muted);
}

body .citta-cta-dark,
body .citta-contact-panel {
  color: var(--citta-text-inverse);
}

body .citta-cta-dark h2,
body .citta-cta-dark p,
body .citta-cta-dark .u-eyebrow,
body .citta-contact-panel h2,
body .citta-contact-panel p,
body .citta-contact-panel .u-eyebrow {
  color: var(--citta-text-inverse);
}

body .citta-cta-dark p,
body .citta-contact-panel > .e-con-inner > div > .elementor-widget-text-editor p {
  opacity: 0.78;
}

body .citta-cta-dark img {
  border-radius: var(--citta-r-lg);
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

body .citta-horizon__title {
  font-size: 1.05rem;
  margin: 0;
}

body .citta-horizon__text {
  font-size: 0.85rem;
  color: var(--citta-text-muted);
}

body .citta-accordion .elementor-accordion-item {
  border: none;
  border-bottom: 1px solid var(--citta-line);
}

body .citta-accordion .elementor-tab-title {
  padding: 22px 0;
  background: transparent;
  border: none;
  font-family: var(--citta-font-display);
  font-weight: 700;
  font-size: 1.05rem;
}

body .citta-accordion .elementor-tab-title a {
  color: var(--citta-text);
}

body .citta-accordion .elementor-accordion-icon {
  color: var(--citta-accent);
}

body .citta-accordion .elementor-tab-content {
  padding: 0 0 22px;
  border: none;
  background: transparent;
  color: var(--citta-text-muted);
  font-size: 0.95rem;
}

body .citta-contact-card__value,
body .citta-contact-card .elementor-widget-container > span {
  font-family: var(--citta-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--citta-text);
  display: block;
}

body .citta-contact-card .u-eyebrow {
  color: var(--citta-text-muted);
}

body .citta-mail {
  font-family: var(--citta-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--citta-text);
  text-decoration: none;
  border-bottom: 1px solid var(--citta-line-strong);
}

body .citta-mail:hover {
  color: var(--citta-accent);
  border-color: var(--citta-accent);
}

body .citta-footer__panel {
  color: var(--citta-text-inverse);
}

body .citta-footer__logo img {
  width: 72px;
  height: 72px;
}

body .citta-footer__title {
  font-size: 0.95rem;
  margin: 0;
}

body .citta-footer__tagline p {
  font-size: 0.9rem;
  max-width: 30ch;
}

body .citta-footer__list .elementor-icon-list-item {
  font-size: 0.88rem;
}

body .citta-footer__mail .citta-mail {
  font-size: 0.88rem;
  font-family: var(--citta-font-body);
  font-weight: 500;
  color: var(--citta-text-inverse);
  border-color: color-mix(in srgb, var(--citta-text-inverse) 55%, transparent);
}

body .citta-footer__legal p {
  font-size: 0.8rem;
  margin: 0;
}

body .citta-footer__legal a {
  text-decoration: underline;
}

@media (max-width: 880px) {
  /*
   * Con `body` delante a propósito: la regla base también lo lleva, y sin él
   * esta perdía por especificidad y el retrato seguía cuadrado en móvil. Estuvo
   * muerta desde que se escribió.
   */
  body .citta-hero__media img {
    aspect-ratio: 4 / 3;
  }

  /* La columna de fotos de Nosotros deja de ser pegajosa al apilarse. */
  body .citta-about .u-pin {
    position: static;
  }

  body .citta-hero .citta-route.citta-route {
    margin-top: -64px;
  }

  body .citta-about .u-media.elementor-widget-image {
    width: 100%;
  }
}

/*
 * El nombre se queda en móvil —el cliente pidió verlo en el header— y se cae
 * sólo la razón social, que es la línea larga.
 */
@media (max-width: 700px) {
  body .citta-brand__sub {
    display: none;
  }
}

@media (min-width: 881px) {
  .citta-nav-toggle {
    display: none;
  }
}

body .elementor-widget-heading .elementor-heading-title,
body .elementor-widget-text-editor .elementor-widget-container {
  color: inherit;
}

body .u-display .elementor-heading-title {
  font-family: var(--citta-font-display);
  font-weight: 900;
  font-size: var(--citta-display-1);
  line-height: var(--citta-leading-display);
  letter-spacing: var(--citta-tracking-display);
}

body .u-display-2 .elementor-heading-title {
  font-family: var(--citta-font-display);
  font-weight: 900;
  font-size: var(--citta-display-2);
  line-height: 1;
  letter-spacing: var(--citta-tracking-display);
}

body .u-eyebrow .elementor-heading-title {
  font-family: var(--citta-font-body);
  font-size: var(--citta-micro);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--citta-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--citta-text-muted);
}

body .u-lead .elementor-widget-container {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--citta-text-muted);
  max-width: 56ch;
}

body .citta-brand__name .elementor-heading-title {
  font-family: var(--citta-font-display);
  font-weight: 800;
  font-size: 1.06rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

body .citta-brand__sub .elementor-heading-title {
  font-family: var(--citta-font-body);
  font-weight: 400;
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--citta-text-muted);
}

body .citta-route__title .elementor-heading-title,
body .citta-service__title .elementor-heading-title,
body .citta-step__title .elementor-heading-title,
body .citta-horizon__title .elementor-heading-title,
body .citta-footer__title .elementor-heading-title,
body .citta-contact-card__value .elementor-heading-title {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

body .citta-service__num .elementor-heading-title,
body .citta-step__num .elementor-heading-title {
  font-family: var(--citta-font-display);
  font-weight: 900;
  font-size: inherit;
  line-height: 1;
  color: var(--citta-accent);
}

body .citta-cta-dark > .e-con-inner > div > .u-eyebrow .elementor-heading-title,
body .citta-contact-panel > .e-con-inner > div > .u-eyebrow .elementor-heading-title {
  color: color-mix(in srgb, var(--citta-text-inverse) 66%, transparent);
}

body .citta-hero .u-glow::before {
  inset: -14% -8% auto 22%;
}

body .citta-route {
  position: relative;
}

body .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

body .citta-accordion .elementor-tab-title .elementor-accordion-title,
body .citta-accordion .elementor-tab-title a {
  font-family: var(--citta-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--citta-text);
}

body .citta-accordion .elementor-tab-title.elementor-active .elementor-accordion-title,
body .citta-accordion .elementor-tab-title.elementor-active a {
  color: var(--citta-text);
}

body .citta-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
  color: var(--citta-action);
}

body .citta-accordion .elementor-tab-content p {
  margin: 0;
}

body .citta-contact-card .u-eyebrow .elementor-heading-title {
  color: var(--citta-text-muted);
}

body .citta-footer__list .elementor-icon-list-item,
body .citta-footer__list .elementor-icon-list-item a,
body .citta-footer__list .elementor-icon-list-text {
  color: var(--citta-text-inverse);
}

body .citta-footer__list .elementor-icon-list-item a:hover {
  text-decoration: underline;
}

body .citta-footer__title .elementor-heading-title {
  color: var(--citta-text-inverse);
  font-size: 0.95rem;
  font-weight: 800;
}

body .citta-footer__tagline,
body .citta-footer__legal {
  color: var(--citta-text-inverse);
}

body .citta-footer__social .elementor-social-icon {
  background: var(--citta-text-inverse);
  color: var(--citta-action);
}

body .citta-hero {
  min-height: auto;
}

body .citta-process .citta-cta-dark img {
  aspect-ratio: 16 / 9;
}

body .citta-footer__panel .elementor-heading-title,
body .citta-footer__panel p,
body .citta-footer__panel a:not(.elementor-social-icon) {
  color: inherit;
}

body .citta-footer__social a.elementor-social-icon {
  background: var(--citta-text-inverse);
  color: var(--citta-action);
}

body .citta-footer__social a.elementor-social-icon svg {
  fill: currentColor;
  width: 1em;
  height: 1em;
}

body .citta-footer__social a.elementor-social-icon:hover {
  background: var(--citta-secondary);
  color: var(--citta-text-inverse);
}

body .citta-footer__legal a {
  color: var(--citta-text-inverse);
}

body .citta-footer__list .elementor-icon-list-item a:hover,
body .citta-footer__mail .citta-mail:hover {
  color: var(--citta-text-inverse);
  border-color: var(--citta-text-inverse);
}

body .citta-hero--video {
  color: var(--citta-text-inverse);
  background-size: cover;
  background-position: center;
}

body .citta-hero--video .elementor-background-video-container,
body .citta-hero--video .elementor-background-video-container video {
  border-radius: 0;
}

body .citta-hero--video .elementor-background-video-container video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

body .citta-hero--video .u-display .elementor-heading-title,
body .citta-hero--video h1,
body .citta-hero--video h2 {
  color: var(--citta-text-inverse);
}

body .citta-hero--video .u-eyebrow .elementor-heading-title {
  color: color-mix(in srgb, var(--citta-text-inverse) 82%, transparent);
}

body .citta-hero--video .u-lead .elementor-widget-container,
body .citta-hero--video .u-lead p {
  color: color-mix(in srgb, var(--citta-text-inverse) 88%, transparent);
}

body .citta-hero--video .citta-checks .elementor-icon-list-item {
  color: color-mix(in srgb, var(--citta-text-inverse) 88%, transparent);
}

body .citta-hero--video .citta-btn--ghost .elementor-button {
  color: var(--citta-text-inverse);
  border-color: color-mix(in srgb, var(--citta-text-inverse) 55%, transparent);
  background: transparent;
}

body .citta-hero--video .citta-btn--ghost .elementor-button:hover {
  background: color-mix(in srgb, var(--citta-text-inverse) 14%, transparent);
  color: var(--citta-text-inverse);
}

body .citta-hero--video .citta-route {
  color: var(--citta-text);
}

body .citta-hero--video .citta-route .elementor-heading-title,
body .citta-hero--video .citta-route .elementor-icon-list-text {
  color: var(--citta-text);
}

body .citta-hero--video .citta-route .u-eyebrow .elementor-heading-title {
  color: var(--citta-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  body .citta-hero--video .elementor-background-video-container {
    display: none;
  }
}

body .citta-hero--video .citta-checks .elementor-icon-list-item,
body .citta-hero--video .citta-checks .elementor-icon-list-text {
  color: color-mix(in srgb, var(--citta-text-inverse) 90%, transparent);
}

body .citta-hero--video .citta-checks .elementor-icon-list-icon svg,
body .citta-hero--video .citta-checks .elementor-icon-list-icon i {
  color: var(--citta-accent);
  fill: var(--citta-accent);
}

body .citta-nav {
  background: var(--citta-primary);
  box-shadow: 0 3px 0 0 var(--citta-secondary);
}

body .citta-nav .elementor-icon-list-item > a {
  color: var(--citta-secondary);
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 9px 18px;
}

body .citta-nav .elementor-icon-list-item > a:hover,
body .citta-nav .elementor-icon-list-item > a:focus-visible {
  background: var(--citta-secondary);
  color: var(--citta-primary);
}

/*
 * Menú: letras blancas en los dos estados destacados, verde y negro, por
 * pedido de Iván.
 *
 * Sobre el negro ya lo estaban. Sobre el verde el texto era oscuro, y no por
 * capricho: blanco sobre el verde de marca `#32A435` da 3,23:1, que no llega al
 * 4,5:1 que pide AA para texto normal (estos enlaces son de 14,4 px). Para poder
 * poner el blanco que pidió, la píldora usa el verde de marca rebajado con el
 * negro de marca; sigue siendo el verde del logo, un punto más profundo, y el
 * blanco encima queda sobre 4,5:1. Medido pintando color sobre fondo en canvas.
 */
body .citta-nav .elementor-icon-list-item > a.is-active,
body .citta-nav .elementor-icon-list-item > a.is-active:hover,
body .citta-nav .elementor-icon-list-item > a.is-active:focus-visible {
  background: color-mix(in srgb, var(--citta-accent) 76%, var(--citta-secondary));
  color: var(--citta-primary);
}

body .citta-contact-card {
  background: var(--citta-action);
  color: var(--citta-text-inverse);
  border: 1px solid color-mix(in srgb, var(--citta-text-inverse) 16%, transparent);
}

body .citta-contact-card .citta-contact-card__value,
body .citta-contact-card .citta-contact-card__value .elementor-heading-title,
body .citta-contact-card .citta-mail {
  color: var(--citta-text-inverse);
}

body .citta-contact-card .u-eyebrow .elementor-heading-title {
  color: var(--citta-text-inverse);
}

body .citta-contact-card .citta-mail {
  border-bottom-color: color-mix(in srgb, var(--citta-text-inverse) 55%, transparent);
}

body .citta-contact-card .citta-btn--link .elementor-button {
  color: var(--citta-text-inverse);
  border-bottom-color: color-mix(in srgb, var(--citta-text-inverse) 55%, transparent);
}

body .citta-contact-card .citta-btn--link .elementor-button:hover {
  color: var(--citta-text-inverse);
  border-bottom-color: var(--citta-text-inverse);
}

body .citta-service__num .elementor-heading-title,
body .citta-step__num .elementor-heading-title {
  color: var(--citta-secondary);
}

body .citta-service:nth-child(3n + 1) .citta-service__num .elementor-heading-title {
  color: color-mix(in srgb, var(--citta-accent) 92%, var(--citta-secondary));
}

body .citta-service:nth-child(3n) .citta-service__num .elementor-heading-title {
  color: var(--citta-action);
}

body .citta-service__text,
body .citta-service__text p,
body .citta-step__text,
body .citta-step__text p,
body .citta-horizon__text,
body .citta-horizon__text p {
  color: color-mix(in srgb, var(--citta-secondary) 80%, var(--citta-primary));
}

body .citta-service .u-eyebrow .elementor-heading-title,
body .citta-step .u-eyebrow .elementor-heading-title,
body .citta-horizon .u-eyebrow .elementor-heading-title {
  color: color-mix(in srgb, var(--citta-secondary) 74%, var(--citta-primary));
}

body .citta-service .citta-btn--link .elementor-button,
body .citta-step .citta-btn--link .elementor-button {
  color: var(--citta-secondary);
  border-bottom-color: color-mix(in srgb, var(--citta-secondary) 45%, transparent);
}

body .citta-wa {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 200;
  width: auto;
}

body .citta-wa__btn .elementor-button {
  background: var(--citta-accent);
  color: var(--citta-secondary);
  border-radius: var(--citta-r-pill);
  padding: 15px 24px;
  font-weight: 700;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--citta-secondary) 26%, transparent);
}

body .citta-wa__btn .elementor-button:hover {
  background: var(--citta-secondary);
  color: var(--citta-primary);
  transform: translateY(-3px);
}

body .citta-wa__btn .elementor-button-icon svg {
  width: 1.3em;
  height: 1.3em;
  fill: currentColor;
}

body .citta-contact-card__icon .elementor-icon {
  color: var(--citta-text-inverse);
  font-size: 24px;
}

body .citta-contact-card__icon svg {
  fill: currentColor;
  width: 24px;
  height: 24px;
}

body .citta-topbar__list .elementor-icon-list-icon svg,
body .citta-topbar__list .elementor-icon-list-icon i {
  color: var(--citta-accent);
  fill: var(--citta-accent);
  font-size: 13px;
}

body .citta-topbar__list .elementor-icon-list-icon {
  width: 15px;
}

body .citta-topbar__phone .elementor-button-icon svg {
  fill: var(--citta-accent);
  width: 1em;
  height: 1em;
}

body .citta-topbar__phone .elementor-button-content-wrapper {
  gap: 8px;
  align-items: center;
}

@media (max-width: 640px) {
  body .citta-wa__btn .elementor-button {
    padding: 15px 18px;
  }

  body .citta-wa__btn .elementor-button-text {
    display: none;
  }
}

body .citta-hero--video .u-display .elementor-heading-title,
body .citta-hero--video .u-eyebrow .elementor-heading-title,
body .citta-hero--video .u-lead p,
body .citta-hero--video .citta-checks .elementor-icon-list-text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.35);
}

body .citta-hero--video .u-lead .elementor-widget-container,
body .citta-hero--video .u-lead p,
body .citta-hero--video .citta-checks .elementor-icon-list-item,
body .citta-hero--video .citta-checks .elementor-icon-list-text {
  color: var(--citta-text-inverse);
}

body .citta-hero--video .u-eyebrow .elementor-heading-title {
  color: var(--citta-text-inverse);
}

body .citta-header {
  transition: transform 0.4s var(--citta-ease), box-shadow 0.3s var(--citta-ease);
  will-change: transform;
}

body .citta-header.is-stuck {
  box-shadow: 0 6px 26px color-mix(in srgb, var(--citta-secondary) 12%, transparent);
}

body .citta-header.is-hidden {
  transform: translateY(-100%);
}

body.elementor-editor-active .citta-header.is-hidden,
body.elementor-editor-preview .citta-header.is-hidden {
  transform: none;
}

/*
 * El hero NO puede ser `position: sticky`.
 *
 * Lo tuvo hasta el 17-08-2026 con `top: 0`, y como mide más que cualquier
 * pantalla se clavaba arriba y nunca volvía a moverse: todo lo que quedaba
 * bajo el pliegue —la tarjeta «De origen a expediente» entre otras cosas— era
 * inalcanzable por mucho que el visitante hiciera scroll. Medido en la página
 * servida a 1440x900: la tarjeta se paraba con su borde inferior en 978 px y
 * ahí se quedaba, así que el paso «03 · Expediente» no se veía nunca. Encima
 * la sección siguiente pasaba por delante con `z-index: 1`, y la tarjeta se
 * perdía del todo. Lo reportó el cliente: «da la sensación que hay algo que
 * ver pero no se ve».
 *
 * Regla que sale de aquí: sticky sólo en elementos más bajos que el viewport.
 */
body .citta-hero--video {
  position: relative;
  z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .m-focus {
    opacity: 0;
    filter: blur(9px);
    transform: translate3d(0, 1.25rem, 0);
    transition: opacity 0.8s var(--citta-ease), filter 0.8s var(--citta-ease), transform 0.8s var(--citta-ease);
  }

  .m-focus.is-in {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

body.elementor-editor-active .m-focus,
body.elementor-editor-preview .m-focus {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.citta-ribbon {
  position: relative;
  width: 100%;
  height: clamp(180px, 26vw, 340px);
  overflow: hidden;
  pointer-events: none;
}

.citta-ribbon svg {
  display: block;
  width: 170%;
  height: 100%;
  margin-left: -35%;
}

.citta-ribbon__line {
  fill: none;
  stroke: var(--citta-action);
  stroke-width: 22;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}

.citta-ribbon__ghost {
  fill: none;
  stroke: color-mix(in srgb, var(--citta-accent) 30%, var(--citta-primary));
  stroke-width: 22;
  stroke-linecap: round;
}

.citta-ribbon__dot {
  fill: var(--citta-action);
  opacity: 0;
  transition: opacity 0.5s var(--citta-ease);
}

.citta-ribbon.is-in .citta-ribbon__dot {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .citta-ribbon__line {
      animation: citta-draw linear both, citta-slide-a linear both;
      animation-timeline: view(), view();
      animation-range: entry 0% cover 55%, cover 0% cover 100%;
    }

    .citta-ribbon__ghost {
      animation: citta-slide-b linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .citta-ribbon__dot {
      animation: citta-slide-a linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }

  @supports not (animation-timeline: view()) {
    .citta-ribbon__line,
    .citta-ribbon__ghost {
      transition: stroke-dashoffset 1.4s var(--citta-ease), translate 1.4s var(--citta-ease);
    }

    .citta-ribbon__line { translate: -5% 0; }
    .citta-ribbon__ghost { translate: 6% 0; }
    .citta-ribbon.is-in .citta-ribbon__line { stroke-dashoffset: 0; translate: 5% 0; }
    .citta-ribbon.is-in .citta-ribbon__ghost { translate: -6% 0; }
  }
}

@keyframes citta-slide-a {
  from { translate: -19% 0; }
  to { translate: 19% 0; }
}

@keyframes citta-slide-b {
  from { translate: 24% 0; }
  to { translate: -24% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .citta-ribbon__line {
    stroke-dashoffset: 0;
  }
}

@keyframes citta-draw {
  to { stroke-dashoffset: 0; }
}

body .citta-footer__logo,
body .citta-footer__logo .elementor-widget-container,
body .citta-footer__social,
body .citta-footer__social .elementor-widget-container {
  text-align: left;
}

body .citta-footer__social .elementor-social-icons-wrapper {
  justify-content: flex-start;
  margin-inline-start: 0;
}

body .citta-footer__social .elementor-grid {
  justify-content: flex-start;
}

@media (max-width: 880px) {
  body .citta-topbar {
    display: none;
  }

  body .citta-bar {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  body .citta-nav {
    display: none;
  }

  body .citta-nav.is-open {
    display: flex;
  }

  body .citta-bar .citta-btn--action {
    display: none;
  }

  body .citta-brand__mark img {
    width: 44px;
    height: 44px;
  }

  body .citta-nav-toggle .elementor-button {
    padding: 11px 18px;
    background: var(--citta-secondary);
    color: var(--citta-primary);
    border: none;
  }

  body .citta-nav[data-collapsible='true'] {
    top: calc(100% + 6px);
    padding: var(--citta-s2);
    border-width: 2px;
  }

  body .citta-nav[data-collapsible='true'] .elementor-icon-list-items {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  body .citta-nav[data-collapsible='true'] .elementor-icon-list-item > a {
    display: block;
    padding: 13px 16px;
  }
}

/* Ficha de WhatsApp con dos números, cada uno con su propio enlace wa.me. */
body .citta-contact-card .citta-wa-num {
  display: block;
  width: fit-content;
  font-family: var(--citta-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--citta-text-inverse);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--citta-text-inverse) 45%, transparent);
}

body .citta-contact-card .citta-wa-num + .citta-wa-num {
  margin-top: 5px;
}

body .citta-contact-card .citta-wa-num:hover {
  border-bottom-color: var(--citta-text-inverse);
}

/*
 * 07 Valoraciones. Son capturas de pantalla de reseñas de Google, así que van
 * con su proporción real: recortarlas con `object-fit: cover` —que es lo que
 * hace `.u-media img` para las fotos— cortaría el texto de la reseña.
 */
body .citta-reviews__grid {
  align-items: flex-start;
}

body .citta-review__shot img {
  height: auto;
  object-fit: contain;
  border-radius: var(--citta-r-md);
  background: var(--citta-surface-sunken);
}

body .citta-review {
  transition: transform 0.35s var(--citta-ease);
}

body .citta-review:hover {
  transform: translateY(-4px);
}

/*
 * La tarjeta de ruta va en tres columnas, no en lista vertical.
 *
 * En vertical medía 358 px y, sumada al retrato y al header, dejaba el paso
 * «03 · Expediente» fuera de la pantalla en cualquier portátil. En fila baja a
 * ~165 px con la misma copia, y por fin es la «tarjeta flotante sobre la foto»
 * que pedía el diseño de referencia en vez de un panel que cuelga por debajo.
 */
body .citta-route__list .elementor-icon-list-items {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: stretch;
}

body .citta-route__list .elementor-icon-list-item {
  flex: 1 1 0;
  min-width: 0;
  margin-right: 0;
}

body .citta-route__list .elementor-icon-list-text {
  padding: 0;
}

body .citta-route__list .elementor-icon-list-text b {
  font-size: 0.86rem;
  line-height: 1.25;
}

body .citta-route__list .elementor-icon-list-text span {
  font-size: 0.75rem;
  line-height: 1.35;
  margin-top: 2px;
}

/*
 * 880 y no 600: entre 768 y 880 el hero sigue a dos columnas, así que la
 * tarjeta mide unos 300 px y las tres columnas quedaban en 72 px cada una, con
 * «Identificamos lo necesario» partido en cuatro líneas. Por debajo de 880 se
 * apilan. Medido a 768: 72 px por columna antes, ancho completo después.
 */
@media (max-width: 880px) {
  body .citta-route__list .elementor-icon-list-items {
    flex-wrap: wrap;
  }

  body .citta-route__list .elementor-icon-list-item {
    flex: 1 1 100%;
  }
}

body[class*='elementor-kit-'] .citta-hero--video .elementor-widget-heading .elementor-heading-title,
body[class*='elementor-kit-'] .citta-cta-dark .elementor-widget-heading .elementor-heading-title,
body[class*='elementor-kit-'] .citta-contact-panel .elementor-widget-heading .elementor-heading-title,
body[class*='elementor-kit-'] .citta-footer__panel .elementor-widget-heading .elementor-heading-title {
  color: var(--citta-text-inverse);
}

body[class*='elementor-kit-'] .citta-hero--video .u-eyebrow .elementor-heading-title,
body[class*='elementor-kit-'] .citta-cta-dark .u-eyebrow .elementor-heading-title,
body[class*='elementor-kit-'] .citta-contact-panel .u-eyebrow .elementor-heading-title {
  color: var(--citta-text-inverse);
}

body[class*='elementor-kit-'] .citta-hero--video .elementor-widget-text-editor,
body[class*='elementor-kit-'] .citta-hero--video .elementor-widget-text-editor p,
body[class*='elementor-kit-'] .citta-cta-dark .elementor-widget-text-editor,
body[class*='elementor-kit-'] .citta-cta-dark .elementor-widget-text-editor p,
body[class*='elementor-kit-'] .citta-contact-panel .elementor-widget-text-editor,
body[class*='elementor-kit-'] .citta-contact-panel .elementor-widget-text-editor p,
body[class*='elementor-kit-'] .citta-footer__panel .elementor-widget-text-editor,
body[class*='elementor-kit-'] .citta-footer__panel .elementor-widget-text-editor p {
  color: var(--citta-text-inverse);
}

body[class*='elementor-kit-'] .citta-hero--video .citta-checks .elementor-icon-list-text,
body[class*='elementor-kit-'] .citta-contact-card .elementor-widget-heading .elementor-heading-title,
body[class*='elementor-kit-'] .citta-contact-card .u-eyebrow .elementor-heading-title {
  color: var(--citta-text-inverse);
}

body[class*='elementor-kit-'] .citta-route .elementor-widget-heading .elementor-heading-title {
  color: var(--citta-text);
}

body[class*='elementor-kit-'] .citta-route .u-eyebrow .elementor-heading-title {
  color: var(--citta-text-muted);
}

body.elementor-editor-active .citta-btn--link .elementor-button.elementor-button,
body.elementor-editor-active .citta-btn--ghost .elementor-button.elementor-button,
body.elementor-editor-active .citta-btn--solid .elementor-button.elementor-button {
  background-color: transparent !important;
  background-image: none !important;
}

body.elementor-editor-active .citta-btn--link .elementor-button.elementor-button {
  color: var(--citta-text) !important;
  padding: 4px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--citta-line-strong) !important;
  border-radius: 0 !important;
}

body.elementor-editor-active .citta-btn--ghost .elementor-button.elementor-button {
  color: var(--citta-text) !important;
  border: 1px solid var(--citta-line-strong) !important;
}

body.elementor-editor-active .citta-hero--video .citta-btn--ghost .elementor-button.elementor-button {
  color: var(--citta-text-inverse) !important;
  border-color: color-mix(in srgb, var(--citta-text-inverse) 55%, transparent) !important;
}

body.elementor-editor-active .citta-cta-dark .citta-btn--link .elementor-button.elementor-button,
body.elementor-editor-active .citta-contact-panel .citta-btn--link .elementor-button.elementor-button,
body.elementor-editor-active .citta-contact-card .citta-btn--link .elementor-button.elementor-button,
body.elementor-editor-active .citta-footer__panel .citta-btn--link .elementor-button.elementor-button {
  color: var(--citta-text-inverse) !important;
  border-bottom-color: color-mix(in srgb, var(--citta-text-inverse) 55%, transparent) !important;
}

body.privacy-policy main#contenido,
body.privacy-policy main.site-main,
body.privacy-policy .page-content,
body.page-template-default main.site-main {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

body.privacy-policy main#contenido,
body.privacy-policy main.site-main {
  padding: clamp(56px, 8vw, 96px) 24px clamp(72px, 10vw, 120px);
}

body.privacy-policy main#contenido > *:first-child,
body.privacy-policy .page-content > *:first-child {
  font-size: 1.05rem;
  color: var(--citta-text-muted);
  margin-bottom: 40px;
}

body.privacy-policy main#contenido h2,
body.privacy-policy .page-content h2 {
  font-family: var(--citta-font-title);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  color: var(--citta-text);
  margin: 52px 0 14px;
}

body.privacy-policy main#contenido h2:first-of-type,
body.privacy-policy .page-content h2:first-of-type {
  margin-top: 32px;
}

body.privacy-policy main#contenido p,
body.privacy-policy .page-content p {
  margin: 0 0 20px;
  line-height: 1.75;
  color: var(--citta-text);
}

body.privacy-policy main#contenido ul,
body.privacy-policy .page-content ul {
  margin: 0 0 26px;
  padding-left: 20px;
  list-style: none;
}

body.privacy-policy main#contenido li,
body.privacy-policy .page-content li {
  position: relative;
  margin-bottom: 14px;
  line-height: 1.7;
  padding-left: 18px;
}

body.privacy-policy main#contenido li::before,
body.privacy-policy .page-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--citta-accent);
}

body.privacy-policy main#contenido a,
body.privacy-policy .page-content a {
  color: var(--citta-text);
  border-bottom: 1px solid var(--citta-line-strong);
  text-decoration: none;
}

body.privacy-policy main#contenido a:hover,
body.privacy-policy .page-content a:hover {
  border-color: var(--citta-accent);
  color: var(--citta-accent);
}

body.privacy-policy main#contenido strong,
body.privacy-policy .page-content strong {
  color: var(--citta-text);
  font-weight: 600;
}
