/* ==========================================================================
   overrides.css
   Custom styles for deborahmur.com — NOT generated by Elementor.
   These rules overlay on top of the Elementor CSS framework.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. @font-face declarations
   Local woff2 files served from ../assets/fonts/
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Belleza";
  src: url("../assets/fonts/belleza-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Aguafina Script";
  src: url("../assets/fonts/aguafina-script-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Capriola";
  src: url("../assets/fonts/capriola-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Prompt";
  src: url("../assets/fonts/prompt-100-latin.woff2") format("woff2");
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Prompt";
  src: url("../assets/fonts/prompt-300-latin.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Prompt";
  src: url("../assets/fonts/prompt-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Prompt";
  src: url("../assets/fonts/prompt-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Prosto One";
  src: url("../assets/fonts/prosto-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bellefair";
  src: url("../assets/fonts/bellefair-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   1b. Per-element heading typography overrides
   post-63.css targets these via ThePlus plugin selectors we don't have,
   so we reproduce the exact per-element styles here.
   -------------------------------------------------------------------------- */

/* bf90b54 — Hero h1 (ThePlus heading animation) */
.elementor-element-bf90b54 .elementor-heading-title {
  font-family: "Capriola", sans-serif !important;
  font-size: 37px !important;
  font-weight: 100 !important;
  text-transform: none !important;
  color: var(--e-global-color-secondary) !important;
  text-align: left;
  line-height: 1.2em;
  letter-spacing: -0.1px;
}

/* 5b8e742 — "Servicios" label */
.elementor-element-5b8e742 .elementor-heading-title {
  font-family: "Bellefair", sans-serif !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  text-transform: capitalize !important;
  color: #313131 !important;
}

/* 14b8dfb — "Lo que podemos trabajar juntos" */
.elementor-element-14b8dfb .elementor-heading-title {
  font-family: "Capriola", sans-serif !important;
  font-size: 50px !important;
  font-weight: 100 !important;
  text-transform: none !important;
  color: var(--e-global-color-bec41cd) !important;
}

/* 0dc56a1 — "Sobre mí" label */
.elementor-element-0dc56a1 .elementor-heading-title {
  font-family: "Bellefair", sans-serif !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  text-transform: none !important;
  color: #313131 !important;
}

/* 3ba94a7 — "Hola, me llamo Deborah Murcia" */
.elementor-element-3ba94a7 .elementor-heading-title {
  font-family: "Capriola", sans-serif !important;
  font-size: 50px !important;
  font-weight: 100 !important;
  text-transform: none !important;
  color: var(--e-global-color-bec41cd) !important;
}

/* f6b6ca4 — "Psicólogas" */
.elementor-element-f6b6ca4 .elementor-heading-title {
  font-family: "Capriola", sans-serif !important;
  font-size: 56px !important;
  font-weight: 100 !important;
  text-transform: none !important;
  color: var(--e-global-color-92fc910) !important;
}

/* 23f31e5 — "Colaboradoras externas" */
.elementor-element-23f31e5 .elementor-heading-title {
  font-family: "Bellefair", sans-serif !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  text-transform: capitalize !important;
  color: #313131 !important;
}

/* 55e4e8b — "Recursos" */
.elementor-element-55e4e8b .elementor-heading-title {
  font-family: "Bellefair", sans-serif !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  text-transform: capitalize !important;
  color: #313131 !important;
}

/* c217a2b — "Podcast" */
.elementor-element-c217a2b .elementor-heading-title {
  font-family: "Bellefair", sans-serif !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  text-transform: capitalize !important;
  color: #313131 !important;
}

/* f62acd4 — "Juego Mental" */
.elementor-element-f62acd4 .elementor-heading-title {
  font-family: "Capriola", sans-serif !important;
  font-size: 50px !important;
  font-weight: 100 !important;
  text-transform: none !important;
  color: var(--e-global-color-92fc910) !important;
}

/* 6c80102 — "Instagram y Tik tok" */
.elementor-element-6c80102 .elementor-heading-title {
  font-family: "Bellefair", sans-serif !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  text-transform: none !important;
  color: #313131 !important;
}

/* 4e5fdb4 — "@deborahmur.psico" */
.elementor-element-4e5fdb4 .elementor-heading-title {
  font-family: "Capriola", sans-serif !important;
  font-size: 50px !important;
  font-weight: 100 !important;
  text-transform: none !important;
  color: var(--e-global-color-92fc910) !important;
}

/* 85eb8da — "Entrevistas" (if present in live) */
.elementor-element-85eb8da .elementor-heading-title {
  font-family: "Capriola", sans-serif !important;
  font-size: 50px !important;
  font-weight: 100 !important;
  text-transform: none !important;
  color: var(--e-global-color-92fc910) !important;
}

/* 380bd10 — "Mi Libro" */
.elementor-element-380bd10 .elementor-heading-title {
  font-family: "Bellefair", sans-serif !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  text-transform: capitalize !important;
  color: #313131 !important;
}

/* a57bb6e — "NO SOY YO, ERES TÚ" */
.elementor-element-a57bb6e .elementor-heading-title {
  font-family: "Capriola", sans-serif !important;
  font-size: 50px !important;
  font-weight: 100 !important;
  text-transform: none !important;
  color: var(--e-global-color-bec41cd) !important;
}

/* 456a5f7b — "Contáctanos" */
.elementor-element-456a5f7b .elementor-heading-title {
  font-size: 44px !important;
  font-weight: 600 !important;
  color: var(--e-global-color-92fc910) !important;
}

/* Responsive heading overrides (tablet / mobile) */
@media (max-width: 1024px) {
  .elementor-element-bf90b54 .elementor-heading-title {
    font-size: 33px !important;
    text-align: center;
    letter-spacing: -0.5px;
  }
  .elementor-element-14b8dfb .elementor-heading-title {
    font-size: 36px !important;
    letter-spacing: -0.5px;
  }
  .elementor-element-3ba94a7 .elementor-heading-title {
    font-size: 33px !important;
    letter-spacing: -0.5px;
  }
  .elementor-element-f6b6ca4 .elementor-heading-title {
    font-size: 34px !important;
    letter-spacing: -0.5px;
  }
  .elementor-element-f62acd4 .elementor-heading-title {
    font-size: 41px !important;
    letter-spacing: -0.5px;
  }
  .elementor-element-4e5fdb4 .elementor-heading-title {
    font-size: 31px !important;
    letter-spacing: -0.5px;
  }
  .elementor-element-85eb8da .elementor-heading-title {
    font-size: 31px !important;
    letter-spacing: -0.5px;
  }
  .elementor-element-a57bb6e .elementor-heading-title {
    font-size: 44px !important;
    letter-spacing: -0.5px;
  }
  .elementor-element-456a5f7b .elementor-heading-title {
    font-size: 35px !important;
  }
}


/* --------------------------------------------------------------------------
   2. Flip cards 3D — team section
   Our JS renders flip cards; these styles handle the 3D transform.
   -------------------------------------------------------------------------- */

.card {
  perspective: 1000px;
  height: 400px;
}

.card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.card:hover .card__inner,
.card.flipped .card__inner {
  transform: rotateY(180deg);
}

.card__front,
.card__back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  overflow: hidden;
}

.card__front {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.card__photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  margin-bottom: 1rem;
}

.card__name {
  font-family: "Belleza", serif;
  font-size: 1.2rem;
  font-weight: 300;
  color: #504D4D;
  margin-bottom: 0.5rem;
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 1rem;
}

.card__tag {
  font-family: "Prompt", sans-serif;
  font-size: 10px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7E5C7F;
  padding: 0.15rem 0.4rem;
}

.card__back {
  background: transparent;
  color: #504D4D;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
}

.card__back-name {
  font-family: "Belleza", serif;
  font-size: 1.3rem;
  font-weight: 300;
  margin-bottom: 0.75rem;
  color: #7E5C7F;
}

.card__bio {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  overflow-y: auto;
  flex: 1;
  color: #504D4D;
}

.card__bio strong {
  color: #7E5C7F;
  font-weight: 600;
}

.card__bio abbr {
  text-decoration: none;
  border-bottom: 1px dotted #B799FC;
}

.card__hint {
  font-family: "Prompt", sans-serif;
  font-size: 10px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #9AA8BA;
  margin-top: 0.75rem;
}


/* --------------------------------------------------------------------------
   3. Team grid layout
   Responsive grid for the flip cards.
   -------------------------------------------------------------------------- */

.team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
  width: 100%;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .team__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .card {
    height: 420px;
  }

  .card__photo {
    width: 220px;
    height: 220px;
  }
}

@media (min-width: 1280px) {
  .team__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* --------------------------------------------------------------------------
   4. Form validation — error / success states
   -------------------------------------------------------------------------- */

.form__input.error {
  border-color: #cf2e2e;
}

.form__message {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  font-size: 14px;
  font-weight: 300;
  display: none;
}

.form__message.success {
  display: block;
  background: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

.form__message.error {
  display: block;
  background: rgba(207, 46, 46, 0.1);
  color: #cf2e2e;
}


/* --------------------------------------------------------------------------
   5. Scroll animations
   Elements fade-in and slide up when they enter the viewport.
   -------------------------------------------------------------------------- */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}


/* --------------------------------------------------------------------------
   6. FAQ section
   This section does not exist in the live Elementor site; we build and
   style it entirely ourselves. Background matches the site's light purple.
   -------------------------------------------------------------------------- */

.faq {
  padding: 5rem 0;
  background: #FAF0FC;
}

.faq__list {
  max-width: 800px;
  margin: 0 auto;
}

.faq__item {
  background: #fff;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.faq__question {
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 1.25rem 3rem 1.25rem 1.5rem;
  cursor: pointer;
  position: relative;
  list-style: none;
  color: #504D4D;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: '+';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 300;
  color: #B799FC;
}

details[open] .faq__question::after {
  content: '\2212';
}

.faq__answer {
  padding: 0 1.5rem 1.25rem;
  color: #504D4D;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
}

.faq__answer a {
  color: #FC97FF;
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   7. Contact form custom styles
   Override Elementor form defaults for our custom-built contact form.
   -------------------------------------------------------------------------- */

.form__group {
  margin-bottom: 1.25rem;
}

.form__label {
  display: block;
  font-family: "Prompt", sans-serif;
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  color: #504D4D;
}

.form__input,
.form__select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: #fff;
  background-color: #fff !important;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #504D4D;
  transition: border-color 0.3s ease;
  border-radius: 0;
  -webkit-appearance: none;
}

.form__input::placeholder {
  color: #9AA8BA;
}

.form__input:focus,
.form__select:focus {
  outline: none;
  border-color: #504D4D;
}

.form__select option {
  color: #504D4D;
  background: #fff;
}

.form__textarea {
  resize: vertical;
  min-height: 100px;
}

.form__phone-wrapper {
  display: flex;
  gap: 0.75rem;
}

.form__phone-wrapper .form__select {
  width: 110px;
  flex-shrink: 0;
}

.form__group--checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.form__checkbox {
  margin-top: 0.15rem;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.form__label--checkbox {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #504D4D;
  text-transform: none;
  letter-spacing: 0;
}

.form__label--checkbox a {
  color: #B799FC;
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   8. Buttons — team and contact card sections
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  font-family: "Prompt", sans-serif;
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  text-decoration: none;
}

.btn--primary {
  background: #32373c;
  color: #fff;
  border-color: #32373c;
}

.btn--primary:hover {
  background: transparent;
  color: #9AA8BA;
  border-color: #9AA8BA;
}

.btn--full {
  width: 100%;
}


/* --------------------------------------------------------------------------
   9. Sticky header fix
   Ensure anchor-link scrolling accounts for the fixed/sticky header height.
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}


/* --------------------------------------------------------------------------
   10. Sobre mí — purple overlay on background image
   The column 4703ac2d has a background-image (about-bg). We tint it purple
   using a ::before pseudo-element overlay.
   -------------------------------------------------------------------------- */

.elementor-element-4703ac2d > .elementor-element-populated {
  position: relative;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.elementor-element-4703ac2d > .elementor-element-populated::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(183, 153, 252, 0.75);
  z-index: 0;
  pointer-events: none;
}

.elementor-element-4703ac2d .elementor-inner-section,
.elementor-element-4703ac2d .elementor-widget {
  position: relative;
  z-index: 1;
}


/* --------------------------------------------------------------------------
   11. Entrevistas grid — YouTube video embeds
   -------------------------------------------------------------------------- */

.entrevistas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
  padding: 1rem 0;
}

@media (min-width: 768px) {
  .entrevistas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.entrevista-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.entrevista-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}