/* Galerías de variantes (blog y plantilla A). Se apoya en firma.css.
   Las fotos son las que ya usa su web (/static/), enlazadas tal cual. */
.grupo{padding:64px 0;border-bottom:1px solid var(--sand)}
.grupo>.caja>h2{font-size:38px;font-weight:300;margin-bottom:6px}
.grupo>.caja>p.que{max-width:720px;margin-bottom:8px}
.var{margin-top:44px}
.var>.rot{display:flex;gap:12px;align-items:baseline;margin-bottom:14px;font:400 12px var(--sans);letter-spacing:.08em;color:#5a4a00}
.var>.rot b{background:#fff8d6;border:1px dashed #cdbb55;padding:3px 9px;font-weight:500}
.estrecha{max-width:var(--texto)}
.lado-demo{display:grid;grid-template-columns:repeat(auto-fill,290px);gap:36px;align-items:start}
.foto{background-size:cover;background-position:center}
.velo{position:relative;color:var(--sand);isolation:isolate}
.velo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,33,24,.92) 0%,rgba(46,33,24,.72) 55%,rgba(46,33,24,.25) 100%);z-index:-1}
.velo.abajo::before{background:linear-gradient(0deg,rgba(46,33,24,.94) 0%,rgba(46,33,24,.6) 55%,rgba(46,33,24,.1) 100%)}
.velo h2,.velo h3,.velo h1{color:var(--cream)}
.velo .boton{background:var(--cream);border-color:var(--cream);color:var(--espresso)}
.velo .boton:hover{background:var(--sand);border-color:var(--sand)}
.velo .enlace{color:var(--cream);border-color:var(--cream)}
.marco{position:relative}
.marco::after{content:"";position:absolute;inset:12px;border:1px solid rgba(250,247,244,.3);pointer-events:none}

/* ── Lo esencial ── */
.es2{background:var(--espresso);color:var(--sand);padding:34px 36px}
.es2 h3{color:var(--cream);font-size:26px;margin-bottom:14px}
.es2 ol{list-style:none;margin:0;padding:0;counter-reset:e}
.es2 li{counter-increment:e;display:grid;grid-template-columns:44px 1fr;padding:13px 0;border-top:1px solid rgba(217,207,196,.22)}
.es2 li::before{content:counter(e,decimal-leading-zero);font-family:var(--serif);font-size:22px;color:var(--umber);filter:brightness(1.5)}
.es3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--umber);border-bottom:1px solid var(--umber)}
.es3 div{padding:24px 22px}
.es3 div+div{border-left:1px solid var(--sand)}
.es3 b{display:block;font-family:var(--serif);font-weight:300;font-size:44px;line-height:1;color:var(--umber);margin-bottom:8px}
.es3 span{font-size:14.5px;line-height:1.5;display:block}
.es4{background:var(--cream);padding:8px 30px}
.es4 dl{margin:0}
.es4 div{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--sand)}
.es4 div:last-child{border:0}
.es4 dt{font-family:var(--serif);font-size:20px;color:var(--espresso)}
.es4 dd{margin:0}
.es5{display:grid;grid-template-columns:170px 1fr;background:var(--linen)}
.es5 .foto{min-height:100%}
.es5 .t{padding:28px 30px}
.es5 h3{margin-bottom:8px}

/* ── Banners del cuerpo ── */
.b4{padding:56px 44px;min-height:280px;display:flex;flex-direction:column;justify-content:center}
.b4 h3{font-size:34px;font-weight:300;max-width:440px;margin-bottom:10px}
.b4 p{max-width:400px;font-size:15px}
.b5{display:grid;grid-template-columns:1fr 1.15fr;background:var(--cream);box-shadow:0 22px 44px -30px rgba(46,33,24,.5)}
.b5 .foto{min-height:250px}
.b5 .t{padding:34px 34px 36px}
.b5 h3{font-size:28px;margin-bottom:8px}
.b6{display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:center;background:var(--espresso);color:var(--sand);padding:30px 34px}
.b6 img{width:150px;height:186px;object-fit:cover}
.b6 q{display:block;font-family:var(--serif);font-style:italic;font-size:27px;line-height:1.25;color:var(--cream);quotes:none;margin-bottom:10px}
.b6 cite{font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:block;margin-bottom:18px}
.b6 .boton{background:var(--cream);border-color:var(--cream);color:var(--espresso)}
.b7{background:var(--linen);padding:34px}
.b7 h3{font-size:27px;margin-bottom:18px}
.b7 ol{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.b7 li{padding:0 18px;border-left:1px solid var(--umber);font-size:14.5px;line-height:1.5}
.b7 li b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1;color:var(--umber);margin-bottom:6px}
.b8{padding:120px 34px 30px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.b8 h3{font-size:28px;max-width:380px}
.b9{border:1px solid var(--umber);padding:30px 34px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;position:relative}
.b9::before{content:"EN";position:absolute;top:-11px;left:28px;background:var(--parchment);padding:0 10px;font-size:11px;letter-spacing:.24em;color:var(--umber)}
.b9 h3{font-size:26px;font-style:italic;margin-bottom:4px}
.b9 p{margin:0;font-size:14.5px}

/* ── Banner lateral ── */
.l2 .foto{height:170px}
.l2 .t{background:var(--espresso);color:var(--sand);padding:24px 24px 26px}
.l2 h3{color:var(--cream);font-size:24px;margin-bottom:8px}
.l2 p{font-size:14px}
.l2 .boton,.l4 .boton,.l5 .boton{display:block;text-align:center}
.l2 .boton{background:var(--cream);border-color:var(--cream);color:var(--espresso)}
.l3{padding:230px 24px 26px}
.l3 h3{font-size:25px;margin-bottom:14px}
.l4{background:var(--cream);border-top:2px solid var(--umber);padding:26px 24px;text-align:center}
.l4 img{width:92px;height:92px;border-radius:50%;object-fit:cover;margin:0 auto 14px}
.l4 .nombre{font-family:var(--serif);font-size:23px;color:var(--espresso);line-height:1.1}
.l4 .cargo{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--umber);margin:4px 0 12px}
.l4 p{font-size:14px}
.l5{border:1px solid var(--sand);padding:24px}
.l5 h3{font-size:23px;margin-bottom:6px}
.l5 dl{margin:14px 0 18px}
.l5 dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--sand);font-size:13.5px}
.l5 dt{letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;color:var(--umber);padding-top:3px}
.l5 dd{margin:0;text-align:right;color:var(--espresso)}
.l6{background:var(--umber);color:var(--cream);padding:26px 24px}
.l6 h3{color:var(--cream);font-size:24px;font-style:italic;margin-bottom:10px}
.l6 p{font-size:14px;margin-bottom:16px}
.l6 .enlace{color:var(--cream);border-color:var(--cream)}

/* ── Siguientes artículos ── */
.s2{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.s2 a{text-decoration:none;display:block}
.s2 .foto{aspect-ratio:4/3;margin-bottom:16px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.s2 .recorte{overflow:hidden}
.s2 a:hover .foto{transform:scale(1.04)}
.s2 span,.s3 span,.s4 span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--umber)}
.s2 b,.s4 b{display:block;font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.2;color:var(--espresso);margin:6px 0 8px}
.s2 small,.s4 small{font-size:12.5px;color:var(--taupe)}
.s3{list-style:none;margin:0;padding:0;border-top:1px solid var(--umber)}
.s3 a{display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--sand);text-decoration:none;transition:padding .3s}
.s3 a:hover{padding-left:12px}
.s3 i{font:300 34px/1 var(--serif);font-style:normal;color:var(--sand)}
.s3 b{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.2;color:var(--espresso);display:block}
.s4{display:grid;grid-template-columns:1.4fr 1fr;gap:28px}
.s4 a{text-decoration:none}
.s4 .grande{padding:44px 38px;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end}
.s4 .grande span{color:var(--sand)}
.s4 .grande b{color:var(--cream);font-size:34px;font-weight:300}
.s4 .grande small{color:var(--sand)}
.s4 .col{display:grid;gap:0;align-content:start;border-top:1px solid var(--umber)}
.s4 .col a{padding:24px 0;border-bottom:1px solid var(--sand)}
.s5{background:var(--espresso);color:var(--sand);padding:40px;display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center}
.s5 span{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase}
.s5 b{font-family:var(--serif);font-weight:300;font-size:32px;line-height:1.15;color:var(--cream);display:block}
.s5 .flecha{font:300 54px/1 var(--serif);color:var(--cream)}

/* ── Plantilla A: portadas ── */
.p2{padding:110px 0 90px}
.p2 .caja>div{max-width:640px}
.p2 .tira{display:flex;flex-wrap:wrap;gap:0;margin-top:44px;border-top:1px solid rgba(250,247,244,.3)}
.p2 .tira div{padding:18px 34px 0 0;margin-right:34px;border-right:1px solid rgba(250,247,244,.3)}
.p2 .tira div:last-child{border:0}
.p2 .tira dt,.p3 dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.p2 .tira dd,.p3 dd{margin:4px 0 0;font-family:var(--serif);font-size:21px;color:var(--cream)}
.p3{display:grid;grid-template-columns:1fr 1fr}
.p3 .t{background:var(--espresso);color:var(--sand);padding:84px 64px 84px max(24px,calc((100vw - var(--ancho))/2 + 24px))}
.p3 .t h1{color:var(--cream)}
.p3 dl{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;margin:34px 0 0}
.p3 .t .boton{background:var(--cream);border-color:var(--cream);color:var(--espresso)}
.p3 .t .enlace{color:var(--sand);border-color:var(--sand)}
.p4{text-align:center;padding:96px 0 0;background:var(--parchment)}
.p4 h1{max-width:820px;margin:0 auto}
.p4 .raya{margin:26px auto}
.p4 p{max-width:600px;margin:0 auto}
.p4 .acciones{justify-content:center}
.p4 .barra{display:grid;grid-template-columns:repeat(4,1fr);background:var(--espresso);color:var(--sand);margin-top:64px;text-align:left}
.p4 .barra div{padding:26px 28px}
.p4 .barra div+div{border-left:1px solid rgba(217,207,196,.22)}
.p4 .barra dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.p4 .barra dd{margin:4px 0 0;font-family:var(--serif);font-size:21px;color:var(--cream)}

/* ── Plantilla A: para quién ── */
.q2{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.q2 div.c{padding:150px 24px 24px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end}
.q2 h3{font-size:25px;margin-bottom:4px}
.q2 p{margin:0;font-size:14.5px}
.q3{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--sand);border:1px solid var(--sand)}
.q3>div{background:var(--cream);padding:32px}
.q3>div.no{background:var(--linen)}
.q3 h3{margin-bottom:12px}

/* ── Plantilla A: proceso ── */
.r2{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--umber)}
.r2 li{list-style:none;padding:26px 24px 8px 0;position:relative}
.r2 li+li{padding-left:24px;border-left:1px solid var(--sand)}
.r2 li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--umber);border-radius:50%}
.r2 li+li::before{left:24px}
.r2 .n{font:300 46px/1 var(--serif);color:var(--sand);display:block;margin-bottom:10px}
.r2 h3{margin-bottom:6px}
.r2 p{font-size:14.5px}
.r3{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.r3 .foto{min-height:480px}
.r4 li{display:grid;grid-template-columns:150px 1fr;gap:30px;list-style:none;padding:26px 0;border-bottom:1px solid rgba(217,207,196,.22)}
.r4 .cuando{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);padding-top:8px}
.r4 h3{color:var(--cream);margin-bottom:4px}

/* ── Plantilla A: qué incluye ── */
.i2{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--sand);border:1px solid var(--sand)}
.i2 div{background:var(--parchment);padding:28px 26px}
.i2 .n{font:400 14px var(--serif);letter-spacing:.14em;color:var(--umber)}
.i2 h3{font-size:21px;margin-top:6px}
.i3{width:100%;border-collapse:collapse}
.i3 th{font:400 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--umber);text-align:left;padding:0 20px 14px 0;border-bottom:1px solid var(--umber)}
.i3 td{padding:17px 20px 17px 0;border-bottom:1px solid var(--sand);vertical-align:top}
.i3 td:first-child{font-family:var(--serif);font-size:20px;color:var(--espresso)}
.i3 .si{color:var(--umber);font-size:18px}
.i4{display:grid;grid-template-columns:1.3fr 1fr;gap:0}
.i4 .l{background:var(--cream);padding:40px}
.i4 .d{background:var(--espresso);color:var(--sand);padding:40px;display:flex;flex-direction:column;justify-content:center}
.i4 .d b{font:300 54px/1 var(--serif);color:var(--cream);display:block;margin:6px 0 4px}
.i4 .d .boton{background:var(--cream);border-color:var(--cream);color:var(--espresso);align-self:flex-start;margin-top:22px}

/* ── Plantilla A: preguntas, autora, cierre ── */
.f2{display:grid;grid-template-columns:1fr 1fr;gap:36px 56px}
.f2 h3{margin-bottom:8px;padding-top:18px;border-top:1px solid var(--umber)}
.f3{display:grid;grid-template-columns:1fr 1.6fr;gap:64px}
.f3 .ayuda{background:var(--linen);padding:30px;align-self:start}
.a2{display:grid;grid-template-columns:340px 1fr;gap:0;background:var(--cream)}
.a2 img{width:100%;height:100%;min-height:400px;object-fit:cover}
.a2 .t{padding:52px}
.a2 q{display:block;font-family:var(--serif);font-style:italic;font-size:30px;line-height:1.25;color:var(--espresso);quotes:none;margin-bottom:22px}
.a3{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.a3 .t{background:var(--espresso);color:var(--sand);padding:56px;display:flex;flex-direction:column;justify-content:center}
.a3 .nombre{font-family:var(--serif);font-size:34px;font-weight:300;color:var(--cream);line-height:1.1;margin:0 0 6px}
.a3 .cargo{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 18px}
.c2{padding:120px 0;text-align:center}
.c2 h2{font-size:clamp(32px,4vw,50px);font-weight:300;max-width:760px;margin:0 auto 10px}
.c2 .acciones{justify-content:center}
.c3{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--cream)}
.c3 .t{padding:56px}
.c3 form{background:var(--linen);padding:44px 48px;display:grid;gap:16px}
.c3 label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--umber);display:grid;gap:6px}
.c3 input,.c3 select{font:300 15px var(--sans);color:var(--espresso);background:transparent;border:0;border-bottom:1px solid var(--umber);padding:8px 0;border-radius:0}
.c3 input:focus,.c3 select:focus{outline:none;border-bottom-color:var(--espresso);box-shadow:0 1px 0 var(--espresso)}
.c3 button{cursor:pointer;justify-self:start;margin-top:8px}
.c4{position:sticky;bottom:0;background:var(--espresso);color:var(--sand);padding:14px 0;z-index:9}
.c4 .caja{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.c4 b{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--cream)}
.c4 .boton{background:var(--cream);border-color:var(--cream);color:var(--espresso);padding:13px 24px}

@media (max-width:900px){
  .es3,.es4 div,.es5,.b5,.b6,.b7 ol,.b9,.s2,.s3 a,.s4,.s5,.p3,.p4 .barra,.q2,.q3,.r2,.r3,.r4 li,.i2,.i4,.f2,.f3,.a2,.a3,.c3{grid-template-columns:1fr}
  .es3 div+div,.r2 li+li{border-left:0;padding-left:0}.p3 .t{padding:56px 24px}
  .r3 .foto,.a3 .foto{min-height:240px}.b7 li{margin-bottom:14px}
}

/* Ajustes tras revisar las capturas (2026-11-13) */
.rot{display:flex;gap:12px;align-items:baseline;margin-bottom:14px;font:400 12px var(--sans);letter-spacing:.08em;color:#5a4a00}
.rot b{background:#fff8d6;border:1px dashed #cdbb55;padding:3px 9px;font-weight:500}
.i4 .d .sobre{color:var(--sand)}