:root {
  /* Colores por defecto. Se cambian en productos.js (TIENDA.colores), que tiene prioridad */
  --primario: #3f8f5a;      /* verde suave para botones (versión delicada del verde del logo) */
  --primario-osc: #2f7346;
  --titulo: #24563a;        /* verde para títulos y textos destacados */
  --claro: #9bd27f;         /* verde claro del ratón, más suave */
  --claro-suave: #f1f8ec;   /* fondo verde muy suave */
  --menta: #e3f2da;         /* fondo de la portada */
  --acento: #e2703a;        /* naranja suave para ofertas */
  --verde: #25d366;         /* verde de WhatsApp */
  --texto: #1c2620;
  --suave: #5f6d65;
  --fondo: #f8faf5;
  --tarjeta: #ffffff;
  --borde: #e2e9de;
  --radio: 20px;
  --radio-chico: 12px;
  /* Sombras teñidas de verde (no negro puro) */
  --sombra: 0 1px 2px rgba(36, 86, 58, .06), 0 8px 24px -6px rgba(36, 86, 58, .10);
  --sombra-fuerte: 0 2px 6px rgba(36, 86, 58, .08), 0 24px 48px -12px rgba(36, 86, 58, .22);
  --suave-mov: cubic-bezier(.2, .8, .2, 1);
  --fuente-titulo: "Bricolage Grotesque", system-ui, sans-serif;
  --fuente: "Geist", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: var(--fuente); color: var(--texto); background: var(--fondo); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .logo { font-family: var(--fuente-titulo); text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primario); outline-offset: 3px; border-radius: 8px; }
.container { width: min(1180px, 100% - 32px); margin-inline: auto; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 60; background: var(--titulo); color: #fff; padding: 10px 16px; border-radius: 10px; transition: top .2s; }
.saltar:focus { top: 12px; }
.ico-wa { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; flex-shrink: 0; }

/* Aviso superior */
.aviso { background: var(--titulo); color: #eaf5e3; text-align: center; font-size: .84rem; font-weight: 500; letter-spacing: .01em; padding: 9px 16px; }

/* Header */
.header { position: sticky; top: 0; z-index: 20; background: rgba(248, 250, 245, .86); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--borde); }
.header__inner { display: flex; align-items: center; gap: 28px; padding: 12px 0; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo__img { width: auto; height: 54px; display: block; }
.menu { display: flex; gap: 4px; font-weight: 500; font-size: .94rem; color: var(--suave); }
.menu a { padding: 8px 12px; border-radius: 10px; transition: color .2s, background .2s; }
.menu a:hover { color: var(--titulo); background: var(--claro-suave); }
.search { flex: 1; position: relative; max-width: 460px; margin-left: auto; }
.search__icono { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--suave); stroke-width: 2; stroke-linecap: round; }
.search input { width: 100%; padding: 11px 16px 11px 42px; border: 1px solid var(--borde); border-radius: 14px; background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; }
.search input:focus { border-color: var(--primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primario) 14%, transparent); }
.cart-btn { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: none; background: var(--titulo); color: #fff; border-radius: 14px; cursor: pointer; transition: background .2s, transform .2s var(--suave-mov); flex-shrink: 0; }
.cart-btn:hover { background: var(--primario); transform: translateY(-1px); }
.cart-btn:active { transform: scale(.96); }
.cart-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cart-btn__count { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; display: grid; place-items: center; background: var(--acento); border: 2px solid var(--fondo); border-radius: 999px; padding: 0 5px; font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 14px; padding: 14px 26px; font-weight: 600; cursor: pointer; transition: transform .2s var(--suave-mov), background .2s, box-shadow .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--primary { background: var(--titulo); color: #fff; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--titulo) 70%, transparent); }
.btn--primary:hover { background: var(--primario); }
.btn--borde { background: #fff; color: var(--titulo); border-color: var(--borde); }
.btn--borde:hover { border-color: var(--primario); }
.btn--whatsapp { background: var(--primario); color: #fff; width: 100%; }
.btn--whatsapp:hover { background: var(--primario-osc); }
.btn--whatsapp:disabled { background: #b9c4bc; cursor: not-allowed; transform: none; }

/* Portada */
.hero { position: relative; overflow: hidden; background:
  radial-gradient(60% 80% at 88% 30%, color-mix(in srgb, var(--claro) 38%, transparent) 0, transparent 70%),
  radial-gradient(40% 60% at 0% 100%, #fff 0, transparent 70%),
  linear-gradient(175deg, var(--claro-suave), var(--menta)); padding: 72px 0 104px; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 48px; }
.hero__etiqueta { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .75); color: var(--titulo); font-size: .82rem; font-weight: 500; padding: 6px 14px 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .9); margin-bottom: 22px; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primario) 18%, transparent); }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); line-height: 1.02; letter-spacing: -.035em; color: var(--titulo); margin-bottom: 20px; font-weight: 800; max-width: 12ch; }
.hero p { font-size: 1.12rem; color: var(--suave); margin-bottom: 30px; max-width: 46ch; }
.hero__botones { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__confianza { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: .9rem; color: var(--titulo); font-weight: 500; }
.hero__confianza li { display: flex; align-items: center; gap: 6px; }
.hero__confianza svg { width: 18px; height: 18px; fill: none; stroke: var(--primario); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.hero__arte { position: relative; display: grid; place-items: center; padding: 20px 0; }
.hero__arte::before { content: ""; position: absolute; width: min(400px, 92%); aspect-ratio: 1; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .35)); border: 1px solid rgba(255, 255, 255, .9); }
.destacado { position: relative; width: 290px; background: #fff; border-radius: 26px; box-shadow: var(--sombra-fuerte); overflow: hidden; transform: rotate(-2.5deg); transition: transform .4s var(--suave-mov); }
.destacado:hover { transform: rotate(0) translateY(-4px); }
.destacado__foto { aspect-ratio: 5 / 4; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #fff 0, #fdf1e4 75%); font-size: 6rem; }
.destacado__foto img { width: 100%; height: 100%; object-fit: cover; }
.destacado__foto span { filter: drop-shadow(0 14px 16px rgba(120, 60, 20, .18)); }
.destacado__info { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.destacado__etiqueta { align-self: flex-start; background: color-mix(in srgb, var(--acento) 14%, #fff); color: color-mix(in srgb, var(--acento) 80%, black); font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 7px; }
.destacado__info strong { font-family: var(--fuente-titulo); font-size: 1.12rem; line-height: 1.25; letter-spacing: -.01em; }
.destacado__desc { color: var(--suave); font-size: .84rem; line-height: 1.45; }
.destacado__pie { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.destacado__precio { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.3rem; color: var(--titulo); font-variant-numeric: tabular-nums; }
.destacado__precio s { font-family: var(--fuente); font-weight: 400; font-size: .8rem; color: var(--suave); }
.destacado__btn { width: 42px; height: 42px; border: none; border-radius: 13px; background: var(--titulo); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .2s, transform .2s var(--suave-mov); }
.destacado__btn:hover { background: var(--primario); transform: scale(1.06); }
.destacado__btn:active { transform: scale(.95); }
.sello { position: absolute; right: 4%; top: 2%; width: 104px; height: 104px; border-radius: 50%; background: var(--titulo); color: #eaf5e3; display: grid; place-content: center; text-align: center; line-height: 1.1; transform: rotate(10deg); box-shadow: var(--sombra-fuerte); border: 3px solid #fff; }
.sello strong { font-family: var(--fuente-titulo); font-size: 1.2rem; }
.sello span { font-size: .74rem; }

/* Beneficios: una sola banda, no 4 tarjetas sueltas */
.beneficios { display: grid; grid-template-columns: repeat(4, 1fr); margin: -48px auto 0; position: relative; z-index: 2; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); border: 1px solid var(--borde); }
.beneficio { display: flex; align-items: center; gap: 14px; padding: 20px 22px; }
.beneficio + .beneficio { border-left: 1px solid var(--borde); }
.beneficio__icono { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radio-chico); background: var(--claro-suave); font-size: 1.25rem; }
.beneficio strong { display: block; font-size: .93rem; font-weight: 600; line-height: 1.3; }
.beneficio small { color: var(--suave); font-size: .8rem; }

/* Secciones */
.seccion { padding-top: 88px; }
.seccion__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.seccion__titulo h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--titulo); letter-spacing: -.03em; line-height: 1.1; }
.seccion__titulo p { color: var(--suave); margin-top: 8px; max-width: 52ch; }

/* Categorías */
.categorias { display: flex; gap: 6px; flex-wrap: wrap; background: #fff; border: 1px solid var(--borde); padding: 5px; border-radius: 14px; }
.chip { border: none; background: transparent; padding: 8px 16px; border-radius: 10px; cursor: pointer; font-weight: 500; font-size: .92rem; color: var(--suave); transition: background .2s, color .2s; }
.chip:hover { color: var(--titulo); background: var(--claro-suave); }
.chip.activo { background: var(--titulo); color: #fff; }

/* Productos */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px 20px; margin-bottom: 96px; }
.card { background: transparent; border-radius: var(--radio); display: flex; flex-direction: column; }
.card__img { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radio); background: linear-gradient(160deg, #fff, var(--claro-suave)); border: 1px solid var(--borde); overflow: hidden; transition: box-shadow .3s, transform .3s var(--suave-mov); }
.card__img[data-cat="cocina"] { background: linear-gradient(160deg, #fff, #fbf0e3); }
.card__img[data-cat="hogar"] { background: linear-gradient(160deg, #fff, #eaf3f1); }
.card:hover .card__img { box-shadow: var(--sombra-fuerte); transform: translateY(-4px); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--suave-mov); }
.card:hover .card__img img, .card:hover .card__emoji { transform: scale(1.07); }
.card__emoji { font-size: 4.8rem; transition: transform .5s var(--suave-mov); filter: drop-shadow(0 12px 14px rgba(36, 86, 58, .14)); }
.badge { position: absolute; top: 12px; left: 12px; background: var(--acento); color: #fff; font-size: .74rem; font-weight: 600; padding: 4px 8px; border-radius: 7px; z-index: 1; font-variant-numeric: tabular-nums; }
.card__body { padding: 14px 4px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card__cat { font-size: .78rem; color: var(--primario); font-weight: 500; }
.card__title { font-size: 1.06rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.card__desc { font-size: .87rem; color: var(--suave); flex: 1; line-height: 1.5; }
.card__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1.2; font-variant-numeric: tabular-nums; }
.card__price strong { font-family: var(--fuente-titulo); font-size: 1.3rem; color: var(--titulo); letter-spacing: -.01em; }
.card__price s { color: var(--suave); font-size: .82rem; }
.card__btn { border: 1px solid var(--borde); background: #fff; color: var(--titulo); padding: 9px 14px; border-radius: 12px; font-weight: 600; font-size: .88rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--suave-mov); white-space: nowrap; }
.card__btn:hover { background: var(--titulo); border-color: var(--titulo); color: #fff; }
.card__btn:active { transform: scale(.96); }
.card__btn.agregado, .destacado__btn.agregado { background: var(--primario); border-color: var(--primario); color: #fff; }
.vacio { text-align: center; color: var(--suave); padding: 40px 0 96px; }

/* Cómo comprar */
.pasos { background: #fff; border-block: 1px solid var(--borde); padding: 88px 0 96px; }
.pasos__inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
.pasos__lista { list-style: none; display: grid; gap: 0; }
.pasos__lista li { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; padding: 22px 0; border-top: 1px solid var(--borde); }
.pasos__lista li:last-child { border-bottom: 1px solid var(--borde); }
.pasos__num { grid-row: span 2; font-family: var(--fuente-titulo); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--claro); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pasos__lista h3 { font-size: 1.18rem; color: var(--titulo); margin-bottom: 2px; letter-spacing: -.01em; }
.pasos__lista p { color: var(--suave); font-size: .95rem; }

/* Carrito */
.overlay { position: fixed; inset: 0; background: rgba(20, 40, 28, .42); backdrop-filter: blur(2px); z-index: 30; }
.carrito { position: fixed; top: 0; right: 0; height: 100%; width: min(410px, 100%); background: #fff; z-index: 40; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s var(--suave-mov); box-shadow: -16px 0 48px rgba(36, 86, 58, .16); }
.carrito.abierto { transform: translateX(0); }
.carrito__head { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--borde); }
.carrito__head h2 { font-size: 1.25rem; color: var(--titulo); letter-spacing: -.01em; }
.icon-btn { border: none; background: var(--claro-suave); width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; cursor: pointer; transition: background .2s; }
.icon-btn:hover { background: var(--menta); }
.carrito__items { flex: 1; overflow-y: auto; padding: 12px 22px; }
.item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.item__emoji { font-size: 1.8rem; text-align: center; background: var(--claro-suave); border-radius: var(--radio-chico); padding: 6px 0; }
.item__nombre { font-size: .9rem; font-weight: 500; }
.item__precio { font-size: .85rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.qty { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.qty button { width: 30px; height: 30px; border: 1px solid var(--borde); background: #fff; border-radius: 9px; cursor: pointer; transition: border-color .2s; }
.qty button:hover { border-color: var(--primario); }
.carrito__foot { padding: 16px 22px 22px; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 10px; }
.carrito__foot input { padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio-chico); outline: none; transition: border-color .2s, box-shadow .2s; }
.carrito__foot input:focus { border-color: var(--primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primario) 14%, transparent); }
.carrito__nota { font-size: .8rem; color: var(--suave); text-align: center; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.total strong { font-family: var(--fuente-titulo); font-size: 1.4rem; color: var(--titulo); }
.envio { font-size: .85rem; color: var(--primario); font-weight: 500; }
.carrito-vacio { text-align: center; color: var(--suave); padding: 48px 12px; }
.carrito-vacio p { font-weight: 600; color: var(--texto); margin-bottom: 4px; }

/* Contacto */
.contacto { background: linear-gradient(175deg, var(--claro-suave), var(--menta)); padding: 88px 0 96px; }
.contacto__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.contacto h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--titulo); margin-bottom: 10px; letter-spacing: -.03em; line-height: 1.1; }
.contacto p { color: var(--suave); margin-bottom: 26px; max-width: 44ch; }
.contacto__btn { width: auto; }
.contacto__datos { list-style: none; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 8px 24px; display: grid; }
.contacto__datos li { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.contacto__datos li + li { border-top: 1px solid var(--borde); }
.contacto__datos a { color: var(--titulo); font-weight: 500; }
.contacto__datos a:hover { color: var(--primario); }
.contacto__icono { width: 38px; height: 38px; border-radius: var(--radio-chico); background: var(--claro-suave); display: grid; place-items: center; flex-shrink: 0; }

/* Footer */
.footer { background: var(--fondo); border-top: 1px solid var(--borde); padding: 56px 0 28px; color: var(--suave); font-size: .92rem; }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }
.footer__inner > div { display: flex; flex-direction: column; gap: 8px; }
.footer h3 { font-size: 1rem; color: var(--titulo); margin-bottom: 4px; }
.footer a { transition: color .2s; }
.footer a:hover { color: var(--primario); }
.footer__logo { width: auto; height: 52px; display: block; margin-bottom: 6px; align-self: flex-start; }
.footer__marca p { max-width: 320px; }
.footer__small { font-size: .8rem; padding-top: 20px; border-top: 1px solid var(--borde); }

/* Mensaje flotante */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120px); background: var(--titulo); color: #fff; padding: 12px 20px; border-radius: 14px; font-size: .9rem; font-weight: 500; box-shadow: var(--sombra-fuerte); z-index: 50; transition: transform .35s var(--suave-mov); max-width: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast.visible { transform: translate(-50%, 0); }

.whatsapp-flotante { position: fixed; right: 20px; bottom: 20px; background: var(--verde); color: #fff; height: 56px; padding: 0 22px 0 18px; border-radius: 18px; display: flex; align-items: center; gap: 10px; font-weight: 600; box-shadow: 0 12px 28px -8px rgba(37, 160, 90, .55); z-index: 25; transition: transform .2s var(--suave-mov); }
.whatsapp-flotante:hover { transform: translateY(-2px); }
.whatsapp-flotante .ico-wa { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0s !important; }
  html { scroll-behavior: auto; }
}

/* Responsive */
@media (max-width: 960px) {
  .menu { display: none; }
  .beneficios { grid-template-columns: repeat(2, 1fr); }
  .beneficio:nth-child(3) { border-left: none; }
  .beneficio:nth-child(n + 3) { border-top: 1px solid var(--borde); }
  .pasos__inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .header__inner { flex-wrap: wrap; gap: 12px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .logo { flex: 1; }
  .logo__img { height: 44px; }
  .aviso { font-size: .78rem; padding: 7px 12px; }
  .hero { padding: 36px 0 84px; }
  .hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .hero p { font-size: 1.02rem; }
  .hero__botones .btn { flex: 1 1 100%; }
  .hero__confianza { gap: 6px 16px; font-size: .86rem; }
  .hero__arte { padding: 0; }
  .destacado { width: min(280px, 82%); }
  .destacado__desc { display: none; }
  .sello { width: 84px; height: 84px; right: 2%; top: -4%; }
  .sello strong { font-size: 1rem; }
  .sello span { font-size: .66rem; }
  .beneficios { margin-top: -44px; }
  .beneficio { flex-direction: column; text-align: center; padding: 16px 10px; gap: 8px; }
  .seccion { padding-top: 64px; }
  .seccion__cabeza { margin-bottom: 22px; }
  .categorias { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chip { flex: 1 0 auto; padding: 8px 7px; white-space: nowrap; font-size: .84rem; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; margin-bottom: 72px; }
  .card__emoji { font-size: 3.6rem; }
  .card__body { padding: 10px 2px 0; }
  .card__title { font-size: .96rem; }
  .card__desc { display: none; }
  .card__pie { flex-direction: column; align-items: stretch; }
  .card__btn { width: 100%; }
  .pasos { padding: 64px 0 72px; }
  .contacto { padding: 64px 0 72px; }
  .contacto__inner { grid-template-columns: 1fr; }
  .contacto__btn { width: 100%; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__marca { grid-column: 1 / -1; }
  .whatsapp-flotante { width: 56px; padding: 0; justify-content: center; }
  .whatsapp-flotante__texto { display: none; }
}