/* ============================================================
   CreaTuArte — estilos del sitio público
   Paleta: verde ming + celeste, sobre crema. Mobile first.
   ============================================================ */

:root{
  --ming:        #2f6e77;
  --ming-osc:    #1d4d55;
  --ming-claro:  #4d8f98;
  --celeste:     #55c3dc;
  --celeste-sua: #d9f2f7;
  --celeste-pal: #eefafd;
  --acento:      #ff9f43;
  --acento-osc:  #e8892c;
  --crema:       #fbf9f5;
  --blanco:      #ffffff;
  --tinta:       #16313a;
  --gris:        #64797f;
  --gris-sua:    #e6ecee;
  --ok:          #2e9e6b;
  --error:       #d9534f;

  --radio:       14px;
  --radio-sm:    9px;
  --sombra:      0 2px 10px rgba(22,49,58,.07);
  --sombra-md:   0 8px 26px rgba(22,49,58,.12);
  --sombra-lg:   0 18px 44px rgba(22,49,58,.18);
  --transicion:  .18s ease;
  --ancho:       1200px;
  --header-h:    64px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size:16px; line-height:1.6;
  color:var(--tinta); background:var(--crema);
  padding-bottom:64px; /* barra inferior en móvil */
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ming); text-decoration:none; transition:color var(--transicion); }
a:hover{ color:var(--ming-osc); }
h1,h2,h3,h4{ line-height:1.25; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em; }
h1{ font-size:1.9rem; } h2{ font-size:1.5rem; } h3{ font-size:1.15rem; }
p{ margin:0 0 1em; }
hr{ border:0; border-top:1px solid var(--gris-sua); margin:1.5rem 0; }

.contenedor{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 16px; }
.centro{ text-align:center; }
.oculto{ display:none !important; }
.solo-escritorio{ display:none; }

/* ---------------------------------------------------- botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.72em 1.3em; border:0; border-radius:100px; cursor:pointer;
  font:inherit; font-weight:600; font-size:.97rem; line-height:1.2;
  background:var(--ming); color:#fff; transition:all var(--transicion);
  text-align:center;
}
.btn:hover{ background:var(--ming-osc); color:#fff; transform:translateY(-1px); box-shadow:var(--sombra-md); }
.btn:active{ transform:translateY(0); }
.btn--celeste{ background:var(--celeste); color:#08343d; }
.btn--celeste:hover{ background:#3fb2cd; color:#08343d; }
.btn--acento{ background:var(--acento); color:#4a2600; }
.btn--acento:hover{ background:var(--acento-osc); color:#3a1d00; }
.btn--wa{ background:#25d366; color:#fff; }
.btn--wa:hover{ background:#1eb457; color:#fff; }
.btn--linea{ background:transparent; color:var(--ming); box-shadow:inset 0 0 0 2px var(--ming); }
.btn--linea:hover{ background:var(--ming); color:#fff; }
.btn--claro{ background:#fff; color:var(--ming); }
.btn--bloque{ width:100%; }
.btn--sm{ padding:.5em .95em; font-size:.86rem; }
.btn--lg{ padding:.9em 1.8em; font-size:1.05rem; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ---------------------------------------------------- cabecera */
.cabecera{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--gris-sua);
}
.cabecera__aviso{
  background:linear-gradient(90deg,var(--ming),var(--celeste));
  color:#fff; font-size:.82rem; text-align:center; padding:.4em 12px;
}
.cabecera__aviso a{ color:#fff; text-decoration:underline; }
.cabecera__barra{
  display:flex; align-items:center; gap:12px;
  height:var(--header-h);
}
.logo{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
/* El logo es apaisado y trae aire propio arriba y abajo, así que se le da un
   poco más de alto que a un isotipo cuadrado. En el celular achica para no
   comerse el lugar del buscador y el carrito. */
.logo img{ height:34px; width:auto; max-width:46vw; object-fit:contain; }
@media(min-width:640px){ .logo img{ height:44px; max-width:none; } }
.logo__texto{ font-weight:800; font-size:1.15rem; color:var(--ming-osc); letter-spacing:-.02em; }
.logo__texto span{ color:var(--celeste); }

.cabecera__acciones{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.icono-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; border:0; background:transparent;
  color:var(--ming-osc); cursor:pointer; position:relative; transition:background var(--transicion);
}
.icono-btn:hover{ background:var(--celeste-pal); }
.icono-btn svg{ width:22px; height:22px; }
.globo{
  position:absolute; top:4px; right:2px; min-width:18px; height:18px; padding:0 4px;
  border-radius:9px; background:var(--acento); color:#3a1d00;
  font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* menú */
.menu{ display:none; }
.menu a{
  padding:.5em .8em; border-radius:100px; font-weight:600; font-size:.95rem; color:var(--tinta);
}
.menu a:hover, .menu a.activo{ background:var(--celeste-pal); color:var(--ming-osc); }

/* buscador */
.buscador{ position:relative; flex:1 1 auto; max-width:420px; display:none; }
.buscador input{
  width:100%; padding:.6em 2.6em .6em 1em; border:1px solid var(--gris-sua);
  border-radius:100px; font:inherit; background:var(--crema); color:var(--tinta);
}
.buscador input:focus{ outline:2px solid var(--celeste); background:#fff; }
.buscador button{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; border-radius:50%; background:var(--ming); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.buscador__sugerencias{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:70;
  background:#fff; border-radius:var(--radio); box-shadow:var(--sombra-lg);
  padding:6px; max-height:min(70vh,440px); overflow-y:auto;
}
.buscador__sug{
  display:flex; gap:10px; align-items:center; padding:8px; border-radius:var(--radio-sm); color:var(--tinta);
}
.buscador__sug:hover, .buscador__sug.elegido{ background:var(--celeste-pal); color:var(--ming-osc); }
.buscador__sug img{ width:46px; height:46px; object-fit:cover; border-radius:8px; flex:0 0 auto; background:var(--celeste-pal); }
.buscador__sug strong{ display:block; font-size:.9rem; font-weight:600; line-height:1.3; }
.buscador__sug span{ font-size:.8rem; color:var(--gris); }
.buscador__sug b{ color:var(--ming-osc); font-size:.88rem; }
.buscador__vacio{ padding:16px; text-align:center; color:var(--gris); font-size:.88rem; }
.buscador__todos{
  display:block; text-align:center; padding:10px; font-weight:600; font-size:.86rem;
  color:var(--ming); border-top:1px solid var(--gris-sua); margin-top:4px;
}

/* panel de menú móvil */
.menu-movil{
  position:fixed; inset:0 0 0 auto; width:min(84vw,340px); background:#fff; z-index:80;
  transform:translateX(100%); transition:transform .25s ease; padding:18px;
  box-shadow:var(--sombra-lg); overflow-y:auto;
}
.menu-movil.abierto{ transform:translateX(0); }
.menu-movil a{ display:block; padding:.8em .4em; border-bottom:1px solid var(--gris-sua); font-weight:600; color:var(--tinta); }
.menu-movil a:hover{ color:var(--ming); }
.velo{ position:fixed; inset:0; background:rgba(10,30,36,.45); z-index:70; opacity:0; pointer-events:none; transition:opacity .25s; }
.velo.visible{ opacity:1; pointer-events:auto; }

/* barra inferior móvil */
.barra-inferior{
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  display:flex; background:#fff; box-shadow:0 -2px 12px rgba(22,49,58,.10);
  padding-bottom:env(safe-area-inset-bottom);
}
.barra-inferior a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:.5em 0 .45em; font-size:.68rem; font-weight:600; color:var(--gris); position:relative;
}
.barra-inferior a.activo{ color:var(--ming); }
.barra-inferior svg{ width:22px; height:22px; }
.barra-inferior .globo{ top:2px; right:calc(50% - 20px); }

/* ---------------------------------------------------- portada */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--ming-osc) 0%,var(--ming) 45%,var(--celeste) 100%);
  color:#fff;
}
.hero::after{
  content:""; position:absolute; inset:auto -10% -40% -10%; height:70%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.18),transparent 70%);
}
.hero__cont{ position:relative; z-index:2; padding:44px 16px 52px; text-align:center; }
.hero h1{ font-size:2rem; margin-bottom:.35em; text-shadow:0 2px 12px rgba(0,0,0,.14); }
.hero p{ font-size:1.05rem; opacity:.94; max-width:620px; margin:0 auto 1.4em; }
.hero__botones{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hero__img{ margin-top:26px; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra-lg); }

/* franja de confianza */
.franja{ background:#fff; border-bottom:1px solid var(--gris-sua); }
.franja__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:18px 16px; }
.franja__item{ display:flex; gap:10px; align-items:flex-start; font-size:.85rem; }
.franja__item svg{ width:26px; height:26px; color:var(--celeste); flex:0 0 auto; }
.franja__item strong{ display:block; color:var(--ming-osc); font-size:.92rem; }
.franja__item span{ color:var(--gris); }

/* ---------------------------------------------------- secciones */
.seccion{ padding:38px 0; }
.seccion--alt{ background:#fff; }
.seccion__tit{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:20px; }
.seccion__tit h2{ margin:0; }
.seccion__tit a{ font-weight:600; font-size:.9rem; white-space:nowrap; }
.subtitulo{ color:var(--gris); margin:-10px 0 22px; }

/* ---------------------------------------------------- tarjetas de producto */
.grilla{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
@media(min-width:640px){ .grilla{ grid-template-columns:repeat(3,1fr); gap:18px; } }
@media(min-width:980px){ .grilla{ grid-template-columns:repeat(4,1fr); } }

.tarjeta{
  background:#fff; border-radius:var(--radio); overflow:hidden;
  box-shadow:var(--sombra); transition:all var(--transicion); display:flex; flex-direction:column;
  position:relative;
}
.tarjeta:hover{ transform:translateY(-3px); box-shadow:var(--sombra-md); }
.tarjeta__img{ position:relative; aspect-ratio:1/1; background:var(--celeste-pal); overflow:hidden; }
.tarjeta__img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.tarjeta:hover .tarjeta__img img{ transform:scale(1.05); }
.tarjeta__cuerpo{ padding:12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.tarjeta__cat{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--celeste); font-weight:700; }
.tarjeta__nom{ font-size:.95rem; font-weight:600; color:var(--tinta); margin:0; line-height:1.35; }
.tarjeta__precio{ margin-top:auto; font-size:1.1rem; font-weight:800; color:var(--ming-osc); }
.tarjeta__precio small{ font-size:.72rem; font-weight:600; color:var(--gris); display:block; }
.tarjeta__antes{ font-size:.85rem; color:var(--gris); text-decoration:line-through; font-weight:500; margin-right:.4em; }
.etiqueta{
  position:absolute; top:10px; left:10px; z-index:2;
  background:var(--acento); color:#4a2600; font-size:.7rem; font-weight:800;
  padding:.28em .7em; border-radius:100px; text-transform:uppercase; letter-spacing:.03em;
}
.etiqueta--ming{ background:var(--ming); color:#fff; }
.etiqueta--der{ left:auto; right:10px; }

/* categorías */
.cats{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
@media(min-width:720px){ .cats{ grid-template-columns:repeat(4,1fr); } }
.cat{
  position:relative; border-radius:var(--radio); overflow:hidden; aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--ming),var(--celeste)); box-shadow:var(--sombra);
  display:flex; align-items:flex-end; color:#fff; transition:transform var(--transicion);
}
.cat:hover{ transform:translateY(-3px); color:#fff; }
.cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.82; }
.cat__nom{
  position:relative; z-index:2; width:100%; padding:12px;
  background:linear-gradient(to top,rgba(11,42,49,.85),transparent);
  font-weight:700; font-size:.95rem;
}
.cat__nom small{ display:block; font-weight:500; opacity:.85; font-size:.75rem; }

/* ---------------------------------------------------- ficha de producto */
.producto{ display:grid; gap:22px; padding:22px 0; }
@media(min-width:900px){ .producto{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:36px; align-items:start; } }

.galeria__principal{
  position:relative; border-radius:var(--radio); overflow:hidden; background:#fff;
  box-shadow:var(--sombra); aspect-ratio:1/1; cursor:zoom-in;
}
.galeria__principal img{ width:100%; height:100%; object-fit:contain; }
.galeria__lupa{
  position:absolute; right:10px; bottom:10px; background:rgba(255,255,255,.92);
  border-radius:100px; padding:.35em .8em; font-size:.75rem; font-weight:600; color:var(--ming-osc);
  display:flex; align-items:center; gap:.35em; pointer-events:none;
}
.galeria__miniaturas{ display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; }
.galeria__miniaturas button{
  flex:0 0 68px; width:68px; height:68px; border-radius:var(--radio-sm); overflow:hidden;
  border:2px solid transparent; background:#fff; padding:0; cursor:pointer; box-shadow:var(--sombra);
}
.galeria__miniaturas button.activa{ border-color:var(--celeste); }
.galeria__miniaturas img{ width:100%; height:100%; object-fit:cover; }

.ficha__cat{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--celeste); font-weight:700; }
.ficha h1{ margin:.2em 0 .3em; font-size:1.6rem; }
.ficha__resumen{ color:var(--gris); }
.ficha__precio{ font-size:2rem; font-weight:800; color:var(--ming-osc); margin:.2em 0; }
.ficha__precio .antes{ font-size:1.1rem; color:var(--gris); text-decoration:line-through; font-weight:500; margin-right:.4em; }
.ficha__precio small{ display:block; font-size:.8rem; font-weight:600; color:var(--gris); }

.opcion{ margin:16px 0; }
.opcion__tit{ font-weight:700; font-size:.9rem; margin-bottom:8px; display:flex; gap:6px; align-items:center; }
.opcion__tit span{ font-weight:500; color:var(--gris); }
.opciones{ display:flex; flex-wrap:wrap; gap:8px; }
.opcion-val{
  border:2px solid var(--gris-sua); background:#fff; border-radius:100px;
  padding:.45em 1em; font:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
  transition:all var(--transicion); color:var(--tinta);
}
.opcion-val:hover{ border-color:var(--celeste); }
.opcion-val.elegida{ border-color:var(--ming); background:var(--celeste-pal); color:var(--ming-osc); }
.opcion-val.agotada{ opacity:.4; text-decoration:line-through; cursor:not-allowed; }
.opcion-color{
  width:38px; height:38px; border-radius:50%; padding:0; border:2px solid #fff;
  box-shadow:0 0 0 2px var(--gris-sua); cursor:pointer; transition:all var(--transicion);
}
.opcion-color.elegida{ box-shadow:0 0 0 3px var(--ming); transform:scale(1.06); }

.campo{ margin-bottom:12px; }
.campo label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:4px; }
.campo .ayuda{ font-size:.78rem; color:var(--gris); font-weight:400; }
.campo input, .campo textarea, .campo select{
  width:100%; padding:.66em .9em; border:1px solid var(--gris-sua); border-radius:var(--radio-sm);
  font:inherit; font-size:.95rem; background:#fff; color:var(--tinta);
}
.campo input:focus, .campo textarea:focus, .campo select:focus{ outline:2px solid var(--celeste); border-color:transparent; }
.campo textarea{ min-height:88px; resize:vertical; }
.campo--fila{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
.req{ color:var(--error); }

.cantidad{ display:inline-flex; align-items:center; border:1px solid var(--gris-sua); border-radius:100px; overflow:hidden; background:#fff; }
.cantidad button{ width:38px; height:40px; border:0; background:transparent; font-size:1.2rem; cursor:pointer; color:var(--ming); }
.cantidad input{ width:44px; text-align:center; border:0; font:inherit; font-weight:700; padding:0; }
.cantidad input:focus{ outline:none; }

.ficha__acciones{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
.ficha__acciones .btn{ flex:1 1 180px; }

.aviso{
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--radio-sm);
  background:var(--celeste-pal); border-left:4px solid var(--celeste); font-size:.88rem; margin:14px 0;
}
.aviso svg{ width:20px; height:20px; color:var(--ming); flex:0 0 auto; margin-top:2px; }
.aviso--acento{ background:#fff6ea; border-left-color:var(--acento); }

.acordeon{ border-top:1px solid var(--gris-sua); }
.acordeon__item{ border-bottom:1px solid var(--gris-sua); }
.acordeon__cab{
  width:100%; background:none; border:0; padding:14px 0; font:inherit; font-weight:700;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:var(--tinta); text-align:left;
}
.acordeon__cab::after{ content:"+"; font-size:1.3rem; color:var(--ming); font-weight:400; }
.acordeon__item.abierto .acordeon__cab::after{ content:"−"; }
.acordeon__cuerpo{ display:none; padding-bottom:16px; color:var(--gris); font-size:.94rem; }
.acordeon__item.abierto .acordeon__cuerpo{ display:block; }

/* visor de imágenes */
.visor{ position:fixed; inset:0; background:rgba(8,26,31,.94); z-index:200; display:none; align-items:center; justify-content:center; }
.visor.abierto{ display:flex; }
.visor img{ max-width:94vw; max-height:86vh; object-fit:contain; border-radius:8px; }
.visor__cerrar{ position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.15); color:#fff; font-size:1.5rem; cursor:pointer; }
.visor__nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.15); color:#fff; font-size:1.6rem; cursor:pointer; }
.visor__nav.ant{ left:10px; } .visor__nav.sig{ right:10px; }

/* ---------------------------------------------------- carrito / checkout */
.panel-caja{ background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); padding:16px; margin-bottom:16px; }
.panel-caja h3{ margin-top:0; }

.linea-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--gris-sua); }
.linea-item:last-child{ border-bottom:0; }
.linea-item__img{ width:74px; height:74px; border-radius:var(--radio-sm); object-fit:cover; background:var(--celeste-pal); flex:0 0 auto; }
.linea-item__cuerpo{ flex:1; min-width:0; }
.linea-item__nom{ font-weight:600; font-size:.95rem; }
.linea-item__det{ font-size:.8rem; color:var(--gris); }
.linea-item__precio{ font-weight:800; color:var(--ming-osc); white-space:nowrap; }

.totales{ font-size:.95rem; }
.totales div{ display:flex; justify-content:space-between; padding:.35em 0; }
.totales .total{ font-size:1.25rem; font-weight:800; color:var(--ming-osc); border-top:2px solid var(--gris-sua); margin-top:.4em; padding-top:.6em; }

.pasos{ display:flex; gap:6px; justify-content:center; margin:18px 0 26px; font-size:.8rem; }
.pasos span{ display:flex; align-items:center; gap:6px; color:var(--gris); }
.pasos span::before{
  content:attr(data-n); width:24px; height:24px; border-radius:50%; background:var(--gris-sua);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--gris);
}
.pasos span.activo{ color:var(--ming-osc); font-weight:700; }
.pasos span.activo::before{ background:var(--ming); color:#fff; }

/* ---------------------------------------------------- avisos flash */
.flash{ padding:12px 16px; border-radius:var(--radio-sm); margin:14px 0; font-size:.92rem; font-weight:500; }
.flash--ok{ background:#e7f7ef; color:#186c47; border-left:4px solid var(--ok); }
.flash--error{ background:#fdeceb; color:#a1302c; border-left:4px solid var(--error); }
.flash--aviso{ background:#fff6ea; color:#8a5215; border-left:4px solid var(--acento); }

/* ---------------------------------------------------- pie */
.pie{ background:var(--ming-osc); color:#cfe6ea; margin-top:40px; padding:34px 0 20px; font-size:.9rem; }
.pie a{ color:#cfe6ea; }
.pie a:hover{ color:#fff; }
.pie__grid{ display:grid; gap:24px; }
@media(min-width:760px){ .pie__grid{ grid-template-columns:1.3fr 1fr 1fr 1.1fr; } }
.pie h4{ color:#fff; font-size:.95rem; margin-bottom:.8em; text-transform:uppercase; letter-spacing:.06em; }
.pie ul{ list-style:none; margin:0; padding:0; }
.pie li{ margin-bottom:.5em; }
.pie__dato{ display:flex; gap:8px; align-items:flex-start; margin-bottom:.6em; }
.pie__dato svg{ width:18px; height:18px; flex:0 0 auto; margin-top:3px; color:var(--celeste); }
.pie__redes{ display:flex; gap:10px; margin-top:12px; }
.pie__redes a{
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; transition:all var(--transicion);
}
.pie__redes a:hover{ background:var(--celeste); color:var(--ming-osc); transform:translateY(-2px); }
.pie__redes svg{ width:20px; height:20px; }
.pie__mapa{ border-radius:var(--radio-sm); overflow:hidden; margin-top:10px; border:1px solid rgba(255,255,255,.15); }
.pie__mapa iframe{ width:100%; height:150px; border:0; display:block; }
.pie__legal{
  border-top:1px solid rgba(255,255,255,.12); margin-top:26px; padding-top:16px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:.8rem; opacity:.8;
}
.pie__pagos{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pie__pagos span{ background:rgba(255,255,255,.1); border-radius:6px; padding:.3em .6em; font-size:.75rem; }

/* botón flotante de WhatsApp */
.wa-flota{
  position:fixed; right:14px; bottom:74px; z-index:55;
  width:54px; height:54px; border-radius:50%; background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--sombra-md);
  transition:transform var(--transicion);
}
.wa-flota:hover{ transform:scale(1.08); color:#fff; }
/* 34 y no 30: el ícono ahora respeta su margen interno (antes se salía del
   lienzo y se veía cortado), así que necesita un poco más de caja para pesar
   lo mismo dentro del círculo. */
.wa-flota svg{ width:34px; height:34px; }

/* ---------------------------------------------------- utilidades */
.migas{ font-size:.8rem; color:var(--gris); padding:12px 0; }
.migas a{ color:var(--gris); }
.migas a:hover{ color:var(--ming); }
.migas span{ margin:0 .35em; }

.filtros{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.filtros select, .filtros input{
  padding:.5em .8em; border:1px solid var(--gris-sua); border-radius:100px; font:inherit; font-size:.88rem; background:#fff;
}
.chip{
  display:inline-flex; align-items:center; gap:.4em; padding:.4em .9em; border-radius:100px;
  background:#fff; box-shadow:var(--sombra); font-size:.85rem; font-weight:600; color:var(--tinta);
}
.chip.activo{ background:var(--ming); color:#fff; }

.paginacion{ display:flex; gap:6px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.paginacion a, .paginacion span{
  min-width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radio-sm); background:#fff; box-shadow:var(--sombra); font-weight:600; font-size:.9rem;
}
.paginacion .actual{ background:var(--ming); color:#fff; }

.vacio{ text-align:center; padding:50px 20px; color:var(--gris); }
.vacio svg{ width:64px; height:64px; color:var(--gris-sua); margin:0 auto 14px; }

.contenido-rico h2{ font-size:1.25rem; margin-top:1.4em; }
.contenido-rico ul{ padding-left:1.2em; }
.contenido-rico img{ border-radius:var(--radio-sm); margin:1em 0; }

/* ---------------------------------------------------- escritorio */
@media(min-width:900px){
  body{ padding-bottom:0; }
  h1{ font-size:2.3rem; }
  .solo-escritorio{ display:flex; }
  .solo-movil{ display:none !important; }
  .menu{ display:flex; gap:2px; margin-left:8px; }
  .buscador{ display:block; }
  .barra-inferior{ display:none; }
  .wa-flota{ bottom:22px; right:22px; }
  .hero__cont{ padding:70px 16px 80px; }
  .hero h1{ font-size:3rem; }
  .hero p{ font-size:1.15rem; }
  .franja__grid{ grid-template-columns:repeat(4,1fr); padding:22px 16px; }
  .seccion{ padding:56px 0; }
}