#navbar-container, #contact-form-container, #wa-icon-container, #footer-container {
  width: 100%;
  display: contents;
}

html {
  scroll-behavior: smooth;
}

:root {
  --dl-layout-size-large: 144px;
  --dl-layout-size-small: 48px;
  --dl-layout-space-unit: 16px;
  --dl-layout-size-medium: 96px;
  --dl-layout-size-xlarge: 192px;
  --dl-layout-size-xsmall: 16px;
  --dl-color-theme-accent1: #CCC7D6;
  --dl-color-theme-accent2: #AEA7BF;
  --dl-layout-radius-round: 50%;
  --dl-layout-size-xxlarge: 288px;
  --dl-color-theme-primary1: #b00000ff;
  --dl-color-theme-primary2: #698a93;
  --dl-layout-size-maxwidth: 1400px;
  --dl-layout-radius-radius2: 2px;
  --dl-layout-radius-radius4: 4px;
  --dl-layout-radius-radius8: 8px;
  --dl-layout-space-halfunit: 8px;
  --dl-layout-space-sixunits: 96px;
  --dl-layout-space-twounits: 32px;
  --dl-color-theme-secondary1: #E6EBE0;
  --dl-color-theme-secondary2: #d9ded3;
  --dl-layout-space-fiveunits: 80px;
  --dl-layout-space-fourunits: 64px;
  --dl-layout-space-threeunits: 48px;
  --dl-color-theme-neutral-dark: #000000;
  --dl-layout-radius-cardradius: 8px;
  --dl-color-theme-neutral-light: #FFFFFF;
  --dl-layout-radius-imageradius: 8px;
  --dl-layout-radius-inputradius: 24px;
  --dl-layout-radius-buttonradius: 24px;
  --dl-layout-space-oneandhalfunits: 24px;
}

.button {
  color: var(--dl-color-theme-neutral-dark);
  display: inline-block;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-theme-neutral-dark);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-theme-neutral-light);
}

.input {
  color: var(--dl-color-theme-neutral-dark);
  cursor: auto;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-theme-neutral-dark);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-theme-neutral-light);
}

.textarea {
  color: var(--dl-color-theme-neutral-dark);
  cursor: auto;
  padding: 0.5rem;
  border-color: var(--dl-color-theme-neutral-dark);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-theme-neutral-light);
}

.list {
  width: 100%;
  margin: 1em 0px 1em 0px;
  display: block;
  padding: 0px 0px 0px 1.5rem;
  list-style-type: none;
  list-style-position: outside;
}

.list-item {
  display: list-item;
}

.teleport-show {
  display: flex !important;
  transform: translateY(0%) !important;
}

.thq-input {
  color: var(--dl-color-theme-neutral-dark);
  cursor: auto;
  outline: none;
  padding: 0.5rem 1rem;
  align-self: stretch;
  text-align: center;
  border-color: var(--dl-color-theme-neutral-dark);
  border-width: 1px;
  border-radius: var(--dl-layout-radius-inputradius);
  background-color: var(--dl-color-theme-neutral-light);
}

.thq-input:focus {
  outline: 1px solid var(--dl-color-theme-primary1);
}

.thq-button-filled {
  gap: var(--dl-layout-space-halfunit);
  fill: var(--dl-color-theme-primary1);
  color: var(--dl-color-theme-primary1);
  cursor: pointer;
  display: flex;
  transition: 0.3s;
  align-items: center;
  font-weight: bold;
  padding-top: var(--dl-layout-space-halfunit);
  white-space: nowrap;
  border: 2px solid var(--dl-color-theme-primary1);
  padding-left: var(--dl-layout-space-oneandhalfunits);
  border-radius: var(--dl-layout-radius-buttonradius);
  padding-right: var(--dl-layout-space-oneandhalfunits);
  padding-bottom: var(--dl-layout-space-halfunit);
  justify-content: center;
  background-color: var(--dl-color-theme-neutral-light);
}

.thq-button-filled:hover {
  fill: var(--dl-color-theme-neutral-light);
  color: var(--dl-color-theme-neutral-light);
  background-color: var(--dl-color-theme-primary1);
}

.thq-button-outline {
  gap: var(--dl-layout-space-halfunit);
  fill: var(--dl-color-theme-primary1);
  color: var(--dl-color-theme-primary1);
  border: 1px solid;
  cursor: pointer;
  display: flex;
  transition: 0.3s;
  align-items: center;
  font-weight: bold;
  padding-top: var(--dl-layout-space-halfunit);
  white-space: nowrap;
  border-color: var(--dl-color-theme-primary1);
  padding-left: var(--dl-layout-space-oneandhalfunits);
  border-radius: var(--dl-layout-radius-buttonradius);
  padding-right: var(--dl-layout-space-oneandhalfunits);
  padding-bottom: var(--dl-layout-space-halfunit);
  justify-content: center;
}

.thq-button-outline:hover {
  fill: var(--dl-color-theme-secondary2);
  color: var(--dl-color-theme-secondary2);
  border-color: var(--dl-color-theme-primary2);
  background-color: var(--dl-color-theme-primary2);
}

.thq-button-flat {
  gap: var(--dl-layout-space-halfunit);
  fill: var(--dl-color-theme-primary1);
  color: var(--dl-color-theme-primary1);
  cursor: pointer;
  display: flex;
  transition: 0.3s;
  align-items: center;
  font-weight: bold;
  padding-top: var(--dl-layout-space-halfunit);
  white-space: nowrap;
  border-color: transparent;
  border-width: 1px;
  padding-left: var(--dl-layout-space-oneandhalfunits);
  border-radius: var(--dl-layout-radius-buttonradius);
  padding-right: var(--dl-layout-space-oneandhalfunits);
  padding-bottom: var(--dl-layout-space-halfunit);
  justify-content: center;
}

.thq-button-flat:hover {
  fill: var(--dl-color-theme-secondary1);
  color: var(--dl-color-theme-secondary1);
  border-color: var(--dl-color-theme-primary2);
  background-color: var(--dl-color-theme-primary2);
}

.thq-heading-1 {
  font-size: 48px;
  font-family: Raleway;
  font-weight: 700;
  line-height: 1.5;
}

.thq-heading-2 {
  font-size: 35px;
  font-family: Raleway;
  font-weight: 600;
  line-height: 1.5;
}

.thq-heading-3 {
  font-size: 26px;
  font-family: Raleway;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 991px){
  .thq-heading-3 {
    font-size: 24px;
  }
}

.thq-body-large {
  font-size: 18px;
  font-family: Lato;
  line-height: 1.5;
}

.thq-body-small {
  font-size: 16px;
  font-family: Lato;
  line-height: 1.5;
}

.thq-section-padding {
  width: 100%;
  display: flex;
  padding: var(--dl-layout-space-fiveunits);
  position: relative;
  align-items: center;
  flex-direction: column;
}

.thq-section-max-width {
  width: 100%;
  max-width: var(--dl-layout-size-maxwidth);
}

.thq-flex-column {
  gap: var(--dl-layout-space-twounits);
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  flex-direction: column;
}

.thq-flex-row {
  gap: var(--dl-layout-space-twounits);
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
}

.thq-card {
  gap: var(--dl-layout-space-oneandhalfunits);
  display: flex;
  padding: var(--dl-layout-space-twounits);
  align-items: stretch;
  border-radius: var(--dl-layout-radius-cardradius);
  flex-direction: column;
}

.thq-box-shadow {
  box-shadow: 0px 0px 5px -2px var(--dl-color-theme-neutral-dark);
}

.thq-divider-horizontal {
  width: 100%;
  height: 1px;
  background-color: var(--dl-color-theme-neutral-dark);
}

.thq-icon-small {
  width: 24px;
  height: 24px;
}

.thq-button-icon {
  fill: var(--dl-color-theme-secondary1);
  padding: 3px;
  transition: 0.3s;
  border-radius: var(--dl-layout-radius-round);
}

.thq-button-icon:hover {
  fill: var(--dl-color-theme-secondary2);
}

.thq-icon-medium {
  width: var(--dl-layout-size-small);
  height: var(--dl-layout-size-small);
}

.thq-icon-x-small {
  width: var(--dl-layout-size-xsmall);
  height: var(--dl-layout-size-xsmall);
}

.thq-link {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  background: linear-gradient(to right, var(--dl-color-theme-primary1) 50%, var(--dl-color-theme-neutral-dark) 50%);
  transition: background-position 300ms ease;
  font-weight: 600;
  background-clip: text;
  background-size: 200% 100%;
  background-position: 100%;
  -webkit-text-fill-color: transparent;
}

.thq-link:hover {
  background-position: 0 100%;
}

.thq-mask-image-vertical {
  mask-image: linear-gradient(to bottom, transparent, black 1%, black 99%, transparent);
}

.thq-mask-image-horizontal {
  mask-image: linear-gradient(to right, transparent, black 1%, black 99%, transparent);
}

.thq-button-animated {
  outline: none;
  z-index: 1;
  overflow: hidden;
  position: relative;
  border-width: 2px;
}

.thq-input::placeholder {
  text-align: center;
  vertical-align: middle;
}

.thq-button-animated:before {
  top: 0;
  left: -20%;
  color: var(--dl-color-theme-neutral-light);
  width: 200%;
  height: 101%;
  content: "";
  z-index: 1;
  position: absolute;
  transform: scaleX(0);
  transition: transform 0.5s;
  border-radius: var(--dl-layout-radius-buttonradius);
  background-color: var(--dl-color-theme-neutral-dark);
  transform-origin: 0 0;
  transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
}

.thq-button-animated:hover::before {
  color: var(--dl-color-theme-neutral-light);
  z-index: -1;
  transform: scaleX(1);
}

@media(max-width: 767px){
  .thq-section-padding {
    padding: var(--dl-layout-space-threeunits);
  }
  .thq-flex-column {
    gap: var(--dl-layout-space-oneandhalfunits);
  }
  .thq-flex-row {
    gap: var(--dl-layout-space-oneandhalfunits);
  }
  .thq-card {
    padding: var(--dl-layout-space-oneandhalfunits);
  }
}

@media(max-width: 479px){
  .thq-section-padding {
    padding: var(--dl-layout-space-oneandhalfunits);
  }
  .thq-flex-column {
    gap: var(--dl-layout-space-unit);
  }
  .thq-flex-row {
    gap: var(--dl-layout-space-unit);
  }
}

/* Navbar (site header) – BEM */

.site-nav {
  display: contents;
}

.site-nav__container {
  width: 100%;
  display: flex;
  position: relative;
  justify-content: center;
  background-color: var(--dl-color-theme-neutral-light);
}

.site-nav__inner {
  width: 100%;
  height: 130px;
  display: flex;
  max-width: var(--dl-layout-size-maxwidth);
  align-items: center;
  padding-top: var(--dl-layout-space-twounits);
  padding-left: var(--dl-layout-space-threeunits);
  padding-right: var(--dl-layout-space-threeunits);
  padding-bottom: var(--dl-layout-space-twounits);
  justify-content: space-between;
}

/* Branding */

.site-nav__brand-link {
  display: contents;
}

.site-nav__logo-image {
  width: 130px;
  height: auto;
  transition: 0.3s;
  text-decoration: none;
}

.site-nav__logo-image:hover {
  width: 135px;
}

/* Menú desktop */

.site-nav__desktop-menu {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

.site-nav__links {
  gap: var(--dl-layout-space-twounits);
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: var(--dl-layout-space-twounits);
  flex-direction: row;
  justify-content: flex-start;
}

.site-nav__button-link {
  fill: var(--dl-color-theme-primary1);
  color: var(--dl-color-theme-primary1);
  transition: 0.3s;
  border-color: var(--dl-color-theme-primary1);
  border-width: 2px;
  border-radius: var(--dl-layout-radius-buttonradius);
  text-decoration: none;
  background-color: var(--dl-color-theme-neutral-light);
  font-weight: 600;
}

.site-nav__button-link:hover {
  fill: var(--dl-color-theme-neutral-light);
  color: var(--dl-color-theme-neutral-light);
  background-color: var(--dl-color-theme-primary1);
}

/* Botón genérico del navbar (actualmente sin uso en HTML) */

.site-nav__button {
  fill: var(--dl-color-theme-primary1);
  color: var(--dl-color-theme-primary1);
  transition: 0.3s;
  border-color: var(--dl-color-theme-primary1);
  border-width: 2px;
  border-radius: var(--dl-layout-radius-buttonradius);
  background-color: var(--dl-color-theme-neutral-light);
}

.site-nav__button:hover {
  fill: var(--dl-color-theme-neutral-light);
  color: var(--dl-color-theme-neutral-light);
  background-color: var(--dl-color-theme-primary1);
}

/* Burger & menú móvil */

.site-nav__burger {
  display: none;
}

.site-nav__burger-icon {
  width: var(--dl-layout-size-xsmall);
  height: var(--dl-layout-size-xsmall);
}

.site-nav__mobile-menu {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  display: flex;
  padding: var(--dl-layout-space-twounits);
  z-index: 100;
  position: absolute;
  transform: translateY(-100%);
  transition: 0.5s;
  flex-direction: column;
  background-color: var(--dl-color-theme-neutral-light);
}

.site-nav__mobile-nav {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.site-nav__mobile-top {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: var(--dl-layout-space-threeunits);
  justify-content: space-between;
}

.site-nav__mobile-logo {
  height: 4rem;
}

.site-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-nav__close-icon {
  width: var(--dl-layout-size-xsmall);
  height: var(--dl-layout-size-xsmall);
}

.site-nav__mobile-links {
  gap: var(--dl-layout-space-unit);
  flex: 0 0 auto;
  display: flex;
  align-self: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

/* Enlaces de menú móvil */

.site-nav__mobile-link--primary {
  fill: var(--dl-color-theme-primary1);
  color: var(--dl-color-theme-primary1);
  text-decoration: none;
}

.site-nav__mobile-link--secondary {
  text-decoration: none;
}

/* .site-nav__mobile-link--contact hereda estilos de utilidades thq-body-small + thq-link */

/* Ajustes de legibilidad para el menú móvil del navbar */

.site-nav__mobile-menu {
  color: var(--dl-color-theme-neutral-dark);
}

/* Forzar estilo de texto “normal” en los enlaces móviles */
.site-nav__mobile-link--primary,
.site-nav__mobile-link--secondary,
.site-nav__mobile-link--contact {
  background: none !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--dl-color-theme-neutral-dark) !important;
  color: var(--dl-color-theme-neutral-dark) !important;
  text-decoration: none;
}

/* Asegurar que el texto interno herede el color */
.site-nav__mobile-links a span {
  color: inherit !important;
}

/* Opcional: color del icono de cierre */
.site-nav__close-icon {
  fill: var(--dl-color-theme-neutral-dark);
}

/* Responsivo del navbar */

@media (max-width: 801px) {
  .site-nav__inner {
    padding-left: var(--dl-layout-space-twounits);
    padding-right: var(--dl-layout-space-twounits);
  }

  /* Ocultar menú de escritorio en móvil */
  .site-nav__desktop-menu {
    display: none;
  }

  /* Mostrar el botón burger en móvil */
  .site-nav__burger {
    display: flex;
  }
}

@media (max-width: 479px) {
  .site-nav__inner {
    padding: var(--dl-layout-space-unit);
  }
}


/* Contacto – sección y formulario (BEM) */

/* Sección "Contacto" */

.home-contact {
  display: contents;
}

.home-contact__section {
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  flex-direction: column;
  fill: var(--dl-color-theme-neutral-dark);
  color: var(--dl-color-theme-neutral-dark);
}

.home-contact__max-width {
  gap: var(--dl-layout-space-twounits);
  display: flex;
  align-items: center;
  flex-direction: column;
}

.home-contact__header {
  gap: var(--dl-layout-space-unit);
  width: auto;
  display: flex;
  max-width: 800px;
  align-items: center;
  flex-shrink: 0;
  flex-direction: column;
}

.home-contact__header-content {
  gap: var(--dl-layout-space-oneandhalfunits);
  display: flex;
  align-self: stretch;
  align-items: center;
  flex-direction: column;
}

.home-contact__title {
  fill: var(--dl-color-theme-primary1);
  color: var(--dl-color-theme-primary1);
}

/* Formulario de contacto */

.home-contact-form {
  display: contents;
}

.home-contact-form__wrapper {
  gap: var(--dl-layout-space-threeunits);
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  padding-top: 0px;
}

.home-contact-form__max-width {
  display: flex;
  flex-direction: column;
}

.home-contact-form__info-row {
  gap: var(--dl-layout-space-sixunits);
  align-self: center;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.home-contact-form__info-item--email,
.home-contact-form__info-item--phone {
  display: flex;
  align-self: center;
  align-items: center;
  flex-direction: column;
}

.home-contact-form__icon--email,
.home-contact-form__icon--phone {
  fill: var(--dl-color-theme-primary1);
  width: 32px;
  height: 32px;
}

.home-contact-form__info-content--email,
.home-contact-form__info-content--phone {
  gap: var(--dl-layout-space-halfunit);
  display: flex;
  align-self: stretch;
  align-items: center;
  flex-direction: column;
}

.home-contact-form__email,
.home-contact-form__phone {
  text-align: center;
}

.home-contact-form__form-wrapper {
  display: flex;
  align-self: auto;
  align-items: flex-start;
}

.home-contact-form__form {
  gap: var(--dl-layout-space-oneandhalfunits);
  flex: 1;
  width: auto;
  display: flex;
  align-items: center !important;
  flex-shrink: 0;
  flex-direction: column;
}

.home-contact-form__row {
  gap: var(--dl-layout-space-oneandhalfunits);
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
}

.home-contact-form__field--first-name,
.home-contact-form__field--last-name {
  gap: var(--dl-layout-space-halfunit);
  width: 100%;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
}

.home-contact-form__input--first-name,
.home-contact-form__input--last-name {
  border-color: var(--dl-color-theme-primary1);
}

.home-contact-form__field--email {
  gap: var(--dl-layout-space-halfunit);
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
}

.home-contact-form__input--email {
  border-color: var(--dl-color-theme-primary1);
  background-color: var(--dl-color-theme-neutral-light);
}

.home-contact-form__field--message {
  gap: var(--dl-layout-space-halfunit);
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
}

.home-contact-form__textarea {
  border-color: var(--dl-color-theme-primary1);
}

/* (Opcional) estilos heredados que antes estaban en contact3root-class-name1 */
.home-contact__section--alt {
  fill: var(--dl-color-theme-neutral-dark);
  color: var(--dl-color-theme-neutral-dark);
}

/* Responsive – Contacto */

/* Tablet: reducir un poco espacios */
@media (max-width: 991px) {
  .home-contact-form__max-width {
    align-items: center;
  }

  .home-contact-form__info-row,
  .home-contact-form__form,
  .home-contact-form__row {
    width: 100%;
    max-width: 600px;      /* puedes subir/bajar este valor a gusto */
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }
}

/* Móvil: apilar columnas y ensanchar formulario */
@media (max-width: 767px) {
  /* Acercar el título "Contacto" al bloque de Email/Teléfono */
  .home-contact__max-width {
    gap: var(--dl-layout-space-unit);
  }

  /* Reducir aire por encima del formulario */
  .home-contact-form__wrapper {
    padding-top: var(--dl-layout-space-unit);
  }

  .home-contact-form__max-width {
    gap: var(--dl-layout-space-oneandhalfunits);
  }

  /* Email/Teléfono en columna, mismo ancho que el formulario */
  .home-contact-form__info-row {
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--dl-layout-space-oneandhalfunits);
  }

  /* El formulario justo debajo del bloque de info, ocupando todo el ancho */
  .home-contact-form__form-wrapper {
    width: 100%;
    margin-top: 0;
  }

  /* Nombre / Apellido uno debajo del otro */
  .home-contact-form__row {
    flex-direction: column;
  }
}

/* Móvil pequeño: un poco menos de separación aún */
@media (max-width: 479px) {
  .home-contact-form__wrapper {
    padding-top: var(--dl-layout-space-unit);
  }

  .home-contact-form__max-width {
    gap: var(--dl-layout-space-unit);
  }

  .home-contact-form__info-row {
    gap: var(--dl-layout-space-unit);
  }
}

/* Botón flotante de WhatsApp – BEM */

.whatsapp-button {
  display: contents;
}

.whatsapp-button__container {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.whatsapp-button__link {
  display: contents;
}

.whatsapp-button__icon {
  width: 5vmax;
  height: 5vmax;
  transition: 0.3s;
}

.whatsapp-button__icon:hover {
  width: 7vmax;
  height: 7vmax;
}

/* Footer – BEM */

.site-footer {
  display: contents;
}

.site-footer__container {
  width: 100%;
  height: auto;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
}

.site-footer__inner {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.site-footer__credits {
  gap: var(--dl-layout-space-twounits);
  width: 100%;
  display: flex;
  align-self: stretch;
  margin-top: var(--dl-layout-space-unit);
  align-items: flex-start;
  flex-direction: column;
}

.site-footer__bottom-row {
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  justify-content: space-between;
}

/* Texto de copyright (por ahora solo semántico, sin estilos extra) */
.site-footer__copyright {
  /* Aquí podrías añadir text-align o color si quisieras algo distinto */
}