/*
 * Kikoua. Estilos comunes del tema.
 *
 * Portado de new_design/kikoua/kikoua.css, las maquetas del rediseno, que
 * viven en la rama maquetas-kikoua y no se fusionan. Cambios respecto a la
 * maqueta, y SOLO estos tres:
 *
 *   1. Montserrat se sirve del propio tema, no de Google Fonts. Es UN fichero
 *      variable por subconjunto que cubre los cuatro pesos del sistema de
 *      diseno (300, 400, 500 y 600): asi lo sirve Google hoy, de ahi el
 *      `font-weight: 300 600`.
 *   2. Los iconos son un <use> al sprite local assets/icon/lucide.svg, no el
 *      script de Lucide desde unpkg. El sprite no lleva dentro ni color ni
 *      grosor de trazo para que los siga poniendo este CSS (.ico y sus
 *      variantes); de eso se encarga la regla .ico de aqui abajo.
 *   3. url(img/...) pasa a url(../img/...), porque aqui el CSS vive en
 *      assets/css/ y las imagenes en assets/img/. Esas imagenes son las del
 *      hero, el cierre y el ajolote: entran cuando se monte la portada, que
 *      es la que dice de donde sale cada una. Hasta entonces esas reglas
 *      piden ficheros que no estan y se ve solo el degradado, que es el
 *      respaldo que la propia maqueta ya tenia.
 *
 * Nada mas. Colores, tipos, aire y puntos de corte son los de la maqueta.
 *
 * El magenta es tinta, no ambiente: --magenta para la raya de marca, los
 * iconos y los titulos de 24px o mas; --magenta-ink para todo lo que tiene
 * tamano de texto (enlace, precio, relleno del boton principal).
 */

@font-face{font-family:Montserrat;font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/montserrat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* El <svg class="ico"> toma del CSS lo que el sprite no lleva: el relleno y
   el color del trazo. El grosor ya lo pone .ico mas abajo, con la maqueta. */
.ico{fill:none;stroke:currentColor}


:root{--magenta:#ec008c;--magenta-ink:#b8006d;--magenta-ink-2:#99005b;--ink:#231f20;--ink-2:#5c5759;--ink-3:#8a8587;--sky:#9ad8ff;--lilac:#c8d0ff;--pink:#edd8ff;--pink-2:#f8f0ff;--green:#157472;--line:#ebe8ea;--bg:#ffffff;--soft:#f7f6f7;--shadow-1:0 6px 18px rgba(35,31,32,.08);--shadow-2:0 18px 40px rgba(35,31,32,.14);--wrap:1320px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Montserrat,system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--magenta-ink);text-decoration:none}a:hover{color:var(--magenta-ink-2)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.ico{width:20px;height:20px;stroke-width:1.5}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 28px;border-radius:999px;font-weight:600;font-size:14px;letter-spacing:.01em;transition:background .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap}
.btn-primary{background:var(--magenta-ink);color:#fff}.btn-primary:hover{background:var(--magenta-ink-2);color:#fff}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:var(--magenta-ink);color:#fff}
.btn-line{border:1.5px solid var(--ink);color:var(--ink)}.btn-line:hover{background:var(--ink);color:#fff}
.btn-sm{height:40px;padding:0 20px;font-size:13px}
/* section heading */
.sec{padding:88px 0}
.sec-head{text-align:center;margin-bottom:44px}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.sec-title{font-weight:300;font-size:clamp(26px,3vw,36px);line-height:1.2;letter-spacing:-.01em;margin-top:6px}
.raya{display:block;width:44px;height:2px;background:var(--magenta);margin:16px auto 0}
.sec-sub{color:var(--ink-2);margin-top:14px;text-wrap:pretty}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.hdr-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:40px;height:84px}
.logo{display:flex;align-items:center;height:40px}
.logo img{height:40px;width:auto}
.logo-txt{display:none;font-weight:600;font-size:26px;letter-spacing:-.02em;color:var(--ink);position:relative}
.logo-txt:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:3px;background:var(--magenta)}
.search{display:flex;align-items:center;max-width:620px;width:100%;margin:0 auto;height:46px;border:1px solid var(--line);border-radius:999px;background:var(--soft);transition:border-color .2s,background .2s}
.search:focus-within{border-color:var(--magenta);background:#fff}
.search select{border:0;background:transparent;font:inherit;font-size:13px;font-weight:500;color:var(--ink);padding:0 14px 0 20px;height:100%;border-right:1px solid var(--line);outline:none;cursor:pointer}
.search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14px;padding:0 16px;height:100%;outline:none;color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.search button{width:38px;height:38px;margin-right:4px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;transition:background .2s}
.search button:hover{background:var(--magenta-ink)}
.search button .ico{width:17px;height:17px}
.hdr-actions{display:flex;align-items:center;gap:6px}
.icon-btn{position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:var(--ink);transition:background .2s,color .2s}
.icon-btn:hover{background:var(--soft);color:var(--magenta-ink)}
.badge{position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--magenta-ink);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center}
.badge[hidden]{display:none}
.hdr-actions .btn{margin-left:14px}
.nav{display:flex;justify-content:center;gap:40px;height:50px;align-items:stretch}
.nav a{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink);position:relative}
.nav a:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--magenta);transform:scaleX(0);transition:transform .25s}
.nav a:hover{color:var(--ink)}.nav a:hover:after,.nav a.on:after{transform:scaleX(1)}
.nav .ico{width:16px;height:16px}
/* hero */
.hero{position:relative;overflow:hidden}
.hero-track{display:flex;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.slide{flex:0 0 100%;min-height:600px;display:flex;align-items:center;position:relative}
/* Sin foto de banner: la maqueta ponia banner-1/2/3.jpg y banner-cierre.jpg a
   la derecha, y esos ficheros no existen en assets/img. Una hoja que pide
   ficheros que no estan son 404 en cada carga. Cuando Diseno entregue las
   fotos, el sitio es este: `url(../img/banner-1.jpg) right center/auto 100%
   no-repeat,` delante del degradado. */
.slide.s1{background:linear-gradient(180deg,#78c2f1,#82cef8,#92d5f8)}
.slide.s2{background:linear-gradient(180deg,#aabbed,#abbef0,#bac6f1)}
.slide.s3{background:linear-gradient(180deg,#ebd3f0,#f1d1f2,#cdc1ef)}
.slide .wrap{width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:40px}
.slide-copy{max-width:560px;padding:60px 0}
.slide-copy .eyebrow{color:var(--ink)}
.slide h1,.slide h2{font-weight:300;font-size:clamp(36px,4.6vw,62px);line-height:1.08;letter-spacing:-.025em;margin:18px 0 0;text-wrap:balance}
.slide h1 b,.slide h2 b{font-weight:500}
.slide .raya{margin:26px 0 0;width:56px;height:3px}
.slide p{margin-top:22px;font-size:17px;color:var(--ink);max-width:440px}
.slide .btns{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.slide-art{position:relative;height:520px}
.slide-art{position:static}.ajolote{position:absolute;right:12%;bottom:17%;height:62%;max-height:440px;width:auto;pointer-events:none;filter:drop-shadow(0 18px 24px rgba(35,31,32,.12))}
.slide-copy>*{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.slide.on .slide-copy>*{opacity:1;transform:none}
.slide.on .slide-copy>*:nth-child(2){transition-delay:.1s}.slide.on .slide-copy>*:nth-child(3){transition-delay:.18s}.slide.on .slide-copy>*:nth-child(4){transition-delay:.26s}.slide.on .slide-copy>*:nth-child(5){transition-delay:.34s}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-1);opacity:0;transition:opacity .25s,background .2s,color .2s;z-index:3}
.hero:hover .hero-arrow{opacity:1}
.hero-arrow:hover{background:var(--ink);color:#fff}
.hero-arrow.prev{left:24px}.hero-arrow.next{right:24px}
.dots{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:center;align-items:center;gap:10px;z-index:3}.dots .pause{width:32px;height:32px;border:0;border-radius:50%;background:#fff;display:grid;place-items:center;margin-left:8px;box-shadow:var(--shadow-1)}.dots .pause:hover{background:var(--ink);color:#fff}.dots .pause .ico{width:15px;height:15px}
.dots button{width:10px;height:10px;border-radius:999px;border:1.5px solid var(--ink);transition:width .3s,background .3s}
.dots button.on{width:34px;background:var(--ink)}
/* cifras */
.cifras{border-bottom:1px solid var(--line)}
.cifras .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cifra{display:flex;align-items:center;gap:18px;padding:34px 28px}
.cifra+.cifra{border-left:1px solid var(--line)}
.cifra .ico{width:34px;height:34px;color:var(--magenta);flex:none;stroke-width:1.25}
.cifra strong{display:block;font-weight:600;font-size:16px}
.cifra span{display:block;font-size:13px;color:var(--ink-2);line-height:1.45}
/* tiendas */
.shops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.shop{display:block;color:var(--ink)}
.shop:hover{color:var(--ink)}
.shop-cover{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden}
/* <img>, no <image-slot>: el elemento de relleno de las maquetas no existe en
   el tema. Estas dos y la del logotipo las comparten portada y directorio. */
.shop-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.shop:hover .shop-cover img{transform:scale(1.04)}
/* El logotipo va ENTERO dentro del circulo, no recortado por el: 10 px de
   acolchado dejan 48 px de lado, que es el cuadrado inscrito en 68 px de
   diametro. Asi un logotipo cuadrado -los hay con fondo negro- cabe sin que
   el borde redondo le coma las esquinas. La maqueta ponia 4 px y un circulo
   sobre la imagen; con logotipos de verdad se veia raro. Revision de Diseno. */
.shop-logo{position:relative;width:68px;height:68px;margin:-34px 0 0 20px;border-radius:50%;background:#fff;padding:10px;box-shadow:var(--shadow-1);z-index:2;display:grid;place-items:center}
.shop-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.shop-body{padding:14px 4px 0}
.shop-name{font-weight:600;font-size:16px;display:flex;align-items:center;gap:6px}
.shop-name .ico{width:16px;height:16px;color:var(--magenta)}
.shop-meta{font-size:13px;color:var(--ink-2)}
.shop-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:600;color:var(--magenta-ink)}
.shop-link .ico{width:15px;height:15px;transition:transform .2s}
.shop:hover .shop-link .ico{transform:translateX(4px)}
.more{text-align:center;margin-top:48px}
/* categorias */
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,280px);gap:24px}
.cat{position:relative;border-radius:10px;overflow:hidden;display:block}
.cat.big{grid-column:span 2;grid-row:span 2}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.cat:hover img{transform:scale(1.05)}
.cat-label{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);background:#fff;color:var(--ink);height:46px;padding:0 26px;border-radius:999px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;white-space:nowrap;box-shadow:var(--shadow-1);transition:background .25s,color .25s;pointer-events:none}
.cat-label small{font-weight:400;color:var(--ink-3);font-size:12px;transition:color .25s}
.cat:hover .cat-label{background:var(--ink);color:#fff}.cat:hover .cat-label small{color:#cfc9cb}
.cat.big .cat-label{height:54px;font-size:16px;padding:0 32px}
/* productos */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}
.rail-head .sec-head{text-align:left;margin:0}
.rail-head .raya{margin-left:0}
.rail-ctrl{display:flex;gap:10px}
.rail-ctrl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:all .2s}
.rail-ctrl button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 90px)/4);gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.prod{scroll-snap-align:start;color:var(--ink)}
.prod-img{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--soft)}
/* Las maquetas pintan <image-slot> de relleno y el tema pinta la foto de
   verdad, dentro de su enlace: por eso el selector es la etiqueta img y no el
   hijo directo. Sin esto la foto no recorta a 3/4 ni se acerca al pasar. */
.prod-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.prod:hover .prod-img img{transform:scale(1.05)}
.tag{position:absolute;top:14px;left:14px;z-index:2;height:24px;padding:0 10px;border-radius:999px;background:#fff;color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.04em;display:flex;align-items:center;pointer-events:none}
.tag.new{background:var(--ink);color:#fff}
.fav{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-1);opacity:0;transform:translateX(8px);transition:all .25s}
.fav .ico{width:17px;height:17px}
.fav:hover{color:var(--magenta-ink)}
.fav.on{opacity:1;transform:none;color:var(--magenta-ink)}.fav.on svg{fill:var(--magenta-ink)}
.prod:hover .fav{opacity:1;transform:none}
.add{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;height:44px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--shadow-1);opacity:0;transform:translateY(10px);transition:all .25s}
.add .ico{width:17px;height:17px}
.prod:hover .add{opacity:1;transform:none}
.add:hover{background:var(--ink);color:#fff}
.add.done{background:var(--green);color:#fff;opacity:1;transform:none}
.prod-body{padding:16px 2px 0}
.prod-shop{font-size:12px;color:var(--ink-3);font-weight:500}
.prod-name{font-weight:500;font-size:14px;line-height:1.45;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.prod-name a{color:var(--ink)}.prod-name a:hover{color:var(--magenta-ink)}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.price{font-weight:600;font-size:15px;color:var(--magenta-ink)}
.stock{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--green);font-weight:500}
.stock:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
/* testimonio */
.testi{background:var(--pink-2)}
.testi .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.testi-photo{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;max-width:460px}
.testi-q .ico{width:44px;height:44px;color:var(--magenta);stroke-width:1.25}
.testi blockquote{font-weight:300;font-size:clamp(24px,2.5vw,34px);line-height:1.35;letter-spacing:-.01em;margin-top:20px;text-wrap:pretty}
.testi-who{display:flex;align-items:center;gap:18px;margin-top:34px;flex-wrap:wrap}
.testi-who strong{display:block;font-weight:600}
.testi-who span{font-size:13px;color:var(--ink-2)}
.saving{margin-left:auto;display:flex;align-items:baseline;gap:8px;padding:14px 22px;background:#fff;border-radius:10px}
.saving b{font-size:22px;font-weight:600;color:var(--magenta-ink)}
.saving small{font-size:12px;color:var(--ink-2)}
/* cierre */
.cierre{background:linear-gradient(180deg,#a2ddfd,#a8dffe,#a5dbfd);overflow:hidden}
.cierre .wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:center;gap:40px;min-height:340px}
.cierre h2{font-weight:300;font-size:clamp(34px,4.2vw,58px);letter-spacing:-.025em;line-height:1.1}
.cierre .raya{margin:22px 0 0;width:56px;height:3px}
.cierre p{margin-top:18px;font-size:17px}
.cierre .btns{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.cierre-art{position:relative;height:340px}
.cierre{position:relative}.cierre-art{position:static}
/* footer */
.ftr{padding:80px 0 0;border-top:1px solid var(--line)}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) minmax(0,1.5fr);gap:40px}

/* CUARTO cambio respecto a la maqueta (los otros tres, en la cabecera).

   La maqueta repartia el pie en CINCO columnas: marca, dos de enlaces, una de
   paginas y la del formulario de la guia. Ese formulario no esta -promete una
   guia que todavia no existe, ver parciales/pie.blade.php-, asi que el pie
   tiene cuatro hijos en una rejilla de cinco pistas y el 25% de la derecha se
   queda vacio. Mientras falte, cuatro pistas.

   Va AQUI y no al final del fichero a proposito: las consultas de medios de
   mas abajo redefinen .ftr-grid para 1100px y 760px, y tienen que seguir
   ganando. Puesta al final, esta regla se las comia y el pie dejaba de
   responder al ancho.

   Cuando la guia entre, se borra y vuelve el reparto de la maqueta. */
.ftr-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
.ftr .logo{margin-bottom:14px}
.ftr-slogan{font-weight:300;font-size:20px;letter-spacing:-.01em}
.wa{display:inline-flex;align-items:center;gap:10px;margin-top:22px;height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--green);color:var(--green);font-weight:600;font-size:13px;transition:all .2s}
.wa:hover{background:var(--green);color:#fff}
.wa .ico{width:18px;height:18px}
.ftr h4{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px}
.ftr ul{list-style:none;display:grid;gap:11px}
.ftr ul a{color:var(--ink-2);font-size:14px;transition:color .2s,padding .2s}
.ftr ul a:hover{color:var(--magenta-ink);padding-left:4px}
.guide p{font-size:14px;color:var(--ink-2);margin-bottom:16px}
.guide form{display:flex;height:48px;border:1px solid var(--line);border-radius:999px;padding:4px;transition:border-color .2s}
.guide form:focus-within{border-color:var(--magenta)}
.guide input{flex:1;min-width:0;border:0;outline:none;font:inherit;font-size:14px;padding:0 16px;background:transparent}
.guide .btn{height:38px;padding:0 18px;font-size:13px}
.guide .ok{display:none;margin-top:12px;font-size:13px;color:var(--green);font-weight:500}
.ftr-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:64px;padding:26px 0;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.ftr-bottom nav{display:flex;gap:24px;flex-wrap:wrap}
.ftr-bottom a{color:var(--ink-2)}.ftr-bottom a:hover{color:var(--magenta-ink)}
/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:14px 22px;border-radius:999px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-2);opacity:0;pointer-events:none;transition:all .3s;z-index:100}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast .ico{color:#7fe0b8;width:18px;height:18px}
/* responsive */
/* El select de acotar a una tienda se esconde en el MISMO corte que el boton
   de vender, 1100, y no a 760 como en la maqueta.

   Por que: en la pagina de tienda el buscador lleva select + texto de muestra +
   boton, y con las cadenas correctas -"Todas las categorias" y "Busca
   productos, tiendas o marcas"- eso pide 487px. Entre 761 y 847 de ventana no
   los tiene, asi que el texto de muestra se recortaba. Con el select fuera
   desde 1100, en ese tramo pide 319 y tiene 401 de sobra. Las cuentas estan en
   el LEEME. */
@media (max-width:1100px){.hdr-row{gap:24px}.hdr-actions .btn{display:none}.search select{display:none}.shops{grid-template-columns:repeat(2,minmax(0,1fr))}.rail{grid-auto-columns:calc((100% - 60px)/3)}.ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ftr-brand,.guide{grid-column:span 3}.cifras .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.cifra:nth-child(3){border-left:0}.cifra:nth-child(n+3){border-top:1px solid var(--line)}}
@media (min-width:761px) and (max-width:1023px){.slide.s1{background:linear-gradient(115deg,var(--sky),var(--lilac))}.slide.s2{background:linear-gradient(115deg,var(--lilac),var(--pink))}.slide.s3{background:linear-gradient(115deg,var(--pink),var(--sky))}.cierre{background:linear-gradient(115deg,var(--sky),var(--lilac))}.slide-art{height:440px}.slide-art,.cierre-art{position:relative}.ajolote,.cierre .ajolote{display:block;position:absolute;right:50%;transform:translateX(50%);bottom:0;height:90%;max-height:none}}
@media (max-width:760px){.sec{padding:64px 0}.wrap{padding:0 18px}.hdr-row{grid-template-columns:auto auto;height:auto;padding:14px 0;gap:14px;justify-content:space-between}.search{grid-column:1/-1;grid-row:2}.nav{justify-content:flex-start;gap:26px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}.nav::-webkit-scrollbar{display:none}.slide{min-height:0}.slide .wrap{grid-template-columns:1fr;gap:0}.slide-copy{padding:48px 0 0}.slide-art{height:300px;margin-bottom:60px}.hero-arrow{display:none}.cifras .wrap{grid-template-columns:1fr}.cifra{padding:22px 0}.cifra+.cifra{border-left:0;border-top:1px solid var(--line)}.shops{grid-template-columns:1fr}.cats{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:320px repeat(2,200px);gap:14px}.cat.big{grid-column:span 2;grid-row:span 1}.cat-label{height:40px;padding:0 18px;font-size:13px;bottom:16px}.cat-label small{display:none}.rail{grid-auto-columns:72%;gap:18px}.rail-ctrl{display:none}.add,.fav{opacity:1;transform:none}.testi .wrap{grid-template-columns:1fr;gap:36px}.saving{margin-left:0}.cierre .wrap{grid-template-columns:1fr;padding-top:56px}.cierre-art{height:240px}.slide.s1{background:linear-gradient(160deg,var(--sky),var(--lilac))}.slide.s2{background:linear-gradient(160deg,var(--lilac),var(--pink))}.slide.s3{background:linear-gradient(160deg,var(--pink),var(--sky))}.cierre{background:linear-gradient(160deg,var(--sky),var(--lilac))}.slide-art,.cierre-art{position:relative}.ajolote,.cierre .ajolote{display:block;position:absolute;right:50%;transform:translateX(50%);bottom:0;height:100%;max-height:none}.ftr-grid{grid-template-columns:1fr 1fr}.ftr-brand,.guide{grid-column:span 2}}

@media (min-width:1024px){
.slide.s1{background:linear-gradient(180deg,#78c2f1,#82cef8,#92d5f8)}
.slide.s2{background:linear-gradient(180deg,#aabbed,#abbef0,#bac6f1)}
.slide.s3{background:linear-gradient(180deg,#ebd3f0,#f1d1f2,#cdc1ef)}
.slide[style*="--art"]::after{content:"";position:absolute;top:0;bottom:0;right:0;aspect-ratio:16/9;background:var(--art) center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%);z-index:0;pointer-events:none}
.slide .wrap{position:relative;z-index:1}
.cierre{background:linear-gradient(180deg,#a2ddfd,#a8dffe,#a5dbfd)}
.cierre .wrap{position:relative;z-index:1}
}
.testi[hidden]{display:none}

/* Texto solo para quien lee la pagina con un lector: ni se ve ni ocupa, pero
   se anuncia. Lo trae Bootstrap, que este tema no carga. */
.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}

/* ---- lo que el barrido de clases huerfanas encontro ----

   Se saco de la instantanea del 6/10: todos los tokens de class= del HTML de
   verdad, menos los que define alguna hoja. Salieron cinco, no una.

   `price-l` ya esta arreglada. `mb-2` era un resto de Bootstrap y se fue con
   ella. Las tres de aqui faltaban de verdad. */

/* La regla base de h2 de las maquetas NO se habia portado: solo estaban
   `.slide h2` y `.cierre h2`, asi que cualquier otro h2 -los titulos de las
   pestanas de la ficha, el nombre de la tienda- caia al tamano por omision del
   navegador. Por eso se veian bien de lejos y mal de cerca. */
h2{font-weight:300;font-size:clamp(26px,3vw,36px);letter-spacing:-.01em;line-height:1.2}

/* Texto secundario: la fecha de una resena, "Sin resenas", "Precio final", el
   aviso del carrito. Solo existia como `.resena .caption` en tienda.css, que
   la ficha NO carga: ahi salia al mismo tamano y peso que el resto de la
   columna. El valor es el que la maqueta le da al texto secundario del precio
   -13px, --ink-2-. */
.caption{font-size:13px;color:var(--ink-2)}

/* HTML QUE ESCRIBE EL VENDEDOR: la descripcion de un articulo o de una tienda.
   En la ficha cae dentro de `.tab-panel`, que ya estila p, ul y h3; en la
   TIENDA va fuera, asi que alli no tenia ninguna regla y los parrafos y las
   listas del vendedor salian con lo que trajera el navegador. */
.html-content{color:var(--ink-2)}
.html-content p{margin-bottom:16px;text-wrap:pretty}
.html-content p:last-child{margin-bottom:0}
.html-content h2,.html-content h3,.html-content h4{font-weight:600;font-size:16px;color:var(--ink);margin:28px 0 10px}
.html-content ul,.html-content ol{padding-left:20px;display:grid;gap:6px;margin-bottom:16px}
.html-content a{color:var(--magenta-ink);text-decoration:underline;text-underline-offset:3px}
.html-content strong,.html-content b{font-weight:600;color:var(--ink)}
.html-content img{max-width:100%;height:auto;border-radius:8px}

/* El precio tachado. Solo se pinta cuando el articulo tiene oferta, asi que no
   salia en la instantanea: lo encontro el barrido al pasarlo por TODAS las
   vistas en vez de por un HTML concreto. Sin regla, el precio anterior salia
   sin tachar y del mismo tamano que el actual: los dos numeros decian lo
   mismo.

   La maqueta lo llama `.old` en la rejilla; aqui la clase es `strike` y el
   valor es el suyo, mas la linea, que es lo que lo hace legible como "antes". */
.strike{color:var(--ink-3);font-weight:400;font-size:13px;text-decoration:line-through}

/* El envoltorio de la seccion de devoluciones de la tienda: solo acota el
   ancho de lectura, como hace .tab-panel en la ficha. */
.about-wrap .wrap{max-width:860px}

/* ---- La barra superior de promocion (K-152) ----
   El marcado es el de resources/views/front_top_promo.blade.php, compartido
   con el tema default, asi que las clases son las suyas. `hidden` la quita
   tema.js cuando la persona no ha cerrado la barra antes. */
.hidden{display:none}
.top-promo-banner{position:relative;z-index:3}
.top-promo-banner a{display:block;color:var(--ink)}
.top-promo-banner img{width:100%;display:block}
.top-promo-banner a.close-button{position:absolute;top:50%;right:14px;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);font-size:20px;line-height:26px;text-align:center;box-shadow:var(--shadow-1)}
.top-promo-banner a.close-button:hover{background:#fff;color:var(--magenta-ink)}

/* ---- Las piezas de publicidad (fase 3, paso 6) ----

   Dos formas, las dos hijas directas de la rejilla que las llama: en este tema
   las rejillas son CSS grid, asi que la pieza no carga ninguna columna como en
   el tema viejo.

   `.anuncio` va en rejillas de baldosas -marcas y categorias-, con la etiqueta
   DENTRO del arte, abajo a la izquierda. `.anuncio-tarjeta` va en rejillas de
   articulos y de tiendas, con la etiqueta en la linea de DEBAJO. Las esquinas
   de arriba se dejan libres a proposito: ahi viven el corazon de favoritos y
   el aviso de «Nuevo». */
.anuncio{position:relative;border-radius:10px;overflow:hidden;background:var(--soft)}
.anuncio a{display:block}
.anuncio img{display:block;width:100%;height:100%;object-fit:cover}

.anuncio-tarjeta{--anuncio-alto:220px}
.anuncio-tarjeta a{display:block;border-radius:10px;overflow:hidden;background:var(--soft)}
/* El arte manda sobre el hueco: una medida equivocada se ve recortada, no
   estirada, y asi el comerciante la nota y la corrige. */
.anuncio-tarjeta img{display:block;width:100%;height:var(--anuncio-alto);object-fit:cover}
.anuncio-pie{padding:8px 2px 0}

/* ---- La banda de banners ----
   La pinta sections/_banda_banners, que usan la pagina de tienda -donde son la
   vitrina del propio comerciante- y la portada -donde pueden venir mezclados
   con publicidad-.

   `--cols` lo pone la plantilla con el `columns` que guarda el panel, que es la
   rejilla de 12 de Bootstrap. Aqui es una rejilla de 12 de CSS Grid: lo mismo
   sin la hoja de Bootstrap detras. Por debajo de 760 cada banner toma la fila
   entera, que a ese ancho es lo unico legible. */
.banda-banners{margin:32px 0}
.banda-rejilla{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.banner{position:relative;grid-column:span 12;display:block;overflow:hidden;border-radius:14px;background:var(--soft);color:inherit;text-decoration:none}
@media(min-width:760px){.banner{grid-column:span var(--cols,12)}}
.banner img{display:block;width:100%;height:auto;transition:transform .35s ease}
.banner:hover img{transform:scale(1.02)}
/* El texto va abajo. Arriba no: esas dos esquinas son del corazon y del
   "Nuevo", y la etiqueta de patrocinado tampoco puede ir ahi. */
.banner-texto{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(to top,rgba(35,31,32,.6),transparent);color:var(--texto,#fff)}
.banner-texto.oscuro{background:linear-gradient(to top,rgba(255,255,255,.75),transparent)}
.banner-texto.oscuro .banner-cta{background:var(--texto);color:#fff}
.banner-texto h3{font-weight:400;font-size:clamp(18px,2vw,24px);line-height:1.2}
.banner-texto p{margin-top:4px;font-size:14px;opacity:.9}
.banner-cta{display:inline-block;margin-top:10px;padding:7px 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:600}
@media(prefers-reduced-motion:reduce){.banner img{transition:none}.banner:hover img{transform:none}}

/* ---- La cabecera de una marca ----
   La pinta contents/brand_page. Esa pagina NO tiene maqueta, asi que la
   cabecera toma los valores de `.l-head` del directorio de tiendas
   -Kikoua Tiendas.html-, que es la cabecera de listado que si esta dibujada.
   Cuando se porte esa pagina, las dos comparten medidas y se podra unificar.

   Vive en kikoua.css y no en categoria.css porque es una cabecera, familia de
   las que ya hay aqui, no una pieza del listado filtrado. */
.marca-head{text-align:center;padding:40px 0 30px}
.marca-logo{width:96px;height:96px;margin:0 auto 18px;display:grid;place-items:center;padding:12px;border:1px solid var(--line);border-radius:50%;background:#fff}
.marca-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.marca-head h1{font-weight:300;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.02em}
.marca-head p{color:var(--ink-2);margin-top:12px;max-width:620px;margin-inline:auto;text-wrap:pretty}
@media(max-width:760px){.marca-head{padding:28px 0 22px}.marca-logo{width:72px;height:72px}}

/* ---- La cabecera de un directorio ----
   La pinta contents/directorio_tiendas, de la maqueta Kikoua Tiendas.html.
   Vive aqui y no en una hoja propia porque esa pagina no carga ninguna: toda
   su rejilla -.shops, .shop- ya estaba en este fichero, compartida con la
   portada. */
.l-head{text-align:center;padding:56px 0 30px}
.l-head h1{font-weight:300;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.02em}
.l-head p{color:var(--ink-2);margin-top:12px}
/* El conmutador Tiendas|Marcas. Son dos ENLACES y no dos botones: cada vista
   es una ruta de verdad. Se pinta siempre: decision de Diseno. */
.seg2{display:inline-grid;grid-template-columns:1fr 1fr;background:var(--soft);border-radius:999px;padding:4px;margin-top:26px}
.seg2 a{height:42px;padding:0 28px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2);display:grid;place-items:center}
.seg2 a.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-1)}
.l-tools{display:flex;justify-content:flex-start;gap:12px;flex-wrap:wrap;align-items:center;margin:20px 0 36px}
.l-search{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;min-width:280px}
.l-search:focus-within{border-color:var(--magenta)}
.l-search input{border:0;outline:none;font:inherit;font-size:14px;flex:1;min-width:0;background:transparent}
.l-search .ico{width:17px;height:17px;color:var(--ink-3)}
/* Las iniciales, cuando la tienda no tiene logotipo. De la maqueta. */
.shop-logo .mono{width:100%;height:100%;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:300}
.directorio{padding-bottom:96px}
@media(max-width:760px){.l-head{padding:36px 0 22px}.l-search{min-width:0;width:100%}}

/* ---- El directorio de marcas ----
   De Kikoua Tiendas.html, vista #vM. Comparte .l-head y .seg2 con el de
   tiendas. Solo texto: ni imagen ni conteo, por decision de Diseno. */
.az{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:36px}
.az a,.az .off{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink)}
.az a:hover{background:var(--soft);color:var(--magenta-ink)}
.az .off{color:var(--ink-3);font-weight:400}
.letter{display:grid;grid-template-columns:80px minmax(0,1fr);gap:24px;padding:28px 0;border-top:1px solid var(--line);scroll-margin-top:120px}
.letter h2{font-weight:300;font-size:40px;line-height:1;color:var(--magenta-ink)}
.brands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 24px;align-content:start}
.brands a{font-size:15px;color:var(--ink);padding:6px 0;display:block}
.brands a:hover{color:var(--magenta-ink)}
@media(max-width:1100px){.brands{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.letter{grid-template-columns:1fr;gap:12px}}

/* ---- El estado vacio ----
   Venia en categoria.css, pero lo pintan tambien los tres directorios, que
   no cargan esa hoja: aqui lo ven todos. */
.empty{grid-column:1/-1;text-align:center;padding:40px 0 20px}
.empty img{width:170px;margin:0 auto}
.empty h2{font-weight:300;font-size:30px;letter-spacing:-.02em;margin-top:10px}
.empty p{color:var(--ink-2);margin-top:10px;max-width:440px;margin-left:auto;margin-right:auto}
.empty .sugs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.empty .sugs a{height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;font-size:13px;font-weight:500;color:var(--ink)}

/* ---- El indice de categorias ----
   Propuesta de Diseno del 6/10/2026, sin maqueta. Comparte .l-head con los
   otros dos directorios. Solo texto, como el de marcas. */
.saltos{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 40px}
.saltos a{height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.saltos a:hover{border-color:var(--ink)}
.grupo{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;padding:40px 0 44px;border-top:1px solid var(--line);scroll-margin-top:150px}
.grupo h2{font-weight:300;font-size:30px;line-height:1.1;letter-spacing:-.02em}
.grupo .todo{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:600;color:var(--magenta-ink)}
.grupo .todo .ico{width:14px;height:14px}
.subgrupos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.subgrupo h3{font-size:14px;font-weight:600;margin-bottom:10px}
.subgrupo h3 a{color:var(--ink)}.subgrupo h3 a:hover{color:var(--magenta-ink)}
.subgrupo ul{list-style:none;display:grid;gap:7px}
.subgrupo li a{font-size:14px;color:var(--ink-2)}.subgrupo li a:hover{color:var(--magenta-ink)}
.subgrupo .mas summary{list-style:none;cursor:pointer;margin-top:9px;font-size:13px;font-weight:600;color:var(--magenta-ink)}
.subgrupo .mas summary::-webkit-details-marker{display:none}
.subgrupo .mas .cerrar,.subgrupo .mas[open] .abrir{display:none}
.subgrupo .mas[open] .cerrar{display:inline}
.subgrupo .mas[open] ul{margin-top:7px}
@media(max-width:1023px){.grupo{grid-template-columns:1fr;gap:22px;padding:32px 0}.subgrupos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.subgrupos{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}.saltos{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.grupo h2{font-size:26px}}