/* Global styles - Currículos Online */
:root{
  --orange:#f97316;
  --orange-dark:#cc5600;
  --blue:#0077b6;
  --muted:#6c757d;
  --card-bg:#ffffff;
}

*{box-sizing:border-box}
body{font-family:Inter,Arial,Helvetica,sans-serif;margin:0;background:linear-gradient(180deg,#fff8f2,#fffdfb);color:#111}
.container{max-width:1200px;margin:0 auto;padding:26px}

/* Topbar brand */
.brand-title{
  font-family:'Merriweather',serif;
  font-weight:700;
  font-size:1.44rem; /* ~20% maior */
  color:#ffffff;
  padding:0;
  border-radius:0;
  background:none;
  -webkit-text-stroke:0;
  text-shadow:2px 2px 8px rgba(0,0,0,0.45);
}

/* Subtitle under brand */
.brand-sub{display:block;font-family:'Merriweather',serif;font-style:italic;font-weight:100;color:#ffffff;font-size:0.95rem;margin-top:6px;line-height:1}

/* Hero */
.hero{min-height:420px;background-size:cover;background-position:center;position:relative;display:flex;align-items:center;padding:48px 0}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.36),rgba(0,0,0,0.46))}
.hero-inner{position:relative;display:flex;gap:28px;align-items:center;width:100%}
.hero-copy{flex:1;color:#fff}
.hero-title{font-family:'Merriweather',serif;font-size:2.4rem;font-weight:600;line-height:1.02;margin:0 0 12px;color:#fff;text-shadow:0 6px 12px rgba(0,0,0,0.85)}
.hero-sub{opacity:0.95;margin-bottom:18px;font-size:1.05rem}
.benefits li{margin-top:6px}

/* Buttons */
.btn{display:block;padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:700;width:100%;text-align:center}
.btn.primary{background:var(--orange);color:#fff;box-shadow:0 12px 30px rgba(249,115,22,0.14);transition:transform .18s ease}
.btn.primary:hover{transform:translateY(-3px)}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.9);display:inline-block}

/* Cards / Plans */
.plans{padding:48px 0}
.plans{margin-top:8px !important}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:var(--card-bg);padding:20px;border-radius:12px;box-shadow:2px 2px 0 rgba(0,0,0,0.06), 0 10px 30px rgba(2,6,23,0.06);position:relative;display:flex;flex-direction:column}
.card::before{content:'';position:absolute;left:0;top:0;height:6px;width:100%;border-top-left-radius:12px;border-top-right-radius:12px;background:linear-gradient(90deg,var(--orange),#ffb870)}

/* Ensure cards in the grid have equal height */
.cards{grid-auto-rows:1fr}
.card-footer{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.card-footer .price{margin-bottom:6px;text-align:center}

/* Price styling */
.price{font-family:'Merriweather',serif;font-size:1.3rem;font-weight:700;color:var(--orange-dark);margin-bottom:10px}
.card.highlight{transform:translateY(-6px);border:2px solid rgba(249,115,22,0.08)}
.price{font-size:1.4rem;font-weight:900;margin-top:12px;color:var(--orange-dark)}
.features{margin-top:12px}

/* Services */
.services-table{width:100%;border-collapse:collapse}
.services-table th, .services-table td{padding:12px;border-bottom:1px solid #f0f0f0}

/* Examples grid */
.examples .grid{display:flex;flex-wrap:wrap;gap:18px}
.card.fixed-height{display:flex;flex-direction:column;flex:0 0 calc(25% - 13.5px)}
.card.fixed-height .card-body{flex:1}
.muted{color:var(--muted)}
.card-actions{display:flex;gap:8px;align-items:flex-end}
.btn.small{padding:8px 10px;border-radius:8px;font-size:0.9rem;display:inline-block;width:auto}
.btn.danger{background:#e3342f;color:#fff}
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,0.9);display:inline-block}
.btn.ghost:hover{background:rgba(255,255,255,0.06)}

/* Contact */
.contact{padding:48px 0}
.plans, .services, .examples, .contact{margin-top:50px}

/* Reduce space between plans and services (50% reduction) */
.plans + .services { margin-top:25px !important; }

/* Reduce space between the previous media section (tight) and the following .plans (50% reduction) */
.media-section.media-section--tight + .plans { margin-top:25px !important; }

/* Reduce 50% of vertical gap between consecutive media sections (first media-section and the following .media-section--tight) */
.media-section + .media-section.media-section--tight {
  margin-top: -48px !important; /* pulls the second section up to halve the gap */
}

/* Section titles — unified page-title style */
.section-title{font-family:'Merriweather',serif;color:var(--orange);font-size:1.89rem;text-align:center;margin-bottom:18px;font-weight:700;text-shadow:2px 2px 0 rgba(0,0,0,0.65)}

/* Hero title keeps its own rules */
h1.hero-title { font-family:'Merriweather',serif; }

/* Card-like container for tables/forms */
.card.table-card{padding:18px}

/* Select arrow prettier */
select.custom-arrow{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%, var(--orange) 50%), linear-gradient(135deg,var(--orange) 50%,transparent 50%);background-position:calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);background-size:8px 8px,8px 8px;background-repeat:no-repeat;padding-right:38px;border:1px solid #e8e8e8;background-color:#fff;padding:12px;border-radius:8px}

.required{color:#d90429;margin-left:6px}

/* Make section headings that used to be black centered and serif — now unified */
.media .media-content h2{font-family:'Merriweather',serif;font-size:1.89rem;color:var(--orange);text-shadow:2px 2px 0 rgba(0,0,0,0.65);text-align:center;font-weight:700}
.media.reverse .media-content h2{font-family:'Merriweather',serif;font-size:1.89rem;color:var(--orange);text-shadow:2px 2px 0 rgba(0,0,0,0.65);text-align:center;font-weight:700}
.contact form label{display:block;margin-bottom:10px}
.contact input, .contact textarea, .contact select{width:100%;padding:12px;border-radius:10px;border:1px solid #efefef}
.contact .row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.newsletter{margin-top:18px}

/* custom select arrow */
select.custom-arrow{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%, #333 50%), linear-gradient(135deg,#333 50%,transparent 50%);background-position:calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:34px}

/* WhatsApp floating */
.whatsapp{position:fixed;right:20px;bottom:20px;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#25d366;color:#fff;font-size:30px;z-index:1000;box-shadow:0 0 0 0 rgba(37,211,102,0.7);animation:pulse-green 2s infinite}
@keyframes pulse-green{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(37,211,102,0.7)}70%{transform:scale(1);box-shadow:0 0 0 20px rgba(37,211,102,0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* Footer: 3 columns responsive flex */
.site-footer{background:linear-gradient(180deg,var(--orange-dark),var(--orange));color:#fff;padding:36px 0;margin-top:40px}
.site-footer .footer-grid{display:flex;flex-wrap:wrap;gap:24px}
.site-footer .footer-grid > div{flex:1 1 220px;min-width:0}
.site-footer h4{font-family:'Playfair Display',serif;font-weight:700;margin-bottom:10px;text-shadow:0 4px 10px rgba(0,0,0,0.2)}
.footer-quick a{color:#fff;text-decoration:none;display:block;margin-bottom:6px}
@media(max-width:640px){.site-footer .footer-grid{flex-direction:column}}

/* Footer divider + copyright */
.footer-divider { border:none; border-top:1px solid rgba(255,255,255,0.25); margin:28px 0 14px; }
.footer-copy { text-align:center; font-size:0.82rem; color:rgba(255,255,255,0.8); margin:0; padding-bottom:6px; }

/* Responsive */
@media(max-width:980px){.hero-inner{flex-direction:column}.hero-image img{max-width:320px}.cards{grid-template-columns:1fr}.contact .row{grid-template-columns:1fr}.card.fixed-height{flex:0 0 calc(50% - 9px)}}
@media(max-width:520px){.hero-title{font-size:1.6rem}.brand-title{font-size:0.9rem}.card.fixed-height{flex:0 0 100%}}

/* Media sections with directional images */
.media-section{padding:48px 0}
.media-section--tight{padding-bottom:0}
.media-section--tight{padding-bottom:0}
.media{display:flex;align-items:center;gap:28px;justify-content:space-between;flex-wrap:wrap}
.media-img{flex:0 0 48%;display:flex;align-items:center;justify-content:center}
.media-img img{width:100%;max-width:100%;border-radius:12px;object-fit:cover;box-shadow:0 12px 30px rgba(2,6,23,0.08);margin:20px;display:block}
.media-content{flex:1;padding:12px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}
.media-content p{max-width:600px}
.media .media-content h2{font-family:'Merriweather',serif;font-size:1.89rem;margin-bottom:8px;color:var(--orange);text-shadow:2px 2px 0 rgba(0,0,0,0.65);text-align:center;font-weight:700}

/* Card headings: uppercase, gray shadow, normal card size */
.card h3 { text-shadow:2px 2px 0 rgba(0,0,0,0.12); font-size:1.05rem; font-weight:700; text-transform:uppercase }
.card h4 { text-shadow:2px 2px 0 rgba(0,0,0,0.12); font-size:1.0rem; font-weight:700; text-transform:uppercase }
/* Plan titles: 25% larger, bold */
.card.plan-basico h3, .card.plan-plus h3 { font-size:1.31rem; font-weight:700 }
/* Inclui / Inclui tudo do Plano Básico +: orange, 10% smaller */
.card .features h4 { color:var(--orange); font-size:0.95rem; text-transform:none; text-shadow:2px 2px 0 rgba(0,0,0,0.12) }
.media.reverse{flex-direction:row-reverse}

@media(max-width:900px){
  .media{flex-direction:column;gap:8px}
  .media.reverse{flex-direction:column}
  .media-img{width:100%;justify-content:center}
  .media-img img{margin:20px auto;width:calc(100% - 40px)}
  .media-content{width:100%;padding:16px;align-items:center}
}

/* Make footer text slightly smaller */
.site-footer p{font-size:0.85rem}

/* Hero image adjustments (darker shadow already possible inline) */
.hero-image img{margin:20px;box-shadow:0 20px 40px rgba(0,0,0,0.45)}

/* WhatsApp: remove underline */
.whatsapp, .whatsapp:hover, .whatsapp:focus {text-decoration:none}

/* Anchor scrolling offset so section titles are visible */
.plans, .services, .examples, .contact{scroll-margin-top:90px}

/* Card title colors */
.card.plan-basico h3{color:#16a34a}
.card.plan-plus h3{color:#1e3a8a}
.card.info-important h4{color:#dc2626}
.card.what-you-receive h4{color:#a21caf}

/* Currículos Online title specific spacing */
.examples .section-title{margin-top:50px}

/* Destaque-se com Autoridade title: 10% smaller than default section-title */
.media-section--tight .section-title{font-size:1.70rem}

/* Section titles per-section override — ensure unified style */
.plans .section-title, .services .section-title, .examples .section-title, .contact .section-title {
  font-family:'Merriweather',serif;
  color:var(--orange);
  text-shadow:2px 2px 0 rgba(0,0,0,0.65);
  font-weight:700;
  text-align:center;
  font-size:1.89rem;
}

/* Non-hero page headings: orange with subtle right-bottom 2px shadow,
   Merriweather font and 20% larger than .section-title (1.75rem -> 2.1rem) */
h1:not(.hero-title), h2, h3 {
  color: var(--orange);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.65);
  font-family: 'Merriweather', serif;
  font-size: 1.89rem;
  font-weight:700;
}

/* Keep hero title white and with its stronger shadow */
.hero-title {
  color: #fff;
  text-shadow: 0 6px 12px rgba(0,0,0,0.85);
}

/* Hero buttons: keep width to content and padding 20px */
.hero .btn { display:inline-block; width:auto; padding:20px }

/* Remove list bullets inside cards but keep indentation */
.card ul { list-style:none; padding-left:5px; margin:0 0 0 -10px; }
.card ul li { font-size:0.8rem; display:flex; align-items:flex-start; }
.card ul li i { flex-shrink:0; margin-top:0.18em; }
.card ul .fa-check { color:#008000; }
.card ul .fa-xmark { color:#dc2626; }

/* Card foto — round avatar in curriculo cards */
.card-foto { display:flex; justify-content:center; padding:16px 16px 0; }
.card-foto img { width:150px; height:150px; border-radius:50%; object-fit:cover; box-shadow:0 4px 18px rgba(0,0,0,0.22); }
.card-foto-placeholder { width:150px; height:150px; border-radius:50%; background:#e0e0e0; display:flex; align-items:center; justify-content:center; font-size:3rem; color:#aaa; }


/* Keep footer subscribe button and other small action buttons inline */
.site-footer .btn.primary, .cards .card .btn.small, .examples .card .btn.small {display:inline-block;width:auto}
/* Ver Site button in curriculum cards — brown */
.examples .card .btn.primary { background:#7c4a03; box-shadow:0 12px 30px rgba(124,74,3,0.18); }
/* Newsletter Assinar button — brown */
#newsletter-form .btn.primary { background:#7c4a03; box-shadow:0 12px 30px rgba(124,74,3,0.18); }

/* Random banners row: two images side-by-side, occupying 90% width responsively */
.random-banner-row{
  display:flex;
  width:90%;
  max-width:1000px;
  margin:0 auto; /* remove top/bottom margin */
  padding:0; /* remove internal padding */
  gap:10px; /* 10px gap between images */
  box-sizing:border-box;
  background:transparent; /* transparent container per request */
  align-items:stretch; /* ensure children stretch to same height */
  justify-content:center;
}
.random-banner-wrap{
  /* wrappers are transparent, no shadows or rounded corners; widths set by JS */
  flex:0 0 auto; /* width will be set by JS based on image aspect ratio */
  height:100%;
  display:flex;
  align-items:stretch;
  justify-content:center;
  background:transparent;
  overflow:hidden; /* hide overflow so images stay within their column */
  padding:0; /* ensure no internal spacing */
  border-radius:0; /* wrappers/cards must not have rounded corners */
  box-shadow:none; /* wrappers/cards must not have shadows */
}
/* modifier classes kept for semantics but layout handled by JS */
.random-banner-wrap--left{}
.random-banner-wrap--right{}

/* Image styling: rounded corners on the images themselves, responsive and contained */
.random-banner{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain; /* avoid cropping */
  border-radius:14px; /* rounding applied to the image itself */
  box-shadow:0 10px 24px rgba(0,0,0,0.12);
}

@media(max-width:720px){
  .random-banner-row{flex-direction:column;width:95%;}
  .random-banner-wrap{flex-basis:100%;height:auto}
  .random-banner{width:100%;height:auto;max-width:100%}
}

/* Force 5px spacing specifically between exemplos and contato sections */
#exemplos {
  margin-top: 0 !important;
  margin-bottom: 60px !important;
  padding-bottom: 0 !important;
}
#contato {
  margin-top: 60px !important;
  padding-top: 0 !important;
}

/* Reduce gap between main and footer to 5px */
main { margin-bottom: 5px !important; }
.site-footer { margin-top: 5px !important; }