/* =========================================================
   Maderas Bedia y Cabarga - estilos
   Colores de la marca (logotipo y web anterior): verde #066F39, naranja #F37D20,
   crema #FEE4C3, verde gris #8BA095, marrón #5B321F
   ========================================================= */
/* Montserrat servida desde la propia web (variable, pesos 400 a 700), sin pasar por Google Fonts */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --verde: #066F39;
  --verde-osc: #04522A;
  --verde-claro: #E6F1EA;
  --naranja: #F37D20;
  --naranja-osc: #C95F0C;
  /* Fondo de botones y distintivos con texto o icono blanco: el naranja de marca da 2,7:1 con blanco; este, 5,1:1 */
  --naranja-boton: #B4520A;
  --naranja-boton-osc: #9A4507;
  /* Anillo de foco: el naranja de marca da 2,7:1 sobre blanco; este, 5,1:1. En fondos oscuros se cambia a --crema */
  --foco: var(--naranja-boton);
  --crema: #FEE4C3;
  --crema-suave: #FBF6EE;
  --salvia: #8BA095;
  --marron: #5B321F;
  --texto: #2F2A26;
  --texto-suave: #5E5650;
  --borde: #E4DCD0;
  --blanco: #fff;
  --rojo: #B3261E;
  --radio: 10px;
  --sombra: 0 2px 10px rgba(47, 42, 38, .08);
  --sombra-fuerte: 0 10px 30px rgba(47, 42, 38, .16);
  --fuente: 'Montserrat', Arial, Helvetica, sans-serif;
  --margen: clamp(16px, 3vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); font-size: 1rem; line-height: 1.6; color: var(--texto); background: var(--blanco); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verde); text-decoration: none; }
a:hover { color: var(--verde-osc); }
/* Sin subrayado: los enlaces dentro de un texto se distinguen por el verde y la seminegrita (no solo por el color) */
main :is(p, dd, label, small) a:not(.btn), .texto-legal li a, .aviso a, .nota a { font-weight: 600; }
h1, h2, h3 { line-height: 1.25; color: var(--texto); margin: 0 0 .6em; text-wrap: balance; }
.articulo-card__titulo, .categoria-card__titulo { text-wrap: balance; }
h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 700; }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.topbar, .hero, .section--verde, #site-footer, .lightbox { --foco: var(--crema); }
.container { width: 100%; margin: 0 auto; padding: 0 var(--margen); }
.container--estrecho { max-width: 860px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sin-partir { white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--verde); color: #fff; padding: .6rem 1rem; z-index: 2000; }
.saltar:focus { left: 8px; top: 8px; color: #fff; }

/* ── Botones ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.4rem; border-radius: 999px; border: 2px solid transparent; font: 600 .95rem/1.2 var(--fuente); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--naranja-boton); color: #fff; }
.btn-primary:hover { background: var(--naranja-boton-osc); color: #fff; }
.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:hover { background: var(--verde-osc); color: #fff; }
.btn-ghost { background: transparent; color: var(--verde); border-color: var(--verde); }
.btn-ghost:hover { background: var(--verde); color: #fff; }
.btn-ghost--claro { color: #fff; border-color: rgba(255,255,255,.8); }
.btn-ghost--claro:hover { background: #fff; color: var(--verde); }
/* Verde WhatsApp oscurecido: el oficial #25D366 da 2:1 con texto blanco */
.btn-whatsapp { background: #0E7A43; color: #fff; }
.btn-whatsapp:hover { background: #0A6436; color: #fff; }
.btn-whatsapp svg { width: 20px; height: 20px; }
.btn-bloque { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--verde); font: inherit; font-weight: 600; cursor: pointer; }
.enlace-boton:hover { color: var(--verde-osc); }

/* ── Barra superior ── */
.topbar { background: var(--verde-osc); color: #fff; font-size: .82rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--crema); }
.topbar__datos, .topbar__redes { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.topbar__datos > * { display: inline-flex; align-items: center; gap: .4rem; }
.topbar svg { width: 14px; height: 14px; flex-shrink: 0; }
.topbar__horario { opacity: .85; }

/* ── Cabecera ── */
#site-header { position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,.97); box-shadow: 0 1px 0 var(--borde); }
.header-bar { display: flex; align-items: center; gap: 1.5rem; min-height: 96px; }
.header-logo { flex-shrink: 0; }
.header-logo img { width: 340px; height: auto; }
.main-nav { flex: 1; }
.main-nav__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: .2rem; }
.main-nav__list > li { position: relative; }
.main-nav__list > li > a { display: block; padding: .6rem .8rem; white-space: nowrap; font-weight: 600; font-size: .92rem; color: var(--texto); text-decoration: none; border-radius: 6px; }
.main-nav__list > li > a:hover, .main-nav__list > li.is-active > a { color: var(--verde); background: var(--verde-claro); }
.header-acciones { display: flex; align-items: center; gap: .4rem; }
.header-icono { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .5rem; border-radius: 999px; color: var(--texto); text-decoration: none; }
.header-icono:hover, .header-icono.is-active { color: var(--verde); background: var(--verde-claro); }
.header-icono svg { width: 24px; height: 24px; }
.header-cuenta.is-logged::after { content: ''; position: absolute; top: 6px; left: 24px; width: 9px; height: 9px; border-radius: 50%; background: #2DB45A; border: 2px solid #fff; }
.header-cuenta__nombre { font-size: .82rem; font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-cart__num { position: absolute; top: 0; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--naranja-boton); color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.header-cart__num[hidden] { display: none; }

/* Buscador de la cabecera */
.header-buscar { display: flex; align-items: center; background: var(--crema-suave); border: 1px solid var(--borde); border-radius: 999px; padding: 0 .3rem 0 .9rem; width: 240px; }
.header-buscar input { flex: 1; width: auto; min-width: 0; border: 0 !important; box-shadow: none !important; border-radius: 0; background: transparent; font: inherit; font-size: .88rem; padding: .55rem 0; color: var(--texto); }
.header-buscar input:focus { outline: none; }
.header-buscar:focus-within { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.header-buscar button { border: 0; background: none; color: var(--verde); padding: .35rem; cursor: pointer; display: flex; }
.header-buscar svg { width: 20px; height: 20px; }

/* Desplegable de productos (familias > subfamilias), accesible por teclado */
.nav__dropdown { list-style: none; margin: 0; padding: .4rem 0; position: absolute; top: 100%; left: 0; min-width: 260px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-fuerte); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 950; }
.nav__dropdown .nav__dropdown { top: -.4rem; left: 100%; }
.nav__dropdown--scroll { max-height: 70vh; overflow-y: auto; }
.nav__dropdown li { position: relative; }
.nav__dropdown a { display: block; padding: .45rem 1.1rem; color: var(--texto); text-decoration: none; font-size: .88rem; }
.nav__dropdown a:hover { background: var(--verde-claro); color: var(--verde); }
.nav__has-sub > a::after { content: '›'; float: right; margin-left: .8rem; color: var(--salvia); }
.main-nav__list > .nav__has-sub > a::after { float: none; margin-left: .35rem; }
.main-nav__list > li:hover > .nav__dropdown,
.nav__dropdown li:hover > .nav__dropdown,
.main-nav__list li.is-open > .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
/* Con teclado el desplegable se abre con este botón, colocado sobre la flecha; así el tabulador no recorre todo el menú */
@media (min-width: 981px) {
  .nav__sub-toggle { position: absolute; top: 0; right: 0; bottom: 0; width: 1.2rem; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
  .nav__dropdown .nav__sub-toggle { width: 1.8rem; }
}
.main-nav__toggle { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 10px; flex-direction: column; justify-content: space-between; }
.main-nav__toggle span { display: block; height: 3px; background: var(--texto); border-radius: 2px; transition: transform .2s, opacity .2s; }
.main-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.main-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.main-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

@media (max-width: 1400px) {
  .header-logo img { width: 255px; }
  .header-buscar { width: 200px; }
}
@media (max-width: 1250px) {
  .header-cuenta__nombre { display: none; }
}
@media (max-width: 1150px) {
  .header-buscar { width: 180px; }
  .header-logo img { width: 195px; }
  .main-nav__list > li > a { padding: .6rem .55rem; }
}
@media (max-width: 1060px) {
  .header-bar { gap: 1rem; }
  .header-buscar { width: 150px; }
}
@media (max-width: 980px) {
  .topbar__horario { display: none; }
  .header-bar { flex-wrap: wrap; gap: .5rem 1rem; min-height: 64px; padding-top: .5rem; padding-bottom: .5rem; }
  .header-logo img { width: 260px; }
  .header-acciones { margin-left: auto; }
  .header-buscar { order: 3; width: 100%; margin-bottom: .2rem; }
  .main-nav { order: 4; flex-basis: 100%; }
  .main-nav__toggle { display: flex; }
  .main-nav__list { display: none; flex-direction: column; gap: 0; padding: .4rem 0 1rem; max-height: calc(100vh - 140px); overflow-y: auto; }
  .main-nav__list.is-open { display: flex; }
  .main-nav__list > li { border-bottom: 1px solid var(--borde); }
  .main-nav__list > li > a { padding: .8rem .2rem; border-radius: 0; }
  .nav__dropdown, .nav__dropdown .nav__dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; display: none; min-width: 0; padding: 0 0 .4rem .9rem; max-height: none; }
  .is-open > .nav__dropdown { display: block; }
  .nav__has-sub > a::after { content: none; }
  .nav__sub-toggle { display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
  .nav__sub-toggle::before { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave); transform: rotate(45deg); transition: transform .2s; }
  .is-open > .nav__sub-toggle::before { transform: rotate(-135deg); }
  .main-nav__list li:hover > .nav__dropdown { display: none; }
  .main-nav__list li.is-open > .nav__dropdown { display: block; }
  .header-cuenta__nombre { display: none; }
}
@media (max-width: 520px) {
  .topbar__datos .topbar__email { display: none; }
  .header-logo img { width: 245px; }
}
/* Texto ampliado con el widget: la cabecera pasa a dos filas y deja de ser fija para no ocupar media pantalla */
html.a11y-texto-grande #site-header { position: static; }
html.a11y-texto-grande body { overflow-wrap: anywhere; }
html.a11y-texto-grande .header-bar { flex-wrap: wrap; gap: .5rem 1rem; min-height: 0; padding-top: .5rem; padding-bottom: .5rem; }
html.a11y-texto-grande .header-acciones { margin-left: auto; }
@media (min-width: 981px) {
  html.a11y-texto-grande .main-nav { order: 4; flex-basis: 100%; }
  html.a11y-texto-grande .main-nav__list { flex-wrap: wrap; }
  html.a11y-texto-grande .header-buscar { flex: 1 1 14rem; width: auto; max-width: 28rem; margin-left: auto; }
}
/* Con el menú móvil abierto, los elementos flotantes no tapan sus opciones */
@media (max-width: 980px) {
  body:has(.main-nav__list.is-open) :is(.a11y-widget, .whatsapp-float, .back-to-top, .cookie-aviso) { visibility: hidden; }
}
/* Zonas táctiles: teléfonos e iconos de la barra superior y migas, al menos 32 px de alto */
.topbar__datos a, .topbar__redes a { display: inline-flex; align-items: center; min-height: 32px; }
.topbar__redes a { min-width: 32px; justify-content: center; }
.migas a { display: inline-block; padding: .35rem 0; }
@media (max-width: 600px) {
  /* 16 px: con menos, el iPhone amplía la página al tocar el buscador */
  .header-buscar input, .hero__buscar input, .buscador input { font-size: 16px; }
}
@media (max-width: 440px) {
  .header-logo img { width: 185px; }
}
@media (max-width: 400px) {
  .header-logo img { width: 170px; }
}
@media (max-width: 355px) {
  .header-logo img { width: 155px; }
}
@media (max-width: 340px) {
  .header-logo img { width: 135px; }
}

/* ── Portada ── */
.hero { position: relative; color: #fff; background: var(--marron) url('../img/banner.jpg') center/cover no-repeat; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(52,27,14,.88) 0%, rgba(70,38,20,.62) 55%, rgba(91,50,31,.2) 100%); }
@media (max-width: 700px) {
  .hero { background-image: url('../img/banner-movil.webp'); }
  .hero::before { background: rgba(52,27,14,.74); }
}
.hero .container { position: relative; padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
.hero__texto { max-width: 640px; }
.hero h1 { color: #fff; font-size: clamp(1.8rem, 4.2vw, 3rem); }
.hero p { font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(255,255,255,.92); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.hero__buscar { display: flex; max-width: 560px; margin-top: 1.6rem; background: #fff; border-radius: 999px; padding: .3rem; box-shadow: var(--sombra-fuerte); }
.hero__buscar input { flex: 1; width: auto; min-width: 0; border: 0 !important; box-shadow: none !important; padding: .7rem 1rem; font: inherit; border-radius: 999px; color: var(--texto); }
.hero__buscar input:focus { outline: none; }

.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section--crema { background: var(--crema-suave); }
.section--verde { background: var(--verde); color: #fff; }
.section--verde h2, .section--verde h3 { color: #fff; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 2.2rem; }
.section-head p { color: var(--texto-suave); }

/* Ventajas (datos de "La empresa") */
.ventajas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.ventaja { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.4rem; }
.ventaja__icono { width: 48px; height: 48px; border-radius: 12px; background: var(--crema); color: var(--marron); display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.ventaja__icono svg { width: 26px; height: 26px; }
.ventaja h3 { font-size: 1rem; margin-bottom: .4rem; }
.ventaja p { font-size: .9rem; color: var(--texto-suave); margin: 0; }
@media (max-width: 900px) { .ventajas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ventajas { grid-template-columns: 1fr; } }

.empresa { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 860px) { .empresa { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Tarjetas de familias (portada y catálogo) */
.categorias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }
.categoria-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; text-decoration: none; color: var(--texto); transition: box-shadow .2s, transform .2s, border-color .2s; position: relative; }
.categoria-card:hover { box-shadow: var(--sombra-fuerte); transform: translateY(-3px); border-color: var(--salvia); color: var(--texto); }
.categoria-card__media { aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid var(--borde); display: flex; }
.categoria-card__media img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; }
.categoria-card__cuerpo { flex: 1; padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; background: var(--verde-claro); }
.categoria-card__titulo { font-size: 1rem; font-weight: 700; margin: 0; color: var(--verde-osc); }
.categoria-card__n { font-size: .78rem; font-weight: 600; color: var(--naranja-boton-osc); }
.categoria-card__texto { font-size: .85rem; color: var(--texto-suave); }
.categoria-card__flecha { position: absolute; right: .9rem; bottom: .8rem; color: var(--verde); font-size: 1.2rem; transition: transform .2s, color .2s; }
.categoria-card:hover .categoria-card__flecha { transform: translateX(3px); color: var(--naranja); }
@media (max-width: 520px) {
  /* Familias a dos columnas: la portada pasa de una tira de 14 tarjetas a 7 filas */
  .categorias-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .categoria-card__cuerpo { padding: .6rem .7rem .8rem; }
  .categoria-card__titulo { font-size: .9rem; line-height: 1.25; }
  .categoria-card__texto, .categoria-card__flecha { display: none; }
}

/* Servicios (corte, canteado, reparto) */
.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.servicio { padding: 1.6rem; border-radius: var(--radio); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.servicio svg { width: 34px; height: 34px; color: var(--crema); margin-bottom: .7rem; }
.servicio p { color: rgba(255,255,255,.95); margin: 0; font-size: .95rem; }
@media (max-width: 860px) { .servicios { grid-template-columns: 1fr; } }

/* Marcas */
.marcas { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; list-style: none; padding: 0; margin: 0; }
.marcas li { display: flex; align-items: center; justify-content: center; width: 150px; min-height: 84px; padding: .8rem; border: 1px solid var(--borde); border-radius: var(--radio); font-weight: 600; font-size: .95rem; color: var(--marron); background: #fff; }

/* FAQ */
.faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: .7rem; }
.faq-item { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: 1rem 1.2rem; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; flex-shrink: 0; width: 9px; height: 9px; border-right: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(45deg); transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item p { padding: 0 1.2rem 1.1rem; margin: 0; color: var(--texto-suave); }

/* Bloque de contacto final */
.cta-contacto { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cta-contacto p { margin: 0; color: rgba(255,255,255,.9); }
.cta-contacto__acciones { display: flex; gap: .8rem; flex-wrap: wrap; }

.kit-digital { padding: 1.4rem 0; background: #fff; border-top: 1px solid var(--borde); }
.kit-digital img { margin: 0 auto; width: 100%; max-width: 620px; }

/* ── Páginas interiores ── */
.cabecera-pagina { background: var(--crema-suave); border-bottom: 1px solid var(--borde); padding: 1.6rem 0 1.4rem; }
.cabecera-pagina h1 { margin: 0; }
.cabecera-pagina p { margin: .5rem 0 0; color: var(--texto-suave); }
.migas ol { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; font-size: .8rem; color: var(--texto-suave); }
.migas li + li::before { content: '›'; margin: 0 .35rem; color: var(--salvia); }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--verde); }
.texto-legal { padding: 2.5rem 0 3.5rem; }
.texto-legal .container { max-width: calc(1200px + 2 * var(--margen)); } /* mismo ancho de contenido que .contact-grid */
.texto-legal h2 { font-size: 1.25rem; margin-top: 2rem; color: var(--verde-osc); }
.texto-legal h2:first-child { margin-top: 0; }
.texto-legal h3 { margin-top: 1.4rem; }
.texto-legal ul, .texto-legal ol { padding-left: 1.3rem; }
.texto-legal li { margin-bottom: .4rem; }
/* Justificado solo en pantallas anchas: en móvil abriría huecos grandes entre palabras */
@media (min-width: 700px) { .texto-legal p, .texto-legal li { text-align: justify; hyphens: auto; } }
.texto-legal p, .texto-legal li { max-width: 46rem; } /* unos 85 caracteres por línea; las tablas siguen a todo el ancho */
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1rem 0 1.5rem; }
.tabla th, .tabla td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { background: var(--crema-suave); font-weight: 600; }
.tabla td.num, .tabla th.num { text-align: right; white-space: nowrap; }
.tabla-scroll { overflow-x: auto; }
/* Enlaces de interés: logos de marcas */
.enlaces-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fit, 200px); justify-content: center; gap: 1rem; }
.enlaces-grid a, .enlaces-grid__sin-enlace { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; height: 100%; min-height: 150px; padding: 1.4rem 1rem; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); text-decoration: none; color: var(--texto); font-weight: 600; font-size: .9rem; transition: box-shadow .2s, border-color .2s; }
.enlaces-grid a:hover, .enlaces-grid a:focus-visible { border-color: var(--verde); box-shadow: var(--sombra); }
.enlaces-grid img { width: 110px; height: 56px; object-fit: contain; }
@media (max-width: 460px) { .enlaces-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; } }
.datos-empresa { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; background: var(--crema-suave); padding: 1.2rem 1.4rem; border-radius: var(--radio); }
.datos-empresa dt { font-weight: 600; }
.datos-empresa dd { margin: 0; }
@media (max-width: 560px) { .datos-empresa { grid-template-columns: 1fr; } .datos-empresa dd { margin-bottom: .5rem; } }

.pasos { counter-reset: paso; list-style: none; padding: 0 !important; display: grid; gap: .7rem; }
.pasos li { counter-increment: paso; position: relative; padding: .9rem 1rem .9rem 3.4rem; background: var(--crema-suave); border-radius: var(--radio); margin: 0 !important; }
.pasos li::before { content: counter(paso); position: absolute; left: 1rem; top: .85rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--verde); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.caja-destacada { border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.2rem; background: var(--crema-suave); margin: 1rem 0; }


/* Contacto */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; max-width: 1200px; margin: 0 auto; align-items: start; }
.mapa-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 260px; border-radius: var(--radio); background: var(--crema-suave); border: 1px solid var(--borde); text-align: center; padding: 1.2rem; }
.mapa-placeholder p { margin: 0; color: var(--texto-suave); font-size: .9rem; }
#mapa:has(iframe) { border: 0; padding: 0; min-height: 0; display: block; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .9rem; }
.contact-info li { display: flex; gap: .8rem; align-items: flex-start; }
.contact-info svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--verde); margin-top: 2px; }
.contact-info strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.mapa { border: 0; width: 100%; height: 340px; border-radius: var(--radio); display: block; }

/* ── Formularios ── */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
:where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], select, textarea), .campo {
  width: 100%; padding: .55rem .8rem; border: 1px solid #CFC5B7; border-radius: 8px; font: inherit; font-size: .92rem; color: var(--texto); background: #fff; }
:where(input, select, textarea):focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
::placeholder { color: #6B635C; opacity: 1; }
textarea { resize: vertical; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.campo-ancho { grid-column: 1 / -1; }
@media (max-width: 600px) { .campos-2 { grid-template-columns: 1fr; } }
:where(input, select, textarea):disabled { background: var(--crema-suave); color: var(--texto-suave); cursor: not-allowed; }
/* Rejilla de 6 columnas: cada campo ocupa lo que necesita su dato (c2 = un tercio, c3 = mitad, c4 = dos tercios) */
.campos-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 1rem; }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c6 { grid-column: span 6; }
.form-group small.nota { display: block; margin-top: .3rem; font-size: .78rem; }
.opcional { font-weight: 400; color: var(--texto-suave); }
.form-datos { max-width: 720px; }
.form-datos fieldset { border: 0; padding: 0; margin: 0 0 .8rem; }
.form-datos legend { font-weight: 700; color: var(--verde-osc); padding: 0; margin-bottom: .8rem; padding-bottom: .4rem; border-bottom: 1px solid var(--borde); width: 100%; }
.form-datos .form-submit { justify-content: flex-start; margin-top: 1rem; }
@media (max-width: 600px) {
  .campos-6 .form-group { grid-column: span 6; }
  .campos-6 .c-cp { grid-column: span 2; }
  .campos-6 .c-localidad { grid-column: span 4; }
  :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], select, textarea) { font-size: 16px; }
}
.casilla { display: flex !important; align-items: flex-start; gap: .55rem; font-weight: 400 !important; font-size: .88rem; cursor: pointer; margin-bottom: .5rem; }
.casilla input { margin-top: .25rem; width: 16px; height: 16px; accent-color: var(--verde); flex-shrink: 0; }
.opciones-radio { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; }
.rgpd-texto { font-size: .76rem; color: var(--texto-suave); line-height: 1.55; background: var(--crema-suave); border: 1px solid var(--borde); border-radius: 8px; padding: .85rem 1rem; margin-bottom: 1rem; }
.captcha-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.captcha-row img { border-radius: 6px; border: 1px solid var(--borde); }
.captcha-refresh { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borde); background: #fff; cursor: pointer; font-size: 1.2rem; }
.captcha-input { text-transform: uppercase; letter-spacing: 4px; max-width: 200px; }
.form-submit { display: flex; justify-content: center; }
.form-status { margin: .8rem 0 0; font-size: .9rem; min-height: 1.2em; }
.form-status.is-success { color: var(--verde); font-weight: 600; }
.form-status.is-error { color: var(--rojo); font-weight: 600; }
:where(input, select, textarea)[aria-invalid="true"] { border-color: var(--rojo); box-shadow: 0 0 0 3px #F7E3E1; }
.casilla input[aria-invalid="true"] { outline: 2px solid var(--rojo); outline-offset: 2px; }
.campo-error { margin: .3rem 0 0; font-size: .82rem; font-weight: 600; color: var(--rojo); }
.pedido-sin-pago { margin: .2rem 0 .7rem; font-size: .85rem; line-height: 1.45; color: var(--texto); }
.nota { font-size: .85rem; color: var(--texto-suave); }
.aviso { padding: 1.2rem 1.4rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--crema-suave); overflow-wrap: anywhere; }
.aviso--suave { background: var(--verde-claro); border-color: #C6DDCE; }
.aviso--centro { text-align: center; max-width: 640px; margin: 2rem auto; }
.opcion-tarjeta { display: flex !important; gap: .7rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; cursor: pointer; margin-bottom: .6rem; font-weight: 400 !important; }
.opcion-tarjeta:has(input:checked) { border-color: var(--verde); box-shadow: 0 0 0 2px var(--verde-claro); }
.opcion-tarjeta input { margin-top: .3rem; accent-color: var(--verde); }
.opcion-tarjeta strong { display: block; }
.opcion-tarjeta small { color: var(--texto-suave); }

/* ── Tienda: cabecera del catálogo y filtros ── */
.tienda { padding-bottom: 3rem; }
.tienda-cabecera { background: var(--crema-suave); border-bottom: 1px solid var(--borde); padding: 1.4rem 0; margin-bottom: 1.6rem; }
.tienda-cabecera h1 { margin-bottom: .8rem; }
.buscador-zona { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.buscador { display: flex; align-items: center; gap: .4rem; flex: 1 1 320px; min-width: 0; max-width: 640px; background: #fff; border: 1px solid #CFC5B7; border-radius: 999px; padding: .25rem .25rem .25rem 1rem; }
.buscador svg { width: 20px; height: 20px; color: var(--texto-suave); flex-shrink: 0; }
.buscador input { width: auto; flex: 1; min-width: 0; border: 0 !important; padding: .55rem .2rem; box-shadow: none !important; }
.buscador .btn { padding: .6rem 1.2rem; }
.filtros-rapidos { display: flex; flex-wrap: wrap; gap: .6rem; }
.filtros-rapidos select { width: auto; border-radius: 999px; padding: .55rem 2rem .55rem 1rem; }
.segmento { display: inline-flex; flex-wrap: wrap; border: 1px solid #CFC5B7; border-radius: 22px; padding: 3px; margin: 0; background: #fff; }
.segmento label { margin: 0; cursor: pointer; }
.segmento input { position: absolute; opacity: 0; }
.segmento span { display: block; padding: .4rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--texto-suave); }
.segmento input:checked + span { background: var(--verde); color: #fff; }
.segmento input:focus-visible + span { outline: 3px solid var(--foco); }

.categorias-barra, .tienda-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.categorias-barra p, .tienda-barra p { margin: 0; color: var(--texto-suave); }
.tienda-barra__limpiar { margin-left: .8rem; font-size: .85rem; }
.tienda-barra__filtros { display: none; }
.tienda-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; align-items: start; }
.tienda-lateral { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; }
.filtro__titulo { font-size: 1rem; margin-bottom: .6rem; }
.filtro__volver { display: inline-block; font-size: .85rem; margin-bottom: .6rem; }
.filtro__cats { list-style: none; margin: 0; padding: 0; }
.filtro__cats a { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem .6rem; border-radius: 6px; color: var(--texto); text-decoration: none; font-size: .88rem; }
.filtro__cats a:hover { background: var(--verde-claro); color: var(--verde); }
.filtro__cats a[aria-current] { background: var(--verde); color: #fff; font-weight: 600; }
.filtro__cats a span { color: var(--texto-suave); font-size: .78rem; }
.filtro__cats a[aria-current] span { color: rgba(255,255,255,.85); }
.filtro__padre a { font-weight: 700; color: var(--verde-osc); }
@media (max-width: 900px) {
  .tienda-layout { grid-template-columns: minmax(0, 1fr); }
  .tienda-lateral { display: none; position: static; max-height: none; background: var(--crema-suave); border-radius: var(--radio); padding: 1rem; }
  .tienda-lateral.is-open { display: block; }
  .tienda-barra__filtros { display: inline-flex; padding: .5rem 1rem; }
}

/* Tarjetas de artículo */
.articulos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.articulos-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .articulos-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .articulos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }
.articulo-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.articulo-card:hover { box-shadow: var(--sombra-fuerte); border-color: var(--salvia); }
.articulo-card__media { position: relative; aspect-ratio: 4 / 3; display: block; background: #fff; border-bottom: 1px solid var(--borde); }
.articulo-card__media img { width: 100%; height: 100%; object-fit: contain; }
.articulo-card__cuerpo { padding: .8rem .9rem .9rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; background: var(--verde-claro); }
.articulo-card__titulo { font-size: .88rem; font-weight: 600; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.articulo-card__titulo a { color: var(--texto); text-decoration: none; }
.articulo-card__titulo a:hover { color: var(--verde); }
.articulo-card__ref { font-size: .74rem; color: var(--texto-suave); margin: 0; }
.articulo-card__pie { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.articulo-card__pie .btn-carrito { margin-left: auto; }
@media (max-width: 460px) { .articulo-card .precio small { display: block; margin-left: 0; } }
.precio { font-size: 1.12rem; font-weight: 700; color: var(--verde-osc); margin: 0; white-space: nowrap; }
.precio small { margin-left: .15rem; font-size: .7rem; font-weight: 500; color: var(--texto-suave); }
.precio--grande { font-size: 2rem; }
.precio--consultar { font-size: .9rem; color: var(--texto-suave); white-space: normal; }
.precio-equiv { font-size: .75rem; color: var(--texto-suave); margin: 0; }
.disp { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600; }
.disp::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.disp--si { color: #177A3D; }
.disp--aviso { color: var(--naranja-boton-osc); }
.disp--no { color: var(--rojo); }
.etiqueta { position: absolute; top: .6rem; left: .6rem; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--naranja-boton); color: #fff; }
.etiqueta--novedad { background: var(--verde); }
.etiqueta--estatica { position: static; display: inline-block; margin-bottom: .6rem; }
.btn-carrito { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--naranja-boton); color: #fff; cursor: pointer; flex-shrink: 0; transition: background .2s; }
.btn-carrito:hover { background: var(--naranja-boton-osc); }
.btn-carrito svg { width: 20px; height: 20px; }
.btn-carrito.is-added { background: var(--verde); }

.paginacion { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem; margin-top: 2rem; }
.paginacion a, .paginacion span { min-width: 40px; height: 40px; padding: 0 .6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--borde); text-decoration: none; color: var(--texto); font-weight: 600; }
.paginacion a:hover { border-color: var(--verde); color: var(--verde); }
.paginacion [aria-current] { background: var(--verde); border-color: var(--verde); color: #fff; }
.paginacion__hueco { border: 0 !important; }

/* Ficha de artículo: foto y características a la izquierda, columna de compra a la derecha (fija al bajar) */
.container--ficha { max-width: 1440px; }
.ficha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "foto info" "datos info"; gap: 2.5rem clamp(2rem, 4vw, 4.5rem); align-items: start; margin: 1rem 0 3.5rem; }
.ficha__foto { grid-area: foto; }
.ficha__info { grid-area: info; min-width: 0; position: sticky; top: 110px; }
.ficha__datos { grid-area: datos; }
@media (max-width: 760px) {
  .ficha { grid-template-columns: minmax(0, 1fr); grid-template-areas: "foto" "info" "datos"; gap: 1.6rem; }
  .ficha__info { position: static; }
}

.ficha__foto { position: relative; display: block; background: var(--crema-suave); border-radius: 16px; aspect-ratio: 4 / 3; cursor: zoom-in; overflow: hidden; }
.ficha__foto img { width: 100%; height: 100%; object-fit: contain; padding: clamp(1rem, 3vw, 2rem); mix-blend-mode: multiply; transition: transform .3s ease; }
.ficha__foto:hover img { transform: scale(1.03); }
.ficha__lupa { position: absolute; right: .8rem; bottom: .8rem; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--verde); box-shadow: var(--sombra); }
.ficha__lupa svg { width: 20px; height: 20px; }

.ficha__familia { margin: 0 0 .4rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ficha__familia a { color: var(--verde); }
.ficha__titulo { margin: 0 0 .5rem; font-size: clamp(1.55rem, 2.3vw, 2.15rem); line-height: 1.15; }
.ficha__ref { margin: 0; color: var(--texto-suave); font-size: .86rem; }
.ficha__ref strong { color: var(--texto); font-weight: 600; letter-spacing: .02em; }

.ficha__cotas { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .6rem; max-width: 460px; }
.ficha__cotas li { padding: .55rem .85rem; border: 1px solid var(--borde); border-radius: 10px; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.ficha__cotas span { display: block; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-suave); }

.ficha__compra { max-width: 480px; margin-top: 1.5rem; padding: 1.4rem 1.5rem 1.5rem; background: #fff; border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
@media (max-width: 520px) { .ficha__compra { padding: 1.1rem 1rem 1.2rem; } }
.ficha__precio { display: grid; gap: .2rem; }
.ficha .precio--grande { font-size: clamp(2rem, 3vw, 2.5rem); letter-spacing: -.02em; line-height: 1.1; }
.ficha__iva { margin: 0; color: var(--texto-suave); font-size: .9rem; }
.ficha__precio .disp { margin-top: .5rem; font-size: .82rem; }
.ficha__cantidad { display: flex; flex-wrap: wrap; gap: .7rem; align-items: stretch; }
.ficha__cantidad .btn { flex: 0 1 auto; min-height: 48px; white-space: nowrap; padding-inline: 2.2rem; }
@media (max-width: 900px) { .ficha__cantidad .btn { flex: 1; padding-inline: 1rem; } }
.ficha .cantidad button { width: 44px; height: 48px; }
.ficha .cantidad input { height: 48px; width: 48px; font-size: 1rem; }
.ficha__compra .btn-whatsapp { justify-self: start; }

.ficha__ventajas { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .85rem; }
.ficha__ventajas li { display: flex; gap: .8rem; align-items: flex-start; font-size: .88rem; line-height: 1.45; color: var(--texto-suave); }
.ficha__ventajas svg { flex: none; width: 24px; height: 24px; color: var(--verde); }
.ficha__ventajas strong { color: var(--texto); }

.ficha__ayuda { margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--borde); font-size: .88rem; color: var(--texto-suave); }
.ficha__ayuda a { color: var(--verde); font-weight: 600; }
.ficha__ayuda a[href^="tel"] { white-space: nowrap; }
.ficha .precio--consultar { font-size: 1.4rem; color: var(--texto); }
.ficha__ayuda svg { width: 17px; height: 17px; vertical-align: -.25em; margin-right: .25rem; }

.ficha__datos h2 { margin: 0 0 .9rem; font-size: 1.15rem; }
.ficha__datos dl { margin: 0; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.ficha__datos dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding: .7rem 1rem; font-size: .9rem; }
.ficha__datos dl > div:nth-child(odd) { background: var(--crema-suave); }
.ficha__datos dt { color: var(--texto-suave); }
.ficha__datos dd { margin: 0; font-weight: 600; }

.cantidad { display: inline-flex; align-items: center; border: 1px solid #CFC5B7; border-radius: 999px; background: #fff; overflow: hidden; flex-shrink: 0; }
.cantidad button { width: 36px; height: 42px; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--verde); }
.cantidad input { width: 52px; border: 0 !important; text-align: center; padding: 0; height: 42px; -moz-appearance: textfield; box-shadow: none !important; }
.cantidad input::-webkit-outer-spin-button, .cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.relacionadas { margin-bottom: 2rem; }

/* ── Carrito y pedido ── */
.tienda-titulo { margin: .4rem 0 1.4rem; }
.carrito { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
.carrito > .aviso, .carrito > .carrito__cargando { grid-column: 1 / -1; }
@media (max-width: 900px) { .carrito { grid-template-columns: 1fr; } }
.carrito__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.carrito__linea { display: grid; grid-template-columns: 90px 1fr auto auto 40px; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--borde); }
.carrito__foto img { width: 90px; height: 68px; object-fit: contain; border: 1px solid var(--borde); border-radius: 8px; background: #fff; }
.carrito__nombre { font-weight: 600; font-size: .92rem; color: var(--texto); text-decoration: none; display: block; }
.carrito__nombre:hover { color: var(--verde); }
.carrito__meta { font-size: .78rem; color: var(--texto-suave); }
.carrito__linea--no { opacity: .6; }
.carrito__quitar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--texto-suave); cursor: pointer; }
.carrito__quitar:hover { background: #F7E3E1; color: var(--rojo); }
.carrito__quitar svg { width: 18px; height: 18px; }
@media (max-width: 600px) {
  .carrito__linea { grid-template-columns: 70px 1fr 36px; grid-template-areas: "foto desc quitar" "foto cant importe"; gap: .4rem .8rem; }
  .carrito__foto { grid-area: foto; } .carrito__foto img { width: 70px; height: 54px; }
  .carrito__desc { grid-area: desc; } .carrito__linea .cantidad { grid-area: cant; justify-self: start; }
  .carrito__linea .precio { grid-area: importe; justify-self: end; } .carrito__quitar { grid-area: quitar; }
}
.carrito__resumen { border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.4rem; background: var(--crema-suave); position: sticky; top: 100px; }
.carrito__resumen h2 { font-size: 1.2rem; }
.carrito__resumen dl { margin: 0 0 1rem; }
.carrito__resumen dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .92rem; }
.carrito__resumen dd { margin: 0; font-weight: 600; text-align: right; }
.carrito__total { border-top: 2px solid var(--borde); margin-top: .4rem; padding-top: .7rem !important; font-size: 1.1rem !important; }
.carrito__total dd { color: var(--verde-osc); font-size: 1.25rem; }
.carrito__nota { font-size: .8rem; color: var(--texto-suave); }
.carrito__seguir { display: block; text-align: center; margin-top: .4rem; padding: .4rem 0; font-size: .9rem; }
.pedido-grid { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .pedido-grid { grid-template-columns: 1fr; } }
.pedido-bloque { border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.4rem; margin-bottom: 1.2rem; background: #fff; }
.pedido-bloque h2 { font-size: 1.15rem; }
.pedido-lineas { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .86rem; }
.pedido-lineas li { display: flex; justify-content: space-between; gap: .8rem; padding: .4rem 0; border-bottom: 1px dashed var(--borde); }
.pedido-lineas strong { white-space: nowrap; }

/* ── Área de clientes y accionistas ── */
.cuenta { padding-bottom: 3rem; }
.cuenta-contenido { padding-top: 2rem; }
.cuenta-acceso { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; max-width: 940px; margin: 0 auto; }
@media (max-width: 760px) { .cuenta-acceso { grid-template-columns: 1fr; } }
.tarjeta-cuenta { border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.6rem; background: #fff; }
.tarjeta-cuenta--sola { max-width: 480px; margin: 0 auto; }
.cuenta-panel { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2rem; align-items: start; }
.cuenta-menu { border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; background: var(--crema-suave); }
.cuenta-menu ul { list-style: none; margin: 0; padding: 0; }
.cuenta-menu a, .cuenta-menu__salir { display: block; width: 100%; text-align: left; padding: .55rem .8rem; border-radius: 6px; color: var(--texto); text-decoration: none; font: inherit; font-size: .92rem; background: none; border: 0; cursor: pointer; }
.cuenta-menu a:hover, .cuenta-menu__salir:hover { background: var(--verde-claro); color: var(--verde); }
.cuenta-menu a[aria-current] { background: var(--verde); color: #fff; font-weight: 600; }
.cuenta-menu__hola { font-size: .88rem; margin: 0 0 .7rem; padding: 0 .8rem; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  /* Por debajo de este ancho el lateral dejaría sin sitio a las tablas: el menú pasa arriba, compacto, para que el contenido se vea sin bajar */
  .cuenta-panel { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .cuenta-menu { padding: .4rem; }
  .cuenta-menu__hola { display: none; }
  .cuenta-menu ul { display: flex; flex-wrap: wrap; gap: .2rem; }
  .cuenta-menu a, .cuenta-menu__salir { display: flex; align-items: center; width: auto; min-height: 44px; padding: 0 .7rem; white-space: nowrap; }
}
.cuenta-atajos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.cuenta-atajo { display: block; padding: 1.1rem; border: 1px solid var(--borde); border-radius: var(--radio); text-decoration: none; color: var(--texto); }
.cuenta-atajo:hover { border-color: var(--verde); box-shadow: var(--sombra); }
.cuenta-atajo strong { display: block; color: var(--verde-osc); }
.cuenta-atajo span { font-size: .85rem; color: var(--texto-suave); }
.cuenta-vacio { text-align: center; padding: 2rem 1rem; }
.form-estrecho { max-width: 420px; }
.lista-pedidos { max-width: 820px; }
.pedido-detalle, .cuenta-seccion .caja-destacada { max-width: 900px; }
.cuenta-seccion .pedido-detalle__numero { display: none; } /* ya está en el título de la sección */
.lp-numero, .lp-fecha, .lp-total { white-space: nowrap; }
.lp-ver a { display: inline-block; padding: .3rem .5rem; margin: -.3rem -.5rem; }
@media (max-width: 600px) {
  /* Detalle del pedido: cada línea en su bloque y los totales a todo el ancho, para que el importe se vea sin desplazar */
  .tabla--lineas, .tabla--lineas tbody, .tabla--lineas tfoot { display: block; }
  .tabla--lineas thead { display: none; }
  .tabla--lineas tbody { border-top: 1px solid var(--borde); }
  .tabla--lineas tbody tr { display: grid; grid-template-columns: 1fr 1.2fr 1.4fr; gap: .5rem .8rem; padding: .8rem .7rem; border-bottom: 1px solid var(--borde); }
  .tabla--lineas tbody td { display: block; padding: 0; border: 0; }
  .tabla--lineas tbody td:first-child { grid-column: 1 / -1; overflow-wrap: anywhere; }
  .tabla--lineas td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: .75rem; color: var(--texto-suave); }
  .tabla--lineas tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem .7rem; border-bottom: 1px solid var(--borde); }
  .tabla--lineas tfoot :is(td, th) { display: block; padding: 0; border: 0; background: none; }
  .tabla--lineas tfoot tr:last-child { background: var(--crema-suave); font-size: 1.05rem; }

  /* En móvil cada pedido es una tarjeta: número y total arriba, fecha y estado debajo */
  .lista-pedidos .tabla thead { display: none; }
  .lista-pedidos .tabla, .lista-pedidos .tabla tbody { display: block; }
  .lista-pedidos .tabla tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "numero total" "fecha ver" "estado estado"; gap: .25rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--borde); }
  .lista-pedidos .tabla td { display: block; padding: 0; border: 0; }
  .lp-numero { grid-area: numero; } .lp-total { grid-area: total; } .lp-fecha { grid-area: fecha; color: var(--texto-suave); font-size: .85rem; } .lp-estado { grid-area: estado; }
  .lp-ver { grid-area: ver; }
  .lp-ver a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .2rem; margin: 0; }
  .lp-total small { display: inline; margin-left: .3rem; } .lp-total br { display: none; }
}

/* Área de accionistas */
.accionistas-barra { max-width: 980px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.accionistas-barra p { margin: 0; }
.accionistas-anio { max-width: 980px; margin-top: 1.6rem; }
.accionistas-anio h2 { font-size: 1.3rem; color: var(--verde-osc); margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 2px solid var(--borde); }
.lista-documentos { list-style: none; margin: 0; padding: 0; }
.lista-documentos a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: .75rem .6rem; border-bottom: 1px solid var(--borde); color: var(--texto); text-decoration: none; }
.lista-documentos a:hover { background: var(--verde-claro); }
.lista-documentos a:hover .lista-documentos__titulo { color: var(--verde); }
.lista-documentos__tipo { min-width: 3.4rem; text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: .2rem .4rem; border-radius: 4px; background: var(--crema); color: var(--marron); }
.lista-documentos__tipo--word { background: #E3ECF7; color: #1F4E8C; }
.lista-documentos__titulo { font-weight: 500; }
.lista-documentos__meta { font-size: .85rem; color: var(--texto-suave); white-space: nowrap; }
@media (max-width: 600px) {
  .lista-documentos a { grid-template-columns: auto 1fr; row-gap: .2rem; }
  .lista-documentos__meta { grid-column: 2; }
}
.h1-nombre { font-weight: 400; color: var(--texto-suave); }
.estado-pedido { display: inline-block; padding: .15rem .6rem; border-radius: .8rem; font-size: .75rem; font-weight: 700; background: var(--crema); color: var(--marron); }
.estado-pedido--pagado, .estado-pedido--enviado { background: var(--verde-claro); color: var(--verde-osc); }
.estado-pedido--cancelado { background: #F7E3E1; color: var(--rojo); }
.docs-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.docs-lista li { border-bottom: 1px solid var(--borde); }
.docs-lista a { display: flex; align-items: center; gap: .9rem; padding: .8rem .4rem; text-decoration: none; color: var(--texto); }
.docs-lista a:hover { background: var(--verde-claro); }
.docs-lista svg { width: 26px; height: 26px; color: var(--naranja); flex-shrink: 0; }
.docs-lista small { display: block; color: var(--texto-suave); font-size: .78rem; }
.docs-año { margin: 1.6rem 0 .4rem; font-size: 1.05rem; color: var(--verde-osc); }

/* ── Pie ── */
#site-footer { background: #22301F; color: rgba(255,255,255,.82); font-size: .9rem; }
#site-footer a { color: #fff; transition: opacity .2s; }
#site-footer a:hover { color: #fff; opacity: .75; }
.footer-cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 2rem clamp(3rem, 12vw, 13rem); padding-top: 3rem; padding-bottom: 2.2rem; }
@media (max-width: 760px) { .footer-cols { grid-template-columns: repeat(2, auto); } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: auto; } }
.footer-col__title { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .9rem; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-list li { display: flex; gap: .6rem; align-items: flex-start; }
.footer-icon { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--naranja); }
.footer-social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--naranja-boton); opacity: 1; }
.footer-social svg { width: 18px; height: 18px; color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 1.1rem var(--margen); text-align: center; font-size: .8rem; }
.footer-bottom p { margin: 0; }
.footer-bottom__break { display: none; }
@media (max-width: 520px) { .footer-bottom { padding-bottom: 4.5rem; } .footer-bottom__break { display: block; } }

/* ── Flotantes: WhatsApp y volver arriba ── */
.whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 998; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra-fuerte); transition: transform .2s ease; }
.whatsapp-float svg { width: 46px; height: 46px; }
.whatsapp-float:hover { transform: scale(1.08); }
.back-to-top { position: fixed; bottom: 86px; right: 26px; z-index: 998; width: 44px; height: 44px; background: var(--naranja-boton); color: #fff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--sombra-fuerte); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s, background .3s; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--naranja-boton-osc); }
.back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 520px) {
  .whatsapp-float { width: 42px; height: 42px; bottom: 16px; right: 16px; }
  .whatsapp-float svg { width: 40px; height: 40px; }
  .back-to-top { width: 40px; height: 40px; bottom: 70px; right: 17px; }
}
/* Sin WhatsApp flotante (ficha, carrito, pedidos), el botón de subir ocupa su sitio */
.sin-whatsapp .back-to-top { bottom: 24px; }
@media (max-width: 520px) { .sin-whatsapp .back-to-top { bottom: 16px; } }

/* Aviso flotante ("Añadido al carrito") */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--texto); color: #fff; padding: .8rem 1.2rem; border-radius: 10px; box-shadow: var(--sombra-fuerte); z-index: 1100; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; font-size: .92rem; max-width: calc(100vw - 32px); }
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast a { color: var(--crema); font-weight: 600; margin-left: .4rem; }

/* ── Visor de fotos ── */
.lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(20, 24, 24, .92); opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.lightbox.is-open { opacity: 1; visibility: visible; }
body.lightbox-open { overflow: hidden; }
.lightbox-img { max-width: min(90vw, 1200px); max-height: 88vh; width: auto; height: auto; object-fit: contain; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.lightbox-close { position: absolute; top: 1.2rem; right: 1.5rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lightbox-close:hover, .lightbox-close:focus-visible { background: rgba(255, 255, 255, .25); }

/* ── Aviso de cookies (informativo) ── */
.cookie-aviso { position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 9990; width: min(440px, calc(100vw - 3rem)); display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-fuerte); opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
.cookie-aviso.is-visible { opacity: 1; transform: none; }
.cookie-aviso p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--texto); }
.cookie-aviso a { color: var(--verde); }
.cookie-aviso .btn { flex-shrink: 0; min-height: 44px; }
@media (max-width: 520px) {
  .cookie-aviso { left: .75rem; right: .75rem; bottom: .75rem; width: auto; flex-wrap: wrap; justify-content: flex-end; padding: .7rem .9rem; gap: .4rem; }
  .cookie-aviso p { flex-basis: 100%; font-size: .8rem; }
  .cookie-aviso .btn { padding: .5rem 1.2rem; }
}
/* Mientras se ve el aviso: el foco no queda debajo, el final de la página se alcanza y los flotantes se apartan */
html.con-cookie-aviso { scroll-padding-bottom: var(--cookie-alto); }
html.con-cookie-aviso .toast { bottom: var(--cookie-alto); }
@media (max-width: 520px) {
  html.con-cookie-aviso body { padding-bottom: var(--cookie-alto); }
  html.con-cookie-aviso .whatsapp-float { bottom: var(--cookie-alto); }
  html.con-cookie-aviso .back-to-top { bottom: calc(var(--cookie-alto) + 54px); }
  html.con-cookie-aviso .sin-whatsapp .back-to-top { bottom: var(--cookie-alto); }
}
@media (prefers-reduced-motion: reduce) { .cookie-aviso { transition: none; } }

/* =========================================================
   WIDGET DE ACCESIBILIDAD
   ========================================================= */
.a11y-widget { position: fixed; top: 180px; right: 0; z-index: 9995; }
.a11y-toggle { width: 46px; height: 46px; background: var(--verde); border: none; border-radius: 6px 0 0 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; box-shadow: -2px 2px 10px rgba(0,0,0,.2); }
.a11y-toggle:hover { background: var(--verde-osc); }
.a11y-toggle svg { width: 26px; height: 26px; }
.a11y-panel { position: absolute; top: 0; right: 46px; width: 260px; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.2); padding: 1rem 0; display: none; max-height: calc(100dvh - 196px); overflow-y: auto; }
.a11y-panel.is-open { display: block; }
.a11y-panel h2 { font-size: 1rem; font-weight: 700; padding: 0 1.1rem .75rem; margin: 0; }
.a11y-panel ul { list-style: none; margin: 0; padding: 0; }
.a11y-option { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .55rem 1.1rem; background: none; border: none; font: inherit; font-size: .92rem; text-align: left; cursor: pointer; color: var(--texto); }
.a11y-option:hover { background: var(--verde-claro); }
.a11y-option svg { width: 18px; height: 18px; flex-shrink: 0; }
.a11y-option.is-active { background: rgba(0,0,0,.05); font-weight: 600; color: var(--verde); }
.a11y-option--reset { border-top: 1px solid rgba(0,0,0,.08); margin-top: .35rem; padding-top: .7rem; }
@media (max-width: 520px) { .a11y-widget { top: 150px; } .a11y-toggle { width: 40px; height: 40px; } .a11y-panel { right: 40px; width: 220px; max-height: calc(100dvh - 166px); } }

/* En <html> y no en <body>: en body el fondo no se filtra y los elementos fijos se mueven con la página */
html.a11y-grayscale { filter: grayscale(1); }
body.a11y-contrast { background: #000 !important; color: #fff !important; }
body.a11y-contrast * { background-color: #000 !important; color: #fff !important; border-color: #444 !important; box-shadow: none !important; text-shadow: none !important; }
body.a11y-contrast a { color: #ffd370 !important; }
body.a11y-contrast img, body.a11y-contrast svg { filter: grayscale(1) contrast(1.2); opacity: .9; }
body.a11y-contrast .hero { background-image: none !important; }
html.a11y-contrast-negative { background: var(--blanco); filter: invert(1) hue-rotate(180deg); }
html.a11y-contrast-negative img, html.a11y-contrast-negative iframe, html.a11y-contrast-negative video { filter: invert(1) hue-rotate(180deg); }
body.a11y-light-bg *:not(.a11y-toggle):not(.a11y-toggle *) { background-color: #fff !important; color: #111 !important; }
body.a11y-light-bg .hero { background-image: none !important; }
body.a11y-underline-links a { text-decoration: underline !important; }
body.a11y-readable-font, body.a11y-readable-font * { font-family: Arial, Helvetica, sans-serif !important; }

/* ── Pedido rápido por referencia (pedido-rapido.html) ── */
.enlace-rapido { margin: .6rem 0 0; font-size: .88rem; color: var(--texto-suave); }
.enlace-rapido a { font-weight: 600; color: var(--verde); }
.tienda-titulo + .enlace-rapido { margin: -1rem 0 1.2rem; }
.rapido-intro { max-width: 62ch; margin: -.6rem 0 1.6rem; color: var(--texto-suave); }
.rapido { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; padding-bottom: 3rem; }
.rapido__tabla { border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; padding: 1rem 1.2rem 1.4rem; scroll-margin-top: 140px; }
.rapido__cabecera, .rapido__linea { display: grid; grid-template-columns: 210px 96px minmax(0, 1fr) 110px 44px; gap: .7rem; align-items: center; }
.rapido__cabecera { padding: 0 0 .5rem; border-bottom: 1px solid var(--borde); font-size: .8rem; font-weight: 600; color: var(--texto-suave); }
.rapido__lineas { list-style: none; margin: 0; padding: 0; }
.rapido__linea { padding: .55rem 0; border-bottom: 1px dashed var(--borde); }
.rapido__ref { font-variant-numeric: tabular-nums; text-transform: uppercase; }
.rapido__ref::placeholder { text-transform: none; }
.rapido__cant { text-align: right; font-variant-numeric: tabular-nums; }
.rapido__articulo { font-size: .86rem; line-height: 1.35; min-width: 0; }
.rapido__articulo a { color: var(--texto); font-weight: 600; text-decoration: none; }
.rapido__articulo a:hover { color: var(--verde); }
.rapido__nota { display: block; font-size: .8rem; color: var(--texto-suave); }
.rapido__importe { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rapido .num { text-align: right; }
.rapido__quitar { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--texto-suave); cursor: pointer; }
.rapido__quitar:hover { background: var(--crema-suave); color: var(--rojo); }
.rapido__quitar svg { width: 18px; height: 18px; }
.rapido__linea.is-error .rapido__ref { border-color: var(--rojo); }
.rapido__linea.is-error .rapido__nota { color: var(--rojo); font-weight: 600; }
.rapido__linea.is-aviso .rapido__nota { color: var(--naranja-boton-osc); font-weight: 600; }
.rapido__mas { margin: .8rem 0 0; min-height: 44px; font-weight: 600; text-decoration: none; }
.rapido__mas:hover { color: var(--verde-osc); }
.rapido__pie { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde); display: grid; justify-items: end; text-align: right; gap: .3rem; }
.rapido__total { margin: 0; display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; }
.rapido__total strong { font-size: 1.25rem; color: var(--verde-osc); font-variant-numeric: tabular-nums; }
.rapido__pie .nota { margin: 0 0 .5rem; }
.rapido__pie .btn:disabled { opacity: .45; cursor: not-allowed; }
.rapido__pegar { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--crema-suave); padding: 1.2rem 1.3rem; position: sticky; top: 110px; }
.rapido__pegar h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.rapido__pegar p { font-size: .88rem; margin: 0 0 .8rem; }
.rapido__pegar textarea { font-family: ui-monospace, Consolas, monospace; font-size: .88rem; margin-bottom: .7rem; }
.rapido__pegar .btn { width: 100%; justify-content: center; margin-bottom: .6rem; }
.rapido__pegar .nota { font-size: .82rem; }
@media (max-width: 980px) {
  .rapido { grid-template-columns: minmax(0, 1fr); }
  .rapido__pegar { position: static; }
}
@media (max-width: 640px) {
  .rapido__tabla { padding: .6rem .9rem 1.1rem; }
  .rapido__cabecera { display: none; }
  .rapido__linea { grid-template-columns: minmax(0, 1fr) 86px 44px; grid-template-areas: "ref cant quitar" "art art importe"; row-gap: .35rem; padding: .8rem 0; }
  .rapido__ref { grid-area: ref; }
  .rapido__cant { grid-area: cant; }
  .rapido__quitar { grid-area: quitar; }
  .rapido__articulo { grid-area: art; }
  .rapido__importe { grid-area: importe; }
  .rapido__articulo:empty, .rapido__importe:empty { display: none; }
  .rapido__pie { justify-items: stretch; }
  .rapido__pie .btn { width: 100%; justify-content: center; }
}

/* ── Hoja de pedido para imprimir (app/vista-pedido.php) ── */
.doc-pedido { display: none; }
@media print {
  .topbar, #site-header, #site-footer, .whatsapp-float, .back-to-top, .a11y-widget, .cookie-aviso, .no-imprimir { display: none !important; }
  body { font-size: 11pt; background: #fff; }
  /* Margen de página 0: así el navegador no imprime su cabecera y pie (dirección, fecha, título). El margen lo da .doc-pedido */
  @page { size: A4; margin: 0; }
  body:has(.doc-pedido) main > :not(.container), body:has(.doc-pedido) .cuenta-panel > :not(.cuenta-seccion) { display: none !important; }
  body:has(.doc-pedido) .container, body:has(.doc-pedido) .cuenta-panel, body:has(.doc-pedido) .cuenta-seccion { display: block; padding: 0 !important; margin: 0; max-width: none; border: 0; box-shadow: none; background: none; }
  .doc-pedido { display: block; padding: 14mm 14mm 16mm; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: #000; font-size: 9.5pt; line-height: 1.4; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-pedido h2, .doc-pedido h3 { color: #04522A; margin: 0 0 .3rem; }
  .doc-pedido h3 { font-size: 9pt; }
  .doc-pedido p { margin: 0 0 .6rem; }
  .doc-pedido__cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding-bottom: .8rem; border-bottom: 2.5pt solid #066F39; margin-bottom: 1rem; }
  .doc-pedido__cabecera img { width: 62mm; height: auto; margin-bottom: .5rem; }
  .doc-pedido__cabecera p { font-size: 8.5pt; color: #333; margin: 0; }
  .doc-pedido__titulo { text-align: right; flex-shrink: 0; }
  .doc-pedido__titulo dd { white-space: nowrap; }
  .doc-pedido__titulo h2 { font-size: 20pt; }
  .doc-pedido__titulo dl { display: grid; grid-template-columns: auto auto; gap: .1rem .8rem; margin: 0; font-size: 9pt; }
  .doc-pedido__titulo dt { color: #555; }
  .doc-pedido__titulo dd { margin: 0; font-weight: 700; }
  .doc-pedido__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
  .doc-pedido__datos section { border: 1px solid #ccc; border-radius: 4px; padding: .6rem .8rem; }
  .doc-pedido__datos p { margin: 0; }
  .doc-pedido__lineas { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
  .doc-pedido__lineas th { background: #FBF6EE; border-bottom: 1.5pt solid #066F39; text-align: left; padding: .35rem .4rem; font-size: 8.5pt; }
  .doc-pedido__lineas td { border-bottom: 1px solid #ddd; padding: .35rem .4rem; vertical-align: top; }
  .doc-pedido__lineas tr { break-inside: avoid; }
  .doc-pedido__lineas thead { display: table-header-group; }
  .doc-pedido .num { text-align: right; white-space: nowrap; }
  .doc-pedido .ref { white-space: nowrap; color: #444; font-size: 8.5pt; }
  .doc-pedido__pie { display: grid; grid-template-columns: 1fr 80mm; gap: 1.5rem; align-items: start; break-inside: avoid; }
  .doc-pedido__totales { width: 100%; border-collapse: collapse; }
  .doc-pedido__totales td { padding: .3rem .4rem; border-bottom: 1px solid #ddd; white-space: nowrap; }
  .doc-pedido__totales .total td { border-bottom: 0; border-top: 1.5pt solid #066F39; font-weight: 700; font-size: 11pt; color: #04522A; }
  .doc-pedido__nota { margin-top: 1.2rem !important; padding-top: .5rem; border-top: 1px solid #ccc; font-size: 8pt; color: #555; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
