/* AURE — territorio visual único: negro puro. Paleta cerrada por manual de marca:
   #000000 / #FFFFFF / #8A2BE2. Diseño monotema deliberado. */
:root{
  --negro:#000000;
  --panel:#050505;
  --panel-2:#080808;
  --blanco:#FFFFFF;
  --morado:#8A2BE2;
  --linea:rgba(255,255,255,.12);
  --linea-sutil:rgba(255,255,255,.07);
  --tenue:rgba(255,255,255,.45);
  --apagado:rgba(255,255,255,.3);
  --max:1280px;
  /* Luz LED morada de los elementos que se pueden tocar. Dos capas: un halo
     cercano que define el borde y otro amplio y difuso que da el resplandor. */
  --led:0 0 0 1px var(--morado), 0 0 16px rgba(138,43,226,.45), 0 0 44px rgba(138,43,226,.20);
  --led-on:0 0 0 1px var(--morado), 0 0 24px rgba(138,43,226,.85), 0 0 66px rgba(138,43,226,.40);
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--negro);color:var(--blanco);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--morado);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}


/* nav */
.nav{position:sticky;top:0;z-index:100;background:rgba(0,0,0,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.nav__inner{max-width:var(--max);margin:0 auto;padding:0 32px;height:96px;display:flex;align-items:center;gap:40px}
.nav__brand{display:flex;align-items:center;gap:16px;flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer}
.nav__brand img.sym{width:40px;height:40px}
.nav__brand img.mark{height:26px;width:auto}
.nav__links{display:flex;gap:34px;margin-left:auto;font-size:11px;font-weight:500;letter-spacing:.22em}
.nav__links button{
  background:none;border:0;padding:4px 0;cursor:pointer;color:var(--tenue);
  position:relative;letter-spacing:inherit;font-size:inherit;font-weight:inherit;white-space:nowrap;
  line-height:inherit;
  transition:color .25s ease;
}
.nav__links button::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--morado);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.nav__links button:hover{color:var(--blanco)}
.nav__links button:hover::after{transform:scaleX(1)}
.nav__links button[aria-current="page"]{color:var(--blanco)}
.nav__links button[aria-current="page"]::after{transform:scaleX(1)}
/* Los seis de la barra se estiran a la misma altura porque son hijos directos
   del flex. El texto se centra igual en todos para que la linea sea exacta:
   un <button> y un <a> no lo colocan igual por su cuenta. */
.nav__links>button,.nav__links>a,.nav__desp>a{display:flex;align-items:center}
/* Desplegable de CBD. El envoltorio se estira como los demas hijos del flex;
   sin esto el enlace de dentro se quedaba pegado arriba y CBD salia mas alto
   que el resto de la barra. */
.nav__desp{position:relative;display:flex;align-items:stretch}
/* Puente invisible entre CBD y el panel: sin el, al bajar el raton se pierde
   el hover en el hueco y el menu se cierra en la cara. */
.nav__desp::after{content:"";position:absolute;top:100%;left:0;right:0;height:18px}
.nav__menu{
  display:none;
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);
  background:#000;border:1px solid var(--linea);
  min-width:216px;padding:6px 0;z-index:60;
  flex-direction:column;
}
/* Se despliega solo con el raton encima (o con el teclado dentro). Nada de
   abrirlo a golpe de clic: el CBD de la barra sigue siendo un enlace normal a
   /cbd, que es lo que espera quien lo pulsa. */
.nav__desp:hover .nav__menu,
.nav__desp:focus-within .nav__menu{display:flex}
.nav__links .nav__menu a{
  padding:11px 18px;font-size:9.5px;letter-spacing:.2em;white-space:nowrap;
  color:var(--tenue);
}
.nav__links .nav__menu a::after{display:none}
.nav__links .nav__menu a:hover{color:var(--blanco);background:rgba(138,43,226,.16)}

/* Enlaces del menu. Desde que CBD y BLOG son paginas de verdad, en la barra
   conviven botones (vistas del index) y enlaces (paginas propias): tienen que
   verse exactamente igual. */
/* El menu del blog no es una SPA: aqui los enlaces son enlaces de verdad. */
.nav__links a{
  background:none;border:0;padding:4px 0;color:var(--tenue);cursor:pointer;
  font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  position:relative;text-decoration:none;white-space:nowrap;transition:color .25s ease;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--morado);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease,box-shadow .3s ease;
}
.nav__links a:hover{color:var(--blanco)}
.nav__links a:hover::after{transform:scaleX(1);box-shadow:0 0 9px 1px rgba(138,43,226,.95)}
.nav__links a[aria-current="page"]{color:var(--blanco)}
.nav__links a[aria-current="page"]::after{transform:scaleX(1);box-shadow:0 0 9px 1px rgba(138,43,226,.75)}

/* Tarjetas y botones que ahora son enlaces: fuera el subrayado del navegador. */
.cat,.col__media,.btn{text-decoration:none}
.nav__cart{margin-left:8px;font-size:11px;letter-spacing:.22em;font-weight:500;color:var(--tenue)}
.nav__toggle{display:none;margin-left:auto;background:none;border:0;color:var(--blanco);cursor:pointer;padding:8px}

.vista{display:none}
.vista.on{display:block}

/* hero */
.hero{min-height:calc(50vh - 130px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 32px 36px;position:relative}
.hero::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:1px;height:64px;background:linear-gradient(to bottom,rgba(0,0,0,0),var(--morado))}
/* El PNG del wordmark trae casi un 38 % de aire transparente arriba y abajo
   dentro de su propio lienzo. Ese aire ya separa de sobra, así que el símbolo y
   el lema se pegan a él: si además les damos margen, el hueco se duplica. */
.hero__sym{width:82px;height:82px;margin:0 auto 2px;animation:rise 1.1s .1s ease both}
.hero__h1{margin:0;padding:0;line-height:0;font-size:0}
.hero__mark{width:min(430px,72vw);margin:0 auto;animation:rise 1.1s .3s ease both}
.hero__lema{margin:2px 0 0;font-size:12px;font-weight:500;letter-spacing:.42em;color:var(--morado);animation:rise 1.1s .55s ease both}
/* Fondo vivo de la portada. Las fotos van muy bajas de opacidad y debajo de un
   velo negro que deja el centro oscuro: el logotipo tiene que seguir siendo lo
   primero que se lee, no competir con una foto. */
.hero__fondo{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.hero__fondo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.08);transition:opacity 2.4s ease;
}
.hero__fondo img.on{opacity:.34}
.hero__velo{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.9) 100%);
}
/* La luz morada respira despacio. Sin esto el fondo se queda plano. */
.hero__neon{
  position:absolute;inset:0;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 50% 52%,rgba(138,43,226,.22) 0%,rgba(138,43,226,.08) 44%,rgba(138,43,226,0) 70%);
  animation:respira 7s ease-in-out infinite;
}
@keyframes respira{0%,100%{opacity:.5}50%{opacity:1}}
/* El contenido por encima de las tres capas del fondo. */
.hero__sym,.hero__h1,.hero__lema{position:relative;z-index:2}
/* El logotipo no lleva caja: el contraste se lo da un halo que sigue la forma
   de las letras. Con un rectángulo oscuro detrás parecía una etiqueta pegada
   encima de la foto; así se funde con el fondo. */
.hero__sym,.hero__mark{
  filter:drop-shadow(0 0 18px rgba(0,0,0,.95)) drop-shadow(0 0 46px rgba(0,0,0,.85));
}
.hero__lema{text-shadow:0 0 14px rgba(0,0,0,.95),0 0 30px rgba(0,0,0,.8)}
.hero__cta{position:relative;z-index:2;margin-top:26px;background:rgba(0,0,0,.55);animation:rise 1.1s .75s ease both}
@media (prefers-reduced-motion:reduce){
  .hero__fondo img{transition:none}
  .hero__neon{animation:none;opacity:.75}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Banda Glovo: va despues de la rejilla de colecciones, antes del bloque
   AURE CBD. Al no ir pegada al hero necesita cerrarse por los dos lados y
   traer su propio aire por debajo (.col no tiene padding arriba).
   Mantiene la paleta AURE: el amarillo de Glovo no entra aqui, solo el nombre. */
.glovo{
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  background:var(--panel);margin-bottom:52px;
}
.glovo__inner{display:flex;align-items:center;gap:24px;padding-top:24px;padding-bottom:24px;flex-wrap:wrap}
.glovo__punto{width:8px;height:8px;border-radius:50%;background:var(--morado);flex:0 0 auto;animation:latido 2.4s infinite}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(138,43,226,.55)}
  70%{box-shadow:0 0 0 13px rgba(138,43,226,0)}
  100%{box-shadow:0 0 0 0 rgba(138,43,226,0)}
}
.glovo__txt{flex:1 1 300px;font-size:12.5px;line-height:1.6;color:var(--tenue);font-weight:300}
.glovo__txt strong{display:block;margin-bottom:4px;font-size:10.5px;font-weight:600;letter-spacing:.28em;color:var(--blanco)}
.glovo__cta{
  flex:0 0 auto;border:1px solid var(--morado);background:var(--morado);color:var(--blanco);
  padding:14px 32px;font-size:10.5px;font-weight:600;letter-spacing:.26em;white-space:nowrap;
  transition:background .3s ease,color .3s ease;
}
.glovo__inner:hover .glovo__cta{background:transparent;color:var(--morado)}
@media (prefers-reduced-motion:reduce){.glovo__punto{animation:none}}

/* secciones */
.sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.sec__label{font-size:10px;letter-spacing:.4em;color:var(--morado);font-weight:500;margin:0}
.sec__note{font-size:12px;color:var(--tenue);margin:0;letter-spacing:.04em}
.btn{display:inline-block;border:1px solid rgba(255,255,255,.28);padding:15px 40px;font-size:11px;font-weight:500;letter-spacing:.28em;background:none;color:var(--blanco);cursor:pointer;transition:border-color .3s ease,background .3s ease}
.btn:hover{border-color:var(--morado);background:var(--morado)}

/* Carrusel de la selección AURE (portada). Cuatro tarjetas en ordenador, tres
   en tablet y algo más de una y media en móvil, para que se vea que hay más y
   se deslice con el dedo. Sin barra de scroll: en móvil se arrastra y en
   ordenador van las flechas. */
.carr{padding:48px 0 56px;border-top:1px solid var(--linea)}
.carr__ctrl{display:flex;align-items:center;gap:8px}
.carr__todo{font-size:10px;letter-spacing:.28em;font-weight:500;color:var(--tenue);text-decoration:none;margin-right:14px;transition:color .3s ease}
.carr__todo:hover{color:var(--morado)}
.carr__btn{width:40px;height:40px;display:grid;place-items:center;padding:0;background:none;border:1px solid var(--linea);color:var(--blanco);cursor:pointer;transition:border-color .3s ease,background .3s ease,opacity .3s ease}
.carr__btn:hover{border-color:var(--morado);background:var(--morado)}
.carr__btn[disabled],.carr__btn[disabled]:hover{opacity:.3;cursor:default;background:none;border-color:var(--linea)}
.carr__pista{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.carr__pista::-webkit-scrollbar{display:none}
.carr__item{scroll-snap-align:start;min-width:0}
.carr__card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--blanco);border:1px solid var(--linea);background:var(--panel);transition:border-color .3s ease,box-shadow .3s ease}
.carr__foto{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--negro)}
.carr__foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.carr__premio{position:absolute;top:0;left:0;right:0;background:var(--morado);color:var(--blanco);font-size:8px;letter-spacing:.22em;font-weight:600;text-align:center;padding:6px 8px;line-height:1.4}
.carr__estado{position:absolute;left:0;right:0;bottom:0;background:var(--morado);color:var(--blanco);font-size:8.5px;letter-spacing:.3em;font-weight:600;text-align:center;padding:8px;line-height:1.4}
.carr__info{display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px;border-top:1px solid var(--linea-sutil)}
.carr__num{font-size:9.5px;letter-spacing:.34em;color:var(--morado);font-weight:600;font-variant-numeric:tabular-nums}
.carr__nom{font-size:13px;font-weight:500;letter-spacing:.16em;line-height:1.35}
.carr__meta{font-size:9.5px;letter-spacing:.2em;color:var(--tenue)}
.carr__precio{margin-top:8px;font-size:14px;font-weight:500;letter-spacing:.04em}
@media (hover:hover){
  .carr__card:hover{border-color:var(--morado);box-shadow:0 0 30px rgba(138,43,226,.34)}
  .carr__card:hover .carr__foto img{transform:scale(1.04)}
}
.carr__card:focus-visible{outline:none;border-color:var(--morado);box-shadow:0 0 0 1px var(--morado),0 0 42px rgba(138,43,226,.62)}
@media (max-width:900px){
  .carr__pista{grid-auto-columns:calc((100% - 28px) / 3);gap:14px}
}
@media (max-width:760px){
  .carr{padding:36px 0 44px}
  .carr__pista{grid-auto-columns:62%;gap:12px;margin:0 -22px;padding:0 22px;scroll-padding:0 22px}
  .carr__btn{display:none}
  .carr__todo{margin-right:0;font-size:9px;letter-spacing:.2em}
  .carr__info{padding:14px 14px 16px}
  .carr__nom{font-size:11.5px;letter-spacing:.12em}
  .carr__meta{font-size:8.5px;letter-spacing:.14em}
  .carr__precio{font-size:13px}
}

/* categorías */
.cats{padding:48px 0 56px;border-top:1px solid var(--linea)}
/* Las líneas de la rejilla las dibuja cada celda con su propia sombra, no el
   fondo del contenedor. Con el fondo, las celdas que sobran en la última fila
   dejaban el gris a la vista.
   Son ocho categorías: cuatro columnas en ordenador y dos en tablet y móvil,
   para que las filas salgan siempre completas. */
.cats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--negro)}
.cat{box-shadow:0 0 0 1px var(--linea)}
.cat{background:var(--negro);padding:44px 28px 38px;display:flex;flex-direction:column;gap:12px;min-height:210px;position:relative;text-align:left;border:0;cursor:pointer;color:var(--blanco);transition:background .35s ease}
.cat:hover{background:var(--panel-2)}
.cat__name{font-size:15px;font-weight:500;letter-spacing:.2em;margin:0}
.cat__desc{font-size:12.5px;color:var(--tenue);margin:0;line-height:1.6;font-weight:300}
.cat__state{margin-top:auto;font-size:10px;letter-spacing:.28em;font-weight:500;color:var(--apagado)}
.cat--live .cat__state{color:var(--morado)}
.cat--live::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--morado)}

/* bloque colección */
.col{padding:0 0 60px}
.col__panel{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--linea)}
/* Mosaico de colección: las seis fotos comparten fondo negro, así que al
   juntarlas leen como una sola imagen en vez de seis recortes pegados. */
.col__media{
  background:var(--panel);min-height:420px;padding:0;border:0;cursor:pointer;
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:1px;
  position:relative;
}
.col__cel{overflow:hidden;position:relative;background:var(--negro)}
.col__cel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,opacity .35s ease}
.col__media:hover .col__cel img{opacity:.55}
.col__cel:hover img{opacity:1;transform:scale(1.06)}
/* La flor va superpuesta sobre el mosaico, con un velo radial detrás para que
   se lea sobre las fotos. Al pasar el ratón se aparta y deja ver el producto. */
.col__marca{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.8) 0%,rgba(0,0,0,.46) 42%,rgba(0,0,0,0) 72%);
  transition:opacity .45s ease;
}
.col__marca img{width:44%;max-width:200px;filter:drop-shadow(0 0 30px rgba(0,0,0,.9))}
.col__media:hover .col__marca{opacity:.16}
.col__body{padding:44px 48px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--linea);align-items:flex-start}
.col__eyebrow{font-size:10px;letter-spacing:.4em;color:var(--morado);font-weight:500;margin:0 0 22px}
.col__title{font-size:clamp(26px,3.4vw,36px);font-weight:300;letter-spacing:.02em;margin:0 0 20px;line-height:1.25;text-wrap:balance}
.col__text{font-size:14px;color:var(--tenue);margin:0 0 34px;max-width:44ch;line-height:1.75}

/* comunidad */
.com{padding:60px 0;border-top:1px solid var(--linea);text-align:center}
.com h2{font-size:clamp(22px,3vw,31px);font-weight:300;margin:0 0 16px;text-wrap:balance}
.com p{color:var(--tenue);font-size:14px;margin:0 auto 40px;max-width:44ch;line-height:1.75}
.form{display:flex;max-width:470px;margin:0 auto;border:1px solid rgba(255,255,255,.28)}
.form input{flex:1;background:none;border:0;color:var(--blanco);padding:16px 20px;font-family:inherit;font-size:13px;font-weight:300;letter-spacing:.04em;min-width:0}
.form input::placeholder{color:rgba(255,255,255,.32)}
.form input:focus{outline:none}
.form button{background:none;border:0;border-left:1px solid rgba(255,255,255,.28);color:var(--blanco);padding:16px 30px;cursor:pointer;font-size:11px;font-weight:500;letter-spacing:.28em;transition:background .3s ease}
.form button:hover{background:var(--morado)}
/* Alta al correo: el campo y el botón en una línea, y debajo el consentimiento.
   La casilla va sin marcar por obligación legal — un consentimiento premarcado
   no vale, y sin él no se pueden mandar correos comerciales. */
.form--alta{flex-direction:column;border:0;max-width:540px}
.form__linea{display:flex;border:1px solid rgba(255,255,255,.28);width:100%}
.form__ok{display:flex;align-items:flex-start;gap:10px;margin-top:16px;text-align:left;cursor:pointer}
.form__ok input{margin:2px 0 0;accent-color:var(--morado);width:15px;height:15px;flex:0 0 auto}
.form__ok span{font-size:11px;line-height:1.7;color:var(--apagado)}
.form__ok a{color:var(--morado);text-decoration:underline;text-underline-offset:2px}
/* cazabots: invisible para personas, irresistible para robots de spam */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Respuesta del alta. Se rellena por JS: vacía no ocupa nada. */
.com__caja p.alta-aviso{font-size:12px;line-height:1.7;margin:16px auto 0;max-width:540px;letter-spacing:.02em}
.alta-aviso:empty{display:none}
.com__caja p.alta-aviso--ok{color:var(--morado)}
.com__caja p.alta-aviso--mal{color:var(--blanco)}

/* cabecera de página */
.phead{padding:52px 0 40px;border-bottom:1px solid var(--linea)}
.phead__label{font-size:10px;letter-spacing:.4em;color:var(--morado);font-weight:500;margin:0 0 20px}
.phead h1{font-size:clamp(38px,6.5vw,72px);font-weight:300;margin:0;letter-spacing:.06em;line-height:1}
.phead p{margin:22px 0 0;color:var(--tenue);font-size:14px;max-width:52ch;line-height:1.75}

/* páginas legales */
.legal{padding:44px 0 76px;max-width:74ch}
.legal h2{font-size:16px;font-weight:500;letter-spacing:.14em;margin:52px 0 14px}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:13.5px;line-height:1.85;color:var(--tenue);margin:0 0 14px;font-weight:300}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal li{font-size:13.5px;line-height:1.85;color:var(--tenue);margin-bottom:8px;font-weight:300}
.legal strong{color:var(--blanco);font-weight:500}
.legal a{color:var(--morado);text-decoration:underline;text-underline-offset:3px}
.legal__fecha{font-size:11px;letter-spacing:.16em;color:var(--apagado);margin-bottom:44px}
/* La tabla de almacenamiento se lee mal en móvil, así que en pantalla estrecha
   cada fila se convierte en una ficha con sus etiquetas delante. */
.legal__tabla{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:12.5px}
.legal__tabla th,.legal__tabla td{border:1px solid var(--linea);padding:12px 14px;text-align:left;vertical-align:top;line-height:1.7}
.legal__tabla th{font-size:9.5px;letter-spacing:.22em;font-weight:600;color:var(--blanco);background:var(--panel)}
.legal__tabla td{color:var(--tenue);font-weight:300}
.legal__tabla code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--blanco)}
.legal__caja{border:1px solid var(--linea);background:var(--panel);padding:26px 28px;margin:34px 0}
.legal__caja p{margin-bottom:18px}
.legal__caja p:last-child{margin-bottom:0}
.legal__aviso{border-left:2px solid var(--morado);padding-left:18px;margin:26px 0}
/* La página de marca es la única que no es legal: respira más y las frases que
   cargan el peso van a mayor tamaño, no en negrita dentro del párrafo. */
.legal--marca h2{margin-top:60px}
.marca__entrada{font-size:clamp(17px,2.4vw,22px);line-height:1.6;color:var(--blanco);font-weight:300;margin:0 0 12px;text-wrap:balance}
.marca__cierre{font-size:clamp(15px,2vw,19px);line-height:1.6;color:var(--blanco);font-weight:300;border-top:1px solid var(--linea);padding-top:34px;margin-top:56px}
.legal--marca .legal__tabla th{white-space:nowrap}
/* Los botones de WhatsApp fuera de las fichas de producto: en el modal ocupan
   todo el ancho y en las secciones van centrados y sueltos. */
.btn--full{width:100%}
.com__wa,.pronto__wa{display:inline-flex;margin:0 auto;padding:15px 34px}
.pronto__wa{margin-top:8px}

/* filtros */
.filtros{display:flex;gap:8px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid var(--linea-sutil)}
.filtro{border:1px solid var(--linea);padding:9px 22px;font-size:10.5px;font-weight:500;letter-spacing:.24em;color:var(--tenue);background:none;cursor:pointer;transition:border-color .25s ease,color .25s ease}
.filtro:hover{color:var(--blanco);border-color:rgba(255,255,255,.3)}
.filtro[aria-pressed="true"]{color:var(--blanco);border-color:var(--morado)}

/* rejilla de producto */
/* mismo motivo que en .cats__grid: aquí además el filtro de flor/hash oculta
   fichas, así que casi siempre sobran celdas en la última fila */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--negro);border:1px solid var(--linea)}
.rejilla .prod{box-shadow:0 0 0 1px var(--linea)}
.prod{background:var(--negro);display:flex;flex-direction:column;transition:background .35s ease;text-align:left}
.prod:hover{background:var(--panel)}
.prod[hidden]{display:none}
.prod__bag{aspect-ratio:1/1.06;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:30px 24px;border-bottom:1px solid var(--linea-sutil)}
.prod__sym{width:44px;opacity:.75}
.prod__premio{
  position:absolute;top:0;left:0;right:0;
  background:var(--morado);color:var(--blanco);
  font-size:8px;letter-spacing:.22em;font-weight:600;
  text-align:center;padding:6px 8px;line-height:1.4;
}
/* Distintivo de categoria: lo llevan las fichas que no son ni flor ni hash
   (moleculas CBZ, aceites) para que se vea de un vistazo que son otra cosa.
   Va antes de .prod__sobre en el HTML, asi que la capa de hover lo tapa sola
   sin necesidad de z-index. */
.prod__cat{
  position:absolute;top:8px;left:8px;
  border:1px solid var(--morado);background:rgba(0,0,0,.78);
  color:var(--morado);
  font-size:8px;letter-spacing:.2em;font-weight:600;
  padding:5px 8px;line-height:1;
}
/* Sin stock. La banda es negra a proposito: el morado es el PROXIMAMENTE de
   AURE, que es una promesa, y esto es justo lo contrario. */
.prod__stock{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:rgba(0,0,0,.92);border-top:1px solid var(--linea);
  color:var(--blanco);
  font-size:8.5px;letter-spacing:.28em;font-weight:600;
  text-align:center;padding:8px;line-height:1.4;
}
.prod--agotado .prod__foto img{opacity:.42;filter:grayscale(.55)}
.tramo[disabled]{opacity:.34;cursor:not-allowed;text-decoration:line-through}
.tramo[disabled]:hover{color:var(--tenue);border-color:var(--linea)}
.prod__aviso{margin:8px 0 0;font-size:9.5px;letter-spacing:.12em;color:var(--apagado)}

/* Selector de variedad: mismos botones que los gramajes, otra fila. */
.prod__label{margin:14px 0 6px;font-size:8.5px;letter-spacing:.28em;color:var(--apagado);font-weight:600}
.prod__variedades{display:flex;gap:5px;margin:0;flex-wrap:wrap}
.tramo--var{letter-spacing:.1em}
/* El porcentaje va pegado al nombre pero mas apagado: manda la variedad, el
   dato es el apoyo. Cuando el boton esta elegido sube al blanco con el resto. */
.tramo__pct{margin-left:2px;color:var(--apagado);font-variant-numeric:tabular-nums}
.tramo[aria-pressed="true"] .tramo__pct{color:var(--tenue)}

.prod__bag{position:relative}
.prod__sticker{width:100%;max-width:190px;border:1px solid var(--morado);background:rgba(138,43,226,.09);padding:15px 16px;text-align:center}
.prod__num{display:block;font-size:9.5px;letter-spacing:.34em;color:var(--morado);font-weight:600;margin-bottom:7px;font-variant-numeric:tabular-nums}
.prod__nom{display:block;font-size:12.5px;font-weight:500;letter-spacing:.16em;line-height:1.35}
.prod__meta{display:block;margin-top:7px;font-size:9.5px;letter-spacing:.2em;color:var(--tenue)}
.prod__foto{aspect-ratio:1/1;background:var(--panel);overflow:hidden;border-bottom:1px solid var(--linea-sutil);position:relative}
.prod__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.prod__foto:hover img{transform:scale(1.03)}
/* Pegatina AURE sobre la foto: reproduce el etiquetado de la bolsa real
   y mantiene la diferencia visual frente a las fichas de partner. */
.prod__foto .prod__sticker{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  width:calc(100% - 28px);max-width:200px;
  background:rgba(0,0,0,.66);backdrop-filter:blur(7px);
  border:1px solid var(--morado);padding:11px 12px;
}
/* El símbolo va a la esquina, no centrado: el cogollo también está centrado y
   parecía cortarle la punta. En esquina lee como sello, no como interferencia. */
/* OJO: .prod__foto img le mete height:100% y object-fit:cover a cualquier
   imagen de la ficha, símbolo incluido. Hay que anularlo o la flor sale
   estirada a toda la altura y recortada a una tira. */
.prod__foto .prod__sym{
  position:absolute;top:10px;left:10px;transform:none;
  width:50px;height:auto;object-fit:contain;opacity:1;
}
.prod__foto:hover .prod__sym{transform:none}
/* si la ficha lleva la banda del premio, el sello baja para no pisarla */
.prod__foto:has(.prod__premio) .prod__sym{top:36px}
/* Banda de estado: la lleva la ficha AURE que aun no esta a la venta. Va abajo,
   pegada al borde de la foto, para no pisar el sello de la esquina ni la
   banda de premio, y justo donde el ojo va a mirar el precio. */
.prod__pronto{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:var(--morado);color:var(--blanco);
  font-size:8.5px;letter-spacing:.3em;font-weight:600;
  text-align:center;padding:8px;line-height:1.4;
}
/* la pegatina AURE sube lo justo para dejarle sitio */
.prod__foto:has(.prod__pronto) .prod__sticker,
.prod__foto:has(.prod__stock) .prod__sticker{bottom:44px}
.prod__info{padding:22px 24px 26px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod__info h3{font-size:13.5px;font-weight:500;letter-spacing:.14em;margin:0}
.prod__desc{font-size:12px;color:var(--tenue);margin:0}
.prod__tramos{display:flex;gap:5px;margin:12px 0 0;flex-wrap:wrap}
.tramo{
  border:1px solid var(--linea);padding:4px 10px;background:none;
  font-size:9.5px;letter-spacing:.14em;color:var(--tenue);cursor:pointer;
  font-variant-numeric:tabular-nums;transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.tramo:hover{color:var(--blanco);border-color:rgba(255,255,255,.34)}
.tramo[aria-pressed="true"]{color:var(--blanco);border-color:var(--morado);background:rgba(138,43,226,.14)}
/* Botón de pedido por WhatsApp. Provisional: hace de carrito hasta que haya
   pasarela de pago. El enlace se recompone al cambiar de gramaje. */
/* margin-top:auto lo empuja al fondo de la ficha: las descripciones tienen
   distinto numero de lineas y si no, los botones bailan de altura en la fila. */
.prod__wa{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--morado);color:var(--blanco);border:1px solid var(--morado);
  padding:11px 14px;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-align:center;
  transition:background .3s ease,color .3s ease;
}
.prod__wa:hover{background:transparent;color:var(--morado)}
.prod__wa svg{width:14px;height:14px;fill:currentColor;flex:0 0 auto}
/* En las fichas AURE no se vende todavía: ahí el botón solo recoge interesados,
   así que va discreto para no competir con lo que sí está a la venta. */
.prod__wa--aviso{background:transparent;color:var(--blanco);border-color:var(--linea)}
.prod__wa--aviso:hover{background:transparent;border-color:var(--morado);color:var(--morado)}
.prod__precio{margin:12px 0 8px;font-size:15px;font-weight:400;letter-spacing:.04em;font-variant-numeric:tabular-nums}

/* partners */
.partners{padding:64px 0 0;border-top:1px solid var(--linea);margin-top:64px}
.partners__intro{max-width:56ch;color:var(--tenue);font-size:13.5px;margin:0 0 48px;line-height:1.8}
.rejilla--partner{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.partner__marca{font-size:9px;letter-spacing:.3em;color:var(--apagado);font-weight:600;margin:0 0 4px}
.rejilla--partner .prod__info h3{font-size:12.5px}
.rejilla--partner .prod__precio{font-size:13.5px;color:var(--tenue)}

/* próximamente */
.pronto{min-height:34vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 0}
.pronto__sym{width:56px;opacity:.2;margin-bottom:40px}
.pronto__estado{font-size:10px;letter-spacing:.4em;color:var(--morado);font-weight:500;margin:0 0 24px}
.pronto p{color:var(--tenue);font-size:14px;max-width:44ch;margin:0 auto 44px;line-height:1.8}

/* microcopy y redes bajo el alta de correo */
.com__nota{font-size:11px;letter-spacing:.06em;color:var(--apagado);margin:16px auto 0}
/* El botón de alta quedaba suelto en mitad del negro. Va dentro de un panel
   con filo morado, el símbolo arriba y el wordmark de marca de agua al fondo:
   así el bloque tiene cuerpo en vez de ser un botón flotando. */
.com__caja{
  position:relative;overflow:hidden;
  max-width:660px;margin:0 auto;padding:46px 40px 42px;
  background:var(--panel);border:1px solid rgba(138,43,226,.42);
}
.com__caja::after{
  content:"";position:absolute;right:-34px;bottom:-22px;width:250px;height:100px;
  background:url("/assets/aure-wordmark-limpio.png") no-repeat center/contain;opacity:.055;pointer-events:none;
}
.com__caja > *{position:relative;z-index:1}
.com__sym{width:50px;margin:0 auto 18px;opacity:.9}
.com__label{font-size:9.5px;letter-spacing:.4em;color:var(--morado);font-weight:600;margin:0 0 14px}
.com__caja h2{margin-bottom:14px}
.com__caja p{margin-bottom:28px}
.social{display:flex;gap:12px;justify-content:center;margin-top:48px;flex-wrap:wrap}
.social a,.social span.pendiente{
  display:inline-flex;align-items:center;gap:11px;
  border:1px solid var(--linea);padding:13px 22px;
  font-size:10.5px;letter-spacing:.22em;font-weight:500;color:var(--tenue);
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.social a:hover{color:var(--blanco);border-color:var(--morado);background:rgba(138,43,226,.12)}
.social svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.social span.pendiente{opacity:.32;cursor:default}

/* reseñas de Google */
.res{padding:48px 0 0;border-top:1px solid var(--linea);margin-top:48px}
.res__panel{display:grid;grid-template-columns:.85fr 2.15fr;gap:1px;background:var(--linea);border:1px solid var(--linea);margin-top:8px}
/* sin textos de reseña el panel va a una sola banda horizontal */
.res__panel--solo{grid-template-columns:1fr}
.res__panel--solo .res__nota{flex-direction:row;align-items:center;gap:30px;flex-wrap:wrap;padding:38px}
.res__panel--solo .res__enlace{margin-left:auto;align-self:center}
.res__nota{background:var(--negro);padding:44px 38px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.res__cifra{font-size:58px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.res__estrellas{color:var(--morado);letter-spacing:.2em;font-size:15px;line-height:1}
.res__cuenta{font-size:11.5px;color:var(--tenue);letter-spacing:.05em;line-height:1.6}
.res__enlace{margin-top:6px;font-size:10px;letter-spacing:.24em;font-weight:500;color:var(--morado);border-bottom:1px solid transparent;align-self:flex-start;transition:border-color .25s ease}
.res__enlace:hover{border-color:var(--morado)}
.res__lista{background:var(--negro);padding:38px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}
.res__item p{margin:0 0 14px;font-size:13px;color:rgba(255,255,255,.76);line-height:1.75}
.res__autor{font-size:9.5px;letter-spacing:.26em;color:var(--apagado);font-weight:600}

/* descripción al pasar el cursor sobre la foto */
.prod__sobre{
  position:absolute;inset:0;padding:22px 18px;
  display:flex;flex-direction:column;justify-content:safe center;gap:12px;
  background:rgba(0,0,0,.92);opacity:0;pointer-events:none;
  transition:opacity .35s ease;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.28) transparent;
}
/* Con el raton encima se puede bajar: los textos largos ya no se cortan. */
.prod__foto:hover .prod__sobre{pointer-events:auto}
.prod__sobre::-webkit-scrollbar{width:4px}
.prod__sobre::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28)}
.prod__completa{display:none}
.prod__sobre p+p{margin-top:11px}
.prod__sobre p{margin:0;font-size:11px;line-height:1.7;color:rgba(255,255,255,.86);font-weight:300}
.prod__lupa{font-size:8.5px;letter-spacing:.26em;color:var(--morado);font-weight:600}
.prod__foto:hover .prod__sobre{opacity:1}

/* ampliación al doble clic */
.lupa{position:fixed;inset:0;z-index:420;background:rgba(0,0,0,.96);backdrop-filter:blur(8px);display:grid;place-items:center;padding:36px 24px}
.lupa[hidden]{display:none}
.lupa__caja{margin:0;max-width:640px;width:100%;display:flex;flex-direction:column;gap:22px;max-height:calc(100vh - 72px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
.lupa__caja::-webkit-scrollbar{width:5px}
.lupa__caja::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28)}
.lupa__caja img{width:100%;max-height:52vh;object-fit:contain;border:1px solid var(--linea);flex:none}
.lupa__caja h3{margin:0 0 10px;font-size:15px;font-weight:500;letter-spacing:.16em}
.lupa__caja p+p{margin-top:13px}
.lupa__caja p{margin:0;font-size:13px;line-height:1.8;color:var(--tenue);font-weight:300}
.lupa__x{position:absolute;top:18px;right:22px;background:none;border:0;color:var(--apagado);font-size:30px;line-height:1;cursor:pointer;padding:6px 12px}
.lupa__x:hover{color:var(--blanco)}

/* ventanas: edad, cookies y alta */
.modal{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.93);backdrop-filter:blur(6px)}
.modal[hidden]{display:none}
.modal__caja{width:100%;max-width:460px;border:1px solid var(--linea);background:var(--negro);padding:52px 44px;text-align:center;position:relative}
.modal__sym{width:52px;margin:0 auto 26px;opacity:.9}
.modal__label{font-size:10px;letter-spacing:.4em;color:var(--morado);font-weight:500;margin:0 0 18px}
.modal__caja h2{font-size:clamp(21px,3.4vw,27px);font-weight:300;margin:0 0 16px;line-height:1.3;text-wrap:balance}
.modal__txt{font-size:13px;color:var(--tenue);line-height:1.75;margin:0 0 30px}
.modal__botones{display:flex;flex-direction:column;gap:10px}
.btn--full{width:100%;text-align:center}
.btn--plano{width:100%;border-color:transparent;color:var(--apagado);padding:12px}
.btn--plano:hover{background:none;border-color:var(--linea);color:var(--tenue)}
.modal__x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--apagado);font-size:22px;line-height:1;cursor:pointer;padding:6px 10px}
.modal__x:hover{color:var(--blanco)}
.modal__campos{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.modal__campos input{background:none;border:1px solid rgba(255,255,255,.28);color:var(--blanco);padding:15px 18px;font-family:inherit;font-size:13px;font-weight:300;letter-spacing:.04em;width:100%}
.modal__campos input::placeholder{color:rgba(255,255,255,.32)}
.modal__campos input:focus{outline:none;border-color:var(--morado)}
.modal__pie{font-size:10.5px;color:var(--apagado);letter-spacing:.05em;margin:18px 0 0;line-height:1.6}

.cookies{position:fixed;left:0;right:0;bottom:0;z-index:380;background:rgba(0,0,0,.96);border-top:1px solid var(--linea);backdrop-filter:blur(10px)}
.cookies[hidden]{display:none}
.cookies__inner{max-width:var(--max);margin:0 auto;padding:22px 32px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cookies p{margin:0;font-size:12px;color:var(--tenue);line-height:1.7;flex:1;min-width:260px}
.cookies a{color:var(--morado);border-bottom:1px solid transparent}
.cookies a:hover{border-color:var(--morado)}
.cookies__botones{display:flex;gap:10px;margin-left:auto}
/* aceptar y rechazar con el mismo peso visual: exigencia legal, no capricho */
.btn--min{padding:12px 26px;font-size:10px;letter-spacing:.24em}

/* pie */
.foot{border-top:1px solid var(--linea);padding:48px 0 36px;margin-top:76px}
.foot__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:44px}
.foot__sym{width:34px;margin-bottom:20px}
.foot__tag{font-size:11px;letter-spacing:.34em;color:var(--morado);font-weight:500;margin:0}
.foot h4{font-size:10px;letter-spacing:.3em;font-weight:500;margin:0 0 18px;color:rgba(255,255,255,.55)}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.foot li{font-size:12.5px;color:var(--tenue)}
/* los enlaces del pie que ya llevan a algún sitio se distinguen de los que
   todavía son texto muerto */
.foot li a{color:rgba(255,255,255,.62);transition:color .25s ease}
.foot li a:hover{color:var(--morado)}
.foot__bar{margin-top:56px;padding-top:26px;border-top:1px solid var(--linea);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11px;color:rgba(255,255,255,.32);letter-spacing:.06em}
.aviso{margin-top:22px;font-size:10.5px;line-height:1.7;color:rgba(255,255,255,.26);max-width:78ch}

/* ---- LUZ LED ----------------------------------------------------------
   Todo lo que se puede pulsar se enciende en morado. Va al final del CSS a
   propósito: cada botón trae ya su propia regla de transition y, más arriba,
   estas se perdían y el resplandor aparecía de golpe en vez de encenderse.

   El hover va dentro de @media (hover:hover) también a propósito: en pantalla
   táctil el hover se queda pegado después de tocar y el botón se quedaría
   encendido para siempre. El :active vale en ratón y en dedo, y es el que da
   el chispazo al pulsar. */
.btn,.form button,.prod__wa,.glovo__cta,.tramo,.filtro,.social a,.res__enlace,.modal__x,.lupa__x{
  transition:box-shadow .3s ease,border-color .3s ease,background .3s ease,color .3s ease,transform .12s ease;
}
@media (hover:hover){
  .btn:hover,.form button:hover,.prod__wa:hover,.tramo:hover,.filtro:hover,.social a:hover,.res__enlace:hover,
  .glovo__inner:hover .glovo__cta,.modal__x:hover,.lupa__x:hover{
    box-shadow:var(--led);
  }
}
.btn:active,.form button:active,.prod__wa:active,.tramo:active,.filtro:active,.social a:active,.res__enlace:active,
.glovo__inner:active .glovo__cta,.modal__x:active,.lupa__x:active{
  box-shadow:var(--led-on);
  transform:translateY(1px) scale(.985);
}
/* el gramaje elegido se queda encendido: marca la selección sin otro color */
.tramo[aria-pressed="true"],.filtro[aria-pressed="true"]{
  box-shadow:0 0 0 1px var(--morado),0 0 14px rgba(138,43,226,.34);
}
/* el foco por teclado enciende igual, para que se vea por dónde vas */
.btn:focus-visible,.prod__wa:focus-visible,.tramo:focus-visible,.filtro:focus-visible,
.social a:focus-visible,.res__enlace:focus-visible{box-shadow:var(--led-on)}
@media (prefers-reduced-motion:reduce){
  .btn:active,.prod__wa:active,.tramo:active,.filtro:active,.social a:active,
  .res__enlace:active,.modal__x:active,.lupa__x:active{transform:none}
}

/* Menú de arriba: aquí no hay caja que iluminar, solo la raya morada. Así que
   es la raya la que se enciende, y el texto coge un halo del mismo morado. */
.nav__links button::after{transition:transform .3s ease,box-shadow .3s ease}
@media (hover:hover){
  .nav__links button:hover{text-shadow:0 0 16px rgba(138,43,226,.6)}
  .nav__links button:hover::after{box-shadow:0 0 9px 1px rgba(138,43,226,.95)}
}
.nav__links button:active{text-shadow:0 0 20px rgba(138,43,226,.9)}
.nav__links button:active::after{box-shadow:0 0 14px 2px rgba(138,43,226,1)}
/* la sección en la que estás se queda encendida, no solo subrayada */
.nav__links button[aria-current="page"]::after{box-shadow:0 0 9px 1px rgba(138,43,226,.75)}
.nav__links button:focus-visible::after{box-shadow:0 0 14px 2px rgba(138,43,226,1)}

/* Las tarjetas de colección y el mosaico también son botones: se encienden por
   el borde, sin halo interior, porque son superficies grandes. */
.cat,.col__media{transition:background .35s ease,box-shadow .3s ease}
@media (hover:hover){
  .cat:hover,.col__media:hover{box-shadow:0 0 0 1px var(--morado),0 0 30px rgba(138,43,226,.34)}
}
.cat:active,.col__media:active{box-shadow:0 0 0 1px var(--morado),0 0 42px rgba(138,43,226,.62)}

/* El recuadro morado que salía al tocar era el marco de foco del navegador:
   plano, cuadrado y dibujado por encima del LED, así que lo tapaba. Aquí el
   resplandor ya indica el foco de sobra, así que se quita el marco y se deja
   encendido el propio botón. El outline general sigue para el resto de la web. */
.cat:focus-visible,.col__media:focus-visible,.btn:focus-visible,.prod__wa:focus-visible,
.tramo:focus-visible,.filtro:focus-visible,.social a:focus-visible,.res__enlace:focus-visible{
  outline:none;
}
.cat:focus-visible,.col__media:focus-visible{box-shadow:0 0 0 1px var(--morado),0 0 42px rgba(138,43,226,.62)}

/* El LED sí estaba, pero no se veía "alrededor": en una rejilla las celdas se
   pintan en orden y cada tarjeta lleva fondo negro opaco a 1 px de la vecina,
   así que la de al lado le borraba el resplandor por ese costado. Al encenderse,
   la tarjeta sube de plano y el halo se ve entero por los cuatro lados. */
.cat:hover,.cat:active,.cat:focus-visible,
.col__media:hover,.col__media:active,.col__media:focus-visible{z-index:4}

/* Un toque en el móvil dura una décima de segundo; con la transición de .3 s el
   halo solo llegaba a un tercio de intensidad antes de soltar y apenas se veía.
   Al pulsar enciende de golpe, y es al soltar cuando se apaga despacio. */
.cat:active,.col__media:active,.btn:active,.form button:active,.prod__wa:active,.tramo:active,.filtro:active,
.social a:active,.res__enlace:active,.modal__x:active,.lupa__x:active{
  transition:box-shadow 0s,transform .12s ease;
}
/* y fuera el destello gris que Android pinta sobre lo que tocas */
.cat,.col__media,.btn,.prod__wa,.tramo,.filtro,.social a,.nav__links button,.glovo__inner{
  -webkit-tap-highlight-color:transparent;
}

@media (max-width:900px){
  .col__panel{grid-template-columns:1fr}
  .col__body{border-left:0;border-top:1px solid var(--linea);padding:32px 24px}
  /* apilado: las celdas mandan su propia altura para no quedar aplastadas */
  .col__media{min-height:0;grid-auto-rows:auto}
  .col__cel{aspect-ratio:1/1}
  /* sin hover en táctil: la flor se queda, así que el velo va más suave */
  .col__marca{background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 40%,rgba(0,0,0,0) 66%)}
  .col__marca img{width:34%;max-width:132px}
  .res__panel{grid-template-columns:1fr}
  .res__lista{grid-template-columns:1fr;padding:32px 28px}
  .res__panel--solo .res__enlace{margin-left:0}
  .foot__grid{grid-template-columns:1fr 1fr;gap:36px}
  .cats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .wrap,.nav__inner{padding:0 22px}
  /* en movil el boton pasa a linea completa: es el destino mas probable aqui */
  .glovo{margin-bottom:36px}
  .glovo__inner{gap:18px}
  .glovo__cta{width:100%;text-align:center}
  .nav__links{display:none;position:absolute;top:96px;left:0;right:0;background:#000;flex-direction:column;gap:0;border-bottom:1px solid var(--linea);padding:8px 22px 20px}
  .nav__links.open{display:flex}
  .nav__links button,.nav__links>a{padding:15px 0;border-bottom:1px solid var(--linea-sutil);text-align:left}
  /* El desplegable es cosa de raton: en movil no aparece de ninguna manera y
     CBD se comporta como el resto de enlaces del menu. */
  .nav__desp{width:100%}
  .nav__desp>a{display:block;width:100%;padding:15px 0;border-bottom:1px solid var(--linea-sutil)}
  .nav__desp::after{display:none}
  .nav__desp:hover .nav__menu,
  .nav__desp:focus-within .nav__menu,
  .nav__menu{display:none}
  .nav__toggle{display:block}
  .nav__cart{display:none}
  .hero{min-height:0;padding:32px 22px 28px}
  .cats{padding:36px 0 44px}
  .cat{padding:26px 16px 22px;min-height:0;gap:10px}
  .cat__name{font-size:12.5px;letter-spacing:.14em}
  .cat__desc{font-size:11.5px}
  .cat__state{font-size:9px;letter-spacing:.2em}
  /* Móvil: el interior de la bolsa se reduce para que la tarjeta siga siendo cuadrada.
     Sin esto el contenido desbordaba el aspect-ratio y las fichas salían descuadradas. */
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod__bag{gap:14px;padding:16px 12px}
  .prod__sym{width:30px}
  .prod__sticker{max-width:100%;padding:9px 7px}
  .prod__foto .prod__sticker{bottom:9px;width:calc(100% - 18px);padding:8px 6px}
  .prod__foto .prod__sym{top:7px;left:7px;width:36px}
  .prod__foto:has(.prod__premio) .prod__sym{top:28px}
  .prod__num{font-size:8px;letter-spacing:.26em;margin-bottom:4px}
  .prod__nom{font-size:9.5px;letter-spacing:.08em;line-height:1.3}
  .prod__meta{font-size:7.5px;letter-spacing:.1em;margin-top:4px}
  .prod__pronto,.prod__stock{font-size:7px;letter-spacing:.2em;padding:6px 4px}
  .prod__foto:has(.prod__pronto) .prod__sticker{bottom:32px}
  .prod__info{padding:16px 13px 20px}
  .prod__info h3{font-size:11.5px;letter-spacing:.1em}
  .prod__desc{font-size:10.5px}
  .tramo{padding:4px 8px;font-size:9px;letter-spacing:.08em}
  .prod__tramos{gap:4px}
  .prod__precio{font-size:13.5px}
  .partners{padding-top:44px;margin-top:44px}
  .foot__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ============ BLOG ============
   Las paginas del blog son HTML de verdad, una por articulo, con URL propia y
   las fotos como archivos sueltos. No van dentro del index: si fueran parte del
   archivo unico, cada visitante se descargaria todas las fotos de todos los
   articulos aunque no leyera ninguno, y ademas Google no tendria nada que
   indexar mas alla de la portada. */
.blog{padding:56px 0 72px}
.blog__head{max-width:760px;margin:0 0 52px}
.blog__label{font-size:10px;letter-spacing:.4em;color:var(--morado);font-weight:500;margin:0 0 18px}
.blog__head h1{font-size:clamp(30px,5vw,52px);font-weight:200;letter-spacing:.01em;margin:0 0 18px;line-height:1.12;text-wrap:balance}
.blog__head p{font-size:15px;color:var(--tenue);line-height:1.75;margin:0;max-width:56ch}

/* Listado */
.blog__lista{display:grid;gap:1px;background:var(--negro);border-top:1px solid var(--linea)}
.entrada{display:grid;grid-template-columns:300px 1fr;gap:34px;padding:32px 0;border-bottom:1px solid var(--linea);align-items:center}
.entrada__foto{aspect-ratio:3/2;overflow:hidden;background:var(--panel)}
.entrada__foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,opacity .35s ease}
.entrada:hover .entrada__foto img{transform:scale(1.04);opacity:.85}
.entrada__fecha{font-size:10px;letter-spacing:.3em;color:var(--apagado);margin:0 0 12px;font-weight:500}
.entrada h2{font-size:clamp(20px,2.6vw,27px);font-weight:300;margin:0 0 12px;line-height:1.3;text-wrap:balance}
.entrada h2 a{color:var(--blanco);text-decoration:none}
.entrada h2 a:hover{color:var(--morado)}
.entrada p{font-size:14px;color:var(--tenue);line-height:1.75;margin:0 0 16px;max-width:56ch}
.entrada__leer{font-size:10.5px;letter-spacing:.28em;color:var(--morado);font-weight:500;text-decoration:none}
.entrada__leer:hover{text-decoration:underline;text-underline-offset:4px}

/* Articulo */
.art{max-width:740px;margin:0 auto;padding:52px 0 76px}
.art__fecha{font-size:10px;letter-spacing:.3em;color:var(--apagado);font-weight:500;margin:0 0 20px}
.art h1{font-size:clamp(28px,4.6vw,46px);font-weight:200;letter-spacing:.01em;line-height:1.14;margin:0 0 22px;text-wrap:balance}
.art__pie{font-size:14.5px;color:var(--tenue);line-height:1.8;margin:0 0 40px;font-weight:300}
.art__hero{margin:0 0 46px;background:var(--panel)}
.art__hero img{width:100%;height:auto;display:block}
.art h2{font-size:clamp(19px,2.4vw,24px);font-weight:400;letter-spacing:.01em;margin:46px 0 16px;line-height:1.3}
.art p{font-size:15px;line-height:1.85;color:rgba(255,255,255,.82);margin:0 0 20px;font-weight:300}
.art p strong{color:var(--blanco);font-weight:500}
.art figure{margin:38px 0}
.art figure img{width:100%;height:auto;display:block;background:var(--panel)}
.art figcaption{font-size:11.5px;color:var(--apagado);margin-top:12px;line-height:1.6}
.art__cita{border-left:2px solid var(--morado);padding:4px 0 4px 24px;margin:34px 0;font-size:clamp(16px,2.2vw,20px);font-weight:300;line-height:1.55;color:var(--blanco)}
.art__cierre{border-top:1px solid var(--linea);margin-top:52px;padding-top:32px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.art__volver{font-size:10.5px;letter-spacing:.28em;color:var(--apagado);text-decoration:none;font-weight:500}
.art__volver:hover{color:var(--morado)}

@media (max-width:900px){
  .entrada{grid-template-columns:1fr;gap:20px;padding:26px 0}
  .art{padding:34px 0 56px}
  .art__hero{margin-bottom:32px}
}

/* Bloque "donde estamos" y preguntas frecuentes de /cbd.
   Viven aqui y no en la plantilla porque son exclusivos de esa pagina, que se
   sirve con esta hoja. La portada no los usa: alli el manual pide marca, no
   ficha de tienda. */
.local{padding:64px 0 8px;border-top:1px solid var(--linea);margin-top:64px}
.local__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px}
/* Las lineas las dibuja cada celda con su sombra, no el fondo del contenedor:
   auto-fit deja una pista vacia de 0px al final y con fondo se veia una raya
   suelta pegada al borde derecho. Mismo criterio que .cats__grid. */
.local__caja{box-shadow:0 0 0 1px var(--linea-sutil)}
.local__caja{background:var(--negro);padding:34px 28px 32px;display:flex;flex-direction:column;gap:14px}
.local__caja h2{font-size:15px;font-weight:500;letter-spacing:.18em;margin:0;text-transform:uppercase}
.local__caja p{font-size:13.5px;line-height:1.75;color:var(--tenue);margin:0;font-weight:300}
.local__dir strong{color:var(--blanco);font-weight:500;letter-spacing:.02em}
.local__horario{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea-sutil)}
.local__horario li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--linea-sutil);font-size:12.5px;color:var(--tenue)}
.local__horario li span:last-child{color:var(--blanco);white-space:nowrap}
.local__cta{margin-top:auto;align-self:flex-start;border:1px solid rgba(255,255,255,.28);padding:13px 30px;font-size:10.5px;font-weight:500;letter-spacing:.26em;color:var(--blanco);transition:border-color .3s ease,background .3s ease}
.local__cta:hover{border-color:var(--morado);background:var(--morado)}
.local__cta svg{display:none}

.faq{padding:64px 0 76px}
.faq__lista{border-top:1px solid var(--linea)}
.faq__item{border-bottom:1px solid var(--linea)}
.faq__item summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font-size:15px;font-weight:400;letter-spacing:.01em;color:var(--blanco)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--morado);font-size:19px;font-weight:300;line-height:1}
.faq__item[open] summary::after{content:"–"}
.faq__item summary:hover{color:var(--morado)}
.faq__item p{font-size:14px;line-height:1.85;color:var(--tenue);margin:0 0 24px;max-width:70ch;font-weight:300}

@media (max-width:900px){
  .local{padding-top:44px;margin-top:44px}
  .faq{padding:44px 0 56px}
}

/* Enlaces dentro del texto de un articulo. La hoja del sitio quita color y
   subrayado a todos los enlaces (a{color:inherit;text-decoration:none}), asi
   que dentro de un parrafo quedaban invisibles: se leian como texto normal. */
.art p a{color:var(--blanco);border-bottom:1px solid var(--morado);transition:color .25s ease}
.art p a:hover{color:var(--morado)}

/* Horario partido: "10:00-14:00 · 17:00-21:30" no cabe al lado del dia en una
   caja de movil y, con nowrap, se salia por la derecha. Asi las horas bajan a
   la linea de abajo cuando no caben, y en escritorio siguen al lado. */
.local__horario li{flex-wrap:wrap;row-gap:2px}