/* Recursos gratuitos: franja de la landing, listado y detalle.
   Solo añade piezas nuevas sobre landing.css (mismas variables, tarjetas y animaciones).
   Mobile-first: lo de escritorio va en media queries min-width. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button.btn{font-family:inherit;line-height:inherit;cursor:pointer}
button.btn--ghost{color:inherit}
.rec main .btn--ghost:hover,.nav .btn--ghost:hover{background:rgba(30,34,53,.06)}

/* Barra superior: «Recursos» a la derecha de «Escribirme», separado por una línea con los colores de la marca */
.nav .wrap{gap:10px}
.nav .btn{min-height:44px;padding-inline:.8em}
.nav__sep{flex:none;width:3px;height:28px;border-radius:3px;background:linear-gradient(var(--yellow),var(--coral),var(--lav),var(--mint))}
.nav .btn--recursos{margin-left:0;border-style:dashed;border-width:2px}
.nav .btn--recursos[aria-current="page"]{border-style:solid;background:rgba(201,182,242,.35)}
/* En el móvil no hay menú de secciones: «Recursos» a la izquierda de la línea y «Escribirme» a la derecha */
.nav .btn--recursos{order:2;margin-left:auto}
.nav__sep{order:3}
.nav .wrap:has(.btn--recursos) .btn--primary{order:4;margin-left:0}
.btn--recursos__icon{display:none}
.nav--sub{transition:none}

/* Cabecera de las páginas de recursos: la misma de la landing, más baja y sin figuras móviles */
.hero--sub{min-height:0;padding-block:calc(64px + clamp(24px,5vw,48px)) clamp(112px,12vw,140px)}
.hero--sub h1{font-size:clamp(2.1rem,1.5rem + 3vw,3.4rem);max-width:22ch}
.hero--sub .lead{max-width:46ch}
/* Figuras que flotan en la cabecera (como en la landing, pero solo con CSS).
   En móvil solo en la franja de abajo, para no pisar el texto; en escritorio, a la derecha. */
.hero--sub{--tono:#e8bf61;--tono2:#b8a7df}
.hero--prompt{--tono:#b8a7df;--tono2:#e8bf61}
.hero--pdf{--tono:#f0906f;--tono2:#b8a7df}
.hero--enlace{--tono:#83c1a7;--tono2:#e8bf61}
.sky--sub .f{animation:flota var(--t,9s) ease-in-out var(--dl,0s) infinite alternate}
.sky--sub .s1{width:130px;height:130px;left:auto;right:-60px;top:auto;bottom:-56px;--t:11s}
.sky--sub .s1>i{background:var(--tono)}
.sky--sub .s2{width:110px;height:110px;left:-54px;top:auto;bottom:-48px;--t:13s;--dl:-4s}
.sky--sub .s2>i{background:var(--tono2);opacity:.9}
.sky--sub .s3{display:none;width:46px;height:46px}
.sky--sub .s4{width:16px;height:16px;left:58%;top:auto;bottom:76px;--t:7s}
.sky--sub .s4>i{background:var(--coral)}
.sky--sub .s5{display:none;width:40px;height:40px}
.sky--sub .s6{width:24px;height:24px;left:auto;right:20%;top:auto;bottom:66px;--t:8s;--dl:-2s}
.sky--sub .s7{width:62px;height:18px;left:24%;top:auto;bottom:62px;--t:10s;--dl:-5s}
.sky--sub .s8{display:none;width:12px;height:12px}
.sky--sub .s8>i{background:var(--mint)}
@keyframes flota{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--fx,14px),var(--fy,-12px),0)}}
.sky--sub .s2,.sky--sub .s6{--fx:-12px;--fy:10px}
.rec-eyebrow{display:block;color:var(--yellow);margin-bottom:12px}
.rec-volver{display:inline-flex;align-items:center;min-height:44px;margin:-8px 0 6px;color:#c9ccdc;text-decoration:none;font-weight:600;font-size:.95rem}
.rec-volver:hover{color:#fff}

/* Tarjeta de recurso (una sola, para la franja y el listado) */
.rec-grid{display:grid;gap:16px}
.rec-card{--c:var(--lav);display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative;overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s var(--ease),box-shadow .35s ease}
.rec-card--pdf{--c:var(--coral)}.rec-card--imagen{--c:var(--yellow)}.rec-card--enlace{--c:var(--mint)}
/* Cada tarjeta, un tono de la gama de su tipo: lilas para prompts, cálidos para PDF, verdes para enlaces */
.rec-grid>.rec-card--prompt:nth-child(4n+2){--c:#B39BEF}.rec-grid>.rec-card--prompt:nth-child(4n+3){--c:#DDB8EE}.rec-grid>.rec-card--prompt:nth-child(4n){--c:#A58BE3}
.rec-grid>.rec-card--pdf:nth-child(4n+2){--c:#FF6F5E}.rec-grid>.rec-card--pdf:nth-child(4n+3){--c:#FFA552}.rec-grid>.rec-card--pdf:nth-child(4n){--c:#FFC85C}
.rec-grid>.rec-card--enlace:nth-child(4n+2){--c:#6EC8A4}.rec-grid>.rec-card--enlace:nth-child(4n+3){--c:#A6DB9A}.rec-grid>.rec-card--enlace:nth-child(4n){--c:#7CCFCB}
.rec-grid>.rec-card--imagen:nth-child(4n+2){--c:#FFC04D}.rec-grid>.rec-card--imagen:nth-child(4n+3){--c:#F7DC85}.rec-grid>.rec-card--imagen:nth-child(4n){--c:#FFB066}
.rec-grid>.rec-card:nth-child(3n+2){--d:.08s}.rec-grid>.rec-card:nth-child(3n){--d:.16s}
.rec-card::before{content:"";position:absolute;right:-40px;top:-40px;width:110px;height:110px;border-radius:46% 54% 60% 40%/55% 45% 55% 45%;background:var(--c);opacity:.35;transition:transform .6s var(--ease);animation:forma 14s ease-in-out infinite alternate}
@keyframes forma{33%{border-radius:60% 40% 38% 62%/42% 58% 42% 58%}66%{border-radius:38% 62% 55% 45%/60% 40% 60% 40%}100%{border-radius:52% 48% 44% 56%/48% 62% 38% 52%}}
.rec-card__icon svg{animation:icono 4.5s ease-in-out infinite}
.rec-card:hover .rec-card__icon{animation:menea .6s ease}
@keyframes icono{50%{transform:translateY(-2px) rotate(-4deg)}}
@keyframes menea{30%{transform:rotate(-10deg) scale(1.08)}60%{transform:rotate(8deg) scale(1.08)}}
.rec-card:hover,.js .reveal.in.rec-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -26px rgba(30,34,53,.45)}
.rec-card:hover::before{transform:scale(1.35) rotate(25deg)}
.rec-card__icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--c);margin-bottom:10px;position:relative}
.rec-card__icon svg{width:26px;height:26px}
.rec-card__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--ink-soft)}
.rec-card h3{margin-top:2px}
.rec-card p{color:var(--ink-soft);font-size:1rem}
/* En la tarjeta, título y descripción tienen un máximo de líneas y acaban en «…»; dentro del recurso se leen enteros */
.rec-card h3,.rec-card p{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.rec-card h3{-webkit-line-clamp:3;line-clamp:3}
.rec-card p{-webkit-line-clamp:3;line-clamp:3}
.rec-card__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px}
.pill--ejemplo{background:#ffe27a;border-color:#efcd52;color:var(--ink);font-weight:700}

/* Tarjeta de la landing, tras «¿Hablamos?»: una sugerencia, no parte del método */
.rec-sug-sec{padding-top:0}
.rec-sug{background:var(--lav);border-radius:32px;padding:clamp(32px,6vw,64px);position:relative;overflow:hidden;isolation:isolate}
.rec-sug .deco{position:absolute;z-index:-1;border-radius:46% 54% 60% 40%/55% 45% 55% 45%;animation:morph 15s ease-in-out infinite alternate}
.rec-sug .deco--1{width:240px;height:240px;right:-80px;top:-90px;background:var(--mint);opacity:.8}
.rec-sug .deco--2{width:160px;height:160px;right:14%;bottom:-100px;background:var(--yellow);opacity:.75;animation-delay:-6s}
.rec-sug .eyebrow{display:block;margin-bottom:10px}
.rec-sug h2{max-width:18ch;font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem)}
.rec-sug p{max-width:46ch}
.rec-sug .btn--primary{background:var(--navy);color:#fff;box-shadow:0 10px 24px -12px rgba(30,34,53,.8)}
.rec-sug .btn--primary:hover{background:#2c3250}

/* Buscador del listado */
.rec-buscar{position:relative;margin-bottom:clamp(28px,5vw,44px)}
.rec-buscar svg{position:absolute;left:18px;top:50%;width:22px;height:22px;margin-top:-11px;color:var(--ink-soft);pointer-events:none}
.rec-buscar input{width:100%;min-height:56px;padding:0 20px 0 52px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:1.05rem;transition:border-color .2s ease,box-shadow .3s ease}
.rec-buscar input::placeholder{color:#8b8fa0}
.rec-buscar input:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,138,101,.22)}

/* Listado */
.rec-grupo,.rec-vista,.rec-info{padding-block:0} /* son <section>: sin el relleno de las secciones de la landing */
.rec-lista{padding-block:clamp(24px,5vw,48px) clamp(56px,9vw,104px)}
.rec-grupo+.rec-grupo{margin-top:clamp(40px,6vw,64px)}
.rec-grupo h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin-bottom:.15em}
/* Cabecera de cada grupo: icono que salta, número de recursos, qué es el tipo y una onda que se dibuja */
.rec-grupo--prompt{--c:var(--lav)}.rec-grupo--pdf{--c:var(--coral)}.rec-grupo--imagen{--c:var(--yellow)}.rec-grupo--enlace{--c:var(--mint)}
.rec-grupo__cab{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;margin-bottom:22px}
.rec-grupo__cab p{color:var(--ink-soft);font-size:.98rem;line-height:1.45}
.rec-grupo__chip{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--c)}
.rec-grupo__chip svg{width:28px;height:28px}
.rec-grupo__n{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;margin-left:4px;padding:0 .4em;border-radius:999px;background:var(--c);font-family:var(--body);font-size:.5em;font-weight:700;vertical-align:.35em}
.rec-grupo__ola{grid-column:2;width:120px;height:14px;overflow:visible}
.rec-grupo__ola path{fill:none;stroke:var(--c);stroke-width:4;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset 1.1s .45s var(--ease)}
.rec-grupo__cab.in .rec-grupo__ola path,html:not(.js) .rec-grupo__ola path{stroke-dashoffset:0}
.js .rec-grupo__chip{transform:scale(0) rotate(-25deg);transition:transform .7s cubic-bezier(.3,1.6,.5,1) .15s}
.js .rec-grupo__cab.in .rec-grupo__chip{transform:none}

/* Fondo de puntos (sutil), como un cuaderno: en los recursos y en «Por qué funciona»,
   «Cómo trabajamos» y «Dudas» de la landing. Aparece y se va difuminado para fundirse con lo de
   alrededor; entre «Por qué funciona» y «Cómo trabajamos» sigue continuo porque van seguidas. */
.fondo-vivo{position:relative;isolation:isolate;--fade-arriba:160px;--fade-abajo:160px}
.fondo-vivo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(30,34,53,.07) 1.3px,transparent 1.7px);background-size:24px 24px;background-attachment:fixed;
  -webkit-mask-image:linear-gradient(transparent,#000 var(--fade-arriba),#000 calc(100% - var(--fade-abajo)),transparent);
  mask-image:linear-gradient(transparent,#000 var(--fade-arriba),#000 calc(100% - var(--fade-abajo)),transparent)}
#porque.fondo-vivo{--fade-abajo:0px}
#metodo.fondo-vivo{--fade-arriba:0px}
/* «Dudas», «¿Hablamos?» y la tarjeta de recursos van seguidas: un solo fondo que se difumina justo antes del aviso legal */
#dudas.fondo-vivo{--fade-abajo:0px}
#contacto.fondo-vivo{--fade-arriba:0px;--fade-abajo:0px}
#contacto.fondo-vivo:last-child{--fade-abajo:160px}
#recursos.fondo-vivo{--fade-arriba:0px}
.rec-filtros{display:grid;gap:10px;margin-bottom:clamp(28px,5vw,44px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 1.05em;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease}
.chip:hover{border-color:#d4cab7}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.rec-vacio,.rec-sinresultados{color:var(--ink-soft);font-size:1.08rem}

/* Detalle */
.rec-detalle{padding-block:clamp(24px,5vw,48px) clamp(56px,9vw,104px)}
.rec-detalle .wrap{display:grid;gap:clamp(36px,6vw,56px)}
.rec-detalle .wrap>*{max-width:760px}
.rec-vista>.pill--ejemplo{display:inline-block;margin-bottom:14px}
.rec-aviso{margin-top:14px;display:flex;align-items:center;gap:12px;background:#FFF3D6;border-radius:16px;padding:12px 16px;font-weight:600;font-size:.97rem;line-height:1.4}
.rec-aviso__icon{flex:none;display:grid;place-items:center}
.rec-aviso__icon svg{width:24px;height:24px}
.btnrow.rec-acciones{margin-top:16px}
.rec-vista>.rec-acciones:first-child,.rec-vista>.pill--ejemplo+.rec-acciones{margin-top:0}
.rec-prompt{margin-top:18px;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--body);font-size:1.02rem;line-height:1.65;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 24px}
.rec-imagen img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.rec-info h2,.rec-quien h2{font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);margin-bottom:.4em}
.rec-info>p{color:var(--ink-soft)}
.rec-para{display:grid;gap:10px;margin-top:20px}
.rec-para div{display:flex;flex-wrap:wrap;gap:4px 14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px}
.rec-para dt{font-weight:700;min-width:6.5em}
.rec-para dd{margin:0;color:var(--ink-soft)}
.rec-info h3{font-size:1.15rem;margin:1.6em 0 .4em}
.rec-info h3~p{color:var(--ink-soft);margin-top:.6em}
.rec-quien{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.rec-quien img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:42% 20%}
.rec-quien p{color:var(--ink-soft)}
.rec-quien .btn{margin-top:16px}
.rec-hablamos{padding-block:0}

/* Confirmación: tarjeta (primera vez) y aviso breve (siguientes) */
.aviso__ok,.aviso__mal{flex:none;width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--navy);display:grid;place-items:center}
.aviso__mal{background:var(--coral)}
.aviso__ok svg,.aviso__mal svg{width:20px;height:20px}
.sheet{padding:0;border:0;background:transparent;color:var(--ink);width:100%;max-width:100%;max-height:100%;margin:auto 0 0;overflow:visible}
.sheet::backdrop{background:rgba(30,34,53,.55)}
.sheet__card{position:relative;background:var(--cream);border-radius:28px 28px 0 0;padding:30px var(--gut) calc(24px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px -24px rgba(30,34,53,.5)}
.sheet[open] .sheet__card{animation:sheet-sube .45s var(--ease)}
.sheet[open]::backdrop{animation:sheet-fundido .3s ease}
@keyframes sheet-sube{from{transform:translateY(100%)}}
@keyframes sheet-fundido{from{opacity:0}}
@keyframes sheet-aparece{from{opacity:0;transform:translateY(14px) scale(.97)}}
.sheet__x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.sheet__x:hover{background:rgba(30,34,53,.07)}
.sheet__x svg{width:22px;height:22px}
.sheet__ok{display:flex;align-items:center;gap:12px;padding-right:40px;font-family:var(--display);font-size:1.45rem;font-weight:650;line-height:1.2}
.sheet__texto{margin-top:14px;color:var(--ink-soft)}
.sheet__botones{display:grid;gap:10px;margin-top:22px}
.sheet__nota{margin-top:16px;font-size:.82rem;color:var(--ink-soft);text-align:center}
.aviso{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 32px);padding:8px 18px 8px 8px;border-radius:999px;background:var(--navy);color:#fff;font-weight:600;box-shadow:0 16px 30px -14px rgba(30,34,53,.7);opacity:0;transform:translate(-50%,16px);transition:opacity .25s ease,transform .35s var(--ease)}
.aviso.on{opacity:1;transform:translate(-50%,0)}
.aviso .aviso__mal,.aviso--error .aviso__ok{display:none}
.aviso--error .aviso__mal{display:grid}
.aviso--error{border-radius:18px;padding:10px 16px 10px 10px;width:min(460px,calc(100% - 32px));line-height:1.4}

@media (min-width:380px){
  .nav .btn{padding-inline:1.1em} /* el relleno original; por debajo se estrecha para que quepan los dos botones */
}
@media (min-width:760px){
  .nav .wrap{gap:20px}
  .nav .btn--recursos,.nav__sep,.nav .wrap:has(.btn--recursos) .btn--primary{order:0}
  .nav .btn--recursos{margin-left:0}
  .nav .wrap:has(.btn--recursos) .btn--primary{margin-left:8px}
  .btn--recursos__icon{display:block;width:18px;height:18px}
  .rec-grid{grid-template-columns:repeat(2,1fr)}
  .rec-para{grid-template-columns:repeat(3,1fr)}
  .rec-para div{flex-direction:column}
  .rec-quien{grid-template-columns:112px 1fr;gap:24px;padding:28px}
  .rec-quien img{width:112px;height:112px}
  .sheet{margin:auto;width:min(440px,calc(100% - 48px))}
  .sheet__card{border-radius:var(--r);padding:32px 30px 26px}
  .sheet[open] .sheet__card{animation:sheet-aparece .35s var(--ease)}
  .sheet__botones{grid-template-columns:1fr 1fr}
}
@media (min-width:960px){
  .sky--sub .s1{width:240px;height:240px;right:-80px;bottom:auto;top:56px}
  .sky--sub .s2{width:170px;height:170px;left:auto;right:16%;bottom:-70px}
  .sky--sub .s3{display:block;left:70%;top:32%;--t:12s}
  .sky--sub .s4{left:80%;top:46%;bottom:auto}
  .sky--sub .s5{display:block;left:88%;top:66%;--t:9s;--dl:-3s}
  .sky--sub .s6{right:auto;left:74%;top:70%;bottom:auto}
  .sky--sub .s7{left:62%;top:auto;bottom:90px}
  .sky--sub .s8{display:block;left:66%;top:16%;--t:6s}
  .rec-grid{grid-template-columns:repeat(3,1fr)}
}

/* Tarjeta de un grupo todavía vacío */
.rec-card--pronto{border-style:dashed;background:rgba(255,255,255,.6)}
.rec-card--pronto:hover,.js .reveal.in.rec-card--pronto:hover{transform:none;box-shadow:none}
.pill--pronto{background:var(--c);border-color:transparent;font-weight:700}

/* Cuadro del recurso: lo primero del detalle, igual para todos los tipos y teñido con su color */
.rec-caja{--tinte:#F1ECFC;--borde:#e0d6f6;--c:var(--lav);position:relative;overflow:hidden;isolation:isolate;display:grid;gap:14px;background:var(--tinte);border:1px solid var(--borde);border-radius:var(--r);padding:26px 24px}
.rec-caja--pdf{--tinte:#FFF0EA;--borde:#f8d5c8;--c:var(--coral)}
.rec-caja--imagen{--tinte:#FFF6DE;--borde:#f3e2b0;--c:var(--yellow)}
.rec-caja--enlace{--tinte:#EAF6F0;--borde:#cfe9dc;--c:var(--mint)}
.rec-caja .deco{position:absolute;z-index:-1;width:170px;height:170px;right:-60px;top:-70px;border-radius:46% 54% 60% 40%/55% 45% 55% 45%;background:var(--c);opacity:.55;animation:forma 14s ease-in-out infinite alternate}
.rec-caja__chip{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--c)}
.rec-caja__chip svg{width:28px;height:28px}
.rec-caja .pill--ejemplo{display:inline-block;margin-bottom:10px}
.rec-caja h2{font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);margin-bottom:.35em}
.rec-caja__linea{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.02rem;overflow-wrap:anywhere}
.rec-caja__linea svg{flex:none;width:18px;height:18px;color:#2f8a63}
.rec-caja__nota{margin-top:6px;color:var(--ink-soft);max-width:52ch}
.rec-caja .btnrow.rec-acciones{margin-top:18px}
.rec-caja .rec-imagen{margin-top:16px}
.rec-caja .rec-prompt{margin-top:16px}
.rec-caja .rec-aviso{margin-top:16px;background:rgba(255,255,255,.7)}
/* Recurso con portada y varias versiones (p. ej. ordenador y móvil) */
.rec-card__portada{display:block;position:relative;margin:-24px -24px 12px;aspect-ratio:16/10;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.rec-card__portada img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.rec-card--portada::before{display:none}
.rec-portada{margin-top:16px;width:min(230px,70%)}
.rec-portada img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--borde);box-shadow:0 18px 32px -22px rgba(30,34,53,.5)}
.rec-versiones{display:grid;gap:12px;margin-top:18px}
.rec-version{display:grid;gap:14px;background:rgba(255,255,255,.8);border:1px solid var(--borde);border-radius:14px;padding:16px 18px}
.rec-version h3{font-size:1.12rem;margin:0 0 .25em}
.rec-version p{color:var(--ink-soft);font-size:.98rem;margin:0}
.rec-caja .rec-version .btnrow.rec-acciones{margin-top:0}
@media (min-width:640px){
  .rec-version{grid-template-columns:1fr auto;align-items:center;gap:20px}
}
@media (min-width:760px){
  .rec-caja{grid-template-columns:auto 1fr;gap:22px;padding:30px}
}