/* Evolución UX 2026: más claridad, menos fricción y movimiento sereno. */

/* El foco debe seguir siendo visible también sobre superficies blancas. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline-color: var(--teal-dark);
}

/* La identidad respira al entrar y se compacta cuando deja de ser protagonista. */
.site-header .brand,
.site-header .brand-logo,
.site-header .brand small {
  transition: color .3s ease, font-size .3s ease, margin .3s ease, width .3s ease, height .3s ease, opacity .3s ease;
}
.site-header.is-scrolled {
  min-height: 82px;
  padding-block: 7px;
}
.site-header.is-scrolled .brand { font-size: 21px; }
.site-header.is-scrolled .brand-logo { width: 62px; height: 62px; }
.site-header.is-scrolled .brand small { margin-top: 5px; font-size: 9px; }

/* Señales de confianza: información breve, escaneable y sin adornos innecesarios. */
.hero-trust {
  max-width: 470px;
  margin-top: 14px;
  padding-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(47, 143, 137, .2);
}
.hero-trust span {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2px 12px;
  color: #4f4856;
  font-size: 10px;
  font-weight: 680;
  line-height: 1.3;
  text-align: center;
}
.hero-trust span + span { border-left: 1px solid rgba(47, 143, 137, .2); }
.hero-trust span::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--teal);
  content: "";
}

/* Se acorta la pausa entre los beneficios y la presentación. */
.benefits { margin-top: -18px; margin-bottom: 44px; }
.about-me { padding-top: 88px; }

/* El enfoque pasa de texto continuo a tres ideas que pueden recorrerse de un vistazo. */
.approach-copy { column-count: initial; }
.approach-steps {
  display: grid;
  gap: 16px;
}
.approach-step {
  position: relative;
  padding: 27px 30px 28px 78px;
  border: 1px solid rgba(47, 143, 137, .18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(242, 249, 247, .78));
  box-shadow: 0 14px 38px rgba(52, 37, 66, .055);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.approach-step:hover {
  border-color: rgba(47, 143, 137, .38);
  box-shadow: 0 20px 48px rgba(45, 94, 90, .1);
  transform: translateY(-3px);
}
.approach-step-number {
  position: absolute;
  top: 27px;
  left: 27px;
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}
.approach-step h3 {
  margin: 0 0 11px;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.approach-step p {
  margin: 0 0 13px;
  color: #595260;
  font-size: 15px;
  line-height: 1.72;
}
.approach-step p:last-child { margin-bottom: 0; }
.approach-step:last-child {
  border-color: rgba(118, 80, 173, .18);
  background: linear-gradient(135deg, #fff, rgba(245, 238, 249, .82));
}

/* La entrada al blog deja ver que hay contenido debajo del encabezado. */
.blog-hero { padding: 72px 0 66px; }
.blog-hero h1 { max-width: 680px; font-size: clamp(48px, 5vw, 66px); }
.blog-content { padding-top: 66px; }

/* Contacto: tamaño de lectura real y campos más cómodos en móvil. */
.contact-body h2,
.contact-panel > h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.025em;
}
.contact-form { gap: 17px; }
.contact-form label,
.form-plugin .wpforms-field-label { font-size: 13px !important; }
.contact-form input,
.contact-form select,
.contact-form textarea,
.form-plugin input,
.form-plugin select,
.form-plugin textarea {
  min-height: 48px;
  border-radius: 8px !important;
  padding: 12px 13px !important;
  font-size: 15px !important;
}
.contact-form textarea,
.form-plugin textarea { min-height: 128px; }
.contact-privacy-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
}
.contact-detail h3 { font-size: 14px; }
.contact-detail p,
.contact-detail a { font-size: 13px; }

/* Reserva: confirma qué ocurrirá después de pulsar. */
.booking-assurance {
  margin: 13px 0 0;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

@media (max-width: 560px) {
  .site-header.is-scrolled { gap: 6px 10px; padding-block: 6px; }
  .site-header.is-scrolled .brand { font-size: 16px; }
  .site-header.is-scrolled .brand-logo { width: 40px; height: 40px; }
  .site-header.is-scrolled .brand small { height: 0; margin: 0; opacity: 0; overflow: hidden; }
  .hero-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-trust span { padding-inline: 7px; font-size: 9px; }
  .approach-step { padding: 24px 23px 25px; }
  .approach-step-number { position: static; display: block; margin-bottom: 10px; }
  .approach-step h3 { font-size: 25px; }
  .contact-body h2,
  .contact-panel > h2 { font-size: 28px; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .form-plugin input,
  .form-plugin select,
  .form-plugin textarea { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .brand,
  .site-header .brand-logo,
  .site-header .brand small,
  .approach-step { transition: none; }
  .approach-step:hover { transform: none; }
}