/* ============================================================
   LUCENTTIA · Tienda virtual
   Paleta: Vino #5C2D3D · Beige #D1C0A9 · Crema #F7F1E4
   ============================================================ */
:root{
  --vino:#5C2D3D;
  --vino-dark:#3a1d28;
  --vino-soft:#7a4456;
  --beige:#D1C0A9;
  --crema:#F7F1E4;
  --oro:#b8945f;
  --oro-claro:#cdb085;
  /* --oro-texto es el dorado para TEXTO. El --oro de la marca sobre el crema
     da 2,51:1 y el minimo legible es 4,5:1, asi que se usa solo para bordes,
     iconos y adornos. Este otro da 4,77:1 sobre crema y 5,37:1 sobre blanco
     y se sigue leyendo como dorado. */
  --oro-texto:#856534;
  --oro-boton:#8a6a33;        /* degradado del boton dorado, con letra blanca */
  --oro-boton-hondo:#7d5f2d;
  --tinta:#2a1820;
  /* El gris anterior (#8a7d80) daba 3,50:1. Este da 5,05:1. */
  --gris:#6f6467;
  --linea:#e7ddcf;
  --blanco:#ffffff;

  /* Aqua de marca. Es un tono CLARO: sirve de fondo con letra vino encima
     (7,43:1), nunca de letra sobre crema (1,32:1, invisible). */
  --aqua:#9CE0DB;
  --aqua-hondo:#5FB8B1;
  --aqua-suave:#E4F7F5;

  /* Una sola tipografia en toda la tienda (28 de septiembre).
     Se dejan los tres nombres apuntando a la misma para no tener que tocar
     las 58 reglas que los usan; cambiar la letra es cambiar esta linea. */
  --letra:'Poppins', system-ui, -apple-system, sans-serif;
  --serif:var(--letra);
  --deco:var(--letra);
  --sans:var(--letra);

  --radio:14px;
  --sombra:0 14px 40px rgba(58,29,40,.10);
  --sombra-sm:0 6px 18px rgba(58,29,40,.08);
  --max:1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip y NO hidden. "hidden" convierte al html en contenedor de
   desplazamiento y eso le rompe el position:sticky a la barra de arriba, que
   ya nos costo un arreglo. "clip" recorta sin crear ese contenedor.
   Es la red de seguridad: si algun dia un elemento se pasa de ancho, la
   pagina no se puede correr de lado en el celular. */
html{scroll-behavior:smooth;overflow-x:clip}

/* ---------- Foco de teclado ----------
   Quien navega con Tab tiene que VER donde esta parado. Varias reglas de mas
   abajo hacen outline:none y lo reemplazan solo por un borde dorado claro,
   que casi no se distingue. Esto pone un anillo vinotinto visible sobre
   cualquier fondo de la tienda y solo aparece al navegar con teclado, no al
   hacer clic con el mouse. */
:focus-visible{outline:3px solid var(--vino);outline-offset:2px;border-radius:4px}
.header__search-input:focus-visible,
.contact__form input:focus-visible,
.contact__form textarea:focus-visible,
.campo input:focus-visible,
.campo textarea:focus-visible,
.campo select:focus-visible,
.personaliza .campo input:focus-visible,
.personaliza .campo select:focus-visible,
.personaliza .campo textarea:focus-visible{outline:3px solid var(--vino);outline-offset:1px}
body{overflow-x:clip}
body{
  font-family:var(--sans);
  color:var(--tinta);
  background:var(--crema);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Poppins es mas ancha que la Bodoni que habia antes: los titulos piden el
   espaciado un poco mas cerrado para no verse desparramados. */
h1,h2,h3,h4{font-family:var(--letra);font-weight:600;line-height:1.15;letter-spacing:-.4px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-weight:500;font-size:.95rem;letter-spacing:.3px;
  padding:.85rem 1.6rem;border:none;border-radius:50px;cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
/* Degradado mas hondo que el oro de marca: con el claro, la letra blanca
   daba 2,82:1 y no se leia. Asi da entre 5,0 y 5,9:1. */
.btn--gold{background:linear-gradient(135deg,var(--oro-boton),var(--oro-boton-hondo));color:#fff;box-shadow:0 8px 22px rgba(125,95,45,.35)}
.btn--dark{background:var(--vino);color:var(--crema)}
.btn--dark:hover{background:var(--vino-dark)}
.btn--ghost{background:transparent;border:1.5px solid currentColor;color:inherit}
.btn--add{background:var(--vino);color:var(--crema);width:100%}
.btn--add:hover{background:var(--vino-dark)}
.btn--block{width:100%;margin-top:.6rem}

/* ---------- Barra de anuncio (mensaje fijo) ---------- */
/* El techo: la franja de envio y la cabecera pegadas arriba, juntas. Antes
   solo se quedaba la cabecera y el aqua se perdia al bajar. Van en un mismo
   bloque para no tener que calcular el alto de la franja en cada tamano. */
.techo{position:sticky;top:0;z-index:50}

/* Franja alta a proposito: es el techo de la tienda y es donde vive el aqua.
   Delgada se leia como una rayita y debajo solo se veia el crema. El
   <meta name="theme-color"> de base.html lleva este mismo color, para que la
   barra del propio navegador se pinte igual. */
.topbar{background:var(--aqua);color:var(--vino);text-align:center;
  padding:1.15rem 1rem;transition:padding .25s ease}
.topbar__mensaje{font-family:var(--sans);font-weight:600;font-size:1.1rem;
  letter-spacing:1.4px;transition:font-size .25s ease}

/* ---------- Header ---------- */
.header{background:rgba(247,241,228,.97);border-bottom:1px solid var(--linea)}
/* Todo en una sola fila y pegado a la izquierda: logo, menu, y las acciones
   empujadas al otro extremo. El menu vive aqui mismo, no en una barra aparte.
   En celular el menu se sale de esta fila y pasa a ser el cajon lateral. */
.header__top{max-width:var(--max);margin:0 auto;display:flex;align-items:center;
  gap:1.6rem;padding:.75rem 1.4rem;transition:padding .25s ease}
.brand{flex:0 0 auto;display:flex;align-items:center;gap:.55rem;color:var(--vino)}
/* El nombre y el isotipo se INTERCAMBIAN, no se funden.
   Antes se animaba el ancho desde "auto", y eso CSS no lo sabe animar: el
   salto quedaba a medias y al deslizar despacio se veian los dos encima,
   descoloridos. Con display no hay estado intermedio posible. */
.brand__text{height:26px;width:auto;display:block}
.brand__iso{display:none}

/* Al bajar, la cabecera se achica y el nombre le cede el puesto al isotipo,
   como hace brd2. Se queda solo la marca en chiquito y el menu. */
/* Al bajar, el techo se achica: la franja se adelgaza pero NO desaparece
   —el aqua tiene que seguir viendose— y el nombre le cede el puesto al
   isotipo. Asi queda mas pantalla para el producto sin perder el color. */
.techo--chico .topbar{padding:.45rem 1rem}
.techo--chico .topbar__mensaje{font-size:.88rem;letter-spacing:.8px}
.techo--chico .header__top{padding-top:.3rem;padding-bottom:.3rem}
.techo--chico .brand__text{display:none}
.techo--chico .brand__iso{display:block;height:38px}
.techo--chico .header__action-label{display:none}
.header__actions{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:.8rem}
.header__action{display:flex;align-items:center;gap:.35rem;color:var(--vino);background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:.85rem;padding:.3rem 0;transition:color .2s}
.header__action:hover{color:var(--oro-texto)}
.header__action--seguir{background:#f3ead9;border-radius:50px;padding:.42rem .9rem;
  color:var(--vino);transition:background .2s,color .2s}
.header__action--seguir:hover{background:var(--vino);color:var(--crema)}
.header__action-label{display:inline}
.cart-link{position:relative;color:var(--vino);display:flex;padding:.3rem 0;transition:color .2s}
.cart-link:hover{color:var(--oro-texto)}
.cart-link__count{position:absolute;top:-6px;right:-8px;background:var(--vino);color:#fff;font-family:var(--sans);font-size:.65rem;font-weight:600;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 3px}
.header__menu-btn{flex:0 0 auto;display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer}
.header__menu-btn span{width:22px;height:2px;background:var(--vino);border-radius:2px}

/* Barra de búsqueda */
.header__search{max-width:var(--max);margin:0 auto;padding:0 1.4rem .7rem;display:none}
.header__search--open{display:block}
.header__search-form{display:flex;gap:.5rem}
.header__search-input{flex:1;padding:.65rem 1rem;border:1px solid var(--linea);border-radius:50px;font-family:var(--sans);font-size:.9rem;background:var(--blanco)}
.header__search-input:focus{outline:none;border-color:var(--oro)}
.header__search-submit{padding:.65rem 1.4rem;border:none;border-radius:50px;background:var(--vino);color:var(--crema);font-family:var(--sans);font-weight:500;cursor:pointer;transition:background .2s}
.header__search-submit:hover{background:var(--oro-boton)}

/* Barra de categorías */
.header__cats{display:flex;align-items:center;gap:.15rem;overflow-x:auto;
  scrollbar-width:none}
.header__cats::-webkit-scrollbar{display:none}
.header__cat{color:var(--vino);font-family:var(--deco);font-size:.82rem;
  font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:.4rem 1rem;
  border-radius:30px;transition:background .2s,color .2s;white-space:nowrap}
.header__cat:hover{background:rgba(92,45,61,.08)}
.header__cat--on{background:var(--vino);color:var(--crema);font-weight:600}

/* ---------- Flash ---------- */
.flash-wrap{max-width:var(--max);margin:1rem auto 0;padding:0 1.4rem}
.flash{padding:.7rem 1.1rem;border-radius:10px;font-size:.9rem;margin-bottom:.5rem}
.flash--ok{background:#e7f3e9;color:#256b39;border:1px solid #bfe0c8}
.flash--err{background:#fbe9e9;color:#8a2c2c;border:1px solid #efc2c2}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:74vh;overflow:hidden;color:var(--crema);background:#F3F0E1}
.hero__slideshow,.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#F3F0E1}
@media (max-aspect-ratio:4/3){
  .hero__video{object-fit:contain}
}
.hero__slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__slideshow img{opacity:0;animation:heroFade 30s infinite;will-change:opacity,transform}
.hero__slideshow img:nth-child(1){animation-delay:0s}
.hero__slideshow img:nth-child(2){animation-delay:6s}
.hero__slideshow img:nth-child(3){animation-delay:12s}
.hero__slideshow img:nth-child(4){animation-delay:18s}
.hero__slideshow img:nth-child(5){animation-delay:24s}
@keyframes heroFade{
  0%{opacity:0;transform:scale(1.02)}
  4%{opacity:1}
  20%{opacity:1}
  24%{opacity:0;transform:scale(1.14)}
  100%{opacity:0;transform:scale(1.14)}
}
/* Si el visitante pidió menos animación en su sistema, se deja la primera foto fija */
@media (prefers-reduced-motion:reduce){
  .hero__slideshow img{animation:none;opacity:0;transform:none}
  .hero__slideshow img:nth-child(1){opacity:1}
}
.hero__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(42,24,32,.05) 0%,rgba(42,24,32,0) 22%,rgba(42,24,32,0) 78%,rgba(42,24,32,.08) 100%)}

/* Señal discreta para invitar a bajar */
.hero__cta{position:absolute;z-index:2;bottom:2.6rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem}
.hero__btn{margin:0;padding:.9rem 2.6rem;font-size:.95rem;letter-spacing:.5px;
  box-shadow:0 6px 20px rgba(58,29,40,.16)}
.hero__cta .hero__bajar{position:static;transform:none;left:auto;bottom:auto}
.hero__bajar{position:absolute;z-index:2;bottom:1.6rem;left:50%;transform:translateX(-50%);
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.75);color:var(--vino);box-shadow:var(--sombra-sm);
  backdrop-filter:blur(3px);transition:background .25s;animation:heroBajar 2.4s ease-in-out infinite}
.hero__bajar:hover{background:#fff}
.hero__bajar svg{width:22px;height:22px}
@keyframes heroBajar{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
@media (prefers-reduced-motion:reduce){.hero__bajar{animation:none}}

/* Texto visible solo para buscadores y lectores de pantalla */
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero__content{position:relative;z-index:2;max-width:760px;padding:3rem 1.4rem}
.hero__icon{width:64px;margin:0 auto 1.2rem;color:var(--beige);filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.hero__kicker{font-family:var(--deco);letter-spacing:3px;text-transform:uppercase;font-size:.85rem;color:var(--beige);margin-bottom:.8rem}
.hero__title{font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:1rem;text-shadow:0 4px 20px rgba(0,0,0,.3)}
.hero__text{font-size:1.1rem;color:#f3e9da;max-width:540px;margin:0 auto 2rem;opacity:.95}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero__cta .btn--ghost{color:var(--crema)}

/* ---------- Perks ---------- */
/* La franja lleva el color de borde a borde; .perks solo centra el contenido.
   Va en el beige de la marca para despegarse del crema: antes se perdia. */
.perks-franja{background:var(--beige)}
.perks{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;
  gap:1rem 3rem;padding:2rem 1.4rem}
/* Cada beneficio con su sello de verificado, como los de una ficha de
   producto: el icono a la izquierda y el texto al lado, alineado. */
.perks__item{flex:0 1 250px;display:flex;align-items:flex-start;gap:.7rem;
  text-align:left}
.perk__sello{width:26px;height:26px;flex:0 0 auto;margin-top:.1rem;
  fill:var(--vino);stroke:var(--vino)}
.perk__sello path{stroke:var(--beige)}
.perk__texto strong{display:block;font-family:var(--letra);font-weight:600;
  color:var(--vino);font-size:1rem;line-height:1.25}
.perk__texto span{display:block;font-size:.84rem;color:#594B42;
  line-height:1.4;margin-top:.15rem}

/* ---------- Secciones ---------- */
.section{max-width:var(--max);margin:0 auto;padding:3.5rem 1.4rem}
.section--tinted{max-width:none;background:linear-gradient(180deg,#fbf6ec,#f3ead9)}
.section--tinted .ideas,.section--tinted .section__head{max-width:var(--max);margin-left:auto;margin-right:auto}
.section__head{text-align:center;margin-bottom:2.2rem}
.section__eyebrow{font-family:var(--deco);letter-spacing:3px;text-transform:uppercase;font-size:.8rem;color:var(--oro-texto)}
.section__title{font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--vino);margin-top:.4rem}
.section__sub{color:var(--gris);margin-top:.6rem;max-width:560px;margin-left:auto;margin-right:auto}

/* ---------- Tarjeta de producto ---------- */
/* Esquinas rectas en las fotos, a peticion de ella.
   Sin caja blanca: la foto va suelta sobre el crema de la pagina y debajo,
   centrados, el nombre y el precio. El recuadro blanco de antes encerraba
   cada producto y hacia que la foto se viera mas chica de lo que es.
   El redondeado y la sombra pasan a la FOTO, que ahora es el borde visible
   de la tarjeta. */
/* min-width:0 para que la columna de la rejilla pueda encogerse: sin eso,
   un boton ancho obliga a la columna a crecer y la segunda se sale de la
   pantalla en celular. */
.card{position:relative;background:transparent;box-shadow:none;min-width:0;
  transition:transform .25s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px)}
.card__badge{position:absolute;top:12px;left:12px;z-index:3;background:var(--vino);color:var(--crema);font-family:var(--deco);font-size:.72rem;letter-spacing:1px;text-transform:uppercase;padding:.3rem .7rem;border-radius:30px}
/* 4/5 en vez de cuadrada: las lamparas y las prendas son verticales, y en un
   marco cuadrado quedaban chiquitas con aire sobrando arriba y abajo. Este
   alto hace que el producto ocupe mas de la foto sin cambiar la rejilla. */
.card__media{position:relative;display:block;aspect-ratio:4/5;background:#efe7d9;
  overflow:hidden;box-shadow:var(--sombra-sm);
  transition:box-shadow .25s ease, transform .25s ease}
.card:hover .card__media{box-shadow:0 18px 46px rgba(58,29,40,.18)}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s ease, transform .6s ease}
.card__media-hover{opacity:0}
.card:hover .card__media-hover{opacity:1}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:.6rem .15rem 0;display:flex;flex-direction:column;gap:.12rem;
  text-align:center;align-items:center}
.card__cat{font-family:var(--deco);font-size:.66rem;letter-spacing:1.3px;line-height:1.2;
  text-transform:uppercase;color:var(--oro-texto)}
/* El min-height mantiene alineados el precio y el boton entre tarjetas con
   nombres de una o dos lineas. El texto se centra dentro de ese alto para
   que el sobrante no quede todo debajo del nombre, que era lo que abria
   ese hueco grande antes del precio. */
.card__title{font-size:.98rem;line-height:1.28;color:var(--vino);font-weight:600;
  min-height:2.5em;display:flex;align-items:center;justify-content:center}
.card__title a:hover{color:var(--vino-dark)}
/* Sin 'margin-top:auto': dentro de la tarjeta transparente ese auto estiraba
   el hueco entre el nombre y el precio. La alineacion entre tarjetas la
   sostiene el min-height del titulo. */
.card__price{display:flex;align-items:baseline;justify-content:center;gap:.4rem;margin-top:0}
.card__price-old{color:var(--gris);text-decoration:line-through;font-size:.85rem}
.card__price-now{font-family:var(--serif);font-weight:600;font-size:1.12rem;color:var(--vino)}
.card__form{margin-top:.5rem;width:100%}
/* El boton ya no esta dentro de un recuadro, asi que necesita su propio aire
   arriba para no quedar pegado al precio. */
.card__body > .btn--add{margin-top:.5rem;width:100%}

/* ---------- Carrusel ---------- */
.carousel{position:relative;display:flex;align-items:center;gap:.5rem}
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:1.3rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.5rem .2rem 1rem;scrollbar-width:none}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track .card{scroll-snap-align:start}
.carousel__btn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);background:var(--blanco);color:var(--vino);font-size:1.5rem;cursor:pointer;box-shadow:var(--sombra-sm);transition:background .2s, color .2s}
.carousel__btn:hover{background:var(--vino);color:var(--crema)}

/* ---------- Ideas de regalo ---------- */
.ideas{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;padding:0 1.4rem}
.idea{position:relative;overflow:hidden;aspect-ratio:5/6;box-shadow:var(--sombra-sm)}
.idea img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.idea:hover img{transform:scale(1.08)}
.idea::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(58,29,40,.82))}
.idea__label{position:absolute;left:0;right:0;bottom:14px;z-index:2;text-align:center;color:var(--crema);font-family:var(--serif);font-size:1.05rem;letter-spacing:.5px}

/* ---------- Features (productos personalizados) ---------- */
.features{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.3rem}
.feature{position:relative;overflow:hidden;min-height:280px;box-shadow:var(--sombra-sm)}
.feature--lg{grid-row:span 1}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature__txt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;padding:1.5rem;background:linear-gradient(180deg,transparent 35%,rgba(58,29,40,.85));color:var(--crema)}
.feature__txt h3{color:var(--crema);font-size:1.3rem}
.feature__txt p{font-size:.9rem;opacity:.92}
.feature__txt .btn{align-self:flex-start;margin-top:.4rem}

/* ---------- Proceso ---------- */
.process{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;background:var(--vino)}
.process__media{position:relative;min-height:420px}
.process__media video,
.process__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.process__txt{padding:3.5rem;color:var(--crema);display:flex;flex-direction:column;justify-content:center}
.process__txt .section__title{color:var(--crema)}
.process__txt .section__eyebrow{color:var(--oro-claro)}
.process__steps{list-style:none;margin:1.5rem 0 2rem;display:flex;flex-direction:column;gap:.9rem}
.process__steps li{padding-left:1rem;border-left:2px solid var(--oro);font-size:1rem;opacity:.95}
.process__steps strong{color:var(--oro-claro)}

/* ---------- Before / After slider ---------- */
.ba-section{max-width:var(--max);margin:0 auto;padding:3.5rem 1.4rem;text-align:center}
/* Sin titulo encima: el aire de arriba sobra, porque viene pegada de la
   franja de beneficios, y abajo se recorta para que quede junta con la
   invitacion a disenar, que es el paso siguiente. */
.ba-section--suelta{padding-top:1.6rem;padding-bottom:.4rem}
.ba-slider{position:relative;max-width:900px;margin:0 auto;overflow:hidden;box-shadow:var(--sombra);cursor:ew-resize;user-select:none;-webkit-user-select:none}
.ba-slider__after,.ba-slider__before{pointer-events:none}
.ba-slider__after img,.ba-slider__before img{display:block;width:100%;height:auto}
.ba-slider__before{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden;z-index:2}
.ba-slider__before img{height:100%;object-fit:cover;object-position:left}
.ba-slider__handle{position:absolute;top:0;left:50%;z-index:3;width:4px;height:100%;background:var(--crema);transform:translateX(-50%);pointer-events:none}
.ba-slider__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--crema);color:var(--vino);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;box-shadow:0 4px 16px rgba(0,0,0,.25);pointer-events:none}
.ba-slider__caption{font-size:.88rem;color:var(--gris);margin-top:1rem}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--vino-dark),var(--vino));color:var(--crema);text-align:center}
.cta-band__inner{max-width:680px;margin:0 auto;padding:4rem 1.4rem}
.cta-band h2{color:var(--crema);font-size:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:.6rem}
.cta-band p{opacity:.9;margin-bottom:1.6rem}

/* ---------- Page head ---------- */
.page-head{text-align:center;padding:3rem 1.4rem 1rem;max-width:var(--max);margin:0 auto}
.page-head .section__title{margin-top:.4rem}
.page-head--cart .section__title{display:flex;align-items:center;justify-content:center;gap:.6rem}
.page-head__icon{color:var(--vino);flex-shrink:0}

/* ---------- Filtros ---------- */
.filters{max-width:var(--max);margin:0 auto;padding:0 1.4rem 1.5rem;display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.chip{padding:.5rem 1.1rem;border-radius:30px;border:1px solid var(--linea);background:var(--blanco);font-size:.88rem;color:var(--tinta);transition:all .2s}
.chip:hover{border-color:var(--oro-texto);color:var(--oro-texto)}
.chip--on{background:var(--vino);color:var(--crema);border-color:var(--vino)}

/* ---------- Grids ---------- */
.grid{max-width:var(--max);margin:0 auto;display:grid;gap:1.6rem 1.2rem;padding:0 1.4rem 3rem}
.grid--catalog{grid-template-columns:repeat(4,1fr)}
.grid--related{grid-template-columns:repeat(4,1fr);padding-bottom:0}
.empty{grid-column:1/-1;text-align:center;color:var(--gris);padding:3rem 0}

/* ---------- Breadcrumbs ---------- */
.crumbs{max-width:var(--max);margin:0 auto;padding:1.2rem 1.4rem .4rem;font-size:.82rem;color:var(--gris)}
.crumbs a:hover{color:var(--oro-texto)}

/* ---------- Producto ---------- */
.product{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;padding:1.5rem 1.4rem 3rem}
.product__main{overflow:hidden;aspect-ratio:1/1;background:#efe7d9;box-shadow:var(--sombra-sm)}
.product__main img{width:100%;height:100%;object-fit:cover}
.product__thumbs{display:flex;gap:.7rem;margin-top:.9rem}
.thumb{width:74px;height:74px;overflow:hidden;border:2px solid transparent;background:none;cursor:pointer;padding:0}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb--on{border-color:var(--oro)}
.product__info{padding-top:.5rem}
.product__badge{position:static;display:inline-block;margin-bottom:.8rem}
.product__cat{font-family:var(--deco);letter-spacing:2px;text-transform:uppercase;font-size:.8rem;color:var(--oro-texto)}
.product__code{display:inline-block;font-family:var(--deco);font-size:.75rem;letter-spacing:1px;color:var(--gris);margin-top:.1rem}
.product__title{font-size:clamp(1.6rem,3vw,2.3rem);color:var(--vino);margin:.3rem 0 1rem}
.product__price{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.product__price-now{font-family:var(--serif);font-weight:600;font-size:1.8rem;color:var(--vino)}
.product__off{background:#f3e1d0;color:var(--oro);font-weight:600;font-size:.8rem;padding:.2rem .6rem;border-radius:20px}
.product__desc{color:#5b4750;margin-bottom:1.2rem}
.product__features{list-style:none;margin-bottom:1.6rem;display:flex;flex-direction:column;gap:.5rem}
.product__features li{padding-left:1.6rem;position:relative;font-size:.95rem}
.product__features li::before{content:"✦";position:absolute;left:0;color:var(--oro)}
.product__buy{display:flex;gap:.8rem;align-items:center;margin-bottom:.4rem}

.product__buy-form{display:block}

/* ---------- Personalizacion en la ficha de producto ---------- */
.personaliza{margin:1.8rem 0 1.6rem;padding-top:1.6rem;border-top:1px solid var(--linea)}
.personaliza__title{font-size:1.15rem;color:var(--vino);margin-bottom:1.4rem}
.personaliza .campo{display:block;margin-bottom:1.4rem}
.personaliza .campo > span{display:block;font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--tinta);margin-bottom:.55rem;line-height:1.35}
.personaliza .campo .req{color:#c0392b;margin-left:.15rem}
.personaliza .ayuda{display:block;font-family:var(--sans);font-weight:400;font-size:.78rem;color:var(--gris);margin-top:.35rem;line-height:1.45}
.personaliza .campo input[type="text"],
.personaliza .campo select,
.personaliza .campo textarea{
  width:100%;padding:.85rem 1rem;border:1.5px solid #d8cbb8;border-radius:8px;
  font-family:var(--sans);font-size:.95rem;background:var(--blanco);color:var(--tinta);
  transition:border-color .2s
}
.personaliza .campo textarea{resize:vertical;min-height:52px}
.personaliza .campo select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2D3D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:16px
}
.personaliza .campo input[type="text"]:focus,
.personaliza .campo select:focus,
.personaliza .campo textarea:focus{outline:none;border-color:var(--vino)}

/* Subida de foto con icono (reemplaza el boton gris del navegador) */
.subir{display:block}
.subir input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.personaliza .campo > span.subir__caja{
  display:flex;align-items:center;justify-content:center;
  width:74px;height:64px;margin:0;padding:0;
  border:1.5px dashed #bfae95;border-radius:8px;
  background:var(--blanco);color:var(--vino);cursor:pointer;transition:border-color .2s,background .2s
}
.personaliza .campo > span.subir__caja:hover{border-color:var(--vino);background:#fbf6ec}
.personaliza .campo > span.subir__caja svg{width:26px;height:26px;flex:none;display:block}
.personaliza .campo > span.subir__nombre{display:block;margin:.5rem 0 0;font-weight:400;font-size:.8rem;color:var(--gris);word-break:break-all}
.personaliza .campo > span.subir__nombre--error{color:#a5342f;font-weight:500}
.personaliza .campo > span.subir__nombre--error a{color:var(--vino);text-decoration:underline}

/* ---------- Ventana de aviso (imagen muy pesada) ---------- */
.aviso{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.2rem}
.aviso[hidden]{display:none}
.aviso__fondo{position:absolute;inset:0;background:rgba(42,24,32,.55);backdrop-filter:blur(2px)}
.aviso__caja{position:relative;z-index:1;background:var(--blanco);border-radius:var(--radio);
  box-shadow:var(--sombra);max-width:420px;width:100%;padding:2rem 1.8rem 1.6rem;text-align:center}
.aviso__x{position:absolute;top:.6rem;right:.9rem;background:none;border:none;font-size:1.6rem;
  line-height:1;color:var(--gris);cursor:pointer;padding:.2rem .4rem}
.aviso__x:hover{color:var(--vino)}
.aviso__icono{width:46px;margin:0 auto .8rem}
.aviso__titulo{font-size:1.25rem;color:var(--vino);margin-bottom:.7rem}
.aviso__texto{font-size:.95rem;color:#5b4750;margin-bottom:1.1rem}
.aviso__subtitulo{font-family:var(--serif);font-size:1rem;color:var(--vino);margin-bottom:.4rem}
.aviso__ayuda{font-size:.85rem;color:var(--gris);margin-bottom:1.3rem}
.aviso__botones{display:flex;flex-direction:column;gap:.6rem}
.aviso__botones .btn{width:100%}


.product__meta{display:flex;flex-direction:column;gap:.3rem;margin-top:1.5rem;font-size:.85rem;color:var(--gris)}

/* ---------- Selector de cantidad ---------- */
.qty{display:inline-flex;align-items:center;border:1px solid var(--linea);border-radius:50px;overflow:hidden;background:var(--blanco)}
.qty__btn{width:40px;height:46px;border:none;background:none;font-size:1.2rem;color:var(--vino);cursor:pointer}
.qty__btn:hover{background:#f3ead9}
.qty__input{width:42px;text-align:center;border:none;font-family:var(--sans);font-size:1rem;background:none;-moz-appearance:textfield}
.qty__input::-webkit-outer-spin-button,.qty__input::-webkit-inner-spin-button{-webkit-appearance:none}

/* ---------- Carrito ---------- */
.cart{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr;gap:2rem;padding:1rem 1.4rem 4rem;align-items:start}
.cart-row{display:grid;grid-template-columns:90px 1fr auto auto auto;gap:1rem;align-items:center;background:var(--blanco);border-radius:var(--radio);padding:.9rem;box-shadow:var(--sombra-sm);margin-bottom:1rem}
.cart-row__img{width:90px;height:90px;border-radius:10px;overflow:hidden}
.cart-row__img img{width:100%;height:100%;object-fit:cover}
.cart-row__info h3{font-size:1rem;color:var(--tinta)}
.cart-row__cat{display:block;font-family:var(--deco);font-size:.7rem;letter-spacing:1px;text-transform:uppercase;color:var(--oro-texto)}
.cart-row__unit{font-size:.82rem;color:var(--gris)}
.cart-row__personaliza{display:flex;flex-direction:column;gap:.15rem;margin-top:.4rem;font-size:.78rem;color:var(--gris)}
.cart-row__personaliza a{color:var(--oro-texto);text-decoration:underline}
.cart-row__qty{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--linea);border-radius:30px}
.cart-row__qty .qty__btn{height:36px;width:34px}
.cart-row__count{min-width:22px;text-align:center;font-weight:500}
.cart-row__subtotal{font-family:var(--serif);font-weight:600;color:var(--vino);white-space:nowrap}
.cart-row__del button{background:none;border:none;color:var(--gris);font-size:1rem;cursor:pointer;padding:.3rem}
.cart-row__del button:hover{color:var(--vino)}
.cart__summary{background:var(--blanco);border-radius:var(--radio);padding:1.6rem;box-shadow:var(--sombra);position:sticky;top:90px}
.cart__summary h3{color:var(--vino);margin-bottom:1rem;font-size:1.3rem}
.cart__line{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--linea);font-size:.95rem}
.cart__line--total{border-bottom:none;font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--vino);padding-top:1rem}
.cart__hint{font-size:.82rem;color:var(--oro-texto);margin:.6rem 0}
.cart__safe{font-size:.78rem;color:var(--gris);text-align:center;margin-top:.8rem}
.cart-empty{max-width:520px;margin:0 auto;text-align:center;padding:4rem 1.4rem}
.cart-empty img{width:70px;margin:0 auto 1.2rem;color:var(--beige);opacity:.7}
.cart-empty h2{color:var(--vino);margin-bottom:.5rem}
.cart-empty p{color:var(--gris);margin-bottom:1.5rem}

/* ---------- Contacto ---------- */
.contact{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;padding:1rem 1.4rem 2rem}
.contact__card{background:var(--blanco);border-radius:var(--radio);padding:2rem;text-align:center;box-shadow:var(--sombra-sm)}
.contact__card h3{color:var(--vino);margin-bottom:.5rem}
.contact__card p{color:var(--gris);font-size:.9rem;margin-bottom:1.2rem}
.contact__form-wrap{max-width:680px;margin:0 auto;padding:2rem 1.4rem 4rem;text-align:center}
.contact__form-wrap .section__title{color:var(--vino);margin-bottom:1.5rem}
.contact__form{display:flex;flex-direction:column;gap:1rem;text-align:left}
.contact__form .row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact__form input,.contact__form textarea{padding:.9rem 1rem;border:1px solid var(--linea);border-radius:10px;font-family:var(--sans);font-size:.95rem;background:var(--blanco)}
.contact__form input:focus,.contact__form textarea:focus{outline:none;border-color:var(--oro)}
.checkout__nota{font-size:.82rem;color:var(--gris);margin:-.3rem 0 .2rem}

/* ---------- Footer ---------- */
/* ---------- Paginas de contenido (politicas, envios, empresas) ---------- */
.legal{max-width:820px;margin:0 auto;padding:0 1.4rem 4rem}
.legal__intro{font-size:1.02rem;color:#5b4750;margin-bottom:2rem;padding-bottom:1.6rem;border-bottom:1px solid var(--linea)}
.legal h2{font-size:1.3rem;color:var(--vino);margin:2.2rem 0 .8rem}
.legal h3{font-size:1.05rem;color:var(--vino);margin:1.6rem 0 .5rem}
.legal p{margin-bottom:.9rem;color:#4b3b42}
.legal ul{margin:0 0 1.1rem 1.2rem;color:#4b3b42}
.legal li{margin-bottom:.45rem}
.legal strong{color:var(--vino)}
.legal a{color:var(--oro-texto);text-decoration:underline}
.legal__nota{background:var(--blanco);border:1px solid var(--linea);border-left:3px solid var(--oro);
  border-radius:10px;padding:1.1rem 1.3rem;margin:1.6rem 0;font-size:.95rem}
.legal__tabla{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem;font-size:.95rem}
.legal__tabla th,.legal__tabla td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--linea)}
.legal__tabla th{font-family:var(--sans);font-weight:600;color:var(--vino);background:#faf5ec}
.legal__cta{text-align:center;margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--linea)}
.legal__cta p{margin-bottom:1rem}

/* Preguntas frecuentes desplegables */
.faq__item{border-bottom:1px solid var(--linea)}
.faq__item summary{cursor:pointer;padding:1.1rem 2rem 1.1rem 0;font-family:var(--sans);font-weight:500;
  font-size:1rem;color:var(--vino);position:relative;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);
  font-size:1.3rem;color:var(--oro);transition:transform .2s}
.faq__item[open] summary::after{content:"−"}
.faq__item p,.faq__item ul{padding-right:1rem;color:#4b3b42;font-size:.95rem}
.faq__item > div{padding-bottom:1.1rem}

/* ---------- Consulta de pedido (cliente) ---------- */
.consulta{max-width:620px;margin:0 auto;padding:0 1.4rem 4rem}
.consulta--detalle{max-width:680px}
.consulta__ayuda{text-align:center;margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--linea)}
.consulta__ayuda p{color:var(--gris);font-size:.9rem;margin-bottom:.9rem}
.consulta__titulo{font-size:1.15rem;color:var(--vino);margin:2.2rem 0 1rem}
.consulta__item{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:1.1rem;margin-bottom:1rem}
.consulta__item-cabeza{display:flex;justify-content:space-between;gap:1rem;color:var(--vino);margin-bottom:.6rem}
.consulta__datos div,.consulta__envio div{display:flex;gap:.8rem;padding:.4rem 0;border-top:1px solid var(--linea);font-size:.9rem}
.consulta__datos span,.consulta__envio span{flex:0 0 140px;color:var(--gris)}
.consulta__datos b,.consulta__envio b{font-weight:500}
.consulta__foto{width:120px;height:120px;object-fit:cover;border-radius:10px;margin-top:.8rem;border:1px solid var(--linea)}
.consulta__total{display:flex;justify-content:space-between;padding:.9rem 1.1rem;background:#faf5ec;
  border-radius:var(--radio);font-size:1.05rem;color:var(--vino)}
.consulta__envio{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:.3rem 1.1rem .9rem}

/* Seguimiento del pedido */
.seguimiento{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.5rem 1.4rem 1.2rem;box-shadow:var(--sombra-sm);margin:1.6rem 0 2.4rem}
.seguimiento__cabeza{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.seguimiento__etiqueta{font-family:var(--deco);letter-spacing:2px;text-transform:uppercase;
  font-size:.78rem;color:var(--oro)}
.seguimiento__contador{font-size:.8rem;color:var(--gris)}

.barra{height:4px;background:var(--linea);border-radius:4px;overflow:hidden;margin-bottom:1.8rem}
.barra__llena{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--oro),var(--oro-claro));
  transition:width .6s ease}

.pasos{position:relative;padding-left:3.4rem}
.pasos::before{content:"";position:absolute;left:19px;top:16px;bottom:16px;width:2px;background:var(--linea)}
.paso{position:relative;padding:.1rem 0 1.35rem}
.paso:last-child{padding-bottom:0}

.paso__marca{position:absolute;left:-3.4rem;top:-2px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--blanco);border:2px solid var(--linea);
  color:var(--linea);z-index:1;transition:all .3s ease}
.paso__marca svg{width:19px;height:19px}

.paso__texto strong{display:block;font-family:var(--sans);font-weight:500;font-size:.95rem;
  color:#b9aca6;padding-top:.55rem;transition:color .3s}
.paso__texto span{display:block;font-size:.9rem;color:#5b4750;margin-top:.4rem;
  background:var(--crema);border-radius:10px;padding:.7rem .9rem;line-height:1.5}

/* Etapas ya cumplidas */
.paso--hecho .paso__marca{background:var(--oro-boton);border-color:var(--oro-boton);color:#fff}
.paso--hecho .paso__texto strong{color:var(--tinta)}

/* Etapa actual: destacada, con un halo suave que respira */
.paso--actual .paso__marca{background:var(--vino);border-color:var(--vino);color:var(--crema);
  transform:scale(1.06);animation:halo 2.6s ease-in-out infinite}
.paso--actual .paso__texto strong{color:var(--vino);font-weight:600;font-size:1.05rem}
@keyframes halo{
  0%,100%{box-shadow:0 0 0 0 rgba(92,45,61,.22)}
  50%{box-shadow:0 0 0 8px rgba(92,45,61,0)}
}
@media (prefers-reduced-motion:reduce){.paso--actual .paso__marca{animation:none}}

@media(max-width:520px){
  .pasos{padding-left:3rem}
  .pasos::before{left:17px}
  .paso__marca{left:-3rem;width:36px;height:36px}
  .paso__marca svg{width:17px;height:17px}
}

/* ---------- Panel de administracion ---------- */
.admin-entrar{max-width:380px;margin:3rem auto 5rem;padding:0 1.4rem;text-align:center}
.admin-entrar img{width:52px;margin:0 auto 1rem}
.admin-entrar h1{font-size:1.5rem;color:var(--vino);margin-bottom:.5rem}
.admin-entrar p{color:var(--gris);font-size:.92rem;margin-bottom:1.4rem}
.admin-entrar__aviso{background:var(--blanco);border:1px solid var(--linea);border-left:3px solid var(--oro);
  border-radius:10px;padding:1rem;text-align:left;font-size:.88rem;color:#4b3b42}
.admin-entrar__aviso code{display:block;background:#f3ead9;padding:.4rem .5rem;border-radius:6px;
  margin:.4rem 0;font-size:.8rem;word-break:break-all}
.admin-entrar__volver{display:inline-block;margin-top:1.4rem;font-size:.85rem;color:var(--gris)}

.admin{max-width:var(--max);margin:0 auto;padding:1.5rem 1.4rem 4rem}
.admin__barra{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--linea);margin-bottom:1.6rem}
.admin__barra h1{font-size:1.6rem;color:var(--vino)}
.admin__conteo{font-family:var(--sans);font-size:.9rem;color:var(--gris);font-weight:400}
/* flex-wrap + nowrap: ahora son seis enlaces y en celular no caben en una
   linea. Sin el nowrap, "← Pedidos" se partia en dos renglones. */
.admin__acciones{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;font-size:.9rem}
.admin__acciones a{color:var(--oro-texto);white-space:nowrap}
.admin__acciones a:hover{color:var(--vino)}

.admin__tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.8rem}
.admin__tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:1.1rem}
.admin__tarjeta strong{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--vino)}
.admin__tarjeta span{font-size:.82rem;color:var(--gris)}
.admin__tarjeta--alerta{border-color:var(--oro);background:#fdf8ee}

.admin__filtros{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.admin__tabla-wrap{overflow-x:auto;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio)}
.admin__tabla{width:100%;border-collapse:collapse;font-size:.92rem;min-width:620px}
.admin__tabla th{text-align:left;padding:.85rem 1rem;background:#faf5ec;color:var(--vino);
  font-family:var(--sans);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.5px}
.admin__tabla td{padding:.85rem 1rem;border-top:1px solid var(--linea);vertical-align:top}
.admin__fecha{display:block;font-size:.78rem;color:var(--gris)}
.admin__estado{display:inline-block;padding:.2rem .6rem;border-radius:20px;font-size:.78rem}
.admin__estado--ok{background:#e7f3e9;color:#256b39}
.admin__estado--espera{background:#f6ecd9;color:#8a6a2c}
.admin__ver{color:var(--oro-texto);white-space:nowrap}
.admin__vacio{color:var(--gris);padding:2rem 0}
.admin__nota{font-size:.82rem;color:var(--gris);margin-top:.8rem}

.admin__dos{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:start}
.admin__titulo{font-size:1.05rem;color:var(--vino);margin:0 0 .9rem}
.admin__item{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.1rem;margin-bottom:1rem}
.admin__item-cabeza{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.7rem;color:var(--vino)}
.admin__datos div,.admin__ficha div{display:flex;gap:.8rem;padding:.4rem 0;border-top:1px solid var(--linea);font-size:.9rem}
.admin__datos span,.admin__ficha span{flex:0 0 130px;color:var(--gris)}
.admin__datos b,.admin__ficha b{font-weight:500;color:var(--tinta)}
.admin__ficha{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:.4rem 1.1rem 1rem;margin-bottom:1.8rem}
.admin__ficha a{color:var(--oro-texto)}
.admin__fotos{display:flex;gap:.8rem;margin-top:.9rem;flex-wrap:wrap}
.admin__fotos a{text-align:center;font-size:.78rem;color:var(--gris)}
.admin__fotos img{width:130px;height:130px;object-fit:cover;border-radius:10px;border:1px solid var(--linea);margin-bottom:.3rem}
.admin__total{text-align:right;font-size:1.05rem;color:var(--vino);padding-top:.5rem}

/* --- Panel: buscador, etapas y accion principal --------------------------- */
a.admin__tarjeta{display:block;transition:border-color .2s,transform .2s}
a.admin__tarjeta:hover{border-color:var(--oro);transform:translateY(-2px)}

.admin__buscar{display:flex;align-items:center;gap:.6rem;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--radio);padding:.5rem .5rem .5rem 1rem;margin-bottom:1.2rem}
.admin__buscar svg{width:18px;height:18px;color:var(--gris);flex:0 0 auto}
.admin__buscar input[type=search]{flex:1;border:0;outline:0;background:transparent;
  font-family:var(--sans);font-size:.95rem;color:var(--tinta);padding:.45rem 0;min-width:0}
.admin__buscar .btn{padding:.55rem 1.3rem;font-size:.85rem;margin:0}
.admin__limpiar{font-size:.82rem;color:var(--gris);padding-right:.6rem;white-space:nowrap}
.admin__limpiar:hover{color:var(--vino)}

.admin__filtros-tit{font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gris);align-self:center;margin-right:.3rem}
.chip--gris.chip--on{background:var(--gris);border-color:var(--gris)}
.chip--azul.chip--on{background:#3f6b8a;border-color:#3f6b8a}
.chip--morado.chip--on{background:#6b4a7a;border-color:#6b4a7a}
.chip--oro.chip--on{background:var(--oro);border-color:var(--oro)}
.chip--verde.chip--on{background:#2f7a4a;border-color:#2f7a4a}

.etapa{display:inline-block;padding:.22rem .7rem;border-radius:20px;font-size:.78rem;
  line-height:1.5;white-space:nowrap;background:#efeae2;color:var(--gris)}
.etapa--azul{background:#e6eef4;color:#31576f}
.etapa--morado{background:#efe8f3;color:#5d3f6b}
.etapa--oro{background:#f8efdd;color:#8a6a2c}
.etapa--verde{background:#e7f3e9;color:#256b39}
.admin__barra h1 .etapa{font-family:var(--sans);vertical-align:middle;margin-left:.6rem}

.admin__tabla--clic tr[data-ir]{cursor:pointer}
.admin__tabla--clic tr[data-ir]:hover td{background:#fdfaf4}

.accion{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--vino),var(--vino-dark));color:var(--crema);
  border-radius:var(--radio);padding:1.4rem 1.6rem;margin-bottom:1.8rem;box-shadow:var(--sombra-sm)}
.accion__eti{display:block;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--oro-claro);margin-bottom:.25rem}
.accion__texto strong{font-family:var(--serif);font-size:1.35rem;display:block}
.accion__texto p{font-size:.88rem;opacity:.85;margin-top:.4rem;max-width:52ch;line-height:1.6}
.accion__texto p b{color:var(--oro-claro);font-weight:500}
.accion__botones{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.accion__botones form{margin:0}
.accion__botones .btn{margin:0;white-space:nowrap}

.btn--wa{background:#25D366;color:#0b3d1e;box-shadow:0 8px 22px rgba(37,211,102,.3)}
.btn--wa:hover{background:#1fb857;color:#fff}
.btn--linea{background:transparent;border:1px solid var(--linea);color:var(--vino)}
.btn--linea:hover{border-color:var(--oro-texto);color:var(--oro-texto)}
.accion .btn--linea{border-color:rgba(247,241,228,.4);color:var(--crema)}
.accion .btn--linea:hover{border-color:var(--oro-claro);color:var(--oro-claro)}

.admin__ayuda{font-size:.84rem;color:var(--gris);margin:-.5rem 0 .8rem;line-height:1.55}
.admin__copiado{font-size:.8rem;color:#256b39;margin-top:.4rem}

.etapas{display:flex;flex-direction:column;gap:.45rem;margin:0}
.etapas__b{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;cursor:pointer;
  background:var(--blanco);border:1px solid var(--linea);border-radius:10px;
  padding:.65rem .8rem;font-family:var(--sans);font-size:.9rem;color:var(--tinta);transition:all .18s}
.etapas__b:hover{border-color:var(--oro-texto);color:var(--oro-texto)}
.etapas__n{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:#f1ebe0;color:var(--gris);font-size:.78rem;font-weight:600}
.etapas__b--hecha{color:var(--gris)}
.etapas__b--hecha .etapas__n{background:var(--oro-boton);color:#fff}
.etapas__b--activa{border-color:var(--vino);background:#fdf8ee;color:var(--vino);font-weight:500}
.etapas__b--activa .etapas__n{background:var(--vino);color:var(--crema)}

@media(max-width:860px){
  .admin__tarjetas{grid-template-columns:repeat(2,1fr)}
  .admin__dos{grid-template-columns:1fr}
  .accion{flex-direction:column;align-items:flex-start}
  .accion__botones{width:100%}
  .accion__botones .btn,.accion__botones form{width:100%}
}
@media(max-width:560px){
  .admin__buscar{flex-wrap:wrap}
  .admin__buscar input[type=search]{flex:1 0 100%;order:-1}
  .admin__tarjetas{grid-template-columns:1fr 1fr}
  .admin__barra h1{font-size:1.25rem}
}

.footer{background:var(--vino-dark);color:var(--beige);margin-top:2rem}
.footer__grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1.2fr 1fr;gap:2.5rem;padding:3.5rem 1.4rem 2.5rem}
.footer__logo{width:210px;max-width:100%;margin-bottom:1.1rem;
  filter:brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(300%) hue-rotate(347deg) brightness(97%)}
.footer__brand p{font-size:.9rem;opacity:.8;margin-bottom:.9rem;max-width:340px;line-height:1.65}
.footer__news-texto{font-size:.88rem;opacity:.82}
.footer__h4--segundo{margin-top:1.8rem}
.footer__city{font-family:var(--deco);letter-spacing:1px}
.footer__col h4{color:var(--crema);font-family:var(--serif);font-size:1.05rem;margin-bottom:1rem}
.footer__col a{display:block;font-size:.9rem;opacity:.82;margin-bottom:.55rem;transition:opacity .2s,color .2s}
.footer__col a:hover{opacity:1;color:var(--oro-claro)}
.footer__news p{font-size:.88rem;opacity:.82;margin-bottom:1rem}
.news{display:flex;gap:.5rem;max-width:340px}
.news input{flex:1;min-width:0;padding:.75rem .9rem;border:none;border-radius:8px;font-family:var(--sans);font-size:.88rem}
/* Fondo mas hondo: con el oro de marca la letra blanca daba 2,82:1. */
.news button{background:var(--oro-boton);color:#fff;border:none;border-radius:8px;padding:0 1.2rem;cursor:pointer;
  font-family:var(--sans);font-weight:500;white-space:nowrap;transition:background .2s}
.news button:hover{background:var(--oro-claro)}
.news button:disabled{opacity:.6;cursor:default}
.news__respuesta{font-size:.85rem;margin-top:.6rem;color:var(--oro-claro)}
.news__respuesta--error{color:#e8a9a4}
.footer__bottom{border-top:1px solid rgba(209,192,169,.18);max-width:var(--max);margin:0 auto;padding:1.3rem 1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.8rem;opacity:.75}

/* ---------- WhatsApp flotante ---------- */
/* El boton de WhatsApp lleva el mensaje pegado a la izquierda, siempre
   visible. Es un solo enlace: el globo y el circulo llevan al mismo chat. */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;
  align-items:center;gap:.6rem;color:#fff;transition:transform .2s}
/* El circulo es un elemento de verdad y el icono se centra con grid. Antes
   estaba posicionado a mano con transform y quedaba corrido. */
.wa-float__circulo{width:56px;height:56px;flex:0 0 auto;border-radius:50%;
  background:#25D366;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(37,211,102,.45)}
.wa-float:hover{transform:scale(1.04)}

.wa-float__globo{order:1;background:var(--blanco);color:var(--tinta);
  border:1px solid var(--linea);border-radius:14px;padding:.6rem .9rem;
  font-size:.82rem;line-height:1.3;max-width:200px;
  box-shadow:0 8px 24px rgba(58,29,40,.14)}
.wa-float__globo strong{display:block;color:var(--vino);font-weight:600;
  font-size:.86rem}

/* En pantallas angostas el globo se come el ancho: se deja solo el circulo. */
@media(max-width:560px){
  .wa-float__globo{display:none}
}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .header__menu-btn{display:flex}
  .header__action-label{display:none}
  .header__action--seguir{padding:.42rem .55rem}
  .header__cats{position:fixed;top:0;left:0;height:100vh;width:78%;max-width:320px;background:var(--vino);flex-direction:column;padding:5rem 2rem 2rem;gap:1rem;transform:translateX(-100%);transition:transform .3s ease;z-index:55;box-shadow:8px 0 30px rgba(0,0,0,.25)}
  .header__cats--open{transform:translateX(0)}
  .header__cat{color:rgba(255,255,255,.9);font-size:1rem;padding:.5rem 0;width:100%;
    text-transform:none;letter-spacing:0;border-radius:0}
  .header__cat--on{background:transparent;color:#fff}
  .header__cat:hover{background:transparent;opacity:.8}
  .cart-link__count{top:-5px;right:-7px}
  .grid--catalog,.grid--related{grid-template-columns:repeat(3,1fr)}
  .ideas{grid-template-columns:repeat(3,1fr)}
  .features{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr}
  .process__media{min-height:300px}
}
/* En celular: el video completo, centrado en una franja crema comoda */
@media(max-width:720px){
  .topbar{padding:.85rem .9rem}
  .topbar__mensaje{font-size:.95rem;letter-spacing:.8px}
  .hero{min-height:46vh}
  .hero__bajar{bottom:.7rem;width:38px;height:38px}

  .ba-slider__icon{width:36px;height:36px;font-size:.9rem}
  .perks{gap:1.4rem 2rem}
  .perks__item{flex:0 1 140px}
  .grid--catalog,.grid--related{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:1fr}
  .product{grid-template-columns:1fr;gap:1.5rem}
  .cart{grid-template-columns:1fr}
  .cart__summary{position:static}
  .contact{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer__brand{grid-column:1/-1}
  .cart-row{grid-template-columns:70px 1fr auto;grid-template-areas:"img info del" "img qty sub";row-gap:.6rem}
  .cart-row__img{grid-area:img;width:70px;height:70px}
  .cart-row__info{grid-area:info}
  .cart-row__qty{grid-area:qty}
  .cart-row__subtotal{grid-area:sub;justify-self:end}
  .cart-row__del{grid-area:del;justify-self:end}
}
@media(max-width:460px){
  .ideas{grid-template-columns:repeat(2,1fr)}
  .grid--catalog,.grid--related{grid-template-columns:1fr 1fr;gap:.9rem}
  /* "Agregar al carrito" es largo: con el relleno normal no cabe en media
     pantalla y empujaba la rejilla. */
  .card .btn--add{padding-left:.6rem;padding-right:.6rem;font-size:.84rem}
  .brand__text{height:26px}
  .hero{min-height:70vh}
  .footer__grid{grid-template-columns:1fr}
}


/* --- Reseñas de clientes --------------------------------------------------- */
.resenas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
  max-width:var(--max);margin:0 auto;padding:0 1.4rem}
.resena{margin:0;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra-sm);
  display:flex;flex-direction:column}
.resena__foto{width:100%;height:230px;object-fit:cover;display:block;background:#f3ead9}
.resena__cuerpo{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.resena__estrellas{color:var(--oro);font-size:1rem;letter-spacing:2px;line-height:1}
.resena blockquote{margin:0;font-size:.95rem;line-height:1.65;color:var(--tinta);flex:1}
.resena blockquote::before{content:"\201C"}
.resena blockquote::after{content:"\201D"}
.resena figcaption{display:flex;flex-direction:column;gap:.1rem;
  border-top:1px solid var(--linea);padding-top:.7rem}
.resena figcaption strong{color:var(--vino);font-weight:500}
.resena figcaption span{font-size:.82rem;color:var(--gris)}

.product__rating{display:inline-flex;align-items:center;gap:.55rem;margin:-.4rem 0 .9rem;
  font-size:.88rem;color:var(--gris)}
.product__rating:hover{color:var(--vino)}
.product__rating .resena__estrellas{font-size:.95rem}

/* --- Panel: reseñas -------------------------------------------------------- */
.aviso-permiso{background:#fdf8ee;border:1px solid var(--oro);border-left-width:3px;
  border-radius:var(--radio);padding:1rem 1.2rem;margin-bottom:1.6rem}
.aviso-permiso strong{display:block;color:var(--vino);margin-bottom:.3rem}
.aviso-permiso p{font-size:.88rem;color:var(--gris);line-height:1.6;margin:0}
.estrellas{color:var(--oro);letter-spacing:2px}
.resena-fila--oculta{opacity:.55}
.resena-fila__texto{font-size:.93rem;line-height:1.6;color:var(--tinta);margin:.2rem 0 .9rem}
.resena-fila__pie{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.resena-fila__foto{width:90px;height:90px;object-fit:cover;border-radius:10px;
  border:1px solid var(--linea)}
.resena-fila__datos{flex:1;min-width:220px}
.resena-fila__botones{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.resena-fila__botones form{margin:0}
.resena-fila__botones .btn{margin:0;padding:.45rem 1rem;font-size:.8rem}
.btn--peligro{border-color:#e0b4b4;color:#a13f3f}
.btn--peligro:hover{border-color:#a13f3f;color:#a13f3f;background:#fdf2f2}
.campo--check{flex-direction:row;align-items:center;gap:.6rem}
.campo--check input{width:auto}

@media(max-width:900px){
  .resenas{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .resenas{grid-template-columns:1fr}
  .resena__foto{height:200px}
}


@media(max-width:560px){
  .hero__cta{bottom:1.1rem;gap:.5rem;width:min(88%,340px)}
  .hero__btn{width:100%;text-align:center;padding:.8rem 1rem}
}


/* --- Garantías junto al precio (ficha de producto) ------------------------- */
.garantias{list-style:none;margin:1.4rem 0 0;padding:1.1rem 1.2rem;display:grid;gap:.95rem;
  background:#fdfaf4;border:1px solid var(--linea);border-radius:var(--radio)}
.garantia{display:flex;gap:.8rem;align-items:flex-start}
.garantia svg{width:20px;height:20px;flex:0 0 20px;color:var(--oro);margin-top:.15rem}
.garantia strong{display:block;font-size:.92rem;font-weight:500;color:var(--vino);line-height:1.4}
.garantia span{display:block;font-size:.83rem;color:var(--gris);line-height:1.55;margin-top:.15rem}
.garantia a{color:var(--oro-texto);white-space:nowrap}
.garantia a:hover{color:var(--vino);text-decoration:underline}

@media(max-width:520px){
  .garantias{padding:1rem}
  .garantia span{font-size:.8rem}
}


/* --- Reseñas enviadas por clientes ---------------------------------------- */
.resena__sello{display:inline-flex;align-items:center;gap:.3rem;margin-top:.35rem;
  font-size:.76rem;color:#2f7a4a;font-weight:500}
.resena__sello svg{width:13px;height:13px}
.resena figcaption span.resena__sello{color:#2f7a4a}

.pendientes{background:#fdf8ee;border:1px solid var(--oro);border-radius:var(--radio);
  padding:1.3rem 1.4rem;margin-bottom:1.8rem}
.pendientes__tit{font-size:1.05rem;color:var(--vino);margin:0 0 .4rem}
.pendientes__nota{font-size:.85rem;color:var(--gris);line-height:1.6;margin:0 0 1.1rem}
.pendiente{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;
  padding:1rem 1.1rem;margin-bottom:.8rem}
.pendiente:last-child{margin-bottom:0}
.pendiente__cabeza{display:flex;justify-content:space-between;gap:1rem;
  color:var(--vino);margin-bottom:.4rem}

.invita-resena{max-width:640px;margin:2rem auto 3rem;padding:1.6rem 1.4rem;text-align:center;
  background:#fdf8ee;border:1px solid var(--oro);border-radius:var(--radio)}
.invita-resena strong{display:block;font-family:var(--serif);font-size:1.2rem;
  color:var(--vino);margin-bottom:.3rem}
.invita-resena p{font-size:.9rem;color:var(--gris);margin:0 0 1rem}
.consulta__nota{font-size:.8rem;color:var(--gris);line-height:1.6;margin-top:.9rem}


/* --- Ventana de cliente ---------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:1.2rem}
.modal[hidden]{display:none}
.modal__fondo{position:absolute;inset:0;background:rgba(42,24,32,.55);backdrop-filter:blur(2px)}
.modal__caja{position:relative;width:100%;max-width:420px;background:var(--blanco);
  border-radius:18px;padding:1.6rem 1.6rem 1.3rem;box-shadow:0 30px 70px rgba(42,24,32,.3);
  max-height:90vh;overflow-y:auto;animation:modalEntra .22s ease-out}
@keyframes modalEntra{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal__caja{animation:none}}

.modal__cabeza{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:1.2rem}
.modal__cabeza h2{font-family:var(--serif);font-size:1.25rem;color:var(--vino);margin:0}
.modal__x{width:34px;height:34px;flex:0 0 34px;border:0;border-radius:50%;cursor:pointer;
  background:#f3ead9;color:var(--vino);display:grid;place-items:center;transition:background .2s}
.modal__x:hover{background:var(--beige)}

.modal__principal{margin:0}
.modal__ayuda{font-size:.8rem;color:var(--gris);line-height:1.55;margin:.5rem 0 0;text-align:center}

.modal__o{display:flex;align-items:center;gap:.8rem;margin:1.1rem 0;color:var(--gris);
  font-size:.8rem}
.modal__o::before,.modal__o::after{content:"";flex:1;height:1px;background:var(--linea)}

.modal__correo{display:flex;align-items:center;gap:.4rem;border:1px solid var(--linea);
  border-radius:12px;padding:.25rem .3rem .25rem .9rem;background:#fff;transition:border-color .2s}
.modal__correo:focus-within{border-color:var(--oro)}
.modal__correo input{flex:1;border:0;outline:0;background:transparent;padding:.65rem 0;
  font-family:var(--sans);font-size:.93rem;color:var(--tinta);min-width:0}
.modal__correo button{width:36px;height:36px;flex:0 0 36px;border:0;border-radius:9px;cursor:pointer;
  background:var(--vino);color:var(--crema);display:grid;place-items:center;
  font-family:var(--sans);font-size:.75rem;transition:background .2s}
.modal__correo button:hover{background:var(--vino-dark)}
.modal__correo button:disabled{opacity:.6;cursor:default}
.modal__respuesta{text-align:center;margin-top:.6rem;font-size:.84rem;color:#256b39}
.modal__respuesta.news__respuesta--error{color:#a13f3f}

.modal__menu{margin-top:1.4rem;border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.modal__menu a{display:block;padding:.85rem 1.1rem;font-size:.95rem;color:var(--tinta);
  border-top:1px solid var(--linea);transition:background .18s,color .18s}
.modal__menu a:first-child{border-top:0}
.modal__menu a:hover{background:#fdfaf4;color:var(--vino)}

@media(max-width:480px){
  .modal{padding:.8rem;align-items:flex-end}
  .modal__caja{max-width:none;border-radius:18px 18px 0 0;padding:1.3rem 1.2rem 1.1rem}
}


/* --- Botones dentro de páginas legales ------------------------------------- */
/* La regla .legal a pinta los enlaces de dorado y es más específica que .btn,
   así que los botones quedaban con texto dorado sobre fondo dorado. */
.legal a.btn,.legal a.btn:hover{text-decoration:none}
.legal a.btn--gold{color:#fff}
.legal a.btn--ghost{color:var(--vino);border-color:var(--vino)}
.legal a.btn--ghost:hover{background:var(--vino);color:var(--crema)}
.legal a.btn--linea{color:var(--vino)}


/* --- Addi: aviso de compra a cuotas ---------------------------------------- */
.addi{margin:.2rem 0 1rem;min-height:22px}
.addi addi-widget{display:block}
.addi--carrito{margin:.8rem 0 0;padding-top:.8rem;border-top:1px solid var(--linea)}

/* ── Addi como medio de pago en la pantalla de pago ───────────────────── */
.pago-alterno{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--linea);text-align:center}
.pago-alterno__o{display:block;font-size:.78rem;color:var(--gris);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:.6rem}
.btn--addi{background:var(--vino);color:var(--crema);margin-top:0}
.btn--addi:hover{background:var(--vino-dark);color:#fff}
.pago-alterno__nota{font-size:.76rem;color:var(--gris);margin-top:.5rem;line-height:1.5}

/* ── Invitación a Diseña Lucenttia (arriba de los best sellers) ────────── */
/* La seccion propia ya trae su aire arriba y abajo, asi que la tarjeta suelta
   no necesita el margen que usaba cuando iba pegada a "Antes y despues". */
.section--disena{padding-top:1.4rem;padding-bottom:1.4rem}
.invita-disena--suelta{margin-top:0}
.invita-disena{max-width:560px;margin:2rem auto 0;padding:1.8rem 1.6rem;
  background:#fdfaf4;border:1px solid var(--linea);border-radius:var(--radio)}
/* Solo el boton, centrado y sin caja detras. */
.invita-disena--solo{text-align:center}
.invita-disena--solo .btn{margin:0;font-weight:700;padding:.95rem 2.2rem}
.invita-disena__eyebrow{font-family:var(--deco);letter-spacing:2px;text-transform:uppercase;
  font-size:.74rem;color:var(--oro)}
.invita-disena__title{font-family:var(--serif);color:var(--vino);font-size:1.4rem;
  margin:.3rem 0 .6rem;font-weight:400}
.invita-disena__texto{font-size:.9rem;color:#5b4750;margin-bottom:1.2rem}
@media (max-width:640px){
  .invita-disena{padding:1.5rem 1.1rem;margin-top:1.6rem}
  .invita-disena__title{font-size:1.25rem}
}

/* ── Checkout en una sola pantalla ────────────────────────────────────── */
.co{display:grid;grid-template-columns:1fr 400px;max-width:1120px;margin:0 auto;
  background:var(--blanco);border:1px solid var(--linea);border-radius:16px;overflow:hidden;
  box-shadow:var(--sombra)}
.co__form{padding:2rem 1.9rem 2.6rem}
.co__resumen{padding:2rem 1.7rem 2.6rem;background:#faf6ee;border-left:1px solid var(--linea)}
.co__seccion + .co__seccion{margin-top:2rem}
.co__titulo{font-family:var(--serif);font-size:1.18rem;color:var(--vino);font-weight:600;
  margin-bottom:.9rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.co__titulo small{font-family:var(--sans);font-size:.78rem;color:var(--gris);font-weight:400}
.co__ayuda{font-size:.78rem;color:var(--gris);margin-top:.15rem}

/* Campos con etiqueta flotante */
.campo{position:relative;margin-bottom:.7rem}
.campo input,.campo textarea{width:100%;font-family:var(--sans);font-size:.95rem;color:var(--tinta);
  padding:1.35rem .9rem .5rem;border:1px solid var(--linea);border-radius:9px;background:var(--blanco);
  outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.campo textarea{padding-top:1.5rem;resize:vertical;min-height:88px}
.campo input:focus,.campo textarea:focus{border-color:var(--oro);box-shadow:0 0 0 3px rgba(184,148,95,.18)}
.campo label{position:absolute;left:.92rem;top:.95rem;font-size:.95rem;color:var(--gris);
  pointer-events:none;transition:all .14s ease}
.campo input:focus + label,
.campo input:not(:placeholder-shown) + label,
.campo textarea:focus + label,
.campo textarea:not(:placeholder-shown) + label{top:.35rem;font-size:.7rem;color:var(--oro)}
.campo input::placeholder,.campo textarea::placeholder{color:transparent}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}

/* Entrega */
.entrega{border:1px solid var(--linea);border-radius:10px;overflow:hidden;margin-bottom:1rem}
.entrega__fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1rem;font-size:.9rem}
.entrega__fila--activa{background:#fdfaf4;border-left:3px solid var(--oro)}
.entrega__nombre{display:flex;align-items:center;gap:.55rem}
.entrega__radio{width:15px;height:15px;border-radius:50%;border:5px solid var(--oro);flex:none}
.entrega__precio{font-weight:500;color:var(--vino)}
.entrega__gratis{color:#2f7a4f;font-weight:500}

/* Pago */
.pago-zona{transition:opacity .25s ease}
.pago-zona__aviso{font-size:.84rem;color:var(--vino);background:#fdfaf4;border:1px solid var(--linea);
  border-radius:9px;padding:.65rem .85rem;text-align:center;margin-bottom:.9rem}
.pago-zona--bloqueada .pago-zona__cuerpo{opacity:.35;pointer-events:none;filter:grayscale(1)}
.pago-zona--bloqueada .pago-zona__aviso{color:var(--gris)}
.metodo{border:1px solid var(--linea);border-radius:10px;padding:.9rem 1rem;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.8rem}
.metodo__izq{display:flex;align-items:center;gap:.6rem;font-size:.9rem}
.metodo__radio{width:15px;height:15px;border-radius:50%;border:5px solid var(--oro);flex:none}
.metodo__logos{display:flex;gap:.3rem;align-items:center}
.logo{height:19px;border-radius:3px;display:grid;place-items:center;font-size:.55rem;font-weight:700;
  color:#fff;padding:0 .35rem;letter-spacing:.02em}
.logo--visa{background:#1a1f71}
.logo--mc{background:#eb001b}
.logo--pse{background:#0a4d8c}
.logo--nequi{background:#da0081}
.pago-alterno{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--linea);text-align:center}
.pago-alterno__o{display:block;font-size:.76rem;color:var(--gris);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:.6rem}
.btn--addi{background:var(--vino);color:var(--crema);margin-top:0}
.btn--addi:hover{background:var(--vino-dark);color:#fff}
.pago-alterno__nota{font-size:.75rem;color:var(--gris);margin-top:.5rem;line-height:1.5}

/* Resumen */
.res__item{display:flex;gap:.85rem;align-items:flex-start;padding-bottom:1.1rem;
  border-bottom:1px solid var(--linea);margin-bottom:1.1rem}
.res__foto{position:relative;flex:none}
.res__foto img{width:62px;height:62px;object-fit:cover;border-radius:9px;border:1px solid var(--linea)}
.res__cant{position:absolute;top:-7px;right:-7px;background:var(--vino);color:#fff;font-size:.68rem;
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-weight:500}
.res__info{flex:1;min-width:0}
.res__nombre{font-size:.9rem;color:var(--vino);font-weight:500}
.res__detalle{font-size:.76rem;color:var(--gris);margin-top:.15rem}
.res__precio{font-size:.9rem;white-space:nowrap}
.res__linea{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;padding:.28rem 0;color:#5b4750}
.res__gratis{color:#2f7a4f;font-weight:500}
.res__total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-top:1px solid var(--linea);margin-top:.7rem;padding-top:.85rem}
.res__total-nombre{font-family:var(--serif);font-size:1.1rem;color:var(--vino)}
.res__total-valor{font-family:var(--serif);font-size:1.45rem;color:var(--vino)}
.res__total-valor small{font-size:.7rem;color:var(--gris);font-family:var(--sans);margin-right:.3rem}
.res__garantias{list-style:none;margin:1.4rem 0 0;padding:1.1rem 0 0;
  border-top:1px solid var(--linea);display:grid;gap:.55rem}
.res__garantia{display:flex;gap:.5rem;font-size:.79rem;color:#5b4750;align-items:flex-start}
.res__garantia svg{width:15px;height:15px;color:var(--oro);flex:none;margin-top:.15rem}
.res__volver{display:block;margin-top:1.3rem;font-size:.82rem;color:var(--gris);text-align:center}
.res__volver:hover{color:var(--oro)}

@media (max-width:900px){
  .co{grid-template-columns:1fr;border-radius:12px}
  .co__resumen{border-left:none;border-bottom:1px solid var(--linea);order:-1}
  .co__form{padding:1.5rem 1.1rem 2rem}
  .co__resumen{padding:1.4rem 1.1rem 1.6rem}
  .fila2{grid-template-columns:1fr}
}


/* ── Foto que no carga: recuadro propio, nunca una imagen de otro sitio ── */
.img--vacia{
  background:#efe7d9 url("/static/img/isotipo.png") center/38% no-repeat;
  opacity:.5;
}


/* ────────────────────────── Inventario (panel) ────────────────────────── */
.der{text-align:right}

.inv__titulo2{margin-top:2rem}
.inv__intro{max-width:62ch;margin-bottom:1.2rem}

/* Cajas que se abren: agregar insumo, editar, receta de cada producto */
.inv__caja{background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio);padding:.9rem 1.1rem;margin-bottom:1rem}
.inv__abre{cursor:pointer;color:var(--vino);font-size:.95rem;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.inv__abre::-webkit-details-marker{display:none}
.inv__abre::after{content:'+';color:var(--oro);font-size:1.1rem;flex:none}
.inv__caja[open] > .inv__abre{margin-bottom:1rem;padding-bottom:.8rem;
  border-bottom:1px solid var(--linea)}
.inv__caja[open] > .inv__abre::after{content:'−'}
.inv__caja--abierta > .inv__campos{margin-top:0}

.inv__marca{font-family:var(--sans);font-size:.78rem;color:var(--oro);
  white-space:nowrap;margin-left:auto;margin-right:.4rem}
.inv__marca--sin{color:var(--gris)}

/* Formularios del inventario */
.inv__campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:.9rem;margin-bottom:1rem}
.inv__campos--receta{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.inv__campos label{display:block;font-size:.8rem;color:var(--gris)}
.inv__campos input,.inv__campos select{width:100%;margin-top:.3rem;padding:.6rem .7rem;
  border:1px solid var(--linea);border-radius:9px;background:var(--crema);
  font-family:var(--sans);font-size:.95rem;color:var(--tinta)}
.inv__campos input:focus,.inv__campos select:focus{outline:0;border-color:var(--oro);
  background:var(--blanco)}
.inv__form .btn{margin:0}

/* Editar dentro de la tabla */
.inv__editar{position:relative}
.inv__editar > summary{cursor:pointer;list-style:none}
.inv__editar > summary::-webkit-details-marker{display:none}
.inv__editar[open] > summary{color:var(--vino)}
.inv__editar .inv__campos{text-align:left;margin-top:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.inv__editar .admin__nota{text-align:left}
.inv__borrar{margin-top:.8rem;color:var(--vino-soft);font-size:.85rem;padding:.5rem 1rem}
.inv__borrar:hover{background:#fdf3f3;border-color:var(--vino-soft)}

/* La fila de un insumo que se está acabando */
.inv__fila--baja{background:#fdf8ee}
.inv__fila--baja td:first-child{box-shadow:inset 3px 0 0 var(--oro)}

.inv__respaldo{margin:.9rem 0}
.inv__pegar{width:100%;padding:.7rem;border:1px solid var(--linea);border-radius:9px;
  background:var(--crema);font-family:var(--sans);font-size:.88rem;
  color:var(--tinta);resize:vertical;margin-bottom:.7rem}
.inv__pegar:focus{outline:0;border-color:var(--oro);background:var(--blanco)}

@media (max-width:640px){
  .inv__campos{grid-template-columns:1fr}
  .inv__abre{font-size:.9rem}
}
.inv__sembrar{background:#fdf8ee;border:1px solid var(--oro);border-radius:var(--radio);
  padding:1.1rem 1.2rem;margin-bottom:1.4rem}
.inv__sembrar p{font-size:.88rem;color:#5b4750;margin-bottom:.9rem;max-width:62ch}
.inv__sembrar .btn{margin:0}

/* ── Usuarios y bitacora ── */
.inv__etiqueta{display:inline-block;padding:.18rem .6rem;border-radius:20px;
  background:#f6ecd9;color:#8a6a2c;font-size:.76rem;white-space:nowrap}
.inv__fila--apagada{opacity:.55}
.inv__fila--apagada td:first-child{box-shadow:inset 3px 0 0 var(--linea)}
.admin__yo{font-size:.82rem;color:var(--gris);white-space:nowrap}
.admin__yo strong{color:var(--vino);font-weight:500}
.admin-entrar__pista{margin-top:.9rem;font-size:.8rem;color:var(--gris)}

/* ── Categoría que todavía no tiene productos ── */
.proximamente{max-width:480px;margin:1rem auto 4rem;text-align:center;
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:2.4rem 1.8rem}
.proximamente img{width:56px;opacity:.45;margin:0 auto 1rem}
.proximamente h2{font-size:1.3rem;color:var(--vino);margin-bottom:.6rem}
.proximamente p{color:var(--gris);font-size:.92rem;margin-bottom:1.4rem}
.proximamente__botones{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.proximamente__botones .btn{margin:0}

/* ── Letrero corrido de Addi ──
   Dos grupos idénticos uno detrás del otro: la pista se corre justo la mitad
   de su ancho, así que cuando el primer grupo termina de salir el segundo
   está exactamente donde arrancó el primero y el ciclo no tiene costura. */
/* Azul de Addi, tomado de su propio boton en addi.com. Es el color de
   ellos a proposito: el cliente reconoce la marca antes de leer la frase. */
/* max-width y el clip explicito: la pista mide 3072px y en algunos
   navegadores de celular (los de Instagram y Facebook sobre todo) ese ancho
   se le escapaba al overflow:hidden y dejaba la pagina corrible de lado. */
.marquesina{background:#006AFF;overflow:hidden;padding:.75rem 0;
  width:100%;max-width:100%}
.marquesina__pista{display:flex;width:max-content;animation:marquesina-correr 34s linear infinite}
.marquesina__grupo{display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem}
/* Blanco y no crema: sobre este azul el blanco da 4,66:1 y el crema 4,14:1,
   y el minimo para texto pequeno es 4,5:1. */
.marquesina__grupo b{color:#fff;font-size:.88rem;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
.marquesina__grupo i{color:rgba(255,255,255,.65);font-style:normal;font-size:.7rem}
@keyframes marquesina-correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Para poder leerlo si al cliente le interesa */
.marquesina:hover .marquesina__pista{animation-play-state:paused}

/* Texto solo para lectores de pantalla: el letrero repite la frase seis
   veces, y sin esto un lector la leería seis veces seguidas. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .marquesina__pista{animation:none;width:100%;justify-content:center}
  .marquesina__grupo:nth-child(2){display:none}
  .marquesina__grupo b:not(:first-of-type),
  .marquesina__grupo i{display:none}
}
@media(max-width:560px){
  .marquesina{padding:.6rem 0}
  .marquesina__grupo b{font-size:.78rem;letter-spacing:1px}
}

/* Boton en aqua. La letra va vinotinto y no blanca: sobre este aqua el
   blanco da 1,49:1 y no se lee; el vinotinto da 7,43:1. */
.btn--aqua{background:var(--aqua);color:var(--vino);
  box-shadow:0 8px 22px rgba(156,224,219,.45)}
.btn--aqua:hover{background:#8AD8D2;color:var(--vino)}

/* ── Banners de la portada ── */
.hero__slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;
  display:block}
.hero__slide--on{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;display:block}
/* Si el navegador tiene el movimiento reducido, no se rota: se queda el primero. */
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
}

/* ── Best sellers en el panel ── */
.dest__auto{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:#fdfaf4;border:1px solid var(--linea);border-radius:var(--radio);
  padding:.9rem 1.1rem;margin-bottom:1.4rem}
.dest__auto .btn{margin-left:auto}
.dest__titulo{font-size:1.05rem;color:var(--vino);margin:1.6rem 0 .8rem;
  font-weight:600}
.dest__lista{display:grid;gap:.7rem}
.dest__item{display:grid;grid-template-columns:auto 68px 1fr auto;
  align-items:center;gap:1rem;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--radio);padding:.7rem .9rem}
/* La lista de abajo no lleva numero de puesto, asi que va una columna menos. */
.dest__lista--resto .dest__item{grid-template-columns:68px 1fr auto}
.dest__puesto{display:grid;place-items:center;width:28px;height:28px;
  border-radius:50%;background:var(--vino);color:#fff;font-size:.82rem;
  font-weight:600}
.dest__foto{width:68px;height:68px;object-fit:cover;border-radius:10px;
  background:#f3ece4}
.dest__datos{display:grid;gap:.15rem;min-width:0}
.dest__datos strong{color:var(--vino);font-size:.95rem}
.dest__botones{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.dest__botones .btn{padding:.45rem .8rem;font-size:.8rem}
@media (max-width:640px){
  .dest__item{grid-template-columns:auto 56px 1fr;row-gap:.6rem}
  .dest__lista--resto .dest__item{grid-template-columns:56px 1fr}
  .dest__foto{width:56px;height:56px}
  .dest__botones{grid-column:1/-1}
}

/* ── Banners en el panel ── */
.banners{display:grid;gap:1.2rem}
.banner{display:grid;grid-template-columns:260px 1fr;gap:1.3rem;
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio);padding:1.1rem}
.banner--apagado{opacity:.6}
.banner__foto{position:relative;border-radius:10px;overflow:hidden;
  background:var(--crema);aspect-ratio:16/9}
.banner__foto img{width:100%;height:100%;object-fit:cover;display:block}
.banner__puesto{position:absolute;top:8px;left:8px;width:24px;height:24px;
  border-radius:50%;background:var(--vino);color:var(--crema);
  display:grid;place-items:center;font-size:.8rem;font-weight:600}
.banner__oculto{position:absolute;bottom:8px;left:8px;background:var(--vino);
  color:var(--crema);font-size:.72rem;padding:.2rem .6rem;border-radius:20px}
.banner__datos{display:flex;flex-direction:column;gap:.9rem}
.banner__botones{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--linea);padding-top:.9rem}
.banner__botones .btn{margin:0;padding:.45rem 1rem;font-size:.85rem}
@media(max-width:720px){
  .banner{grid-template-columns:1fr}
}
/* Un banner de video se comporta igual que una foto dentro de la portada. */
.hero__slide video{width:100%;height:100%;object-fit:cover;display:block}
.banner__foto video{width:100%;height:100%;object-fit:cover;display:block}
.banner__tipo{position:absolute;top:8px;right:8px;background:var(--vino);
  color:var(--crema);font-size:.7rem;padding:.15rem .5rem;border-radius:20px}

/* Boton vinotinto con letra blanca en negrita. Distinto de .btn--dark, que
   usa crema: aqui el blanco puro da mas contraste (11,07:1) y se ve mas
   firme sobre la foto de la portada. */
.btn--vino{background:var(--vino);color:#fff;font-weight:700;
  box-shadow:0 8px 22px rgba(92,45,61,.35)}
/* Sobre la portada lleva un aro claro: si el banner es oscuro, un boton
   vinotinto sin borde se confunde con el fondo y deja de verse. */
.hero__btn.btn--vino{border:1.5px solid rgba(255,255,255,.55)}
.btn--vino:hover{background:var(--vino-dark);color:#fff}

/* Puntos del banner: cuantos hay y en cual va. */
/* Abajo a la derecha y no al centro: el boton "Ver productos" ya ocupa el
   centro, y uno encima del otro se ve apretado. */
.hero__puntos{position:absolute;right:1.6rem;bottom:1.4rem;z-index:3;
  display:flex;gap:.5rem}
@media(max-width:560px){
  .hero__puntos{right:50%;transform:translateX(50%);bottom:.9rem}
}
.hero__punto{width:10px;height:10px;border-radius:50%;padding:0;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.85);background:transparent;
  transition:background .25s,transform .25s}
.hero__punto--on{background:#fff;transform:scale(1.15)}
.hero__punto:hover{background:rgba(255,255,255,.6)}
.banner__tiempo{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.banner__tiempo label{font-size:.9rem;color:var(--vino);display:flex;
  align-items:center;gap:.5rem}
.banner__tiempo input{width:70px;padding:.5rem .6rem;border:1px solid var(--linea);
  border-radius:9px;background:var(--crema);font-family:var(--letra);
  font-size:.95rem;text-align:center}
.banner__tiempo .btn{margin:0;padding:.5rem 1.2rem;font-size:.85rem}
.banner__tiempo .admin__nota{margin:0;flex:1 1 260px}

/* ── Fotos de producto en el panel ── */
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:1rem;margin:1.2rem 0}
.foto{margin:0;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio);overflow:hidden}
.foto--propia{border-color:var(--oro)}
.foto img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  background:var(--crema)}
.foto figcaption{padding:.6rem;display:flex;flex-wrap:wrap;gap:.4rem;
  align-items:center;justify-content:center;min-height:52px}
.foto__marca{background:var(--vino);color:var(--crema);font-size:.7rem;
  padding:.15rem .6rem;border-radius:20px}
.foto__original{font-size:.75rem;color:var(--gris)}
.foto__botones{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center}
.foto__botones .btn{margin:0;padding:.3rem .7rem;font-size:.78rem}

/* ===========================================================================
   Finanzas del panel
   Solo la ve la dueña. Se usan los mismos colores del resto del panel; lo
   único propio son las tarjetas del resumen y el resaltado de lo pendiente.
   =========================================================================== */
.fin-vacio{background:var(--blanco);border:2px dashed var(--oro-claro);
  border-radius:16px;padding:1.6rem;
  margin:1rem 0 1.5rem;max-width:720px}
.fin-vacio h2{margin:0 0 .5rem}
.fin-vacio p{margin:0 0 1rem;line-height:1.55}
.fin-vacio__nota{font-size:.88rem;color:var(--gris);margin-top:.75rem}

.fin-resumen{display:grid;gap:1rem;margin:1.25rem 0;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fin-tarjeta{background:var(--blanco);border:1px solid var(--linea);
  border-radius:14px;box-shadow:var(--sombra-sm);padding:1.1rem 1.2rem;
  display:flex;flex-direction:column;gap:.25rem;min-width:0}
.fin-tarjeta__rotulo{font-size:.78rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--gris)}
.fin-tarjeta__cifra{font-size:1.6rem;line-height:1.15;word-break:break-word}
.fin-tarjeta__pie{font-size:.82rem;color:var(--gris)}
.fin-tarjeta--gasto{border-left:4px solid var(--vino)}
.fin-tarjeta--venta{border-left:4px solid #2f6f4f}
.fin-tarjeta--bien{border-left:4px solid #2f6f4f}
.fin-tarjeta--mal{border-left:4px solid #9a3b2f}

.fin-aviso{font-size:.88rem;color:var(--gris);margin:-.4rem 0 1.2rem;
  max-width:720px;line-height:1.5}

.fin-columnas{display:grid;gap:1.5rem;margin:1.5rem 0;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.fin-bloque{min-width:0;background:var(--blanco);border:1px solid var(--linea);
  border-radius:14px;padding:1.2rem}
.fin-bloque h2{font-size:1.05rem;margin:0 0 .7rem;letter-spacing:-.2px}
.fin-bloque form{margin-bottom:.9rem}
.fin-pct{color:var(--gris);font-size:.85rem;white-space:nowrap}

/* --- Formularios del módulo -------------------------------------------
   Los campos venían con el estilo crudo del navegador (borde azulado,
   esquinas duras) y desentonaban con el resto de la tienda. Esto los pone
   en la misma paleta: fondo crema, borde arena, foco vino. */
.fin-titulo{margin:2.25rem 0 .9rem;font-size:1.25rem;letter-spacing:-.3px}

.fin-form{background:var(--blanco);border:1px solid var(--linea);
  border-radius:14px;padding:1.4rem;margin-bottom:1.25rem;
  box-shadow:var(--sombra-sm)}
/* Rejilla de 12 columnas: los campos quedan de anchos parejos y decididos,
   no al azar según cuántos haya en la fila. */
.fin-rejilla{display:grid;grid-template-columns:repeat(12,1fr);
  gap:1rem 1.1rem;margin-bottom:1.2rem}
.fin-rejilla .col-3{grid-column:span 3}
.fin-rejilla .col-6{grid-column:span 6}
.fin-form__fila{display:grid;gap:1rem 1.1rem;margin-bottom:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* El rótulo y su aclaración van en la misma línea. Si la aclaración queda
   como hermana del campo, el flex la manda a un renglón aparte y ese campo
   se desalinea de los demás de la fila. */
.fin-cap{display:block;line-height:1.3}
.fin-form label,.fin-bloque label{display:flex;flex-direction:column;gap:.35rem;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--vino);
  min-width:0;text-transform:none}
.fin-form__ancho{grid-column:span 2}
.fin-opc{color:var(--gris);font-weight:400;font-size:.95em}

/* Un solo juego de reglas para todos los campos del módulo. */
.fin-form input[type=text],.fin-form input[type=date],.fin-form select,
.fin-bloque input[type=text],.fin-bloque select,
.fin-filtros input,.fin-filtros select,
.fin-editar input[type=text],.fin-editar input[type=date],.fin-editar select{
  width:100%;box-sizing:border-box;font-family:var(--sans);font-size:.95rem;
  font-weight:400;color:var(--tinta);background:var(--crema);
  border:1px solid var(--linea);border-radius:10px;padding:.65rem .8rem;
  transition:border-color .15s ease, box-shadow .15s ease}
.fin-form input::placeholder,.fin-filtros input::placeholder{color:#a99e95}
.fin-form input:focus,.fin-form select:focus,
.fin-bloque input:focus,.fin-bloque select:focus,
.fin-filtros input:focus,.fin-filtros select:focus,
.fin-editar input:focus,.fin-editar select:focus{
  outline:none;border-color:var(--vino);background:var(--blanco);
  box-shadow:0 0 0 3px rgba(92,45,61,.12)}
.fin-form select,.fin-bloque select,.fin-filtros select,.fin-editar select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C2D3D' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center}

/* El campo de archivo del navegador es feo y además cambia en cada uno.
   Se esconde el botón nativo y se usa la etiqueta como zona para soltar. */
.fin-archivo{position:relative;display:block}
.fin-archivo input[type=file]{width:100%;box-sizing:border-box;font-size:.88rem;
  color:var(--gris);background:var(--crema);border:1px dashed var(--beige);
  border-radius:10px;padding:.55rem .7rem;cursor:pointer}
.fin-archivo input[type=file]::file-selector-button{
  font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--blanco);
  background:var(--vino);border:0;border-radius:8px;padding:.45rem .9rem;
  margin-right:.7rem;cursor:pointer}
.fin-archivo input[type=file]:hover{border-color:var(--vino-soft)}

.fin-filtros{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  background:var(--blanco);border:1px solid var(--linea);border-radius:12px;
  padding:.8rem;margin-bottom:.9rem}
.fin-filtros input,.fin-filtros select{min-width:0;flex:1 1 170px;width:auto}
.fin-filtros .btn{flex:0 0 auto}
.fin-conteo{font-size:.9rem;color:var(--gris);margin:.25rem 0 .75rem}

/* La tabla es ancha a propósito: en el teléfono se desliza en vez de
   apretujarse hasta volverse ilegible. */
.tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla--compacta td{padding:.35rem .5rem;font-size:.9rem}
.num{text-align:right;white-space:nowrap}
.fila--pendiente{background:#fff7f4}
.fin-falta{color:#9a3b2f;font-size:.85rem}
.fin-nota{display:block;color:var(--gris);font-size:.8rem;line-height:1.35}
.fin-enlinea{display:inline-flex;gap:.3rem;align-items:center}
.fin-x{background:none;border:0;color:#9a3b2f;font-size:1.1rem;line-height:1;
  cursor:pointer;padding:0 .25rem}
.fin-editar summary{cursor:pointer;color:var(--oro-texto)}
.fin-editar form{margin-top:.6rem;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--crema);border:1px solid var(--linea);border-radius:12px;
  padding:.9rem}
.fin-editar form .btn{grid-column:1/-1;justify-self:start}
.fin-borrar{margin-top:.5rem}
.fin-cats{list-style:none;padding:0;margin:0 0 .75rem}
.fin-cats li{display:flex;gap:.45rem;align-items:center;margin-bottom:.45rem}
.fin-cats .btn{flex:0 0 auto;padding:.5rem .85rem;font-size:.82rem}
.fin-cats form{margin:0}
.fin-cats input[type=text]{flex:1;min-width:0}

@media (max-width:1000px){
  .fin-rejilla .col-3{grid-column:span 6}
}
@media (max-width:640px){
  .fin-rejilla .col-3,.fin-rejilla .col-6{grid-column:span 12}
  .fin-form__ancho{grid-column:span 1}
  .fin-tarjeta__cifra{font-size:1.35rem}
  .fin-form{padding:1rem}
  .fin-filtros input,.fin-filtros select{flex:1 1 100%}
}

/* El enlace "Repetir" de cada fila: llena el formulario con ese gasto.
   Para los que vuelven cada mes, como la verificación de Apple. */
.fin-repetir{display:inline-block;font-size:.82rem;color:var(--oro-texto);
  margin-bottom:.3rem;text-decoration:none;border-bottom:1px solid transparent}
.fin-repetir:hover{border-bottom-color:var(--oro-texto)}

/* Aire entre los dos formularios del bloque Importar, y una línea fina
   que los separa: antes la nota de uno quedaba pegada al título del otro. */
.fin-bloque .fin-nota{margin:.5rem 0 0;line-height:1.45}
.fin-bloque form + .fin-nota{margin-bottom:1.3rem;padding-bottom:1.3rem;
  border-bottom:1px solid var(--linea)}
.fin-bloque form + .fin-nota:last-child{border-bottom:0;padding-bottom:0;
  margin-bottom:0}
.fin-bloque .btn{margin-top:.7rem}

/* La fila de "Categoría nueva" alineada con las demás: el campo ocupa lo
   mismo aunque no tenga la × al final. */
.fin-cats li,.fin-cats-nueva{display:grid;gap:.45rem;align-items:center;
  grid-template-columns:1fr auto auto;margin-bottom:.45rem}
.fin-cats-nueva{grid-template-columns:1fr auto 1.6rem}
.fin-cats-nueva .btn{margin-top:0}

/* ===========================================================================
   Catálogo en el teléfono
   Dos columnas con las letras y los espacios a escala. Antes se reusaban las
   medidas del computador y entre el nombre, el precio y el botón quedaban
   huecos del tamaño de una línea.
   =========================================================================== */
@media (max-width:560px){
  .grid{gap:1rem .7rem;padding:0 .9rem 2rem}
  .card__body{padding:.5rem .1rem 0;gap:.08rem}
  .card__cat{font-size:.6rem;letter-spacing:.9px}
  .card__title{font-size:.88rem;line-height:1.24;min-height:2.3em}
  .card__price-now{font-size:1rem}
  .card__price-old{font-size:.78rem}
  .card__body > .btn--add,.card__form{margin-top:.4rem}
  .card .btn--add{padding:.62rem .4rem;font-size:.8rem;letter-spacing:.2px}
  .card__badge{top:8px;left:8px;font-size:.62rem;padding:.22rem .5rem}
}
@media (max-width:380px){
  .card__title{font-size:.84rem}
  .card .btn--add{font-size:.75rem;padding:.6rem .3rem}
}