/* --------------------------------------------------------------------------
   Fuentes servidas desde el propio dominio (antes venian de Google Fonts).
   Motivo: el <link> a fonts.googleapis.com bloqueaba el pintado de la pagina y
   encadenaba tres peticiones (DNS -> CSS de Google -> archivos de fuente en
   fonts.gstatic.com). Sirviendolas desde aqui, van en la misma conexion que el
   resto de la web. Los archivos estan en assets/fonts/ (solo alfabeto latino).
   font-display:swap = el texto se ve desde el primer momento con la fuente de
   respaldo, y cambia a la definitiva en cuanto llega (nunca queda en blanco).
   -------------------------------------------------------------------------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/fraunces-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fraunces-latin-600-normal.woff2') format('woff2');}

:root{
  --bg:#fffdfb;
  --bg-panel:#faf3ee;
  --bg-panel-2:#f3e8e0;
  --garnet:#8c1413;
  --garnet-bright:#ad231f;
  --garnet-soft:#fbeae9;
  --text:#241a17;
  --text-muted:#7a6d67;
  --line:#efe3db;
  --line-bright:#e0cfc4;
  --radius-sm:10px;
  --radius-md:20px;
  --radius-lg:36px;
  --radius-pill:999px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.65;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
h1,h2,h3,h4{font-family:'Fraunces','Inter',serif;font-weight:600;letter-spacing:-0.01em;}

/* ---------- header ---------- */
header.site{position:sticky;top:0;background:rgba(255,253,251,0.9);backdrop-filter:blur(10px);z-index:30;border-bottom:1px solid var(--line);}
.headbar{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
.headbar img.logo{height:130px;width:auto;}
nav.navlinks{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
/* En negrita ocupan mas, y con "Ayuda" y "Descargas" son ya siete apartados: sin
   el nowrap se partian por la mitad ("Descarga / Maquetador" en dos lineas). Asi
   cada enlace se queda entero, y si no caben todos, es la fila la que baja. */
nav.navlinks a{font-size:0.86rem;font-weight:700;color:var(--text-muted);padding:9px 12px;border-radius:var(--radius-pill);transition:.2s;white-space:nowrap;}
nav.navlinks a:hover{color:var(--garnet);background:var(--garnet-soft);}
.navcta{background:var(--garnet);color:#fff !important;padding:10px 20px !important;border-radius:var(--radius-pill);font-weight:600;}
.navcta:hover{background:var(--garnet-bright);}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;font-size:0.9rem;cursor:pointer;border:1px solid transparent;font-weight:600;border-radius:var(--radius-pill);transition:.2s;}
.btn-primary{background:var(--garnet);color:#fff;}
.btn-primary:hover{background:var(--garnet-bright);transform:translateY(-1px);}
.btn-ghost{border-color:var(--line-bright);color:var(--text);background:#fff;}
.btn-ghost:hover{border-color:var(--garnet);color:var(--garnet);}

/* ---------- hero: soft silhouette blobs ---------- */
.hero{position:relative;padding:0;overflow:hidden;}
.hero-carrusel{height:480px;}
.hero-slides{display:flex;height:100%;transition:transform .6s ease;}
.hero-slide{width:100%;flex-shrink:0;height:100%;display:flex;align-items:center;justify-content:center;position:relative;padding:90px 0 70px;box-sizing:border-box;}
.hero-slide-imagen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:24px 0;}
.hero-slide-imagen img{max-height:100%;max-width:80%;width:auto;height:auto;object-fit:contain;}
/* Banner de imagen con enlace: la imagen entera se puede pulsar. Si ademas
   lleva texto de boton, el boton va DEBAJO de la imagen y la imagen se encoge
   para dejarle sitio -- flotando encima tapaba justo el centro del logo. */
.hero-slide-imagen{position:relative;}
.hero-imagen-enlace{position:absolute;inset:0;z-index:1;}
.hero-slide-imagen.con-boton{flex-direction:column;gap:18px;}
.hero-slide-imagen.con-boton img{max-height:calc(100% - 70px);}
.hero-imagen-boton{position:relative;z-index:2;display:flex;justify-content:center;}
.hero-puntos{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:2;}
.hero-punto{width:10px;height:10px;border-radius:50%;border:none;background:rgba(0,0,0,0.18);cursor:pointer;padding:0;transition:.2s;}
.hero-punto.activo{background:var(--garnet);width:26px;border-radius:6px;}
.hero::before{
  content:"";position:absolute;top:-180px;right:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--garnet-soft), transparent 70%);z-index:0;
}
.hero::after{
  content:"";position:absolute;bottom:-220px;left:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle at 60% 40%, var(--bg-panel-2), transparent 70%);z-index:0;
}
.hero .wrap{position:relative;z-index:1;}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;color:var(--garnet);font-size:0.8rem;
  letter-spacing:0.06em;background:var(--garnet-soft);padding:8px 16px;border-radius:var(--radius-pill);margin-bottom:22px;
}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:760px;line-height:1.12;}
.hero p{color:var(--text-muted);max-width:520px;margin-top:18px;font-size:1.05rem;}
.hero .actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;}

/* curved divider between hero and catalog */
.curve-divider{position:relative;height:60px;overflow:hidden;}
.curve-divider svg{position:absolute;bottom:0;left:0;width:100%;height:100%;}

/* ---------- category sidebar (desktop) ---------- */
.catalog-layout{display:flex;gap:36px;align-items:flex-start;}
.cat-sidebar{
  width:230px;flex-shrink:0;position:sticky;top:96px;background:#fff;border-radius:var(--radius-lg);
  padding:20px;border:1px solid var(--line);box-shadow:0 14px 34px rgba(140,20,19,0.06);
  display:flex;flex-direction:column;gap:3px;max-height:calc(100vh - 130px);overflow-y:auto;
}
.cat-sidebar-title{font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);padding:4px 12px 10px;}
.cat-sidebar-link{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-pill);
  color:var(--text-muted);font-size:0.86rem;font-weight:600;transition:.18s;
}
.cat-sidebar-link:hover{background:var(--garnet-soft);color:var(--garnet);}
.cat-sidebar-link.active{background:var(--garnet);color:#fff;}
.cat-sidebar-icon{
  width:26px;height:26px;border-radius:50%;background:var(--bg-panel);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;color:var(--garnet);
}
.cat-sidebar-link.active .cat-sidebar-icon{background:rgba(255,255,255,0.25);color:#fff;}
.catalog-content{flex:1;min-width:0;}

/* ---------- category pills (mobile) ---------- */
.cat-mobile-nav{display:none;}
@media(max-width:900px){
  .cat-sidebar{display:none;}
  .cat-mobile-nav{
    display:flex;gap:8px;overflow-x:auto;padding:2px 2px 16px;margin-bottom:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .cat-mobile-nav::-webkit-scrollbar{display:none;}
  .cat-mobile-link{
    flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--radius-pill);
    background:#fff;border:1.5px solid var(--line-bright);color:var(--text-muted);font-size:0.82rem;font-weight:600;white-space:nowrap;
  }
  .cat-mobile-link.active{background:var(--garnet);border-color:var(--garnet);color:#fff;}
}

/* ---------- catalog sections ---------- */
.rollo{padding:50px 0 14px;scroll-margin-top:90px;}
.rollo-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap;}
.rollo-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);}
.rollo-head p{color:var(--text-muted);max-width:480px;margin-top:6px;font-size:0.94rem;}
.rollo-icon{
  width:52px;height:52px;border-radius:50%;background:var(--garnet-soft);color:var(--garnet);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
  display:flex;flex-direction:column;transition:.25s;
}
.card:hover{border-color:var(--line-bright);box-shadow:0 20px 60px -10px rgba(236,72,153,0.45),0 8px 24px rgba(236,72,153,0.25);transform:translateY(-5px);}
.card .photo{aspect-ratio:4/3;background:var(--bg-panel);position:relative;overflow:hidden;}
/* Las fotos van envueltas en <picture> para poder ofrecer la version WebP (mas
   ligera) a quien la entienda. display:contents hace que ese envoltorio no
   pinte nada por su cuenta: la foto se coloca igual que cuando era un <img>
   suelto, sin tocar ni un pixel del diseño. */
.card .photo picture,.hero-slide-imagen picture{display:contents;}
.card .photo img{width:100%;height:100%;object-fit:cover;}
.card .photo .ph-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--line-bright);}
.card .badge{
  position:absolute;bottom:10px;right:10px;width:32px;height:32px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);display:flex;align-items:center;justify-content:center;color:var(--garnet);
}
.card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card h3{font-size:1.05rem;}
.card p{color:var(--text-muted);font-size:0.88rem;flex:1;}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
.card .price{font-weight:700;color:var(--garnet);font-size:0.92rem;}
.card .pedirbtn{
  font-size:0.78rem;color:#fff;background:var(--garnet);padding:8px 16px;border-radius:var(--radius-pill);
}
.card .pedirbtn:hover{background:var(--garnet-bright);}

.empty-note{border:1.5px dashed var(--line-bright);border-radius:var(--radius-md);padding:34px;text-align:center;color:var(--text-muted);grid-column:1/-1;}

footer.site{border-top:1px solid var(--line);padding:40px 0;color:var(--text-muted);font-size:0.85rem;}
.footgrid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.footgrid .logo-footer{height:160px;width:auto;opacity:0.85;}
footer.site a:hover{color:var(--garnet);}

/* ---------- forms ---------- */
.formcard{max-width:460px;margin:70px auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px;box-shadow:0 20px 50px rgba(140,20,19,0.06);}
.formcard h1{font-size:1.6rem;margin-bottom:6px;}
.formcard .sub{color:var(--text-muted);font-size:0.9rem;margin-bottom:26px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:0.78rem;letter-spacing:0.03em;color:var(--text-muted);margin-bottom:7px;}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=tel],.field input[type=number],.field textarea,.field select{
  width:100%;border:1.5px solid var(--line-bright);border-radius:var(--radius-sm);padding:11px 14px;font-family:inherit;font-size:0.94rem;background:#fff;color:var(--text);
}
.field textarea{min-height:90px;resize:vertical;border-radius:16px;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--garnet);}
.msg{padding:13px 16px;font-size:0.88rem;margin-bottom:20px;border-radius:var(--radius-sm);}
.msg.error{background:#fdecea;color:#8a1613;}
.msg.ok{background:#eaf7ec;color:#1c5c26;}
.linksmall{font-size:0.85rem;color:var(--text-muted);margin-top:18px;}
.linksmall a{color:var(--garnet);font-weight:600;}

table.pedidos{width:100%;border-collapse:collapse;font-size:0.92rem;}
table.pedidos th, table.pedidos td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);}
table.pedidos th{color:var(--text-muted);font-weight:600;text-transform:uppercase;font-size:0.72rem;letter-spacing:0.04em;}
.estado{display:inline-block;padding:5px 14px;font-size:0.74rem;border-radius:var(--radius-pill);font-weight:600;}
.estado.recibido{background:#fbf1de;color:#8a6a1c;}
.estado.en_proceso{background:#e4eefb;color:#20548c;}
.estado.finalizado{background:#e5f6e8;color:#1c5c26;}
.estado.cancelado{background:#fdecea;color:#8a1613;font-weight:700;}

.mini-preview{
  width:76px;height:76px;object-fit:contain;background:var(--bg-panel);
  border-radius:8px;border:1px solid var(--line);flex-shrink:0;
  transition:transform .18s ease, box-shadow .18s ease;position:relative;cursor:zoom-in;
}
.mini-preview:hover{transform:scale(2);z-index:30;box-shadow:0 10px 28px rgba(0,0,0,0.28);}
.btn-eliminar-linea{
  background:none;border:1px solid var(--line-bright);color:var(--garnet);
  border-radius:var(--radius-pill);padding:5px 12px;font-size:0.76rem;font-weight:600;cursor:pointer;
}
.btn-eliminar-linea:hover{background:var(--garnet);color:#fff;border-color:var(--garnet);}

.archivos-grupo{display:flex;flex-wrap:wrap;gap:12px;max-width:920px;}

.lightbox-overlay{
  display:none;position:fixed;inset:0;background:rgba(20,14,12,0.85);
  z-index:999;align-items:center;justify-content:center;padding:40px;cursor:zoom-out;
}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,0.5);cursor:default;}
.lightbox-overlay .lightbox-cerrar{
  position:absolute;top:22px;right:28px;color:#fff;font-size:2rem;line-height:1;
  background:none;border:none;cursor:pointer;opacity:0.85;
}
.lightbox-overlay .lightbox-cerrar:hover{opacity:1;}
.archivo-card{width:84px;text-align:center;}
.archivo-card .mini-preview{width:76px;height:76px;}
.archivo-card .archivo-nombre{
  font-size:0.68rem;color:var(--text-muted);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.archivo-card .btn-eliminar-linea{
  display:block;margin-top:4px;padding:2px 8px;font-size:0.68rem;width:100%;
}
.btn-pdf{
  display:inline-flex;align-items:center;gap:6px;background:var(--garnet);color:#fff;
  border:none;border-radius:var(--radius-pill);padding:9px 18px;font-size:0.82rem;font-weight:600;
  cursor:pointer;text-decoration:none;
}
.btn-pdf:hover{background:var(--garnet-bright);}
.btn-pdf-mini{
  display:inline-flex;align-items:center;gap:4px;background:#fff;color:var(--garnet);
  border:1px solid var(--line-bright);border-radius:var(--radius-pill);padding:4px 10px;font-size:0.72rem;font-weight:600;
  text-decoration:none;
}
.btn-pdf-mini:hover{border-color:var(--garnet);}

/* Mis pedidos (cliente): centra las columnas cortas para que no queden
   descolgadas hacia la derecha con tanto hueco vacio alrededor. */
table.pedidos.pedidos-cliente th:nth-child(1),
table.pedidos.pedidos-cliente td:nth-child(1),
table.pedidos.pedidos-cliente th:nth-child(2),
table.pedidos.pedidos-cliente td:nth-child(2),
table.pedidos.pedidos-cliente th:nth-child(5),
table.pedidos.pedidos-cliente td:nth-child(5),
table.pedidos.pedidos-cliente th:nth-child(6),
table.pedidos.pedidos-cliente td:nth-child(6),
table.pedidos.pedidos-cliente th:nth-child(8),
table.pedidos.pedidos-cliente td:nth-child(8),
table.pedidos.pedidos-cliente th:nth-child(10),
table.pedidos.pedidos-cliente td:nth-child(10){
  text-align:center;
}

/* Una tabla que no cabe se arrastra de lado dentro de su propia caja, en vez
   de estirar la pagina entera. La caja la pone assets/js/movil.js. */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}

/* ==========================================================================
   MOVILES Y TABLETS
   ==========================================================================
   Todo lo de aqui abajo solo se aplica en pantallas pequeñas: en el ordenador
   la web se ve exactamente igual que antes. Tres escalones:

     hasta 1024px  -> tablet (iPad en vertical, portatiles pequeños)
     hasta 760px   -> movil grande y tablet en vertical estrecha
     hasta 430px   -> movil normal

   Regla general: en el movil nada se sale a lo ancho, los botones y campos son
   lo bastante grandes para el dedo (44 px de alto minimo, que es lo que
   recomiendan tanto Apple como Google), y la letra no baja de 16 px en los
   campos de escribir -- por debajo de eso el iPhone hace zoom solo al tocarlos
   y deja la pagina descuadrada.
   ========================================================================== */

/* Nada de "overflow-x:hidden" aqui: taparia los desbordes en vez de
   arreglarlos, y ademas rompe la cabecera pegajosa de arriba. Cada sitio que
   se salia esta corregido en su propio apartado mas abajo. */

/* ---------- el boton de tres rayas (solo se ve en pantallas pequeñas) ----- */
.menu-boton{
  display:none;align-items:center;justify-content:center;gap:0;
  width:46px;height:46px;flex-shrink:0;padding:0;
  background:#fff;border:1.5px solid var(--line-bright);border-radius:14px;
  color:var(--garnet);cursor:pointer;transition:.18s;
}
.menu-boton:hover{border-color:var(--garnet);}
.menu-boton .barras{display:block;width:20px;height:14px;position:relative;}
.menu-boton .barras::before,
.menu-boton .barras::after,
.menu-boton .barras span{
  content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:.22s ease;
}
.menu-boton .barras::before{top:0;}
.menu-boton .barras span{top:6px;}
.menu-boton .barras::after{bottom:0;}
/* Abierto: las tres rayas se convierten en una X. */
.menu-abierto .menu-boton .barras::before{top:6px;transform:rotate(45deg);}
.menu-abierto .menu-boton .barras span{opacity:0;}
.menu-abierto .menu-boton .barras::after{bottom:6px;transform:rotate(-45deg);}

@media(max-width:1024px){
  .wrap{padding:0 22px;}
  .headbar img.logo{height:96px;}
  nav.navlinks a{font-size:0.8rem;padding:8px 9px;}
  .footgrid .logo-footer{height:110px;}

  /* ---------- LOS BANNERS ----------
     En el ordenador el carrusel mide 480 px de alto fijos y ahi cabe todo. En
     una pantalla estrecha ese alto fijo hacia dos destrozos: los banners de
     texto se cortaban por abajo (el titulo ocupa el triple de lineas y el
     boton se salia), y los banners de imagen se encogian hasta quedarse en un
     sello de correos, porque la imagen tenia que caber en el alto que sobraba.

     La solucion es dejar de mandar el alto: aqui el carrusel mide lo que mida
     su banner mas alto, y la imagen se pone a todo el ancho, entera. Todos los
     banners comparten alto (align-items:stretch), asi que al pasar de uno a
     otro la pagina no pega saltos. */
  .hero-carrusel{height:auto;}
  .hero-slides{height:auto;align-items:stretch;}
  .hero-slide{
    height:auto;min-height:180px;
    padding:26px 0 46px;   /* el hueco de abajo es para los puntitos */
  }
  .hero-slide-imagen{height:auto;padding:0;}
  /* max-width:100% y nada mas: un banner ancho (los tipicos de 1600x500) se
     pone de lado a lado el solo, y una imagen pequeña se queda a su tamaño en
     vez de estirarse y verse borrosa. El tope de alto es para que un banner
     cuadrado no se coma la pantalla entera y se siga viendo el catalogo. */
  .hero-slide-imagen img{
    max-width:100%;max-height:min(42vh,340px);width:auto;height:auto;
  }
  .hero-slide-imagen.con-boton img{max-height:min(38vh,300px);}
  .hero-puntos{bottom:14px;}
}

/* La cabecera cambia antes que el resto: con siete u ocho apartados en negrita,
   a partir de una tablet en vertical ya no caben en una linea al lado del logo,
   y se partian en dos o tres filas. Desde aqui, boton de tres rayas. */
@media(max-width:900px){
  .headbar{padding:10px 0;gap:12px;}
  .headbar img.logo{height:62px;}
  .menu-boton{display:inline-flex;}

  /* El menu deja de ser una fila y pasa a ser un panel que baja al pulsar.
     Ojo al ".con-menu-boton": el menu solo se esconde si el boton se ha podido
     poner. Si el navegador no ejecuta JavaScript, se queda la lista de siempre
     y la web se puede seguir usando. */
  .con-menu-boton header.site nav.navlinks{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:8px 22px 16px;
    box-shadow:0 18px 30px rgba(140,20,19,0.10);
    max-height:calc(100vh - 90px);overflow-y:auto;
  }
  .menu-abierto header.site nav.navlinks{display:flex;}
  .con-menu-boton header.site nav.navlinks a{
    font-size:1rem;padding:14px 14px;border-radius:12px;text-align:left;
    border-bottom:1px solid var(--line);color:var(--text);
  }
  header.site nav.navlinks a:last-child{border-bottom:none;}
  header.site nav.navlinks .navcta{margin-top:10px;text-align:center;padding:14px 20px !important;}
}

@media(max-width:760px){
  /* ----- portada ----- */
  .hero-slide{padding:22px 0 44px;}
  .hero h1{font-size:clamp(1.7rem,7vw,2.2rem);}
  .hero p{font-size:0.98rem;margin-top:14px;}
  .hero .actions{margin-top:22px;gap:10px;}
  .hero .actions .btn{flex:1 1 100%;justify-content:center;}
  .curve-divider{height:34px;}

  /* ----- catalogo ----- */
  .rollo{padding:30px 0 10px;scroll-margin-top:74px;}
  .rollo-head{margin-bottom:18px;gap:12px;}
  .rollo-icon{width:42px;height:42px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
  .card .body{padding:13px 14px 15px;}
  .card h3{font-size:0.95rem;}
  .card p{font-size:0.8rem;}
  .card .foot{flex-wrap:wrap;gap:8px;}
  .card .pedirbtn{padding:9px 16px;}

  /* ----- formularios ----- */
  .wrap > .formcard,.formcard{margin:26px auto;padding:24px 20px;border-radius:24px;}
  .formcard h1{font-size:1.35rem;}
  .field input[type=text],.field input[type=email],.field input[type=password],
  .field input[type=tel],.field input[type=number],.field textarea,.field select{
    font-size:16px;padding:13px 14px;   /* 16px = el iPhone no hace zoom al tocarlo */
  }
  .field input[type=file]{font-size:0.9rem;width:100%;}
  .btn{padding:14px 22px;min-height:46px;}
  select,button,input[type=submit]{min-height:44px;}

  /* ----- tablas ----- */
  .tabla-scroll{margin:0 -22px;padding:0 22px;}
  table.pedidos{font-size:0.86rem;}
  table.pedidos th,table.pedidos td{padding:8px 9px;}

  /* ----- pie ----- */
  footer.site{padding:26px 0;}
  .footgrid{flex-direction:column;text-align:center;gap:10px;}
  .footgrid .logo-footer{height:88px;margin:0 auto;}

  /* ----- la lupa de las miniaturas no vale con el dedo ----- */
  .mini-preview:hover{transform:none;box-shadow:none;}
  .lightbox-overlay{padding:14px;}
}

@media(max-width:430px){
  .wrap{padding:0 16px;}
  header.site nav.navlinks{padding:8px 16px 14px;}
  .tabla-scroll{margin:0 -16px;padding:0 16px;}
  .headbar img.logo{height:54px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
  .formcard{padding:20px 16px;}
}

/* ---------- el globo del asistente, en el movil ----------
   Lleva los estilos escritos en la propia etiqueta, asi que aqui hace falta
   !important para poder cambiarlos solo en pantallas pequeñas. Se hace mas
   pequeño, se pega mas a la esquina, y se deja un hueco al final de la pagina
   para que no tape el ultimo boton. */
@media(max-width:760px){
  #btnAsistenteIA{width:48px !important;height:48px !important;bottom:14px !important;right:14px !important;}
  #panelAsistenteIA{
    left:10px !important;right:10px !important;bottom:72px !important;
    width:auto !important;max-width:none !important;height:min(68vh,430px) !important;
  }
  body{padding-bottom:70px;}
}

/* ---------- "Mis pedidos": de tabla a fichas en el movil ----------
   Trece columnas no caben en un movil de ninguna manera. En vez de dejar que
   se arrastre de lado, cada pedido pasa a ser una ficha con sus datos uno
   debajo de otro, con el nombre del dato a la izquierda. */
@media(max-width:760px){
  table.pedidos.pedidos-cliente,
  table.pedidos.pedidos-cliente tbody,
  table.pedidos.pedidos-cliente tr,
  table.pedidos.pedidos-cliente td{display:block;width:100%;}
  table.pedidos.pedidos-cliente thead{display:none;}
  table.pedidos.pedidos-cliente tbody tr{
    background:#fff;border:1px solid var(--line);border-radius:18px;
    padding:6px 16px;margin-bottom:14px;position:relative;
    box-shadow:0 6px 18px rgba(140,20,19,0.05);
  }
  /* El nombre del dato va encima, en pequeño, y el dato debajo: asi un dato
     largo (el producto con sus etiquetas, el desglose de tamaños) tiene la
     ficha entera para el, en vez de una columna estrecha a la derecha. */
  table.pedidos.pedidos-cliente td{
    border-bottom:1px solid var(--line);padding:10px 0 11px;
    text-align:left !important;
  }
  table.pedidos.pedidos-cliente td:last-child{border-bottom:none;}
  table.pedidos.pedidos-cliente td[data-etiqueta]::before{
    content:attr(data-etiqueta);display:block;margin-bottom:3px;
    color:var(--text-muted);font-size:0.68rem;font-weight:700;
    text-transform:uppercase;letter-spacing:0.05em;line-height:1.4;
  }
  /* La casilla de marcar y el numero van juntos arriba, como titulo de la ficha. */
  table.pedidos.pedidos-cliente td.celda-marca{
    position:absolute;top:14px;right:14px;width:auto;border:none;padding:0;
  }
  table.pedidos.pedidos-cliente td.celda-numero{
    border-bottom:2px solid var(--line);font-weight:700;font-size:1.15rem;padding-top:14px;
  }
  table.pedidos.pedidos-cliente td.celda-accion{padding-top:12px;}
  table.pedidos.pedidos-cliente td.celda-accion .btn-eliminar-linea{width:100%;padding:11px;font-size:0.85rem;}
  /* Una celda vacia no tiene que dejar un hueco con su etiqueta colgando. */
  table.pedidos.pedidos-cliente td.celda-accion:empty{display:none;}
  /* La fila desplegable de las fotos ocupa la ficha entera. */
  table.pedidos.pedidos-cliente tr.fila-fotos-desplegable{
    background:var(--bg-panel);border-radius:14px;padding:0;margin:-8px 0 14px;
  }
  table.pedidos.pedidos-cliente tr.fila-fotos-desplegable td{
    display:block;padding:14px 16px;border:none;
  }
  table.pedidos.pedidos-cliente tr.fila-fotos-desplegable td::before{content:none;}
}


/* Paginador de "Mis pedidos": la lista viene de 50 en 50 y desde aqui se pasa
   a los anteriores. Son enlaces normales, sin JavaScript. */
.mis-paginador{display:flex;align-items:center;justify-content:center;gap:16px;
               flex-wrap:wrap;margin:22px 0 6px;font-size:0.88rem;color:var(--text-muted);}
.mis-paginador b{color:var(--text);}
@media (max-width:640px){ .mis-paginador{gap:10px;font-size:0.82rem;} }