/* UV V21 · tarjetas «método» de la portada = componente de /vender/ (.method-section > .method-cards > article.surface-sun|image|white).
   FUENTE DE LOS VALORES: cascada calculada de https://upevivi.com/vender/ (uv-hijo/assets/uv-maquetas.css + style.css, acotados a #uv-maq-root),
   evaluada a 1440, 820 y 375 px. Las medidas con variables o clamp() conservan su fórmula: --uv-fs-title2 = clamp(22px,1.9vw,28px),
   --uv-r-card = 28px, --uv-r-cut = 8px, --uv-e1/--uv-e2 (sombras), --uv-ink #1F2A26, --uv-body #4A5654, --uv-line #E4E7E6.
   Puntos de quiebre del modelo: 1280 (relleno de sección 96→80), 1180 (4→2 columnas), 799 (relleno 56, tarjeta 20 px, alto mínimo 390),
   520 (1 columna, alto mínimo 0). Si cambia el modelo, se vuelve a medir y se actualiza este archivo. Acotado a .uv21; no toca v21.css. */
.uv21 .method-section{padding-block:96px;background:#f2f4f4;min-width:0}
.uv21 .method-wrap{width:calc(100% - max(72px,calc((100vw - 1400px) / 2)) - max(72px,calc((100vw - 1400px) / 2)));max-width:1400px;margin-inline:auto}
.uv21 .method-heading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 48px;align-items:end}
.uv21 .method-heading h2{margin:14px 0 0;max-width:750px}
.uv21 .method-heading p{margin:0;color:#4a5654;font-size:17px;line-height:1.5}
.uv21 .method-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.uv21 .method-actions a.method-btn-sec{border:1px solid rgba(23,35,43,.35);color:#17232b}
.uv21 .method-actions a.method-btn-sec:hover{background:rgba(23,35,43,.06)}
.uv21 .method-cards{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;align-items:stretch;gap:16px;margin-top:40px;min-width:0}
.uv21 .method-cards>article{box-sizing:border-box;display:flex;flex-direction:column;min-width:0;min-height:430px;padding:24px;border:1px solid #E4E7E6;border-radius:28px 28px 28px 8px;background:#fff;color:#1F2A26;font-family:"Manrope",sans-serif;font-size:15px;font-weight:400;line-height:1.55em;text-align:left;box-shadow:0 1px 2px rgba(31,42,38,.05),0 6px 16px rgba(31,42,38,.06);transition:box-shadow 340ms cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){.uv21 .method-cards>article:hover{box-shadow:0 2px 4px rgba(31,42,38,.06),0 12px 28px rgba(31,42,38,.10)}}
.uv21 .method-cards>article>span{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:none;color:inherit}
.uv21 .method-cards>article>h3{margin:42px 0 13px;font-size:clamp(22px,1.9vw,28px);font-weight:600;line-height:1.2;letter-spacing:-.01em;text-transform:none;text-wrap:balance;color:inherit}
.uv21 .method-cards>article>p{margin:0;max-width:68ch;color:#4A5654;font-size:15px;font-weight:400;line-height:1.5;letter-spacing:normal;overflow-wrap:break-word}
.uv21 .method-cards>article>ul{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid rgb(32 33 36 / .14)}
.uv21 .method-cards>article>ul>li{max-width:72ch;padding:7px 0;border-bottom:1px solid rgb(32 33 36 / .14);font-size:15px;font-weight:400;line-height:1.5;letter-spacing:normal;overflow-wrap:break-word;color:inherit}
.uv21 .method-cards>article>b{margin-top:auto;padding-top:25px;font-size:12px;font-weight:700;line-height:1.5;letter-spacing:normal;color:inherit}
.uv21 .method-cards>article>b a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.uv21 .method-cards>article.surface-sun{background:#ffdd33}
.uv21 .method-cards>article.surface-white{background:#fff}
.uv21 .method-cards>article.surface-image{position:relative;overflow:hidden;background:linear-gradient(180deg,rgb(10 22 29 / .2),rgb(10 22 29 / .94)),var(--card-image) center/cover;color:#fff}
@supports (background-image:image-set(url("x") type("image/avif"))){.uv21 .method-cards>article.surface-image{background-image:linear-gradient(180deg,rgb(10 22 29 / .2),rgb(10 22 29 / .94)),var(--card-image-set,var(--card-image))}}
.uv21 .method-cards>article.surface-image>p{color:rgb(255 255 255 / .72)}
.uv21 .method-cards>article.surface-image>ul{border-top-color:rgb(255 255 255 / .2)}
.uv21 .method-cards>article.surface-image>ul>li{border-bottom-color:rgb(255 255 255 / .2)}
@media (max-width:1279px){.uv21 .method-section{padding-block:80px}}
@media (max-width:1180px){.uv21 .method-cards{grid-template-columns:1fr 1fr}.uv21 .method-heading{grid-template-columns:1fr}}
@media (max-width:799px){
  .uv21 .method-section{padding-block:56px}
  .uv21 .method-wrap{width:calc(100% - 20px - 20px)}
  .uv21 .method-cards{margin-top:32px}
  .uv21 .method-cards>article{min-height:390px;padding:20px}
}
@media (max-width:520px){
  .uv21 .method-cards{grid-template-columns:1fr}
  .uv21 .method-cards>article{min-height:0}
  .uv21 .method-cards>article>h3{margin-top:38px}
}
