/* ==========================================================================
   Protocolos Page Styles
   Theme: Pacto 25
   ========================================================================== */

/* --- 1. Hero Section --- */
.section-protocolos-hero {
  position: relative;
  overflow: clip;
  padding: clamp(4rem, 8vw, 8rem) 0 clamp(4rem, 6vw, 6rem);
  background-color: var(--color-white, #FFFFFF);
}

.protocolos-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (min-width: 992px) {
  .protocolos-hero-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.protocolos-hero-content {
  position: relative;
  z-index: 3;
}

.protocolos-hero-eyebrow {
  display: block;
  font-family: var(--font-body);
  color: var(--color-primary, #D42E12);
  font-weight: 700;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: clamp(12px, 1.5vw, 16px);
}

.eyebrow-bullet {
  font-size: 1.2em;
  line-height: 1;
  margin-right: 4px;
}

.protocolos-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text, #231F20);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.protocolos-hero-text {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--color-text, #231F20);
}

.protocolos-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(400px, 45vw, 600px);
}

.protocolos-hero-photo-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 650px;
  /* Transparent PNG support - No border radius or overflow hidden */
}

.protocolos-hero-photo {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 4 Bubbles around the table */
.protocolos-hero-bubble-1 {
  position: absolute;
  top: 5%;
  left: 20%;
  width: clamp(30px, 4vw, 50px);
  height: clamp(30px, 4vw, 50px);
  background-color: var(--color-primary, #D42E12);
  border-radius: 50%;
  z-index: 1;
}

.protocolos-hero-bubble-2 {
  position: absolute;
  top: -5%;
  right: 15%;
  width: clamp(20px, 2.5vw, 30px);
  height: clamp(20px, 2.5vw, 30px);
  background-color: var(--color-primary, #D42E12);
  border-radius: 50%;
  z-index: 1;
}

.protocolos-hero-bubble-3 {
  position: absolute;
  bottom: 20%;
  right: 10%;
  width: clamp(40px, 5vw, 60px);
  height: clamp(40px, 5vw, 60px);
  background-color: var(--color-primary, #D42E12);
  border-radius: 50%;
  z-index: 1;
}

.protocolos-hero-bubble-4 {
  position: absolute;
  bottom: 15%;
  left: 25%;
  width: clamp(15px, 2vw, 25px);
  height: clamp(15px, 2vw, 25px);
  background-color: var(--color-primary, #D42E12);
  border-radius: 50%;
  z-index: 1;
}


/* --- 2. Condições Especiais Section --- */
.section-protocolos-condicoes {
  position: relative;
  overflow: clip;
  padding: clamp(4rem, 8vw, 8rem) 0;
  background-color: var(--color-white, #FFFFFF);
}

.protocolos-condicoes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (min-width: 992px) {
  .protocolos-condicoes-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.protocolos-condicoes-content {
  position: relative;
  z-index: 3;
}

.protocolos-condicoes-eyebrow {
  display: block;
  font-family: var(--font-body);
  color: var(--color-primary, #D42E12);
  font-weight: 700;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: clamp(12px, 1.5vw, 16px);
}

.protocolos-condicoes-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text, #231F20);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.protocolos-condicoes-text {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.6;
  color: var(--color-text, #231F20);
  margin-bottom: 24px;
}

.protocolos-condicoes-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}

.protocolos-condicoes-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: clamp(15px, 1vw, 16px);
  color: var(--color-text, #231F20);
}

.protocolos-condicoes-list li::before {
  content: "•";
  color: var(--color-primary, #D42E12);
  position: absolute;
  left: 0;
  font-size: 1.2em;
  line-height: 1;
}


.protocolos-condicoes-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(350px, 40vw, 600px);
}

.protocolos-condicoes-red-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50%);
  /* Offset slightly to the right */
  width: clamp(500px, 60vw, 900px);
  height: clamp(500px, 60vw, 900px);
  border-radius: 50%;
  background-color: var(--color-primary, #D42E12);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: clamp(80px, 15vw, 180px);
  /* Padding inside the circle to align text */
}

.protocolos-condicoes-vantagens {
  color: var(--color-white, #FFFFFF);
  z-index: 2;
  position: relative;
}

.vantagens-icon {
  margin-bottom: 24px;
}

.vantagens-title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  margin-bottom: 24px;
}

.vantagens-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vantagens-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 16px);
  display: flex;
  align-items: center;
}

.vantagens-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="7.5" stroke="white" stroke-width="1"/><path d="M11.5 5.5L6.5 10.5L4.5 8.5" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

/* Bubbles for section 2 */
.protocolos-cond-bubble-1 {
  position: absolute;
  top: 10%;
  left: -5%;
  width: clamp(20px, 3vw, 40px);
  height: clamp(20px, 3vw, 40px);
  background-color: var(--color-primary, #D42E12);
  border-radius: 50%;
}

.protocolos-cond-bubble-2 {
  position: absolute;
  top: 5%;
  left: 15%;
  width: clamp(40px, 6vw, 90px);
  height: clamp(40px, 6vw, 90px);
  background-color: var(--color-primary, #D42E12);
  border-radius: 50%;
}

.protocolos-cond-bubble-3 {
  position: absolute;
  bottom: 25%;
  left: 10%;
  width: clamp(25px, 3vw, 45px);
  height: clamp(25px, 3vw, 45px);
  background-color: var(--color-primary, #D42E12);
  border-radius: 50%;
}

.protocolos-cond-bubble-4 {
  position: absolute;
  bottom: 10%;
  left: 30%;
  width: clamp(10px, 1.5vw, 20px);
  height: clamp(10px, 1.5vw, 20px);
  background-color: var(--color-primary, #D42E12);
  border-radius: 50%;
}

@media (max-width: 991px) {
  .protocolos-condicoes-red-circle {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border-radius: 0;
    padding: clamp(3rem, 6vw, 4rem) 1rem;
    align-items: center;
    text-align: center;
    height: auto;
  }

  .protocolos-condicoes-vantagens {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .vantagens-list li {
    padding-left: 24px;
    text-align: left;
    justify-content: flex-start;
  }
}

/* --- 3. Descubra as Condições (FAQ) Section --- */
.section-protocolos-faq {
  position: relative;
  overflow: clip;
  padding: clamp(4rem, 8vw, 8rem) 0;
  background-color: var(--color-white, #FFFFFF);
}

.protocolos-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (min-width: 992px) {
  .protocolos-faq-grid {
    grid-template-columns: minmax(360px, auto) 1fr;
    gap: clamp(40px, 5vw, 90px);
  }
}

.protocolos-faq-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.protocolos-faq-photo-wrap {
  position: relative;
  z-index: 2;
  width: clamp(320px, 48vw, 720px);
  height: clamp(320px, 48vw, 720px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  border: 30px solid var(--color-primary, #D42E12);
  flex-shrink: 0;
}

@media (min-width: 1360px) {
  .protocolos-faq-photo-wrap {
    width: 720px;
    height: 720px;
  }
}

.protocolos-faq-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.protocolos-faq-content {
  position: relative;
  z-index: 3;
}

.protocolos-faq-eyebrow {
  display: block;
  font-family: var(--font-body);
  color: var(--color-primary, #D42E12);
  font-weight: 700;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: clamp(12px, 1.5vw, 16px);
}

.protocolos-faq-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text, #231F20);
  margin-bottom: clamp(14px, 1.8vw, 20px);
  max-width: 520px;
}

.protocolos-faq-text {
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.6;
  color: #555555;
  margin-bottom: clamp(20px, 2.2vw, 28px);
  max-width: 520px;
}

/* --- Form Styles matching Figma --- */
.protocolos-form {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.protocolos-form-group {
  width: 100%;
}

.protocolos-form-input {
  width: 100%;
  border: 1.5px solid #231F20;
  border-radius: var(--radius-pill, 9999px);
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: transparent;
  color: #231F20;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.protocolos-form-input::placeholder,
.protocolos-form-textarea::placeholder {
  color: #777777;
  text-transform: lowercase;
  font-family: var(--font-body);
}

.protocolos-form-input:focus,
.protocolos-form-textarea:focus {
  border-color: var(--color-primary, #D42E12);
  box-shadow: 0 0 0 3px rgba(212, 46, 18, 0.12);
}

.protocolos-form-textarea {
  width: 100%;
  border: 1.5px solid #231F20;
  border-radius: 18px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: transparent;
  color: #231F20;
  outline: none;
  resize: vertical;
  min-height: 110px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.protocolos-form-consent {
  margin-top: 2px;
}

.protocolos-consent-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #555555;
  cursor: pointer;
  line-height: 1.4;
}

.protocolos-consent-label a {
  color: #231F20;
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.protocolos-consent-label a:hover {
  color: var(--color-primary, #D42E12);
}

.protocolos-consent-checkbox {
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary, #D42E12);
  cursor: pointer;
  flex-shrink: 0;
}

.protocolos-form-submit-wrap {
  margin-top: 6px;
  display: flex;
  justify-content: flex-start;
}

.protocolos-form-success {
  padding: 14px 20px;
  background-color: #E8F8F0;
  color: #1B7A43;
  border-radius: 12px;
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  max-width: 520px;
}


/* --- 4. CTA Banner Section --- */
.section-protocolos-cta {
  position: relative;
  overflow: clip;
  padding: clamp(4rem, 8vw, 8rem) 0;
  background-color: var(--color-white, #FFFFFF);
  text-align: center;
}

.protocolos-cta-content {
  position: relative;
  z-index: 3;
  max-width: 600px;
  margin: 0 auto;
}

.protocolos-cta-eyebrow {
  display: block;
  font-family: var(--font-body);
  color: var(--color-primary, #D42E12);
  font-weight: 700;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: clamp(12px, 1.5vw, 16px);
}

.protocolos-cta-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text, #231F20);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.protocolos-cta-text {
  font-family: var(--font-body);
  font-size: clamp(15px, 1vw, 16px);
  line-height: 1.6;
  color: var(--color-text, #231F20);
  margin-bottom: 32px;
}


/* CTA Visual Elements */
.protocolos-cta-ring-1 {
  position: absolute;
  top: 10%;
  left: 5%;
  width: clamp(30px, 4vw, 50px);
  height: clamp(30px, 4vw, 50px);
  border: 6px solid var(--color-primary, #D42E12);
  border-radius: 50%;
  z-index: 1;
}

.protocolos-cta-ring-2 {
  position: absolute;
  bottom: 10%;
  left: 15%;
  width: clamp(40px, 5vw, 70px);
  height: clamp(40px, 5vw, 70px);
  border: 8px solid var(--color-primary, #D42E12);
  border-radius: 50%;
  z-index: 1;
}

.protocolos-cta-ring-3 {
  position: absolute;
  top: 20%;
  right: 15%;
  width: clamp(20px, 3vw, 30px);
  height: clamp(20px, 3vw, 30px);
  border: 4px solid var(--color-primary, #D42E12);
  border-radius: 50%;
  z-index: 1;
}

.protocolos-cta-ring-4 {
  position: absolute;
  bottom: 20%;
  right: 5%;
  width: clamp(50px, 6vw, 90px);
  height: clamp(50px, 6vw, 90px);
  border: 10px solid var(--color-primary, #D42E12);
  border-radius: 50%;
  z-index: 1;
}

.protocolos-cta-ring-5 {
  position: absolute;
  bottom: 5%;
  right: 25%;
  width: clamp(15px, 2vw, 25px);
  height: clamp(15px, 2vw, 25px);
  border: 3px solid var(--color-primary, #D42E12);
  border-radius: 50%;
  z-index: 1;
}

.protocolos-cta-ring-6 {
  position: absolute;
  bottom: 30%;
  left: 25%;
  width: clamp(15px, 2vw, 20px);
  height: clamp(15px, 2vw, 20px);
  border: 3px solid var(--color-primary, #D42E12);
  border-radius: 50%;
  z-index: 1;
}