/* характер: mascotas — из design/characters.json */
:root{
  --bg:#ffffff;
  --surface:#faf9fb;
  --ink:#1d1b20;
  --ink-2:#2c2830;
  --ink-3:#3d3842;
  --muted:#5f5a66;
  --muted-2:#6b6572;
  --line:#eee9f0;
  --line-2:#f4f0f5;
  --line-dot:#e0d8e4;
  --brand:#a01e6a;
  --brand-soft:#fbe9f2;
  --accent:#f09c1e;
  --sun:#ffd24a;
  --action:#a01e6a;
  --action-hover:#8a185b;
  --action-ink:#ffffff;
  --status:#ffd24a;
  --pad-x:20px;
  --pad-x-d:48px;
  --r-btn:16px;
  --r-img:22px;
  --h1-m:42px;
  --h1-d:clamp(52px, 5vw, 72px);
  --h2-m:32px;
  --h2-d:48px;
  --logo-h:34px;
  --logo-h-d:44px;
  --logo-max:120px;
  --logo-max-d:150px;
  --display:'Baloo 2', system-ui, sans-serif;
  --body:system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* =========================================================================
   core.css — общее для всех характеров: сброс, кнопки, ссылки, карта,
   липкая панель, анимация. Композиция каждого характера — в своём файле.
   Токены приходят из design/characters.json.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}
img,svg,iframe{display:block;max-width:100%}
/* height:auto обязателен: иначе атрибут height у <img> перебивает aspect-ratio
   и кадр растягивается. Правила с явной высотой перебивают это по специфичности. */
img{height:auto}
h1,h2,h3{margin:0}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
/* у figure браузерный отступ 40px по бокам — из-за него фото не занимали свою ячейку */
figure{margin:0}
ul{list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:var(--bg);padding:10px 16px}

/* -------------------------------------------------------------- кнопки -- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 24px;border-radius:var(--r-btn);
  font:700 16px/1 var(--body);text-decoration:none;border:0;cursor:pointer;
  transition:background .15s ease,transform .1s ease;
}
.btn--action{background:var(--action);color:var(--action-ink)}
.btn--action:hover{background:var(--action-hover)}
.btn--invert{background:var(--bg);color:var(--ink)}
.btn--invert:hover{opacity:.9}
.btn:active{transform:translateY(1px)}
.btn--sm{min-height:46px;padding:0 20px;font-size:15px;display:inline-flex}
.wa{flex:0 0 auto}


/* Фирменный знак клиента. Если в content.json есть business.logo — в шапке
   и подвале выводится он вместо словесного знака. Высота фиксирована,
   ширина свободная: подходит и квадратной эмблеме, и вытянутому логотипу. */
.brand__logo{height:var(--logo-h,34px);width:auto;max-width:var(--logo-max,180px);object-fit:contain;flex:0 0 auto;mix-blend-mode:var(--logo-blend,normal);border-radius:var(--logo-r,0)}
@media (min-width:880px){.brand__logo{height:var(--logo-h-d,42px);max-width:var(--logo-max-d,240px)}}

/* ------------------------------------------------------- мелкие детали -- */
.status{display:inline-flex;align-items:center;gap:9px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--status);flex:0 0 auto}

.ulink{
  display:inline-block;font-size:14px;text-decoration:none;
  border-bottom:1px solid var(--line-dot);padding-bottom:3px;
}
.ulink:hover{border-bottom-color:var(--brand);color:var(--brand)}
.ulink--muted{color:var(--muted)}
.links{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px}

.note{margin-top:14px;font-size:13px;line-height:1.6;color:var(--muted-2)}

/* ---------------------------------------------------------------- карта -- */
.map{border:1px solid var(--line);border-radius:var(--r-img);overflow:hidden;background:var(--surface)}
.map iframe{width:100%;height:220px;border:0}

/* ------------------------------------------------------ липкая панель -- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:var(--bg);border-top:1px solid var(--line);
}
.sticky__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.sticky__lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sticky__val{font:600 15px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .btn{margin-left:auto;flex:0 0 auto}

/* ------------------------------------------- полоска «это пример» -------- */
/* Цвета берём из главной пары характера (ink/bg) — контраст гарантирован
   в любой палитре, в том числе у тёмного barber, где ink светлый. */
.ejemplo{
  display:flex;align-items:center;justify-content:center;gap:6px 12px;flex-wrap:wrap;
  padding:8px 16px;background:var(--ink);color:var(--bg);
  font:600 12px/1.35 var(--body);text-align:center;text-decoration:none;
}
.ejemplo__q{
  flex:0 0 auto;border:1px solid currentColor;border-radius:999px;
  padding:2px 9px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.ejemplo__t{display:none}
.ejemplo__c{flex:0 0 auto;text-decoration:underline;text-underline-offset:3px}
.ejemplo:hover .ejemplo__c{text-decoration-thickness:2px}
@media (min-width:600px){
  .ejemplo{font-size:13px;padding:9px 20px}
  .ejemplo__t{display:inline}
}

/* ------------------------------------------------------------ анимация -- */
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{opacity:0}
.rise.in{animation:riseIn .6s ease both}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1}
  html{scroll-behavior:auto}
}

@media (min-width:880px){
  html{scroll-padding-top:80px}
  .map iframe{height:380px}
  .sticky{display:none}
}

/* =========================================================================
   mascotas — ветклиника в мультяшном стиле клиента: белый фон с лапками и
   косточками, скруглённые плашки с толстой обводкой, малиновые ярлыки,
   жёлтая наклейка под наклоном. Кнопка звонка главнее WhatsApp: в скорую
   звонят. Макет — Claude Design, холст «HVA Hospital Veterinario — демо-сайт».
   ========================================================================= */

.hdr__in{padding-left:var(--pad-x);padding-right:var(--pad-x)}
.patitas{background:var(--surface) url("img/huellas.svg") repeat}

/* ------------------------------------------------ полоса «скорая 24 ч» -- */
.alerta{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;
  min-height:40px;padding:6px var(--pad-x);background:var(--brand);color:#fff;
  font-size:13.5px;font-weight:600;text-decoration:none;text-align:center;
}
.alerta i{width:8px;height:8px;border-radius:50%;background:var(--sun);flex:0 0 auto}
.alerta b{white-space:nowrap}
.alerta:hover{background:var(--action-hover)}

/* --------------------------------------------------------------- шапка -- */
html{scroll-padding-top:84px}
.hdr{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand__name{font:800 26px/1 var(--display)}
.brand__kind{font-size:10px;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;max-width:130px}
.burger{
  width:46px;height:46px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
  background:#fff;border:2px solid var(--ink);border-radius:14px;color:var(--ink);cursor:pointer;
}
.burger span{display:block;width:18px;height:2px;background:currentColor;transition:transform .2s ease}
.nav-open .burger span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
.nav{
  display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
  background:#fff;border-bottom:2px solid var(--ink);padding:6px var(--pad-x) 18px;
}
.nav-open .nav{display:flex}
.nav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);font-weight:700;font-size:16px;text-decoration:none;color:var(--ink)}
.nav a:hover{color:var(--brand)}
.nav .nav__cta{justify-content:center;margin-top:14px;border:0;border-radius:var(--r-btn);background:var(--action);color:#fff;font:800 18px/1 var(--display)}
.nav .nav__cta:hover{background:var(--action-hover);color:#fff}

/* -------------------------------------------------------------- кнопки -- */
.btn{border-radius:var(--r-btn);font:800 19px/1 var(--display);min-height:56px}
.btn--line{background:#fff;color:var(--ink);border:2px solid var(--ink);font:700 16px/1 var(--body)}
.btn--line:hover{background:var(--surface)}
.btn--sol{background:var(--sun);color:var(--ink)}
.btn--sol:hover{background:#ffc726}
.btn--blanco{background:transparent;color:#fff;border:2px solid #fff;font:700 16px/1 var(--body)}
.btn--blanco:hover{background:rgba(255,255,255,.1)}

/* ------------------------------------------------------- первый экран -- */
.hero{display:flex;flex-direction:column;gap:30px;padding:26px var(--pad-x) 44px}
.hero__text{display:flex;flex-direction:column;gap:18px;animation:riseIn .6s ease both}
.sello{display:flex;align-items:center;gap:12px}
.sello img{width:64px;height:auto}
.sello span{font-family:var(--display);line-height:.95}
.sello b{font-size:40px;font-weight:800;color:var(--brand)}
.sello small{font-size:17px;font-weight:800;display:inline-block;vertical-align:bottom}
.hero__title{font:800 var(--h1-m)/1.02 var(--display);letter-spacing:-.01em;text-wrap:balance}
.hero__title em{font-style:normal;color:var(--brand)}
.hero__sub{font-size:16px;line-height:1.55;color:var(--ink-3);max-width:36em}
.hero__act{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.hero__media{position:relative;margin-bottom:10px}
.hero__media img{width:100%;aspect-ratio:10/9;object-fit:cover;border-radius:var(--r-img);border:3px solid var(--ink)}
.pegatina{
  position:absolute;left:14px;bottom:-14px;transform:rotate(-3deg);
  background:var(--sun);color:var(--ink);border:2px solid var(--ink);border-radius:12px;
  padding:6px 12px;font:800 16px/1.1 var(--display);
}

/* ------------------------------------------------------------- секции -- */
.sec{padding:40px var(--pad-x);display:flex;flex-direction:column;gap:16px}
.sec__k{display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);font-weight:700}
.sec__k svg{fill:var(--brand);flex:0 0 auto}
.sec__t{font:800 var(--h2-m)/1.05 var(--display);text-wrap:balance}
.sec__t em{font-style:normal;color:var(--brand)}
.lead{font-size:16px;line-height:1.6;color:var(--ink-3)}

/* ----------------------------------------------------- специальности -- */
.espec{display:grid;gap:10px;margin-top:4px}
.espec__i{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:2px solid var(--ink);border-radius:18px;background:var(--brand-soft)}
.espec__i:nth-child(3n+2){background:#fff6dc}
.espec__i:nth-child(3n){background:#eaf2fa}
.espec__i h3{
  align-self:flex-start;background:var(--brand);color:#fff;border-radius:10px;padding:3px 12px;
  font:800 17px/1.25 var(--display);text-transform:uppercase;letter-spacing:.02em;
}
.espec__i p{font-size:14.5px;line-height:1.45;color:var(--ink-3)}

/* ----------------------------------------------------------- галерея -- */
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px}
.gal__i{display:flex;flex-direction:column;gap:6px}
.gal__i img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;border:2px solid var(--ink)}
.gal__i figcaption{font:700 15px/1.2 var(--display)}

/* -------------------------------------------------- о нас и адрес -- */
.sec--split > div{display:flex;flex-direction:column;gap:16px}
.foto{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-img);border:3px solid var(--ink)}
.aviso{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:var(--brand-soft);font-size:15px;line-height:1.4}
.aviso img{width:46px;height:auto;flex:0 0 auto}
.sec--dash{border-top:2px dashed var(--line-dot)}
.datos{display:flex;flex-direction:column;gap:6px;font-size:15.5px;line-height:1.5;color:var(--ink-3)}
.datos b{color:var(--ink)}
.datos a{color:var(--brand);font-weight:600;text-decoration:none}
.datos a:hover{text-decoration:underline}
.map{border:2px solid var(--ink);border-radius:18px}

/* ------------------------------------------------------ финальный зов -- */
.final{
  display:flex;flex-direction:column;gap:14px;margin:0 var(--pad-x) 30px;padding:30px 22px;
  border-radius:26px;background:var(--brand);color:#fff;
}
.final__txt{display:flex;flex-direction:column;gap:12px}
.final__t{font:800 var(--h2-m)/1.05 var(--display);text-wrap:balance}
.final__txt p{font-size:15.5px;line-height:1.55;color:var(--brand-soft)}
.final__act{display:flex;flex-direction:column;gap:10px}

/* --------------------------------------------------------------- подвал -- */
.ftr{display:flex;flex-direction:column;gap:8px;padding:22px var(--pad-x) 100px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.ftr__logo{height:28px;width:auto;align-self:flex-start}

/* двухкнопочная липкая панель: звонок и WhatsApp поровну */
.sticky--dos{gap:10px;border-top:2px solid var(--ink);background:#fff}
.sticky--dos .btn{flex:1 1 0;margin:0;min-height:48px;justify-content:center}
.sticky--dos .btn--line{font-size:15px}

/* ------------------------------------------------------------ наклейки -- */
/* Мультяшные наклейки клиента: по одной на блок, не больше. Декор —
   alt пустой, читалкам экрана не мешают. */
.st{position:absolute;height:auto;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.18))}
.tit{position:relative;padding-right:92px}
.st--tit{right:0;top:-10px;width:84px;transform:rotate(10deg)}
.st--huella{width:62px;top:-4px;transform:rotate(-14deg)}
.espec{gap:18px}
.espec__i{position:relative;padding-right:96px;min-height:104px;justify-content:center}
.espec__i h3{align-self:flex-start;background:none;color:var(--ink);padding:0;border-radius:0;text-transform:none;letter-spacing:0;font-size:25px;line-height:1.05}
.espec__i p{font-size:15px}
.st--card{right:-12px;top:-18px;width:100px}
.espec__i:nth-child(1) .st--card{transform:rotate(12deg)}
.espec__i:nth-child(2) .st--card{transform:rotate(-8deg)}
.espec__i:nth-child(3) .st--card{transform:rotate(6deg)}
.tambien{position:relative;margin-top:14px;padding:20px 18px 52px;border-radius:22px;background:var(--surface);border:2px dashed var(--line-dot);display:flex;flex-direction:column;gap:12px}
.tambien h3{font:800 19px/1.2 var(--display)}
.tambien ul{display:flex;flex-wrap:wrap;gap:8px}
.tambien li{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border-radius:12px;border:2px solid var(--ink);background:#fff;font-weight:700;font-size:14px}
.st--tambien{right:-8px;bottom:-36px;width:84px;transform:rotate(-9deg)}
.foto-w{position:relative;margin:0}
.st--foto{left:-12px;bottom:-26px;width:104px;transform:rotate(-8deg)}
.final{position:relative}
.st--final{right:-10px;top:-38px;width:96px;transform:rotate(12deg)}

/* ------------------------------------------ первый экран без фото -- */
/* Их фото сняты на телефон и крупно смотрятся мыльно, поэтому первый экран
   нарисован: жёлтая карточка с огромным «24» и наклейками по углам. */
.hero--art .sello{display:none}
.cartel{position:relative;order:-1;margin:22px 4px 8px;padding:24px 20px 26px;border:3px solid var(--ink);border-radius:28px;background:var(--sun)}
.cartel__n{display:flex;align-items:flex-end;gap:12px;font-family:var(--display);font-weight:800}
.cartel__n b{font-size:150px;line-height:.78;color:var(--brand);letter-spacing:-.03em}
.cartel__n span{display:flex;flex-direction:column;font-size:30px;line-height:.95;padding-bottom:8px}
.cartel__n small{font-size:19px;font-weight:700;margin-top:6px}
.st--c1{right:-8px;top:-46px;width:118px;transform:rotate(12deg)}
.st--c2{left:-20px;bottom:-38px;width:72px;transform:rotate(-8deg)}
.st--c3,.st--c4{display:none}

/* ---------------------------------------- «Así trabajamos» рисунками -- */
.dibujos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
.dibujo{display:flex;flex-direction:column;gap:6px;padding:14px 14px 16px;border:2px solid var(--ink);border-radius:20px;background:var(--brand-soft)}
.dibujo:nth-child(4n+2){background:#fff6dc}
.dibujo:nth-child(4n+3){background:#eaf2fa}
.dibujo:nth-child(4n+4){background:#e9f7ee}
.dibujo__st{width:84px;height:auto;margin:-4px 0 4px -4px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.18))}
.dibujo h3{font:800 20px/1.1 var(--display)}
.dibujo p{font-size:14px;line-height:1.45;color:var(--ink-3)}
/* их лучшие снимки — маленькими полароидами: мыло на телефонном кадре не видно */
.dibujo.dibujo--foto{background:#fff;padding:8px 8px 12px;border-radius:14px;transform:rotate(-2deg)}
.dibujo.dibujo--foto:nth-child(even){transform:rotate(2deg)}
.polaroid{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;border:2px solid var(--ink)}
.dibujo--foto h3{font-size:17px;text-align:center}

/* ---------------------------------- «Quiénes somos»: лист с наклейками -- */
.lamina{position:relative;margin:10px 0 0;aspect-ratio:4/3;border-radius:var(--r-img);border:3px solid var(--ink);background:var(--brand);display:flex;align-items:center;justify-content:center}
.lamina__aro{position:absolute;height:82%;aspect-ratio:1/1;border-radius:50%;border:3px dashed #f3b6d4}
.lamina__icono{position:relative;width:34%;height:auto;padding:14px;background:#fff;border:3px solid var(--ink);border-radius:24px;box-sizing:content-box}
.lamina__foto{position:relative;width:50%;aspect-ratio:1/1;object-fit:cover;border:8px solid #fff;border-bottom-width:26px;border-radius:10px;transform:rotate(-4deg);box-shadow:0 0 0 2px var(--ink),0 8px 16px rgba(0,0,0,.25)}
.st--l1{left:-10px;bottom:-24px;width:100px;transform:rotate(-10deg)}
.st--l2{right:-8px;bottom:-20px;width:92px;transform:rotate(10deg)}
.st--l3{right:14px;top:-22px;width:62px;transform:rotate(14deg)}
.st--l4{left:-6px;top:-20px;width:88px;transform:rotate(-12deg)}

/* ============================================================ экран ==== */
@media (min-width:880px){
  html{scroll-padding-top:104px}
  .alerta{font-size:14px;min-height:42px}
  .hdr__in{min-height:92px;gap:40px;padding-left:var(--pad-x-d);padding-right:var(--pad-x-d)}
  .brand__logo{height:44px}
  .brand__kind{font-size:11px;max-width:160px}
  .burger{display:none}
  .nav{display:flex;position:static;flex-direction:row;align-items:center;gap:30px;padding:0;border:0;background:none;flex:1 1 auto}
  .nav a{min-height:0;border:0;font-size:15px}
  .nav .nav__cta{margin:0 0 0 auto;min-height:48px;padding:0 22px;font-size:17px}

  .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:64px;padding:64px var(--pad-x-d) 84px}
  .hero__text{gap:24px}
  .sello img{width:84px}
  .sello b{font-size:54px}
  .sello small{font-size:22px}
  .hero__title{font-size:var(--h1-d);line-height:1}
  .hero__sub{font-size:19px}
  .hero__act{flex-direction:row;flex-wrap:wrap;gap:14px;margin-top:4px}
  .hero__act .btn{min-height:60px;padding:0 28px;white-space:nowrap}
  .hero__media img{aspect-ratio:auto;height:min(520px,calc(100vh - 240px));min-height:420px;border-radius:30px}
  .pegatina{left:24px;bottom:-18px;font-size:20px;padding:8px 16px;border-radius:14px}

  .sec{padding:72px var(--pad-x-d);gap:18px}
  .sec__t{font-size:var(--h2-d);line-height:1.02;max-width:20ch}
  .espec{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:10px}
  .espec{gap:24px;margin-top:22px}
  .espec__i{min-height:150px;padding:24px 128px 24px 24px}
  .espec__i h3{font-size:28px}
  .st--card{width:104px;top:-28px;right:-14px}
  /* чипсы ровной сеткой 4×2, без одинокого переноса на вторую строку */
  .tambien{margin-top:28px;padding:24px 110px 28px 28px;gap:16px}
  .tambien h3{font-size:21px}
  .tambien ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .tambien li{justify-content:center;text-align:center;font-size:15px;min-height:44px}
  .st--tambien{width:100px;bottom:-30px;right:-6px}
  .tit{padding-right:0;display:flex;align-items:flex-start;gap:14px}
  .st--tit{position:relative;right:auto;top:-6px;width:96px}
  .st--huella{width:70px}
  .st--foto{width:128px;left:-22px;bottom:-30px}
  .st--final{width:100px;top:-64px;right:56px}
  .espec__i{border-radius:22px;gap:8px}
  .espec__i p{font-size:16px}
  .gal{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:10px}
  .gal__i img{aspect-ratio:4/3;border-radius:20px}
  .gal__i figcaption{font-size:18px}

  .sec--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
  .sec--split .sec__t{max-width:none}
  #donde{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
  .lead{font-size:18px}
  .foto{border-radius:30px;aspect-ratio:auto;height:440px}
  .aviso{align-self:flex-start;font-size:16px}
  .datos{font-size:17px}
  .map{border-radius:26px}

  .final{flex-direction:row;align-items:center;justify-content:space-between;gap:40px;margin:0 var(--pad-x-d) 48px;padding:48px 56px;border-radius:34px}
  .final__txt{max-width:640px}
  .final__t{font-size:var(--h2-d)}
  .final__txt p{font-size:18px}
  .final__act{min-width:320px}
  .final__act .btn{min-height:60px}

  .ftr{flex-direction:row;align-items:center;justify-content:space-between;padding:24px var(--pad-x-d);font-size:13px}
}

@media (min-width:880px){
  .cartel{order:0;margin:0;min-height:440px;padding:48px 44px 52px;border-radius:36px;display:flex;align-items:center;justify-content:center}
  .cartel__n{flex-direction:column;align-items:center;gap:14px;text-align:center}
  .cartel__n b{font-size:clamp(180px,19vw,280px)}
  .cartel__n span{font-size:52px;padding:0}
  .cartel__n small{font-size:28px}
  .st--c1{width:170px;top:-64px;right:-30px}
  .st--c2{width:110px;left:-30px;bottom:-40px}
  .st--c3{display:block;width:130px;right:-26px;bottom:-46px;transform:rotate(9deg)}
  .st--c4{display:block;width:92px;left:-28px;top:-36px;transform:rotate(-14deg)}

  .dibujos{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:14px}
  .dibujo{padding:20px 20px 22px;border-radius:24px;gap:8px}
  .dibujo__st{width:104px}
  .dibujo h3{font-size:24px}
  .dibujo p{font-size:15.5px}
  .dibujo.dibujo--foto{padding:10px 10px 14px;border-radius:16px}
  .dibujo--foto h3{font-size:19px}

  .lamina{aspect-ratio:auto;height:440px;border-radius:30px}
  .lamina__icono{width:170px;padding:20px;border-radius:30px}
  .lamina__foto{width:270px;border-width:10px;border-bottom-width:34px}
  .st--l1{width:130px;left:-24px;bottom:-30px}
  .st--l2{width:120px;right:-20px;bottom:-26px}
  .st--l3{width:80px;right:30px;top:-30px}
  .st--l4{width:112px;left:-18px;top:-28px}
}