/*
Theme Name: Alcantara Conecta
*/

/* =========================
   RESET
========================= */
*,
*::before,
*::after{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
}

/* =========================
   VARIABLEN
========================= */
:root{
  --max:1120px;
  --pad:24px;

  --bg:#f6f9fc;
  --card:#fff;
  --radius:18px;
  --shadow:0 10px 28px rgba(16,42,67,.08);

  --text:#102a43;
  --muted:#6b7c93;
  --line:rgba(16,42,67,.12);

  --primary:#49b675;
  --primary-dark:#3aa564;
}

/* =========================
   BASE
========================= */
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.55;
}

.wp-site-blocks > *{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

/* =========================
   LOGO
========================= */
.brand{
  text-align:center;
  padding:32px 0 10px;
}
.brand img{
  max-width:320px;
}

/* =========================
   HERO
========================= */
.hero{
  text-align:center;
  padding:24px 0 32px;
}
.hero h1{
  font-size:34px;
  margin-bottom:10px;
}
.hero p{
  font-size:15px;
  color:var(--muted);
  margin-bottom:18px;
}

/* BUTTON */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
}
.btn--wa{
  background:var(--primary);
  color:#fff!important;
}
.btn__icon{
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  display:flex;
  align-items:center;
  justify-content:center;
}
.btn__icon svg{
  width:14px;
  height:14px;
  fill:#fff;
}

/* =========================
   CARD BASIS
========================= */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* =========================
   SPLIT – SEU NEGÓCIO
========================= */
.card.split{
  margin-top:28px;
  overflow:hidden;
}
.card.split .wp-block-column{
  padding:24px 26px;
}
@media(min-width:782px){
  .card.split .wp-block-columns::after{
    content:"";
    position:absolute;
    left:50%;
    top:20px;
    bottom:20px;
    width:1px;
    background:var(--line);
  }
}

/* =========================
   GRID 4 – SERVIÇOS
========================= */
.grid4{
  margin-top:28px;
}
.grid4 .wp-block-columns{
  gap:18px;
}
.grid4 .wp-block-column{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px 18px;
  text-align:center;
}
.tile__icon svg{
  width:22px;
  height:22px;
  fill:#284b63;
}
.grid4 h3{
  font-size:15px;
  margin:8px 0;
}
.grid4 p{
  font-size:14px;
  color:var(--muted);
}

/* =========================
   TWO BOXES
========================= */
.two{
  margin-top:28px;
}
.two .wp-block-columns{
  gap:18px;
}
.card.box{
  padding:26px;
}
.card.box h2{
  font-size:19px;
  margin-bottom:16px;
}

/* =========================
   COMO FUNCIONA – FINAL FIX
========================= */

/* alles links */
.card.box,
.card.box *{
  text-align:left!important;
}

/* jede Step-ZEILE erzwingen */
.card.box .step,
.card.box .wp-block-group.step{
  display:flex!important;
  align-items:flex-start;
  gap:14px;
  margin:14px 0!important;
}

/* ZAHL – egal ob p, span, id oder class */
.card.box .step .n,
.card.box .step #n,
.card.box .step > p:first-child{
  flex:0 0 32px!important;
  width:32px;
  height:32px;
  border-radius:50%!important;
  background:#eaf2ff;
  color:#123a5d;
  display:flex!important;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  line-height:1;
  margin:0!important;
  padding:0!important;
}

/* TEXT rechts */
.card.box .step p:not(.n):not(#n){
  flex:1;
  margin:0!important;
  font-size:15px;
  line-height:1.55;
  color:#334e68;
}

/* Trennlinie */
.card.box .step + .step{
  border-top:1px solid rgba(15,35,55,.08);
  padding-top:14px;
}

/* =========================
   TEAM
========================= */
.team{
  margin-top:36px;
  text-align:center;
}
.team h2{
  font-size:22px;
}
.team + p{
  max-width:760px;
  margin:10px auto 0;
  color:var(--muted);
}
.team__card{
  margin-top:18px;
  overflow:hidden;
}
.team__card .wp-block-column{
  padding:28px;
}
/* Team Bilder – größer & perfekt zentriert */
.person__avatar{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 12px;
}

.person__avatar img{
  width: 200px;          /* ⬅️ größer */
  height: 200px;         /* ⬅️ größer */
  border-radius: 50%;
  object-fit: cover;     /* sauberer als contain */
   object-position: center 30%; /* ⬅️ Kopf tiefer */
  background: #f1f6ff;
  border: 3px solid rgba(16,42,67,.14);
  display: block;
}


.person__name{
  font-weight:900;
  margin-top:10px;
}
.person__role{
  color:var(--muted);
}

/* Divider */
@media (min-width: 782px){
  .team__card .wp-block-columns::after{
    content:"";
    position:absolute;
    left:50%;
    top:220px;   /* ⬅️ STARTET ERST NACH DEN BILDERN */
    bottom:18px;
    width:1px;
    background:var(--line);
    transform: translateX(-0.5px);
  }
}



/* =========================
   FOOTER
========================= */
.footer{
  text-align:center;
  font-size:13px;
  color:var(--muted);
  padding:26px 0;
}

/* === FIX: gleiche Höhe Para quem / Como funciona === */
.two .wp-block-columns {
  align-items: stretch !important;
}

.two .wp-block-column {
  display: flex !important;
}

.two .wp-block-column > * {
  flex: 1 1 auto !important;
}

/* Feintuning: "Somos um casal" Text mittiger platzieren */
.team p{
  max-width: 620px;      /* etwas schmaler -> wirkt zentrierter */
  margin: 14px auto 22px;
  text-align: center;   /* bewusst zentriert */
  font-size: 15px;
  line-height: 1.65;
}