.contact-us-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
    box-sizing: border-box;
    padding: 24px 72px 64px 72px;
}

.navigation {
    background: none;
}

/* Scoped override SOLO para el <section> de contact-us (marcado con
   `.layout-isolated` en el template). El resto de `.section` del sitio
   conserva su comportamiento flex original.

   Por qué bloque en vez de flex: los elementos fantasma inyectados por
   extensiones del browser (Grammarly, LanguageTool, password managers) se
   convertían en flex items adicionales y rompían `justify-content: center`,
   desplazando el contenido ~30px a la izquierda al hacer focus en el textarea.
   Con `display: block` + `margin: 0 auto` sobre el hijo, el centrado no
   depende de contar items y es inmune a nodos inyectados. */
.section.layout-isolated {
  display: block;
  width: 100%;
  align-self: stretch;
  position: relative;
}

.section.layout-isolated > .contact-us-content {
  /* `width: fit-content` + `margin: 0 auto` reproduce el comportamiento
     original donde `.contact-us-content` era flex item sin grow: se
     dimensionaba al contenido más ancho (en este caso `.contact-us-panels`
     con `width: min(100%, 720px)`) + padding lateral.
     Ventaja: no hardcodeamos un ancho — si mañana cambia el max del panel
     o el padding, esto sigue correcto. */
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.triple-x-pattern {
  position: absolute;
  top: 48px;
  left: 72px;
  display: flex;
  justify-content: flex-start;
}

.phones-pattern {
  position: absolute;
  right: 72px;
  top: 200px;
  display: flex;
  justify-content: flex-end;
}

.dots-left-pattern {
  position: absolute;
  left: 72px;
  top: 370px;
  display: flex;
  justify-content: flex-start;
}

.contact-us-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    width: 100%;
}

.contact-us-panels {
  width: min(100%, 720px);
  margin: 0 auto;
}

.contact-us-panel {
  display: none;
  justify-content: center;
  width: 100%;
}

.contact-us-panel.is-active {
  display: flex;
}

.input-with-suffix-icon,
.textarea-with-suffix-icon {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  contain: layout;
  isolation: isolate;
}

/* Caja cerrada: solo input/textarea + su icon suffix participan del layout.
   Cualquier nodo inyectado por extensiones del browser (correctores, traductores,
   password managers, etc.) queda fuera de flujo sin afectar el contenedor. */
.input-with-suffix-icon > :not(input):not(.input-suffix-icon),
.textarea-with-suffix-icon > :not(textarea):not(.textarea-suffix-icon) {
  position: absolute;
  inset: 0;
  pointer-events: none;
  grid-area: unset;
}

.contact-us-form input,
.contact-us-form textarea {
    width: 100%;
    padding: 12px 16px 12px 16px;
    border-radius: 24px;
    border: 1px solid var(--light-outlineVariant);
    margin-bottom: 16px;
    font-size: var(--body-body-large-font-size);
    font-family: var(--body-body-large-font-family);
    font-weight: var(--body-body-large-font-weight);
    line-height: var(--body-body-large-line-height);
    font-style: var(--body-body-large-font-style);
    resize: none;
    padding-right: 48px;
}

.contact-us-form input::placeholder,
.contact-us-form textarea::placeholder {
    color: var(--light-outline);
    font-family: var(--body-body-large-font-family);
    font-style: var(--body-body-large-font-style);
    font-weight: var(--body-body-large-font-weight);
}

.contact-us-form input,
.contact-us-form textarea {
  border: 1px solid var(--light-outlineVariant);
  box-sizing: border-box;
  transition: box-shadow 0.2s ease;
}

.contact-us-form input:hover,
.contact-us-form textarea:hover {
  border: 1px solid transparent;
  box-shadow: 0 0 0 2px var(--light-onSurfaceVariant);
}

.contact-us-form input:focus,
.contact-us-form textarea:focus {
  border: 1px solid transparent;
  box-shadow: 0 0 0 2px var(--light-onSurface);
  outline: none;
}

.contact-us-form input.input-error,
.contact-us-form input.input-error:focus,
.contact-us-form textarea.input-error,
.contact-us-form textarea.input-error:focus {
  border: 1px solid transparent;
  box-shadow: 0 0 0 2px var(--light-error);
}

.error-text {
  font-family: var(--label-label-large-font-family);
  font-size: var(--label-label-large-font-size);
  line-height: var(--label-label-large-line-height);
  font-weight: var(--label-label-large-font-weight);
  color: var(--light-error);
  margin-top: -8px;
  margin-bottom: 16px;
  margin-left: 16px;
  display: none;
}

.touch-highlight {
  color: var(--light-secondary);
  font-family: 'Gentium Book Basic', serif;
  font-size: 52px;
  font-style: italic;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -1px;
}

.input-suffix-icon,
.textarea-suffix-icon {
    position: absolute;
    right: 16px;
    top: 10px;
    width: 24px;
    height: 24px;
    pointer-events: none;
    background-color: var(--light-outlineVariant);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.icon-person {
    mask-image: url('../images/person-suffix.svg');
    -webkit-mask-image: url('../images/person-suffix.svg');
}

.icon-mail {
    mask-image: url('../images/mail-suffix.svg');
    -webkit-mask-image: url('../images/mail-suffix.svg');
}

.icon-message {
    mask-image: url('../images/message-suffix.svg');
    -webkit-mask-image: url('../images/message-suffix.svg');
}

.input-with-suffix-icon:focus-within .input-suffix-icon,
.textarea-with-suffix-icon:focus-within .textarea-suffix-icon {
    background-color: var(--light-onSurface);
}

.input-error ~ .input-suffix-icon,
.input-error ~ .textarea-suffix-icon,
.input-error:focus ~ .input-suffix-icon,
.input-error:focus ~ .textarea-suffix-icon {
    background-color: var(--light-error);
}

.textarea-with-suffix-icon .textarea-suffix-icon {
    position: absolute;
    right: 16px;
    top: 10px;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.contact-us-form label {
    margin-bottom: 8px;
    font-family: var(--body-body-medium-font-family);
    font-size: var(--body-body-medium-font-size);
    line-height: var(--body-body-medium-line-height);
    font-weight: var(--body-body-medium-font-weight);
    font-style: var(--body-body-medium-font-style);
    color: var(--light-onSurfaceVariant);
}

.contact-us-options {
  display: flex;
  width: min(100%, 720px);
  gap: 8px;
  justify-content: center;
  padding-top: 24px;
  margin: 0 auto;
}

.contact-us-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  gap: 8px;
  min-width: 160px;
  height: 48px;
  padding: 12px 24px 12px 16px;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-shadow: none;

    /* TYPOGRAPHY */
  font-family: var(--label-label-large-font-family);
  font-size: var(--label-label-large-font-size);
  font-weight: var(--label-label-large-font-weight);
  line-height: var(--label-label-large-line-height);

   /* ELEVATION */
  --md-filled-tonal-button-container-elevation: 0;
  --md-filled-tonal-button-hover-container-elevation: 0;
  --md-filled-tonal-button-focus-container-elevation: 0;
  --md-filled-tonal-button-pressed-container-elevation: 0;
  --md-filled-tonal-button-disabled-container-elevation: 0;

   /* TEXT COLORS */
  --md-filled-tonal-button-label-text-color: var(--btn-text-color);
  --md-filled-tonal-button-hover-label-text-color: var(--btn-text-color);
  --md-filled-tonal-button-focus-label-text-color: var(--btn-text-color);
  --md-filled-tonal-button-pressed-label-text-color: var(--btn-text-color);

  /* ICON COLORS */
  --md-filled-tonal-button-icon-color: var(--btn-text-color);
  --md-filled-tonal-button-hover-icon-color: var(--btn-text-color);
  --md-filled-tonal-button-focus-icon-color: var(--btn-text-color);
  --md-filled-tonal-button-pressed-icon-color: var(--btn-text-color);

  --contact-option-bg: var(--light-secondaryContainer);
  --contact-option-text: var(--light-onSecondaryContainer);
  --contact-option-state-layer: black;

  --md-filled-tonal-button-state-layer-color: var(--contact-option-state-layer);
  --md-filled-tonal-button-hover-state-layer-color: var(--contact-option-state-layer);
  --md-filled-tonal-button-focus-state-layer-color: var(--contact-option-state-layer);
  --md-filled-tonal-button-pressed-state-layer-color: var(--contact-option-state-layer);
  --md-filled-tonal-button-hover-state-layer-opacity: 0.06;
  --md-filled-tonal-button-pressed-state-layer-opacity: 0.10;

  --md-filled-tonal-button-container-color: var(--contact-option-bg);
  --btn-text-color: var(--contact-option-text);
  --md-filled-tonal-button-icon-color: var(--contact-option-text);
}

.contact-us-option.is-selected {
  --contact-option-bg: var(--light-secondary);
  --contact-option-text: var(--light-onSecondary);
  --contact-option-state-layer: white;
  --md-filled-tonal-button-hover-state-layer-opacity: 0.08;
  --md-filled-tonal-button-pressed-state-layer-opacity: 0.12;
}

.contact-us-option-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.contact-us-option-icon-image {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.contact-us-option-icon-mail {
  mask-image: url('../images/mailIcon.svg');
  -webkit-mask-image: url('../images/mailIcon.svg');
}

.contact-us-option-icon-phone {
  mask-image: url('../images/phoneIcon.svg');
  -webkit-mask-image: url('../images/phoneIcon.svg');
}

.contact-us-option-icon-whatsapp {
  mask-image: url('../images/whatsappIcon.svg');
  -webkit-mask-image: url('../images/whatsappIcon.svg');
}

.contact-us-panel .btn.contact-us-action-btn {
  margin: 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-self: stretch;
  justify-content: flex-start;
  position: relative;
  padding-right: 72px;
}

.contact-us-panel .btn.contact-us-action-btn--expanded {
  height: 72px;
}

.contact-us-panel .btn.contact-us-action-btn::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background-image: url('../images/hyperlink-onprimary.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.contact-us-option .contact-us-option-icon {
  color: var(--contact-option-text);
}

.contact-us-action-btn--whatsapp .contact-us-option-icon-image-whatsapp {
  filter: brightness(0) invert(1);
}

.contact-us-action-btn--phone {
  --md-filled-tonal-button-container-color: var(--light-primary);
  --btn-text-color: var(--light-onPrimary);
  --md-filled-tonal-button-icon-color: var(--light-onPrimary);
}

.contact-us-action-btn--whatsapp {
  --md-filled-tonal-button-container-color:var(--fixed-whatsapp);
  --btn-text-color: var(--light-onPrimary);
  --md-filled-tonal-button-icon-color: var(--light-onPrimary);
}

.contact-us-action-btn .contact-us-option-icon {
  color: var(--btn-text-color);
}

.contact-us-option:nth-child(1) {
  border-radius: 24px 8px 8px 24px;
}

.contact-us-option:nth-child(2) {
  border-radius: 8px;
}

.contact-us-option:nth-child(3) {
  border-radius: 8px 24px 24px 8px;
}

.contact-us-title {
  color: var(--light-secondary);
  font-family: var(--display-display-medium-font-family);
  font-size: var(--display-display-medium-font-size);
  line-height: var(--display-display-medium-line-height);
  font-weight: var(--display-display-medium-font-weight);
  font-style: var(--display-display-medium-font-style);
  text-align: center;
}



.snackbar {
  visibility: hidden;
  opacity: 0;
  display: flex;
  width: fit-content;
  max-width: 500px;
  margin: 12px auto 0;
  background-color: var(--light-inverseSurface);
  color: var(--light-outline);
  text-align: center;
  border-radius: 16px;
  padding: 16px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px -8px rgba(41, 57, 89, 0.40);
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-family: var(--body-body-medium-font-family);
  font-size: var(--body-body-medium-font-size);
  font-weight: var(--body-body-medium-font-weight);
  line-height: var(--body-body-medium-line-height);
  font-style: var(--body-body-medium-font-style);
}

.snackbar-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.snackbar.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .contact-us-content {
    width: 100%;
    padding: 24px 24px 56px 24px;
  }

  .section.layout-isolated > .contact-us-content {
    width: 100%;
    max-width: 500px;
  }

  .contact-us-options {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .contact-us-panels {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .contact-us-option {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    justify-content: center;
  }

  .contact-us-option:nth-child(1),
  .contact-us-option:nth-child(2),
  .contact-us-option:nth-child(3) {
    border-radius: 24px;
  }

  .triple-x-pattern {
    display: none;
  }

  .phones-pattern {
    display: none;
  }

  .dots-left-pattern {
    display: none;
  }
}