:root{
  --bg:#f4f2ed;
  --surface:#fdfcf9;
  --line:#e3ded3;
  --line-cool:#cfdcd8;
  --ink:#26302e;
  --ink-soft:#5a635f;
  --green:#2f6f62;
  --accent:#3e8ea6;
  --accent-dark:#327a90;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
a{color:var(--green);text-decoration:none}
a:hover{color:#1f4d43;text-decoration:underline}

/* placeholders — replace with real <img> */
.ph{
  background:repeating-linear-gradient(135deg,#e8e1d4 0 8px,#f2ece1 8px 16px);
  border:1px solid #ddd4c4;
  display:flex;
  align-items:flex-end;
  padding:10px;
}
.ph__label{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  color:#857c6c;
  background:rgba(253,252,249,.8);
  padding:4px 7px;
  border-radius:5px;
}
.ph--img{aspect-ratio:4/3;border-radius:var(--radius);justify-content:center;padding:14px}
.ph--img .ph__label{font-size:12px}

/* header */
.topbar{
  position:sticky;top:0;z-index:20;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:10px;color:inherit}
.brand:hover{text-decoration:none}
.brand__mark{
  width:38px;height:38px;border-radius:10px;
  align-items:center;justify-content:center;padding:0;
  font-family:"IBM Plex Mono",monospace;font-size:7px;color:#8d8474;
}
.brand__name{font-size:21px;font-weight:900;letter-spacing:-.02em;color:var(--green)}

.burger{
  width:46px;height:46px;flex:0 0 auto;
  border:1px solid #ddd4c4;border-radius:10px;background:#f7f3ea;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;
}
.burger:hover{background:#efe9dc}
.burger span{width:22px;height:2.5px;background:#3a4a46;border-radius:2px}

/* menu */
.menu{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;
}
.menu[hidden]{display:none}
.menu a{
  padding:15px 20px;font-size:17px;font-weight:700;
  border-bottom:1px solid #efe9de;
}
.menu a:last-child{border-bottom:0}
.menu a:hover{background:#f4f0e6;text-decoration:none}

/* layout */
.wrap{
  width:100%;max-width:1120px;margin:0 auto;
  padding:0 0 48px;
  display:flex;flex-direction:column;gap:34px;
}

/* hero */
.hero{
  display:flex;flex-wrap:wrap;align-items:center;gap:26px;
  padding:34px 18px 0;
}
.hero__copy{
  flex:1 1 280px;min-width:0;
  display:flex;flex-direction:column;gap:16px;align-items:flex-start;
}
.hero__media{flex:1 1 300px;min-width:0}
.hero h1{
  margin:0;font-size:clamp(34px,7vw,52px);line-height:1.08;
  font-weight:900;letter-spacing:-.025em;color:var(--green);text-wrap:balance;
}
.hero p{margin:0;font-size:clamp(17px,2.4vw,20px);line-height:1.45;color:#4d5a56;max-width:34ch}

/* buttons */
.btn{
  display:block;text-align:center;
  background:var(--accent);color:#fff;
  font-size:15px;font-weight:700;
  padding:11px 14px;border-radius:999px;
}
.btn:hover{background:var(--accent-dark);color:#fff;text-decoration:none}
.btn--lg{
  align-self:stretch;max-width:420px;
  font-size:19px;padding:17px 28px;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
}

.notice{
  margin:0 18px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  font-size:15px;line-height:1.45;color:var(--ink-soft);text-align:center;
}

/* pets section */
.pets{display:flex;flex-direction:column;gap:16px}
.pets__head{padding:0 18px;display:flex;flex-direction:column;gap:6px}
.pets__head h2{margin:0;font-size:clamp(24px,4.4vw,32px);font-weight:900;letter-spacing:-.02em;color:#2c3b38}
.pets__head p{margin:0;font-size:16px;color:var(--ink-soft)}

.tabs{
  display:flex;margin:0 18px;
  border:1px solid var(--line-cool);border-radius:12px;overflow:hidden;
}
.tabs button{
  flex:1 1 0;min-width:0;
  border:0;border-right:1px solid var(--line-cool);
  padding:14px 8px;font:700 17px/1.2 inherit;
  background:var(--surface);color:var(--green);cursor:pointer;
}
.tabs button:last-child{border-right:0}
.tabs button:hover{background:#eef5f6}
.tabs button[aria-pressed="true"]{background:var(--accent);color:#fff}

/* carousel */
.carousel{display:flex;flex-direction:column;gap:14px}
.track{
  display:flex;gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:4px 18px 8px;
  scrollbar-width:none;
}
.track::-webkit-scrollbar{display:none}
.card{
  flex:0 0 auto;
  width:clamp(210px,44vw,260px);
  scroll-snap-align:start;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.card[hidden]{display:none}
.card__img{aspect-ratio:4/3}
.card__body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:8px}
.card__body h3{margin:0;font-size:20px;font-weight:900;color:#2c3b38}
.card__body p{margin:0;font-size:15px;color:#6a736f}
.card__body .btn{margin-top:4px}

.carousel__nav{display:flex;align-items:center;justify-content:center;gap:18px}
.arrow{
  width:46px;height:46px;border-radius:999px;
  border:1px solid var(--line-cool);background:var(--surface);
  color:var(--accent);font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.arrow:hover{background:#eef5f6}
.arrow[disabled]{opacity:.4;cursor:default}
.dots{display:flex;align-items:center;gap:9px}
.dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:999px;
  background:var(--line-cool);cursor:pointer;
  transition:width .2s ease,background .2s ease;
}
.dots button[aria-current="true"]{width:26px;background:var(--accent)}

/* footer */
.footer{
  margin-top:auto;
  background:var(--surface);border-top:1px solid var(--line);
  padding:22px 18px 30px;
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
  font-size:15px;color:#6a736f;
}

/* desktop: menu inline */
@media (min-width:840px){
  .burger{display:none}
  .menu,.menu[hidden]{
    display:flex;flex-direction:row;justify-content:center;gap:4px;
  }
  .menu a{border-bottom:0;border-radius:8px;padding:12px 14px}
}

@media (prefers-reduced-motion:reduce){
  .track{scroll-behavior:auto}
  .dots button{transition:none}
}


/* ===== pet detail (ficha) ===== */
.page--ficha{background:#fdf4e6}
.topbar--ficha{justify-content:space-between}
.back{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;
  font-size:17px;font-weight:700;
  padding:11px 20px 11px 16px;border-radius:10px;
}
.back:hover{background:var(--accent-dark);color:#fff;text-decoration:none}
.back__chev{font-size:22px;line-height:1}
.brand__logo{width:52px;height:52px;object-fit:contain;display:block}

.ficha{gap:26px;padding-top:26px}
.ficha__top{display:flex;flex-wrap:wrap;gap:24px;padding:0 18px}
.ficha__photo{flex:1 1 300px;min-width:0}
.ficha__photo .ph--img{aspect-ratio:1/1;border-radius:16px;background-color:#fff;box-shadow:0 2px 10px rgba(60,45,20,.10)}
.ficha__data{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:14px}

.ficha__title{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;
  border-bottom:1px solid #e0d7c4;padding-bottom:10px;
}
.ficha__title h1{margin:0;font-size:clamp(32px,5vw,44px);font-weight:900;letter-spacing:-.02em;color:#4a5a56}
.ficha__stamp{margin:0;font-size:clamp(15px,1.8vw,18px);line-height:1.4;font-weight:700;color:#3c4a47}
.ficha__sub{margin:0;font-size:clamp(17px,2.2vw,21px);color:#4d5a56}

.facts{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:1px;background:#e0d7c4;border:1px solid #e0d7c4;border-radius:10px;overflow:hidden;
}
.facts li{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);padding:13px 14px;
  font-size:clamp(15px,1.7vw,17px);color:#39433f;
}
.facts__icon{
  flex:0 0 auto;width:30px;height:30px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:15px;line-height:1;
}
.facts__icon--teal{background:#12798c}
.facts__icon--cyan{background:#1f9fb5}
.facts__icon--amber{background:#f0b429;color:#5b4409}
.facts__icon--red{background:#d8392b}

.ficha__desc{margin:0;font-size:clamp(16px,1.9vw,19px);line-height:1.55;color:#3c4a47;text-wrap:pretty}
.ficha__fee{display:block;margin-top:8px;font-weight:900;color:#2c3b38}

.gallery{
  display:flex;align-items:center;gap:12px;
  padding:20px 18px 0;border-top:1px solid #e0d7c4;margin:0 18px;
}
.gallery__track{
  flex:1 1 auto;min-width:0;
  display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;padding:4px 0 8px;scrollbar-width:none;
}
.gallery__track::-webkit-scrollbar{display:none}
.thumb{
  flex:0 0 auto;width:clamp(150px,30vw,215px);
  scroll-snap-align:start;padding:5px;cursor:pointer;
  background:var(--surface);border:1px solid #e0d7c4;border-radius:10px;
}
.thumb:hover{border-color:var(--accent)}
.thumb[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(62,142,166,.3)}
.ph--thumb{aspect-ratio:3/2;border-radius:6px;justify-content:center;align-items:flex-end;width:100%}

.ficha__actions{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  padding:0 18px;
}
.ficha__actions .btn--lg{flex:1 1 260px;max-width:none;font-size:clamp(17px,2vw,20px)}
.btn--fav{border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.btn__heart{font-size:18px}
.btn--fav[aria-pressed="true"]{background:#d8392b}
.btn--fav[aria-pressed="true"]:hover{background:#b92f23}

@media (max-width:560px){
  .topbar--ficha .brand__name{display:none}
  .ficha__actions .btn--lg{flex:1 1 100%}
}


/* ===== 404 ===== */
.e404{
  flex:1 1 auto;
  align-items:center;text-align:center;
  gap:18px;padding:clamp(40px,9vw,90px) 18px 60px;
}
.e404__code{
  margin:0;font-size:clamp(76px,19vw,150px);line-height:.85;
  font-weight:900;letter-spacing:-.05em;color:var(--green);
  opacity:.22;
}
.e404__title{
  margin:0;font-size:clamp(28px,5.4vw,42px);line-height:1.1;
  font-weight:900;letter-spacing:-.025em;color:var(--green);text-wrap:balance;
}
.e404__text{
  margin:0;max-width:46ch;
  font-size:clamp(16px,2.1vw,19px);line-height:1.5;color:var(--ink-soft);text-wrap:pretty;
}
.e404__actions{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  width:100%;max-width:560px;margin-top:6px;
}
.e404__actions .btn--lg{flex:1 1 220px;max-width:none}
.btn--ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.btn--ghost:hover{background:var(--accent);color:#fff}
.e404__links{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
  margin-top:10px;font-size:15px;
}


/* ===== test de compatibilidad ===== */
.page--test{background:#f7f1e6}
.back--quiet{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);padding:9px 16px}
.back--quiet:hover{background:var(--accent);color:#fff}

.test{gap:20px;padding-top:24px}
.test__head{padding:0 18px;display:flex;flex-direction:column;gap:8px}
.test__head h1{margin:0;font-size:clamp(26px,4.6vw,38px);font-weight:900;letter-spacing:-.025em;color:#2b3b46}
.test__progress{margin:0;font-size:15px;color:var(--ink-soft)}
.bar{height:10px;border-radius:999px;background:#ddd6c8;overflow:hidden;max-width:520px}
.bar__fill{height:100%;background:#12798c;border-radius:999px;transition:width .25s ease}

#quiz{display:flex;flex-direction:column;gap:14px;padding:0 18px}
.step{display:flex;flex-direction:column;gap:12px}
.step[hidden]{display:none}

.q{
  margin:0;border:1px solid #e0d7c4;border-radius:12px;
  background:var(--surface);padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.q--miss{border-color:#d8392b;box-shadow:0 0 0 2px rgba(216,57,43,.15)}
.q legend{
  float:left;width:100%;padding:0;margin:0 0 10px;
  display:flex;align-items:center;gap:10px;
  font-size:clamp(16px,2vw,19px);font-weight:700;color:#2b3b46;
}
.q__icon{
  flex:0 0 auto;width:30px;height:30px;border-radius:8px;
  background:#e2f0f3;color:#12798c;
  display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;
}
.opts{clear:both;display:flex;flex-wrap:wrap;gap:10px}
.opts label{display:block}
.opts input{position:absolute;opacity:0;width:0;height:0}
.opts span{
  display:block;cursor:pointer;
  padding:11px 18px;border-radius:8px;
  border:1px solid #bcdde4;background:#eaf5f7;
  font-size:16px;font-weight:700;color:#12798c;
  min-height:44px;display:flex;align-items:center;
}
.opts label:hover span{background:#daeef2}
.opts input:checked + span{background:#12798c;border-color:#12798c;color:#fff}
.opts input:focus-visible + span{outline:3px solid #f0b429;outline-offset:2px}

.test__hint{margin:0 0 4px;min-height:20px;font-size:15px;font-weight:700;color:#c0392b}
.test__nav{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
.test__nav .btn{flex:1 1 200px;max-width:none}
.btn--muted{background:#e6e0d4;color:#4b544f}
.btn--muted:hover{background:#d9d2c3;color:#3a423e}
.btn--muted:disabled{opacity:.45;cursor:default}

/* ===== resultados ===== */
.res{gap:22px;padding-top:26px}
.res__head{text-align:center;padding:0 18px;display:flex;flex-direction:column;gap:6px}
.res__head h1{margin:0;font-size:clamp(27px,4.8vw,40px);font-weight:900;letter-spacing:-.025em;color:#2b3b46;text-wrap:balance}
.res__head p{margin:0;font-size:clamp(16px,2vw,18px);color:var(--ink-soft)}

.res__block{padding:18px 18px 0;margin:0 18px;border-top:1px solid #e0d7c4;display:flex;flex-direction:column;gap:14px}
.res__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.res__label{margin:0;display:flex;align-items:center;gap:10px;font-size:clamp(18px,2.4vw,23px);font-weight:700;color:#2b3b46}
.res__label--muted{color:#6a736f}
.res__star{color:#f0b429;font-size:24px}
.res__heart{color:#3e8ea6;font-size:20px}
.res__down{
  width:26px;height:26px;border-radius:999px;background:#cfc8ba;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;
}
.pill{
  margin:0;background:#12798c;color:#fff;border-radius:999px;
  padding:9px 20px;font-size:clamp(15px,1.8vw,17px);
}
.res__empty{margin:0;color:var(--ink-soft);font-size:16px}

.ph--round{border-radius:999px;aspect-ratio:1/1;width:100%;align-items:center;justify-content:center;padding:6px}
.ph--sm{width:66px;flex:0 0 66px}

.match{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  background:var(--surface);border:1px solid #e0d7c4;border-radius:14px;padding:18px;
}
.match__photo{flex:0 0 clamp(120px,22vw,180px)}
.match__body{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:12px}
.match__name{margin:0;font-size:clamp(21px,3vw,28px);font-weight:900;color:#2f7d4a}
.match__pct{color:#2f7d4a}
.match__of{font-weight:400;font-size:.72em;color:#3c4a47}
.match__facts{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.match__facts li{font-size:clamp(15px,1.8vw,17px);color:#39433f;padding-left:16px;position:relative}
.match__facts li::before{content:"•";position:absolute;left:0;color:#2f7d4a;font-weight:900}
.match__cta{align-self:flex-start;max-width:none}

.others{display:flex;flex-wrap:wrap;gap:14px}
.mini{
  flex:1 1 250px;min-width:0;
  background:var(--surface);border:1px solid #e0d7c4;border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:10px;
}
.mini__top{display:flex;align-items:center;gap:12px}
.mini__id{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.mini__name{font-size:19px;font-weight:900;color:#2b3b46}
.mini__pct{background:#e8922b;color:#fff;font-weight:900;font-size:15px;padding:4px 11px;border-radius:999px}
.mini__facts{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mini__facts li{font-size:15px;color:#39433f;padding-left:14px;position:relative}
.mini__facts li::before{content:"•";position:absolute;left:0;color:#12798c;font-weight:900}
.mini__cta{margin-top:auto}

.lowbtn{
  width:100%;background:var(--surface);border:1px solid #e0d7c4;border-radius:10px;
  padding:15px;font:700 clamp(15px,1.9vw,17px)/1.3 inherit;color:var(--accent);cursor:pointer;
}
.lowbtn:hover{background:#eef5f6}
#low[hidden]{display:none}


/* ===== registro del adoptante ===== */
.reg{gap:18px;padding-top:26px}
.reg__head{padding:0 18px;display:flex;flex-direction:column;gap:6px;text-align:center}
.reg__head h1{margin:0;font-size:clamp(26px,4.6vw,38px);font-weight:900;letter-spacing:-.025em;color:#2b3b46}
.reg__head p{margin:0;font-size:16px;color:var(--ink-soft)}
.reg__form{display:flex;flex-direction:column;gap:16px;padding:0 18px}

.fcard{
  background:var(--surface);border:1px solid #e0d7c4;border-radius:14px;
  padding:18px;display:flex;flex-direction:column;gap:16px;
}
.fcard__title{
  margin:0;padding-bottom:10px;border-bottom:1px solid #e8e1d2;
  font-size:clamp(19px,2.4vw,23px);font-weight:900;color:#12798c;
}

.field{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:7px}
.field > label,.field legend{
  padding:0;font-size:16px;font-weight:700;color:#2b3b46;
}
.field abbr{color:#c0392b;text-decoration:none}
.field__help{margin:0;font-size:14px;color:#77807c}
.field--inline legend{margin-bottom:8px}
.field--invalid input,.field--invalid select{border-color:#d8392b;box-shadow:0 0 0 2px rgba(216,57,43,.14)}
.field--invalid legend{color:#c0392b}

input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="date"],textarea,select{
  width:100%;font:400 16px/1.3 inherit;color:var(--ink);
  background:#fff;border:1px solid #cfd8d5;border-radius:8px;
  padding:12px 13px;min-height:46px;
}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #7fc2d1;outline-offset:1px;border-color:var(--accent)}
input[type="file"]{
  width:100%;font:400 15px/1.3 inherit;
  background:#eaf5f7;border:1px dashed #7fc2d1;border-radius:8px;padding:12px;cursor:pointer;
}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.opts--sm span{padding:9px 15px;font-size:15px}

.filelist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.filelist li{
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:#4c5a56;
  background:#eef5f6;border:1px solid #cfdcd8;border-radius:6px;padding:5px 9px;
}
.filelist li.bad{background:#fdecea;border-color:#e5a49d;color:#a3291c}

.note{
  display:flex;gap:12px;align-items:flex-start;
  border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.5;
}
.note p{margin:0}
.note__icon{font-size:20px;line-height:1.2}
.note--warn{background:#fdf1dd;border:1px solid #f0d199;color:#5b4409}
.note--info{background:#eaf2f7;border:1px solid #bcd3e2;color:#254656}

.check{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45;color:#39433f;padding:0 2px}
.check input{width:22px;height:22px;flex:0 0 auto;margin-top:1px;accent-color:#12798c}
.reg__submit{align-self:center;min-width:min(100%,340px)}


/* ===== imágenes reales (reemplazan los marcadores .ph) ===== */
/* La mascota nunca se recorta: la imagen se escala proporcionalmente
   dentro de su caja (object-fit:contain) sobre un fondo neutro. */
.hero__img{
  display:block;width:100%;height:auto;max-height:420px;object-fit:contain;
  border-radius:var(--radius);border:1px solid #ddd4c4;background:#efe9de;
}
.card__img{
  display:block;width:100%;height:170px;object-fit:contain;
  background:#efe9de;border-bottom:1px solid #e8e1d2;
}
.ficha__img{
  display:block;width:100%;height:auto;max-height:520px;object-fit:contain;
  border-radius:16px;border:1px solid #ddd4c4;background:#fff;
  box-shadow:0 2px 10px rgba(60,45,20,.10);
}
.thumb img{display:block;width:100%;height:110px;object-fit:contain;background:#efe9de;border-radius:6px}
.round{
  display:block;width:100%;height:170px;object-fit:contain;
  border-radius:12px;border:1px solid #ddd4c4;background:#efe9de;
}
.round--sm{height:76px;flex:0 0 96px;width:96px}


/* ===== pantallas de estado (enviada / aprobada / rechazada / revisión) ===== */
.page--status{background:#eef0f4}
.status{align-items:center;gap:0;padding:56px 18px 60px;flex:1 1 auto}
.status__mark{
  width:92px;height:92px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-size:48px;color:#fff;line-height:1;
  margin-bottom:-46px;position:relative;z-index:1;
  box-shadow:0 4px 14px rgba(30,40,50,.18);
}
.status__mark--ok{background:#1aa6b0}
.status__mark--green{background:#22a35e}
.status__mark--bad{background:#e03127}
.status__mark--wait{background:#e8922b;font-size:38px}

.statuscard{
  width:100%;max-width:720px;
  background:#fbfbfc;border:1px solid #dfe2e8;border-radius:16px;
  padding:64px 30px 30px;
  display:flex;flex-direction:column;gap:0;
  box-shadow:0 6px 24px rgba(40,50,60,.08);
}
.statuscard h1{
  margin:0 0 18px;text-align:center;
  font-size:clamp(25px,4.4vw,36px);font-weight:900;letter-spacing:.02em;
  text-transform:uppercase;color:#4a5560;
}
.statuscard__lead{
  margin:0;padding:18px 0;border-top:1px solid #e4e7ec;
  text-align:center;font-size:clamp(17px,2.3vw,21px);font-weight:700;color:#3d4853;text-wrap:pretty;
}
.statuscard__lead strong{color:#1aa6b0}
.statuscard__body{display:flex;flex-direction:column}
.statuscard__body p{
  margin:0;padding:16px 0;border-top:1px solid #e4e7ec;
  font-size:clamp(16px,2vw,18px);line-height:1.5;color:#49535c;text-wrap:pretty;
}
.statuscard__cta{align-self:center;margin-top:24px;min-width:min(100%,300px)}

.demo{
  width:100%;max-width:720px;margin-top:22px;
  background:#fff;border:1px dashed #b9c2cc;border-radius:12px;padding:16px;
  display:flex;flex-direction:column;gap:12px;
}
.demo__title{margin:0;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#77818b}
.demo__row{display:flex;flex-wrap:wrap;gap:10px}
.demo__btn{flex:1 1 180px;font-size:15px}
.demo__btn--ok{background:#22a35e}
.demo__btn--ok:hover{background:#1b8a4f}
.demo__btn--no{background:#e03127}
.demo__btn--no:hover{background:#bf261d}
.demo__btn--wait{background:#e8922b}
.demo__btn--wait:hover{background:#cc7d1e}

/* ===== pago + contrato ===== */
.summary{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.summary li{
  display:flex;justify-content:space-between;gap:16px;
  padding:12px 0;border-top:1px solid #eee7d9;font-size:16px;color:#39433f;
}
.summary li:first-child{border-top:0}
.summary__total{font-size:19px;font-weight:900;color:#12798c;border-top:2px solid #cfdcd8}

.contract__step{
  margin:0;font-family:"IBM Plex Mono",monospace;font-size:15px;color:#6a736f;
}
.cstep{display:flex;flex-direction:column;gap:16px}
.cstep[hidden]{display:none}
.deflist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.deflist li{font-size:16px;line-height:1.45;color:#39433f;padding-left:16px;position:relative;text-wrap:pretty}
.deflist li::before{content:"•";position:absolute;left:0;color:#12798c;font-weight:900}
.deflist span{color:#6a736f}
.bullets{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.bullets li{font-size:16px;line-height:1.5;color:#39433f;text-wrap:pretty}