/* Piezas compartidas de las páginas por rubro (cada página arma su propio orden y su propia idea). */

/* portada partida: título a un lado, pieza viva o foto al otro */
.rh{display:grid;grid-template-columns:6fr 6fr;gap:clamp(24px,4vw,64px);align-items:center;min-height:calc(100svh - 78px);padding-bottom:48px}
.rh h1{font-size:clamp(52px,6.2vw,118px)}
.rh .lead{margin-top:32px;max-width:40ch}
.rh .acc{display:flex;gap:28px;align-items:center;margin-top:44px;flex-wrap:wrap}
.rh .vivo{align-self:center}
.rh .vivo-cap{margin-top:12px;color:var(--muted);font-size:var(--step-small)}

/* foto ancha */
.banda{height:min(70svh,760px);overflow:hidden}
.banda img,.banda video{width:100%;height:100%;object-fit:cover}

/* dos columnas: argumento + prueba */
.arg{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,80px);align-items:center}
.arg.inv{grid-template-columns:7fr 5fr}.arg.inv>:first-child{order:2}
.arg h2{font-size:clamp(44px,4.8vw,88px)}
.arg .lead{margin-top:24px;max-width:42ch}
.arg ul{list-style:none;margin-top:28px;display:grid;gap:12px}
.arg li::before{content:'✓ ';color:var(--accent)}

/* frases sobre color: en una franja de columnas, con la altura justa para el texto */
section:has(>.campo-c){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.campo-c{display:flex;flex-direction:column;gap:20px;padding:clamp(48px,6vw,88px) var(--m)}
.campo-c h2{font-size:clamp(40px,4.4vw,80px)}
.campo-c p{max-width:40ch}
.campo-c:only-child{display:grid;grid-template-columns:7fr 5fr;column-gap:clamp(24px,4vw,64px);align-items:end}
.campo-c:only-child h2{font-size:clamp(48px,6vw,104px)}
.c-acc{background:var(--accent);color:#140700}.c-paper{background:var(--paper);color:var(--bg)}.c-s{background:var(--surface2)}

/* lista en tipografía grande */
.lista-g{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:48px 64px;margin-top:64px}
.lista-g b{display:block;font:700 clamp(30px,3vw,52px)/.95 'Barlow Condensed',sans-serif;text-transform:uppercase}
.lista-g span{display:block;margin-top:12px;color:#DDD9D3;max-width:42ch}

/* fragmentos de la app */
.ui-t{display:grid;font-size:14px}
.ui-t>div{padding:10px 8px;min-height:58px}
.ui-t .hd{min-height:auto;color:var(--muted);background:var(--surface2);font-size:13.5px}
.ui-t .hr{color:var(--muted);font-size:13.5px}
.cl{background:var(--surface2);margin:3px;display:flex;flex-direction:column;justify-content:space-between}
.cl b{font-weight:500}.cl small{color:var(--muted);font-size:13px}
.cl.full{background:rgba(255,77,26,.16)}.cl.full small{color:#FF8A63}
.cl.ok small{color:var(--ok)}
.cl.sel{outline:2px solid var(--accent);outline-offset:-2px}
.filas .f{display:grid;grid-template-columns:1fr auto;gap:12px;padding:13px 18px;font-size:15px;align-items:center}
.filas .f:nth-child(even){background:#121110}
.filas .f em{font-style:normal;color:var(--muted)}
.filas .f em.x{color:#FF8A63}.filas .f em.ok{color:var(--ok)}
.tel{background:var(--surface);max-width:380px;margin-left:auto;font-size:15px}
.tel .tel-b{padding:18px}
.pill-ui{display:inline-block;padding:3px 10px;font-size:13px;background:var(--surface3);color:var(--muted)}
.pill-ui.acc{background:rgba(255,77,26,.16);color:#FF8A63}.pill-ui.ok{background:rgba(61,220,132,.14);color:var(--ok)}
.btn-ui{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;background:var(--surface3);color:var(--ink);font-weight:500;transition:background-color .15s}
.btn-ui:hover{background:#3a3632}.btn-ui.acc{background:var(--accent);color:#140700}.btn-ui[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.ui-cap{margin-top:12px;color:var(--muted);font-size:var(--step-small)}

/* precio en una frase */
.precio h2{font-size:clamp(52px,7vw,128px);max-width:17ch}
.monto{background:var(--accent);color:#140700;padding:0 .1em}
.precio-g{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-top:56px;flex-wrap:wrap}
.precio-g p{max-width:52ch;color:#DDD9D3}
.precio-g .acc{display:flex;gap:24px;align-items:center}

/* otros rubros */
.otros-t{font-size:var(--step-lead);color:var(--muted)}
.otros-r{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:24px;font:700 clamp(26px,2.4vw,40px)/1.1 'Barlow Condensed',sans-serif;text-transform:uppercase}
.otros-r a{text-decoration:none;color:var(--muted);transition:color .15s}.otros-r a:hover{color:var(--ink)}

@media (max-width:820px){
  .rh,.arg,.arg.inv{grid-template-columns:1fr;min-height:0}.arg.inv>:first-child{order:0}
  .rh h1{font-size:12.5vw}.rh{padding-top:32px}
  .rh .acc,.precio-g .acc{flex-direction:column;align-items:stretch;width:100%}
  .arg h2{font-size:11vw}
  .campo-c:only-child{grid-template-columns:1fr;row-gap:20px}
  .campo-c h2,.campo-c:only-child h2{font-size:11vw}
  .lista-g{grid-template-columns:1fr}
  .precio h2{font-size:10.5vw}
  .tel{margin-left:0;max-width:none}
}

/* títulos de sección de las páginas por rubro: dos líneas como máximo */
main h2,.sec h2.d{max-width:none!important}
.faq h2{max-width:24ch!important}