:root {
  --brand-red: #d94452;
  --brand-red-dark: #c73e4a;
  --ink: #0f172a;
  --soft-rose: #fff4f6;
  --soft-gray: #f8fafc;
  --line: rgba(217, 68, 82, 0.16);
}

html.site-preparing body {
  background: #fffaf8;
}

html.site-preparing body #root {
  opacity: 0;
}

html.site-ready body #root {
  opacity: 1;
  transition: opacity 0.18s ease;
}

html.welcome-active,
html.welcome-active body {
  overflow: hidden;
}

.welcome-splash {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 93% 34%, rgba(55, 95, 43, 0.16) 0 8rem, transparent 8.2rem),
    radial-gradient(circle at 8% 84%, rgba(55, 95, 43, 0.14) 0 7rem, transparent 7.2rem),
    radial-gradient(circle at 72% 60%, rgba(217, 0, 16, 0.08) 0 12rem, transparent 12.2rem),
    linear-gradient(115deg, #ffffff 0%, #f7fbf7 48%, #ffffff 100%);
  color: #111827;
  animation: welcome-in 0.38s ease both;
}

.welcome-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(15, 23, 42, 0.12) 0 1.4px, transparent 1.8px) 2rem 2rem / 1rem 1rem no-repeat,
    radial-gradient(circle, rgba(217, 0, 16, 0.16) 0 1.5px, transparent 1.9px) calc(100% - 9rem) calc(100% - 7rem) / 1rem 1rem repeat;
  mask-image:
    radial-gradient(circle at 5rem 4rem, #000 0 5rem, transparent 5.1rem),
    radial-gradient(circle at calc(100% - 7rem) calc(100% - 5rem), #000 0 4.2rem, transparent 4.3rem);
  pointer-events: none;
}

.welcome-splash::after {
  content: "";
  position: absolute;
  left: -4rem;
  right: -4rem;
  bottom: -4.4rem;
  height: 8.2rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(90deg, #d90010, #f31224 55%, #b90412);
  transform: rotate(2deg);
}

.welcome-splash-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(540px, 1.08fr) minmax(300px, 0.92fr);
  align-items: center;
  width: min(1160px, 100%);
  gap: clamp(2rem, 5vw, 4rem);
}

.welcome-copy span {
  display: block;
  color: rgba(17, 24, 39, 0.78);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  font-weight: 850;
}

.welcome-copy h1 {
  margin: 0.2rem 0 1rem;
  color: #d90010;
  font-size: clamp(4rem, 7vw, 5.8rem);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 8px 18px rgba(217, 0, 16, 0.1);
  white-space: nowrap;
}

.welcome-copy h1::after {
  content: "";
  display: block;
  width: 9rem;
  height: 4px;
  margin-top: 1rem;
  border-radius: 999px;
  background: #d90010;
}

.welcome-copy p {
  max-width: 520px;
  margin: 0 0 2rem;
  color: rgba(17, 24, 39, 0.78);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.18 !important;
  font-weight: 500;
}

.welcome-copy p strong {
  color: #d90010;
  font-weight: 850;
}

.welcome-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  max-width: 620px;
}

.welcome-features > div {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding-right: 0.75rem;
  border-right: 2px solid rgba(217, 0, 16, 0.75);
}

.welcome-features > div:last-child {
  border-right: 0;
}

.welcome-features i {
  display: block;
  width: 2.65rem;
  height: 2.65rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.welcome-features span {
  color: rgba(17, 24, 39, 0.78);
  font-size: 0.98rem;
  line-height: 1.08;
  font-weight: 850;
}

.feature-shield {
  background-image: url("data:image/svg+xml,%3Csvg width='58' height='58' viewBox='0 0 58 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29 6 47 13v13c0 13-7.4 21.5-18 27-10.6-5.5-18-14-18-27V13l18-7Z' stroke='%23D90010' stroke-width='3.8' stroke-linejoin='round'/%3E%3Cpath d='m20 29 6 6 13-14' stroke='%23D90010' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.feature-leaf {
  background-image: url("data:image/svg+xml,%3Csvg width='58' height='58' viewBox='0 0 58 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='29' cy='29' r='23' stroke='%23D90010' stroke-width='3.8'/%3E%3Cpath d='M39 17C28 18 19 27 20 39c12 1 21-8 22-19' stroke='%23D90010' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 39 37 22' stroke='%23D90010' stroke-width='3.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.feature-user {
  background-image: url("data:image/svg+xml,%3Csvg width='58' height='58' viewBox='0 0 58 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26' cy='20' r='8' stroke='%23D90010' stroke-width='3.8'/%3E%3Cpath d='M12 48v-3c0-8 6-14 14-14s14 6 14 14v3' stroke='%23D90010' stroke-width='3.8' stroke-linecap='round'/%3E%3Ccircle cx='43' cy='39' r='9' stroke='%23D90010' stroke-width='3.8'/%3E%3Cpath d='m39 39 3 3 6-7' stroke='%23D90010' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.welcome-mark-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(360px, 46vw, 560px);
}

.welcome-mark-wrap img {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  height: auto;
  filter: drop-shadow(0 26px 28px rgba(15, 23, 42, 0.18));
  animation: welcome-logo 1.2s ease both;
}

.welcome-stage {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 2.2rem;
  width: min(86%, 460px);
  height: 5.4rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #f4f4f4);
  box-shadow:
    0 16px 25px rgba(15, 23, 42, 0.12),
    inset 0 -8px 0 rgba(217, 0, 16, 0.4);
  transform: translateX(-50%);
}

.welcome-stage::before,
.welcome-stage::after {
  content: "";
  position: absolute;
  inset: -1.7rem -4rem;
  border: 1px solid rgba(217, 0, 16, 0.18);
  border-radius: 50%;
}

.welcome-stage::after {
  inset: -3rem -7rem;
  opacity: 0.65;
}

.welcome-leaving {
  animation: welcome-out 0.52s ease both;
}

@keyframes welcome-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes welcome-out {
  to {
    opacity: 0;
    transform: scale(1.015);
  }
}

@keyframes welcome-logo {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .welcome-splash-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .welcome-copy h1 {
    white-space: normal;
  }

  .welcome-copy h1::after {
    margin-left: auto;
    margin-right: auto;
  }

  .welcome-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .welcome-features {
    margin: 0 auto;
  }

  .welcome-mark-wrap {
    min-height: 300px;
  }

  .welcome-mark-wrap img {
    width: min(72vw, 360px);
  }
}

@media (max-width: 640px) {
  .welcome-splash {
    padding: 1rem;
  }

  .welcome-copy span {
    font-size: clamp(1.55rem, 9vw, 2.4rem);
  }

  .welcome-copy h1 {
    font-size: clamp(3rem, 16vw, 4.3rem);
  }

  .welcome-copy p {
    font-size: 1.15rem;
  }

  .welcome-features {
    grid-template-columns: 1fr;
    max-width: 290px;
    gap: 0.7rem;
  }

  .welcome-features > div {
    border-right: 0;
    padding-right: 0;
    text-align: left;
  }

  .welcome-mark-wrap {
    min-height: 240px;
  }
}

body {
  overflow-x: hidden;
}

.App {
  position: relative;
}

.App::before,
.App::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 35%, rgba(217, 68, 82, 0.18), transparent 62%),
    radial-gradient(circle at 65% 65%, rgba(15, 23, 42, 0.08), transparent 58%);
  filter: blur(2px);
}

.App::before {
  width: 360px;
  height: 360px;
  top: 160px;
  left: -200px;
}

.App::after {
  width: 420px;
  height: 420px;
  right: -220px;
  bottom: 18%;
}

header,
.App > div:first-child,
body:has(.App) header {
  border-bottom: 3px solid var(--brand-red) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

header::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-red), #e85d75, var(--brand-red-dark));
}

section {
  position: relative;
}

main > section {
  overflow: hidden;
  padding-top: clamp(2.2rem, 3.7vw, 3.9rem) !important;
  padding-bottom: clamp(2.2rem, 3.7vw, 3.9rem) !important;
}

main > section:first-child {
  background:
    radial-gradient(ellipse 52% 42% at 10% 18%, rgba(217, 68, 82, 0.12), transparent 68%),
    radial-gradient(ellipse 46% 34% at 92% 70%, rgba(232, 93, 117, 0.10), transparent 66%),
    linear-gradient(155deg, #ffffff 0%, #fff7f9 44%, #f8fafc 100%) !important;
  padding-top: clamp(5rem, 7vw, 6.2rem) !important;
  padding-bottom: clamp(2rem, 3vw, 3rem) !important;
  min-height: auto !important;
}

main h1 {
  font-size: clamp(2rem, 4vw, 3.4rem) !important;
  line-height: 1.02 !important;
}

main h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.4rem) !important;
  line-height: 1.08 !important;
}

main h3 {
  line-height: 1.15 !important;
}

p {
  line-height: 1.55 !important;
}

.container {
  max-width: 1180px !important;
}

.py-20,
.lg\:py-28 {
  padding-top: clamp(2.2rem, 3.7vw, 3.9rem) !important;
  padding-bottom: clamp(2.2rem, 3.7vw, 3.9rem) !important;
}

.mb-16 {
  margin-bottom: 1.85rem !important;
}

.mb-8 {
  margin-bottom: 1.4rem !important;
}

.mt-24 {
  margin-top: 3.25rem !important;
}

.gap-12 {
  gap: 1.75rem !important;
}

.gap-8 {
  gap: 1.35rem !important;
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1.1rem !important;
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.85rem !important;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.75rem !important;
}

.p-8 {
  padding: 1.25rem !important;
}

.p-6 {
  padding: 1.15rem !important;
}

.rounded-2xl,
.rounded-3xl {
  border-radius: 1rem !important;
}

.shadow-lg,
.shadow-xl {
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.09) !important;
}

.border-2.border-gray-100,
.border-2.border-\[\#D94452\]\/20 {
  border-color: rgba(217, 68, 82, 0.18) !important;
}

main > section:not(:first-child)::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 68, 82, 0.3), transparent);
}

main > section:nth-child(2) {
  background:
    radial-gradient(ellipse 56% 48% at 88% 12%, rgba(217, 68, 82, 0.13), transparent 68%),
    radial-gradient(ellipse 42% 38% at 8% 86%, rgba(232, 93, 117, 0.08), transparent 64%),
    linear-gradient(170deg, #f7f9fc 0%, #ffffff 54%, #f4f7fb 100%);
}

main > section:nth-child(3) {
  background:
    radial-gradient(ellipse 62% 48% at 8% 24%, rgba(217, 68, 82, 0.14), transparent 70%),
    radial-gradient(ellipse 44% 36% at 92% 76%, rgba(232, 93, 117, 0.09), transparent 66%),
    linear-gradient(170deg, #fff4f6 0%, #fff 48%, #f7f9fc 100%),
    repeating-linear-gradient(90deg, rgba(217, 68, 82, 0.04) 0 1px, transparent 1px 22px);
}

main > section:nth-child(4) {
  background:
    radial-gradient(ellipse 54% 44% at 86% 26%, rgba(217, 68, 82, 0.12), transparent 70%),
    radial-gradient(ellipse 38% 34% at 12% 72%, rgba(232, 93, 117, 0.07), transparent 66%),
    linear-gradient(170deg, #f8f9fb 0%, #ffffff 42%, #f6faf7 100%);
}

main > section:nth-child(5) {
  background:
    radial-gradient(ellipse 60% 46% at 14% 18%, rgba(217, 68, 82, 0.13), transparent 70%),
    radial-gradient(ellipse 52% 42% at 88% 82%, rgba(232, 93, 117, 0.11), transparent 68%),
    linear-gradient(170deg, #fff7f9 0%, #fff 45%, #fcebf0 100%);
}

section[id] > .container::before {
  content: "";
  position: absolute;
  left: max(1rem, calc((100vw - 1180px) / 2));
  top: 1.15rem;
  width: 42px;
  height: 42px;
  border-top: 3px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 14px 0 0 0;
  pointer-events: none;
}

section[id] > .container::after {
  content: "";
  position: absolute;
  right: max(1rem, calc((100vw - 1180px) / 2));
  bottom: 1.1rem;
  width: 76px;
  height: 10px;
  border-radius: 999px;
  background: repeating-linear-gradient(
    90deg,
    rgba(217, 68, 82, 0.32) 0 8px,
    transparent 8px 15px
  );
  opacity: 0.65;
  pointer-events: none;
}

section[id="servicios"]::before,
section[id="contacto"]::before {
  content: "";
  position: absolute;
  left: max(1rem, calc((100vw - 1180px) / 2));
  top: 1.4rem;
  width: 74px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-red), #f2a0aa);
}

section[id="nosotros"]::after {
  content: "";
  position: absolute;
  right: max(1rem, calc((100vw - 1180px) / 2));
  top: 2rem;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(217, 68, 82, 0.18);
  border-radius: 50%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(217, 68, 82, 0.08) 0 2px,
    transparent 2px 10px
  );
}

section[id="servicios"] .grid > *,
section[id="contacto"] .grid > *,
section[id="nosotros"] .grid > * {
  position: relative;
}

section[id="servicios"] .grid > *::after,
section[id="contacto"] .grid > *::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(217, 68, 82, 0.14);
  background: radial-gradient(circle, rgba(217, 68, 82, 0.1) 0 2px, transparent 3px);
  pointer-events: none;
}

section[id="nosotros"] h2::after,
section[id="contacto"] h2::after,
section[id="servicios"] h2::after {
  content: "";
  display: block;
  width: 92px;
  height: 4px;
  margin: 0.8rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-red), #f1a0aa);
}

.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, #20c766, #128c4a);
  box-shadow: 0 18px 35px rgba(18, 140, 74, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.whatsapp-float::before,
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border: 2px solid rgba(32, 199, 102, 0.55);
  border-radius: inherit;
  animation: whatsapp-pulse 2.2s ease-out infinite;
}

.whatsapp-float::after {
  animation-delay: 1.1s;
}

.whatsapp-float:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 22px 45px rgba(18, 140, 74, 0.38);
}

.whatsapp-float svg {
  width: 21px;
  height: 21px;
}

@keyframes whatsapp-pulse {
  0% {
    opacity: 0.65;
    transform: scale(0.92);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

.contact-send-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.contact-send-options button {
  min-height: 52px;
  border-radius: 0.8rem;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.contact-send-options .send-whatsapp {
  background: linear-gradient(135deg, #20c766, #128c4a);
}

.contact-send-options .send-email {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
}

.final-instagram-section {
  position: relative;
  overflow: hidden;
  padding: clamp(2.2rem, 4vw, 3.6rem) 1rem !important;
  background:
    linear-gradient(135deg, #111827, #283143 48%, var(--brand-red)),
    radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.18), transparent 28%);
  color: #fff;
  text-align: center;
}

.final-instagram-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.08) 0 1px,
    transparent 1px 14px
  );
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

.final-instagram-inner {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  margin: 0 auto;
}

.final-instagram-inner span {
  display: inline-flex;
  margin-bottom: 0.75rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffd6dc;
  font-weight: 900;
}

.final-instagram-inner h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  line-height: 1 !important;
}

.final-instagram-inner p {
  margin: 0.8rem auto 1.2rem;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.76);
}

.final-instagram-inner a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.2rem;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-red);
  font-weight: 900;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.24);
}

.is-gated {
  overflow: hidden;
}

.construction-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(circle at 18% 16%, rgba(217, 68, 82, 0.18), transparent 26%),
    radial-gradient(circle at 82% 82%, rgba(217, 68, 82, 0.14), transparent 28%),
    linear-gradient(135deg, #fff, #f8fafc 52%, #fff4f6);
}

.construction-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(217, 68, 82, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 68, 82, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.construction-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 1px solid rgba(217, 68, 82, 0.22);
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
  text-align: center;
  backdrop-filter: blur(18px);
}

.construction-logo-wrap {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  margin: 0 auto 1rem;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 16px 35px rgba(217, 68, 82, 0.18);
}

.construction-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.construction-kicker {
  display: inline-flex;
  margin-bottom: 0.65rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: rgba(217, 68, 82, 0.1);
  color: var(--brand-red);
  font-weight: 900;
}

.construction-card h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1;
}

.construction-card > p:not(.construction-error):not(.construction-kicker) {
  margin: 0.9rem auto 1.1rem;
  max-width: 390px;
  color: #4b5563;
}

.construction-form {
  display: flex;
  gap: 0.6rem;
}

.construction-form input {
  min-width: 0;
  flex: 1;
  height: 48px;
  padding: 0 0.9rem;
  border: 1px solid rgba(217, 68, 82, 0.24);
  border-radius: 0.8rem;
  background: #fff;
  color: var(--ink);
}

.construction-form button {
  height: 48px;
  padding: 0 1rem;
  border-radius: 0.8rem;
  background: var(--brand-red);
  color: #fff;
  font-weight: 900;
}

.construction-error {
  min-height: 1.2rem;
  margin-top: 0.55rem;
  color: var(--brand-red);
  font-weight: 800;
}

.construction-links {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.construction-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-weight: 900;
}

.instagram-gallery-section {
  position: relative;
  overflow: hidden;
  padding: clamp(2.4rem, 4vw, 4.2rem) 1rem !important;
  background:
    linear-gradient(135deg, #111827, #1f2937 46%, #d94452),
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.16), transparent 28%);
  color: #fff;
}

.instagram-gallery-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  pointer-events: none;
}

.instagram-gallery-section::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 28px rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.instagram-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.instagram-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.7rem 1rem;
  margin-bottom: 1.2rem;
}

.instagram-heading h2 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem) !important;
  line-height: 1 !important;
}

.instagram-heading p {
  grid-column: 1;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.76);
}

.instagram-kicker {
  grid-column: 1 / -1;
  width: max-content;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffd6dc;
  font-weight: 800;
  font-size: 0.82rem;
}

.instagram-profile-link {
  grid-column: 2;
  grid-row: 2 / 4;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-red);
  font-weight: 900;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.instagram-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
}

.instagram-filter button {
  min-height: 38px;
  padding: 0 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
}

.instagram-filter button.active,
.instagram-filter button:hover {
  background: #fff;
  color: var(--brand-red);
}

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

.instagram-card {
  position: relative;
  min-height: 235px;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  color: #fff;
  text-align: left;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.22);
  isolation: isolate;
}

.instagram-card::before,
.instagram-lightbox-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.46)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 12px);
}

.instagram-card::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  z-index: -1;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.instagram-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.34);
}

.instagram-card-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  margin-bottom: 2.8rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  font-weight: 900;
  letter-spacing: 0;
}

.instagram-card-date {
  display: block;
  margin-bottom: 0.4rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  font-weight: 800;
}

.instagram-card strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.35rem;
  line-height: 1.05;
}

.instagram-card p {
  max-width: 92%;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.instagram-card-action {
  position: absolute;
  right: 1rem;
  bottom: 0.9rem;
  font-size: 0.82rem;
  font-weight: 900;
  color: #fff;
}

.post-red {
  background: linear-gradient(135deg, #d94452, #801f2a);
}

.post-green {
  background: linear-gradient(135deg, #168a55, #0f3f2b);
}

.post-slate {
  background: linear-gradient(135deg, #334155, #111827);
}

.post-gold {
  background: linear-gradient(135deg, #b87d24, #4a2b0a);
}

.post-blue {
  background: linear-gradient(135deg, #2563eb, #172554);
}

.post-red-soft {
  background: linear-gradient(135deg, #e85d75, #6f1d2f);
}

.instagram-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
}

.instagram-lightbox-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 430px) minmax(260px, 360px);
  width: min(880px, 100%);
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

.instagram-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.84);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
}

.instagram-lightbox-visual {
  position: relative;
  min-height: 390px;
  display: grid;
  place-items: center;
  color: #fff;
  isolation: isolate;
}

.instagram-lightbox-visual span {
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 2rem;
  font-weight: 900;
}

.instagram-lightbox-copy {
  padding: 2rem;
  color: var(--ink);
}

.instagram-lightbox-copy span {
  color: var(--brand-red);
  font-size: 0.85rem;
  font-weight: 900;
}

.instagram-lightbox-copy h3 {
  margin: 0.6rem 0 0.75rem;
  font-size: 2rem;
}

.instagram-lightbox-copy p {
  color: #4b5563;
}

.instagram-lightbox-copy a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin-top: 1.2rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--brand-red);
  color: #fff;
  font-weight: 900;
}

/* ==========================================
   SPACING — tighter values override earlier rules
   ========================================== */
main > section {
  padding-top: clamp(1.8rem, 3vw, 3.2rem) !important;
  padding-bottom: clamp(1.8rem, 3vw, 3.2rem) !important;
}

main > section:first-child {
  padding-top: clamp(3.8rem, 5.5vw, 5rem) !important;
  padding-bottom: clamp(1.4rem, 2.2vw, 2.2rem) !important;
}

.py-20,
.lg\:py-28 {
  padding-top: clamp(1.8rem, 3vw, 3.2rem) !important;
  padding-bottom: clamp(1.8rem, 3vw, 3.2rem) !important;
}

footer {
  padding-top: clamp(1rem, 1.8vw, 1.8rem) !important;
  padding-bottom: clamp(1rem, 1.8vw, 1.8rem) !important;
}

/* ==========================================
   SCROLL REVEAL
   ========================================== */
/* Base fade — aplica siempre, independiente de preferencia de movimiento */
.sr-section,
.sr-card,
.sr-up {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.sr-section.sr-visible,
.sr-card.sr-visible,
.sr-up.sr-visible {
  opacity: 1;
}

/* Movimiento adicional para usuarios sin preferencia de reducción */
@media (prefers-reduced-motion: no-preference) {
  .sr-section {
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sr-section.sr-visible {
    transform: none;
  }

  .sr-card {
    transform: translateY(20px) scale(0.97);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sr-card.sr-visible {
    transform: none;
  }

  .sr-up {
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sr-up.sr-visible {
    transform: none;
  }
}

/* ==========================================
   DECORATIVE ELEMENTS
   ========================================== */
.deco-orb-a,
.deco-orb-b {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}

.deco-orb-a {
  width: 520px;
  height: 520px;
  top: -180px;
  right: -220px;
  background: radial-gradient(circle, rgba(217, 68, 82, 0.13), transparent 65%);
  filter: blur(3px);
}

.deco-orb-b {
  width: 380px;
  height: 380px;
  bottom: 15%;
  left: -180px;
  background: radial-gradient(circle, rgba(15, 23, 42, 0.09), transparent 65%);
  filter: blur(3px);
}

.deco-num {
  position: absolute;
  font-size: clamp(6rem, 11vw, 10rem);
  font-weight: 900;
  color: rgba(217, 68, 82, 0.045);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.04em;
  user-select: none;
}

.deco-dots {
  position: absolute;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(5, 4px);
  grid-template-rows: repeat(4, 4px);
  gap: 8px;
  z-index: 0;
}

.deco-dots span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-red);
  opacity: 0.26;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-red), #f07a88);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 999;
  pointer-events: none;
}

@media (max-width: 767px) {
  main > section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  main > section:first-child {
    padding-top: 3.8rem !important;
    padding-bottom: 1.1rem !important;
  }

  main h1 {
    font-size: clamp(1.8rem, 9vw, 2.4rem) !important;
  }

  .p-8,
  .p-6 {
    padding: 1rem !important;
  }

  .gap-12,
  .gap-8 {
    gap: 1rem !important;
  }

  .mb-16 {
    margin-bottom: 1.4rem !important;
  }

  section[id] > .container::before,
  section[id] > .container::after {
    opacity: 0.35;
    transform: scale(0.78);
  }

  .whatsapp-float {
    left: auto;
    right: 16px;
    bottom: 16px;
    justify-content: center;
    min-height: 48px;
    padding: 0 16px;
  }

  footer {
    padding-bottom: 4.75rem !important;
  }

  .contact-send-options {
    grid-template-columns: 1fr;
  }

  .construction-form {
    flex-direction: column;
  }

  .construction-form button {
    width: 100%;
  }

  .instagram-gallery-section {
    padding: 2rem 1rem !important;
  }

  .instagram-heading {
    display: block;
  }

  .instagram-heading h2 {
    margin-top: 0.85rem;
    font-size: clamp(2rem, 10vw, 2.75rem) !important;
  }

  .instagram-heading p {
    margin: 0.7rem 0 1rem;
  }

  .instagram-profile-link {
    min-height: 40px;
  }

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

  .instagram-card {
    min-height: 205px;
  }

  .instagram-lightbox-panel {
    grid-template-columns: 1fr;
  }

  .instagram-lightbox-visual {
    min-height: 245px;
  }

  .instagram-lightbox-copy {
    padding: 1.35rem;
  }
}

/* ==========================================
   SECTION NAV (índice lateral)
   ========================================== */
.section-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 6px 0;
}

.section-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 5px 0;
  cursor: pointer;
}

.section-nav-label {
  font-size: 0.69rem;
  font-weight: 700;
  color: var(--brand-red);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgba(255, 255, 255, 0.98), 0 0 10px rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.section-nav:hover .section-nav-label,
.section-nav-item.active .section-nav-label {
  opacity: 1;
  transform: none;
}

.section-nav-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid rgba(217, 68, 82, 0.4);
  background: transparent;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-nav-item.active .section-nav-dot {
  background: var(--brand-red);
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(217, 68, 82, 0.18);
  width: 9px;
  height: 9px;
}

.section-nav-item:hover .section-nav-dot {
  border-color: var(--brand-red);
  background: rgba(217, 68, 82, 0.2);
}

@media (max-width: 900px) {
  .section-nav {
    display: none;
  }
}

/* ==========================================
   NAV BUTTONS — color y hover
   ========================================== */
header button[class*="font-medium"] {
  padding: 0.28rem 0.72rem !important;
  border-radius: 999px !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

header button[class*="font-medium"]:hover {
  background: rgba(217, 68, 82, 0.09) !important;
  color: var(--brand-red) !important;
}

/* Contactar button — pulse ring */
@keyframes contact-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(217, 68, 82, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(217, 68, 82, 0); }
  100% { box-shadow: 0 0 0 0   rgba(217, 68, 82, 0); }
}

header button[class*="inline-flex"][class*="items-center"] {
  animation: contact-pulse 2.4s ease-out infinite !important;
}

/* ==========================================
   SECTION DECORATIVE ELEMENTS
   ========================================== */
.section-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.sd-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(217, 68, 82, 0.1);
  background: transparent;
}

.sd-dot-grid {
  position: absolute;
  background-image: radial-gradient(circle, rgba(217, 68, 82, 0.22) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  opacity: 0.7;
}

.sd-dot-grid.fade-tr {
  -webkit-mask-image: radial-gradient(ellipse at top right, black 15%, transparent 72%);
  mask-image: radial-gradient(ellipse at top right, black 15%, transparent 72%);
}

.sd-dot-grid.fade-br {
  -webkit-mask-image: radial-gradient(ellipse at bottom right, black 15%, transparent 72%);
  mask-image: radial-gradient(ellipse at bottom right, black 15%, transparent 72%);
}

.sd-dot-grid.fade-center-out {
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 28%, black 68%);
  mask-image: radial-gradient(ellipse at center, transparent 28%, black 68%);
}

.sd-stripe-block {
  position: absolute;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 12px,
    rgba(217, 68, 82, 0.07) 12px 13px
  );
}

.sd-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 68, 82, 0.1), transparent 68%);
  filter: blur(6px);
}

.sd-cross {
  position: absolute;
  width: 18px;
  height: 18px;
}

.sd-cross::before,
.sd-cross::after {
  content: "";
  position: absolute;
  background: rgba(217, 68, 82, 0.28);
  border-radius: 2px;
}

.sd-cross::before {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.sd-cross::after {
  width: 2px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* ==========================================
   CONTACT PREFERENCE TOGGLE
   ========================================== */
.contact-pref {
  margin-bottom: 1rem;
}

.contact-pref-label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: #6b7280;
}

.contact-pref-options {
  display: flex;
  gap: 0.5rem;
}

.contact-pref-btn {
  flex: 1;
  min-height: 42px;
  border-radius: 10px;
  border: 2px solid #e5e7eb;
  background: #f9fafb;
  font-weight: 700;
  font-size: 0.88rem;
  color: #6b7280;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.contact-pref-btn.active[data-pref="email"] {
  border-color: var(--brand-red);
  background: rgba(217, 68, 82, 0.05);
  color: var(--brand-red);
}

.contact-pref-btn.active[data-pref="whatsapp"] {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.05);
  color: #16a34a;
}

.contact-pref-btn:not(.active):hover {
  border-color: #d1d5db;
  background: #f3f4f6;
}

.wa-submit-btn {
  display: none;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #20c766, #128c4a);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(18, 140, 74, 0.28);
  transition: filter 0.18s ease, transform 0.18s ease;
}

.wa-submit-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.wa-submit-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .container {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  main > section {
    padding-top: 1.05rem !important;
    padding-bottom: 1.05rem !important;
  }

  main > section:first-child {
    padding-top: 3.6rem !important;
    padding-bottom: 0.75rem !important;
  }

  main h1 {
    font-size: clamp(1.75rem, 8.8vw, 2.3rem) !important;
    line-height: 0.96 !important;
  }

  main h2 {
    font-size: clamp(1.45rem, 7.4vw, 2rem) !important;
    line-height: 1.03 !important;
  }

  main h3 {
    font-size: 1.08rem !important;
  }

  p,
  .text-lg,
  .lg\:text-xl {
    font-size: 0.95rem !important;
    line-height: 1.38 !important;
  }

  .mb-16,
  .mb-8,
  .mb-6,
  .mb-4 {
    margin-bottom: 0.7rem !important;
  }

  .mt-24,
  .mt-8,
  .mt-6,
  .mt-4 {
    margin-top: 0.75rem !important;
  }

  .gap-12,
  .gap-8,
  .gap-6,
  .gap-4 {
    gap: 0.65rem !important;
  }

  .space-y-8 > :not([hidden]) ~ :not([hidden]),
  .space-y-6 > :not([hidden]) ~ :not([hidden]),
  .space-y-4 > :not([hidden]) ~ :not([hidden]),
  .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.5rem !important;
  }

  .p-8,
  .p-6,
  .p-4 {
    padding: 0.78rem !important;
  }

  .py-20,
  .py-16,
  .py-12,
  .lg\:py-28 {
    padding-top: 1.05rem !important;
    padding-bottom: 1.05rem !important;
  }

  .h-48 {
    height: 8.2rem !important;
  }

  .h-72,
  .h-96,
  .h-\[600px\] {
    height: auto !important;
    max-height: 15.5rem !important;
  }

  .rounded-3xl,
  .rounded-2xl,
  .rounded-xl {
    border-radius: 0.75rem !important;
  }

  .shadow-xl,
  .shadow-lg {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
  }

  section[id] > .container::before,
  section[id] > .container::after,
  section[id="servicios"]::before,
  section[id="contacto"]::before,
  section[id="nosotros"]::after {
    opacity: 0.24 !important;
    transform: scale(0.68);
  }

  .contact-send-options {
    gap: 0.5rem !important;
  }

  .contact-send-options button,
  .wa-submit-btn {
    min-height: 43px !important;
  }

  .contact-pref {
    margin-bottom: 0.65rem !important;
  }

  .contact-pref-btn {
    min-height: 38px !important;
  }

  .final-instagram-section {
    padding: 1.15rem 0.85rem !important;
  }

  .final-instagram-inner p {
    margin: 0.45rem auto 0.75rem !important;
  }

  .whatsapp-float {
    min-height: 43px !important;
    padding: 0 0.85rem !important;
    right: 12px !important;
    bottom: 12px !important;
  }

  .whatsapp-float svg {
    width: 18px;
    height: 18px;
  }
}



/* ==========================================
   V2 GATE — Bienvenida / Login
   ========================================== */

.v2-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  background: #080c18;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Fondo decorativo */
.v2-gate-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.v2-gate-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.v2-gate-orb-1 {
  width: 650px;
  height: 650px;
  top: -200px;
  left: -150px;
  background: radial-gradient(circle, rgba(217, 68, 82, 0.28), transparent 65%);
}

.v2-gate-orb-2 {
  width: 420px;
  height: 420px;
  bottom: -100px;
  left: 35%;
  background: radial-gradient(circle, rgba(217, 68, 82, 0.16), transparent 65%);
}

.v2-gate-orb-3 {
  width: 340px;
  height: 340px;
  top: 30%;
  right: 12%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08), transparent 65%);
}

.v2-gate-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.6) 80%, transparent 100%);
}

/* Panel izquierdo — info de marca */
.v2-gate-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4rem);
  position: relative;
  z-index: 1;
  min-width: 0;
}

.v2-gate-logo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 2.75rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 50px rgba(217, 68, 82, 0.32),
    0 12px 32px rgba(0, 0, 0, 0.4);
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.v2-gate-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v2-gate-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 1.1rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(217, 68, 82, 0.38);
  border-radius: 999px;
  background: rgba(217, 68, 82, 0.1);
  color: #f87585;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: max-content;
}

.v2-gate-eyebrow-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d94452;
  box-shadow: 0 0 8px rgba(217, 68, 82, 0.9);
  animation: v2-gate-blink 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes v2-gate-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.v2-gate-brand-name {
  margin: 0 0 1.4rem;
  font-size: clamp(3.8rem, 7.5vw, 6.5rem);
  font-weight: 900;
  line-height: 0.88;
  color: #fff;
  letter-spacing: -0.04em;
}

.v2-gate-brand-name em {
  font-style: normal;
  color: #d94452;
}

.v2-gate-tagline {
  max-width: 420px;
  margin: 0 0 2.75rem;
  color: rgba(248, 250, 252, 0.5);
  font-size: 1.05rem;
  line-height: 1.55;
}

.v2-gate-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.v2-gate-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.38rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(248, 250, 252, 0.65);
  font-size: 0.8rem;
  font-weight: 600;
}

.v2-gate-chip::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d94452;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Separador vertical */
.v2-gate-sep {
  width: 1px;
  margin: 3rem 0;
  flex-shrink: 0;
  align-self: stretch;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 75%, transparent 100%);
  position: relative;
  z-index: 1;
}

/* Panel derecho — login */
.v2-gate-login {
  width: min(460px, 44%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 4vw, 3.75rem) clamp(2rem, 4vw, 3.25rem);
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.027);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid rgba(255, 255, 255, 0.065);
}

.v2-gate-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 1.65rem;
  padding: 0.32rem 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(248, 250, 252, 0.6);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: max-content;
}

.v2-gate-access-badge svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
  flex-shrink: 0;
}

.v2-gate-login h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.8rem, 3.5vw, 2.55rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.v2-gate-login > p {
  margin: 0 0 2.25rem;
  color: rgba(248, 250, 252, 0.48);
  font-size: 0.91rem;
  line-height: 1.55;
}

/* Formulario */
.v2-gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.v2-gate-field label {
  display: block;
  margin-bottom: 0.52rem;
  color: rgba(248, 250, 252, 0.6);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.v2-gate-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.v2-gate-input-icon {
  position: absolute;
  left: 15px;
  color: rgba(248, 250, 252, 0.32);
  pointer-events: none;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.v2-gate-input-wrap input {
  width: 100%;
  height: 54px;
  padding: 0 3.2rem 0 2.8rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.055);
  color: #f8fafc;
  font-size: 1.05rem;
  font-family: inherit;
  letter-spacing: 0.12em;
  outline: none;
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.v2-gate-input-wrap input::placeholder {
  letter-spacing: 0.04em;
  color: rgba(248, 250, 252, 0.24);
}

.v2-gate-input-wrap input:focus {
  border-color: rgba(217, 68, 82, 0.65);
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 3px rgba(217, 68, 82, 0.15),
    0 0 24px rgba(217, 68, 82, 0.1);
}

.v2-gate-eye-btn {
  position: absolute;
  right: 13px;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(248, 250, 252, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s ease;
  padding: 0;
}

.v2-gate-eye-btn:hover {
  color: rgba(248, 250, 252, 0.75);
}

.v2-gate-eye-btn svg {
  width: 16px;
  height: 16px;
}

.v2-gate-submit {
  height: 54px;
  border-radius: 13px;
  background: linear-gradient(135deg, #d94452 0%, #b83040 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.025em;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 0.35rem;
  transition: filter 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
  box-shadow:
    0 8px 28px rgba(217, 68, 82, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.v2-gate-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(217, 68, 82, 0.48);
}

.v2-gate-submit:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.v2-gate-submit svg {
  width: 17px;
  height: 17px;
  transition: transform 0.22s ease;
  flex-shrink: 0;
}

.v2-gate-submit:hover svg {
  transform: translateX(4px);
}

.v2-gate-error {
  min-height: 1rem;
  color: #f87585;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  margin-top: 0.05rem;
}

/* Redes sociales */
.v2-gate-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.v2-gate-social a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(248, 250, 252, 0.65);
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.18s ease;
}

.v2-gate-social a:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.09);
  color: #f8fafc;
  transform: translateY(-1px);
}

.v2-gate-social a svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Animacion de shake en error */
@keyframes v2-gate-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-7px); }
  36% { transform: translateX(7px); }
  54% { transform: translateX(-5px); }
  72% { transform: translateX(5px); }
  90% { transform: translateX(-2px); }
}

.v2-gate-shake {
  animation: v2-gate-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Fade out al desbloquear */
@keyframes v2-gate-fadeout {
  to { opacity: 0; transform: scale(1.015); }
}

.v2-gate-leaving {
  animation: v2-gate-fadeout 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

/* ——— MOBILE ——— */
@media (max-width: 767px) {
  .v2-gate {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    align-items: stretch;
  }

  .v2-gate-sep {
    display: none;
  }

  .v2-gate-info {
    flex: none;
    width: 100%;
    padding: 2.75rem 1.4rem 1.6rem;
    text-align: center;
    align-items: center;
  }

  .v2-gate-logo {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
  }

  .v2-gate-brand-name {
    font-size: clamp(3rem, 13vw, 4.2rem);
    margin-bottom: 0.85rem;
  }

  .v2-gate-tagline {
    font-size: 0.88rem;
    margin-bottom: 1.35rem;
  }

  .v2-gate-chips {
    justify-content: center;
  }

  .v2-gate-login {
    flex: none;
    width: 100%;
    padding: 1.85rem 1.4rem 3rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.03);
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .v2-gate-login h2 {
    font-size: 1.65rem;
    text-align: center;
  }

  .v2-gate-login > p {
    text-align: center;
    font-size: 0.87rem;
  }

  .v2-gate-access-badge {
    margin-left: auto;
    margin-right: auto;
  }

  .v2-gate-input-wrap input {
    height: 50px;
    font-size: 1rem;
  }

  .v2-gate-submit {
    height: 50px;
  }
}

/* ——— TABLET ——— */
@media (max-width: 960px) and (min-width: 768px) {
  .v2-gate-info {
    padding: 2.5rem 2rem;
  }

  .v2-gate-login {
    width: min(400px, 46%);
    padding: 2.5rem 2rem;
  }

  .v2-gate-brand-name {
    font-size: clamp(3.2rem, 5.5vw, 4.5rem);
  }
}

/* ==========================================
   HEADER — toque oscuro sutil
   ========================================== */
header,
.App > div:first-child,
body:has(.App) header {
  background: linear-gradient(160deg, #e6e9f2 0%, #f0f2f8 50%, #e8eaf4 100%) !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.11) !important;
}

/* ==========================================
   DECORACIONES DE ESQUINA — eliminar
   ========================================== */
section[id] > .container::before,
section[id] > .container::after {
  display: none;
}

section[id="servicios"] .grid > *::after,
section[id="contacto"] .grid > *::after {
  display: none;
}

/* ==========================================
   NUEVAS DECORACIONES — sanitización / control de plagas
   ========================================== */

/* — INICIO: micro-puntos de atomizador (abajo-derecha) — */
main > section:first-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 240px;
  height: 240px;
  background-image: radial-gradient(circle, rgba(217, 68, 82, 0.14) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at bottom right, rgba(0,0,0,0.55) 0%, transparent 65%);
  mask-image: radial-gradient(ellipse at bottom right, rgba(0,0,0,0.55) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* — SERVICIOS: patrón spray (arriba-derecha) — */
section[id="servicios"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  width: 220px;
  height: 220px;
  background-image: radial-gradient(circle, rgba(217, 68, 82, 0.16) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  background-color: transparent;
  border-radius: 0;
  -webkit-mask-image: radial-gradient(ellipse at top right, rgba(0,0,0,0.65) 0%, transparent 68%);
  mask-image: radial-gradient(ellipse at top right, rgba(0,0,0,0.65) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* — NOSOTROS: escudo de protección (arriba-derecha) — */
section[id="nosotros"]::after {
  content: "";
  position: absolute;
  right: max(2.5rem, calc((100vw - 1180px) / 2));
  top: 1.75rem;
  width: 36px;
  height: 42px;
  background: rgba(217, 68, 82, 0.13);
  clip-path: polygon(50% 0%, 100% 18%, 100% 62%, 50% 100%, 0% 62%, 0% 18%);
  border: none;
  border-radius: 0;
  pointer-events: none;
  z-index: 0;
}

/* — CONTACTO: cruz de sanitización (arriba-izquierda) — */
section[id="contacto"]::before {
  content: "";
  position: absolute;
  left: max(2.5rem, calc((100vw - 1180px) / 2));
  top: 1.75rem;
  right: auto;
  width: 26px;
  height: 26px;
  background: rgba(217, 68, 82, 0.15);
  clip-path: polygon(36% 0%, 64% 0%, 64% 36%, 100% 36%, 100% 64%, 64% 64%, 64% 100%, 36% 100%, 36% 64%, 0% 64%, 0% 36%, 36% 36%);
  border-radius: 0;
  pointer-events: none;
  z-index: 0;
}

/* Ocultar en mobile para no saturar */
@media (max-width: 767px) {
  main > section:first-child::after,
  section[id="servicios"]::before,
  section[id="nosotros"]::after,
  section[id="contacto"]::before {
    opacity: 0.5;
    transform: scale(0.7);
  }
}

/* ==========================================
   PALETA SECCIONES — azul-grisáceo sutil
   ========================================== */

body {
  background: #f0f2f8;
}

/* Hero — tono más rico, punto de entrada */
main > section:first-child {
  background: linear-gradient(160deg, #e8eaf4 0%, #eef0f8 55%, #f0f2f8 100%) !important;
}

/* Servicios — muy claro, casi blanco con tinte azul */
main > section:nth-child(2) {
  background: linear-gradient(160deg, #f5f6fc 0%, #fafbff 55%, #f2f4fa 100%) !important;
}

/* ¿Por qué elegirnos? — tono más saturado */
main > section:nth-child(3) {
  background: linear-gradient(160deg, #eaecf5 0%, #f0f2f9 50%, #e8eaf4 100%) !important;
}

/* Nosotros — neutro claro */
main > section:nth-child(4) {
  background: linear-gradient(160deg, #f4f5fb 0%, #f8f9fd 45%, #f0f2f8 100%) !important;
}

/* Contacto — más saturado de nuevo, cierra el ciclo */
main > section:nth-child(5) {
  background: linear-gradient(160deg, #e9ecf5 0%, #eef0f8 50%, #e6e9f2 100%) !important;
}

/* Separador rojo entre secciones — se mantiene */
main > section:not(:first-child)::before {
  background: linear-gradient(90deg, transparent, rgba(217, 68, 82, 0.22), transparent) !important;
}

/* ==========================================
   ILUSTRACIONES SVG — alusión temática por sección
   ========================================== */

/* Asegurar contexto de posición */
main > section {
  position: relative;
  overflow: hidden;
}

/* — INICIO: escudo de protección (izquierda, centro-vertical) — */
main > section:first-child::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: 286px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cpath d='M100 10L185 45L185 130Q185 175 100 210Q15 175 15 130L15 45Z' fill='none' stroke='rgba(217,68,82,0.18)' stroke-width='2'/%3E%3Cpath d='M100 32L163 59L163 128Q163 163 100 188Q37 163 37 128L37 59Z' fill='none' stroke='rgba(217,68,82,0.12)' stroke-width='1.5'/%3E%3Cpath d='M100 54L141 72L141 126Q141 150 100 166Q59 150 59 126L59 72Z' fill='rgba(217,68,82,0.07)'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}

/* — SERVICIOS: insecto/plaga (abajo-derecha) — */
section[id="servicios"]::after {
  content: "";
  position: absolute;
  right: -15px;
  bottom: -15px;
  width: 160px;
  height: 213px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cellipse cx='60' cy='100' rx='22' ry='38' fill='rgba(217,68,82,0.11)'/%3E%3Ccircle cx='60' cy='56' r='16' fill='rgba(217,68,82,0.11)'/%3E%3Cline x1='53' y1='43' x2='35' y2='20' stroke='rgba(217,68,82,0.16)' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='67' y1='43' x2='85' y2='20' stroke='rgba(217,68,82,0.16)' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='42' y1='80' x2='15' y2='65' stroke='rgba(217,68,82,0.13)' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='42' y1='100' x2='12' y2='100' stroke='rgba(217,68,82,0.13)' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='42' y1='120' x2='15' y2='135' stroke='rgba(217,68,82,0.13)' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='78' y1='80' x2='105' y2='65' stroke='rgba(217,68,82,0.13)' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='78' y1='100' x2='108' y2='100' stroke='rgba(217,68,82,0.13)' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='78' y1='120' x2='105' y2='135' stroke='rgba(217,68,82,0.13)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}

/* — ¿POR QUÉ ELEGIRNOS?: hexágonos/panal (arriba-derecha) — */
main > section:nth-child(3)::after {
  content: "";
  position: absolute;
  right: -15px;
  top: -15px;
  width: 200px;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpolygon points='80,5 145,42 145,118 80,155 15,118 15,42' fill='none' stroke='rgba(217,68,82,0.14)' stroke-width='2'/%3E%3Cpolygon points='80,25 125,51 125,109 80,135 35,109 35,51' fill='none' stroke='rgba(217,68,82,0.1)' stroke-width='1.5'/%3E%3Cpolygon points='80,46 105,59 105,101 80,114 55,101 55,59' fill='rgba(217,68,82,0.05)' stroke='rgba(217,68,82,0.08)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

/* — NOSOTROS: molécula / compuesto químico (abajo-izquierda) — */
section[id="nosotros"]::before {
  content: "";
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: 220px;
  height: 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cline x1='90' y1='90' x2='90' y2='30' stroke='rgba(217,68,82,0.13)' stroke-width='1.5'/%3E%3Cline x1='90' y1='90' x2='142' y2='60' stroke='rgba(217,68,82,0.13)' stroke-width='1.5'/%3E%3Cline x1='90' y1='90' x2='142' y2='120' stroke='rgba(217,68,82,0.13)' stroke-width='1.5'/%3E%3Cline x1='90' y1='90' x2='90' y2='150' stroke='rgba(217,68,82,0.13)' stroke-width='1.5'/%3E%3Cline x1='90' y1='90' x2='38' y2='120' stroke='rgba(217,68,82,0.13)' stroke-width='1.5'/%3E%3Cline x1='90' y1='90' x2='38' y2='60' stroke='rgba(217,68,82,0.13)' stroke-width='1.5'/%3E%3Ccircle cx='90' cy='90' r='12' fill='rgba(217,68,82,0.13)'/%3E%3Ccircle cx='90' cy='30' r='7' fill='rgba(217,68,82,0.1)'/%3E%3Ccircle cx='142' cy='60' r='7' fill='rgba(217,68,82,0.1)'/%3E%3Ccircle cx='142' cy='120' r='7' fill='rgba(217,68,82,0.1)'/%3E%3Ccircle cx='90' cy='150' r='7' fill='rgba(217,68,82,0.1)'/%3E%3Ccircle cx='38' cy='120' r='7' fill='rgba(217,68,82,0.1)'/%3E%3Ccircle cx='38' cy='60' r='7' fill='rgba(217,68,82,0.1)'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* — CONTACTO: gotas de producto (arriba-derecha) — */
section[id="contacto"]::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -10px;
  width: 170px;
  height: 218px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 180'%3E%3Cpath d='M70 20Q85 50 95 80Q105 110 70 130Q35 110 45 80Q55 50 70 20Z' fill='rgba(217,68,82,0.1)'/%3E%3Cpath d='M110 60Q118 75 122 92Q126 110 110 120Q94 110 98 92Q102 75 110 60Z' fill='rgba(217,68,82,0.08)'/%3E%3Cpath d='M32 100Q38 112 41 124Q44 137 32 144Q20 137 23 124Q26 112 32 100Z' fill='rgba(217,68,82,0.07)'/%3E%3Cpath d='M122 140Q126 148 128 157Q130 166 122 171Q114 166 116 157Q118 148 122 140Z' fill='rgba(217,68,82,0.06)'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}

/* Mobile: reducir tamaño y opacidad para no saturar */
@media (max-width: 767px) {
  main > section:first-child::before {
    width: 140px;
    height: 154px;
    left: -45px;
    opacity: 0.35;
  }

  section[id="servicios"]::after,
  main > section:nth-child(3)::after,
  section[id="nosotros"]::before,
  section[id="contacto"]::after {
    width: 90px;
    height: 90px;
    opacity: 0.3;
  }
}

/* ==========================================
   MOBILE COMPACT — espacios, botones, rendimiento
   ========================================== */
@media (max-width: 767px) {

  /* ── Secciones: espaciado mínimo ── */
  main > section {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  main > section:first-child {
    padding-top: 3.1rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-20,
  .py-16,
  .py-12,
  .py-10,
  .py-8,
  .lg\:py-28 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  footer {
    padding-top: 0.75rem !important;
    padding-bottom: 4.25rem !important;
  }

  /* ── Hero image: altura reducida ── */
  .h-\[600px\],
  .h-96,
  .h-72 {
    max-height: 10.5rem !important;
    height: auto !important;
  }

  .h-48 {
    max-height: 6.5rem !important;
    height: auto !important;
  }

  /* ── Tipografía compacta ── */
  main h1 {
    font-size: clamp(1.6rem, 7.8vw, 2rem) !important;
    line-height: 0.93 !important;
    margin-bottom: 0.45rem !important;
  }

  main h2 {
    font-size: clamp(1.25rem, 6.4vw, 1.65rem) !important;
    line-height: 1.0 !important;
    margin-bottom: 0.4rem !important;
  }

  main h3 {
    font-size: 0.97rem !important;
    line-height: 1.15 !important;
  }

  p,
  .text-lg,
  .text-base,
  .lg\:text-xl {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
  }

  /* ── Márgenes compactos ── */
  .mb-16, .mb-12, .mb-8, .mb-6, .mb-4, .mb-3 {
    margin-bottom: 0.55rem !important;
  }

  .mt-24, .mt-12, .mt-8, .mt-6, .mt-4, .mt-3 {
    margin-top: 0.55rem !important;
  }

  .gap-12, .gap-8, .gap-6, .gap-4 {
    gap: 0.5rem !important;
  }

  .space-y-8 > :not([hidden]) ~ :not([hidden]),
  .space-y-6 > :not([hidden]) ~ :not([hidden]),
  .space-y-4 > :not([hidden]) ~ :not([hidden]),
  .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.38rem !important;
  }

  /* ── Cards ── */
  .p-8, .p-6, .p-4 {
    padding: 0.6rem !important;
  }

  /* ── Botones — más pequeños ── */
  /* Reducir altura de botones Tailwind h-* */
  .h-12 { height: 2.1rem !important; min-height: 2.1rem !important; }
  .h-14 { height: 2.3rem !important; min-height: 2.3rem !important; }
  .h-10 { height: 2.0rem !important; min-height: 2.0rem !important; }

  /* Reducir padding vertical en botones */
  .py-4 { padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; }
  .py-3 { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }

  /* Reducir padding horizontal */
  .px-8 { padding-left: 1.0rem !important; padding-right: 1.0rem !important; }
  .px-6 { padding-left: 0.85rem !important; padding-right: 0.85rem !important; }

  /* Tamaño de fuente en botones */
  main button,
  main a[class*="inline-flex"] {
    font-size: 0.86rem !important;
  }

  /* Componentes personalizados */
  .contact-send-options button,
  .wa-submit-btn {
    min-height: 36px !important;
    font-size: 0.86rem !important;
  }

  .contact-pref-btn {
    min-height: 32px !important;
    font-size: 0.8rem !important;
  }

  .whatsapp-float {
    min-height: 38px !important;
    padding: 0 0.7rem !important;
    font-size: 0.86rem !important;
    bottom: 12px !important;
    right: 12px !important;
    gap: 6px !important;
  }

  .whatsapp-float svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* ── Rendimiento: desactivar efectos costosos en GPU ── */

  /* Orbs fijos con blur — causan repaints */
  .App::before,
  .App::after {
    display: none !important;
  }

  /* Orbs decorativos */
  .deco-orb-a,
  .deco-orb-b {
    display: none !important;
  }

  /* Pulse rings del botón WhatsApp */
  .whatsapp-float::before,
  .whatsapp-float::after {
    display: none !important;
  }

  /* Pulse del botón Contactar en nav */
  header button[class*="inline-flex"][class*="items-center"] {
    animation: none !important;
    box-shadow: none !important;
  }

  /* Scroll reveal: solo fade, sin transform para mayor fluidez */
  .sr-section,
  .sr-card,
  .sr-up {
    transform: none !important;
    transition: opacity 0.28s ease !important;
  }

  /* Blur del header — simplificar */
  header,
  .App > div:first-child {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Sección stripe pattern — simplificar */
  main > section:nth-child(3) {
    background: linear-gradient(170deg, #fff0f3 0%, #fff 45%, #f5f8fc 100%) !important;
  }

  /* Elemento tipo "section deco" con blur */
  .sd-blob {
    display: none !important;
  }
}

/* ==========================================
   HERO LAYOUT + CARDS — fixes visuales mobile
   ========================================== */

@media (max-width: 767px) {

  /* ─── 1. Hero: bajar contenido para que el chip sea visible ─── */
  main > section:first-child {
    padding-top: 4.1rem !important;
  }

  /* ─── 2. Hero: layout 2 columnas — texto izquierda, imagen derecha ─── */

  /* Convertir el grid del hero en 2 columnas en mobile */
  main > section:first-child .lg\:grid-cols-2,
  main > section:first-child .md\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: 57% 1fr !important;
    grid-template-rows: auto !important;
    align-items: start !important;
    gap: 0 0.5rem !important;
  }

  /* Columna de texto: primera, izquierda */
  main > section:first-child .lg\:grid-cols-2 > *:first-child,
  main > section:first-child .md\:grid-cols-2 > *:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* Columna de imagen: segunda, derecha */
  main > section:first-child .lg\:grid-cols-2 > *:last-child,
  main > section:first-child .md\:grid-cols-2 > *:last-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 0.75rem !important;
  }

  /* Imagen del hero: portrait, rellena la columna */
  main > section:first-child .h-\[600px\] {
    height: auto !important;
    max-height: none !important;
    min-height: 14rem !important;
    aspect-ratio: 2 / 3 !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important; /* el wrapper ya tiene radius */
  }

  /* Ocultar el stat card overlay (queda raro en columna estrecha) */
  main > section:first-child .lg\:grid-cols-2 > *:last-child .absolute,
  main > section:first-child .md\:grid-cols-2 > *:last-child .absolute {
    display: none !important;
  }

  /* h1 un poco más compacto en columna estrecha */
  main > section:first-child h1 {
    font-size: clamp(1.35rem, 5.8vw, 1.7rem) !important;
    line-height: 1.0 !important;
  }

  /* Botones: full width dentro de la columna de texto */
  main > section:first-child .lg\:grid-cols-2 > *:first-child a[class*="inline-flex"],
  main > section:first-child .lg\:grid-cols-2 > *:first-child button,
  main > section:first-child .md\:grid-cols-2 > *:first-child a[class*="inline-flex"],
  main > section:first-child .md\:grid-cols-2 > *:first-child button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ─── 3. Service cards: imágenes completas y títulos más llamativos ─── */

  /* Anular el override global de .h-48 para las cards de servicios */
  section[id="servicios"] .h-48,
  section[id="servicios"] .h-56,
  section[id="servicios"] .h-64 {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    overflow: hidden !important;
    display: block !important;
  }

  /* Imagen dentro del card: centrada, cubriendo */
  section[id="servicios"] .h-48 img,
  section[id="servicios"] .h-56 img,
  section[id="servicios"] .h-64 img,
  section[id="servicios"] img[class*="object-cover"] {
    object-fit: cover !important;
    object-position: center 30% !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Título de sección Servicios: más impacto visual */
  section[id="servicios"] h2,
  main > section:nth-child(2) h2 {
    font-size: clamp(1.55rem, 8vw, 2rem) !important;
    font-weight: 900 !important;
    line-height: 0.96 !important;
    letter-spacing: -0.025em !important;
  }

  /* Título de cada card: prominente */
  section[id="servicios"] h3 {
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.015em !important;
    color: #0f172a !important;
  }

  /* Acento rojo bajo el título del card */
  section[id="servicios"] h3::after {
    content: "";
    display: block;
    width: 1.8rem;
    height: 2px;
    margin-top: 0.22rem;
    background: #d94452;
    border-radius: 2px;
  }
}

/* ==========================================
   V3 GATE — construcción, candado interactivo
   ========================================== */

.v3-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(217, 68, 82, 0.11) 0%, transparent 52%),
    radial-gradient(ellipse at 85% 100%, rgba(217, 68, 82, 0.06) 0%, transparent 40%),
    #09090f;
  font-family: 'Inter', system-ui, sans-serif;
}

@keyframes v3-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.v3-card {
  width: min(370px, 100%);
  padding: 2rem 1.9rem 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-align: center;
  animation: v3-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Badge "en construcción" */
.v3-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-bottom: 1.35rem;
  padding: 0.28rem 0.78rem;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.v3-badge-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fbbf24;
  flex-shrink: 0;
  animation: v3-blink 1.8s ease-in-out infinite;
}

@keyframes v3-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* Logo */
.v3-logo {
  display: block;
  width: 62px;
  height: 62px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.09),
    0 8px 28px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(217, 68, 82, 0.18);
}

/* Marca */
.v3-brand {
  margin: 0 0 0.2rem;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}

.v3-sub {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: 0.03em;
}

/* Descripción amigable */
.v3-desc {
  margin: 0 0 1.35rem;
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.48);
  line-height: 1.48;
}

/* Botón candado */
.v3-lock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease,
              color 0.22s ease, transform 0.18s ease;
}

.v3-lock-btn svg {
  width: 20px;
  height: 20px;
}

.v3-lock-btn:hover {
  background: rgba(217, 68, 82, 0.12);
  border-color: rgba(217, 68, 82, 0.28);
  color: #f87585;
  transform: scale(1.06);
}

.v3-lock-btn.v3-lock-open {
  background: rgba(217, 68, 82, 0.14);
  border-color: rgba(217, 68, 82, 0.4);
  color: #d94452;
}

/* Formulario — oculto hasta clic en candado */
.v3-form {
  display: flex;
  flex-direction: column;
  gap: 0.58rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition:
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity    0.32s ease,
    margin-top 0.32s ease;
}

.v3-form.v3-form-visible {
  max-height: 200px;
  opacity: 1;
  margin-top: 1rem;
}

/* Campo contraseña */
.v3-field {
  position: relative;
  display: flex;
  align-items: center;
}

.v3-field input {
  width: 100%;
  height: 48px;
  padding: 0 2.8rem 0 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: 0.12em;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.v3-field input::placeholder {
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.2);
}

.v3-field input:focus {
  border-color: rgba(217, 68, 82, 0.55);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(217, 68, 82, 0.12);
}

.v3-eye {
  position: absolute;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0;
  transition: color 0.18s ease;
}

.v3-eye:hover { color: rgba(255, 255, 255, 0.6); }
.v3-eye svg  { width: 15px; height: 15px; }

/* Botón entrar */
.v3-btn {
  height: 48px;
  border: none;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, #d94452, #b83040);
  color: #fff;
  font-weight: 700;
  font-size: 0.93rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.18s ease;
  box-shadow: 0 8px 22px rgba(217, 68, 82, 0.28);
}

.v3-btn:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.v3-btn:active { transform: translateY(0); filter: brightness(0.96); }

/* Error */
.v3-err {
  min-height: 1rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #f87585;
  text-align: center;
}

/* Botón Instagram */
.v3-instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.4rem;
  padding: 0.52rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.83rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease,
              color 0.22s ease, transform 0.18s ease;
}

.v3-instagram:hover {
  background: rgba(193, 53, 132, 0.12);
  border-color: rgba(193, 53, 132, 0.3);
  color: #e879b0;
  transform: translateY(-1px);
}

.v3-instagram svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #e1306c;
  filter: drop-shadow(0 0 8px rgba(225, 48, 108, 0.28));
  transition: color 0.22s ease, filter 0.22s ease;
}

.v3-instagram:hover svg {
  color: #f77737;
  filter: drop-shadow(0 0 10px rgba(247, 119, 55, 0.38));
}

/* Animaciones */
@keyframes v3-shake {
  0%, 100% { transform: translateX(0); }
  20%  { transform: translateX(-7px); }
  40%  { transform: translateX(7px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
}

.v3-shake { animation: v3-shake 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

@keyframes v3-fadeout { to { opacity: 0; transform: scale(1.02); } }

.v3-leaving {
  animation: v3-fadeout 0.38s ease forwards;
  pointer-events: none;
}

/* ==========================================
   ¿POR QUÉ ELEGIRNOS? — compacto en mobile
   ========================================== */

@media (max-width: 767px) {

  /* Grid de 4 items → 2 columnas × 2 filas */
  main > section:nth-child(3) .grid,
  main > section:nth-child(3) [class*="grid-cols"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.55rem 0.45rem !important;
  }

  /* Cada item: alineado al centro, sin padding extra */
  main > section:nth-child(3) .grid > * {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0.55rem 0.35rem !important;
    gap: 0 !important;
  }

  /* Círculos numéricos — reducir tamaño */
  main > section:nth-child(3) .w-16,
  main > section:nth-child(3) .w-20,
  main > section:nth-child(3) .w-24 {
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    min-height: 3rem !important;
    flex-shrink: 0 !important;
  }

  main > section:nth-child(3) .h-16,
  main > section:nth-child(3) .h-20,
  main > section:nth-child(3) .h-24 {
    width: 3rem !important;
    height: 3rem !important;
  }

  /* Número dentro del círculo — más pequeño */
  main > section:nth-child(3) .text-4xl,
  main > section:nth-child(3) .text-3xl,
  main > section:nth-child(3) .text-2xl {
    font-size: 1.2rem !important;
    line-height: 1 !important;
  }

  /* Título de cada item */
  main > section:nth-child(3) h3 {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin-top: 0.35rem !important;
    margin-bottom: 0.1rem !important;
  }

  /* Descripción de cada item */
  main > section:nth-child(3) p {
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
    color: #6b7280 !important;
  }

  /* Reducir espacio bajo el título de la sección */
  main > section:nth-child(3) h2 {
    margin-bottom: 0.5rem !important;
  }
}

/* ==========================================
   MOBILE REORDER — compacto y amigable v7
   ========================================== */

@media (max-width: 767px) {

  /* ─── Secciones: padding vertical reducido ─── */
  main > section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  main > section:first-child {
    padding-top: 4.2rem !important;
    padding-bottom: 1rem !important;
  }

  /* ─── HERO: h1 más compacto ─── */
  main > section:first-child h1 {
    font-size: clamp(1.3rem, 7.5vw, 1.85rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 0.4rem !important;
  }

  /* Imagen hero: altura mínima reducida */
  main > section:first-child .h-\[600px\] {
    min-height: 10rem !important;
  }

  /* ─── Headings de secciones (excepto hero) ─── */
  main > section:not(:first-child) h2 {
    font-size: clamp(1.1rem, 5.5vw, 1.4rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 0.45rem !important;
  }

  /* ─── SERVICIOS: grilla 2 columnas compacta ─── */
  section[id="servicios"] .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
  }

  /* Imagen de cada tarjeta — proporción 4:3 */
  section[id="servicios"] .h-48 {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  /* Área de texto — más compacta */
  section[id="servicios"] .p-6 {
    padding: 0.5rem 0.55rem 0.55rem !important;
  }

  section[id="servicios"] .space-y-3 > * + * {
    margin-top: 0.18rem !important;
  }

  section[id="servicios"] h3 {
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.01em !important;
  }

  /* Descripción: máx 2 líneas */
  section[id="servicios"] .p-6 p {
    font-size: 0.68rem !important;
    line-height: 1.28 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ─── NOSOTROS: huecos más ajustados ─── */
  section[id="nosotros"] .gap-12,
  main > section:nth-child(4) .gap-12 {
    gap: 1rem !important;
  }

  section[id="nosotros"] .gap-6 {
    gap: 0.4rem !important;
  }

  /* ─── CONTACTO: formulario primero, info abajo ─── */
  section[id="contacto"] .lg\:grid-cols-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Info panel (primer hijo) → abajo */
  section[id="contacto"] .lg\:grid-cols-2 > *:first-child {
    order: 2 !important;
  }

  /* Formulario (segundo hijo) → arriba */
  section[id="contacto"] .lg\:grid-cols-2 > *:last-child {
    order: 1 !important;
  }

  /* Panel de info: menos padding */
  section[id="contacto"] [class~="p-8"] {
    padding: 1rem 1.1rem !important;
  }

  section[id="contacto"] .space-y-6 > * + * {
    margin-top: 0.55rem !important;
  }

  /* ─── Sección Instagram final: compacta ─── */
  .final-instagram-section {
    padding: 1.2rem 1rem !important;
    margin-top: 0 !important;
  }

  .final-instagram-inner {
    padding: 1.1rem 1.2rem 1.2rem !important;
    gap: 0.45rem !important;
  }

  .final-instagram-inner h2 {
    font-size: 1.05rem !important;
    margin-bottom: 0.15rem !important;
  }

  .final-instagram-inner p {
    font-size: 0.78rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* ==========================================
   WSP CÍRCULO CLÁSICO + GATE COLOR
   ========================================== */

/* ── WhatsApp: círculo con ondas ── */
.whatsapp-float {
  width: 60px !important;
  height: 60px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: visible !important;
  background: #25d366 !important;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.42) !important;
}

.whatsapp-float span {
  display: none !important;
}

.whatsapp-float svg {
  width: 32px !important;
  height: 32px !important;
}

.whatsapp-float:hover {
  transform: scale(1.07) !important;
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55) !important;
}

/* Ondas que se expanden */
.whatsapp-float::before,
.whatsapp-float::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  border: 2px solid rgba(37, 211, 102, 0.65) !important;
  border-radius: 50% !important;
  opacity: 0 !important;
  animation: wsp-ring 2.2s ease-out infinite !important;
  transform: scale(1) !important;
}

.whatsapp-float::after {
  animation-delay: 1.1s !important;
}

@keyframes wsp-ring {
  0%   { opacity: 0.75; transform: scale(1); }
  80%  { opacity: 0;    transform: scale(1.8); }
  100% { opacity: 0;    transform: scale(1.8); }
}

/* Mobile: círculo más pequeño, ondas activas */
@media (max-width: 767px) {
  .whatsapp-float {
    width: 54px !important;
    height: 54px !important;
    bottom: 16px !important;
    right: 16px !important;
  }

  .whatsapp-float svg {
    width: 28px !important;
    height: 28px !important;
  }

  .whatsapp-float::before,
  .whatsapp-float::after {
    display: block !important;
    inset: -2px !important;
    border-radius: 50% !important;
  }
}

/* ==========================================
   FOOTER MOBILE — compacto en dos columnas
   ========================================== */

@media (max-width: 767px) {
  footer {
    padding-top: 0 !important;
    padding-bottom: 3.55rem !important;
  }

  footer .container {
    padding: 0.9rem 1rem 0.95rem !important;
  }

  footer .grid {
    display: grid !important;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
    gap: 0.65rem 0.8rem !important;
    margin-bottom: 0.7rem !important;
  }

  footer .grid > div:first-child {
    grid-column: 1 / -1 !important;
    padding-bottom: 0.55rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  footer .grid > div:first-child > p {
    display: none !important;
  }

  footer .grid > div:first-child .w-12 {
    width: 2.2rem !important;
    height: 2.2rem !important;
  }

  footer .grid > div:first-child h3 {
    font-size: 0.98rem !important;
    line-height: 1.05 !important;
  }

  footer .grid > div:first-child p {
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
  }

  footer .grid > div:nth-child(2) {
    display: none !important;
  }

  footer h4 {
    font-size: 0.92rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.42rem !important;
  }

  footer ul,
  footer .space-y-2,
  footer .space-y-3 {
    gap: 0 !important;
  }

  footer li,
  footer li button,
  footer li a,
  footer li p,
  footer .text-sm {
    font-size: 0.76rem !important;
    line-height: 1.22 !important;
  }

  footer li {
    margin-top: 0.32rem !important;
  }

  footer li.flex {
    gap: 0.38rem !important;
    align-items: flex-start !important;
    min-width: 0 !important;
  }

  footer li svg {
    width: 0.92rem !important;
    height: 0.92rem !important;
    margin-top: 0.08rem !important;
    flex: 0 0 0.92rem !important;
  }

  footer li a,
  footer li {
    overflow-wrap: anywhere !important;
  }

  footer .border-t {
    margin-top: 0.55rem !important;
    padding-top: 0.6rem !important;
  }

  footer .border-t p {
    max-width: 18rem !important;
    margin: 0 auto !important;
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
  }
}

/* ── Gate: color y calidez ── */
.v3-gate {
  background:
    radial-gradient(ellipse at 50% -5%,  rgba(217, 68, 82, 0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 110%, rgba(180, 30,  50, 0.18) 0%, transparent 48%),
    radial-gradient(ellipse at 15% 70%,  rgba(217, 68, 82, 0.10) 0%, transparent 40%),
    #0e0709 !important;
}

.v3-card {
  background: rgba(217, 68, 82, 0.07) !important;
  border-color: rgba(217, 68, 82, 0.24) !important;
}

.v3-logo {
  box-shadow:
    0 0 0 2px rgba(217, 68, 82, 0.38),
    0 8px 28px rgba(0, 0, 0, 0.55),
    0 0 36px rgba(217, 68, 82, 0.30) !important;
}

/* Nombre con degradado blanco → rosa */
.v3-brand {
  background: linear-gradient(140deg, #ffffff 50%, #f87585 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

.v3-desc {
  color: rgba(255, 255, 255, 0.65) !important;
}

.v3-sub {
  color: rgba(255, 255, 255, 0.44) !important;
}

/* ==========================================
   HEADER OSCURO · HERO APILADO · BANNER v9
   ========================================== */

@media (max-width: 767px) {

  /* ─── HEADER: fondo oscuro, más compacto ─── */
  header,
  .App > div:first-child,
  body:has(.App) header {
    background: #0f172a !important;
    border-bottom: 2px solid #d94452 !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.38) !important;
    padding-top: 0.38rem !important;
    padding-bottom: 0.38rem !important;
  }

  header .container,
  header .container > .h-20 {
    min-height: 56px !important;
    height: 56px !important;
  }

  header .container {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }

  header .flex.items-center.gap-3 {
    gap: 0.55rem !important;
    min-width: 0 !important;
  }

  /* Textos → blancos */
  header h1, header h2, header h3,
  header p, header span, header a,
  header li, header button {
    color: #fff !important;
  }

  /* Subtítulos y textos secundarios */
  header [class*="text-gray"],
  header [class*="text-slate"],
  header [class*="text-zinc"],
  header [class*="text-muted"] {
    color: rgba(255, 255, 255, 0.58) !important;
  }

  header h1.text-xl,
  header .text-xl.font-bold {
    color: #fff !important;
    font-size: 1rem !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
  }

  header p.text-xs {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  /* SVG / íconos → blancos */
  header svg {
    color: #fff !important;
  }
  header svg line,
  header svg path,
  header svg polyline,
  header svg rect {
    stroke: #fff !important;
  }

  /* Logo: un toque más pequeño */
  header img {
    width: 38px !important;
    height: 38px !important;
  }

  header .rounded-full:has(> img) {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  /* Botón de menú / hamburguesa — quitar ring rojo */
  header button[class*="inline-flex"][class*="items-center"] {
    background: rgba(217, 68, 82, 0.18) !important;
    animation: none !important;
    box-shadow: none !important;
  }

  header button.md\:hidden {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px !important;
  }

  header button.md\:hidden svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* ─── HERO: imagen arriba, texto completo abajo ─── */
  main > section:first-child .lg\:grid-cols-2,
  main > section:first-child .md\:grid-cols-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  /* Imagen (2.º hijo) → sube al inicio */
  main > section:first-child .lg\:grid-cols-2 > *:nth-child(2),
  main > section:first-child .md\:grid-cols-2 > *:nth-child(2) {
    order: -1 !important;
    width: 100% !important;
  }

  /* Texto (1.er hijo) → debajo, ancho completo */
  main > section:first-child .lg\:grid-cols-2 > *:nth-child(1),
  main > section:first-child .md\:grid-cols-2 > *:nth-child(1) {
    order: 0 !important;
    width: 100% !important;
  }

  /* Contenedor de imagen: banner compacto */
  main > section:first-child .h-\[600px\] {
    height: auto !important;
    min-height: 0 !important;
    max-height: 160px !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
  }

  /* ─── INSTAGRAM FINAL: tira compacta ─── */
  .final-instagram-section {
    padding: 0.9rem 1rem !important;
  }

  .final-instagram-inner span {
    font-size: 0.68rem !important;
    padding: 0.2rem 0.55rem !important;
    margin-bottom: 0.28rem !important;
  }

  .final-instagram-inner h2 {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
    margin: 0 0 0.2rem !important;
  }

  .final-instagram-inner p {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    margin: 0 auto 0.48rem !important;
  }

  .final-instagram-inner a {
    min-height: 34px !important;
    padding: 0 1rem !important;
    font-size: 0.8rem !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
  }
}

/* ==========================================
   MOBILE SPACING + HERO ORDER — secciones claras
   ========================================== */

@media (max-width: 767px) {
  body {
    background: #edf1f6 !important;
  }

  main > section {
    padding-top: 1.85rem !important;
    padding-bottom: 2.05rem !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  }

  main > section:not(:first-child) {
    padding-top: 1.85rem !important;
    padding-bottom: 2.05rem !important;
  }

  main > section:first-child {
    padding-top: 5.35rem !important;
    padding-bottom: 1.65rem !important;
    border-top: 0 !important;
    background: linear-gradient(180deg, #f4f7fb 0%, #e8eef6 100%) !important;
  }

  main > section:nth-child(2) {
    background: linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%) !important;
  }

  main > section:nth-child(3) {
    background: linear-gradient(180deg, #edf3ee 0%, #f7faf7 100%) !important;
  }

  main > section:nth-child(4) {
    background: linear-gradient(180deg, #f8f2f4 0%, #fff8f9 100%) !important;
  }

  main > section:nth-child(5) {
    background: linear-gradient(180deg, #eef2f8 0%, #e4eaf3 100%) !important;
  }

  main > section:not(:first-child)::before {
    height: 3px !important;
    background: linear-gradient(90deg, transparent, rgba(217, 68, 82, 0.42), transparent) !important;
    opacity: 1 !important;
  }

  main > section > .container {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
  }

  main > section:not(:first-child) > .container > .text-center,
  main > section:not(:first-child) > .container > div:first-child {
    margin-bottom: 1rem !important;
  }

  main > section:first-child .lg\:grid-cols-2,
  main > section:first-child .md\:grid-cols-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.95rem !important;
  }

  main > section:first-child .lg\:grid-cols-2 > *:nth-child(1),
  main > section:first-child .md\:grid-cols-2 > *:nth-child(1) {
    order: 0 !important;
    width: 100% !important;
  }

  main > section:first-child .lg\:grid-cols-2 > *:nth-child(2),
  main > section:first-child .md\:grid-cols-2 > *:nth-child(2) {
    order: 1 !important;
    width: 100% !important;
  }

  main > section:first-child h1 {
    font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
    line-height: 1.02 !important;
    margin-bottom: 0.65rem !important;
  }

  main > section:first-child p {
    margin-bottom: 0.65rem !important;
  }

  main > section:first-child .h-\[600px\] {
    max-height: 205px !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 0.9rem !important;
  }

  main > section:first-child img {
    object-position: center 42% !important;
  }
}

/* ==========================================
   SCROLL INDICATOR — sutil y de marca
   ========================================== */

.scroll-progress {
  height: 1px !important;
  background: linear-gradient(90deg, rgba(217, 68, 82, 0.08), rgba(217, 68, 82, 0.48), rgba(232, 93, 117, 0.24)) !important;
  box-shadow: none !important;
  z-index: 120 !important;
}

.section-nav {
  right: 16px !important;
  padding: 0.3rem 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 0.58 !important;
  transition: opacity 0.22s ease !important;
}

.section-nav:hover,
.section-nav:focus-within {
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.section-nav-item {
  gap: 0.42rem !important;
  padding: 0.2rem 0 !important;
}

.section-nav-label {
  color: rgba(184, 48, 64, 0.78) !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  padding: 0.12rem 0.42rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;
}

.section-nav-dot {
  width: 5px !important;
  height: 5px !important;
  border-width: 1px !important;
  border-color: rgba(217, 68, 82, 0.34) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

.section-nav-item.active .section-nav-dot {
  width: 6px !important;
  height: 6px !important;
  background: rgba(217, 68, 82, 0.82) !important;
  border-color: rgba(217, 68, 82, 0.82) !important;
  box-shadow: 0 0 0 2px rgba(217, 68, 82, 0.08) !important;
}

.section-nav-item.active .section-nav-label {
  opacity: 0 !important;
  transform: translateX(6px) !important;
}

.section-nav:hover .section-nav-item.active .section-nav-label,
.section-nav:focus-within .section-nav-item.active .section-nav-label {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 900px) {
  .section-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 1rem !important;
    transform: translateX(-50%) !important;
    padding: 0.36rem 0.5rem !important;
    background: rgba(255, 255, 255, 0.62) !important;
  }

  .section-nav-label {
    display: none !important;
  }

  .section-nav-item {
    gap: 0 !important;
    min-width: 20px !important;
    min-height: 22px !important;
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  .section-nav {
    bottom: 0.85rem !important;
    max-width: calc(100vw - 7rem) !important;
  }
}

/* ==========================================
   MOBILE MENU — navegación visible
   ========================================== */

.mobile-site-menu {
  display: none;
}

@media (max-width: 767px) {
  .mobile-site-menu {
    position: fixed;
    top: 68px;
    left: 0.9rem;
    right: 0.9rem;
    z-index: 115;
    display: block;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .mobile-site-menu-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    padding: 0.55rem;
    border: 1px solid rgba(217, 68, 82, 0.22);
    border-radius: 0.95rem;
    background:
      linear-gradient(155deg, rgba(15, 23, 42, 0.96), rgba(31, 41, 55, 0.94)),
      radial-gradient(circle at 20% 0%, rgba(217, 68, 82, 0.22), transparent 38%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.26);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .mobile-site-menu.mobile-site-menu-open {
    pointer-events: auto;
    opacity: 1;
    transform: none;
  }

  .mobile-site-menu button {
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0;
  }

  .mobile-site-menu button:active {
    background: rgba(217, 68, 82, 0.22);
    transform: translateY(1px);
  }

  body.mobile-menu-open header {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.26) !important;
  }
}

/* ==========================================
   WHATSAPP WAVES — interacción sutil
   ========================================== */

.whatsapp-float {
  isolation: isolate !important;
  animation: whatsapp-breathe 3.8s ease-in-out infinite !important;
}

.whatsapp-float::before,
.whatsapp-float::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  z-index: -1 !important;
  border: 2px solid rgba(37, 211, 102, 0.56) !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: whatsapp-wave 2.45s ease-out infinite !important;
}

.whatsapp-float::after {
  animation-delay: 1.22s !important;
}

@keyframes whatsapp-wave {
  0% {
    opacity: 0.68;
    transform: scale(0.98);
  }

  72% {
    opacity: 0;
    transform: scale(1.75);
  }

  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}

@keyframes whatsapp-breathe {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-1px) scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float,
  .whatsapp-float::before,
  .whatsapp-float::after {
    animation: none !important;
  }
}

/* ==========================================
   HERO MOBILE CTAS — botones compactos
   ========================================== */

@media (max-width: 767px) {
  main > section:first-child .lg\:grid-cols-2 > *:first-child > div:has(button),
  main > section:first-child .md\:grid-cols-2 > *:first-child > div:has(button),
  main > section:first-child .lg\:grid-cols-2 > *:first-child > div:has(a[class*="inline-flex"]),
  main > section:first-child .md\:grid-cols-2 > *:first-child > div:has(a[class*="inline-flex"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  main > section:first-child .lg\:grid-cols-2 > *:first-child a[class*="inline-flex"],
  main > section:first-child .lg\:grid-cols-2 > *:first-child button,
  main > section:first-child .md\:grid-cols-2 > *:first-child a[class*="inline-flex"],
  main > section:first-child .md\:grid-cols-2 > *:first-child button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 0.85rem !important;
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    gap: 0.35rem !important;
    justify-content: center !important;
  }

  main > section:first-child .lg\:grid-cols-2 > *:first-child svg,
  main > section:first-child .md\:grid-cols-2 > *:first-child svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
    margin-right: 0.25rem !important;
  }
}

/* ==========================================
   ABOUT MOBILE STATS — metricas compactas
   ========================================== */

@media (max-width: 767px) {
  section[id="nosotros"] .lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1.15rem !important;
  }

  section[id="nosotros"] .grid.grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
  }

  section[id="nosotros"] .grid.grid-cols-2 > * {
    min-height: 0 !important;
    padding: 0.55rem 0.45rem !important;
    border-radius: 0.75rem !important;
  }

  section[id="nosotros"] .grid.grid-cols-2 h3,
  section[id="nosotros"] .grid.grid-cols-2 .text-3xl,
  section[id="nosotros"] .grid.grid-cols-2 .text-4xl {
    font-size: 1.05rem !important;
    line-height: 1 !important;
    margin: 0 0 0.18rem !important;
  }

  section[id="nosotros"] .grid.grid-cols-2 p {
    font-size: 0.66rem !important;
    line-height: 1.12 !important;
    margin: 0 !important;
  }

  section[id="nosotros"] .grid.grid-cols-2 svg {
    width: 1rem !important;
    height: 1rem !important;
    margin-bottom: 0.2rem !important;
  }
}

/* ==========================================
   HERO DESKTOP - texto alto, imagen compacta
   ========================================== */

@media (min-width: 901px) {
  main > section:first-child {
    padding-top: clamp(3rem, 4.2vw, 4.35rem) !important;
    padding-bottom: clamp(1.2rem, 2vw, 1.8rem) !important;
  }

  main > section:first-child .lg\:grid-cols-2,
  main > section:first-child .md\:grid-cols-2 {
    align-items: start !important;
    gap: clamp(2rem, 4vw, 3.35rem) !important;
  }

  main > section:first-child .lg\:grid-cols-2 > *:first-child,
  main > section:first-child .md\:grid-cols-2 > *:first-child {
    padding-top: clamp(1.4rem, 2.6vw, 2.35rem) !important;
  }

  main > section:first-child .lg\:grid-cols-2 > *:nth-child(2),
  main > section:first-child .md\:grid-cols-2 > *:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: clamp(1.9rem, 3.6vw, 3.2rem) !important;
  }

  main > section:first-child .h-\[600px\] {
    width: min(100%, 435px) !important;
    height: clamp(285px, 30vw, 360px) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0.72rem !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(217, 68, 82, 0.08) !important;
  }

  main > section:first-child .h-\[600px\] img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 48% !important;
  }

  main > section:first-child .bottom-8.left-8.right-8 {
    position: static !important;
    width: min(100%, 435px) !important;
    margin: 0.75rem auto 0 !important;
    padding: 0.9rem 1.05rem !important;
    border-radius: 0.72rem !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.11) !important;
  }

  main > section:first-child .bottom-8.left-8.right-8 .w-16.h-16 {
    width: 3rem !important;
    height: 3rem !important;
  }

  main > section:first-child .bottom-8.left-8.right-8 h3 {
    font-size: 1.4rem !important;
    line-height: 1 !important;
  }
}

/* ==========================================
   FINAL TUNING - escala, color y reveal
   ========================================== */

@media (min-width: 901px) {
  .container {
    max-width: 1080px !important;
  }

  main h1 {
    font-size: clamp(2rem, 3.35vw, 3rem) !important;
  }

  main h2 {
    font-size: clamp(1.45rem, 2.2vw, 2.05rem) !important;
  }

  main h3 {
    font-size: clamp(1rem, 1.35vw, 1.25rem) !important;
  }

  p,
  li {
    font-size: 0.95rem !important;
  }

  .text-lg,
  .lg\:text-xl {
    font-size: 1rem !important;
  }

  .p-8 {
    padding: 1.05rem !important;
  }

  .p-6 {
    padding: 0.95rem !important;
  }

  main > section {
    padding-top: clamp(1.65rem, 2.5vw, 2.75rem) !important;
    padding-bottom: clamp(1.65rem, 2.5vw, 2.75rem) !important;
  }

  .gap-12 {
    gap: 1.55rem !important;
  }

  .gap-8 {
    gap: 1.15rem !important;
  }
}

main > section:first-child {
  background:
    radial-gradient(ellipse 46% 38% at 8% 20%, rgba(217, 68, 82, 0.12), transparent 68%),
    radial-gradient(ellipse 42% 34% at 92% 78%, rgba(52, 111, 191, 0.11), transparent 66%),
    linear-gradient(160deg, #eef2f8 0%, #f7f1f4 54%, #eef6f2 100%) !important;
}

main > section:nth-child(2) {
  background:
    radial-gradient(ellipse 48% 40% at 90% 16%, rgba(217, 68, 82, 0.10), transparent 68%),
    radial-gradient(ellipse 40% 34% at 10% 84%, rgba(37, 99, 235, 0.09), transparent 64%),
    linear-gradient(165deg, #ffffff 0%, #f2f7fb 52%, #eef4ff 100%) !important;
}

main > section:nth-child(3) {
  background:
    radial-gradient(ellipse 54% 42% at 12% 22%, rgba(22, 138, 85, 0.12), transparent 70%),
    radial-gradient(ellipse 42% 34% at 88% 80%, rgba(217, 68, 82, 0.09), transparent 66%),
    linear-gradient(165deg, #f4fbf6 0%, #ffffff 48%, #edf7f1 100%) !important;
}

main > section:nth-child(4) {
  background:
    radial-gradient(ellipse 52% 40% at 88% 24%, rgba(168, 85, 247, 0.09), transparent 70%),
    radial-gradient(ellipse 42% 34% at 10% 76%, rgba(217, 68, 82, 0.10), transparent 66%),
    linear-gradient(165deg, #f8f3fb 0%, #ffffff 48%, #fff4f6 100%) !important;
}

main > section:nth-child(5) {
  background:
    radial-gradient(ellipse 54% 42% at 14% 20%, rgba(217, 68, 82, 0.11), transparent 70%),
    radial-gradient(ellipse 46% 36% at 90% 78%, rgba(14, 165, 233, 0.10), transparent 68%),
    linear-gradient(165deg, #fff7f9 0%, #ffffff 44%, #eef8fb 100%) !important;
}

.final-instagram-section {
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(135deg, #111827 0%, #263244 46%, #b83040 100%) !important;
}

.scroll-reveal-ready .sr-section,
.scroll-reveal-ready .sr-up,
.scroll-reveal-ready .sr-card {
  opacity: 0.88;
  transform: translateY(7px);
  transition:
    opacity 0.38s ease,
    transform 0.38s ease;
  transition-delay: var(--sr-delay, 0ms);
  will-change: opacity, transform;
}

.scroll-reveal-ready .sr-card {
  transform: translateY(6px);
}

.scroll-reveal-ready .sr-section.sr-visible,
.scroll-reveal-ready .sr-up.sr-visible,
.scroll-reveal-ready .sr-card.sr-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-ready .sr-section,
  .scroll-reveal-ready .sr-up,
  .scroll-reveal-ready .sr-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================
   CONTACT MODERN - paneles mas sofisticados
   ========================================== */

section[id="contacto"] {
  background:
    radial-gradient(ellipse 48% 42% at 0% 12%, rgba(217, 68, 82, 0.12), transparent 70%),
    radial-gradient(ellipse 42% 38% at 100% 92%, rgba(14, 165, 233, 0.13), transparent 68%),
    linear-gradient(160deg, #fff8fa 0%, #ffffff 44%, #eef8fb 100%) !important;
}

section[id="contacto"] > .container {
  position: relative;
  z-index: 1;
}

section[id="contacto"] .grid.lg\:grid-cols-2 {
  align-items: stretch !important;
  gap: clamp(1.35rem, 2.8vw, 2.4rem) !important;
}

section[id="contacto"] .grid.lg\:grid-cols-2 > * > .bg-white,
section[id="contacto"] .grid.lg\:grid-cols-2 > .bg-white {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(217, 68, 82, 0.12) !important;
  border-radius: 1rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.74)),
    radial-gradient(circle at 100% 0%, rgba(217, 68, 82, 0.08), transparent 34%) !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

section[id="contacto"] .grid.lg\:grid-cols-2 > * > .bg-white::before,
section[id="contacto"] .grid.lg\:grid-cols-2 > .bg-white::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #d94452, #e85d75, #14b8a6);
}

section[id="contacto"] h3 {
  letter-spacing: 0 !important;
}

section[id="contacto"] .flex.items-start.gap-4 {
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 0.68rem 0.72rem !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 0.85rem !important;
  background: rgba(255, 255, 255, 0.58) !important;
}

section[id="contacto"] .flex.items-start.gap-4 > .w-12.h-12 {
  width: 2.45rem !important;
  height: 2.45rem !important;
  background: linear-gradient(135deg, rgba(217, 68, 82, 0.13), rgba(232, 93, 117, 0.07)) !important;
}

section[id="contacto"] .flex.items-start.gap-4 svg {
  width: 1.05rem !important;
  height: 1.05rem !important;
}

section[id="contacto"] label {
  color: #334155 !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
}

section[id="contacto"] input,
section[id="contacto"] textarea {
  border: 1px solid rgba(15, 23, 42, 0.11) !important;
  border-radius: 0.72rem !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

section[id="contacto"] input:focus,
section[id="contacto"] textarea:focus {
  border-color: rgba(217, 68, 82, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(217, 68, 82, 0.08) !important;
}

section[id="contacto"] .contact-send-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.7rem !important;
}

section[id="contacto"] .contact-send-options button {
  min-height: 46px !important;
  border-radius: 0.78rem !important;
  font-size: 0.9rem !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12) !important;
}

/* Contacto y formulario como bloques independientes */
section[id="contacto"] .grid.lg\:grid-cols-2 {
  display: flex !important;
  flex-direction: column !important;
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 1.25rem !important;
}

section[id="contacto"] .grid.lg\:grid-cols-2 > * {
  width: 100% !important;
}

section[id="contacto"] .grid.lg\:grid-cols-2 > *:first-child > .bg-white {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 1rem !important;
  row-gap: 0.65rem !important;
}

section[id="contacto"] .grid.lg\:grid-cols-2 > *:first-child h3,
section[id="contacto"] .grid.lg\:grid-cols-2 > *:first-child .border-t {
  grid-column: 1 / -1 !important;
}

section[id="contacto"] .grid.lg\:grid-cols-2 > *:first-child .border-t {
  margin-top: 0.35rem !important;
  padding-top: 0.75rem !important;
}

section[id="contacto"] .grid.lg\:grid-cols-2 > *:last-child {
  max-width: 100% !important;
}

@media (max-width: 767px) {
  section[id="contacto"] .grid.lg\:grid-cols-2 {
    max-width: none !important;
  }

  section[id="contacto"] .grid.lg\:grid-cols-2 > *:first-child > .bg-white {
    display: block !important;
  }
}

/* ==========================================
   CONTACT SPLIT - dos secciones con caracter propio
   ========================================== */

section[id="contacto"].contact-info-section {
  padding-bottom: clamp(2.1rem, 3vw, 3.4rem) !important;
  background:
    radial-gradient(ellipse 44% 38% at 6% 18%, rgba(217, 68, 82, 0.16), transparent 70%),
    radial-gradient(ellipse 42% 34% at 92% 88%, rgba(15, 23, 42, 0.10), transparent 68%),
    linear-gradient(150deg, #fff8fa 0%, #ffffff 42%, #f5f8fb 100%) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 {
  display: block !important;
  width: min(980px, 100%) !important;
  max-width: 980px !important;
}

section[id="contacto"].contact-info-section .contact-info-card {
  display: grid !important;
  grid-template-columns: 0.95fr 1fr 1fr !important;
  gap: 0.8rem !important;
  padding: clamp(1rem, 2vw, 1.35rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(217, 68, 82, 0.24), transparent 34%),
    linear-gradient(135deg, #111827 0%, #1f2330 55%, #321b24 100%) !important;
  color: #fff !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .contact-info-card {
  display: grid !important;
  grid-template-columns: 0.95fr 1fr 1fr !important;
}

section[id="contacto"].contact-info-section .contact-info-card::after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -64px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 28px rgba(255, 255, 255, 0.035);
  pointer-events: none;
}

section[id="contacto"].contact-info-section .contact-info-card h3 {
  grid-column: 1 / 2 !important;
  grid-row: span 2 !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 1rem !important;
  border-radius: 0.85rem !important;
  background:
    linear-gradient(135deg, rgba(217, 68, 82, 0.28), rgba(255, 255, 255, 0.05)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 12px) !important;
  color: #fff !important;
}

section[id="contacto"].contact-info-section .contact-info-card .flex.items-start.gap-4 {
  min-height: 92px !important;
  align-items: flex-start !important;
  padding: 0.85rem !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}

section[id="contacto"].contact-info-section .contact-info-card .border-t {
  grid-column: 2 / -1 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

section[id="contacto"].contact-info-section .contact-info-card .border-t .flex.items-start.gap-4 {
  min-height: 82px !important;
}

section[id="contacto"].contact-info-section .contact-info-card p,
section[id="contacto"].contact-info-section .contact-info-card a {
  color: rgba(255, 255, 255, 0.72) !important;
}

section[id="contacto"].contact-info-section .contact-info-card .font-semibold,
section[id="contacto"].contact-info-section .contact-info-card .text-gray-900 {
  color: #fff !important;
}

/* mensaje — limpieza bloque anterior */

@media (max-width: 767px) {
  section[id="contacto"].contact-info-section .contact-info-card {
    grid-template-columns: 1fr !important;
  }

  section[id="contacto"].contact-info-section .contact-info-card h3,
  section[id="contacto"].contact-info-section .contact-info-card .border-t {
    grid-column: auto !important;
    grid-row: auto !important;
  }

}

/* ==========================================
   CONTACT VISIBILITY FIX - grilla compacta y legible
   ========================================== */

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.85rem !important;
  min-height: 0 !important;
  padding: clamp(1rem, 2vw, 1.35rem) !important;
  background:
    radial-gradient(circle at 86% 8%, rgba(217, 68, 82, 0.22), transparent 32%),
    linear-gradient(135deg, #111827 0%, #1f2330 56%, #321b24 100%) !important;
  color: #fff !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3 {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  min-height: 0 !important;
  margin: 0 0 0.15rem !important;
  padding: 0.85rem 1rem !important;
  display: block !important;
  border-radius: 0.85rem !important;
  background: linear-gradient(90deg, rgba(217, 68, 82, 0.32), rgba(255, 255, 255, 0.06)) !important;
  color: #fff !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 {
  min-height: 104px !important;
  align-items: flex-start !important;
  padding: 0.9rem !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 > div:last-child {
  min-width: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card p,
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card a,
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card span {
  opacity: 1 !important;
  visibility: visible !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .font-semibold,
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .text-gray-900 {
  color: #fff !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .border-t {
  grid-column: 1 / -1 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .border-t .flex.items-start.gap-4 {
  min-height: 94px !important;
}

@media (max-width: 900px) {
  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card {
    grid-template-columns: 1fr !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 {
    min-height: 0 !important;
  }
}

/* ==========================================
   CONTACT REDESIGN - banda moderna sin panel pesado
   ========================================== */

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 {
  width: min(1040px, 100%) !important;
  max-width: 1040px !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.85fr) repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(217, 68, 82, 0.14) !important;
  border-radius: 1.25rem !important;
  background:
    linear-gradient(110deg, rgba(255, 244, 246, 0.96) 0%, rgba(255, 255, 255, 0.94) 44%, rgba(239, 248, 251, 0.95) 100%) !important;
  color: var(--ink) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card::after {
  right: -72px !important;
  bottom: -92px !important;
  width: 220px !important;
  height: 220px !important;
  border-color: rgba(217, 68, 82, 0.12) !important;
  box-shadow: inset 0 0 0 34px rgba(217, 68, 82, 0.035) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3 {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  min-height: 260px !important;
  margin: 0 !important;
  padding: 1.35rem !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.16), transparent 28%),
    radial-gradient(circle at 88% 86%, rgba(217, 68, 82, 0.45), transparent 38%),
    linear-gradient(160deg, #111827 0%, #241d2b 52%, #7f2534 120%) !important;
  color: #fff !important;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem) !important;
  line-height: 1.05 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::before {
  content: "7ma Control";
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.72rem;
  font-weight: 900;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::after {
  content: "Atencion rapida en Talca y alrededores";
  display: block;
  max-width: 170px;
  margin-top: 0.55rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 {
  min-height: 132px !important;
  margin: 0 !important;
  padding: 1.1rem !important;
  align-items: flex-start !important;
  border: 0 !important;
  border-left: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4:hover {
  background: rgba(217, 68, 82, 0.055) !important;
  transform: none !important;
  box-shadow: inset 0 0 0 1px rgba(217, 68, 82, 0.08) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 > .w-12.h-12 {
  width: 2.35rem !important;
  height: 2.35rem !important;
  border-radius: 0.75rem !important;
  background: rgba(217, 68, 82, 0.1) !important;
  box-shadow: none !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 svg {
  color: var(--brand-red) !important;
  stroke: var(--brand-red) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card p,
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card a,
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card span {
  color: #475569 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .font-semibold,
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .text-gray-900 {
  color: var(--ink) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .border-t {
  grid-column: 2 / 4 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .border-t .flex.items-start.gap-4 {
  min-height: 128px !important;
  border-bottom: 0 !important;
  background:
    linear-gradient(90deg, rgba(217, 68, 82, 0.08), rgba(20, 184, 166, 0.06)) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card [class*="text-red"],
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card [class*="text-\[\#D94452\]"] {
  color: var(--brand-red) !important;
  font-weight: 900 !important;
}

@media (max-width: 900px) {
  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card {
    grid-template-columns: 1fr !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3 {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 120px !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .border-t {
    grid-column: auto !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 {
    min-height: 0 !important;
    border-left: 0 !important;
  }
}

/* ==========================================
   CONTACT HEADER FIX - sin lateral vacio
   ========================================== */

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3 {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  gap: 1rem !important;
  padding: 1rem 1.15rem !important;
  background:
    radial-gradient(circle at 92% 50%, rgba(217, 68, 82, 0.26), transparent 28%),
    linear-gradient(135deg, #111827 0%, #241d2b 64%, #5c2230 100%) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::before {
  position: static !important;
  order: 2 !important;
  flex: 0 0 auto !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::after {
  content: "Atencion rapida en Talca y alrededores";
  order: 1 !important;
  max-width: none !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 {
  min-height: 118px !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .border-t {
  grid-column: 1 / -1 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .border-t .flex.items-start.gap-4 {
  min-height: 108px !important;
}

@media (max-width: 767px) {
  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card {
    grid-template-columns: 1fr !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3 {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ==========================================
   PREMIUM REDESIGN 2026 - home completa
   ========================================== */

:root {
  --premium-ink: #111827;
  --premium-muted: #5c6678;
  --premium-line: rgba(17, 24, 39, 0.08);
  --premium-card: rgba(255, 255, 255, 0.86);
  --premium-red-soft: rgba(217, 68, 82, 0.1);
  --premium-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  --premium-shadow-strong: 0 26px 70px rgba(15, 23, 42, 0.12);
}

html {
  scroll-padding-top: 74px;
}

body {
  color: var(--premium-ink);
  background: #f7f9fc;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body::selection {
  background: rgba(217, 68, 82, 0.18);
}

header {
  min-height: 64px !important;
  border-bottom-width: 1px !important;
  background: rgba(248, 250, 252, 0.88) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

header::after {
  height: 2px !important;
  bottom: -1px !important;
  opacity: 0.95 !important;
}

header nav,
header .container {
  min-height: 64px !important;
}

header img {
  box-shadow: none !important;
}

header a,
header button {
  outline-offset: 4px;
}

main > section {
  padding-top: clamp(2.35rem, 3.5vw, 4.1rem) !important;
  padding-bottom: clamp(2.35rem, 3.5vw, 4.1rem) !important;
}

.container {
  max-width: 1120px !important;
}

main h1,
main h2,
main h3 {
  color: var(--premium-ink) !important;
  letter-spacing: 0 !important;
}

main h1 {
  max-width: 720px;
  font-size: clamp(2.25rem, 4.3vw, 3.7rem) !important;
  line-height: 0.98 !important;
}

main h2 {
  font-size: clamp(1.65rem, 2.55vw, 2.45rem) !important;
  line-height: 1.04 !important;
}

main h3 {
  font-size: clamp(1rem, 1.35vw, 1.22rem) !important;
}

main p,
main li {
  color: var(--premium-muted) !important;
  font-size: 0.94rem !important;
  line-height: 1.6 !important;
}

main h2::after {
  width: 72px !important;
  height: 3px !important;
  margin-top: 0.65rem !important;
  background: linear-gradient(90deg, var(--brand-red), rgba(20, 184, 166, 0.75)) !important;
}

button,
a {
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(217, 68, 82, 0.24) !important;
  outline-offset: 3px !important;
}

main a[class*="bg-"],
main button[class*="bg-"],
.contact-send-options button,
.final-instagram-inner a {
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 16px 34px rgba(217, 68, 82, 0.18) !important;
}

main a[class*="bg-"]:hover,
main button[class*="bg-"]:hover,
.contact-send-options button:hover,
.final-instagram-inner a:hover {
  transform: translateY(-2px) !important;
}

main > section:first-child {
  min-height: auto !important;
  padding-top: clamp(5.1rem, 7vw, 6.1rem) !important;
  padding-bottom: clamp(2rem, 3vw, 3rem) !important;
  background:
    radial-gradient(ellipse 42% 34% at 6% 18%, rgba(217, 68, 82, 0.12), transparent 68%),
    radial-gradient(ellipse 38% 30% at 92% 78%, rgba(20, 184, 166, 0.11), transparent 66%),
    linear-gradient(155deg, #f8fafc 0%, #fff7f8 50%, #edf7f5 100%) !important;
}

main > section:first-child .lg\:grid-cols-2,
main > section:first-child .md\:grid-cols-2 {
  align-items: center !important;
  gap: clamp(1.8rem, 4vw, 3.5rem) !important;
}

main > section:first-child .space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1rem !important;
}

main > section:first-child h1 span,
main > section:first-child h1 strong {
  color: var(--brand-red) !important;
}

main > section:first-child ul,
main > section:first-child .space-y-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
}

main > section:first-child li,
main > section:first-child .space-y-3 > * {
  min-height: 42px !important;
  padding: 0.5rem 0.65rem !important;
  border: 1px solid rgba(217, 68, 82, 0.12) !important;
  border-radius: 0.75rem !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045) !important;
}

main > section:first-child .h-\[600px\] {
  width: min(100%, 440px) !important;
  height: clamp(280px, 31vw, 370px) !important;
  border-radius: 1rem !important;
  box-shadow: var(--premium-shadow-strong) !important;
}

main > section:first-child .h-\[600px\]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent 44%, rgba(15, 23, 42, 0.2)) !important;
}

main > section:first-child img {
  object-position: center 46% !important;
}

main > section:first-child .bottom-8.left-8.right-8 {
  width: min(100%, 440px) !important;
  margin-top: 0.8rem !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 1rem !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.09) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}

section[id="servicios"] {
  background:
    radial-gradient(ellipse 42% 34% at 90% 12%, rgba(217, 68, 82, 0.08), transparent 66%),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%) !important;
}

section[id="servicios"] .grid {
  gap: 1rem !important;
}

section[id="servicios"] .grid > * {
  overflow: hidden !important;
  border: 1px solid var(--premium-line) !important;
  border-radius: 1rem !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: var(--premium-shadow) !important;
}

section[id="servicios"] .grid > *:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--premium-shadow-strong) !important;
}

section[id="servicios"] .grid > *::after {
  display: none !important;
}

section[id="servicios"] img {
  filter: saturate(0.96) contrast(1.02) !important;
}

section[id="servicios"] .h-48,
section[id="servicios"] .h-56,
section[id="servicios"] .h-64 {
  height: 150px !important;
}

section[id="servicios"] .p-6,
section[id="servicios"] .p-8 {
  padding: 1rem !important;
}

main > section:nth-child(3) {
  background:
    radial-gradient(ellipse 46% 36% at 10% 16%, rgba(20, 184, 166, 0.12), transparent 68%),
    linear-gradient(160deg, #f3faf7 0%, #ffffff 55%, #f7f9fc 100%) !important;
}

main > section:nth-child(3) .grid > *,
section[id="nosotros"] .grid > * {
  border: 1px solid var(--premium-line) !important;
  border-radius: 1rem !important;
  background: var(--premium-card) !important;
  box-shadow: var(--premium-shadow) !important;
}

main > section:nth-child(3) .grid > *::after,
section[id="nosotros"] .grid > *::after {
  display: none !important;
}

section[id="nosotros"] {
  background:
    radial-gradient(ellipse 44% 36% at 88% 18%, rgba(217, 68, 82, 0.09), transparent 68%),
    linear-gradient(165deg, #ffffff 0%, #f7f9fc 100%) !important;
}

section[id="nosotros"] .lg\:grid-cols-2 {
  align-items: center !important;
  gap: clamp(1.3rem, 3vw, 2.5rem) !important;
}

section[id="nosotros"] img {
  border-radius: 1rem !important;
  box-shadow: var(--premium-shadow-strong) !important;
}

section[id="nosotros"] .grid.grid-cols-2 > * {
  min-height: 105px !important;
  padding: 0.9rem !important;
}

section[id="nosotros"] .grid.grid-cols-2 h3,
section[id="nosotros"] .grid.grid-cols-2 .text-3xl,
section[id="nosotros"] .grid.grid-cols-2 .text-4xl {
  font-size: clamp(1.5rem, 2.4vw, 2.05rem) !important;
  color: var(--brand-red) !important;
}

section[id="contacto"].contact-info-section {
  background:
    radial-gradient(ellipse 40% 34% at 8% 20%, rgba(217, 68, 82, 0.11), transparent 68%),
    linear-gradient(180deg, #fff8fa 0%, #ffffff 100%) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 {
  width: min(900px, 100%) !important;
  max-width: 900px !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(217, 68, 82, 0.14) !important;
  border-radius: 1.05rem !important;
  background: #fff !important;
  color: var(--premium-ink) !important;
  box-shadow: var(--premium-shadow) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card::after {
  display: none !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3 {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.95rem 1.1rem !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #111827, #2a1f2d 60%, #552432) !important;
  color: #fff !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::before {
  position: static !important;
  order: 2 !important;
  content: "7ma Control" !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::after {
  content: "Respuesta rapida en Talca y alrededores" !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 {
  min-height: 112px !important;
  margin: 0 !important;
  padding: 1rem !important;
  border: 0 !important;
  border-right: 1px solid var(--premium-line) !important;
  border-bottom: 1px solid var(--premium-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4:hover {
  background: #fff8fa !important;
  transform: none !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 > .w-12.h-12 {
  width: 2.3rem !important;
  height: 2.3rem !important;
  border-radius: 0.75rem !important;
  background: var(--premium-red-soft) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .border-t {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .border-t .flex.items-start.gap-4 {
  min-height: 102px !important;
  background: linear-gradient(90deg, #fff8fa, #eef8fb) !important;
  border-bottom: 0 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card p,
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card a {
  color: var(--premium-muted) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .font-semibold,
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .text-gray-900 {
  color: var(--premium-ink) !important;
}

.contact-send-options button {
  min-height: 48px !important;
  font-size: 0.9rem !important;
}

.whatsapp-float {
  right: 22px !important;
  bottom: 22px !important;
  min-height: 50px !important;
  padding: 0 16px !important;
  box-shadow: 0 18px 42px rgba(18, 140, 74, 0.28) !important;
}

.final-instagram-section {
  padding: clamp(2.2rem, 3.6vw, 3.7rem) 1rem !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.12), transparent 26%),
    linear-gradient(135deg, #111827 0%, #202a3a 54%, #a72f3c 100%) !important;
}

.section-nav {
  opacity: 0.48 !important;
}

.scroll-reveal-ready .sr-section,
.scroll-reveal-ready .sr-up,
.scroll-reveal-ready .sr-card {
  opacity: 0.94 !important;
  transform: translateY(5px) !important;
}

.scroll-reveal-ready .sr-section.sr-visible,
.scroll-reveal-ready .sr-up.sr-visible,
.scroll-reveal-ready .sr-card.sr-visible {
  opacity: 1 !important;
  transform: none !important;
}

@media (min-width: 901px) {
  main > section:first-child .lg\:grid-cols-2 > *:first-child,
  main > section:first-child .md\:grid-cols-2 > *:first-child {
    padding-top: 0.35rem !important;
  }

  main > section:first-child .lg\:grid-cols-2 > *:nth-child(2),
  main > section:first-child .md\:grid-cols-2 > *:nth-child(2) {
    padding-top: 0 !important;
  }
}

@media (max-width: 900px) {
  main > section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  main > section:first-child {
    padding-top: 5rem !important;
  }

  main h1 {
    font-size: clamp(2rem, 8vw, 2.65rem) !important;
  }

  main > section:first-child ul,
  main > section:first-child .space-y-3 {
    grid-template-columns: 1fr !important;
  }

  main > section:first-child .h-\[600px\] {
    width: 100% !important;
    height: 260px !important;
  }

  section[id="servicios"] .grid {
    grid-template-columns: 1fr !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card {
    grid-template-columns: 1fr !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3 {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 {
    min-height: 0 !important;
    border-right: 0 !important;
  }

  .message-form-card form {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  header {
    min-height: 60px !important;
  }

  main > section:first-child {
    padding-top: 4.75rem !important;
  }

  main h2 {
    font-size: 1.55rem !important;
  }

  .contact-send-options {
    grid-template-columns: 1fr !important;
  }

  .whatsapp-float {
    right: 16px !important;
    bottom: 16px !important;
    width: 50px !important;
    min-width: 50px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .whatsapp-float span {
    display: none !important;
  }
}

/* ==========================================
   PREMIUM FIX PASS - layouts estables
   ========================================== */

main > section:first-child .space-y-3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

main > section:first-child .space-y-3 > * {
  display: flex !important;
  align-items: center !important;
  min-height: 38px !important;
  width: 100% !important;
}

main > section:first-child .space-y-3 svg {
  flex: 0 0 auto !important;
}

main > section:first-child [class*="flex"][class*="gap"] a,
main > section:first-child [class*="flex"][class*="gap"] button {
  white-space: nowrap !important;
}

section[id="servicios"] > .container > .grid,
section[id="servicios"] .container > .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

section[id="servicios"] > .container > .grid > *,
section[id="servicios"] .container > .grid > * {
  min-width: 0 !important;
}

section[id="servicios"] .grid .grid,
section[id="nosotros"] .grid .grid {
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
}

section[id="servicios"] .grid .grid > *,
section[id="nosotros"] .grid .grid > * {
  box-shadow: none !important;
}

main > section:nth-child(3) > .container > .grid > *,
main > section:nth-child(3) .container > .grid > * {
  min-width: 0 !important;
}

section[id="nosotros"] .lg\:grid-cols-2 > * {
  min-width: 0 !important;
}

section[id="nosotros"] .grid.grid-cols-2 {
  align-items: stretch !important;
}

section[id="contacto"].contact-info-section {
  padding-bottom: 2.4rem !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card {
  width: 100% !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3 {
  line-height: 1.15 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::after {
  flex: 1 1 auto !important;
  text-align: right !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 > div:last-child {
  min-width: 0 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card p,
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card a {
  word-break: break-word !important;
}

.message-form-card form > .space-y-2 {
  min-width: 0 !important;
}

.message-form-card textarea {
  min-height: 132px !important;
}

.final-instagram-section h2,
.final-instagram-section p {
  color: #fff !important;
}

.final-instagram-inner span {
  color: #ffe0e5 !important;
}

@media (max-width: 1100px) {
  section[id="servicios"] > .container > .grid,
  section[id="servicios"] .container > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  main > section:first-child [class*="flex"][class*="gap"] {
    flex-wrap: wrap !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::after {
    text-align: left !important;
  }
}

@media (max-width: 640px) {
  section[id="servicios"] > .container > .grid,
  section[id="servicios"] .container > .grid {
    grid-template-columns: 1fr !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::before {
    order: -1 !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 {
    padding: 0.9rem !important;
  }
}

/* ==========================================
   VISUAL CLEANUP PASS - pagina equilibrada
   ========================================== */

body,
.App,
main {
  overflow-x: clip !important;
}

main > section {
  isolation: isolate !important;
}

section[id] > .container::before,
section[id] > .container::after,
section[id="servicios"]::before,
section[id="contacto"]::before,
section[id="nosotros"]::after,
section[id="servicios"]::after,
section[id="nosotros"]::before,
section[id="contacto"]::after,
main > section:not(:first-child)::before {
  display: none !important;
  content: none !important;
}

main > section > .container {
  position: relative !important;
  z-index: 1 !important;
}

main > section > .container > .text-center,
main > section > .container > div:first-child:not(.grid):not(.lg\:grid-cols-2):not(.md\:grid-cols-2) {
  margin-bottom: clamp(1.2rem, 2.1vw, 1.8rem) !important;
}

main > section:first-child .inline-flex,
main > section:first-child a,
main > section:first-child button {
  max-width: 100% !important;
}

main > section:first-child .space-y-3 > * {
  box-shadow: none !important;
  background: transparent !important;
  border-color: rgba(217, 68, 82, 0.12) !important;
}

main > section:first-child .space-y-3 p,
main > section:first-child .space-y-3 span {
  color: var(--premium-ink) !important;
}

main > section:first-child .bottom-8.left-8.right-8 {
  position: static !important;
}

main > section:first-child .bottom-8.left-8.right-8 p {
  color: var(--premium-muted) !important;
}

section[id="servicios"] .grid > * {
  display: flex !important;
  flex-direction: column !important;
}

section[id="servicios"] .grid > * > *:last-child {
  flex: 1 1 auto !important;
}

section[id="servicios"] h3,
section[id="servicios"] p {
  overflow-wrap: anywhere !important;
}

section[id="servicios"] [class*="rounded-full"],
main > section:nth-child(3) [class*="rounded-full"],
section[id="nosotros"] [class*="rounded-full"] {
  flex: 0 0 auto !important;
}

main > section:nth-child(3) .grid > *,
section[id="nosotros"] .grid.grid-cols-2 > * {
  overflow: hidden !important;
}

main > section:nth-child(3) .grid > * {
  min-height: 128px !important;
  padding: 1rem !important;
}

section[id="nosotros"] .grid.grid-cols-2 > * {
  display: grid !important;
  align-content: center !important;
}

section[id="nosotros"] .grid.grid-cols-2 p {
  margin: 0 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 {
  margin-top: 0 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card {
  border-color: rgba(217, 68, 82, 0.12) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3 {
  background:
    linear-gradient(135deg, #111827 0%, #222636 58%, #46212c 100%) !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::after {
  min-width: 0 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4:nth-of-type(2n) {
  border-right: 0 !important;
}

.message-section-head {
  margin-bottom: 1rem !important;
}

.message-form-card {
  overflow: hidden !important;
}

.message-form-card h3 {
  margin-bottom: 1rem !important;
}

.message-form-card label {
  display: block !important;
  margin-bottom: 0.35rem !important;
}

.message-form-card input,
.message-form-card textarea {
  width: 100% !important;
}

footer h3,
footer h4,
footer p,
footer li,
footer button,
footer a {
  color: inherit !important;
}

@media (min-width: 901px) {
  main > section:first-child {
    padding-top: 5.2rem !important;
  }

  main > section:first-child .container {
    min-height: 0 !important;
  }

  main > section:first-child .lg\:grid-cols-2,
  main > section:first-child .md\:grid-cols-2 {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr) !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .border-t .flex.items-start.gap-4 {
    border-right: 0 !important;
  }
}

@media (max-width: 900px) {
  main > section > .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  main > section:first-child .bottom-8.left-8.right-8 {
    margin-top: 0.7rem !important;
  }

  main > section:nth-child(3) .grid > * {
    min-height: 0 !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::before {
    align-self: flex-start !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::after {
    width: 100% !important;
  }
}

@media (max-width: 520px) {
  main > section:first-child .h-\[600px\] {
    height: 220px !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3 {
    gap: 0.45rem !important;
  }

  .message-section-head {
    text-align: left !important;
  }
}

/* ==========================================
   CONTACTO — v4 clean
   ========================================== */

/* ── Sección ── */
section[id="contacto"].contact-info-section {
  padding-top: clamp(2rem, 3vw, 3rem) !important;
  padding-bottom: clamp(2rem, 3vw, 3rem) !important;
  background:
    radial-gradient(ellipse 50% 55% at 0% 25%, rgba(217, 68, 82, 0.07), transparent 62%),
    radial-gradient(ellipse 40% 45% at 100% 75%, rgba(232, 93, 117, 0.05), transparent 60%),
    linear-gradient(160deg, #ffffff 0%, #fdf6f7 50%, #f8fafc 100%) !important;
}

/* Contenedor centrado y compacto */
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 {
  display: block !important;
  width: min(820px, 100%) !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}

/* Reset TOTAL — anula cualquier min-height anterior en filas de contacto */
section[id="contacto"] .contact-info-card div,
section[id="contacto"] .contact-info-card .flex,
section[id="contacto"] .contact-info-card [class*="gap"] {
  min-height: 0 !important;
  height: auto !important;
}

/* Reset de reglas anteriores conflictivas */
section[id="contacto"].contact-info-section .contact-info-card .flex.items-start.gap-4,
section[id="contacto"].contact-info-section .contact-info-card .border-t .flex.items-start.gap-4 {
  min-height: 0 !important;
  height: auto !important;
}

/* ── Tarjeta principal ── */
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(217, 68, 82, 0.12) !important;
  border-radius: 1.5rem !important;
  background: #ffffff !important;
  box-shadow: 0 16px 50px rgba(15, 23, 42, 0.09) !important;
}

/* ── Encabezado oscuro ── */
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3 {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin: 0 !important;
  padding: 1rem 1.4rem !important;
  border-radius: 0 !important;
  background:
    radial-gradient(ellipse 70% 80% at 95% 50%, rgba(217, 68, 82, 0.5), transparent 55%),
    linear-gradient(135deg, #0f172a 0%, #1a1625 55%, #2d1520 100%) !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::before {
  content: "" !important;
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--brand-red) !important;
  box-shadow: 0 0 0 4px rgba(217, 68, 82, 0.28) !important;
  flex-shrink: 0 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
}

section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::after {
  display: none !important;
}

/* ── Filas de datos ── */
section[id="contacto"].contact-info-section .contact-info-card .flex.items-start.gap-4 {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 0.7rem 1.4rem !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.055) !important;
  background: transparent !important;
  min-height: 0 !important;
  transition: background 0.15s ease !important;
}

section[id="contacto"].contact-info-section .contact-info-card .flex.items-start.gap-4:hover {
  background: rgba(217, 68, 82, 0.025) !important;
}

section[id="contacto"].contact-info-section .contact-info-card .flex.items-start.gap-4:last-of-type {
  border-bottom: 0 !important;
}

/* ── border-t como bloque normal ── */
section[id="contacto"].contact-info-section .contact-info-card .border-t {
  display: block !important;
  border-top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

section[id="contacto"].contact-info-section .contact-info-card .border-t .flex.items-start.gap-4 {
  border-bottom: 1px solid rgba(15, 23, 42, 0.055) !important;
}

section[id="contacto"].contact-info-section .contact-info-card .border-t .flex.items-start.gap-4:last-child {
  border-bottom: 0 !important;
}

/* ── Ícono ── */
section[id="contacto"].contact-info-section .contact-info-card .flex.items-start.gap-4 > .w-12.h-12,
section[id="contacto"].contact-info-section .contact-info-card .flex.items-start.gap-4 > [class*="w-12"] {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  border-radius: 0.55rem !important;
  background: rgba(217, 68, 82, 0.07) !important;
  border: 1px solid rgba(217, 68, 82, 0.13) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

section[id="contacto"].contact-info-section .contact-info-card .flex.items-start.gap-4 svg {
  width: 0.9rem !important;
  height: 0.9rem !important;
  color: var(--brand-red) !important;
}

/* ── Texto etiqueta ── */
section[id="contacto"].contact-info-section .contact-info-card .font-semibold,
section[id="contacto"].contact-info-section .contact-info-card .text-gray-900 {
  color: var(--ink) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.1rem !important;
  display: block !important;
}

/* ── Texto valor ── */
section[id="contacto"].contact-info-section .contact-info-card p,
section[id="contacto"].contact-info-section .contact-info-card a {
  color: #6b7280 !important;
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

/* Contenedor centrado y ancho adecuado */
section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 {
  width: min(640px, 100%) !important;
  max-width: 640px !important;
}

/* Mobile */
@media (max-width: 767px) {
  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3 {
    padding: 1.25rem 1.35rem !important;
    font-size: 0.95rem !important;
  }

  section[id="contacto"].contact-info-section .contact-info-card .flex.items-start.gap-4 {
    padding: 1rem 1.35rem !important;
    gap: 0.85rem !important;
  }

  section[id="contacto"].contact-info-section .contact-info-card .flex.items-start.gap-4 > .w-12.h-12,
  section[id="contacto"].contact-info-section .contact-info-card .flex.items-start.gap-4 > [class*="w-12"] {
    width: 2.2rem !important;
    height: 2.2rem !important;
    min-width: 2.2rem !important;
  }
}

/* ── Sección mensaje: compacta y limpia ── */
section[id="mensaje"].message-section {
  padding-top: clamp(1.8rem, 3vw, 3rem) !important;
  padding-bottom: clamp(1.8rem, 3vw, 3rem) !important;
  background:
    radial-gradient(ellipse 55% 50% at 96% 10%, rgba(217, 68, 82, 0.07), transparent 65%),
    linear-gradient(170deg, #f8fafc 0%, #ffffff 50%, #fdf5f6 100%) !important;
}

.message-section-head {
  max-width: 580px !important;
  margin-bottom: 1.5rem !important;
}

.message-section-head span {
  display: inline-flex !important;
  padding: 0.25rem 0.7rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(217, 68, 82, 0.2) !important;
  background: rgba(217, 68, 82, 0.07) !important;
  color: var(--brand-red) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.6rem !important;
}

.message-section-head h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  margin: 0 0 0.4rem !important;
}

.message-section-head p {
  font-size: 0.88rem !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

/* Tarjeta del formulario */
.message-form-card {
  max-width: 860px !important;
  margin: 0 auto !important;
  border: 1px solid rgba(217, 68, 82, 0.13) !important;
  border-radius: 1.3rem !important;
  background: #ffffff !important;
  box-shadow: 0 14px 45px rgba(15, 23, 42, 0.08) !important;
  padding: 1.75rem !important;
  overflow: hidden !important;
}

.message-form-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--brand-red), #f2a0aa, var(--brand-red-dark)) !important;
}

.message-form-card h3 {
  color: var(--ink) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  margin-bottom: 1.15rem !important;
}

.message-form-card form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.8rem !important;
}

.message-form-card form > .space-y-2:nth-child(3),
.message-form-card form > .space-y-2:nth-child(4),
.message-form-card form > .contact-send-options,
.message-form-card form > .contact-pref {
  grid-column: 1 / -1 !important;
}

.message-form-card label {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #374151 !important;
  margin-bottom: 0.3rem !important;
  display: block !important;
}

.message-form-card input,
.message-form-card textarea {
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 0.75rem !important;
  padding: 0.6rem 0.85rem !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  background: #fafafa !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.message-form-card input:focus,
.message-form-card textarea:focus {
  border-color: rgba(217, 68, 82, 0.5) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(217, 68, 82, 0.09) !important;
  outline: none !important;
}

.message-form-card .contact-send-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.65rem !important;
  margin-top: 0.25rem !important;
}

.message-form-card .contact-send-options button {
  min-height: 46px !important;
  border-radius: 0.85rem !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
}

/* ── MOBILE ── */
@media (max-width: 767px) {
  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 1.35rem 1.25rem !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 1.05rem !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::before {
    margin-bottom: 0 !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card h3::after {
    display: none !important;
  }

  section[id="contacto"].contact-info-section .grid.lg\:grid-cols-2 > *:first-child > .bg-white.contact-info-card .flex.items-start.gap-4 {
    grid-column: 1 !important;
    padding: 0.9rem 1rem !important;
  }

  .message-form-card {
    padding: 1.2rem !important;
  }

  .message-form-card form {
    grid-template-columns: 1fr !important;
  }

  .message-form-card form > * {
    grid-column: auto !important;
  }

  .message-form-card .contact-send-options {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================
   NOSOTROS — layout centrado (restaurado)
   ========================================== */

/* Fondo */
section[id="nosotros"] {
  background: #ffffff !important;
}

/* Cancelar decorador bajo h2 */
section[id="nosotros"] h2::after {
  display: none !important;
}

/* Colapsar el grid exterior a una sola columna centrada */
section[id="nosotros"] .lg\:grid-cols-2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2rem !important;
  text-align: center !important;
}

section[id="nosotros"] .lg\:grid-cols-2 > * {
  width: 100% !important;
  max-width: 780px !important;
}

/* Stats: 4 columnas en fila */
section[id="nosotros"] .grid.grid-cols-2 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  max-width: 780px !important;
  width: 100% !important;
}

/* Stat cards — compactas */
section[id="nosotros"] .grid.grid-cols-2 > * {
  min-height: 0 !important;
  padding: 0.85rem 1rem !important;
  border: 1px solid rgba(217, 68, 82, 0.11) !important;
  border-radius: 0.9rem !important;
  background: #ffffff !important;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

section[id="nosotros"] .grid.grid-cols-2 > *:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(217, 68, 82, 0.1) !important;
}

section[id="nosotros"] .grid.grid-cols-2 > *::after {
  display: none !important;
}

/* Íconos más pequeños */
section[id="nosotros"] .grid.grid-cols-2 svg {
  width: 1.2rem !important;
  height: 1.2rem !important;
  margin-bottom: 0.35rem !important;
  display: block !important;
}

/* Números */
section[id="nosotros"] .grid.grid-cols-2 h3,
section[id="nosotros"] .grid.grid-cols-2 [class*="text-3xl"],
section[id="nosotros"] .grid.grid-cols-2 [class*="text-4xl"] {
  font-size: clamp(1.2rem, 2vw, 1.55rem) !important;
  font-weight: 900 !important;
  color: var(--brand-red) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 0.15rem !important;
}

/* Labels */
section[id="nosotros"] .grid.grid-cols-2 p {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Tarjeta de texto: padding generoso en todos sus hijos directos */
section[id="nosotros"] .lg\:grid-cols-2 > *:first-child {
  padding: 2.5rem 2.75rem !important;
  border: 1px solid rgba(217, 68, 82, 0.12) !important;
  border-radius: 1.25rem !important;
  background: #ffffff !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.07) !important;
  text-align: center !important;
  max-width: 780px !important;
  width: 100% !important;
}

@media (max-width: 767px) {
  section[id="nosotros"] .grid.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  section[id="nosotros"] .lg\:grid-cols-2 {
    text-align: left !important;
  }
}

/* ==========================================
   MENSAJE — simple y limpio
   ========================================== */

section[id="mensaje"].message-section {
  padding-top: clamp(2.5rem, 4vw, 4rem) !important;
  padding-bottom: clamp(2.5rem, 4vw, 4rem) !important;
}

/* Formulario centrado */
section[id="mensaje"].message-section > .container {
  max-width: 760px !important;
  margin: 0 auto !important;
}

.message-section-grid {
  width: min(720px, 100%) !important;
  margin: 0 auto !important;
}

/* Tarjeta del formulario */
.message-form-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 1rem !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08) !important;
  padding: 2rem !important;
  overflow: hidden !important;
}

/* Inputs y textarea */
.message-form-card input,
.message-form-card textarea {
  border-radius: 0.6rem !important;
  background: #f9fafb !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
}

.message-form-card input:focus,
.message-form-card textarea:focus {
  border-color: var(--brand-red) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(217, 68, 82, 0.1) !important;
}

/* Botones de envío */
.message-form-card .contact-send-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem !important;
}

.message-form-card .send-whatsapp {
  background: #16a34a !important;
  color: #fff !important;
}

.message-form-card .send-email {
  background: var(--brand-red) !important;
  color: #fff !important;
}

@media (max-width: 520px) {
  .message-form-card .contact-send-options {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================
   SECCIONES — Fondos diferenciados por sección
   ========================================== */

/* Sección 1 — Hero: blanco puro con toque rosado */
main > section:first-child {
  background:
    radial-gradient(ellipse 55% 50% at 8% 20%, rgba(217, 68, 82, 0.09), transparent 65%),
    radial-gradient(ellipse 40% 40% at 94% 75%, rgba(217, 68, 82, 0.06), transparent 60%),
    #ffffff !important;
}

/* Sección 2 — Servicios: gris azulado muy suave */
main > section:nth-child(2),
section[id="servicios"] {
  background:
    radial-gradient(ellipse 50% 55% at 96% 15%, rgba(99, 102, 241, 0.06), transparent 60%),
    radial-gradient(ellipse 40% 40% at 4% 85%, rgba(99, 102, 241, 0.04), transparent 55%),
    linear-gradient(170deg, #f4f6fb 0%, #f8fafc 50%, #eef2f9 100%) !important;
}

/* Sección 3 — (beneficios / stats): blanco cálido */
main > section:nth-child(3) {
  background:
    radial-gradient(ellipse 55% 50% at 5% 20%, rgba(217, 68, 82, 0.08), transparent 62%),
    linear-gradient(165deg, #fffbf8 0%, #ffffff 55%, #fdf6f0 100%) !important;
}

/* Sección Nosotros: gris claro neutro */
section[id="nosotros"] {
  background:
    radial-gradient(ellipse 50% 45% at 95% 10%, rgba(15, 23, 42, 0.04), transparent 60%),
    radial-gradient(ellipse 40% 40% at 5% 90%, rgba(15, 23, 42, 0.03), transparent 55%),
    linear-gradient(170deg, #f1f4f8 0%, #f8fafc 50%, #edf1f7 100%) !important;
}

/* Sección Contacto: blanco con acento rosado */
section[id="contacto"].contact-info-section {
  background:
    radial-gradient(ellipse 50% 55% at 0% 30%, rgba(217, 68, 82, 0.08), transparent 62%),
    radial-gradient(ellipse 40% 45% at 100% 70%, rgba(217, 68, 82, 0.05), transparent 58%),
    linear-gradient(160deg, #fff5f6 0%, #ffffff 50%, #fdf6f7 100%) !important;
}

/* Sección Mensaje/Formulario: gris azulado suave */
section[id="mensaje"].message-section {
  background:
    radial-gradient(ellipse 48% 50% at 100% 5%, rgba(99, 102, 241, 0.05), transparent 58%),
    radial-gradient(ellipse 38% 42% at 0% 95%, rgba(217, 68, 82, 0.05), transparent 55%),
    linear-gradient(168deg, #f3f5fb 0%, #f8fafc 50%, #eef2f9 100%) !important;
}

/* Separador visual entre secciones (línea superior) */
section[id="servicios"],
section[id="nosotros"],
section[id="contacto"],
section[id="mensaje"] {
  border-top: 1px solid rgba(15, 23, 42, 0.07) !important;
}

/* === Paletas distintas por sección para diferenciarlas === */

/* Servicios — verde menta muy suave (asocia a higiene/limpieza) */
section[id="servicios"] {
  background:
    radial-gradient(ellipse 55% 50% at 0% 0%, rgba(16, 185, 129, 0.07), transparent 60%),
    radial-gradient(ellipse 45% 40% at 100% 100%, rgba(20, 184, 166, 0.06), transparent 58%),
    linear-gradient(168deg, #f0fdf9 0%, #f6fefb 50%, #ecfdf5 100%) !important;
}

/* Beneficios (3ª section sin id) — azul/lavanda muy suave */
main > section:nth-of-type(3) {
  background:
    radial-gradient(ellipse 55% 50% at 100% 0%, rgba(99, 102, 241, 0.07), transparent 60%),
    radial-gradient(ellipse 45% 40% at 0% 100%, rgba(59, 130, 246, 0.05), transparent 58%),
    linear-gradient(160deg, #f5f7ff 0%, #fafbff 50%, #eef2ff 100%) !important;
}

/* Nosotros — durazno/ámbar suave (cercano, humano) */
section[id="nosotros"] {
  background:
    radial-gradient(ellipse 55% 50% at 0% 100%, rgba(251, 146, 60, 0.07), transparent 60%),
    radial-gradient(ellipse 45% 40% at 100% 0%, rgba(245, 158, 11, 0.05), transparent 58%),
    linear-gradient(170deg, #fff7ed 0%, #fffaf3 50%, #fef3e7 100%) !important;
}

/* Contacto — rosado/coral (mantiene rojo de marca, lo que ya tenía) */
section[id="contacto"] {
  background:
    radial-gradient(ellipse 50% 55% at 0% 30%, rgba(217, 68, 82, 0.08), transparent 62%),
    radial-gradient(ellipse 40% 45% at 100% 70%, rgba(217, 68, 82, 0.05), transparent 58%),
    linear-gradient(160deg, #fff5f6 0%, #ffffff 50%, #fdf6f7 100%) !important;
}

/* Tarjeta de contacto en una sola columna (sin formulario) */
section[id="contacto"] .contact-info-grid-single {
  grid-template-columns: 1fr !important;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Botón CTA "Aceptar Consulta Gratuita" */
.contact-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2rem auto 0;
  padding: 0.95rem 2.4rem;
  background: #b91c1c;
  color: #fff !important;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 9999px;
  text-decoration: none;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px -10px rgba(185, 28, 28, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  align-self: center;
}
.contact-cta-btn:hover {
  background: #991b1b;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -10px rgba(185, 28, 28, 0.7);
}
.contact-info-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Título y subtítulo de la sección — sobre fondo claro: texto oscuro */
section[id="contacto"] > div > h2,
section[id="contacto"] > div > .text-center h2,
section[id="contacto"] .container > h2,
section[id="contacto"] .container > .text-center h2 {
  color: #0f172a !important;
  opacity: 1 !important;
}
section[id="contacto"] > div > p,
section[id="contacto"] > div > .text-center p,
section[id="contacto"] .container > p,
section[id="contacto"] .container > .text-center p {
  color: #475569 !important;
  opacity: 1 !important;
}

/* Interior de la tarjeta oscura — TODO el texto blanco, máxima fuerza */
section[id="contacto"] .contact-info-wrap,
section[id="contacto"] .contact-info-wrap *,
section[id="contacto"] .contact-info-wrap *::before,
section[id="contacto"] .contact-info-wrap *::after {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* Etiquetas/títulos en blanco puro y negrita */
section[id="contacto"] .contact-info-wrap h3,
section[id="contacto"] .contact-info-wrap h4,
section[id="contacto"] .contact-info-wrap .font-bold,
section[id="contacto"] .contact-info-wrap .font-semibold,
section[id="contacto"] .contact-info-wrap [class*="text-red"],
section[id="contacto"] .contact-info-wrap [class*="text-rose"],
section[id="contacto"] .contact-info-wrap [class*="text-gray-9"],
section[id="contacto"] .contact-info-wrap [class*="text-slate-9"],
section[id="contacto"] .contact-info-wrap [class*="text-zinc-9"],
section[id="contacto"] .contact-info-wrap [class*="text-neutral-9"] {
  color: #ffffff !important;
  font-weight: 700 !important;
}
/* Iconos: no tocar fill/stroke, solo asegurar opacidad */
section[id="contacto"] .contact-info-wrap svg {
  opacity: 1 !important;
  text-shadow: none;
}

/* Botón CTA: texto blanco siempre */
.contact-cta-btn,
.contact-cta-btn * {
  color: #ffffff !important;
}

/* ==========================================
   CONTACT CARD REDESIGN - compacto premium
   ========================================== */

section[id="contacto"] .contact-info-grid-single {
  width: min(860px, 100%) !important;
  max-width: 860px !important;
}

section[id="contacto"] .contact-info-wrap {
  width: 100% !important;
}

section[id="contacto"] .contact-info-wrap,
section[id="contacto"] .contact-info-wrap * {
  text-shadow: none !important;
}

section[id="contacto"] .contact-info-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 0.78fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-auto-rows: minmax(72px, auto) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
  padding: 1rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1.1rem !important;
  background:
    radial-gradient(circle at 100% 100%, rgba(217, 68, 82, 0.22), transparent 28%),
    linear-gradient(135deg, #151a27 0%, #1a1e2d 42%, #3b1b27 100%) !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.16) !important;
}

section[id="contacto"] .contact-info-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(217, 68, 82, 0.95), rgba(20, 184, 166, 0.8)) top / 100% 3px no-repeat,
    radial-gradient(circle at 90% 92%, rgba(255, 255, 255, 0.07), transparent 22%) !important;
}

section[id="contacto"] .contact-info-card h3 {
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.85rem !important;
  background:
    linear-gradient(135deg, rgba(217, 68, 82, 0.34), rgba(255, 255, 255, 0.055)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 12px) !important;
  color: #fff !important;
  font-size: 0.98rem !important;
  line-height: 1.18 !important;
  z-index: 1 !important;
}

section[id="contacto"] .contact-info-card h3::before {
  content: "7ma Control" !important;
  display: inline-flex !important;
  width: max-content !important;
  height: auto !important;
  margin: 0 0 1rem !important;
  padding: 0.28rem 0.62rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
}

section[id="contacto"] .contact-info-card h3::after {
  content: "Atencion directa en Talca y alrededores" !important;
  display: block !important;
  margin-top: auto !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

section[id="contacto"] .contact-info-card .flex.items-start.gap-4 {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.82rem 0.9rem !important;
  gap: 0.75rem !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  border-radius: 0.82rem !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
}

section[id="contacto"] .contact-info-card .flex.items-start.gap-4:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

section[id="contacto"] .contact-info-card .flex.items-start.gap-4 > .w-12.h-12,
section[id="contacto"] .contact-info-card .flex.items-start.gap-4 > [class*="w-12"] {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.65rem !important;
  background: rgba(217, 68, 82, 0.16) !important;
  box-shadow: none !important;
}

section[id="contacto"] .contact-info-card .flex.items-start.gap-4 svg {
  width: 0.92rem !important;
  height: 0.92rem !important;
  color: #ff7c8a !important;
  stroke: currentColor !important;
}

section[id="contacto"] .contact-info-card .flex.items-start.gap-4 > div:last-child {
  min-width: 0 !important;
}

section[id="contacto"] .contact-info-card .font-semibold,
section[id="contacto"] .contact-info-card .text-gray-900,
section[id="contacto"] .contact-info-card h4 {
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 0 0 0.16rem !important;
}

section[id="contacto"] .contact-info-card p,
section[id="contacto"] .contact-info-card a {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.78rem !important;
  line-height: 1.28 !important;
  margin: 0 !important;
  word-break: break-word !important;
}

section[id="contacto"] .contact-info-card [class*="text-red"],
section[id="contacto"] .contact-info-card [class*="text-\[\#D94452\]"] {
  color: #ffffff !important;
}

section[id="contacto"] .contact-info-card .border-t {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

section[id="contacto"] .contact-info-card .border-t .flex.items-start.gap-4 {
  grid-column: 2 / 4 !important;
  min-height: 74px !important;
  background: rgba(255, 255, 255, 0.052) !important;
}

section[id="contacto"] .contact-cta-btn {
  position: relative !important;
  z-index: 1 !important;
  grid-column: 1 !important;
  grid-row: 4 !important;
  align-self: end !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 1rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #d9232f, #b91c1c) !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  box-shadow: 0 14px 30px rgba(185, 28, 28, 0.25) !important;
}

@media (max-width: 900px) {
  section[id="contacto"] .contact-info-card {
    grid-template-columns: 1fr 1fr !important;
  }

  section[id="contacto"] .contact-info-card h3 {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 110px !important;
  }

  section[id="contacto"] .contact-info-card .border-t .flex.items-start.gap-4,
  section[id="contacto"] .contact-cta-btn {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 640px) {
  section[id="contacto"] .contact-info-card {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
    padding: 0.75rem !important;
  }

  section[id="contacto"] .contact-info-card h3 {
    min-height: 0 !important;
    padding: 0.9rem !important;
  }

  section[id="contacto"] .contact-info-card h3::after {
    margin-top: 0.7rem !important;
  }

  section[id="contacto"] .contact-info-card .flex.items-start.gap-4 {
    padding: 0.78rem !important;
  }
}

/* ==========================================
   CONTACT + CONSULTA SPLIT - secciones separadas
   ========================================== */

section[id="contacto"] .contact-info-grid-single {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
}

section[id="contacto"] .contact-info-card {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 0.72rem !important;
  padding: 0.95rem !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(217, 68, 82, 0.2), transparent 30%),
    linear-gradient(135deg, #151a27 0%, #1a1e2d 48%, #351a25 100%) !important;
}

section[id="contacto"] .contact-info-card h3 {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  min-height: 0 !important;
  padding: 0.95rem 1rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.9rem !important;
  border-radius: 0.82rem !important;
  background:
    linear-gradient(135deg, rgba(217, 68, 82, 0.28), rgba(255, 255, 255, 0.055)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 12px) !important;
}

section[id="contacto"] .contact-info-card h3::before {
  content: "Canales directos" !important;
  order: 2 !important;
  margin: 0 !important;
  padding: 0.28rem 0.65rem !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.68rem !important;
}

section[id="contacto"] .contact-info-card h3::after {
  display: none !important;
}

section[id="contacto"] .contact-info-card .flex.items-start.gap-4 {
  min-height: 78px !important;
  padding: 0.85rem 0.9rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

section[id="contacto"] .contact-info-card .border-t,
section[id="contacto"] .contact-info-card .contact-cta-btn {
  display: none !important;
}

section[id="consulta"].consultation-section {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 3.2vw, 3.4rem) 0 !important;
  background:
    radial-gradient(ellipse 42% 42% at 12% 20%, rgba(20, 184, 166, 0.09), transparent 64%),
    radial-gradient(ellipse 38% 40% at 92% 82%, rgba(217, 68, 82, 0.09), transparent 62%),
    linear-gradient(160deg, #f8fafc 0%, #ffffff 48%, #f3f7fb 100%) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.07) !important;
}

.consultation-shell {
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1rem, 2.5vw, 1.8rem);
  align-items: stretch;
  width: min(860px, 100%);
  margin: 0 auto;
}

.consultation-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem;
  border: 1px solid rgba(217, 68, 82, 0.13);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.consultation-copy span {
  width: max-content;
  margin-bottom: 0.65rem;
  padding: 0.3rem 0.68rem;
  border-radius: 999px;
  background: rgba(217, 68, 82, 0.08);
  color: var(--brand-red);
  font-size: 0.72rem;
  font-weight: 800;
}

.consultation-copy h2 {
  margin: 0;
  color: var(--ink) !important;
  font-size: clamp(1.35rem, 2.4vw, 2rem) !important;
  line-height: 1.08 !important;
}

.consultation-copy p {
  margin: 0.65rem 0 0;
  color: #5f6b7a !important;
  font-size: 0.9rem !important;
}

.consultation-card {
  position: relative;
  display: grid;
  gap: 0.85rem;
  align-content: center;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 100% 100%, rgba(217, 68, 82, 0.22), transparent 30%),
    linear-gradient(135deg, #151a27 0%, #1d2231 48%, #3b1b27 100%);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.14);
}

.consultation-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(217, 68, 82, 0.95), rgba(20, 184, 166, 0.8)) top / 100% 3px no-repeat;
}

.consultation-card .border-t {
  position: relative;
  z-index: 1;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.consultation-card .flex.items-start.gap-4 {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 0.9rem !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 0.85rem !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

.consultation-card .w-12.h-12,
.consultation-card [class*="w-12"] {
  width: 2.1rem !important;
  height: 2.1rem !important;
  min-width: 2.1rem !important;
  border-radius: 0.65rem !important;
  background: rgba(217, 68, 82, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.consultation-card svg {
  width: 0.95rem !important;
  height: 0.95rem !important;
  color: #ff7c8a !important;
  stroke: currentColor !important;
}

.consultation-card .font-semibold,
.consultation-card p,
.consultation-card a,
.consultation-card * {
  color: #ffffff !important;
  text-shadow: none !important;
}

.consultation-card p {
  margin: 0 !important;
  font-size: 0.84rem !important;
  line-height: 1.35 !important;
}

.consultation-card .contact-cta-btn {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 1rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #d9232f, #b91c1c) !important;
  color: #ffffff !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  box-shadow: 0 14px 30px rgba(185, 28, 28, 0.25) !important;
}

@media (max-width: 820px) {
  .consultation-shell {
    grid-template-columns: 1fr;
  }

  section[id="contacto"] .contact-info-card {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================
   FORMULARIO WHATSAPP - seccion independiente
   ========================================== */

section[id="mensaje"].message-section {
  position: relative;
  overflow: hidden;
  padding: clamp(2.2rem, 3.6vw, 3.8rem) 0 !important;
  background:
    radial-gradient(ellipse 46% 42% at 92% 16%, rgba(20, 184, 166, 0.1), transparent 62%),
    radial-gradient(ellipse 40% 38% at 8% 90%, rgba(217, 68, 82, 0.08), transparent 60%),
    linear-gradient(165deg, #f4f7fb 0%, #ffffff 46%, #f8fafc 100%) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.07) !important;
}

section[id="mensaje"].message-section > .container {
  max-width: 820px !important;
}

section[id="mensaje"] .message-section-head {
  max-width: 620px !important;
  margin: 0 auto 1.2rem !important;
  text-align: center !important;
}

section[id="mensaje"] .message-section-head span {
  display: inline-flex !important;
  margin-bottom: 0.65rem !important;
  padding: 0.32rem 0.75rem !important;
  border-radius: 999px !important;
  background: rgba(217, 68, 82, 0.08) !important;
  color: var(--brand-red) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
}

section[id="mensaje"] .message-section-head h2 {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: clamp(1.55rem, 2.8vw, 2.25rem) !important;
  line-height: 1.08 !important;
}

section[id="mensaje"] .message-section-head p {
  margin: 0.6rem auto 0 !important;
  color: #5f6b7a !important;
  font-size: 0.92rem !important;
}

section[id="mensaje"] .message-section-grid {
  width: min(760px, 100%) !important;
  margin: 0 auto !important;
}

section[id="mensaje"] .message-form-card {
  position: relative !important;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) !important;
  overflow: hidden !important;
  border: 1px solid rgba(217, 68, 82, 0.13) !important;
  border-radius: 1.15rem !important;
  background: #ffffff !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08) !important;
}

section[id="mensaje"] .message-form-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--brand-red), #14b8a6) !important;
}

section[id="mensaje"] .message-form-card h3 {
  margin: 0 0 1rem !important;
  color: var(--ink) !important;
  font-size: 1.05rem !important;
  font-weight: 850 !important;
}

section[id="mensaje"] .message-form-card form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.85rem !important;
}

section[id="mensaje"] .message-form-card form > .space-y-2:nth-child(3),
section[id="mensaje"] .message-form-card form > .space-y-2:nth-child(4),
section[id="mensaje"] .message-form-card form > .contact-send-options {
  grid-column: auto !important;
}

section[id="mensaje"] .message-form-card form > .form-message-field,
section[id="mensaje"] .message-form-card form > .contact-send-options {
  grid-column: 1 / -1 !important;
}

section[id="mensaje"] .message-form-card label {
  display: block !important;
  margin-bottom: 0.35rem !important;
  color: #334155 !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
}

section[id="mensaje"] .message-form-card label span {
  margin-left: 0.28rem !important;
  color: #94a3b8 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
}

section[id="mensaje"] .message-form-card input,
section[id="mensaje"] .message-form-card textarea,
section[id="mensaje"] .message-form-card select {
  width: 100% !important;
  min-height: 44px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 0.75rem !important;
  background: #f9fafb !important;
  color: var(--ink) !important;
  font-size: 0.9rem !important;
  box-shadow: none !important;
}

section[id="mensaje"] .message-form-card select {
  padding: 0 0.85rem !important;
  appearance: auto !important;
}

section[id="mensaje"] .message-form-card textarea {
  min-height: 126px !important;
}

section[id="mensaje"] .message-form-card input:focus,
section[id="mensaje"] .message-form-card textarea:focus,
section[id="mensaje"] .message-form-card select:focus {
  border-color: rgba(217, 68, 82, 0.55) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(217, 68, 82, 0.08) !important;
  outline: none !important;
}

section[id="mensaje"] .contact-send-options {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin-top: 0.15rem !important;
}

section[id="mensaje"] .contact-send-options .send-whatsapp {
  min-height: 48px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #22c55e, #128c4a) !important;
  color: #fff !important;
  font-size: 0.92rem !important;
  font-weight: 850 !important;
  box-shadow: 0 16px 34px rgba(18, 140, 74, 0.2) !important;
}

@media (max-width: 640px) {
  section[id="mensaje"] .message-section-head {
    text-align: left !important;
  }

  section[id="mensaje"] .message-form-card form {
    grid-template-columns: 1fr !important;
  }

  section[id="mensaje"] .message-form-card form > * {
    grid-column: auto !important;
  }
}

/* ==========================================
   CONTACT CHANNELS CLEANUP - sin panel redundante
   ========================================== */

section[id="contacto"] .contact-info-grid-single {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
}

section[id="contacto"] .contact-info-card {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  padding: 1rem !important;
}

section[id="contacto"] .contact-info-card h3 {
  display: none !important;
}

section[id="contacto"] .contact-info-card .flex.items-start.gap-4 {
  min-width: 0 !important;
  min-height: 86px !important;
  padding: 0.95rem !important;
  align-items: center !important;
}

section[id="contacto"] .contact-info-card .flex.items-start.gap-4 > div:last-child {
  min-width: 0 !important;
}

section[id="contacto"] .contact-info-card p,
section[id="contacto"] .contact-info-card a {
  overflow-wrap: anywhere !important;
}

@media (max-width: 640px) {
  section[id="contacto"] .contact-info-card {
    grid-template-columns: 1fr !important;
  }

  section[id="contacto"] .contact-info-card .flex.items-start.gap-4 {
    min-height: 0 !important;
  }
}

/* ==========================================
   VISUAL POLISH 20260524 - formulario limpio y fondos por seccion
   ========================================== */

main > section {
  isolation: isolate !important;
}

main > section::before,
main > section::after {
  pointer-events: none !important;
}

main > section:nth-child(2n)::after,
main > section:nth-child(2n + 1)::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  width: clamp(160px, 20vw, 280px) !important;
  height: clamp(160px, 20vw, 280px) !important;
  border-radius: 999px !important;
  opacity: 0.58 !important;
  filter: blur(2px) !important;
}

main > section:nth-child(2n)::after {
  right: max(-90px, -6vw) !important;
  top: 16% !important;
  background:
    radial-gradient(circle at 34% 34%, rgba(217, 68, 82, 0.16), transparent 56%),
    radial-gradient(circle at 66% 66%, rgba(20, 184, 166, 0.1), transparent 60%) !important;
}

main > section:nth-child(2n + 1)::after {
  left: max(-90px, -6vw) !important;
  bottom: 8% !important;
  background:
    radial-gradient(circle at 38% 36%, rgba(20, 184, 166, 0.11), transparent 58%),
    radial-gradient(circle at 72% 66%, rgba(217, 68, 82, 0.12), transparent 62%) !important;
}

main > section > .container,
main > section > div {
  position: relative !important;
  z-index: 1 !important;
}

section[id="servicios"] {
  background:
    linear-gradient(180deg, #ffffff 0%, #fbf5f6 100%) !important;
}

section[id="nosotros"] {
  background:
    radial-gradient(ellipse 42% 36% at 86% 18%, rgba(217, 68, 82, 0.08), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%) !important;
}

section[id="mensaje"].message-section {
  z-index: 2 !important;
  padding: clamp(2.6rem, 4vw, 4.2rem) 0 !important;
  background:
    radial-gradient(ellipse 38% 42% at 12% 20%, rgba(217, 68, 82, 0.09), transparent 60%),
    radial-gradient(ellipse 44% 40% at 88% 82%, rgba(20, 184, 166, 0.1), transparent 64%),
    linear-gradient(180deg, #f8fbfd 0%, #ffffff 48%, #fff7f8 100%) !important;
  border-top: 1px solid rgba(217, 68, 82, 0.08) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

section[id="mensaje"].message-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 24px auto auto 7% !important;
  z-index: 0 !important;
  width: 138px !important;
  height: 138px !important;
  border: 1px solid rgba(217, 68, 82, 0.12) !important;
  border-radius: 28px !important;
  transform: rotate(10deg) !important;
  background:
    repeating-linear-gradient(135deg, rgba(217, 68, 82, 0.08) 0 1px, transparent 1px 13px) !important;
}

section[id="mensaje"] .message-section-grid {
  width: min(920px, 100%) !important;
}

section[id="mensaje"] .message-form-wrap {
  width: 100% !important;
}

section[id="mensaje"] .message-form-card {
  display: grid !important;
  grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.28fr) !important;
  gap: clamp(1rem, 2vw, 1.45rem) !important;
  padding: clamp(1rem, 2vw, 1.3rem) !important;
  border-radius: 1.2rem !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.98)) padding-box,
    linear-gradient(135deg, rgba(217, 68, 82, 0.32), rgba(20, 184, 166, 0.28)) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.1) !important;
}

section[id="mensaje"] .message-form-card::before {
  grid-column: 1 !important;
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  border-radius: 0.95rem !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.18), transparent 26%),
    radial-gradient(circle at 84% 80%, rgba(217, 68, 82, 0.22), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 13px),
    linear-gradient(145deg, #151a27 0%, #221c2b 46%, #4a1d2a 100%) !important;
}

section[id="mensaje"] .message-form-card h3 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  z-index: 1 !important;
  max-width: 180px !important;
  margin: 0 0 1rem 1rem !important;
  color: #ffffff !important;
  font-size: clamp(1.05rem, 1.6vw, 1.32rem) !important;
  line-height: 1.05 !important;
}

section[id="mensaje"] .message-form-card h3::before {
  content: "Respuesta por WhatsApp" !important;
  display: inline-flex !important;
  margin-bottom: 0.65rem !important;
  padding: 0.28rem 0.58rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
}

section[id="mensaje"] .message-form-card form {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.62rem 0.78rem !important;
  align-items: start !important;
}

section[id="mensaje"] .message-form-card form > * {
  margin-top: 0 !important;
}

section[id="mensaje"] .message-form-card form.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

section[id="mensaje"] .message-form-card form > .space-y-2,
section[id="mensaje"] .message-form-card form > .form-extra-field {
  min-width: 0 !important;
}

section[id="mensaje"] .message-form-card input,
section[id="mensaje"] .message-form-card textarea,
section[id="mensaje"] .message-form-card select {
  min-height: 40px !important;
  border-radius: 0.68rem !important;
  background: #ffffff !important;
}

section[id="mensaje"] .message-form-card textarea {
  min-height: 92px !important;
  resize: vertical !important;
}

section[id="mensaje"] .contact-send-options {
  align-self: end !important;
  margin-top: 0 !important;
}

section[id="consulta"].consultation-section {
  z-index: 1 !important;
  background:
    radial-gradient(ellipse 38% 46% at 86% 18%, rgba(217, 68, 82, 0.11), transparent 62%),
    linear-gradient(135deg, #ffffff 0%, #f9fbfb 46%, #fff4f6 100%) !important;
}

section[id="contacto"].contact-info-section {
  background:
    radial-gradient(ellipse 40% 44% at 12% 24%, rgba(20, 184, 166, 0.08), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

section[id="contacto"] .contact-info-grid-single {
  width: min(860px, 100%) !important;
  max-width: 860px !important;
}

section[id="contacto"] .contact-info-card {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.7rem !important;
  padding: 0.85rem !important;
  border-radius: 1rem !important;
}

section[id="contacto"] .contact-info-card .flex.items-start.gap-4 {
  min-height: 94px !important;
  align-items: flex-start !important;
  padding: 0.9rem !important;
}

section[id="contacto"] .contact-info-card a,
section[id="contacto"] .contact-info-card p {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 980px) {
  section[id="mensaje"] .message-form-card {
    grid-template-columns: 1fr !important;
  }

  section[id="mensaje"] .message-form-card::before {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 116px !important;
  }

  section[id="mensaje"] .message-form-card h3 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 1rem !important;
  }

  section[id="mensaje"] .message-form-card form {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  section[id="contacto"] .contact-info-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  main > section:nth-child(n)::after {
    width: 150px !important;
    height: 150px !important;
    opacity: 0.36 !important;
  }

  section[id="mensaje"].message-section::before {
    display: none !important;
  }

  section[id="mensaje"] .message-section-head {
    margin-bottom: 1rem !important;
  }

  section[id="mensaje"] .message-form-card {
    padding: 0.78rem !important;
  }

  section[id="mensaje"] .message-form-card::before {
    min-height: 100px !important;
  }

  section[id="mensaje"] .message-form-card form {
    grid-template-columns: 1fr !important;
    gap: 0.68rem !important;
  }

  section[id="mensaje"] .message-form-card form > * {
    grid-column: auto !important;
  }

  section[id="contacto"] .contact-info-card {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================
   HERO ALIGNMENT FIX - fondos fuera del flujo
   ========================================== */

main > section:first-child {
  justify-content: center !important;
}

main > section:first-child > .absolute {
  position: absolute !important;
  z-index: 0 !important;
}

main > section:first-child > .container {
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

main > section:first-child .grid.lg\:grid-cols-2 {
  grid-template-columns: minmax(0, 1.02fr) minmax(300px, 0.88fr) !important;
  gap: clamp(2rem, 4vw, 3.2rem) !important;
}

main > section:first-child .grid.lg\:grid-cols-2 > *:first-child {
  max-width: 560px !important;
}

main > section:first-child .grid.lg\:grid-cols-2 > *:last-child {
  justify-self: end !important;
  width: min(430px, 100%) !important;
}

@media (max-width: 1023px) {
  main > section:first-child .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  main > section:first-child .grid.lg\:grid-cols-2 > *:last-child {
    justify-self: center !important;
    width: min(520px, 100%) !important;
  }
}

/* ==========================================
   MESSAGE FORM BALANCE FIX
   ========================================== */

section[id="mensaje"] .message-section-grid {
  width: min(980px, 100%) !important;
}

section[id="mensaje"] .message-form-card {
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr) !important;
  align-items: stretch !important;
}

section[id="mensaje"] .message-form-card::before {
  min-height: 100% !important;
}

section[id="mensaje"] .message-form-card h3 {
  align-self: end !important;
  max-width: 205px !important;
  margin: 0 0 1.35rem 1.25rem !important;
  font-size: clamp(1.2rem, 1.8vw, 1.48rem) !important;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.22) !important;
}

section[id="mensaje"] .message-form-card h3::after {
  content: "Complete sus datos y el mensaje se abrirá listo en WhatsApp." !important;
  display: block !important;
  margin-top: 0.7rem !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
}

section[id="mensaje"] .message-form-card form {
  width: min(520px, 100%) !important;
  justify-self: center !important;
}

@media (max-width: 860px) {
  section[id="mensaje"] .message-form-card {
    grid-template-columns: 1fr !important;
  }

  section[id="mensaje"] .message-form-card::before {
    min-height: 128px !important;
  }

  section[id="mensaje"] .message-form-card h3 {
    align-self: center !important;
    max-width: 420px !important;
    margin: 0 1rem !important;
  }

  section[id="mensaje"] .message-form-card form {
    width: 100% !important;
  }
}

/* Centrar formulario: el panel izquierdo queda como fondo, no como columna */
section[id="mensaje"] .message-form-card {
  display: block !important;
  min-height: 500px !important;
  padding: clamp(1rem, 2vw, 1.35rem) !important;
}

section[id="mensaje"] .message-form-card::before {
  position: absolute !important;
  inset: 1rem auto 1rem 1rem !important;
  width: min(270px, 32%) !important;
  min-height: 0 !important;
  height: auto !important;
  z-index: 0 !important;
}

section[id="mensaje"] .message-form-card h3 {
  position: absolute !important;
  left: clamp(1.8rem, 3vw, 2.25rem) !important;
  bottom: clamp(1.8rem, 3vw, 2.25rem) !important;
  z-index: 1 !important;
  width: min(210px, 28%) !important;
  margin: 0 !important;
}

section[id="mensaje"] .message-form-card form {
  position: relative !important;
  z-index: 2 !important;
  width: min(520px, 100%) !important;
  margin: 0 auto !important;
  justify-self: auto !important;
}

@media (max-width: 860px) {
  section[id="mensaje"] .message-form-card {
    min-height: 0 !important;
  }

  section[id="mensaje"] .message-form-card::before {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-height: 112px !important;
    margin-bottom: 1rem !important;
  }

  section[id="mensaje"] .message-form-card h3 {
    position: absolute !important;
    left: 1.6rem !important;
    top: 1.6rem !important;
    bottom: auto !important;
    width: min(380px, calc(100% - 3.2rem)) !important;
  }
}

/* Limpieza visual: el acento oscuro no debe cruzarse con los campos */
section[id="mensaje"] .message-form-card {
  min-height: 0 !important;
  padding-left: clamp(1rem, 2vw, 1.35rem) !important;
  background:
    radial-gradient(ellipse 34% 44% at 8% 92%, rgba(217, 68, 82, 0.08), transparent 64%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.99)) padding-box,
    linear-gradient(135deg, rgba(217, 68, 82, 0.28), rgba(20, 184, 166, 0.24)) border-box !important;
}

section[id="mensaje"] .message-form-card::before {
  inset: 1rem auto 1rem 1rem !important;
  width: 10rem !important;
  border-radius: 0.9rem !important;
  opacity: 0.96 !important;
}

section[id="mensaje"] .message-form-card h3 {
  left: 2rem !important;
  bottom: 2rem !important;
  width: 7.8rem !important;
  max-width: 7.8rem !important;
  font-size: 1rem !important;
  line-height: 1.08 !important;
}

section[id="mensaje"] .message-form-card h3::before {
  white-space: normal !important;
  font-size: 0.54rem !important;
}

section[id="mensaje"] .message-form-card h3::after {
  font-size: 0.62rem !important;
  line-height: 1.28 !important;
}

section[id="mensaje"] .message-form-card form {
  margin-left: auto !important;
  margin-right: clamp(1rem, 4vw, 2.6rem) !important;
  width: min(520px, calc(100% - 12.5rem)) !important;
}

@media (max-width: 860px) {
  section[id="mensaje"] .message-form-card::before {
    width: 100% !important;
  }

  section[id="mensaje"] .message-form-card h3 {
    left: 1.6rem !important;
    top: 1.6rem !important;
    bottom: auto !important;
    width: min(380px, calc(100% - 3.2rem)) !important;
    max-width: min(380px, calc(100% - 3.2rem)) !important;
    font-size: 1.15rem !important;
  }

  section[id="mensaje"] .message-form-card form {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Formulario final: sin franja lateral */
section[id="mensaje"] .message-form-card {
  min-height: 0 !important;
  padding: clamp(1.15rem, 2.4vw, 1.7rem) !important;
}

section[id="mensaje"] .message-form-card::before,
section[id="mensaje"] .message-form-card h3 {
  display: none !important;
}

section[id="mensaje"] .message-form-card form {
  width: min(560px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================
   SANITIZATION DECOR + SERVICES CTA
   ========================================== */

header .services-nav-highlight,
.mobile-site-menu .services-nav-highlight {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  min-height: 38px !important;
  padding: 0 1rem !important;
  border: 1px solid rgba(217, 68, 82, 0.18) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(217, 68, 82, 0.12), rgba(20, 184, 166, 0.1)),
    #ffffff !important;
  color: #b91c1c !important;
  font-weight: 850 !important;
  box-shadow: 0 10px 24px rgba(217, 68, 82, 0.13) !important;
}

header .services-nav-highlight::before,
.mobile-site-menu .services-nav-highlight::before {
  content: "" !important;
  width: 0.48rem !important;
  height: 0.48rem !important;
  border-radius: 50% !important;
  background: #14b8a6 !important;
  box-shadow:
    0 0 0 4px rgba(20, 184, 166, 0.12),
    0 0 16px rgba(20, 184, 166, 0.36) !important;
}

header .services-nav-highlight:hover {
  transform: translateY(-1px) !important;
  background:
    linear-gradient(135deg, rgba(217, 68, 82, 0.16), rgba(20, 184, 166, 0.14)),
    #ffffff !important;
}

main > section {
  --decor-red: rgba(217, 68, 82, 0.12);
  --decor-teal: rgba(20, 184, 166, 0.12);
  --decor-blue: rgba(59, 130, 246, 0.08);
  --decor-gold: rgba(245, 158, 11, 0.08);
}

main > section > .container::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  right: max(0.75rem, calc((100vw - 1180px) / 2)) !important;
  top: 1.2rem !important;
  width: clamp(70px, 8vw, 116px) !important;
  height: clamp(70px, 8vw, 116px) !important;
  display: block !important;
  opacity: 0.55 !important;
  background:
    radial-gradient(circle at 50% 24%, var(--decor-teal) 0 16%, transparent 17%),
    radial-gradient(circle at 35% 48%, var(--decor-red) 0 9%, transparent 10%),
    radial-gradient(circle at 65% 55%, rgba(217, 68, 82, 0.09) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 82%, rgba(20, 184, 166, 0.08) 0 12%, transparent 13%) !important;
}

main > section > .container::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  left: max(0.75rem, calc((100vw - 1180px) / 2)) !important;
  bottom: 1rem !important;
  width: clamp(120px, 15vw, 210px) !important;
  height: clamp(54px, 7vw, 86px) !important;
  display: block !important;
  opacity: 0.42 !important;
  border: 1px solid rgba(217, 68, 82, 0.14) !important;
  border-radius: 999px 999px 999px 28px !important;
  background:
    radial-gradient(circle at 18% 50%, var(--decor-red) 0 7%, transparent 8%),
    radial-gradient(circle at 34% 50%, rgba(217, 68, 82, 0.08) 0 5%, transparent 6%),
    radial-gradient(circle at 50% 50%, var(--decor-teal) 0 5%, transparent 6%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.2)) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.04) !important;
}

main > section > .container > * {
  position: relative !important;
  z-index: 1 !important;
}

main > section:first-child {
  --decor-red: rgba(217, 68, 82, 0.15);
  --decor-teal: rgba(20, 184, 166, 0.1);
  background:
    radial-gradient(ellipse 34% 40% at 10% 28%, rgba(217, 68, 82, 0.1), transparent 66%),
    radial-gradient(ellipse 28% 34% at 88% 72%, rgba(20, 184, 166, 0.08), transparent 64%),
    linear-gradient(155deg, #ffffff 0%, #fff8fa 48%, #f7fbfb 100%) !important;
}

section[id="servicios"] {
  --decor-red: rgba(217, 68, 82, 0.13);
  --decor-teal: rgba(20, 184, 166, 0.16);
  background:
    radial-gradient(ellipse 34% 42% at 88% 12%, rgba(20, 184, 166, 0.12), transparent 62%),
    radial-gradient(ellipse 30% 36% at 12% 88%, rgba(217, 68, 82, 0.09), transparent 64%),
    linear-gradient(180deg, #f7fbfb 0%, #ffffff 46%, #fff7f8 100%) !important;
}

main > section:nth-child(3) {
  --decor-red: rgba(245, 158, 11, 0.1);
  --decor-teal: rgba(59, 130, 246, 0.1);
  background:
    radial-gradient(ellipse 36% 44% at 90% 18%, rgba(245, 158, 11, 0.1), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

section[id="nosotros"] {
  --decor-red: rgba(217, 68, 82, 0.11);
  --decor-teal: rgba(34, 197, 94, 0.1);
  background:
    radial-gradient(ellipse 34% 40% at 88% 18%, rgba(34, 197, 94, 0.09), transparent 62%),
    radial-gradient(ellipse 32% 36% at 10% 86%, rgba(217, 68, 82, 0.08), transparent 62%),
    linear-gradient(180deg, #fffafa 0%, #ffffff 52%, #f8fbfb 100%) !important;
}

section[id="mensaje"].message-section {
  --decor-red: rgba(217, 68, 82, 0.1);
  --decor-teal: rgba(20, 184, 166, 0.13);
  background:
    radial-gradient(ellipse 36% 44% at 8% 20%, rgba(217, 68, 82, 0.08), transparent 64%),
    radial-gradient(ellipse 32% 40% at 92% 86%, rgba(20, 184, 166, 0.12), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%) !important;
}

section[id="consulta"].consultation-section,
section[id="contacto"].contact-info-section {
  --decor-red: rgba(217, 68, 82, 0.11);
  --decor-teal: rgba(59, 130, 246, 0.08);
}

@media (max-width: 767px) {
  header .services-nav-highlight,
  .mobile-site-menu .services-nav-highlight {
    width: 100% !important;
    justify-content: center !important;
  }

  main > section > .container::before {
    width: 72px !important;
    height: 72px !important;
    opacity: 0.32 !important;
  }

  main > section > .container::after {
    display: none !important;
  }
}

/* Overrides finales para vencer capas antiguas de decoracion */
body main section[id] > .container::before,
body main section[id] > .container::after {
  display: block !important;
  visibility: visible !important;
}

body main section[id] > .container::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  right: clamp(0.9rem, 3vw, 2.4rem) !important;
  top: clamp(0.8rem, 2vw, 1.4rem) !important;
  width: clamp(76px, 8vw, 118px) !important;
  height: clamp(76px, 8vw, 118px) !important;
  opacity: 0.5 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 22%, var(--decor-teal) 0 15%, transparent 16%),
    radial-gradient(circle at 34% 50%, var(--decor-red) 0 8%, transparent 9%),
    radial-gradient(circle at 66% 58%, rgba(59, 130, 246, 0.09) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 82%, rgba(217, 68, 82, 0.08) 0 11%, transparent 12%) !important;
  box-shadow: none !important;
  transform: none !important;
}

body main section[id] > .container::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: clamp(0.9rem, 3vw, 2.4rem) !important;
  bottom: clamp(0.8rem, 2vw, 1.4rem) !important;
  width: clamp(120px, 14vw, 210px) !important;
  height: clamp(48px, 6vw, 78px) !important;
  opacity: 0.38 !important;
  border: 1px solid rgba(217, 68, 82, 0.13) !important;
  border-radius: 999px 999px 999px 22px !important;
  background:
    radial-gradient(circle at 18% 50%, var(--decor-red) 0 7%, transparent 8%),
    radial-gradient(circle at 34% 50%, rgba(20, 184, 166, 0.1) 0 5%, transparent 6%),
    radial-gradient(circle at 52% 50%, rgba(59, 130, 246, 0.08) 0 5%, transparent 6%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.24)) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.04) !important;
  transform: none !important;
}

body main section[id="servicios"] {
  background:
    radial-gradient(ellipse 34% 42% at 88% 12%, rgba(20, 184, 166, 0.13), transparent 62%),
    radial-gradient(ellipse 30% 36% at 12% 88%, rgba(217, 68, 82, 0.09), transparent 64%),
    linear-gradient(180deg, #f7fbfb 0%, #ffffff 46%, #fff7f8 100%) !important;
}

body main section[id="nosotros"] {
  background:
    radial-gradient(ellipse 34% 40% at 88% 18%, rgba(34, 197, 94, 0.1), transparent 62%),
    radial-gradient(ellipse 32% 36% at 10% 86%, rgba(217, 68, 82, 0.08), transparent 62%),
    linear-gradient(180deg, #fffafa 0%, #ffffff 52%, #f8fbfb 100%) !important;
}

@media (max-width: 767px) {
  body main section[id] > .container::before {
    width: 68px !important;
    height: 68px !important;
    opacity: 0.28 !important;
  }

  body main section[id] > .container::after {
    display: none !important;
  }
}

/* ==========================================
   COLOR SYSTEM BOOST - acentos coherentes
   ========================================== */

:root {
  --clean-teal: #14b8a6;
  --clean-blue: #2563eb;
  --clean-green: #16a34a;
  --trust-gold: #f59e0b;
  --soft-rose: #fff1f3;
  --soft-teal: #ecfeff;
  --soft-blue: #eff6ff;
  --soft-gold: #fffbeb;
}

body {
  background:
    radial-gradient(ellipse 42% 48% at 0% 22%, rgba(217, 68, 82, 0.055), transparent 68%),
    radial-gradient(ellipse 34% 44% at 100% 56%, rgba(20, 184, 166, 0.05), transparent 66%),
    #ffffff !important;
}

body main section[id="hero"] {
  background:
    radial-gradient(ellipse 34% 40% at 10% 28%, rgba(217, 68, 82, 0.12), transparent 66%),
    radial-gradient(ellipse 28% 34% at 88% 72%, rgba(20, 184, 166, 0.1), transparent 64%),
    radial-gradient(ellipse 24% 26% at 64% 8%, rgba(37, 99, 235, 0.05), transparent 60%),
    linear-gradient(155deg, #ffffff 0%, #fff7f9 45%, #f5fbfb 100%) !important;
}

body main section[id="servicios"] {
  background:
    radial-gradient(ellipse 34% 42% at 88% 12%, rgba(20, 184, 166, 0.15), transparent 62%),
    radial-gradient(ellipse 30% 36% at 12% 88%, rgba(217, 68, 82, 0.1), transparent 64%),
    radial-gradient(ellipse 24% 30% at 48% 18%, rgba(37, 99, 235, 0.055), transparent 60%),
    linear-gradient(180deg, var(--soft-teal) 0%, #ffffff 44%, var(--soft-rose) 100%) !important;
}

body main > section:nth-child(3) {
  background:
    radial-gradient(ellipse 36% 44% at 90% 18%, rgba(245, 158, 11, 0.12), transparent 62%),
    radial-gradient(ellipse 28% 34% at 10% 80%, rgba(37, 99, 235, 0.07), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, var(--soft-blue) 100%) !important;
}

body main section[id="nosotros"] {
  background:
    radial-gradient(ellipse 34% 40% at 88% 18%, rgba(22, 163, 74, 0.12), transparent 62%),
    radial-gradient(ellipse 32% 36% at 10% 86%, rgba(217, 68, 82, 0.09), transparent 62%),
    radial-gradient(ellipse 20% 28% at 52% 8%, rgba(245, 158, 11, 0.07), transparent 64%),
    linear-gradient(180deg, #fffafa 0%, #ffffff 50%, #f3fbf8 100%) !important;
}

body main section[id="mensaje"].message-section {
  background:
    radial-gradient(ellipse 36% 44% at 8% 20%, rgba(217, 68, 82, 0.09), transparent 64%),
    radial-gradient(ellipse 32% 40% at 92% 86%, rgba(20, 184, 166, 0.14), transparent 62%),
    radial-gradient(ellipse 22% 26% at 68% 8%, rgba(245, 158, 11, 0.06), transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #f6fbfb 100%) !important;
}

body main section[id="consulta"].consultation-section {
  background:
    radial-gradient(ellipse 38% 46% at 86% 18%, rgba(217, 68, 82, 0.12), transparent 62%),
    radial-gradient(ellipse 30% 36% at 10% 80%, rgba(37, 99, 235, 0.065), transparent 62%),
    linear-gradient(135deg, #ffffff 0%, var(--soft-blue) 48%, #fff6f7 100%) !important;
}

body main section[id="contacto"].contact-info-section {
  background:
    radial-gradient(ellipse 40% 44% at 12% 24%, rgba(20, 184, 166, 0.1), transparent 62%),
    radial-gradient(ellipse 30% 34% at 88% 78%, rgba(217, 68, 82, 0.08), transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #f6fafc 100%) !important;
}

body main section[id] .bg-white,
body main section[id] .rounded-2xl,
body main section[id] .rounded-xl {
  border-color: rgba(217, 68, 82, 0.12) !important;
}

body main section[id="servicios"] .grid > *:nth-child(2n) {
  border-color: rgba(20, 184, 166, 0.2) !important;
  box-shadow: 0 18px 44px rgba(20, 184, 166, 0.08) !important;
}

body main section[id="servicios"] .grid > *:nth-child(3n) {
  border-color: rgba(37, 99, 235, 0.16) !important;
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.06) !important;
}

body main section[id="servicios"] .grid > *:nth-child(4n) {
  border-color: rgba(245, 158, 11, 0.18) !important;
  box-shadow: 0 18px 44px rgba(245, 158, 11, 0.07) !important;
}

body main section[id] h2::after {
  background: linear-gradient(90deg, var(--brand-red), var(--clean-teal), var(--trust-gold)) !important;
}

body main section[id] > .container::before {
  background:
    radial-gradient(circle at 50% 22%, var(--decor-teal) 0 15%, transparent 16%),
    radial-gradient(circle at 34% 50%, var(--decor-red) 0 8%, transparent 9%),
    radial-gradient(circle at 66% 58%, rgba(37, 99, 235, 0.1) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 82%, rgba(245, 158, 11, 0.1) 0 11%, transparent 12%) !important;
}

body main section[id] > .container::after {
  background:
    radial-gradient(circle at 18% 50%, var(--decor-red) 0 7%, transparent 8%),
    radial-gradient(circle at 34% 50%, rgba(20, 184, 166, 0.12) 0 5%, transparent 6%),
    radial-gradient(circle at 52% 50%, rgba(37, 99, 235, 0.1) 0 5%, transparent 6%),
    radial-gradient(circle at 68% 50%, rgba(245, 158, 11, 0.1) 0 5%, transparent 6%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.26)) !important;
}

/* ==========================================
   CONTACT INFO TABLE - sin columna lateral
   ========================================== */

section[id="contacto"] .contact-info-grid-single {
  width: min(900px, 100%) !important;
  max-width: 900px !important;
}

section[id="contacto"] .contact-info-card {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  padding: 1rem !important;
  background:
    radial-gradient(circle at 94% 82%, rgba(217, 68, 82, 0.18), transparent 32%),
    linear-gradient(135deg, #141926 0%, #1b2030 48%, #3b1f2b 100%) !important;
}

section[id="contacto"] .contact-info-card h3 {
  display: none !important;
}

section[id="contacto"] .contact-info-card .flex.items-start.gap-4 {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 104px !important;
  padding: 1rem !important;
  align-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.9rem !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

section[id="contacto"] .contact-info-card .flex.items-start.gap-4 .w-12 {
  flex: 0 0 auto !important;
}

section[id="contacto"] .contact-info-card .flex.items-start.gap-4 > div:last-child {
  min-width: 0 !important;
}

section[id="contacto"] .contact-info-card .flex.items-start.gap-4 p,
section[id="contacto"] .contact-info-card .flex.items-start.gap-4 a {
  overflow-wrap: anywhere !important;
}

@media (max-width: 900px) {
  section[id="contacto"] .contact-info-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  section[id="contacto"] .contact-info-card {
    grid-template-columns: 1fr !important;
  }

  section[id="contacto"] .contact-info-card .flex.items-start.gap-4 {
    min-height: 0 !important;
  }
}

/* Forzar tabla final de contacto sin encabezado/columna lateral */
body main section[id="contacto"].contact-info-section .contact-info-grid-single {
  width: min(900px, 100%) !important;
  max-width: 900px !important;
  display: block !important;
}

body main section[id="contacto"].contact-info-section .contact-info-grid-single .contact-info-wrap {
  width: 100% !important;
  max-width: none !important;
}

body main section[id="contacto"].contact-info-section .contact-info-grid-single .contact-info-card {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 0.75rem !important;
  padding: 1rem !important;
}

body main section[id="contacto"].contact-info-section .contact-info-grid-single .contact-info-card > h3 {
  display: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body main section[id="contacto"].contact-info-section .contact-info-grid-single .contact-info-card > .flex.items-start.gap-4 {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 96px !important;
  width: auto !important;
}

@media (max-width: 900px) {
  body main section[id="contacto"].contact-info-section .contact-info-grid-single .contact-info-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body main section[id="contacto"].contact-info-section .contact-info-grid-single .contact-info-card {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================
   ABOUT METRICS - banda premium
   ========================================== */

body main section[id="nosotros"] .grid.grid-cols-2 {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: min(900px, 100%) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(217, 68, 82, 0.16) !important;
  border-radius: 1.15rem !important;
  background:
    radial-gradient(circle at 8% 10%, rgba(217, 68, 82, 0.2), transparent 28%),
    radial-gradient(circle at 92% 88%, rgba(20, 184, 166, 0.16), transparent 30%),
    linear-gradient(135deg, #141926 0%, #1a2030 48%, #3a202c 100%) !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.14) !important;
}

body main section[id="nosotros"] .grid.grid-cols-2::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--brand-red), var(--clean-teal), var(--trust-gold), var(--brand-red)) !important;
}

body main section[id="nosotros"] .grid.grid-cols-2 > div {
  position: relative !important;
  min-height: 122px !important;
  padding: 1.15rem 0.9rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body main section[id="nosotros"] .grid.grid-cols-2 > div:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  top: 18px !important;
  right: 0 !important;
  bottom: 18px !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.13), transparent) !important;
}

body main section[id="nosotros"] .grid.grid-cols-2 > div > div:first-child {
  width: 42px !important;
  height: 42px !important;
  margin: 0 auto 0.7rem !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14) !important;
}

body main section[id="nosotros"] .grid.grid-cols-2 > div:nth-child(1) > div:first-child {
  color: #fb7185 !important;
  background: rgba(251, 113, 133, 0.13) !important;
}

body main section[id="nosotros"] .grid.grid-cols-2 > div:nth-child(2) > div:first-child {
  color: #2dd4bf !important;
  background: rgba(45, 212, 191, 0.13) !important;
}

body main section[id="nosotros"] .grid.grid-cols-2 > div:nth-child(3) > div:first-child {
  color: #60a5fa !important;
  background: rgba(96, 165, 250, 0.13) !important;
}

body main section[id="nosotros"] .grid.grid-cols-2 > div:nth-child(4) > div:first-child {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.14) !important;
}

body main section[id="nosotros"] .grid.grid-cols-2 > div p:first-of-type {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(1.65rem, 2.6vw, 2.25rem) !important;
  line-height: 0.95 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body main section[id="nosotros"] .grid.grid-cols-2 > div:nth-child(1) p:first-of-type {
  color: #fb7185 !important;
}

body main section[id="nosotros"] .grid.grid-cols-2 > div:nth-child(2) p:first-of-type {
  color: #2dd4bf !important;
}

body main section[id="nosotros"] .grid.grid-cols-2 > div:nth-child(3) p:first-of-type {
  color: #60a5fa !important;
}

body main section[id="nosotros"] .grid.grid-cols-2 > div:nth-child(4) p:first-of-type {
  color: #fbbf24 !important;
}

body main section[id="nosotros"] .grid.grid-cols-2 > div p:last-child {
  margin: 0.35rem 0 0 !important;
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

@media (max-width: 760px) {
  body main section[id="nosotros"] .grid.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body main section[id="nosotros"] .grid.grid-cols-2 > div:nth-child(2)::after {
    display: none !important;
  }

  body main section[id="nosotros"] .grid.grid-cols-2 > div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

@media (max-width: 460px) {
  body main section[id="nosotros"] .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  body main section[id="nosotros"] .grid.grid-cols-2 > div::after {
    display: none !important;
  }

  body main section[id="nosotros"] .grid.grid-cols-2 > div {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  body main section[id="nosotros"] .grid.grid-cols-2 > div:last-child {
    border-bottom: 0 !important;
  }
}

/* ==========================================
   SECTION PERSONALITY PASS - secciones mas distintas
   ========================================== */

body main section[id="hero"] {
  background:
    radial-gradient(ellipse 38% 44% at 8% 24%, rgba(217, 68, 82, 0.13), transparent 66%),
    radial-gradient(ellipse 30% 34% at 88% 72%, rgba(20, 184, 166, 0.1), transparent 64%),
    linear-gradient(145deg, #ffffff 0%, #fff6f8 46%, #f4fbfb 100%) !important;
}

body main section[id="servicios"] {
  background:
    linear-gradient(90deg, rgba(20, 184, 166, 0.08) 0 1px, transparent 1px 42px),
    linear-gradient(180deg, rgba(20, 184, 166, 0.08) 0 1px, transparent 1px 42px),
    radial-gradient(ellipse 44% 42% at 92% 8%, rgba(20, 184, 166, 0.16), transparent 62%),
    linear-gradient(180deg, #effdfb 0%, #ffffff 54%, #fff7f8 100%) !important;
}

body main section[id="servicios"] h2,
body main section[id="servicios"] h3 {
  letter-spacing: 0 !important;
}

body main section[id="servicios"] .grid > * {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9)) padding-box,
    linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(217, 68, 82, 0.14)) border-box !important;
  border: 1px solid transparent !important;
}

body main > section:nth-child(3) {
  background:
    radial-gradient(ellipse 42% 48% at 12% 18%, rgba(37, 99, 235, 0.1), transparent 64%),
    radial-gradient(ellipse 34% 42% at 88% 86%, rgba(245, 158, 11, 0.14), transparent 62%),
    linear-gradient(160deg, #f8fbff 0%, #ffffff 44%, #fffaf0 100%) !important;
}

body main > section:nth-child(3) .grid > * {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 251, 235, 0.88)) !important;
  border-color: rgba(245, 158, 11, 0.18) !important;
}

body main section[id="nosotros"] {
  background:
    radial-gradient(ellipse 44% 50% at 90% 14%, rgba(217, 68, 82, 0.13), transparent 62%),
    linear-gradient(135deg, #151a27 0%, #202638 46%, #fff6f8 46.2%, #ffffff 100%) !important;
}

body main section[id="nosotros"] h2,
body main section[id="nosotros"] h3,
body main section[id="nosotros"] p {
  text-shadow: none !important;
}

body main section[id="nosotros"] .lg\:grid-cols-2 > *:first-child {
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16) !important;
}

body main section[id="mensaje"].message-section {
  background:
    radial-gradient(ellipse 32% 40% at 90% 16%, rgba(37, 99, 235, 0.08), transparent 62%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 62%, #f6fbfb 100%) !important;
}

body main section[id="mensaje"] .message-form-card {
  background:
    linear-gradient(180deg, #ffffff, #fbfdff) padding-box,
    linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(20, 184, 166, 0.2), rgba(217, 68, 82, 0.14)) border-box !important;
}

body main section[id="consulta"].consultation-section {
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.12), transparent 24%),
    radial-gradient(circle at 86% 78%, rgba(217, 68, 82, 0.26), transparent 32%),
    linear-gradient(135deg, #111827 0%, #1f2937 52%, #3d1f2b 100%) !important;
}

body main section[id="consulta"] .consultation-copy {
  background: rgba(255, 255, 255, 0.92) !important;
}

body main section[id="consulta"] .consultation-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.055)) !important;
}

body main section[id="contacto"].contact-info-section {
  background:
    radial-gradient(ellipse 38% 42% at 10% 22%, rgba(20, 184, 166, 0.1), transparent 64%),
    radial-gradient(ellipse 28% 34% at 92% 84%, rgba(217, 68, 82, 0.09), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f6fbfb 100%) !important;
}

body main .final-instagram-section {
  background:
    radial-gradient(circle at 14% 22%, rgba(20, 184, 166, 0.18), transparent 28%),
    radial-gradient(circle at 88% 76%, rgba(217, 68, 82, 0.28), transparent 30%),
    linear-gradient(135deg, #121826 0%, #23283a 48%, #d94452 120%) !important;
}

@media (max-width: 767px) {
  body main section[id="nosotros"] {
    background:
      radial-gradient(ellipse 42% 38% at 88% 10%, rgba(217, 68, 82, 0.12), transparent 62%),
      linear-gradient(180deg, #ffffff 0%, #f9fbfb 100%) !important;
  }

  body main section[id="consulta"].consultation-section {
    background:
      radial-gradient(circle at 88% 82%, rgba(217, 68, 82, 0.18), transparent 32%),
      linear-gradient(135deg, #151a27 0%, #202638 100%) !important;
  }
}

/* ==========================================
   SECTION TITLES - jerarquia mas clara
   ========================================== */

body main > section:not(:first-child) h2 {
  position: relative !important;
  display: block !important;
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #081226 !important;
  font-size: clamp(2.25rem, 4.4vw, 4rem) !important;
  line-height: 0.95 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body main > section:not(:first-child) h2 span,
body main > section:not(:first-child) h2 strong {
  color: var(--brand-red) !important;
}

body main > section:not(:first-child) h2::after {
  width: clamp(88px, 10vw, 150px) !important;
  height: 5px !important;
  margin-top: 0.85rem !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--brand-red), var(--clean-teal), var(--trust-gold)) !important;
  box-shadow: 0 10px 28px rgba(217, 68, 82, 0.18) !important;
}

body main > section:not(:first-child) .text-center > p,
body main > section:not(:first-child) h2 + p,
body main > section:not(:first-child) .max-w-3xl > p {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #475569 !important;
  font-size: clamp(1rem, 1.35vw, 1.12rem) !important;
  line-height: 1.6 !important;
}

body main section[id="servicios"] h2::before,
body main section[id="nosotros"] h2::before,
body main section[id="mensaje"] h2::before,
body main section[id="contacto"] h2::before {
  display: block !important;
  width: max-content !important;
  margin: 0 auto 0.65rem !important;
  padding: 0.34rem 0.78rem !important;
  border: 1px solid rgba(217, 68, 82, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--brand-red) !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body main section[id="servicios"] h2::before {
  content: "Servicios" !important;
}

body main section[id="nosotros"] h2::before {
  content: "Nosotros" !important;
}

body main section[id="mensaje"] h2::before {
  content: "Formulario" !important;
}

body main section[id="contacto"] h2::before {
  content: "Contacto" !important;
}

body main section[id="consulta"] h2 {
  color: #ffffff !important;
  font-size: clamp(2rem, 3.8vw, 3.45rem) !important;
}

body main section[id="consulta"] h2::after {
  margin-left: 0 !important;
  background: linear-gradient(90deg, #ffffff, var(--clean-teal), var(--brand-red)) !important;
}

body main section[id="consulta"] .consultation-copy p {
  font-size: 1rem !important;
}

body main section[id="consulta"] .consultation-copy h2 {
  color: #081226 !important;
}

body main section[id="mensaje"] .message-section-head h2 {
  font-size: clamp(2.25rem, 4.4vw, 4rem) !important;
  line-height: 0.95 !important;
  font-weight: 950 !important;
}

body main .final-instagram-section h2 {
  color: #ffffff !important;
  font-size: clamp(2.35rem, 4.8vw, 4.4rem) !important;
}

@media (max-width: 767px) {
  body main > section:not(:first-child) h2 {
    font-size: clamp(1.9rem, 9vw, 2.75rem) !important;
    line-height: 1 !important;
  }

  body main > section:not(:first-child) h2::after {
    width: 96px !important;
    height: 4px !important;
  }

  body main section[id="servicios"] h2::before,
  body main section[id="nosotros"] h2::before,
  body main section[id="mensaje"] h2::before,
  body main section[id="contacto"] h2::before {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body main > section:not(:first-child) .text-center {
    text-align: left !important;
  }

  body main > section:not(:first-child) h2,
  body main > section:not(:first-child) .text-center > p,
  body main > section:not(:first-child) h2 + p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==========================================
   CONSULTA SECTION REDESIGN - integrada al bloque oscuro
   ========================================== */

body main section[id="consulta"].consultation-section {
  padding: clamp(3rem, 5vw, 4.8rem) 0 !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(20, 184, 166, 0.14), transparent 24%),
    radial-gradient(circle at 90% 70%, rgba(217, 68, 82, 0.28), transparent 34%),
    linear-gradient(135deg, #111827 0%, #1c2433 46%, #472230 100%) !important;
}

body main section[id="consulta"] .consultation-shell {
  width: min(980px, 100%) !important;
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr) !important;
  gap: clamp(1.4rem, 3vw, 2.4rem) !important;
  align-items: center !important;
}

body main section[id="consulta"] .consultation-copy {
  position: relative !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body main section[id="consulta"] .consultation-copy::before {
  content: "" !important;
  position: absolute !important;
  left: -1.2rem !important;
  top: 0.2rem !important;
  bottom: 0.2rem !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--brand-red), var(--clean-teal)) !important;
  box-shadow: 0 0 28px rgba(217, 68, 82, 0.34) !important;
}

body main section[id="consulta"] .consultation-copy span {
  margin-bottom: 0.85rem !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fecdd3 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body main section[id="consulta"] .consultation-copy h2 {
  max-width: 440px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(2.45rem, 4.8vw, 4.35rem) !important;
  line-height: 0.92 !important;
  text-align: left !important;
}

body main section[id="consulta"] .consultation-copy h2::after {
  margin-left: 0 !important;
  margin-top: 1rem !important;
}

body main section[id="consulta"] .consultation-copy p {
  max-width: 400px !important;
  margin: 1.05rem 0 0 !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
}

body main section[id="consulta"] .consultation-card {
  min-height: 260px !important;
  align-content: center !important;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 1.2rem !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.18), transparent 32%),
    radial-gradient(circle at 8% 92%, rgba(217, 68, 82, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(10px) !important;
}

body main section[id="consulta"] .consultation-card .border-t .flex.items-start.gap-4 {
  min-height: 94px !important;
  background: rgba(255, 255, 255, 0.085) !important;
}

body main section[id="consulta"] .consultation-card .contact-cta-btn {
  margin-top: 0.85rem !important;
  background: linear-gradient(135deg, var(--brand-red), #b91c1c) !important;
  box-shadow: 0 18px 38px rgba(217, 68, 82, 0.26) !important;
}

@media (max-width: 820px) {
  body main section[id="consulta"] .consultation-shell {
    grid-template-columns: 1fr !important;
  }

  body main section[id="consulta"] .consultation-copy {
    padding-left: 1rem !important;
  }

  body main section[id="consulta"] .consultation-copy::before {
    left: 0 !important;
  }

  body main section[id="consulta"] .consultation-copy h2,
  body main section[id="consulta"] .consultation-copy p {
    max-width: none !important;
  }
}

/* ==========================================
   FINAL INSTAGRAM CONTRAST FIX
   ========================================== */

body main .final-instagram-section .final-instagram-inner h2 {
  color: #ffffff !important;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

body main .final-instagram-section .final-instagram-inner p {
  color: rgba(255, 255, 255, 0.78) !important;
}

body main .final-instagram-section .final-instagram-inner span {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

body main .final-instagram-section .final-instagram-inner a {
  color: var(--brand-red) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18) !important;
}

/* ==========================================
   MESSAGE FORM COLOR BOOST
   ========================================== */

body main section[id="mensaje"] .message-form-card {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(248, 253, 255, 0.96)) padding-box,
    linear-gradient(135deg, rgba(217, 68, 82, 0.38), rgba(20, 184, 166, 0.36), rgba(37, 99, 235, 0.24), rgba(245, 158, 11, 0.18)) border-box !important;
  box-shadow:
    0 24px 70px rgba(15, 23, 42, 0.09),
    0 18px 48px rgba(20, 184, 166, 0.08) !important;
}

body main section[id="mensaje"] .message-form-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -12% -44% 44% !important;
  z-index: 0 !important;
  height: 78% !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 30% 35%, rgba(20, 184, 166, 0.16), transparent 32%),
    radial-gradient(circle at 68% 50%, rgba(217, 68, 82, 0.12), transparent 38%),
    radial-gradient(circle at 46% 76%, rgba(245, 158, 11, 0.09), transparent 32%) !important;
  filter: blur(10px) !important;
  pointer-events: none !important;
}

body main section[id="mensaje"] .message-form-card form {
  position: relative !important;
  z-index: 1 !important;
}

body main section[id="mensaje"] .message-form-card label {
  color: #0f172a !important;
}

body main section[id="mensaje"] .message-form-card label span {
  color: var(--brand-red) !important;
}

body main section[id="mensaje"] .message-form-card input,
body main section[id="mensaje"] .message-form-card select,
body main section[id="mensaje"] .message-form-card textarea {
  border: 1px solid rgba(20, 184, 166, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 253, 255, 0.92)) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035) !important;
}

body main section[id="mensaje"] .message-form-card input:focus,
body main section[id="mensaje"] .message-form-card select:focus,
body main section[id="mensaje"] .message-form-card textarea:focus {
  border-color: rgba(217, 68, 82, 0.58) !important;
  box-shadow:
    0 0 0 4px rgba(217, 68, 82, 0.08),
    0 12px 28px rgba(20, 184, 166, 0.08) !important;
}

body main section[id="mensaje"] .message-form-card .form-extra-field select {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 254, 255, 0.55)) !important;
}

body main section[id="mensaje"] .message-form-card .form-message-field textarea {
  background:
    radial-gradient(circle at 94% 12%, rgba(217, 68, 82, 0.06), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 235, 0.32)) !important;
}

body main section[id="mensaje"] .contact-send-options .send-whatsapp {
  background:
    linear-gradient(135deg, #22c55e 0%, #14b8a6 45%, #0f8f5d 100%) !important;
  box-shadow:
    0 18px 36px rgba(20, 184, 166, 0.22),
    0 12px 28px rgba(34, 197, 94, 0.16) !important;
}

body main section[id="mensaje"] .contact-send-options .send-whatsapp:hover {
  filter: saturate(1.08) brightness(1.02) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================
   ABOUT BADGES POSITIONING
   ========================================== */

body main section[id="nosotros"] .space-y-8 > .flex.flex-wrap.gap-3 {
  width: min(520px, 100%) !important;
  margin: 1.4rem auto 0 !important;
  padding-top: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.7rem !important;
}

body main section[id="nosotros"] .space-y-8 > .flex.flex-wrap.gap-3 > div {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 1rem !important;
  border: 1px solid rgba(217, 68, 82, 0.16) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 253, 255, 0.86)) !important;
  color: #172033 !important;
  font-size: 0.9rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
}

body main section[id="nosotros"] .space-y-8 > .flex.flex-wrap.gap-3 > div:nth-child(1) {
  border-color: rgba(217, 68, 82, 0.22) !important;
}

body main section[id="nosotros"] .space-y-8 > .flex.flex-wrap.gap-3 > div:nth-child(2) {
  border-color: rgba(20, 184, 166, 0.24) !important;
}

body main section[id="nosotros"] .space-y-8 > .flex.flex-wrap.gap-3 > div:nth-child(3) {
  border-color: rgba(37, 99, 235, 0.2) !important;
}

@media (max-width: 640px) {
  body main section[id="nosotros"] .space-y-8 > .flex.flex-wrap.gap-3 {
    width: 100% !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 0.35rem !important;
  }

  body main section[id="nosotros"] .space-y-8 > .flex.flex-wrap.gap-3 > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 0 0.35rem !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
  }
}

/* ==========================================
   WELCOME GATE REFINEMENT
   ========================================== */

.v3-gate .v3-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(217, 68, 82, 0.08)),
    rgba(18, 25, 39, 0.84) !important;
  box-shadow:
    0 26px 80px rgba(5, 10, 20, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.v3-gate .v3-badge {
  border-color: rgba(20, 184, 166, 0.28) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.v3-gate .v3-desc {
  max-width: 260px !important;
  margin-inline: auto !important;
}

.v3-welcome-loader {
  width: min(210px, 72%) !important;
  height: 7px !important;
  margin: 1.2rem auto 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.v3-welcome-loader span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, #d94452, #14b8a6, #ffffff) !important;
  transform-origin: left center !important;
  animation: v3WelcomeLoad 2.2s ease forwards !important;
}

@keyframes v3WelcomeLoad {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.v3-lock-btn.v3-welcome-btn {
  width: auto !important;
  min-width: 158px !important;
  height: 48px !important;
  margin: 1.1rem auto 0 !important;
  padding: 0 1.1rem !important;
  gap: 0.5rem !important;
  border-radius: 999px !important;
  border-color: rgba(20, 184, 166, 0.28) !important;
  background:
    linear-gradient(135deg, #ffffff, #f9fbfc) !important;
  color: #121827 !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 16px 36px rgba(217, 68, 82, 0.22) !important;
}

.v3-lock-btn.v3-welcome-btn svg {
  width: 18px !important;
  height: 18px !important;
  color: #d94452 !important;
  flex: 0 0 auto !important;
}

.v3-lock-btn.v3-welcome-btn span {
  display: inline-block !important;
  white-space: nowrap !important;
}

.v3-lock-btn.v3-welcome-btn:hover,
.v3-lock-btn.v3-welcome-btn.v3-lock-open {
  transform: translateY(-1px) !important;
  border-color: rgba(217, 68, 82, 0.36) !important;
  background: linear-gradient(135deg, #fff5f6, #ffffff) !important;
  color: #d94452 !important;
}

@media (max-width: 480px) {
  .v3-lock-btn.v3-welcome-btn {
    min-width: 148px !important;
    height: 46px !important;
    font-size: 0.78rem !important;
  }
}

/* ==========================================
   SANITIZATION DECORATIVE FIELD
   ========================================== */

body main > section {
  isolation: isolate !important;
}

body main > section > .container {
  position: relative !important;
  z-index: 2 !important;
}

.sanitization-decor-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.sanitization-decor-item {
  position: absolute !important;
  display: block !important;
  width: var(--decor-size, 86px) !important;
  height: var(--decor-size, 86px) !important;
  opacity: var(--decor-opacity, 0.16) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  filter: drop-shadow(0 18px 34px rgba(15, 23, 42, 0.08)) !important;
  transform: translate3d(0, 0, 0) rotate(var(--decor-rotate, 0deg)) !important;
}

.decor-spray {
  background-image: url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M38 18h19l4 9H34l4-9Z' stroke='%23d94452' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M31 30h34v12H31z' stroke='%2314b8a6' stroke-width='4'/%3E%3Cpath d='M37 42h23l6 38H31l6-38Z' stroke='%23d94452' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M67 31h11c5 0 8 3 8 8v6' stroke='%23d94452' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M74 51h14M73 60l12 6M73 42l12-6' stroke='%2314b8a6' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.decor-drop {
  background-image: url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 12C34 31 25 44 25 58c0 14 10 25 23 25s23-11 23-25C71 44 62 31 48 12Z' fill='%23d94452' fill-opacity='.13' stroke='%23d94452' stroke-width='4'/%3E%3Cpath d='M39 62c2 6 7 9 14 8' stroke='%2314b8a6' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.decor-shield {
  background-image: url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 10 78 22v22c0 20-12 34-30 42-18-8-30-22-30-42V22l30-12Z' fill='%2314b8a6' fill-opacity='.1' stroke='%2314b8a6' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M35 49h26M48 36v26' stroke='%23d94452' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.decor-spark {
  background-image: url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 12 55 38 82 48 55 58 48 84 39 58 14 48 39 38 48 12Z' fill='%23d94452' fill-opacity='.12' stroke='%23d94452' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M73 18v16M65 26h16M22 67v12M16 73h12' stroke='%2314b8a6' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.decor-molecule {
  background-image: url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29 32 48 49M48 49l22-18M48 49l10 25' stroke='%2314b8a6' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='27' cy='30' r='10' fill='%23d94452' fill-opacity='.12' stroke='%23d94452' stroke-width='4'/%3E%3Ccircle cx='48' cy='50' r='11' fill='%2314b8a6' fill-opacity='.1' stroke='%2314b8a6' stroke-width='4'/%3E%3Ccircle cx='72' cy='29' r='9' fill='%23d94452' fill-opacity='.1' stroke='%23d94452' stroke-width='4'/%3E%3Ccircle cx='60' cy='78' r='8' fill='%23d94452' fill-opacity='.1' stroke='%23d94452' stroke-width='4'/%3E%3C/svg%3E") !important;
}

.sanitization-decor-layer[data-decor-profile="hero"] .decor-1 {
  --decor-size: 112px;
  --decor-opacity: 0.12;
  --decor-rotate: -9deg;
  left: 5%;
  top: 18%;
}

.sanitization-decor-layer[data-decor-profile="hero"] .decor-2 {
  --decor-size: 72px;
  --decor-opacity: 0.14;
  right: 8%;
  top: 14%;
}

.sanitization-decor-layer[data-decor-profile="hero"] .decor-3 {
  --decor-size: 92px;
  --decor-opacity: 0.1;
  left: 36%;
  bottom: 8%;
}

.sanitization-decor-layer[data-decor-profile="hero"] .decor-4,
.sanitization-decor-layer[data-decor-profile="hero"] .decor-5 {
  display: none !important;
}

.sanitization-decor-layer[data-decor-profile="services"] .decor-1 {
  --decor-size: 98px;
  --decor-opacity: 0.15;
  right: 4%;
  top: 12%;
}

.sanitization-decor-layer[data-decor-profile="services"] .decor-2 {
  --decor-size: 58px;
  --decor-opacity: 0.16;
  left: 7%;
  top: 32%;
}

.sanitization-decor-layer[data-decor-profile="services"] .decor-3 {
  --decor-size: 78px;
  --decor-opacity: 0.12;
  right: 16%;
  bottom: 10%;
}

.sanitization-decor-layer[data-decor-profile="services"] .decor-4 {
  --decor-size: 52px;
  --decor-opacity: 0.13;
  left: 48%;
  top: 8%;
}

.sanitization-decor-layer[data-decor-profile="benefits"] .decor-1 {
  --decor-size: 76px;
  --decor-opacity: 0.12;
  left: 9%;
  bottom: 10%;
}

.sanitization-decor-layer[data-decor-profile="benefits"] .decor-2 {
  --decor-size: 64px;
  --decor-opacity: 0.15;
  right: 9%;
  top: 16%;
}

.sanitization-decor-layer[data-decor-profile="benefits"] .decor-5 {
  --decor-size: 84px;
  --decor-opacity: 0.12;
  left: 58%;
  bottom: 18%;
}

.sanitization-decor-layer[data-decor-profile="about"] .decor-2 {
  --decor-size: 84px;
  --decor-opacity: 0.12;
  right: 7%;
  top: 18%;
}

.sanitization-decor-layer[data-decor-profile="about"] .decor-3 {
  --decor-size: 108px;
  --decor-opacity: 0.1;
  left: 6%;
  bottom: 8%;
}

.sanitization-decor-layer[data-decor-profile="about"] .decor-5 {
  --decor-size: 70px;
  --decor-opacity: 0.14;
  right: 32%;
  bottom: 16%;
}

.sanitization-decor-layer[data-decor-profile="message"] .decor-1 {
  --decor-size: 90px;
  --decor-opacity: 0.11;
  left: 8%;
  top: 18%;
}

.sanitization-decor-layer[data-decor-profile="message"] .decor-4 {
  --decor-size: 64px;
  --decor-opacity: 0.15;
  right: 14%;
  top: 22%;
}

.sanitization-decor-layer[data-decor-profile="message"] .decor-5 {
  --decor-size: 88px;
  --decor-opacity: 0.1;
  right: 8%;
  bottom: 8%;
}

.sanitization-decor-layer[data-decor-profile="consultation"] .decor-2 {
  --decor-size: 78px;
  --decor-opacity: 0.16;
  left: 11%;
  top: 18%;
}

.sanitization-decor-layer[data-decor-profile="consultation"] .decor-3 {
  --decor-size: 96px;
  --decor-opacity: 0.13;
  right: 9%;
  bottom: 12%;
}

.sanitization-decor-layer[data-decor-profile="consultation"] .decor-4 {
  --decor-size: 58px;
  --decor-opacity: 0.14;
  right: 28%;
  top: 16%;
}

.sanitization-decor-layer[data-decor-profile="contact"] .decor-1 {
  --decor-size: 86px;
  --decor-opacity: 0.13;
  right: 8%;
  top: 12%;
}

.sanitization-decor-layer[data-decor-profile="contact"] .decor-2 {
  --decor-size: 66px;
  --decor-opacity: 0.15;
  left: 8%;
  bottom: 12%;
}

.sanitization-decor-layer[data-decor-profile="contact"] .decor-5 {
  --decor-size: 92px;
  --decor-opacity: 0.1;
  left: 30%;
  top: 18%;
}

@media (max-width: 767px) {
  .sanitization-decor-item {
    --decor-size: 54px;
    opacity: calc(var(--decor-opacity, 0.13) * 0.72) !important;
  }

  .sanitization-decor-layer .decor-4,
  .sanitization-decor-layer .decor-5 {
    display: none !important;
  }

  .sanitization-decor-layer[data-decor-profile="hero"] .decor-1,
  .sanitization-decor-layer[data-decor-profile="services"] .decor-1,
  .sanitization-decor-layer[data-decor-profile="message"] .decor-1 {
    left: auto !important;
    right: -18px !important;
    top: 72px !important;
  }

  .sanitization-decor-layer[data-decor-profile="hero"] .decor-2,
  .sanitization-decor-layer[data-decor-profile="services"] .decor-2,
  .sanitization-decor-layer[data-decor-profile="contact"] .decor-2 {
    left: -20px !important;
    top: auto !important;
    bottom: 34px !important;
  }
}

/* ==========================================
   WHATSAPP LIVE RINGS
   ========================================== */

.whatsapp-float {
  overflow: visible !important;
  isolation: isolate !important;
  animation: whatsappLiveFloat 3.6s ease-in-out infinite !important;
  box-shadow:
    0 16px 34px rgba(22, 163, 74, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.34) inset !important;
}

.whatsapp-float::before,
.whatsapp-float::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -6px !important;
  z-index: -1 !important;
  border-radius: 999px !important;
  border: 2px solid rgba(34, 197, 94, 0.72) !important;
  background:
    radial-gradient(circle, rgba(34, 197, 94, 0.16) 0%, rgba(34, 197, 94, 0) 62%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: whatsappLiveRing 2.35s ease-out infinite !important;
}

.whatsapp-float::after {
  animation-delay: 1.15s !important;
  border-color: rgba(20, 184, 166, 0.58) !important;
}

.whatsapp-float:hover {
  animation-play-state: paused !important;
  transform: translateY(-2px) scale(1.04) !important;
}

@keyframes whatsappLiveRing {
  0% {
    opacity: 0.72;
    transform: scale(0.9);
  }

  72% {
    opacity: 0;
    transform: scale(1.86);
  }

  100% {
    opacity: 0;
    transform: scale(1.86);
  }
}

@keyframes whatsappLiveFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-2px) scale(1.025);
  }
}

@media (max-width: 767px) {
  .whatsapp-float::before,
  .whatsapp-float::after {
    display: block !important;
    inset: -5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float,
  .whatsapp-float::before,
  .whatsapp-float::after {
    animation: none !important;
  }
}
/* ==========================================
   SECTION GUIDE LABEL SCALE
   ========================================== */
body main section > .container > .text-center > .inline-flex:first-child,
body main section[id="servicios"] > .container > .text-center > .inline-flex:first-child,
body main section[id="nosotros"] .space-y-8 > .inline-flex:first-child,
body main section[id="mensaje"] .message-section-head > span,
body main section[id="consulta"] .consultation-copy > span {
  min-height: 42px !important;
  padding: 0.55rem 1.15rem !important;
  font-size: clamp(0.94rem, 1.15vw, 1.08rem) !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.section-nav-label {
  min-height: 32px !important;
  padding: 0.42rem 0.8rem !important;
  font-size: clamp(0.9rem, 1.05vw, 1rem) !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.section-nav-item.active .section-nav-label {
  opacity: 1 !important;
  transform: none !important;
  color: var(--brand-red) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1) !important;
}

@media (max-width: 900px) {
  .section-nav-label {
    display: none !important;
  }

  .section-nav-item:not(.active) .section-nav-label {
    display: none !important;
  }

  .section-nav {
    max-width: min(calc(100vw - 1.5rem), 420px) !important;
  }
}

@media (max-width: 520px) {
  body main section > .container > .text-center > .inline-flex:first-child,
  body main section[id="servicios"] > .container > .text-center > .inline-flex:first-child,
  body main section[id="nosotros"] .space-y-8 > .inline-flex:first-child,
  body main section[id="mensaje"] .message-section-head > span,
  body main section[id="consulta"] .consultation-copy > span {
    min-height: 38px !important;
    padding: 0.48rem 0.95rem !important;
    font-size: 0.9rem !important;
  }

  .section-nav-label {
    min-height: 30px !important;
    padding: 0.38rem 0.68rem !important;
    font-size: 0.86rem !important;
  }
}

/* ==========================================
   SECTION GUIDE LEFT ALIGNMENT
   ========================================== */
body main section > .container > .text-center:has(> .inline-flex:first-child),
body main section[id="servicios"] > .container > .text-center,
body main section[id="mensaje"] .message-section-head {
  max-width: min(760px, 100%) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

body main section > .container > .text-center:has(> .inline-flex:first-child) > .inline-flex:first-child,
body main section[id="servicios"] > .container > .text-center > .inline-flex:first-child,
body main section[id="mensaje"] .message-section-head > span,
body main section[id="consulta"] .consultation-copy > span {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

body main section > .container > .text-center:has(> .inline-flex:first-child) h2,
body main section > .container > .text-center:has(> .inline-flex:first-child) p,
body main section[id="servicios"] > .container > .text-center h2,
body main section[id="servicios"] > .container > .text-center p,
body main section[id="mensaje"] .message-section-head h2,
body main section[id="mensaje"] .message-section-head p {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* Nosotros guide label follows the left edge of its content column */
body main section[id="nosotros"] .space-y-8 {
  text-align: left !important;
  align-items: flex-start !important;
}

body main section[id="nosotros"] .space-y-8 > .inline-flex:first-child,
body main section[id="nosotros"] .space-y-8 > h2,
body main section[id="nosotros"] .space-y-8 > p {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* Strong override for the first content column in Nosotros */
body main section[id="nosotros"] .lg\:grid-cols-2 > .space-y-8:first-child,
body main section[id="nosotros"] .lg\:grid-cols-2 > .space-y-8:first-child > h2,
body main section[id="nosotros"] .lg\:grid-cols-2 > .space-y-8:first-child > p {
  text-align: left !important;
}

body main section[id="nosotros"] .lg\:grid-cols-2 > .space-y-8:first-child > .inline-flex:first-child {
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
}

/* Keep section navigation as dots only; avoid duplicate floating labels. */
.section-nav-label {
  display: none !important;
}

/* About title sits outside the white card; remove duplicate h2 label. */
body main section[id="nosotros"] h2::before {
  content: none !important;
  display: none !important;
}

body main section[id="servicios"] h2::before {
  content: none !important;
  display: none !important;
}

body main > section:nth-child(3) h2 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.05 !important;
}

@media (max-width: 640px) {
  body main > section:nth-child(3) h2 {
    font-size: clamp(1.7rem, 8vw, 2.25rem) !important;
  }
}

/* Let the hero headline use the full readable width before the media column. */
@media (min-width: 1024px) {
  main > section:first-child > .container {
    max-width: 1240px !important;
  }

  main > section:first-child .grid.lg\:grid-cols-2 {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.72fr) !important;
    gap: clamp(1.6rem, 3vw, 2.5rem) !important;
  }

  main > section:first-child .grid.lg\:grid-cols-2 > *:first-child {
    max-width: 730px !important;
    width: 100% !important;
  }

  main > section:first-child h1 {
    max-width: 730px !important;
    width: 100% !important;
  }

  main > section:first-child .grid.lg\:grid-cols-2 > *:last-child {
    width: min(360px, 100%) !important;
  }

  main > section:first-child .h-\[600px\],
  main > section:first-child .bottom-8.left-8.right-8 {
    width: min(100%, 360px) !important;
  }
}

/* Wider hero title pass: prioritize the headline over the media column. */
@media (min-width: 901px) {
  main > section:first-child > .container {
    max-width: min(1280px, calc(100vw - 3.5rem)) !important;
  }

  main > section:first-child .grid.lg\:grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 300px) !important;
    gap: clamp(0.9rem, 2vw, 1.5rem) !important;
  }

  main > section:first-child .grid.lg\:grid-cols-2 > *:first-child,
  main > section:first-child h1 {
    max-width: none !important;
  }

  main > section:first-child .grid.lg\:grid-cols-2 > *:last-child,
  main > section:first-child .h-\[600px\],
  main > section:first-child .bottom-8.left-8.right-8 {
    width: min(100%, clamp(220px, 24vw, 300px)) !important;
  }
}

body main section[id="nosotros"] .lg\:grid-cols-2 > .space-y-8:first-child {
  position: relative !important;
  margin-top: 3.1rem !important;
}

body main section[id="nosotros"] .lg\:grid-cols-2 > .space-y-8:first-child > .inline-flex:first-child {
  position: absolute !important;
  left: 2.75rem !important;
  top: -3.05rem !important;
  z-index: 3 !important;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--brand-red) !important;
  font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

@media (max-width: 640px) {
  body main section[id="nosotros"] .lg\:grid-cols-2 > .space-y-8:first-child {
    margin-top: 2.65rem !important;
  }

  body main section[id="nosotros"] .lg\:grid-cols-2 > .space-y-8:first-child > .inline-flex:first-child {
    left: 1.35rem !important;
    top: -2.65rem !important;
    font-size: 1.16rem !important;
  }
}

/* Services section: closer to the provided reference layout. */
body main section[id="servicios"] {
  position: relative !important;
  overflow: hidden !important;
  padding-top: clamp(4.4rem, 7vw, 5.7rem) !important;
  padding-bottom: clamp(3.8rem, 6vw, 5.2rem) !important;
  background:
    radial-gradient(circle at 34% 8%, rgba(121, 219, 206, 0.24) 0 0.8rem, transparent 0.85rem),
    radial-gradient(circle at 43% 12%, rgba(217, 68, 82, 0.14) 0 0.55rem, transparent 0.6rem),
    radial-gradient(circle at 92% 82%, rgba(217, 68, 82, 0.1) 0 7rem, transparent 7.1rem),
    linear-gradient(112deg, #f4ffff 0%, #f8fffd 46%, #fffafa 100%) !important;
}

body main section[id="servicios"]::before {
  content: "" !important;
  position: absolute !important;
  top: 4.2rem !important;
  left: 50% !important;
  width: 2.8rem !important;
  height: 2.8rem !important;
  z-index: 0 !important;
  display: block !important;
  border: 3px solid rgba(160, 40, 58, 0.72) !important;
  border-radius: 42% 58% 50% 50% !important;
  transform: rotate(45deg) !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.75 !important;
}

body main section[id="servicios"]::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -8% -20% auto !important;
  width: 28rem !important;
  height: 28rem !important;
  border: 2px solid rgba(217, 68, 82, 0.12) !important;
  border-radius: 50% !important;
  background: transparent !important;
  opacity: 1 !important;
}

body main section[id="servicios"] > .container {
  position: relative !important;
  z-index: 1 !important;
  max-width: min(1160px, calc(100vw - 4rem)) !important;
}

body main section[id="servicios"] > .container > .text-center {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 0 clamp(2.25rem, 4vw, 3.2rem) !important;
  text-align: left !important;
}

body main section[id="servicios"] > .container > .text-center > .inline-flex:first-child {
  min-height: 0 !important;
  padding: 0.58rem 1.2rem !important;
  border: 1px solid rgba(217, 68, 82, 0.08) !important;
  border-radius: 999px !important;
  background: #f4e8e8 !important;
  color: var(--brand-red) !important;
  box-shadow: 0 0.16rem 0.3rem rgba(15, 23, 42, 0.12) !important;
  font-size: clamp(1rem, 1.45vw, 1.18rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body main section[id="servicios"] > .container > .text-center h2 {
  max-width: 1120px !important;
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
  color: #06142c !important;
  font-size: clamp(3.25rem, 6vw, 5.35rem) !important;
  line-height: 0.96 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body main section[id="servicios"] > .container > .text-center h2 span {
  color: var(--brand-red) !important;
}

body main section[id="servicios"] > .container > .text-center h2::after {
  content: "" !important;
  display: block !important;
  width: min(100%, 1080px) !important;
  height: 5px !important;
  margin-top: 1.25rem !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #c7374c 0%, #d54b58 31%, #2fafa0 55%, #8fbe42 72%, #d99d24 100%) !important;
}

body main section[id="servicios"] > .container > .text-center p {
  max-width: 760px !important;
  margin-top: 1.9rem !important;
  color: #111827 !important;
  font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

body main section[id="servicios"] > .container > .grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 1.8vw, 1.35rem) !important;
  align-items: stretch !important;
}

body main section[id="servicios"] > .container > .grid > * {
  position: relative !important;
  min-height: 286px !important;
  overflow: hidden !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  border-radius: 0.72rem !important;
  background: #ffffff !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.11) !important;
  transform: none !important;
}

body main section[id="servicios"] > .container > .grid > *:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(217, 68, 82, 0.3) !important;
}

body main section[id="servicios"] > .container > .grid > *::before {
  content: "" !important;
  position: absolute !important;
  top: 1.6rem !important;
  left: 50% !important;
  z-index: 3 !important;
  width: 5.9rem !important;
  height: 5.9rem !important;
  transform: translateX(-50%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  filter: drop-shadow(0 0 10px rgba(217, 68, 82, 0.18)) !important;
  pointer-events: none !important;
}

body main section[id="servicios"] > .container > .grid > *:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='60' cy='60' r='44' stroke='%23D94452' stroke-width='5'/%3E%3Cpath d='M30 90 90 30' stroke='%23D94452' stroke-width='6' stroke-linecap='round'/%3E%3Cellipse cx='60' cy='62' rx='14' ry='22' stroke='%23D94452' stroke-width='5'/%3E%3Cpath d='M47 54H73M45 69H75M60 40V30M41 48 31 38M79 48 89 38M42 76 30 86M78 76 90 86' stroke='%23D94452' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body main section[id="servicios"] > .container > .grid > *:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='60' cy='60' rx='14' ry='45' stroke='%23D94452' stroke-width='5'/%3E%3Cellipse cx='60' cy='60' rx='14' ry='45' transform='rotate(60 60 60)' stroke='%23D94452' stroke-width='5'/%3E%3Cellipse cx='60' cy='60' rx='14' ry='45' transform='rotate(120 60 60)' stroke='%23D94452' stroke-width='5'/%3E%3Ccircle cx='60' cy='60' r='7' fill='%23D94452'/%3E%3Cpath d='M94 34c9 12 14 23 14 33a14 14 0 1 1-28 0c0-10 5-21 14-33Z' stroke='%23D94452' stroke-width='5'/%3E%3C/svg%3E") !important;
}

body main section[id="servicios"] > .container > .grid > *:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 82h38v19H28zM35 44h24l7 12v26H28V56l7-12Z' stroke='%23D94452' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M74 84h22M85 73v22M87 25l6 14 14 6-14 6-6 14-6-14-14-6 14-6 6-14ZM35 24h23' stroke='%23D94452' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body main section[id="servicios"] > .container > .grid > *:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='60' cy='60' r='44' stroke='%23D94452' stroke-width='5'/%3E%3Cpath d='M30 90 90 30' stroke='%23D94452' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M40 68c7-18 22-24 39-16 12 6 12 23-1 29-12 6-23 1-31-9' stroke='%23D94452' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M77 52c7-10 17-10 23-3M45 68c-8 8-16 10-24 5' stroke='%23D94452' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body main section[id="servicios"] > .container > .grid > * > .relative:first-child {
  height: 128px !important;
  border-radius: 0 !important;
  background: #0b1931 !important;
}

body main section[id="servicios"] > .container > .grid > * > .relative:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.38 !important;
  filter: saturate(0.86) contrast(1.05) brightness(0.82) !important;
  transform: none !important;
}

body main section[id="servicios"] > .container > .grid > * > .relative:first-child > .absolute.inset-0 {
  background: linear-gradient(180deg, rgba(5, 16, 32, 0.58), rgba(5, 16, 32, 0.84)) !important;
}

body main section[id="servicios"] > .container > .grid > * > .relative:first-child > .rounded-full {
  top: 1.15rem !important;
  right: 1rem !important;
  z-index: 4 !important;
  width: 3.2rem !important;
  height: 3.2rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.16) !important;
}

body main section[id="servicios"] > .container > .grid > * > .relative:first-child > .rounded-full svg {
  width: 1.45rem !important;
  height: 1.45rem !important;
  color: #a52d40 !important;
  stroke-width: 2.4 !important;
}

body main section[id="servicios"] > .container > .grid > * > .p-6 {
  min-height: 158px !important;
  padding: 1.05rem 1.05rem 1.15rem !important;
  background: #ffffff !important;
}

body main section[id="servicios"] > .container > .grid > * h3 {
  margin: 0 0 0.72rem !important;
  color: #06142c !important;
  font-size: clamp(1.18rem, 1.5vw, 1.36rem) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body main section[id="servicios"] > .container > .grid > * h3::after {
  display: none !important;
}

body main section[id="servicios"] > .container > .grid > * p {
  margin: 0 !important;
  color: #111827 !important;
  font-size: clamp(0.95rem, 1.1vw, 1.04rem) !important;
  line-height: 1.46 !important;
}

body main section[id="servicios"] > .container > .grid > * > .absolute.bottom-0 {
  display: none !important;
}

@media (max-width: 980px) {
  body main section[id="servicios"] > .container > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body main section[id="servicios"] > .container > .text-center h2 {
    font-size: clamp(2.75rem, 8vw, 4.6rem) !important;
  }
}

@media (max-width: 640px) {
  body main section[id="servicios"] {
    padding-top: 3.6rem !important;
  }

  body main section[id="servicios"] > .container {
    max-width: min(100%, calc(100vw - 1.5rem)) !important;
  }

  body main section[id="servicios"] > .container > .text-center h2 {
    font-size: clamp(2.35rem, 12vw, 3.35rem) !important;
  }

  body main section[id="servicios"] > .container > .grid {
    grid-template-columns: 1fr !important;
  }
}

/* Final width pass for the services header; it overrides older guide-title rules. */
body main section[id="servicios"] > .container > .text-center.max-w-3xl,
body main section[id="servicios"] > .container > .text-center:has(> .inline-flex:first-child) {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body main section[id="servicios"] > .container > .text-center.max-w-3xl h2,
body main section[id="servicios"] > .container > .text-center:has(> .inline-flex:first-child) h2 {
  max-width: 1120px !important;
  width: 100% !important;
}

/* Services refinement: calmer title scale and clearer rodent icon. */
body main section[id="servicios"] > .container > .text-center h2,
body main section[id="servicios"] > .container > .text-center.max-w-3xl h2,
body main section[id="servicios"] > .container > .text-center:has(> .inline-flex:first-child) h2 {
  font-size: clamp(2.75rem, 4.65vw, 4.35rem) !important;
  line-height: 0.98 !important;
  max-width: 980px !important;
}

body main section[id="servicios"] > .container > .grid > *:nth-child(4)::before {
  width: 6.5rem !important;
  height: 6.5rem !important;
  top: 1.18rem !important;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='57' cy='67' rx='28' ry='18' fill='%23D9445230' stroke='%23D94452' stroke-width='5'/%3E%3Cpath d='M81 60c8-2 17 1 22 8-7 8-18 10-27 4' fill='%23D9445230'/%3E%3Cpath d='M81 60c8-2 17 1 22 8-7 8-18 10-27 4' stroke='%23D94452' stroke-width='5' stroke-linejoin='round'/%3E%3Ccircle cx='78' cy='48' r='8' fill='%23D9445230' stroke='%23D94452' stroke-width='5'/%3E%3Ccircle cx='92' cy='65' r='2.8' fill='%23D94452'/%3E%3Cpath d='M28 67c-12 2-22-3-25-13M39 80c-7 8-16 11-27 9M66 84c2 8 9 12 17 11M98 73h11M96 78l10 5' stroke='%23D94452' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='60' r='47' stroke='%23D94452' stroke-width='4' opacity='.8'/%3E%3Cpath d='M27 93 93 27' stroke='%23D94452' stroke-width='5' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E") !important;
}

@media (max-width: 980px) {
  body main section[id="servicios"] > .container > .text-center h2,
  body main section[id="servicios"] > .container > .text-center.max-w-3xl h2,
  body main section[id="servicios"] > .container > .text-center:has(> .inline-flex:first-child) h2 {
    font-size: clamp(2.35rem, 7vw, 3.5rem) !important;
  }
}

@media (max-width: 640px) {
  body main section[id="servicios"] > .container > .text-center h2,
  body main section[id="servicios"] > .container > .text-center.max-w-3xl h2,
  body main section[id="servicios"] > .container > .text-center:has(> .inline-flex:first-child) h2 {
    font-size: clamp(2.05rem, 10vw, 2.85rem) !important;
  }
}

/* Hero feature rows: match the reference card-list treatment. */
body main > section:first-child .space-y-3.sr-up {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.72rem !important;
  width: min(100%, 640px) !important;
  margin-top: 0.25rem !important;
}

body main > section:first-child .space-y-3.sr-up > * + * {
  margin-top: 0 !important;
}

body main > section:first-child .space-y-3.sr-up > .flex.items-center {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 3rem minmax(0, 1fr) 2rem !important;
  align-items: center !important;
  min-height: 4.1rem !important;
  width: 100% !important;
  gap: 0.95rem !important;
  padding: 0.62rem 1.05rem !important;
  border: 1px solid rgba(255, 84, 101, 0.1) !important;
  border-radius: 0.82rem !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
  color: #101b35 !important;
  backdrop-filter: blur(12px) !important;
}

body main > section:first-child .space-y-3.sr-up > .flex.items-center > svg {
  display: none !important;
}

body main > section:first-child .space-y-3.sr-up > .flex.items-center::before {
  content: "" !important;
  grid-column: 1 !important;
  width: 2.65rem !important;
  height: 2.65rem !important;
  border-radius: 999px !important;
  background-color: rgba(255, 84, 101, 0.1) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1.42rem 1.42rem !important;
}

body main > section:first-child .space-y-3.sr-up > .flex.items-center:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2' stroke='%23FF4F64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='7' r='4' stroke='%23FF4F64' stroke-width='2'/%3E%3Cpath d='M19 8v6M22 11h-6' stroke='%23FF4F64' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body main > section:first-child .space-y-3.sr-up > .flex.items-center:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 20 7v5c0 5-3.4 8.4-8 9-4.6-.6-8-4-8-9V7l8-4Z' stroke='%23FF4F64' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body main > section:first-child .space-y-3.sr-up > .flex.items-center:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13 2-9 12h7l-1 8 9-12h-7l1-8Z' stroke='%23FF4F64' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body main > section:first-child .space-y-3.sr-up > .flex.items-center::after {
  content: "" !important;
  grid-column: 3 !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  justify-self: end !important;
  border: 1.8px solid #ff4f64 !important;
  border-radius: 999px !important;
  background:
    url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 7.1 2 2L10.5 4.6' stroke='%23FF4F64' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 0.82rem 0.82rem no-repeat #ffffff !important;
}

body main > section:first-child .space-y-3.sr-up > .flex.items-center > span {
  grid-column: 2 !important;
  display: block !important;
  min-width: 0 !important;
  color: #101b35 !important;
  font-size: clamp(0.96rem, 1.05vw, 1.05rem) !important;
  line-height: 1.12 !important;
  font-weight: 850 !important;
}

body main > section:first-child .space-y-3.sr-up > .flex.items-center > span::after {
  display: block !important;
  margin-top: 0.32rem !important;
  color: #657189 !important;
  font-size: clamp(0.78rem, 0.85vw, 0.88rem) !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}

body main > section:first-child .space-y-3.sr-up > .flex.items-center:nth-child(1) > span::after {
  content: "Técnicos capacitados y certificados" !important;
}

body main > section:first-child .space-y-3.sr-up > .flex.items-center:nth-child(2) > span::after {
  content: "Efectivos y amigables con tu entorno" !important;
}

body main > section:first-child .space-y-3.sr-up > .flex.items-center:nth-child(3) > span::after {
  content: "Respuesta inmediata por WhatsApp" !important;
}

@media (max-width: 640px) {
  body main > section:first-child .space-y-3.sr-up > .flex.items-center {
    grid-template-columns: 2.7rem minmax(0, 1fr) 1.6rem !important;
    min-height: 3.9rem !important;
    padding: 0.58rem 0.85rem !important;
    gap: 0.75rem !important;
  }

  body main > section:first-child .space-y-3.sr-up > .flex.items-center::before {
    width: 2.35rem !important;
    height: 2.35rem !important;
    background-size: 1.28rem 1.28rem !important;
  }
}

/* Service cards: softer image shade. */
body main section[id="servicios"] > .container > .grid > * > .relative:first-child {
  background: #18263b !important;
}

body main section[id="servicios"] > .container > .grid > * > .relative:first-child img {
  opacity: 0.58 !important;
  filter: saturate(0.95) contrast(1) brightness(0.95) !important;
}

body main section[id="servicios"] > .container > .grid > * > .relative:first-child > .absolute.inset-0 {
  background: linear-gradient(180deg, rgba(7, 18, 34, 0.28), rgba(7, 18, 34, 0.48)) !important;
}

/* Services cards: remove photo background and center the large icons. */
body main section[id="servicios"] > .container > .grid > *::before {
  top: 64px !important;
  left: 50% !important;
  width: 5.55rem !important;
  height: 5.55rem !important;
  transform: translate(-50%, -50%) !important;
}

body main section[id="servicios"] > .container > .grid > *:nth-child(4)::before {
  top: 64px !important;
  width: 6rem !important;
  height: 6rem !important;
}

body main section[id="servicios"] > .container > .grid > * > .relative:first-child {
  height: 128px !important;
  background:
    radial-gradient(circle at 48% 47%, rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(135deg, #263650 0%, #1d2b43 48%, #152339 100%) !important;
}

body main section[id="servicios"] > .container > .grid > * > .relative:first-child img {
  display: none !important;
}

body main section[id="servicios"] > .container > .grid > * > .relative:first-child > .absolute.inset-0 {
  display: none !important;
}

/* Header refinement: balanced brand, centered nav, softer active state. */
body header {
  min-height: 76px !important;
  background-color: rgba(248, 250, 255, 0.94) !important;
  background: rgba(248, 250, 255, 0.94) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05) !important;
  backdrop-filter: blur(16px) !important;
}

body header.bg-transparent,
body:has(.App) header.bg-transparent {
  background-color: rgba(248, 250, 255, 0.94) !important;
  background-image: none !important;
}

body header > .container > .h-20 {
  display: grid !important;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr) !important;
  align-items: center !important;
  height: 76px !important;
  gap: clamp(1.2rem, 3vw, 2.4rem) !important;
}

body header > .container > .h-20 > .flex.items-center.gap-3.cursor-pointer {
  grid-column: 1 !important;
  justify-self: start !important;
  gap: 0.78rem !important;
}

body header > .container > .h-20 > .flex.items-center.gap-3.cursor-pointer > .rounded-full {
  width: 2.85rem !important;
  height: 2.85rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(217, 68, 82, 0.24) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
  ring-width: 0 !important;
}

body header h1 {
  color: #121a2d !important;
  font-size: clamp(1.18rem, 1.45vw, 1.35rem) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body header h1 + p {
  margin-top: 0.22rem !important;
  color: #4d596b !important;
  font-size: clamp(0.86rem, 1vw, 0.98rem) !important;
  line-height: 1.15 !important;
  font-weight: 550 !important;
}

body header nav.hidden.md\:flex {
  grid-column: 2 !important;
  justify-self: center !important;
  align-items: center !important;
  gap: 0.34rem !important;
  height: 2.65rem !important;
  min-height: 2.65rem !important;
  max-height: 2.65rem !important;
  padding: 0.3rem !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

body header nav.hidden.md\:flex > button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  height: 2.05rem !important;
  min-height: 2.05rem !important;
  max-height: 2.05rem !important;
  padding: 0 0.9rem !important;
  border-radius: 999px !important;
  color: #2e384a !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(0.94rem, 1.05vw, 1.02rem) !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}

body header nav.hidden.md\:flex > button:hover {
  color: #d94452 !important;
  background: rgba(217, 68, 82, 0.08) !important;
}

body header nav.hidden.md\:flex > button.services-nav-highlight {
  padding-left: 1.65rem !important;
  color: #d94452 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(217, 68, 82, 0.14) !important;
  box-shadow: 0 8px 20px rgba(217, 68, 82, 0.09) !important;
  font-weight: 850 !important;
  min-height: 2.05rem !important;
  max-height: 2.05rem !important;
}

body header nav.hidden.md\:flex > button.services-nav-highlight::before {
  content: "" !important;
  position: absolute !important;
  left: 0.78rem !important;
  top: 50% !important;
  width: 0.46rem !important;
  height: 0.46rem !important;
  border-radius: 999px !important;
  background: #2cc9b9 !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 0 0 0.24rem rgba(44, 201, 185, 0.14) !important;
}

body header > .container > .h-20 > .hidden.md\:block {
  grid-column: 3 !important;
  justify-self: end !important;
}

body header > .container > .h-20 > .hidden.md\:block button {
  height: 2.72rem !important;
  min-width: 10rem !important;
  padding: 0 1.35rem !important;
  border-radius: 999px !important;
  background: #d94452 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 22px rgba(217, 68, 82, 0.2) !important;
  font-size: 0.98rem !important;
  font-weight: 850 !important;
  transform: none !important;
}

body header > .container > .h-20 > .hidden.md\:block button:hover {
  background: #c73e4a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 26px rgba(217, 68, 82, 0.24) !important;
}

@media (max-width: 767px) {
  body header > .container > .h-20 {
    display: flex !important;
    height: 72px !important;
  }

  body header > .container > .h-20 > .flex.items-center.gap-3.cursor-pointer > .rounded-full {
    width: 2.55rem !important;
    height: 2.55rem !important;
  }
}

/* About section: reference-style editorial layout. */
body main section[id="nosotros"] {
  position: relative !important;
  overflow: hidden !important;
  padding-top: clamp(4.8rem, 7vw, 6.2rem) !important;
  padding-bottom: clamp(4.8rem, 7vw, 6.4rem) !important;
  background:
    radial-gradient(circle at 96% 33%, rgba(217, 68, 82, 0.12) 0 4.6rem, transparent 4.7rem),
    radial-gradient(circle at 13% 20%, rgba(217, 68, 82, 0.05) 0 10rem, transparent 10.2rem),
    linear-gradient(112deg, #fffaf8 0%, #ffffff 48%, #fff7f6 100%) !important;
}

body main section[id="nosotros"] > .container {
  max-width: min(1180px, calc(100vw - 4rem)) !important;
}

body main section[id="nosotros"] .grid.lg\:grid-cols-2 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr) !important;
  gap: clamp(2.2rem, 4vw, 4.2rem) !important;
  align-items: center !important;
}

body main section[id="nosotros"] .grid.lg\:grid-cols-2 > .space-y-8:first-child {
  position: relative !important;
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 650px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

body main section[id="nosotros"] .grid.lg\:grid-cols-2 > .space-y-8:first-child > .inline-flex:first-child {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.82rem !important;
  width: auto !important;
  min-height: 3.35rem !important;
  margin: 0 0 1.8rem !important;
  padding: 0.82rem 1.6rem !important;
  border: 1.5px solid #d94452 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  box-shadow: none !important;
  color: #c9162d !important;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body main section[id="nosotros"] .grid.lg\:grid-cols-2 > .space-y-8:first-child > .inline-flex:first-child::before {
  content: "" !important;
  width: 1.55rem !important;
  height: 1.55rem !important;
  background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3 23 7v6c0 6-3.7 10.1-9 12-5.3-1.9-9-6-9-12V7l9-4Z' stroke='%23D94452' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='m10 14 2.5 2.5L18.5 10' stroke='%23D94452' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body main section[id="nosotros"] .space-y-6.sr-up {
  display: block !important;
}

body main section[id="nosotros"] h2 {
  max-width: 650px !important;
  margin: 0 0 1.35rem !important;
  color: #07162f !important;
  font-size: clamp(3.1rem, 5vw, 4.85rem) !important;
  line-height: 0.98 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body main section[id="nosotros"] h2 span {
  display: block !important;
  color: #c9162d !important;
}

body main section[id="nosotros"] h2::after {
  content: "" !important;
  display: block !important;
  width: 3.8rem !important;
  height: 4px !important;
  margin-top: 1.35rem !important;
  border-radius: 999px !important;
  background: #d94452 !important;
}

body main section[id="nosotros"] .space-y-6.sr-up > p {
  max-width: 640px !important;
  margin: 0 0 1.25rem !important;
  color: #17233a !important;
  font-size: clamp(1.03rem, 1.35vw, 1.18rem) !important;
  line-height: 1.65 !important;
}

body main section[id="nosotros"] .about-proof-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-top: 1.8rem !important;
  padding: 0 !important;
}

body main section[id="nosotros"] .about-proof-card {
  display: grid !important;
  grid-template-columns: 3.1rem minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 6.2rem !important;
  height: 100% !important;
  gap: 0.85rem !important;
  padding: 1rem 1rem !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 0.9rem !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
}

body main section[id="nosotros"] .about-proof-icon {
  grid-row: span 2 !important;
  width: 3.1rem !important;
  height: 3.1rem !important;
  border-radius: 999px !important;
  background-color: rgba(217, 68, 82, 0.1) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 1.7rem 1.7rem !important;
}

body main section[id="nosotros"] .about-proof-certified .about-proof-icon,
body main section[id="nosotros"] .about-proof-guaranteed .about-proof-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3 23 7v6c0 6-3.7 10.1-9 12-5.3-1.9-9-6-9-12V7l9-4Z' stroke='%23D94452' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='m10 14 2.5 2.5L18.5 10' stroke='%23D94452' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body main section[id="nosotros"] .about-proof-reliable .about-proof-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='4' stroke='%23D94452' stroke-width='2.3'/%3E%3Cpath d='M3.5 24v-1.5A6.5 6.5 0 0 1 10 16h0a6.5 6.5 0 0 1 6.5 6.5V24M18 12h3.5A3.5 3.5 0 0 1 25 15.5V24' stroke='%23D94452' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body main section[id="nosotros"] .about-proof-card strong {
  color: #07162f !important;
  font-size: 1rem !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

body main section[id="nosotros"] .about-proof-card small {
  color: #17233a !important;
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
  font-weight: 550 !important;
}

body main section[id="nosotros"] .about-proof-card strong,
body main section[id="nosotros"] .about-proof-card small {
  min-width: 0 !important;
}

body main section[id="nosotros"] .space-y-8 > .flex.flex-wrap.gap-3.about-proof-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  margin: 1.8rem 0 0 !important;
  gap: 1rem !important;
}

body main section[id="nosotros"] .space-y-8 > .flex.flex-wrap.gap-3.about-proof-cards > .about-proof-card {
  display: grid !important;
  min-height: 6.35rem !important;
  height: 100% !important;
  padding: 1rem !important;
  justify-content: stretch !important;
}

body main section[id="nosotros"] .about-visual-panel {
  position: relative !important;
  grid-column: 2 !important;
  width: 100% !important;
  min-height: clamp(430px, 48vw, 575px) !important;
  margin: 0 !important;
  border-radius: 2rem !important;
  overflow: visible !important;
}

body main section[id="nosotros"] .about-visual-panel img {
  display: block !important;
  width: 100% !important;
  height: clamp(430px, 48vw, 575px) !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 2rem !important;
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.18) !important;
}

body main section[id="nosotros"] .about-dot-grid {
  position: absolute !important;
  top: -2.2rem !important;
  right: -2.5rem !important;
  width: 10.5rem !important;
  height: 8.8rem !important;
  background-image: radial-gradient(circle, #c9162d 0 3px, transparent 3.3px) !important;
  background-size: 1.45rem 1.45rem !important;
  opacity: 0.9 !important;
  z-index: -1 !important;
}

body main section[id="nosotros"] .about-floating-badge {
  position: absolute !important;
  right: -2rem !important;
  bottom: -1.2rem !important;
  width: 6.3rem !important;
  height: 6.3rem !important;
  border: 1px solid rgba(217, 68, 82, 0.28) !important;
  border-radius: 999px !important;
  background:
    url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 8 50 16v13c0 13-7.4 21.5-18 27-10.6-5.5-18-14-18-27V16l18-8Z' stroke='%23D94452' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='m23 32 6 6 13-14' stroke='%23D94452' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 3.6rem 3.6rem no-repeat,
    #ffffff !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14) !important;
}

body main section[id="nosotros"] .about-stats-bar {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  margin-top: clamp(1.8rem, 3vw, 2.4rem) !important;
  padding: 1.45rem 1.8rem !important;
  border: 0 !important;
  border-radius: 1.55rem !important;
  background: linear-gradient(135deg, #07162b 0%, #0d1e35 52%, #07162b 100%) !important;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18) !important;
}

body main section[id="nosotros"] .about-stats-bar > * {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-height: 9rem !important;
  padding: 0.8rem 1rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: #ffffff !important;
}

body main section[id="nosotros"] .about-stats-bar > * + *::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 1.2rem !important;
  bottom: 1.2rem !important;
  width: 1px !important;
  background: rgba(255, 255, 255, 0.58) !important;
}

body main section[id="nosotros"] .about-stats-bar > * > .inline-flex {
  width: 3.5rem !important;
  height: 3.5rem !important;
  margin: 0 0 0.72rem !important;
  border: 2px solid #ff5b66 !important;
  border-radius: 999px !important;
  background: rgba(255, 91, 102, 0.08) !important;
}

body main section[id="nosotros"] .about-stats-bar svg {
  width: 1.75rem !important;
  height: 1.75rem !important;
  color: #ff5b66 !important;
}

body main section[id="nosotros"] .about-stats-bar p:first-of-type {
  margin: 0 !important;
  color: #ff5b66 !important;
  font-size: clamp(2.35rem, 4vw, 3.55rem) !important;
  line-height: 0.95 !important;
  font-weight: 950 !important;
}

body main section[id="nosotros"] .about-stats-bar p:last-of-type {
  margin-top: 0.6rem !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
}

@media (max-width: 980px) {
  body main section[id="nosotros"] > .container {
    max-width: min(100%, calc(100vw - 2rem)) !important;
  }

  body main section[id="nosotros"] .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  body main section[id="nosotros"] .about-visual-panel {
    grid-column: 1 !important;
    min-height: 360px !important;
  }

  body main section[id="nosotros"] .about-visual-panel img {
    height: 360px !important;
  }

  body main section[id="nosotros"] .about-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body main section[id="nosotros"] .about-stats-bar > *:nth-child(3)::before {
    display: none !important;
  }
}

@media (max-width: 640px) {
  body main section[id="nosotros"] {
    padding-top: 4rem !important;
  }

  body main section[id="nosotros"] h2 {
    font-size: clamp(2.45rem, 12vw, 3.45rem) !important;
  }

  body main section[id="nosotros"] .about-proof-cards,
  body main section[id="nosotros"] .about-stats-bar {
    grid-template-columns: 1fr !important;
  }

  body main section[id="nosotros"] .about-stats-bar > *::before {
    display: none !important;
  }
}

/* About section final pass: closer to the supplied reference. */
body main section[id="nosotros"][data-about-layout="reference"] {
  padding-top: clamp(3.6rem, 5vw, 5.1rem) !important;
  padding-bottom: clamp(3.5rem, 5vw, 5rem) !important;
  background:
    radial-gradient(circle at 96% 31%, rgba(217, 68, 82, 0.13) 0 4.5rem, transparent 4.6rem),
    radial-gradient(circle at 11% 18%, rgba(217, 68, 82, 0.05) 0 8.5rem, transparent 8.65rem),
    linear-gradient(112deg, #fffaf8 0%, #ffffff 47%, #fff7f6 100%) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-copy-panel {
  isolation: isolate !important;
}

body main section[id="nosotros"][data-about-layout="reference"] h2 {
  font-size: clamp(3.35rem, 5.7vw, 5.45rem) !important;
  line-height: 0.96 !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .space-y-6.sr-up > p strong {
  color: #c9162d !important;
  font-weight: 900 !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-visual-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: auto -4.5rem 44% auto !important;
  width: 8.6rem !important;
  height: 8.6rem !important;
  border-radius: 999px !important;
  background: rgba(217, 68, 82, 0.12) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-soft-circle {
  position: absolute !important;
  right: -4.15rem !important;
  top: 30% !important;
  width: 8.4rem !important;
  height: 8.4rem !important;
  border-radius: 999px !important;
  background: rgba(217, 68, 82, 0.14) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-visual-panel img {
  position: relative !important;
  z-index: 2 !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-floating-badge {
  z-index: 3 !important;
}

@media (max-width: 980px) {
  body main section[id="nosotros"][data-about-layout="reference"] .about-copy-panel {
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  body main section[id="nosotros"][data-about-layout="reference"] {
    padding-top: 2.4rem !important;
    padding-bottom: 2.4rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .grid.lg\:grid-cols-2 {
    gap: 1.35rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .grid.lg\:grid-cols-2 > .space-y-8:first-child > .inline-flex:first-child {
    min-height: 2.65rem !important;
    margin-bottom: 1.05rem !important;
    padding: 0.62rem 1rem !important;
    font-size: 0.98rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] h2 {
    margin-bottom: 0.75rem !important;
    font-size: clamp(2.45rem, 11.6vw, 3.55rem) !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] h2::after {
    margin-top: 0.85rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .space-y-6.sr-up > p {
    margin-bottom: 0.8rem !important;
    font-size: 0.95rem !important;
    line-height: 1.52 !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-proof-card {
    min-height: 5.1rem !important;
    padding: 0.85rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-visual-panel,
  body main section[id="nosotros"][data-about-layout="reference"] .about-visual-panel img {
    min-height: 270px !important;
    height: 270px !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-dot-grid {
    top: -1rem !important;
    right: -0.8rem !important;
    width: 6.5rem !important;
    height: 5rem !important;
    background-size: 1rem 1rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-soft-circle {
    display: none !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-floating-badge {
    right: 0.65rem !important;
    bottom: 0.65rem !important;
    width: 4.3rem !important;
    height: 4.3rem !important;
    background-size: 2.45rem 2.45rem, auto !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 0.8rem !important;
    padding: 0.9rem !important;
    border-radius: 1.1rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar > * {
    min-height: 6.3rem !important;
    padding: 0.55rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar > * > .inline-flex {
    width: 2.4rem !important;
    height: 2.4rem !important;
    margin-bottom: 0.4rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar p:first-of-type {
    font-size: 1.85rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar p:last-of-type {
    margin-top: 0.35rem !important;
    font-size: 0.82rem !important;
  }
}

/* About section readability tuning: balanced scale and breathing room. */
body main section[id="nosotros"][data-about-layout="reference"] {
  padding-top: clamp(3rem, 4.2vw, 4.4rem) !important;
  padding-bottom: clamp(3rem, 4.2vw, 4.4rem) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] > .container {
  max-width: min(1120px, calc(100vw - 3rem)) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .grid.lg\:grid-cols-2 {
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.88fr) !important;
  gap: clamp(2rem, 4vw, 3.4rem) !important;
  align-items: center !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .grid.lg\:grid-cols-2 > .space-y-8:first-child,
body main section[id="nosotros"][data-about-layout="reference"] .about-copy-panel {
  max-width: 590px !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .grid.lg\:grid-cols-2 > .space-y-8:first-child > .inline-flex:first-child {
  position: static !important;
  min-height: 2.85rem !important;
  margin: 0 0 1.25rem !important;
  padding: 0.65rem 1.25rem !important;
  border: 1.5px solid #d94452 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  color: #c9162d !important;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] h2 {
  max-width: 590px !important;
  margin-bottom: 1rem !important;
  font-size: clamp(2.65rem, 4.25vw, 4.15rem) !important;
  line-height: 1.02 !important;
}

body main section[id="nosotros"][data-about-layout="reference"] h2::after {
  width: 3.35rem !important;
  height: 3px !important;
  margin-top: 1rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .space-y-6.sr-up > p {
  max-width: 570px !important;
  margin-bottom: 0.95rem !important;
  font-size: clamp(0.95rem, 1.05vw, 1.04rem) !important;
  line-height: 1.58 !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .space-y-8 > .flex.flex-wrap.gap-3.about-proof-cards {
  gap: 0.75rem !important;
  margin-top: 1.25rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .space-y-8 > .flex.flex-wrap.gap-3.about-proof-cards > .about-proof-card,
body main section[id="nosotros"][data-about-layout="reference"] .about-proof-card {
  grid-template-columns: 2.55rem minmax(0, 1fr) !important;
  min-height: 5.35rem !important;
  gap: 0.65rem !important;
  padding: 0.85rem !important;
  border-radius: 0.8rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-proof-icon {
  width: 2.45rem !important;
  height: 2.45rem !important;
  background-size: 1.35rem 1.35rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-proof-card strong {
  font-size: 0.86rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-proof-card small {
  font-size: 0.75rem !important;
  line-height: 1.32 !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-visual-panel,
body main section[id="nosotros"][data-about-layout="reference"] .about-visual-panel img {
  min-height: clamp(330px, 38vw, 455px) !important;
  height: clamp(330px, 38vw, 455px) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar {
  width: min(100%, 920px) !important;
  justify-self: center !important;
  margin-top: clamp(1.4rem, 2.4vw, 1.9rem) !important;
  padding: 1rem 1.15rem !important;
  border-radius: 1rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar > * {
  min-height: 6.8rem !important;
  padding: 0.55rem 0.7rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar > * > .inline-flex {
  width: 2.65rem !important;
  height: 2.65rem !important;
  margin-bottom: 0.45rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar svg {
  width: 1.3rem !important;
  height: 1.3rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar p:first-of-type {
  font-size: clamp(1.95rem, 3vw, 2.7rem) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar p:last-of-type {
  margin-top: 0.35rem !important;
  font-size: clamp(0.78rem, 1vw, 0.92rem) !important;
  font-weight: 700 !important;
}

@media (max-width: 980px) {
  body main section[id="nosotros"][data-about-layout="reference"] .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .grid.lg\:grid-cols-2 > .space-y-8:first-child,
  body main section[id="nosotros"][data-about-layout="reference"] .about-copy-panel {
    max-width: 760px !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] h2 {
    max-width: 720px !important;
    font-size: clamp(2.55rem, 7vw, 3.75rem) !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .space-y-6.sr-up > p {
    max-width: 720px !important;
  }
}

@media (max-width: 640px) {
  body main section[id="nosotros"][data-about-layout="reference"] > .container {
    max-width: min(100%, calc(100vw - 1.35rem)) !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] h2 {
    font-size: clamp(2.2rem, 10vw, 3rem) !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .space-y-8 > .flex.flex-wrap.gap-3.about-proof-cards {
    grid-template-columns: 1fr !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar {
    width: 100% !important;
  }
}

/* About proof cards: keep text comfortably inside each card. */
body main section[id="nosotros"][data-about-layout="reference"] .space-y-8 > .flex.flex-wrap.gap-3.about-proof-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.85rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .space-y-8 > .flex.flex-wrap.gap-3.about-proof-cards > .about-proof-card,
body main section[id="nosotros"][data-about-layout="reference"] .about-proof-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 7.2rem !important;
  padding: 0.95rem 0.8rem 0.9rem !important;
  gap: 0.42rem !important;
  text-align: center !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-proof-icon {
  flex: 0 0 auto !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-proof-card strong,
body main section[id="nosotros"][data-about-layout="reference"] .about-proof-card small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  text-wrap: balance !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-proof-card strong {
  font-size: 0.82rem !important;
  line-height: 1.12 !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-proof-card small {
  font-size: 0.72rem !important;
  line-height: 1.22 !important;
}

@media (max-width: 1120px) and (min-width: 641px) {
  body main section[id="nosotros"][data-about-layout="reference"] .space-y-8 > .flex.flex-wrap.gap-3.about-proof-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-proof-card {
    min-height: 7rem !important;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
  }
}

/* About section compact vertical rhythm. */
body main section[id="nosotros"][data-about-layout="reference"] {
  padding-top: clamp(2.25rem, 3.3vw, 3.35rem) !important;
  padding-bottom: clamp(2.15rem, 3.2vw, 3.25rem) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .grid.lg\:grid-cols-2 {
  gap: clamp(1.55rem, 3vw, 2.65rem) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .grid.lg\:grid-cols-2 > .space-y-8:first-child > .inline-flex:first-child {
  margin-bottom: 0.85rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] h2 {
  margin-bottom: 0.7rem !important;
  font-size: clamp(2.45rem, 3.95vw, 3.85rem) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] h2::after {
  margin-top: 0.75rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .space-y-6.sr-up > p {
  margin-bottom: 0.62rem !important;
  line-height: 1.5 !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .space-y-8 > .flex.flex-wrap.gap-3.about-proof-cards {
  margin-top: 0.95rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .space-y-8 > .flex.flex-wrap.gap-3.about-proof-cards > .about-proof-card,
body main section[id="nosotros"][data-about-layout="reference"] .about-proof-card {
  min-height: 6.55rem !important;
  padding-top: 0.78rem !important;
  padding-bottom: 0.78rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-visual-panel,
body main section[id="nosotros"][data-about-layout="reference"] .about-visual-panel img {
  min-height: clamp(305px, 34vw, 405px) !important;
  height: clamp(305px, 34vw, 405px) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar {
  margin-top: clamp(0.95rem, 1.8vw, 1.35rem) !important;
  padding: 0.82rem 1rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar > * {
  min-height: 5.95rem !important;
}

@media (max-width: 640px) {
  body main section[id="nosotros"][data-about-layout="reference"] {
    padding-top: 1.85rem !important;
    padding-bottom: 1.85rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar {
    margin-top: 0.6rem !important;
  }
}

/* About metrics bar: calmer scale so it supports the section. */
body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar {
  width: min(100%, 760px) !important;
  padding: 0.65rem 0.85rem !important;
  border-radius: 0.82rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar > * {
  min-height: 4.9rem !important;
  padding: 0.4rem 0.55rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar > * + *::before {
  top: 0.9rem !important;
  bottom: 0.9rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar > * > .inline-flex {
  width: 2.15rem !important;
  height: 2.15rem !important;
  margin-bottom: 0.32rem !important;
  border-width: 1.5px !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar svg {
  width: 1.05rem !important;
  height: 1.05rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar p:first-of-type {
  font-size: clamp(1.55rem, 2.25vw, 2.15rem) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar p:last-of-type {
  margin-top: 0.22rem !important;
  font-size: clamp(0.68rem, 0.8vw, 0.78rem) !important;
  letter-spacing: 0.03em !important;
}

@media (max-width: 640px) {
  body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar {
    width: 100% !important;
    padding: 0.65rem !important;
  }

  body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar > * {
    min-height: 4.7rem !important;
  }
}

/* Message section: reference-style personalized request form. */
body main section[id="mensaje"].message-section {
  position: relative !important;
  overflow: hidden !important;
  padding-top: clamp(3.1rem, 5vw, 4.8rem) !important;
  padding-bottom: clamp(2.8rem, 4.5vw, 4.2rem) !important;
  background:
    radial-gradient(circle at 9% 32%, rgba(217, 68, 82, 0.08) 0 3.1rem, transparent 3.25rem),
    radial-gradient(circle at 94% 6%, rgba(217, 68, 82, 0.11) 0 9.5rem, transparent 9.65rem),
    radial-gradient(circle at 0% 76%, rgba(95, 121, 170, 0.08) 0 7rem, transparent 7.15rem),
    linear-gradient(115deg, #ffffff 0%, #fffafa 50%, #ffffff 100%) !important;
}

body main section[id="mensaje"].message-section::before {
  content: "" !important;
  position: absolute !important;
  left: 2rem !important;
  top: 3.3rem !important;
  width: 8.5rem !important;
  height: 7rem !important;
  background-image: radial-gradient(circle, rgba(217, 68, 82, 0.18) 0 2px, transparent 2.4px) !important;
  background-size: 1.05rem 1.05rem !important;
  opacity: 0.82 !important;
  mask-image: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body main section[id="mensaje"].message-section::after {
  content: "" !important;
  position: absolute !important;
  right: 3.5rem !important;
  bottom: 4rem !important;
  width: 7rem !important;
  height: 5.5rem !important;
  background-image: radial-gradient(circle, rgba(217, 68, 82, 0.22) 0 2px, transparent 2.5px) !important;
  background-size: 1rem 1rem !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
}

body main section[id="mensaje"].message-section > .container {
  position: relative !important;
  z-index: 1 !important;
  max-width: min(960px, calc(100vw - 2rem)) !important;
}

body main section[id="mensaje"] .message-section-head {
  max-width: 760px !important;
  margin: 0 auto 1.9rem !important;
  text-align: center !important;
}

body main section[id="mensaje"] .message-section-head > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  min-height: 3.55rem !important;
  margin: 0 auto 1.35rem !important;
  padding: 0 1.7rem !important;
  border: 1px solid rgba(217, 68, 82, 0.12) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fff0f2, #fbe7ea) !important;
  color: #ef334c !important;
  box-shadow: 0 12px 26px rgba(217, 68, 82, 0.08) !important;
  font-size: clamp(1.05rem, 1.65vw, 1.35rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body main section[id="mensaje"] .message-section-head > span::before {
  content: "" !important;
  width: 1.85rem !important;
  height: 1.85rem !important;
  background: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 24.5c-2.2-2-3.5-4.6-3.5-7.5 0-6.1 5.6-11 12.5-11s12.5 4.9 12.5 11S23.9 28 17 28c-1.7 0-3.3-.3-4.7-.9L6.5 29l1.5-4.5Z' stroke='%23EF334C' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M11 15h11M11 20h8' stroke='%23EF334C' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  box-shadow: none !important;
}

body main section[id="mensaje"] .message-section-head > span::after {
  content: "FORMULARIO" !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 1.15rem) !important;
  transform: translateX(-50%) !important;
  min-height: 2.15rem !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 1.25rem !important;
  border: 1px solid rgba(217, 68, 82, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #ef334c !important;
  font-size: 0.9rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
}

body main section[id="mensaje"] .message-section-head h2 {
  margin: 3.55rem auto 0.95rem !important;
  color: #07162f !important;
  font-size: clamp(2.65rem, 5vw, 4.6rem) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

body main section[id="mensaje"] .message-section-head p {
  max-width: 610px !important;
  margin: 0 auto !important;
  color: #667085 !important;
  font-size: clamp(1rem, 1.5vw, 1.28rem) !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
  text-align: center !important;
}

body main section[id="mensaje"] .message-section-grid {
  width: 100% !important;
}

body main section[id="mensaje"] .message-form-card {
  width: min(100%, 860px) !important;
  margin: 0 auto !important;
  padding: clamp(1.6rem, 3vw, 2.55rem) !important;
  border: 1px solid rgba(217, 68, 82, 0.18) !important;
  border-radius: 1.35rem !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(12px) !important;
}

body main section[id="mensaje"] .message-form-card::before,
body main section[id="mensaje"] .message-form-card::after,
body main section[id="mensaje"] .message-form-card h3 {
  display: none !important;
}

body main section[id="mensaje"] .message-form-card form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem 1.65rem !important;
}

body main section[id="mensaje"] .message-form-card form > .form-message-field,
body main section[id="mensaje"] .message-form-card form > .contact-send-options {
  grid-column: 1 / -1 !important;
}

body main section[id="mensaje"] .message-form-card form > .form-extra-field:nth-of-type(5) {
  grid-column: 1 / -1 !important;
}

body main section[id="mensaje"] .message-form-card label {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  margin: 0 0 0.55rem !important;
  color: #111827 !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body main section[id="mensaje"] .message-form-card label::before {
  content: "" !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex: 0 0 auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

body main section[id="mensaje"] .message-form-card label[for="name"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='6.5' r='3.2' stroke='%23EF334C' stroke-width='2'/%3E%3Cpath d='M4.5 19v-1.5A6.5 6.5 0 0 1 11 11h0a6.5 6.5 0 0 1 6.5 6.5V19' stroke='%23EF334C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body main section[id="mensaje"] .message-form-card label[for="phone"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 4.5 9 8 7.2 9.4c.9 1.9 2.4 3.4 4.4 4.4L13 12l3.5 1.5-.2 3c-.1 1-1 1.8-2 1.7C8.5 17.7 4.3 13.5 3.8 7.7c-.1-1 .7-1.9 1.7-2l2-.2Z' stroke='%23EF334C' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body main section[id="mensaje"] .message-form-card label[for="email"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='16' height='12' rx='2' stroke='%23EF334C' stroke-width='2'/%3E%3Cpath d='m4 7 7 5 7-5' stroke='%23EF334C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body main section[id="mensaje"] .message-form-card label[for="serviceType"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 3 18 6v5c0 5-2.9 8.1-7 9-4.1-.9-7-4-7-9V6l7-3Z' stroke='%23EF334C' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8 11h6' stroke='%23EF334C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body main section[id="mensaje"] .message-form-card label[for="serviceArea"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 20s6-5.2 6-10a6 6 0 1 0-12 0c0 4.8 6 10 6 10Z' stroke='%23EF334C' stroke-width='2'/%3E%3Ccircle cx='11' cy='10' r='2' stroke='%23EF334C' stroke-width='2'/%3E%3C/svg%3E") !important;
}

body main section[id="mensaje"] .message-form-card label[for="message"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 16.5c-1.1-1.2-1.7-2.6-1.7-4.2C2.3 7.7 6.2 4 11 4s8.7 3.7 8.7 8.3-3.9 8.3-8.7 8.3c-1.2 0-2.3-.2-3.3-.6L4 21l1-3.1Z' stroke='%23EF334C' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body main section[id="mensaje"] .message-form-card label span {
  margin-left: 0.25rem !important;
  color: #ef334c !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
}

body main section[id="mensaje"] .message-form-card input,
body main section[id="mensaje"] .message-form-card select,
body main section[id="mensaje"] .message-form-card textarea {
  min-height: 3.25rem !important;
  width: 100% !important;
  padding: 0.8rem 1rem !important;
  border: 1.5px solid rgba(15, 23, 42, 0.13) !important;
  border-radius: 0.78rem !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #111827 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 5px 16px rgba(15, 23, 42, 0.04) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

body main section[id="mensaje"] .message-form-card textarea {
  min-height: 6.5rem !important;
}

body main section[id="mensaje"] .message-form-card input:focus,
body main section[id="mensaje"] .message-form-card select:focus,
body main section[id="mensaje"] .message-form-card textarea:focus {
  border-color: #ef334c !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(239, 51, 76, 0.08) !important;
}

body main section[id="mensaje"] .contact-send-options {
  display: block !important;
  margin-top: 0.45rem !important;
}

body main section[id="mensaje"] .contact-send-options .send-whatsapp {
  width: 100% !important;
  min-height: 3.75rem !important;
  border-radius: 1rem !important;
  background: linear-gradient(135deg, #ff2e4f, #e61f3d) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 30px rgba(239, 51, 76, 0.25) !important;
  font-size: clamp(1rem, 1.55vw, 1.2rem) !important;
  font-weight: 950 !important;
}

body main section[id="mensaje"] .contact-send-options .send-whatsapp::before {
  content: "" !important;
  width: 1.8rem !important;
  height: 1.8rem !important;
  background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M16.1 3.5A12.1 12.1 0 0 0 5.6 21.6L4 28.5l7-1.6A12.1 12.1 0 1 0 16.1 3.5Zm6.9 17.2c-.3.9-1.7 1.6-2.4 1.7-.6 0-1.4.1-2.2-.2-.5-.1-1.2-.4-2-.8-3.5-1.5-5.8-5-6-5.3-.2-.2-1.4-1.9-1.4-3.6s.9-2.6 1.2-2.9c.3-.4.7-.4 1-.4h.7c.2 0 .5-.1.8.6.3.7 1 2.4 1.1 2.6.1.2.1.4 0 .6-.1.2-.2.4-.4.6l-.5.6c-.2.2-.4.4-.2.7.2.4.9 1.5 2 2.4 1.4 1.2 2.5 1.6 2.9 1.8.4.1.6.1.8-.1.3-.3 1-1.2 1.3-1.6.3-.4.5-.3.9-.2.4.1 2.3 1.1 2.7 1.3.4.2.7.3.8.5.1.2.1 1-.2 1.8Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body main section[id="mensaje"] .message-safe-note {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  margin: 1.05rem auto 0 !important;
  color: #667085 !important;
  font-size: 0.93rem !important;
  font-weight: 650 !important;
  text-align: center !important;
}

body main section[id="mensaje"] .message-safe-note::before {
  content: "" !important;
  width: 1rem !important;
  height: 1rem !important;
  background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='8' width='10' height='7' rx='1.4' stroke='%23667085' stroke-width='1.7'/%3E%3Cpath d='M6.5 8V5.8a2.5 2.5 0 0 1 5 0V8' stroke='%23667085' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

@media (max-width: 767px) {
  body main section[id="mensaje"].message-section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  body main section[id="mensaje"] .message-section-head {
    margin-bottom: 1.3rem !important;
  }

  body main section[id="mensaje"] .message-section-head h2 {
    margin-top: 3.1rem !important;
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
  }

  body main section[id="mensaje"] .message-section-head p {
    font-size: 0.98rem !important;
  }

  body main section[id="mensaje"] .message-form-card {
    padding: 1.2rem !important;
  }

  body main section[id="mensaje"] .message-form-card form {
    grid-template-columns: 1fr !important;
    gap: 0.95rem !important;
  }
}

/* About metrics bar: dark navy and red reference palette. */
body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar {
  width: min(100%, 880px) !important;
  margin-top: clamp(1rem, 1.9vw, 1.45rem) !important;
  padding: 0.95rem 1.15rem !important;
  border-radius: 0.95rem !important;
  background: linear-gradient(135deg, #07162b 0%, #10223a 55%, #08172d 100%) !important;
  box-shadow: 0 16px 38px rgba(7, 22, 43, 0.18) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar > * {
  min-height: 6.1rem !important;
  padding: 0.55rem 0.75rem !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar > * + *::before {
  top: 0.8rem !important;
  bottom: 0.8rem !important;
  background: rgba(255, 255, 255, 0.55) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar > * > .inline-flex {
  width: 2.65rem !important;
  height: 2.65rem !important;
  margin-bottom: 0.35rem !important;
  border: 1.5px solid #ff5360 !important;
  background: rgba(255, 83, 96, 0.08) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar svg {
  width: 1.35rem !important;
  height: 1.35rem !important;
  color: #ff5360 !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar p:first-of-type {
  color: #ff5360 !important;
  font-size: clamp(2rem, 3.1vw, 2.85rem) !important;
  font-weight: 950 !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar p:last-of-type {
  margin-top: 0.3rem !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: clamp(0.78rem, 0.95vw, 0.95rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

@media (max-width: 640px) {
  body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar {
    width: 100% !important;
    padding: 0.85rem !important;
  }
}

/* Request form alignment and compact spacing pass. */
body main section[id="mensaje"].message-section {
  padding-top: clamp(2rem, 3.2vw, 3rem) !important;
  padding-bottom: clamp(1.9rem, 3vw, 2.8rem) !important;
}

body main section[id="mensaje"].message-section::before,
body main section[id="mensaje"].message-section::after {
  transform: scale(0.78) !important;
  opacity: 0.5 !important;
}

body main section[id="mensaje"] .message-section-head {
  margin-bottom: 1.25rem !important;
}

body main section[id="mensaje"] .message-section-head > span {
  min-height: 2.75rem !important;
  margin-bottom: 0.95rem !important;
  padding: 0 1.25rem !important;
  font-size: clamp(0.95rem, 1.25vw, 1.1rem) !important;
}

body main section[id="mensaje"] .message-section-head > span::before {
  width: 1.35rem !important;
  height: 1.35rem !important;
}

body main section[id="mensaje"] .message-section-head > span::after {
  display: none !important;
  content: none !important;
}

body main section[id="mensaje"] .message-section-head h2 {
  margin-top: 0 !important;
  margin-bottom: 0.55rem !important;
  font-size: clamp(2.35rem, 4.2vw, 3.75rem) !important;
  line-height: 1.02 !important;
}

body main section[id="mensaje"] .message-section-head p {
  max-width: 520px !important;
  font-size: clamp(0.92rem, 1.1vw, 1.05rem) !important;
  line-height: 1.4 !important;
}

body main section[id="mensaje"] .message-form-card {
  width: min(100%, 760px) !important;
  padding: clamp(1.35rem, 2.4vw, 2rem) !important;
}

body main section[id="mensaje"] .message-form-card::before,
body main section[id="mensaje"] .message-form-card::after,
body main section[id="mensaje"] .message-form-card h3,
body main section[id="mensaje"] .message-form-card h3::before,
body main section[id="mensaje"] .message-form-card h3::after {
  display: none !important;
  content: none !important;
}

body main section[id="mensaje"] .message-form-card form {
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem 1.3rem !important;
  align-items: start !important;
}

body main section[id="mensaje"] .message-form-card form > .form-extra-field,
body main section[id="mensaje"] .message-form-card form > .space-y-2 {
  min-width: 0 !important;
}

body main section[id="mensaje"] .message-form-card label {
  min-height: 1.35rem !important;
  margin-bottom: 0.42rem !important;
  font-size: 0.82rem !important;
  line-height: 1.15 !important;
}

body main section[id="mensaje"] .message-form-card label::before {
  width: 1rem !important;
  height: 1rem !important;
}

body main section[id="mensaje"] .message-form-card input,
body main section[id="mensaje"] .message-form-card select,
body main section[id="mensaje"] .message-form-card textarea {
  min-height: 2.9rem !important;
  padding: 0.68rem 0.8rem !important;
  font-size: 0.9rem !important;
}

body main section[id="mensaje"] .message-form-card textarea {
  min-height: 5.55rem !important;
}

body main section[id="mensaje"] .contact-send-options .send-whatsapp {
  min-height: 3.2rem !important;
  border-radius: 0.8rem !important;
  font-size: 1rem !important;
}

body main section[id="mensaje"] .message-safe-note {
  margin-top: 0.7rem !important;
  font-size: 0.78rem !important;
}

@media (max-width: 767px) {
  body main section[id="mensaje"].message-section {
    padding-top: 1.8rem !important;
    padding-bottom: 1.8rem !important;
  }

  body main section[id="mensaje"] .message-form-card form {
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }
}

/* Request form final compact pass and field alignment. */
body main section[id="mensaje"].message-section {
  padding-top: clamp(1.35rem, 2.2vw, 2.1rem) !important;
  padding-bottom: clamp(1.35rem, 2.2vw, 2.1rem) !important;
}

body main section[id="mensaje"] .message-section-head {
  margin-bottom: 0.9rem !important;
}

body main section[id="mensaje"] .message-section-head > span {
  min-height: 2.35rem !important;
  margin-bottom: 0.55rem !important;
  padding: 0 1.05rem !important;
}

body main section[id="mensaje"] .message-section-head h2 {
  margin-bottom: 0.4rem !important;
  font-size: clamp(2.15rem, 3.7vw, 3.35rem) !important;
}

body main section[id="mensaje"] .message-section-head p {
  max-width: 470px !important;
  font-size: 0.92rem !important;
  line-height: 1.32 !important;
}

body main section[id="mensaje"] .message-form-card {
  width: min(100%, 720px) !important;
  padding: clamp(1.15rem, 2vw, 1.65rem) !important;
}

body main section[id="mensaje"] .message-form-card form {
  max-width: 590px !important;
  gap: 0.82rem 1.1rem !important;
}

body main section[id="mensaje"] .message-form-card form > .space-y-2,
body main section[id="mensaje"] .message-form-card form > .form-extra-field {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

body main section[id="mensaje"] .message-form-card form.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

body main section[id="mensaje"] .message-form-card label {
  min-height: 1.45rem !important;
  height: 1.45rem !important;
  margin-bottom: 0.32rem !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body main section[id="mensaje"] .message-form-card label span {
  display: inline-flex !important;
  align-items: center !important;
  height: 1.45rem !important;
  margin-left: 0.25rem !important;
  line-height: 1 !important;
}

body main section[id="mensaje"] .message-form-card input,
body main section[id="mensaje"] .message-form-card select {
  height: 2.72rem !important;
  min-height: 2.72rem !important;
}

body main section[id="mensaje"] .message-form-card textarea {
  min-height: 4.95rem !important;
}

body main section[id="mensaje"] .contact-send-options {
  margin-top: 0.2rem !important;
}

body main section[id="mensaje"] .contact-send-options .send-whatsapp {
  min-height: 2.95rem !important;
}

body main section[id="mensaje"] .message-safe-note {
  margin-top: 0.45rem !important;
}

@media (max-width: 767px) {
  body main section[id="mensaje"].message-section {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  body main section[id="mensaje"] .message-section-head h2 {
    font-size: clamp(1.9rem, 9vw, 2.45rem) !important;
  }
}

/* About metrics: uniform red accents like the reference. */
body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar > * > .inline-flex {
  border-color: #ff5360 !important;
  background: rgba(255, 83, 96, 0.08) !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar svg,
body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar p:first-of-type {
  color: #ff5360 !important;
}

body main section[id="nosotros"][data-about-layout="reference"] .about-stats-bar p:first-of-type {
  -webkit-text-fill-color: #ff5360 !important;
}

/* Services section compact rhythm. */
body main section[id="servicios"] {
  padding-top: clamp(2.1rem, 3.2vw, 3.25rem) !important;
  padding-bottom: clamp(2rem, 3vw, 3rem) !important;
}

body main section[id="servicios"] > .container > .text-center {
  margin-bottom: clamp(1.25rem, 2.1vw, 1.75rem) !important;
}

body main section[id="servicios"] > .container > .text-center > .inline-flex:first-child {
  padding: 0.42rem 0.95rem !important;
  font-size: 0.92rem !important;
}

body main section[id="servicios"] > .container > .text-center h2,
body main section[id="servicios"] > .container > .text-center.max-w-3xl h2,
body main section[id="servicios"] > .container > .text-center:has(> .inline-flex:first-child) h2 {
  margin-top: 0.75rem !important;
  font-size: clamp(2.45rem, 4.15vw, 3.85rem) !important;
  line-height: 0.98 !important;
}

body main section[id="servicios"] > .container > .text-center h2::after {
  margin-top: 0.9rem !important;
  height: 3px !important;
}

body main section[id="servicios"] > .container > .text-center p {
  margin-top: 1.15rem !important;
  max-width: 650px !important;
  font-size: 0.98rem !important;
  line-height: 1.38 !important;
}

body main section[id="servicios"] > .container > .grid {
  gap: 1rem !important;
}

body main section[id="servicios"] > .container > .grid > * {
  min-height: 248px !important;
}

body main section[id="servicios"] > .container > .grid > *::before {
  top: 0.9rem !important;
  width: 4.65rem !important;
  height: 4.65rem !important;
}

body main section[id="servicios"] > .container > .grid > * > .relative:first-child {
  height: 96px !important;
}

body main section[id="servicios"] > .container > .grid > * > .p-6 {
  min-height: 146px !important;
  padding: 0.85rem 0.95rem 0.95rem !important;
}

body main section[id="servicios"] > .container > .grid > * h3 {
  margin-bottom: 0.48rem !important;
  font-size: clamp(1.05rem, 1.25vw, 1.18rem) !important;
}

body main section[id="servicios"] > .container > .grid > * p {
  font-size: 0.9rem !important;
  line-height: 1.36 !important;
}

@media (max-width: 640px) {
  body main section[id="servicios"] {
    padding-top: 1.8rem !important;
    padding-bottom: 1.8rem !important;
  }

  body main section[id="servicios"] > .container > .text-center h2,
  body main section[id="servicios"] > .container > .text-center.max-w-3xl h2,
  body main section[id="servicios"] > .container > .text-center:has(> .inline-flex:first-child) h2 {
    font-size: clamp(2rem, 9.5vw, 2.65rem) !important;
  }
}

/* Services cards restored; compact only the heading area. */
body main section[id="servicios"] > .container > .grid {
  gap: clamp(1rem, 1.8vw, 1.35rem) !important;
}

body main section[id="servicios"] > .container > .grid > * {
  min-height: 286px !important;
}

body main section[id="servicios"] > .container > .grid > *::before {
  top: 1.6rem !important;
  width: 5.9rem !important;
  height: 5.9rem !important;
}

body main section[id="servicios"] > .container > .grid > *:nth-child(4)::before {
  top: 1.18rem !important;
  width: 6.5rem !important;
  height: 6.5rem !important;
}

body main section[id="servicios"] > .container > .grid > * > .relative:first-child {
  height: 128px !important;
}

body main section[id="servicios"] > .container > .grid > * > .p-6 {
  min-height: 158px !important;
  padding: 1.05rem 1.05rem 1.15rem !important;
}

body main section[id="servicios"] > .container > .grid > * h3 {
  margin-bottom: 0.72rem !important;
  font-size: clamp(1.18rem, 1.5vw, 1.36rem) !important;
}

body main section[id="servicios"] > .container > .grid > * p {
  font-size: clamp(0.95rem, 1.1vw, 1.04rem) !important;
  line-height: 1.46 !important;
}

body main section[id="servicios"] > .container > .text-center {
  margin-bottom: clamp(1.15rem, 2vw, 1.65rem) !important;
}

/* Services card icons: centered within the dark media band. */
body main section[id="servicios"] > .container > .grid > *::before {
  top: 64px !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 5rem !important;
  height: 5rem !important;
}

body main section[id="servicios"] > .container > .grid > *:nth-child(4)::before {
  top: 64px !important;
  width: 5.35rem !important;
  height: 5.35rem !important;
}

/* Consultation section: reference-style availability and response layout. */
body main section[id="consulta"].consultation-section {
  position: relative !important;
  overflow: hidden !important;
  padding-top: clamp(3rem, 5vw, 5rem) !important;
  padding-bottom: clamp(3rem, 5vw, 5rem) !important;
  background:
    radial-gradient(circle at 6% 14%, rgba(15, 23, 42, 0.05) 0 4.2rem, transparent 4.35rem),
    radial-gradient(circle at 96% 52%, rgba(217, 68, 82, 0.06) 0 12rem, transparent 12.2rem),
    linear-gradient(115deg, #ffffff 0%, #fffafa 54%, #ffffff 100%) !important;
}

body main section[id="consulta"].consultation-section::before {
  content: "" !important;
  position: absolute !important;
  right: 3rem !important;
  top: 2rem !important;
  width: 9rem !important;
  height: 7rem !important;
  background-image: radial-gradient(circle, rgba(15, 23, 42, 0.08) 0 2px, transparent 2.4px) !important;
  background-size: 1rem 1rem !important;
  opacity: 0.8 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

body main section[id="consulta"] > .container {
  position: relative !important;
  z-index: 1 !important;
  max-width: min(1180px, calc(100vw - 3rem)) !important;
}

body main section[id="consulta"] .consultation-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr) !important;
  align-items: center !important;
  gap: clamp(2rem, 4vw, 4.25rem) !important;
}

body main section[id="consulta"] .consultation-copy {
  position: relative !important;
  max-width: 520px !important;
  padding-left: 3.2rem !important;
  color: #111827 !important;
}

body main section[id="consulta"] .consultation-copy::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 5.9rem !important;
  bottom: 3.3rem !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: #ed1f36 !important;
}

body main section[id="consulta"] .consultation-copy > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  min-height: 3.55rem !important;
  margin: 0 0 2.1rem !important;
  padding: 0 1.55rem !important;
  border: 1.5px solid #ff5360 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #111827 !important;
  box-shadow: none !important;
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body main section[id="consulta"] .consultation-copy > span::before {
  content: "" !important;
  width: 1.65rem !important;
  height: 1.65rem !important;
  background: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='12' stroke='%23ED1F36' stroke-width='2.5'/%3E%3Cpath d='M15 8v7l5 3' stroke='%23ED1F36' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body main section[id="consulta"] .consultation-copy h2 {
  margin: 0 0 1.55rem !important;
  color: #050505 !important;
  font-size: clamp(4rem, 7vw, 6.5rem) !important;
  line-height: 0.96 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body main section[id="consulta"] .consultation-copy h2::after {
  display: none !important;
}

body main section[id="consulta"] .consultation-copy p {
  max-width: 470px !important;
  margin: 0 !important;
  color: #3f3f46 !important;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem) !important;
  line-height: 1.45 !important;
  font-weight: 450 !important;
}

body main section[id="consulta"] .consultation-card {
  position: relative !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  padding: clamp(2rem, 4vw, 3.1rem) !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  border-radius: 1.8rem !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(12px) !important;
}

body main section[id="consulta"] .consultation-card-head {
  display: grid !important;
  grid-template-columns: 5.3rem minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 1.55rem !important;
  margin-bottom: 1.6rem !important;
}

body main section[id="consulta"] .consultation-clock {
  display: grid !important;
  width: 5.3rem !important;
  height: 5.3rem !important;
  place-items: center !important;
  border-radius: 999px !important;
  background:
    url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='23' cy='23' r='19' stroke='%23ED1F36' stroke-width='4'/%3E%3Cpath d='M23 12v12l8 5' stroke='%23ED1F36' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 3.2rem 3.2rem no-repeat,
    #fdebee !important;
}

body main section[id="consulta"] .consultation-card h3 {
  margin: 0 !important;
  color: #050505 !important;
  font-size: clamp(1.55rem, 2.4vw, 2.25rem) !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

body main section[id="consulta"] .consultation-card h3::after {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  margin-top: 1.5rem !important;
  background: linear-gradient(90deg, #ed1f36 0 4.5rem, rgba(15, 23, 42, 0.16) 4.5rem 100%) !important;
}

body main section[id="consulta"] .consultation-hours {
  display: grid !important;
  gap: 0 !important;
}

body main section[id="consulta"] .consultation-hour-row {
  display: grid !important;
  grid-template-columns: 4rem minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 1.1rem !important;
  min-height: 4.9rem !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.16) !important;
}

body main section[id="consulta"] .consultation-hour-row:last-child {
  border-bottom: 0 !important;
}

body main section[id="consulta"] .consultation-hour-icon {
  display: grid !important;
  width: 3.1rem !important;
  height: 3.1rem !important;
  place-items: center !important;
  border-radius: 0.72rem !important;
  background-color: #fdebee !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 1.85rem 1.85rem !important;
}

body main section[id="consulta"] .consultation-hour-icon.calendar {
  background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='8' width='22' height='20' rx='2' stroke='%23ED1F36' stroke-width='2.6'/%3E%3Cpath d='M11 5v6M23 5v6M7 14h20M12 20h2M18 20h2M12 24h2M18 24h2' stroke='%23ED1F36' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body main section[id="consulta"] .consultation-hour-icon.shield {
  background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 5 27 9v7c0 7-4 11.5-10 14-6-2.5-10-7-10-14V9l10-4Z' stroke='%23ED1F36' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M17 13v8M13 17h8' stroke='%23ED1F36' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body main section[id="consulta"] .consultation-hour-row p,
body main section[id="consulta"] .consultation-hour-row strong {
  margin: 0 !important;
  color: #111111 !important;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem) !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

body main section[id="consulta"] .consultation-hour-row strong {
  justify-self: end !important;
}

body main section[id="consulta"] .contact-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  min-height: 4.35rem !important;
  margin-top: 1.45rem !important;
  padding: 0 1.1rem !important;
  border-radius: 0.85rem !important;
  background: linear-gradient(135deg, #ff061f, #e60018) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 34px rgba(237, 31, 54, 0.24) !important;
  font-size: clamp(1.05rem, 1.75vw, 1.5rem) !important;
  font-weight: 950 !important;
  text-align: center !important;
}

body main section[id="consulta"] .contact-cta-btn::before {
  content: "" !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
  background: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M21.1 4.5A15.9 15.9 0 0 0 7.4 28.2L5.4 37l8.9-2.1A15.9 15.9 0 1 0 21.1 4.5Zm8.9 22.6c-.4 1.1-2.2 2.1-3.1 2.2-.8.1-1.8.1-2.9-.2-.7-.2-1.5-.5-2.7-1-4.6-2-7.6-6.6-7.8-6.9-.2-.3-1.9-2.5-1.9-4.8s1.2-3.4 1.6-3.8c.4-.4.9-.6 1.3-.6h.9c.3 0 .7-.1 1 .8.4.9 1.3 3.1 1.4 3.4.1.2.2.5 0 .8-.1.3-.2.5-.5.8l-.7.8c-.2.3-.5.5-.2.9.2.4 1.2 1.9 2.6 3.1 1.8 1.6 3.3 2.1 3.8 2.3.5.2.8.2 1.1-.1.4-.4 1.3-1.5 1.7-2 .4-.5.7-.4 1.2-.3.5.2 3 1.4 3.6 1.7.5.3.9.4 1 .7.1.2.1 1.3-.3 2.4Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

@media (max-width: 980px) {
  body main section[id="consulta"] .consultation-shell {
    grid-template-columns: 1fr !important;
  }

  body main section[id="consulta"] .consultation-copy {
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  body main section[id="consulta"].consultation-section {
    padding-top: 2.2rem !important;
    padding-bottom: 2.2rem !important;
  }

  body main section[id="consulta"] > .container {
    max-width: min(100%, calc(100vw - 1.2rem)) !important;
  }

  body main section[id="consulta"] .consultation-copy {
    padding-left: 1.15rem !important;
  }

  body main section[id="consulta"] .consultation-copy::before {
    top: 4.6rem !important;
    bottom: 1rem !important;
    width: 3px !important;
  }

  body main section[id="consulta"] .consultation-copy > span {
    min-height: 2.75rem !important;
    margin-bottom: 1rem !important;
    font-size: 0.98rem !important;
  }

  body main section[id="consulta"] .consultation-copy h2 {
    font-size: clamp(2.65rem, 14vw, 4rem) !important;
  }

  body main section[id="consulta"] .consultation-card {
    padding: 1.25rem !important;
    border-radius: 1rem !important;
  }

  body main section[id="consulta"] .consultation-card-head {
    grid-template-columns: 3.6rem minmax(0, 1fr) !important;
    gap: 0.85rem !important;
  }

  body main section[id="consulta"] .consultation-clock {
    width: 3.6rem !important;
    height: 3.6rem !important;
    background-size: 2.2rem 2.2rem, auto !important;
  }

  body main section[id="consulta"] .consultation-hour-row {
    grid-template-columns: 3rem minmax(0, 1fr) !important;
    gap: 0.75rem !important;
  }

  body main section[id="consulta"] .consultation-hour-row strong {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

/* Consultation section correction: balanced columns and readable schedule rows. */
body main section[id="consulta"] > .container {
  max-width: min(1080px, calc(100vw - 2.5rem)) !important;
}

body main section[id="consulta"] .consultation-shell {
  grid-template-columns: minmax(380px, 0.95fr) minmax(430px, 1.05fr) !important;
  gap: clamp(2.8rem, 5vw, 4.5rem) !important;
  align-items: center !important;
}

body main section[id="consulta"] .consultation-copy {
  max-width: 480px !important;
  padding-left: 2.6rem !important;
}

body main section[id="consulta"] .consultation-copy::before {
  top: 4.8rem !important;
  bottom: 2.4rem !important;
}

body main section[id="consulta"] .consultation-copy > span {
  margin-bottom: 1.45rem !important;
}

body main section[id="consulta"] .consultation-copy h2 {
  font-size: clamp(3.1rem, 5.6vw, 5rem) !important;
  line-height: 0.98 !important;
  max-width: 470px !important;
}

body main section[id="consulta"] .consultation-copy p {
  max-width: 380px !important;
  font-size: clamp(1rem, 1.25vw, 1.15rem) !important;
}

body main section[id="consulta"] .consultation-card {
  max-width: 520px !important;
  padding: clamp(1.55rem, 3vw, 2.35rem) !important;
}

body main section[id="consulta"] .consultation-card-head {
  grid-template-columns: 4.35rem minmax(0, 1fr) !important;
  gap: 1.05rem !important;
  margin-bottom: 1.15rem !important;
}

body main section[id="consulta"] .consultation-clock {
  width: 4.35rem !important;
  height: 4.35rem !important;
  background-size: 2.55rem 2.55rem, auto !important;
}

body main section[id="consulta"] .consultation-card h3 {
  font-size: clamp(1.45rem, 2vw, 1.95rem) !important;
}

body main section[id="consulta"] .consultation-card h3::after {
  margin-top: 1rem !important;
}

body main section[id="consulta"] .consultation-hour-row {
  grid-template-columns: 3.25rem minmax(170px, 1fr) minmax(130px, auto) !important;
  gap: 0.85rem !important;
  min-height: 4rem !important;
}

body main section[id="consulta"] .consultation-hour-icon {
  width: 2.55rem !important;
  height: 2.55rem !important;
  background-size: 1.5rem 1.5rem !important;
}

body main section[id="consulta"] .consultation-hour-row p,
body main section[id="consulta"] .consultation-hour-row strong {
  font-size: clamp(0.98rem, 1.2vw, 1.16rem) !important;
}

body main section[id="consulta"] .consultation-hour-row p {
  white-space: nowrap !important;
}

body main section[id="consulta"] .contact-cta-btn {
  min-height: 3.65rem !important;
  margin-top: 1.1rem !important;
  font-size: clamp(0.98rem, 1.3vw, 1.18rem) !important;
}

body main section[id="consulta"] .contact-cta-btn::before {
  width: 1.8rem !important;
  height: 1.8rem !important;
}

@media (max-width: 980px) {
  body main section[id="consulta"] .consultation-shell {
    grid-template-columns: 1fr !important;
    gap: 1.6rem !important;
  }

  body main section[id="consulta"] .consultation-copy,
  body main section[id="consulta"] .consultation-card {
    max-width: 720px !important;
    width: 100% !important;
  }
}

/* Consultation copy: smaller and further left. */
body main section[id="consulta"] > .container {
  max-width: min(1120px, calc(100vw - 2rem)) !important;
}

body main section[id="consulta"] .consultation-shell {
  grid-template-columns: minmax(330px, 0.86fr) minmax(430px, 1.08fr) !important;
  gap: clamp(2.4rem, 5.4vw, 5.4rem) !important;
}

body main section[id="consulta"] .consultation-copy {
  max-width: 430px !important;
  padding-left: 2.25rem !important;
  justify-self: start !important;
  margin-left: clamp(-1.8rem, -2vw, -0.6rem) !important;
}

body main section[id="consulta"] .consultation-copy h2 {
  max-width: 390px !important;
  font-size: clamp(2.65rem, 4.6vw, 4.2rem) !important;
  line-height: 1 !important;
}

body main section[id="consulta"] .consultation-copy p {
  max-width: 350px !important;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem) !important;
}

@media (max-width: 980px) {
  body main section[id="consulta"] .consultation-copy {
    margin-left: 0 !important;
  }
}

/* ==========================================
   CONSTRUCTION GATE — puerta de acceso
   ========================================== */

html.gate-active,
html.gate-active body {
  overflow: hidden;
}

.construction-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background:
    radial-gradient(circle at 18% 18%, rgba(217, 68, 82, 0.22) 0 14rem, transparent 14.2rem),
    radial-gradient(circle at 82% 82%, rgba(217, 68, 82, 0.14) 0 10rem, transparent 10.2rem),
    radial-gradient(circle at 62% 8%, rgba(255, 255, 255, 0.05) 0 8rem, transparent 8.2rem),
    linear-gradient(135deg, #09101e 0%, #111827 46%, #1c0d12 100%);
  animation: gate-fade-in 0.45s ease both;
}

@keyframes gate-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gate-fade-out {
  to { opacity: 0; transform: scale(1.03); }
}

.construction-gate.gate-leaving {
  animation: gate-fade-out 0.44s ease forwards;
  pointer-events: none;
}

@keyframes gate-shake {
  0%, 100% { transform: translateX(0); }
  15%  { transform: translateX(-10px); }
  35%  { transform: translateX(10px); }
  55%  { transform: translateX(-6px); }
  75%  { transform: translateX(6px); }
}

.construction-gate.gate-shake .gate-inner {
  animation: gate-shake 0.52s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.gate-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.05rem;
  width: min(420px, 100%);
  text-align: center;
}

/* Logo */
@keyframes gate-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

.gate-logo {
  width: clamp(78px, 16vw, 118px);
  height: clamp(78px, 16vw, 118px);
  object-fit: contain;
  border-radius: 1.35rem;
  box-shadow:
    0 14px 44px rgba(217, 68, 82, 0.32),
    0 0 0 2px rgba(217, 68, 82, 0.22);
  animation: gate-float 3.8s ease-in-out infinite;
}

/* Badge */
.gate-badge {
  display: inline-block;
  padding: 0.24rem 0.8rem;
  border-radius: 999px;
  background: rgba(217, 68, 82, 0.16);
  border: 1px solid rgba(217, 68, 82, 0.32);
  color: #f87585;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Title */
.gate-title {
  margin: 0;
  font-size: clamp(2rem, 5.5vw, 2.8rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.03em;
}

.gate-title span {
  color: var(--brand-red);
}

/* Subtitle */
.gate-subtitle {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.48);
  max-width: 300px;
}

/* Form */
.gate-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin-top: 0.35rem;
}

.gate-input {
  width: 100%;
  max-width: 290px;
  padding: 0.72rem 1.1rem;
  border-radius: 0.9rem;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  text-align: center;
  letter-spacing: 0.1em;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.gate-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0;
}

.gate-input:focus {
  border-color: rgba(217, 68, 82, 0.65);
  background: rgba(217, 68, 82, 0.07);
  box-shadow: 0 0 0 3px rgba(217, 68, 82, 0.14);
}

.gate-btn {
  padding: 0.72rem 2.2rem;
  border-radius: 0.9rem;
  border: none;
  background: linear-gradient(135deg, #d94452 0%, #b83040 100%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  box-shadow: 0 8px 28px rgba(217, 68, 82, 0.4);
}

.gate-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 14px 36px rgba(217, 68, 82, 0.52);
}

.gate-btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.gate-error {
  min-height: 1.1rem;
  margin: 0;
  font-size: 0.76rem;
  font-weight: 800;
  color: #f87585;
}

/* Social links */
.gate-links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.45rem;
}

.gate-link {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.44rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.18s ease;
}

.gate-link:hover {
  transform: translateY(-2px);
}

.gate-link-wa:hover {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.32);
  color: #25d366;
}

.gate-link-ig:hover {
  background: rgba(193, 53, 132, 0.12);
  border-color: rgba(193, 53, 132, 0.32);
  color: #e879b0;
}

.gate-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ==========================================
   SEND OPTIONS — botones con íconos SVG
   ========================================== */

.contact-send-options button,
.message-form-card .contact-send-options button,
body main section[id="mensaje"] .contact-send-options button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3em !important;
}

body main section[id="mensaje"] .contact-send-options .send-email {
  min-height: 3.2rem !important;
  border-radius: 0.8rem !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #4285f4 0%, #1967d2 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow:
    0 6px 18px rgba(66, 133, 244, 0.36),
    0 12px 28px rgba(66, 133, 244, 0.18) !important;
  width: 100% !important;
  margin-top: 0.5rem !important;
}

body main section[id="mensaje"] .contact-send-options .send-email:hover {
  filter: saturate(1.08) brightness(1.04) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================
   SECTION PALETTE v2 — diferenciacion fuerte
   ==========================================
   Cada seccion tiene un color propio claramente
   reconocible al hacer scroll.
   ========================================== */

/* ── 1  HERO — crema cálido / rosa suave ── */
main > section:first-child {
  background:
    radial-gradient(ellipse 72% 62% at 4% 10%, rgba(217, 68, 82, 0.30), transparent 58%),
    radial-gradient(ellipse 58% 48% at 96% 90%, rgba(232, 93, 117, 0.22), transparent 56%),
    linear-gradient(148deg, #ffedf2 0%, #fffcfd 50%, #fff5f8 100%) !important;
}

/* ── 2  SERVICIOS — azul real ── */
section[id="servicios"],
main > section:nth-child(2) {
  background:
    radial-gradient(ellipse 70% 60% at 94% 6%, rgba(37, 99, 235, 0.26), transparent 58%),
    radial-gradient(ellipse 54% 46% at 6% 94%, rgba(59, 130, 246, 0.20), transparent 56%),
    linear-gradient(152deg, #dbe8ff 0%, #f2f7ff 52%, #e4edff 100%) !important;
}

section[id="servicios"]::before,
main > section:nth-child(2)::before {
  background: linear-gradient(90deg, transparent 8%, rgba(37, 99, 235, 0.55) 50%, transparent 92%) !important;
  height: 2px !important;
}

/* ── 3  BENEFICIOS — verde menta ── */
main > section:nth-child(3) {
  background:
    radial-gradient(ellipse 70% 60% at 6% 8%, rgba(22, 163, 74, 0.26), transparent 58%),
    radial-gradient(ellipse 54% 46% at 94% 92%, rgba(34, 197, 94, 0.18), transparent 56%),
    linear-gradient(152deg, #d4f5e4 0%, #f0fdf7 52%, #dff9ed 100%) !important;
}

main > section:nth-child(3)::before {
  background: linear-gradient(90deg, transparent 8%, rgba(22, 163, 74, 0.55) 50%, transparent 92%) !important;
  height: 2px !important;
}

/* ── 4  NOSOTROS — lavanda cálida ── */
section[id="nosotros"],
main > section:nth-child(4) {
  background:
    radial-gradient(ellipse 70% 60% at 94% 6%, rgba(109, 40, 217, 0.20), transparent 58%),
    radial-gradient(ellipse 54% 46% at 6% 94%, rgba(139, 92, 246, 0.16), transparent 56%),
    linear-gradient(152deg, #e2d9ff 0%, #f6f2ff 52%, #e9e0ff 100%) !important;
}

section[id="nosotros"]::before,
main > section:nth-child(4)::before {
  background: linear-gradient(90deg, transparent 8%, rgba(109, 40, 217, 0.50) 50%, transparent 92%) !important;
  height: 2px !important;
}

/* ── 5  FORMULARIO — ámbar dorado ── */
section[id="mensaje"],
main > section:nth-child(5) {
  background:
    radial-gradient(ellipse 70% 60% at 8% 8%, rgba(180, 83, 9, 0.22), transparent 58%),
    radial-gradient(ellipse 54% 46% at 92% 92%, rgba(217, 119, 6, 0.16), transparent 56%),
    linear-gradient(152deg, #ffedb8 0%, #fffdf4 52%, #fef6d4 100%) !important;
}

section[id="mensaje"]::before,
main > section:nth-child(5)::before {
  background: linear-gradient(90deg, transparent 8%, rgba(180, 83, 9, 0.50) 50%, transparent 92%) !important;
  height: 2px !important;
}

/* ── 6  CONSULTA — cian oceánico ── */
section[id="consulta"] {
  background:
    radial-gradient(ellipse 70% 60% at 94% 6%, rgba(8, 145, 178, 0.26), transparent 58%),
    radial-gradient(ellipse 54% 46% at 6% 94%, rgba(6, 182, 212, 0.20), transparent 56%),
    linear-gradient(152deg, #cef4fc 0%, #f0fcff 52%, #d8f8fd 100%) !important;
}

section[id="consulta"]::before {
  background: linear-gradient(90deg, transparent 8%, rgba(8, 145, 178, 0.55) 50%, transparent 92%) !important;
  height: 2px !important;
}

/* ── 7  CONTACTO — rosa intenso ── */
section[id="contacto"],
section[id="contacto"].contact-info-section {
  background:
    radial-gradient(ellipse 70% 60% at 6% 8%, rgba(217, 68, 82, 0.32), transparent 58%),
    radial-gradient(ellipse 54% 46% at 94% 92%, rgba(217, 68, 82, 0.22), transparent 56%),
    linear-gradient(152deg, #ffd6dc 0%, #fff7f9 52%, #ffd8de 100%) !important;
}

section[id="contacto"]::before,
section[id="contacto"].contact-info-section::before {
  background: linear-gradient(90deg, transparent 8%, rgba(217, 68, 82, 0.65) 50%, transparent 92%) !important;
  height: 2px !important;
}

/* ── Sombra de separacion entre secciones ── */
main > section {
  box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.06) !important;
}

/* ── Cabeceras: heredan un toque del color de su seccion ── */
section[id="servicios"] h2 span,
section[id="servicios"] .text-\[\#D94452\] {
  color: #1d4ed8 !important;
}

section[id="nosotros"] h2 span,
section[id="nosotros"] .text-\[\#D94452\] {
  color: #6d28d9 !important;
}

section[id="mensaje"] h2 span,
section[id="mensaje"] .text-\[\#D94452\] {
  color: #b45309 !important;
}

section[id="consulta"] h2 span,
section[id="consulta"] .text-\[\#D94452\] {
  color: #0369a1 !important;
}