/* Shared styles for the static content templates: Termos, FAQ, Sobre, Contactos. */

/* ---------- generic page hero (Termos, Contactos) ---------- */
.str-page-hero{padding:44px var(--gutter) 30px;background:linear-gradient(120deg,var(--c-cream-1),var(--c-cream-2))}
.str-page-hero__title{font-size:56px;margin:0 0 10px}
.str-page-hero__lede{font:500 15px var(--font-body);color:var(--c-ink-soft);margin:0;max-width:640px}

/* ---------- legal / Termos ---------- */
.str-legal-layout{display:grid;grid-template-columns:280px 1fr;gap:48px;padding:38px 0 54px}
.str-legal-toc{position:sticky;top:20px;align-self:start}
.str-legal-toc__item{display:flex;gap:10px;font:600 13.5px var(--font-body);color:var(--c-ink-soft);padding:7px 0}
.str-legal-toc__item:hover{color:var(--c-accent)}
.str-legal-toc__num{color:var(--c-accent);font-weight:700;width:20px;flex:none}
.str-legal-help{margin-top:18px;border:1.5px solid var(--c-line-strong);border-radius:12px;padding:16px;font:500 13px/1.55 var(--font-body);color:var(--c-ink-soft)}
.str-legal-help__email{color:var(--c-accent);font-weight:700}
.str-legal-body{max-width:760px;display:flex;flex-direction:column;gap:30px}
.str-legal-section{scroll-margin-top:20px}
.str-legal-section h3{font-family:var(--font-display);font-weight:700;font-size:24px;margin:0 0 10px}
.str-legal-section__num{color:var(--c-accent)}
.str-legal-section p{font:500 15px/1.7 var(--font-body);color:var(--c-ink-soft);margin:0 0 12px}
.str-legal-section ul{font:500 15px/1.7 var(--font-body);color:var(--c-ink-soft);margin:0 0 12px;padding-left:22px}
.str-legal-section li{margin-bottom:6px}
@media (max-width:900px){
  .str-legal-layout{grid-template-columns:1fr}
  .str-legal-toc{position:static}
}

/* ---------- FAQ ---------- */
.str-faq-hero{padding:56px var(--gutter) 44px;background:linear-gradient(120deg,var(--c-cream-1),var(--c-cream-2))}
.str-faq-hero__title{font-size:60px;margin:14px 0}
.str-search{max-width:560px;margin:0 auto}
.str-search__input{
  width:100%;background:#fff;border:1.5px solid var(--c-line-strong);border-radius:14px;
  padding:15px 20px;font:500 15px var(--font-body);color:var(--c-ink);
}
.str-search__input:focus{outline:none;border-color:var(--c-accent)}
.str-chip-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.str-chip{
  font:600 13.5px var(--font-body);padding:9px 18px;border-radius:100px;background:#fff;
  border:1.5px solid var(--c-line-strong);color:var(--c-ink);cursor:pointer;
}
.str-chip.is-active{background:var(--c-dark);color:#fff;border-color:var(--c-dark)}
.str-faq-groups{display:flex;flex-direction:column;gap:40px;padding:44px 0 40px;max-width:920px;margin:0 auto}
.str-faq-group__title{font-family:var(--font-display);font-weight:700;font-size:28px;margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--c-dark)}
.str-accordion{display:flex;flex-direction:column;gap:12px}
.str-faq-item__q{padding-right:10px}
.str-faq-cta-wrap{max-width:920px;margin:0 auto;padding-bottom:54px}
.str-faq-cta{background:var(--c-dark);border-radius:var(--radius-xl);padding:44px 48px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;color:#fff}
.str-faq-cta__actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:700px){
  .str-faq-hero__title{font-size:40px}
}

/* ---------- Sobre / About ----------
   .str-about-stats/-story/-values/-team are meant to be combined with
   .str-container on the same element (e.g. class="str-container
   str-about-stats") so the grid/spacing rules here apply alongside the
   container's centering + side gutters. Only vertical padding is set here
   (via padding-top/-bottom, never the `padding` shorthand) so it can't
   stomp .str-container's padding-left/-right for the combined element. */
.str-about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:44px;padding-bottom:44px;border-bottom:1px solid var(--c-line)}
.str-about-stat__num{font-family:var(--font-display);font-weight:800;font-size:46px;line-height:1;color:var(--c-accent)}
.str-about-stat__label{font:600 13.5px var(--font-body);color:var(--c-ink-mute);margin-top:4px}
.str-about-story{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:56px;padding-bottom:56px;align-items:center}
.str-about-values{padding-top:20px;padding-bottom:56px;background:var(--c-panel)}
.str-about-values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.str-about-value{border:1.5px solid var(--c-line-strong);border-radius:var(--radius-lg);padding:26px;background:#fff}
.str-about-value__num{font-family:var(--font-display);font-weight:800;font-size:30px;color:rgba(240,138,60,.6);margin-bottom:10px}
.str-about-value__title{font:700 18px var(--font-body);margin-bottom:8px}
.str-about-value p{font:500 14px/1.6 var(--font-body);color:var(--c-ink-soft);margin:0}
.str-about-team{padding-top:56px;padding-bottom:56px}
.str-about-team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.str-about-team__name{font:700 16px var(--font-body)}
.str-about-team__role{font:500 13.5px var(--font-body);color:var(--c-accent)}
/* .str-about-cta is a self-contained card (own background/padding) meant
   to be NESTED inside a plain .str-container, not combined with it. */
.str-about-cta{margin:0 0 56px;background:var(--c-accent);border-radius:var(--radius-xl);padding:52px 48px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.str-about-cta__actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:900px){
  .str-about-stats{grid-template-columns:repeat(2,1fr)}
  .str-about-story{grid-template-columns:1fr}
  .str-about-values__grid{grid-template-columns:1fr 1fr}
  .str-about-team__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .str-about-values__grid{grid-template-columns:1fr}
  .str-about-team__grid{grid-template-columns:1fr}
}

/* ---------- Contactos ---------- */
.str-contact-layout{display:grid;grid-template-columns:1fr 380px;gap:48px;padding:40px 0 50px}
.str-contact-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.str-contact-info{display:flex;flex-direction:column;gap:24px}
.str-contact-channels{display:flex;flex-direction:column;gap:22px}
.str-contact-channel{display:flex;gap:14px;align-items:flex-start}
.str-contact-channel__icon{width:44px;height:44px;border-radius:12px;background:var(--c-accent-soft);flex:none}
.str-contact-channel__label{font:700 15px var(--font-body);margin-bottom:2px}
.str-contact-channel__value{display:block;font:700 15px var(--font-body);color:var(--c-accent)}
.str-contact-channel__sub{font:500 12.5px var(--font-body);color:var(--c-ink-mute);margin-top:2px}
.str-contact-hours{border:1.5px solid var(--c-line-strong);border-radius:var(--radius-lg);padding:22px;background:transparent}
.str-contact-social{display:flex;gap:12px}
.str-contact-social__link{flex:1;background:var(--c-accent-soft);border-radius:12px;padding:16px;text-align:center;font:700 13.5px var(--font-body);color:var(--c-accent-ink)}
.str-contact-map{padding-bottom:50px}
.str-contact-feedback{border-radius:10px;padding:13px 16px;font:600 13.5px var(--font-body);margin-bottom:18px}
.str-contact-feedback.is-success{background:rgba(47,125,107,.12);color:var(--c-ok)}
.str-contact-feedback.is-error{background:rgba(200,60,60,.1);color:#b23a3a}
@media (max-width:900px){
  .str-contact-layout{grid-template-columns:1fr}
}
@media (max-width:560px){
  .str-contact-form__grid{grid-template-columns:1fr}
}