/* Dasso SC – Contadores Públicos · estilos de las páginas informativas (rediseño oct-2026)
   Dirección: "libro mayor" editorial — papel azulado con renglones de cédula, tinta azul marino
   profundo y azul claro del logotipo como único acento, titulares de serifa grandes, cifras tabulares,
   sello de revisión y una banda oscura de privacidad como contrapunto.
   Sin fuentes externas (CSP 'self'): se usan pilas de sistema. */
:root{
  color-scheme: light;
  --navy:#183060; --navy-2:#12275A; --acc:#2A86B0; --acc-ink:#1D6E94; --brass:#80C8E8;
  --page:#F3F8FC; --surface:#FFFFFF; --surface-2:#E6F0F8; --line:#D3E1EC; --line-2:#B7CCDD;
  --ink:#10203A; --ink-2:#42526B; --muted:#66768C;
  --hero-1:#183060; --hero-2:#12275A; --on-hero:#FFFFFF; --on-hero-2:#C9DAF0;
  --btn-ink:#FFFFFF; --link:#183060; --stamp:#B4361B; --ok:#2E7D4F;
  --rule:rgba(24,48,96,.06);
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-head: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --f-num: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --r:3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --navy:#80C8E8; --acc:#80C8E8; --acc-ink:#80C8E8; --brass:#80C8E8;
    --page:#0A1430; --surface:#101C3C; --surface-2:#16264C; --line:#22345E; --line-2:#2F4678;
    --ink:#EAF1FA; --ink-2:#B4C3D9; --muted:#8A9CB8;
    --hero-1:#0F1E44; --hero-2:#0A1530; --on-hero:#F4F8FD; --on-hero-2:#BCCDE4;
    --btn-ink:#0A1A33; --link:#9AD3EE; --stamp:#F0795A; --ok:#6FCB93;
    --rule:rgba(128,200,232,.06);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --navy:#80C8E8; --acc:#80C8E8; --acc-ink:#80C8E8; --brass:#80C8E8;
  --page:#0A1430; --surface:#101C3C; --surface-2:#16264C; --line:#22345E; --line-2:#2F4678;
  --ink:#EAF1FA; --ink-2:#B4C3D9; --muted:#8A9CB8;
  --hero-1:#0F1E44; --hero-2:#0A1530; --on-hero:#F4F8FD; --on-hero-2:#BCCDE4;
  --btn-ink:#0A1A33; --link:#9AD3EE; --stamp:#F0795A; --ok:#6FCB93;
  --rule:rgba(128,200,232,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--page); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.65; overflow-x:clip}
h1,h2,h3{font-family:var(--f-head); font-weight:600; line-height:1.1; letter-spacing:-.015em; margin:0; text-wrap:balance}
a{color:var(--link); text-underline-offset:3px}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:3px}
.cont{max-width:1180px; margin:0 auto; padding:0 28px}
::selection{background:var(--brass); color:#0A1A33}

/* encabezado */
.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--page) 90%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-2)}
.top .cont{display:flex; align-items:center; gap:18px; padding-top:10px; padding-bottom:10px; flex-wrap:wrap}
.marca{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); margin-right:auto}
.marca .logo-dasso{width:auto; height:54px}
@media (max-width:600px){ .marca .logo-dasso{height:44px} }
.nav{display:flex; gap:26px; flex-wrap:wrap; align-items:center; font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:500}
.nav a{color:var(--ink-2); text-decoration:none; padding:4px 0; background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 2px no-repeat; transition:background-size .25s ease, color .15s}
.nav a:hover{color:var(--ink); background-size:100% 2px}
.nav a.btn{background:var(--navy); letter-spacing:.04em; text-transform:none; font-size:14px}

/* botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; border-radius:var(--r); font-weight:600; font-size:15px; text-decoration:none; border:1px solid transparent; cursor:pointer; line-height:1.2; transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease}
.btn.prim{background:var(--navy); color:var(--btn-ink); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 6px 16px -8px rgba(18,39,90,.6)}
.btn.prim:hover{transform:translateY(-2px); filter:brightness(1.15)}
.btn.sec{border-color:var(--ink-2); background:transparent; color:var(--ink)}
.btn.sec:hover{border-color:var(--acc); background:color-mix(in srgb, var(--brass) 14%, transparent); transform:translateY(-2px)}
.btn.chico{padding:9px 18px; font-size:14px}
.btn .flecha{transition:transform .2s ease}
.btn:hover .flecha{transform:translateX(4px)}

/* portada: papel con renglones de cédula */
.hero{position:relative; isolation:isolate; overflow:hidden; border-bottom:2px solid var(--ink)}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, transparent 0 calc(100% - 1px), var(--rule) 0) 0 0/120px 100%,
    linear-gradient(0deg, transparent 0 calc(100% - 1px), var(--rule) 0) 0 0/100% 36px,
    radial-gradient(760px 460px at 92% 8%, color-mix(in srgb, var(--brass) 24%, transparent), transparent 70%),
    var(--page)}
.hero::after{content:""; position:absolute; left:calc(50% - 590px - 36px); top:0; bottom:0; width:2px; background:color-mix(in srgb, var(--stamp) 45%, transparent); z-index:-1}
@media (max-width:1300px){ .hero::after{display:none} }
.hero .cont{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center; padding-top:92px; padding-bottom:72px}
.hero .eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:12px; text-transform:uppercase; letter-spacing:.22em; color:var(--acc-ink); font-weight:700}
.hero .eyebrow::before{content:""; width:34px; height:2px; background:var(--acc)}
.hero h1{font-size:clamp(40px, 6.6vw, 80px); margin:22px 0 22px; font-weight:500; letter-spacing:-.03em; line-height:1.02}
.hero h1 em{font-style:italic; color:var(--navy); background:linear-gradient(transparent 62%, color-mix(in srgb, var(--brass) 55%, transparent) 62% 90%, transparent 90%); padding:0 .06em}
.hero p.lead{font-size:clamp(17px, 1.8vw, 20px); color:var(--ink-2); max-width:54ch; margin:0}
.hero .acciones{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
.hero .sello{display:flex; gap:12px; align-items:center; margin-top:30px; padding-top:20px; border-top:1px solid var(--line-2); font-size:14px; color:var(--ink-2); max-width:54ch}
.hero .sello svg{width:18px; height:18px; flex:none; color:var(--acc-ink)}

/* hoja columnar de ejemplo */
.hoja{position:relative; background:var(--surface); color:var(--ink); border:1px solid var(--ink); border-radius:var(--r); box-shadow:10px 10px 0 -1px color-mix(in srgb, var(--navy) 85%, transparent), 0 40px 70px -30px rgba(18,39,90,.5); transform:rotate(1.4deg); font-family:var(--f-num); font-size:14px}
.hoja header{display:flex; justify-content:space-between; gap:10px; padding:14px 18px; background:var(--surface-2); border-bottom:3px double var(--ink); font-family:var(--f-body); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); font-weight:700}
.hoja table{width:100%; border-collapse:collapse}
.hoja th{font-family:var(--f-body); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:right; font-weight:700; padding:14px 16px 8px}
.hoja th:first-child, .hoja td:first-child{text-align:left}
.hoja td{padding:12px 16px; text-align:right; border-bottom:1px dotted var(--line-2); font-variant-numeric:tabular-nums}
.hoja td:first-child{font-family:var(--f-body); color:var(--ink-2)}
.hoja tr.ok td:last-child{color:var(--ok); font-weight:700}
.hoja tr.rev td{background:color-mix(in srgb, var(--stamp) 8%, transparent)}
.hoja tr.rev td:last-child{color:var(--stamp); font-weight:700}
.hoja tr.tot td{border-top:2px solid var(--ink); border-bottom:0; font-weight:700; color:var(--ink); font-size:15px}
.hoja footer{padding:11px 18px; font-family:var(--f-body); font-size:11px; color:var(--muted); border-top:1px dashed var(--line-2)}
.hoja::after{content:"Revisar"; position:absolute; right:-14px; bottom:46px; transform:rotate(-12deg); border:3px solid var(--stamp); color:var(--stamp); font-family:var(--f-body); font-weight:800; font-size:20px; letter-spacing:.2em; text-transform:uppercase; padding:4px 14px; border-radius:4px; background:color-mix(in srgb, var(--surface) 70%, transparent); opacity:.88; pointer-events:none}

/* franja de cifras bajo la portada */
.cifras{border-top:1px solid var(--line-2)}
.cifras ul{list-style:none; margin:0 auto; padding:0 28px; max-width:1180px; display:grid; grid-template-columns:repeat(4, 1fr)}
.cifras li{padding:22px 24px 24px 0; border-right:1px solid var(--line); margin-right:24px}
.cifras li:last-child{border-right:0}
.cifras b{display:block; font-family:var(--f-head); font-weight:500; font-size:clamp(28px, 3.4vw, 44px); line-height:1; color:var(--navy); letter-spacing:-.02em}
.cifras span{display:block; margin-top:8px; font-size:13px; color:var(--ink-2); letter-spacing:.02em}
@media (max-width:760px){
  .cifras ul{grid-template-columns:repeat(2, 1fr); padding:0 18px}
  .cifras li{border-right:0; border-bottom:1px solid var(--line)}
}

/* secciones */
section.bloque{padding:104px 0; border-bottom:1px solid var(--line)}
section.bloque:last-of-type{border-bottom:0}
.bloque .encab{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:48px; align-items:end; margin-bottom:52px}
.bloque .encab > p{margin:0}
.bloque h2{font-size:clamp(32px, 4.8vw, 56px); font-weight:500; letter-spacing:-.025em; max-width:16ch}
.bloque .kicker{display:block; font-family:var(--f-num); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc-ink); margin-bottom:16px; font-weight:500}
.bloque p.intro{color:var(--ink-2); max-width:62ch; margin:0 0 40px; font-size:18px}
.bloque .encab p.intro{margin:0}
@media (max-width:820px){ .bloque .encab{grid-template-columns:1fr; gap:18px; margin-bottom:36px} }

/* para quién: dos paneles */
.paneles{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); border:1px solid var(--ink); background:var(--surface)}
.paneles .tarjeta{padding:40px 40px 44px; border:0; position:relative}
.paneles .tarjeta + .tarjeta{border-left:1px solid var(--ink)}
@media (max-width:860px){ .paneles .tarjeta + .tarjeta{border-left:0; border-top:1px solid var(--ink)} .paneles .tarjeta{padding:30px 24px} }
.tarjeta h3{font-size:24px; margin-bottom:10px; color:var(--ink)}
.tarjeta p{margin:0; color:var(--ink-2); font-size:15.5px}
.tarjeta .ic{width:52px; height:52px; background:var(--navy); color:var(--btn-ink); display:flex; align-items:center; justify-content:center; margin-bottom:22px; border-radius:var(--r)}
.tarjeta .ic svg{width:26px; height:26px}

/* qué revisa: cuadrícula tipo mayor, la primera casilla destacada */
.rejilla{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; border-top:2px solid var(--ink); border-left:1px solid var(--line-2); counter-reset:t}
.rejilla .tarjeta{padding:30px 30px 34px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); counter-increment:t; position:relative; transition:background .2s ease}
.rejilla .tarjeta:hover{background:color-mix(in srgb, var(--brass) 10%, transparent)}
.rejilla .tarjeta h3{font-size:22px}
.rejilla .tarjeta h3::before{content:counter(t, decimal-leading-zero); display:block; font-family:var(--f-num); font-size:13px; letter-spacing:.14em; color:var(--acc-ink); margin-bottom:18px; font-weight:500}
.rejilla .tarjeta.grande{grid-column:span 2; background:var(--navy); color:var(--btn-ink); border-color:var(--navy)}
.rejilla .tarjeta.grande:hover{background:var(--navy)}
.rejilla .tarjeta.grande h3{color:var(--btn-ink); font-size:clamp(26px, 3vw, 34px)}
.rejilla .tarjeta.grande h3::before{color:var(--brass)}
.rejilla .tarjeta.grande p{color:color-mix(in srgb, var(--btn-ink) 82%, transparent); font-size:17px; max-width:52ch}
:root[data-theme="dark"] .rejilla .tarjeta.grande{background:var(--surface-2); border-color:var(--line-2)}
:root[data-theme="dark"] .rejilla .tarjeta.grande h3{color:var(--ink)}
:root[data-theme="dark"] .rejilla .tarjeta.grande p{color:var(--ink-2)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .rejilla .tarjeta.grande{background:var(--surface-2); border-color:var(--line-2)}
  :root:not([data-theme="light"]) .rejilla .tarjeta.grande h3{color:var(--ink)}
  :root:not([data-theme="light"]) .rejilla .tarjeta.grande p{color:var(--ink-2)}
}
@media (max-width:900px){ .rejilla{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:600px){ .rejilla{grid-template-columns:1fr} .rejilla .tarjeta.grande{grid-column:auto} }

/* cómo se usa: línea de tiempo */
.pasos{counter-reset:p; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; padding:0; margin:0; list-style:none; position:relative}
.pasos li{padding:0 36px 0 0; position:relative; color:var(--ink-2); font-size:16px}
.pasos li::before{counter-increment:p; content:counter(p); display:flex; align-items:center; justify-content:center; width:64px; height:64px; margin-bottom:26px; border:2px solid var(--ink); border-radius:50%; background:var(--page); font-family:var(--f-head); font-size:30px; color:var(--navy); font-weight:500; position:relative; z-index:1}
.pasos li::after{content:""; position:absolute; top:31px; left:64px; right:0; height:0; border-top:2px dashed var(--line-2)}
.pasos li:last-child::after{display:none}
.pasos b{color:var(--ink); display:block; font-family:var(--f-head); font-size:23px; font-weight:600; margin-bottom:8px; letter-spacing:-.01em}
.pasos-cta{margin-top:48px; display:flex; gap:18px; align-items:center; flex-wrap:wrap}
@media (max-width:760px){
  .pasos{grid-template-columns:1fr; gap:34px}
  .pasos li{padding:0 0 0 88px; min-height:64px}
  .pasos li::before{position:absolute; left:0; top:0; margin:0}
  .pasos li::after{top:64px; left:31px; right:auto; bottom:-34px; height:auto; border-top:0; border-left:2px dashed var(--line-2)}
}

/* privacidad: banda oscura de contrapunto */
section.bloque.noche{background:var(--hero-2); color:var(--on-hero-2); border-bottom:0; position:relative; isolation:isolate; overflow:hidden}
section.bloque.noche::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(255,255,255,.05) 0) 0 0/120px 100%,
    radial-gradient(700px 380px at 8% 0%, rgba(128,200,232,.18), transparent 70%)}
.noche h2{color:var(--on-hero)}
.noche .kicker{color:var(--brass)}
.noche p.intro{color:var(--on-hero-2)}
.noche a{color:var(--brass)}
.privado{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:72px; align-items:start}
.privado h2{max-width:13ch}
.candado{width:84px; height:84px; margin:0 0 30px; color:var(--brass)}
.lista{margin:0; padding:0; list-style:none; color:var(--ink-2)}
.lista li{padding:18px 0 18px 40px; border-bottom:1px solid var(--line-2); position:relative}
.lista li:first-child{border-top:2px solid var(--ink)}
.lista li::before{content:""; position:absolute; left:4px; top:25px; width:15px; height:8px; border-left:3px solid var(--acc); border-bottom:3px solid var(--acc); transform:rotate(-45deg)}
.noche .lista{color:var(--on-hero-2)}
.noche .lista li{border-bottom-color:rgba(255,255,255,.16)}
.noche .lista li:first-child{border-top-color:var(--brass)}
.noche .lista li::before{border-color:var(--brass)}
@media (max-width:860px){ .privado{grid-template-columns:1fr; gap:36px} }

/* servicios: catálogo de cuentas */
.catalogo{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:56px; border-top:2px solid var(--ink); counter-reset:s}
.catalogo .tarjeta{display:grid; grid-template-columns:56px 1fr; column-gap:6px; padding:26px 0 28px; border-bottom:1px solid var(--line-2); counter-increment:s}
.catalogo .tarjeta::before{content:counter(s, decimal-leading-zero); grid-row:span 2; font-family:var(--f-num); font-size:15px; letter-spacing:.06em; color:var(--acc-ink); padding-top:4px; font-weight:500}
.catalogo .tarjeta h3{font-size:21px; margin-bottom:6px}
.catalogo .tarjeta p{font-size:15px}
@media (max-width:860px){ .catalogo{grid-template-columns:1fr} }
.aviso{background:var(--surface); border:1px solid var(--line-2); border-left:5px solid var(--stamp); border-radius:0; padding:20px 26px; color:var(--ink-2); font-size:15px; margin:40px 0 0}
.aviso b{color:var(--ink)}
.servicio .precio{font-size:13px; color:var(--muted); margin-top:10px}

/* contacto: panel de cierre */
.cierre{background:var(--navy); color:var(--btn-ink); padding:56px 56px 48px; position:relative; overflow:hidden; border-radius:var(--r)}
.cierre::before{content:""; position:absolute; right:-80px; top:-80px; width:300px; height:300px; border-radius:50%; border:50px solid color-mix(in srgb, var(--brass) 30%, transparent)}
.cierre h2{color:#fff; max-width:18ch; margin-bottom:14px}
.cierre h2::before{display:none}
.cierre .kicker{color:var(--brass)}
.cierre p.intro{color:#C9DAF0; margin-bottom:30px}
.cierre .btn.prim{background:var(--brass); color:#0A1A33; box-shadow:none}
.cierre .btn.sec{border-color:rgba(255,255,255,.5); color:#fff}
.cierre .btn.sec:hover{border-color:var(--brass); background:rgba(255,255,255,.08)}
.cierre .dato{color:#C9DAF0; border-top-color:rgba(255,255,255,.2)}
.cierre .dato a, .cierre .dato b{color:#fff}
:root[data-theme="dark"] .cierre{background:var(--surface-2); border:1px solid var(--line-2)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cierre{background:var(--surface-2); border:1px solid var(--line-2)} }
@media (max-width:600px){ .cierre{padding:36px 24px 32px} }
.contacto{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px}
.dato{color:var(--ink-2); font-size:14.5px; margin:34px 0 0; padding-top:22px; border-top:1px solid var(--line-2); max-width:84ch}

/* textos legales */
.legal{max-width:780px; margin:0 auto; padding:64px 24px 80px}
.legal h1{font-size:clamp(32px, 4.8vw, 48px); margin-bottom:8px; font-weight:500}
.legal .fecha{color:var(--muted); font-size:14px; margin:0 0 30px; font-family:var(--f-num)}
.legal h2{font-size:22px; margin:38px 0 10px}
.legal p, .legal li{color:var(--ink-2)}
.legal ul{padding-left:22px}
.legal .pendiente{background:#DCEEF8; color:#12385A; padding:0 4px; border-radius:3px}
:root[data-theme="dark"] .legal .pendiente{background:#16385A; color:#BFE3F5}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .legal .pendiente{background:#16385A; color:#BFE3F5} }

/* pie */
footer.pie{background:var(--hero-2); color:var(--on-hero-2); padding:36px 0; font-size:14px; border-top:3px double var(--brass)}
footer.pie .cont{display:flex; gap:12px 24px; flex-wrap:wrap; align-items:center}
footer.pie nav{display:flex; gap:22px; flex-wrap:wrap; margin-left:auto}
footer.pie a{color:var(--on-hero); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25)}
footer.pie a:hover{border-bottom-color:var(--brass)}

/* movimiento: entrada de portada y aparición al desplazarse, respetando preferencias */
@media (prefers-reduced-motion: no-preference){
  .hero .cont > div:first-child > *{animation:sube .8s cubic-bezier(.2,.7,.2,1) both}
  .hero .cont > div:first-child > *:nth-child(2){animation-delay:.08s}
  .hero .cont > div:first-child > *:nth-child(3){animation-delay:.16s}
  .hero .cont > div:first-child > *:nth-child(4){animation-delay:.24s}
  .hero .cont > div:first-child > *:nth-child(5){animation-delay:.32s}
  .hoja{animation:hoja 1s .25s cubic-bezier(.2,.7,.2,1) both}
  .hoja::after{animation:sellar .45s 1.1s cubic-bezier(.3,1.6,.5,1) both}
  @supports (animation-timeline: view()){
    .bloque .encab, .rejilla .tarjeta, .catalogo .tarjeta, .pasos li, .paneles .tarjeta{animation:aparece linear both; animation-timeline:view(); animation-range:entry 0% entry 35%}
  }
}
@keyframes sube{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
@keyframes hoja{from{opacity:0; transform:translateY(28px) rotate(3.5deg)}to{opacity:1; transform:rotate(1.4deg)}}
@keyframes sellar{from{opacity:0; transform:rotate(-12deg) scale(2.2)}to{opacity:.88; transform:rotate(-12deg) scale(1)}}
@keyframes aparece{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}

@media (max-width:900px){
  .hero .cont{grid-template-columns:minmax(0,1fr); gap:48px; padding-top:56px; padding-bottom:48px}
  .hoja{transform:none; max-width:480px; margin-right:12px}
  @keyframes hoja{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}
}
@media (max-width:560px){
  .cont{padding:0 18px}
  .legal{padding:36px 18px 52px}
  .nav{gap:14px; font-size:12px; width:100%}
  .nav .btn{margin-left:auto}
  section.bloque{padding:64px 0}
  footer.pie nav{margin-left:0}
  .hoja::after{right:-4px; font-size:16px}
}
.privado h2, .cierre h2{margin-bottom:18px}
.catalogo .tarjeta{grid-template-rows:auto 1fr; align-content:start; align-items:start}
.catalogo .tarjeta h3, .catalogo .tarjeta p{grid-column:2}

/* Botón fijo de WhatsApp (sólo celular) */
.wa-fijo{display:none}
@media (max-width:760px){
  .wa-fijo{display:block; position:fixed; left:16px; right:16px; bottom:16px; z-index:50; background:var(--stamp); color:#fff; text-align:center; font-weight:600; padding:14px 18px; border-radius:var(--r); text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.25)}
  body{padding-bottom:76px}
}