/* Rosinda Ferreira — single stylesheet. Measurements mirror the original Divi build. */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-800-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500-latin.woff2") format("woff2");
}

:root {
  --heading: #333;
  --body: #666;
  --teal: #4cb5b5;
  --sage: #a1c3ba;
  --orange: #ffa000;
  --orange-dark: #e69206;
  --amber: #e09900;
  --gold: #cca858;
  --gold-light: #e0bf76;
  --footer: #0f1818;
  --header-h: 149px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  background: #fff;
  color: var(--body);
  font: 500 14px/1.7 "Open Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3 { color: var(--heading); padding-bottom: 10px; font-weight: 500; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

.container { width: 80%; max-width: 1080px; margin: 0 auto; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.eyebrow {
  color: var(--teal);
  font-weight: 600;
  text-transform: uppercase;
}

.section-title,
.about-text h2 {
  margin-bottom: 10px;
  font-family: Barlow, Helvetica, Arial, sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.3;
}
.section-title { text-align: center; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .1);
}

.nav-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 13px;
  position: relative;
}

.logo img { width: 313px; }

.nav-links { display: flex; gap: 22px; }
.nav-links a {
  display: block;
  padding: 31px 0;
  color: #000;
  font-family: Poppins, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 14px;
  transition: opacity .3s;
}
.nav-links a:hover { opacity: .7; }

.menu-toggle { display: none; }

/* ---------- Hero ---------- */

.hero {
  padding-top: 54px;
  background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)),
              url("../images/por-do-sol.webp") left top / cover no-repeat;
}

.hero-row { display: flex; align-items: center; gap: 5.5%; padding-top: 27px; }
.hero-row > * { flex: 1 1 0; min-width: 0; }
.hero-img { align-self: flex-end; }

.hero h1 {
  margin-bottom: 20px;
  color: #fff;
  font-family: Barlow, Helvetica, Arial, sans-serif;
  font-size: 50px;
  font-weight: 800;
  line-height: 1.3;
}
.hero p { max-width: 500px; color: #fff; font-size: 16px; line-height: 1.8; }

/* ---------- About ---------- */

.about { margin-top: 50px; padding-top: 74px; }

.about-row { display: flex; gap: 5.5%; }
.about-row > * { flex: 1 1 0; min-width: 0; }

.about-photo { width: 80%; }
.about-photo img { width: 100%; box-shadow: -20px -20px 0 #f4f4f4; }

/* The card straddles the bottom edge of the photo. */
.cta-card {
  position: relative;
  z-index: 1;
  width: 295px;
  margin: -100px auto 0; /* pulls the card up over the photo without leaving a gap below */
  padding: 28px 30px 30px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .3);
  text-align: center;
  transform: translateX(20%);
}
.cta-card h2 { padding-bottom: 20px; color: #000; font-size: 29px; font-weight: 500; line-height: 1.15; }

.btn-orange {
  display: inline-block;
  padding: 14px 46px;
  border-radius: 30px;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  transition: background-color .3s;
}
.btn-orange:hover { background: #000; }

.about-text .eyebrow { margin-top: -27px; }
.about-text p:not(.eyebrow) { margin-bottom: 30px; font-size: 16px; line-height: 1.8; }

.certified { display: flex; align-items: flex-start; gap: 15px; }
.certified img { flex: none; width: 32px; }
.certified span { padding-top: 8px; color: var(--heading); font-size: 15px; line-height: 1; }

/* ---------- Training ---------- */

.training { padding: 70px 0 29px; }

.training-title {
  padding: 0 0 24px;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.training-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 60px; }

.training-grid li {
  position: relative;
  min-height: 64px;
  margin-bottom: 30px;
  padding-left: 47px;
}
.training-grid li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background: url("../icons/check.svg") center / 26px no-repeat;
}
.training-grid h3 { color: var(--heading); font-size: 15px; line-height: 1.3; }
.training-grid p { margin-top: 4px; }

/* ---------- Services ---------- */

.services { padding: 5px 0 54px; }
.services .section-title { padding-top: 27px; margin-bottom: 40px; }

.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 57px 60px; }

.service-grid li {
  padding-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 6px 8px 24px rgba(0, 0, 0, .3);
}
.service-grid img { width: 100%; aspect-ratio: 225 / 145; object-fit: cover; }
.service-grid h3 {
  margin-top: 30px;
  padding: 0 5px 10px;
  color: #000;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

/* ---------- Hypnosis ---------- */

.hypnosis { padding: 52px 0; background: var(--sage); }
.hypnosis .container { padding-top: 27px; }
.hypnosis .eyebrow { color: #fff; text-align: center; }
.hypnosis .section-title { color: #fff; }

.hypnosis-row { display: flex; align-items: flex-start; gap: 5.5%; padding-top: 44px; }
.hypnosis-row > * { flex: 1 1 0; min-width: 0; }
.hypnosis-row > p { color: #fff; font-size: 16px; line-height: 1.8; }

.results {
  margin-left: -11px;
  border-spacing: 2px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .3);
  table-layout: fixed;
}
.results th, .results td {
  height: 50px;
  padding: 10px;
  background: #fff;
  text-align: center;
  vertical-align: middle;
  font-weight: 500;
}
.results thead th { background: var(--gold); color: #fff; font-weight: 800; }
.results td:last-child { background: var(--gold-light); color: #000; font-weight: 700; }

/* ---------- Testimonials ---------- */

.testimonials { padding-top: 47px; }
.testimonials .container { padding-top: 27px; text-align: center; }

.slider { padding: 0 0 6px; text-align: center; }

.slide { width: 80%; max-width: 1080px; margin: 0 auto; padding: 7px 8px 0; }
.slide[hidden] { display: none; }
.slide.is-active { animation: fade .6s ease; }
.slide p { font-size: 16px; font-weight: 400; line-height: 1.8; }
.slide h3 {
  padding-top: 52px;
  background: url("../icons/quote.svg") center top 8px / 34px no-repeat;
  color: #000;
  font-size: 20px;
  line-height: 1;
}

@keyframes fade { from { opacity: 0; } }

.slider-dots { display: flex; justify-content: center; gap: 10px; padding: 12px 0 57px; }
.slider-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  opacity: .5;
  cursor: pointer;
}
.slider-dots button[aria-current="true"] { opacity: 1; }

/* ---------- FAQ ---------- */

.faq { padding: 13px 0 43px; }
.faq .container { padding-top: 27px; text-align: center; }

.accordion { width: 64%; margin: 40px auto 0; text-align: left; }

.accordion details { margin-bottom: 19px; padding: 20px; }
.accordion summary {
  position: relative;
  padding-right: 50px;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  list-style: none;
  cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: url("../icons/plus.svg") center / contain no-repeat;
}
.accordion details[open] summary::after { background-image: url("../icons/minus.svg"); }
.accordion details p { padding-top: 20px; color: #686868; }

/* ---------- Contact ---------- */

.contact {
  padding: 57px 0 69px;
  background: linear-gradient(#e09900 0%, rgba(0, 0, 0, .8) 80%),
              url("../images/cta-bg.webp") center / cover no-repeat;
}
@media (min-width: 981px) and (hover: hover) {
  .contact { background-attachment: scroll, fixed; }
}

.contact-row { display: flex; align-items: center; gap: 5.5%; padding-top: 30px; }
.contact-row > * { flex: 1 1 0; min-width: 0; }

.contact-text h2 { color: #fff; font-size: 40px; line-height: 1; }
.contact-text p { max-width: 500px; margin-top: 20px; color: #fff; font-size: 16px; line-height: 1.8; }

.contact-form {
  padding: 30px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  margin-bottom: 23px;
  padding: 16px 25px;
  border: 1px solid #eee;
  border-radius: 60px;
  background: #f9f9f9;
  color: var(--body);
  font: 400 16px "Open Sans", Helvetica, Arial, sans-serif;
}
.contact-form textarea { min-height: 100px; border-radius: 30px; resize: none; }
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--body); }
.contact-form .honeypot { display: none; }

.contact-form button {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 1em;
  border: 0;
  border-radius: 50px;
  background: var(--orange);
  color: #fefefe;
  font: 600 18px/1.7 "Open Sans", Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: background-color .3s;
}
.contact-form button:hover { background: var(--orange-dark); }
.contact-form button:disabled { opacity: .6; cursor: wait; }

.form-status:empty { display: none; }
.form-status { margin-top: 16px; font-weight: 600; text-align: center; }
.form-status.ok { color: #2e7d32; }
.form-status.error { color: #c62828; }

/* ---------- Footer ---------- */

.site-footer { padding: 8px 0; background: var(--footer); color: #c4c4c4; font-size: 12px; font-weight: 400; }
.site-footer .container { padding-top: 39px; text-align: center; }

.footer-logo { display: block; width: 31%; margin: 0 auto 28px; }
.footer-logo img { width: 100%; }

.footer-links { margin-bottom: 30px; }
.footer-links a { color: #fff; font-weight: 600; transition: color .3s; }
.footer-links a:hover { color: var(--amber); }

.social { display: flex; justify-content: center; gap: 8px; }
.social a {
  display: block;
  padding: 13px;
  border-radius: 50%;
  background: #eaeaea;
  transition: opacity .3s;
}
.social a:hover { opacity: .7; }

.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 42px 0 7px; }
.credit a { color: var(--amber); }
.heart { color: #f00; }

/* ---------- Privacy page ---------- */

.legal-hero {
  padding: 81px 0 100px;
  background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)),
              url("../images/por-do-sol.webp") left top / cover no-repeat;
}
.legal-hero h1 { color: #fff; font-size: 50px; font-weight: 800; line-height: 1.3; text-align: center; }

.legal { padding: 58px 0 60px; }
.legal p, .legal ul { padding-bottom: 1em; font-size: 15px; }
.legal ul { padding-left: 1.5em; list-style: disc; }
.legal strong { color: var(--heading); }
.legal a { color: var(--teal); }

/* ---------- Cookie banner ---------- */

.cookie-banner {
  position: fixed;
  bottom: 40px;
  left: 40px;
  z-index: 100;
  width: 440px;
  padding: 20px 26px;
  border: 1px solid #f4f4f4;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 -1px 10px rgba(172, 171, 171, .3);
  color: #212121;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner .title { margin-bottom: 12px; font-size: 18px; font-weight: 700; }
.cookie-actions { display: flex; gap: 8px; margin-top: 16px; }
.cookie-actions button {
  flex: 1;
  padding: 8px;
  border: 2px solid #1863dc;
  border-radius: 2px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
}
.cookie-actions .btn-reject { flex: .85; background: transparent; color: #1863dc; }
.cookie-actions .btn-accept { background: #1863dc; color: #fff; }
.cookie-actions button:hover { opacity: .8; }

@media (max-width: 576px) {
  .cookie-banner { bottom: 0; left: 0; }
}
@media (max-width: 440px) {
  .cookie-banner { width: 100%; padding: 20px 24px; }
}

/* ---------- Tablet & phone ---------- */

@media (max-width: 980px) {
  :root { --header-h: 116px; }

  .logo img { width: 304px; }

  .menu-toggle {
    display: block;
    width: 45px;
    height: 45px;
    margin: 0 0 1px;
    padding: 0;
    border: 0;
    background: url("../icons/menu.svg") center / 40px no-repeat;
    cursor: pointer;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 5%;
    border-top: 3px solid #383838;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
  }
  .nav-bar.open .nav-links { display: flex; }
  .nav-links a { padding: 10px 5%; border-bottom: 1px solid rgba(0, 0, 0, .03); color: #383838; line-height: 1.7; }

  .hero-row, .about-row, .hypnosis-row, .contact-row { flex-direction: column; align-items: stretch; gap: 30px; }
  .hero-img { align-self: center; }
  .hero-img img { width: auto; }

  .about { margin-top: 0; padding-top: 100px; }
  .about-photo { width: 100%; }
  .about-photo img { width: auto; margin: 0 auto; }
  .cta-card { top: -80px; margin-top: 0; margin-bottom: -80px; transform: none; }
  .about-text .eyebrow { margin-top: 0; }

  .training { padding-top: 30px; }
  .training-grid { grid-template-columns: 1fr; }

  .service-grid { width: 75%; margin: 0 auto; grid-template-columns: 1fr; gap: 30px; }

  .hypnosis { padding: 45px 0 58px; background: var(--teal); }
  .results { margin-left: 0; }

  .slide { width: 90%; }
  .slide p { font-size: 15px; }

  .accordion { width: 74%; }
  .accordion details p { font-size: 15px; }

  .contact { padding: 60px 0 50px; }
  .contact-row { padding-top: 0; }
  .contact-text p { max-width: 100%; }

  .footer-logo { width: 64%; }
  .footer-bottom { flex-direction: column; gap: 0; padding-top: 30px; }

  .legal-hero { padding: 53px 0 43px; }
  .legal-hero h1 { font-size: 37px; }
}

@media (max-width: 767px) {
  .hero h1 { font-size: 39px; }
  .hero p { font-size: 15px; }

  .cta-card h2 { font-size: 25px; }
  .legal-hero { padding-bottom: 20px; }
  .legal-hero h1 { font-size: 26px; }
  .btn-orange { padding: 10px 30px; font-size: 16px; }

  .section-title, .about-text h2 { font-size: 28px; }
  .about-text p:not(.eyebrow) { margin-bottom: 4px; font-size: 15px; }
  .certified { margin-top: 26px; }

  .service-grid { width: 68%; }

  .hypnosis { padding: 57px 0; }

  /* Phones: each result row becomes a two-column card (label | value). */
  .results, .results tbody { display: block; box-shadow: none; }
  .results thead { display: none; }
  .results tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-bottom: 15px;
    box-shadow: 0 2px 18px rgba(0, 0, 0, .3);
  }
  .results th, .results td { display: contents; }
  .results [data-label]::before,
  .results span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 10px;
    text-align: center;
  }
  .results [data-label]::before { content: attr(data-label); background: var(--gold); color: #fff; font-weight: 800; }
  .results span { background: #fff; }
  .results td:last-child span { background: var(--gold-light); color: #000; font-weight: 700; }

  .accordion { width: 91%; }

  .contact-text h2 { font-size: 34px; }
  .contact-form { padding: 15px; }
  .contact-form input, .contact-form textarea { padding: 10px 15px; font-size: 14px; }
  .contact-form textarea { min-height: 100px; }
  .contact-form button { padding: 7px 1em; font-size: 16px; }

  .footer-logo { width: 88%; }
}