/* ══════════════════════════════════════════════════════════
   DENTAL ALHEC — Tienda
   Paleta, tipografía y componentes tomados del canvas de
   Claude Design («Alhec Dental Tienda»).
══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');

:root {
  /* marca */
  --crema:        #FFFCF2;
  --verde-900:    #00423C;
  --verde-800:    #005A52;
  --verde-600:    #318C84;
  --turquesa:     #5AC6BD;
  --turquesa-200: #9CE7DE;
  --turquesa-100: #D6FFFF;

  /* superficies */
  --blanco:    #fff;
  --suave:     #FBFDFD;
  --img-fondo: #F6FBFA;
  --borde:     #D3E5E2;
  --borde-2:   #DFEDEB;

  /* texto */
  --texto:   #17302e;
  --texto-2: #3d5150;
  --texto-3: #4d5c5b;
  --texto-4: #5a6968;
  --error:   #B3261E;

  --sans:   'Montserrat', system-ui, sans-serif;
  --titulo: 'Quicksand', 'Montserrat', sans-serif;

  --r-lg: 18px;
  --r-md: 16px;
  --r:    14px;
  --r-sm: 12px;
  --r-xs: 8px;
  --pill: 999px;

  --pad-x: 40px;
  --ancho: 1400px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* varios componentes son flex/grid, que gana contra el display:none del UA */
[hidden] { display:none !important; }

body {
  background:var(--crema); color:var(--texto);
  font-family:var(--sans); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}

img { max-width:100%; display:block; }
a { color:var(--verde-600); text-decoration:none; }
a:hover { color:var(--verde-800); }
input, select, textarea, button { font-family:var(--sans); }

h1, h2, h3 { font-family:var(--titulo); font-weight:700; line-height:1.2; text-wrap:pretty; }

:focus-visible { outline:2px solid var(--verde-600); outline-offset:2px; }

.solo-lectores {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

@keyframes alhecUp   { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
@keyframes alhecToast{ 0%{opacity:0;transform:translateY(14px)} 12%{opacity:1;transform:none}
                       88%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(14px)} }

/* ════════════ CABECERA ════════════ */
.cabecera {
  position:sticky; top:0; z-index:50;
  background:var(--verde-800); border-bottom:1.5px solid var(--verde-900);
  box-shadow:0 2px 12px rgba(0,66,60,.18);
}
.cabecera-fila {
  display:flex; align-items:center; flex-wrap:wrap; gap:20px 40px;
  padding:22px var(--pad-x); max-width:var(--ancho); margin:0 auto;
}
.logo { flex:none; cursor:pointer; background:none; border:none; padding:0; }
.logo img { width:167px; height:auto; }

.pestanas { display:flex; align-items:stretch; gap:10px; flex:none; margin:0 auto; }
.pestana {
  display:flex; align-items:center; padding:12px 24px;
  border:1.5px solid rgba(154,231,222,.35); border-bottom:none;
  border-radius:10px 10px 0 0; cursor:pointer;
  background:rgba(214,255,255,.12); color:var(--turquesa-100);
  font-family:var(--titulo); font-weight:700; font-size:15px; white-space:nowrap;
  transition:background .16s ease, color .16s ease;
}
.pestana:hover { background:rgba(214,255,255,.22); }
.pestana[aria-current="page"] { background:var(--crema); color:var(--verde-800); border-color:var(--crema); }

.btn-cotizacion {
  display:flex; align-items:center; gap:9px; flex:none;
  border:1.5px solid var(--turquesa); background:var(--crema); color:var(--verde-800);
  font-family:var(--titulo); font-weight:700; font-size:13.5px;
  padding:10px 18px; border-radius:var(--pill); cursor:pointer; white-space:nowrap;
  transition:background .16s ease;
}
.btn-cotizacion:hover { background:var(--turquesa-100); }
.btn-cotizacion .contador {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px; border-radius:var(--pill);
  background:var(--verde-800); color:var(--crema); font-size:12px;
}

/* ════════════ BOTONES ════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--titulo); font-weight:700; font-size:14px;
  padding:14px 26px; border:none; border-radius:var(--r-xs);
  cursor:pointer; white-space:nowrap;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.btn--primario { background:var(--verde-800); color:var(--crema); }
.btn--primario:hover { background:var(--verde-600); }
.btn--medio    { background:var(--verde-600); color:var(--crema); }
.btn--medio:hover { background:var(--verde-800); }
.btn--linea {
  background:transparent; color:var(--verde-800);
  border:1.5px solid var(--turquesa-200);
}
.btn--linea:hover { border-color:var(--verde-600); background:var(--blanco); }
.btn--sm { padding:11px 20px; font-size:13px; }

.enlace-accion {
  background:none; border:none; padding:0;
  font-size:13.5px; font-weight:600; color:var(--verde-600); cursor:pointer;
}
.enlace-accion:hover { color:var(--verde-800); }

/* ════════════ ESTRUCTURA ════════════ */
.contenido { flex:1; display:flex; flex-direction:column; }
.vista { animation:alhecUp 240ms ease both; }
.seccion { padding:0 var(--pad-x) 60px; max-width:var(--ancho); margin:0 auto; width:100%; }
.seccion--sep { padding-top:56px; }
.col-20 { display:flex; flex-direction:column; gap:20px; }
.fila-botones { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.fila-botones--sep { gap:12px; padding-top:8px; }
.seccion-cab {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; padding-bottom:20px;
}
.seccion-cab h2 { font-size:28px; }

/* ════════════ INICIO · banner ════════════ */
.banner {
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:#F2F2F0; margin:28px auto 10px; max-width:var(--ancho);
  max-height:480px; aspect-ratio:1800/480;
}
.banner img { width:100%; height:100%; object-fit:cover; cursor:pointer; }
.banner-flecha {
  position:absolute; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:none; border-radius:var(--pill);
  background:rgba(0,90,82,.82); color:var(--crema); font-size:22px; cursor:pointer;
}
.banner-flecha--izq { left:20px; }
.banner-flecha--der { right:20px; }
.banner-puntos { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:9px; }
.banner-punto {
  width:10px; height:10px; border:none; border-radius:var(--pill);
  background:rgba(0,90,82,.3); cursor:pointer; padding:0;
}
.banner-punto[aria-current="true"] { background:var(--verde-800); }

/* ── Quiénes somos (resumen) ── */
.intro { display:flex; flex-direction:column; gap:34px; padding:54px var(--pad-x) 52px;
         max-width:var(--ancho); margin:0 auto; width:100%; }
.intro-texto { display:flex; flex-direction:column; align-items:center; text-align:center;
               gap:18px; max-width:76ch; margin:0 auto; }
.kicker { font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
          color:var(--verde-600); font-weight:700; }
.intro-texto h2 { font-size:34px; color:var(--verde-800); }
.intro-texto p { font-size:16px; line-height:1.75; color:var(--texto-2);
                 text-align:justify; hyphens:auto; }

.hechos { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.hecho {
  display:flex; align-items:center; gap:18px; padding:20px 24px;
  border-radius:var(--r-md); background:var(--blanco); border:1px solid var(--borde);
  box-shadow:0 8px 22px rgba(0,90,82,.07);
  transition:transform .18s ease, box-shadow .18s ease;
}
.hecho:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,90,82,.12); }
.hecho-ico {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:var(--r); background:var(--verde-800); flex:none;
}
.hecho b { display:block; font-family:var(--titulo); font-size:22px; color:var(--verde-800); line-height:1.15; }
.hecho span { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
              font-weight:600; color:#3f4f4e; line-height:1.4; }

/* ── Categorías y marcas ── */
.rejilla-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rejilla-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

.cat-tarjeta {
  display:flex; flex-direction:column; gap:16px; padding:22px; text-align:left;
  border-radius:var(--r-md); background:var(--blanco); border:1px solid var(--borde);
  cursor:pointer; transition:transform .16s ease, border-color .16s ease;
}
.cat-tarjeta:hover { border-color:var(--turquesa); transform:translateY(-3px); }
.cat-img { aspect-ratio:16/10; border-radius:var(--r-sm); background:var(--img-fondo); overflow:hidden; }
.cat-img img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.cat-tarjeta b { font-family:var(--titulo); font-size:19px; }
.cat-tarjeta span { font-size:13.5px; color:var(--texto-3); }

.marca-chip {
  display:flex; align-items:center; justify-content:center; height:118px;
  border:1px solid var(--borde); border-radius:var(--r); background:var(--blanco);
  color:#5a6968; font-size:13px; font-weight:600; text-align:center; padding:16px;
  transition:border-color .16s ease;
}
.marca-chip:hover { border-color:var(--turquesa); }

/* ── Redes ── */
.redes {
  display:grid; grid-template-columns:1.15fr 1fr; gap:26px; align-items:stretch;
  padding:26px; border:1px solid var(--borde); border-radius:var(--r-lg); background:var(--blanco);
}
.redes-img {
  position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden;
  background:var(--turquesa-100); border:1.5px dashed var(--turquesa);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--verde-600); font-size:13.5px; font-weight:600; padding:20px;
}
/* Sin foto propia del post: sello sobrio con la cuenta, sin borde punteado */
.redes-img--sello { border-style:solid; border-color:var(--turquesa-200); font-size:16px; letter-spacing:.02em; }
.redes-img img { width:100%; height:100%; object-fit:cover; }
.redes-puntos { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.redes-puntos button { width:9px; height:9px; border:none; border-radius:var(--pill);
                       background:rgba(0,90,82,.3); cursor:pointer; padding:0; }
.redes-puntos button[aria-current="true"] { background:var(--verde-800); }
.redes-info { display:flex; flex-direction:column; gap:16px; justify-content:center; }
.post-cab { display:flex; align-items:center; gap:12px; }
.post-red { font-family:var(--titulo); font-size:15px; color:var(--verde-800); }
.post-meta { font-size:12.5px; color:var(--texto-3); }
.post-texto { font-size:15.5px; line-height:1.7; color:var(--texto-2); }
.post-acciones { display:flex; align-items:center; gap:14px; padding-top:4px; }
.post-acciones .btn { border-radius:var(--pill); }
.post-acciones #post-ant,
.post-acciones #post-sig { width:36px; padding:0; }
.redes-avatar {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--pill); background:var(--turquesa-100); flex:none;
}

/* ════════════ CATÁLOGO ════════════ */
.catalogo { display:grid; grid-template-columns:258px 1fr; min-height:70vh;
            max-width:var(--ancho); margin:0 auto; width:100%; }

.filtros {
  padding:28px 24px 48px; border-right:1px solid var(--borde);
  background:var(--suave); display:flex; flex-direction:column; gap:26px;
}
.filtro-grupo { display:flex; flex-direction:column; gap:10px; }
.filtro-titulo {
  font-family:var(--titulo); font-weight:700; font-size:12.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--verde-800);
}
.filtro-item {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  font-size:13.5px; padding:8px 10px; border:none; border-radius:var(--r-xs);
  background:transparent; color:var(--texto-2); text-align:left; cursor:pointer; width:100%;
  transition:background .14s ease, color .14s ease;
}
.filtro-item:hover { background:var(--turquesa-100); }
.filtro-item[aria-pressed="true"] { background:var(--turquesa-100); color:var(--verde-800); font-weight:700; }
.filtro-item .n { font-size:12px; opacity:.7; }

.filtros #btn-limpiar { background:var(--blanco); border-color:var(--borde); color:var(--verde-600); }
.filtros select, .campo {
  border:1px solid var(--borde); border-radius:var(--r-xs);
  padding:10px 12px; font-size:13px; background:var(--blanco);
  color:var(--texto); outline:none; cursor:pointer; width:100%;
}
.filtro-check { display:flex; align-items:center; gap:9px; font-size:13.5px;
                color:#2f4644; cursor:pointer; }
.filtro-check input { accent-color:var(--verde-600); width:15px; height:15px; cursor:pointer; }

.panel-catalogo { padding:28px var(--pad-x) 56px; display:flex; flex-direction:column; gap:20px; min-width:0; }

.buscador {
  display:flex; align-items:stretch; border:1.5px solid var(--turquesa-200);
  border-radius:var(--pill); overflow:hidden; background:var(--blanco); max-width:620px;
}
.buscador input {
  flex:1 1 auto; min-width:100px; border:none; outline:none;
  padding:12px 18px; font-size:13.5px; color:var(--texto); background:transparent;
}
.buscador button {
  flex:none; border:none; background:var(--verde-600); color:var(--crema);
  font-family:var(--titulo); font-weight:700; font-size:13.5px; padding:0 24px; cursor:pointer;
}
.buscador button:hover { background:var(--verde-800); }

.catalogo-cab { display:flex; align-items:flex-end; justify-content:space-between;
                gap:24px; flex-wrap:wrap; }
.migaja { font-size:12.5px; color:var(--texto-4); }
.catalogo-cab h2 { font-size:27px; }
.catalogo-orden { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--texto-3); }
.catalogo-orden select { width:auto; padding:9px 12px; font-size:12.5px; }

/* ── Tarjeta de producto ── */
.productos { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.producto {
  display:flex; flex-direction:column; background:var(--blanco);
  border:1px solid var(--borde); border-radius:var(--r); overflow:hidden;
  animation:alhecUp 240ms ease both; transition:border-color .16s ease;
}
.producto:hover { border-color:var(--turquesa); }
.producto-foto {
  position:relative; height:190px; background:var(--blanco);
  border:none; border-bottom:1px solid var(--borde); cursor:pointer;
  overflow:hidden; padding:0; width:100%;
}
.producto-foto img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.etiqueta {
  position:absolute; top:10px; left:10px; white-space:nowrap;
  padding:4px 9px; border-radius:5px;
  background:var(--turquesa); color:var(--verde-900); font-size:10.5px; font-weight:700;
}
.producto-cuerpo { display:flex; flex-direction:column; gap:9px; padding:16px; flex:1; }
.producto-marca { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-4); }
.producto-nombre {
  font-family:var(--titulo); font-weight:700; font-size:15px; line-height:1.35;
  min-height:40px; text-align:left; background:none; border:none; padding:0;
  color:var(--texto); cursor:pointer;
}
.producto-nombre:hover { color:var(--verde-800); }
.producto-datos {
  display:flex; justify-content:space-between; gap:8px; font-size:12px;
  color:var(--texto-3); padding-bottom:6px; border-bottom:1px solid var(--borde-2);
}
.producto-precio { font-family:var(--titulo); font-weight:700; font-size:17px; color:var(--verde-800); }
/* Sin precio publicado: el mismo hueco, en tono secundario */
.producto-precio--consulta { font-size:13px; font-weight:600; color:var(--texto-3); }
.producto-stock { font-size:12px; font-weight:600; }
.producto-stock--hay { color:#1F7A5C; }
.producto-stock--no  { color:var(--error); }
.producto .btn-anadir {
  border:1.5px solid var(--verde-600); background:var(--crema); color:var(--verde-800);
  font-family:var(--titulo); font-weight:700; font-size:13px;
  padding:11px; border-radius:9px; cursor:pointer; margin-top:auto;
  transition:background .16s ease, color .16s ease;
}
.producto .btn-anadir:hover { background:var(--verde-600); color:var(--crema); }

.sin-resultados {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:70px 20px; border:1px dashed var(--turquesa-200); border-radius:var(--r);
  background:var(--suave); text-align:center;
}
.sin-resultados b { font-family:var(--titulo); font-size:19px; color:var(--verde-800); }
.sin-resultados p { font-size:13.5px; color:var(--texto-3); max-width:42ch; }

/* ════════════ FICHA DE PRODUCTO ════════════ */
.ficha { padding:26px var(--pad-x) 60px; display:flex; flex-direction:column; gap:26px;
         max-width:var(--ancho); margin:0 auto; width:100%; }
.ruta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--texto-4); }
.ficha-cols { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.ficha-foto {
  height:460px; border-radius:var(--r-lg); background:var(--blanco);
  border:1px solid var(--borde); overflow:hidden;
}
.ficha-foto img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.ficha-info { display:flex; flex-direction:column; gap:20px; }
.ficha-info .kicker { font-size:11.5px; letter-spacing:.14em; }
.ficha-info h1 { font-size:34px; color:var(--verde-800); }
.ficha-precio { font-family:var(--titulo); font-weight:700; font-size:30px; color:var(--verde-800); }
.ficha-precio--consulta { font-size:17px; font-weight:600; color:var(--texto-3); }
.ficha-info p { font-size:15px; line-height:1.7; color:var(--texto-2); }

.especs {
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--borde); border:1px solid var(--borde);
  border-radius:var(--r-sm); overflow:hidden;
}
.espec { background:var(--blanco); padding:14px 16px; display:flex; flex-direction:column; gap:3px; }
.espec dt { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-4); }
.espec dd { font-size:13.5px; font-weight:600; color:var(--texto); }

.caja-cantidad {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:18px; border-radius:var(--r-sm); background:var(--turquesa-100);
}
.caja-cantidad > span { font-size:13px; font-weight:600; color:var(--verde-800); }
.contador-cant {
  display:flex; align-items:center; border:1.5px solid var(--turquesa-200);
  border-radius:var(--r-xs); overflow:hidden; background:var(--blanco);
}
.contador-cant button {
  border:none; background:var(--blanco); color:var(--verde-800);
  font-size:17px; font-weight:700; width:38px; height:40px; cursor:pointer;
}
.contador-cant button:hover { background:var(--turquesa-100); }
.contador-cant output { min-width:46px; text-align:center; font-family:var(--titulo);
                        font-weight:700; font-size:15px; }
.ficha-unidad { font-size:12.5px; color:#26605b; font-weight:400; }
.caja-cantidad #btn-anadir-ficha { margin-left:auto; }
.ficha-extras { display:flex; gap:22px; flex-wrap:wrap; font-size:13px; color:#3f4f4e; }

/* ════════════ COTIZACIÓN ════════════ */
.cotizacion { padding:30px var(--pad-x) 70px; display:flex; flex-direction:column; gap:24px;
              max-width:var(--ancho); margin:0 auto; width:100%; }
.cotizacion-cab { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cotizacion-cab h1 { font-size:32px; color:var(--verde-800); }
.cotizacion-cols { display:flex; flex-wrap:wrap; gap:32px; align-items:flex-start; }

.lista-items {
  flex:1 1 520px; min-width:0; display:flex; flex-direction:column;
  border:1px solid var(--borde); border-radius:var(--r); overflow:hidden; background:var(--blanco);
}
.fila-items {
  display:grid; grid-template-columns:minmax(150px,2.2fr) minmax(84px,1fr) 116px 30px;
  gap:12px; align-items:center; padding:16px 20px; border-bottom:1px solid var(--borde-2);
}
.fila-items--cab {
  padding:14px 20px; background:var(--suave); border-bottom:1px solid var(--borde);
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--texto-4); font-weight:600;
}
.item-ref { display:flex; gap:14px; align-items:center; min-width:0; overflow-wrap:anywhere; }
.item-ref img { width:56px; height:56px; border-radius:var(--r-xs); border:1px solid var(--borde);
                object-fit:contain; background:var(--blanco); flex:none; }
.item-ref b { font-family:var(--titulo); font-size:14.5px; }
.item-ref span { font-size:12px; color:var(--texto-4); }
.item-unidad { font-size:12.5px; color:#3f4f4e; }
.item-cant { display:flex; align-items:center; border:1.5px solid var(--borde);
             border-radius:var(--r-xs); overflow:hidden; width:fit-content; }
.item-cant button { border:none; background:var(--blanco); color:var(--verde-800);
                    font-size:16px; font-weight:700; width:32px; height:34px; cursor:pointer; }
.item-cant output { min-width:34px; text-align:center; font-weight:700; font-size:14px; }
.item-quitar { border:none; background:transparent; color:#6b7a79; font-size:18px; cursor:pointer; }
.item-quitar:hover { color:var(--verde-800); }
.lista-pie { display:flex; align-items:center; justify-content:space-between;
             gap:12px; padding:16px 20px; background:var(--suave); font-size:13px; color:#3f4f4e; }

.form-cotizacion {
  flex:1 1 340px; max-width:380px; display:flex; flex-direction:column; gap:16px;
  padding:24px; border:1px solid var(--turquesa-200); border-radius:var(--r); background:var(--turquesa-100);
}
.form-cotizacion h2 { font-size:18px; color:var(--verde-800); }
.form-campos { display:flex; flex-direction:column; gap:11px; }
.form-campos input, .form-campos select, .form-campos textarea {
  border:1.5px solid var(--blanco); border-radius:var(--r-xs);
  padding:12px 14px; font-size:13.5px; background:var(--blanco);
  color:var(--texto); outline:none; width:100%;
}
.form-campos textarea { min-height:72px; resize:vertical; }
.form-campos [aria-invalid="true"] { border-color:var(--error); }
.form-error { font-size:12.5px; color:var(--error); font-weight:600; }
.form-nota { font-size:11.5px; line-height:1.55; color:#26605b; }

.vacio {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:80px 20px; border:1px dashed var(--turquesa-200); border-radius:var(--r-md);
  background:var(--suave); text-align:center;
}
.vacio--error { margin:60px 24px; }
.vacio b { font-family:var(--titulo); font-size:20px; color:var(--verde-800); }
.vacio p { font-size:13.5px; color:var(--texto-3); }

.enviado { display:flex; flex-direction:column; align-items:center; gap:18px;
           padding:110px var(--pad-x) 130px; text-align:center; animation:alhecUp 300ms ease both; }
.enviado-ok {
  display:flex; align-items:center; justify-content:center; width:66px; height:66px;
  border-radius:var(--pill); background:var(--turquesa); color:var(--verde-900);
  font-size:30px; font-family:var(--titulo); font-weight:700;
}
.enviado h1 { font-size:34px; color:var(--verde-800); }
.enviado p { font-size:15.5px; line-height:1.7; color:var(--texto-2); max-width:52ch; }

/* ════════════ NOSOTROS ════════════ */
.nosotros-hero { display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;
                 padding:54px var(--pad-x) 56px; max-width:var(--ancho); margin:0 auto; width:100%; }
.nosotros-hero h1 { font-size:44px; line-height:1.12; color:var(--verde-800); }
.nosotros-hero p { font-size:16px; line-height:1.75; color:var(--texto-2); }
.nosotros-hero p:first-of-type { text-align:justify; hyphens:auto; }
.marco {
  display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
  border-radius:20px; background:var(--turquesa-100); border:1.5px dashed var(--turquesa);
  color:var(--verde-600); font-size:13.5px; font-weight:600;
}
.marco--alto { height:400px; }
.marco--medio { height:220px; border-radius:var(--r-md); font-size:13px; }
.marco small { display:block; font-weight:400; font-size:12.5px; color:#26605b; }

.mv { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mv-caja { display:flex; flex-direction:column; gap:14px; padding:34px; border-radius:var(--r-lg); }
.mv-caja p { font-size:15.5px; line-height:1.75; }
.mv--mision { background:var(--verde-800); color:var(--turquesa-100); }
.mv--mision .kicker { color:var(--turquesa); }
.mv--vision { background:var(--turquesa-100); color:var(--texto); }
.mv--vision p { color:#2f4644; }

.valor { display:flex; flex-direction:column; gap:10px; padding:24px;
         border:1px solid var(--borde); border-radius:var(--r); background:var(--blanco); }
.valor-n { font-family:var(--titulo); font-weight:700; font-size:22px; color:var(--turquesa); }
.valor b { font-family:var(--titulo); font-size:16px; color:var(--verde-800); }
.valor span { font-size:13.5px; line-height:1.65; color:#3f4f4e; }

.franja-empresa {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px; padding:34px var(--pad-x); background:var(--turquesa-200);
}
.franja-empresa b { font-family:var(--titulo); font-size:22px; color:var(--verde-900); }
.franja-empresa span { font-size:13.5px; color:#10534C; }

.acordeon { border:1px solid var(--borde); border-radius:var(--r-sm);
            background:var(--blanco); overflow:hidden; }
.acordeon + .acordeon { margin-top:12px; }
.acordeon summary {
  padding:18px 22px; cursor:pointer; font-family:var(--titulo);
  font-weight:700; font-size:16px; color:var(--verde-800); list-style:none;
}
.acordeon summary::-webkit-details-marker { display:none; }
.acordeon summary::after { content:'+'; float:right; font-size:20px; color:var(--verde-600); }
.acordeon[open] summary::after { content:'−'; }
.acordeon-cuerpo { padding:0 22px 20px; display:flex; flex-direction:column; gap:10px;
                   font-size:14px; line-height:1.7; color:var(--texto-2); }

.lista-pagos { display:flex; flex-direction:column; gap:8px; list-style:none; }
.lista-pagos li { display:flex; gap:10px; font-size:14px; color:var(--texto-2); }
.lista-pagos li::before { content:'•'; color:var(--turquesa); font-weight:700; }

/* ════════════ PIE ════════════ */
.pie { background:var(--verde-800); color:var(--turquesa-100); margin-top:auto; }
.pie-cols {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:32px;
  padding:48px var(--pad-x) 36px; max-width:var(--ancho); margin:0 auto;
}
.pie h3 { font-size:15px; color:var(--crema); margin-bottom:14px; }
.pie-col { display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:1.6; }
.pie a { color:var(--turquesa-100); }
.pie a:hover { color:var(--blanco); }
.pie iframe { width:100%; height:190px; border:1px solid rgba(154,231,222,.4); border-radius:var(--r-sm); }
.pie-redes { display:flex; gap:12px; padding-top:6px; }
.pie-redes a {
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:var(--pill); background:var(--turquesa-200);
}
.pie-redes a:hover { background:var(--turquesa); }
.pie-legal {
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;
  padding:20px var(--pad-x); border-top:1px solid rgba(154,231,222,.28);
  max-width:var(--ancho); margin:0 auto;
}
.pie-legal img { width:132px; }
.pie-legal span { font-size:12px; color:var(--turquesa-200); }
/* Aviso sanitario general: va una sola vez en el pie, no producto por producto */
.pie-invima { flex-basis:100%; opacity:.85; }

/* ════════════ ASESOR (chat) ════════════ */
.asesor-btn {
  position:fixed; right:28px; bottom:28px; z-index:60;
  display:flex; align-items:center; gap:12px; padding:12px 20px 12px 14px;
  border:none; border-radius:var(--pill); background:var(--verde-800); color:var(--crema);
  box-shadow:0 12px 30px rgba(0,66,60,.35);
  font-family:var(--titulo); font-weight:700; font-size:14px; cursor:pointer;
}
.asesor-btn .ini {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--pill);
  background:var(--turquesa); color:var(--verde-900); font-size:15px;
}
.asesor {
  position:fixed; right:28px; bottom:28px; width:356px; max-width:calc(100vw - 32px); z-index:60;
  display:flex; flex-direction:column; border-radius:var(--r-md); overflow:hidden;
  background:var(--crema); box-shadow:0 20px 50px rgba(0,66,60,.3);
  animation:alhecUp 200ms ease both;
}
.asesor-cab { display:flex; align-items:center; gap:12px; padding:14px 16px;
              background:var(--verde-800); color:var(--crema); }
.asesor-cab .ini { display:inline-flex; align-items:center; justify-content:center;
                   width:32px; height:32px; border-radius:var(--pill);
                   background:var(--turquesa); color:var(--verde-900);
                   font-family:var(--titulo); font-weight:700; }
.asesor-cab b { font-family:var(--titulo); font-size:14.5px; }
.asesor-cab small { font-size:11.5px; color:var(--turquesa-200); }
.asesor-cerrar { margin-left:auto; border:none; background:transparent;
                 color:var(--turquesa-200); font-size:19px; cursor:pointer; }
.asesor-mensajes { display:flex; flex-direction:column; gap:10px; padding:16px;
                   max-height:300px; overflow-y:auto; }
.msj { max-width:80%; padding:10px 13px; border-radius:var(--r-sm); font-size:13px; line-height:1.55; }
.msj--yo    { align-self:flex-end; background:var(--verde-800); color:var(--crema); }
.msj--ellos { align-self:flex-start; background:var(--turquesa-100); color:#26605b; }
.asesor-pie { display:flex; gap:8px; padding:12px 14px;
              border-top:1px solid var(--borde); background:var(--blanco); }
.asesor-pie input { flex:1; border:1.5px solid var(--borde); border-radius:var(--r-xs);
                    padding:11px 13px; font-size:13px; outline:none; }
.asesor-pie button { border:none; background:var(--verde-600); color:var(--crema);
                     font-family:var(--titulo); font-weight:700; font-size:13px;
                     padding:0 16px; border-radius:var(--r-xs); cursor:pointer; }

/* ════════════ AVISO ════════════ */
.aviso {
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%); z-index:70;
  display:flex; align-items:center; gap:12px; padding:13px 20px; border-radius:var(--pill);
  background:var(--texto); color:var(--turquesa-100); font-size:13.5px; font-weight:600;
  box-shadow:0 14px 34px rgba(0,0,0,.25); animation:alhecToast 2400ms ease both;
}
.aviso .ok { display:inline-flex; align-items:center; justify-content:center;
             width:20px; height:20px; border-radius:var(--pill);
             background:var(--turquesa); color:var(--verde-900); font-size:12px; font-weight:700; }

/* ════════════ RESPONSIVE ════════════ */
@media (max-width:1100px) {
  .ficha-cols  { grid-template-columns:1fr; gap:28px; }
  .ficha-foto  { height:360px; }
  .nosotros-hero { grid-template-columns:1fr; gap:28px; }
  .marco--alto { height:280px; }
  .redes { grid-template-columns:1fr; }
}
@media (max-width:980px) {
  :root { --pad-x:24px; }
  /* los filtros pasan a ser una tira horizontal de chips, no una columna */
  .catalogo { grid-template-columns:1fr; }
  .filtros {
    border-right:none; border-bottom:1px solid var(--borde);
    flex-direction:row; align-items:flex-start;
    overflow-x:auto; gap:22px; padding:16px 24px;
  }
  .filtro-grupo { flex:none; }
  .filtros #filtro-categorias,
  .filtros #filtro-marcas { display:flex; gap:8px; }
  .filtros .filtro-item,
  .filtros .filtro-check {
    width:auto; white-space:nowrap;
    border:1px solid var(--borde); background:var(--blanco);
  }
  .filtros .filtro-check { border-radius:var(--r-xs); padding:8px 10px; }
  .filtros select, .filtros .btn { width:auto; }
  .filtros .btn { align-self:flex-end; }
  .panel-catalogo { padding-bottom:96px; }
  .productos { grid-template-columns:repeat(2,1fr); }
  .hechos, .rejilla-3 { grid-template-columns:repeat(2,1fr); }
  .rejilla-4 { grid-template-columns:repeat(3,1fr); }
  .mv { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .cabecera-fila { gap:14px 18px; padding:16px var(--pad-x); }
  .logo img { width:132px; }
  .pestanas { order:3; width:100%; margin:0; overflow-x:auto; }
  .pestana { padding:10px 18px; font-size:14px; }
  .btn-cotizacion { margin-left:auto; }
  .banner { margin:16px 0 0; border-radius:0; aspect-ratio:16/9; }
  .intro { padding:36px var(--pad-x); gap:26px; }
  .intro-texto h2 { font-size:26px; }
  .nosotros-hero h1 { font-size:32px; }
  .ficha-info h1 { font-size:27px; }
  .seccion-cab h2 { font-size:22px; }
  .fila-items { grid-template-columns:1fr auto; gap:10px; }
  .fila-items--cab { display:none; }
  .form-cotizacion { max-width:none; }
  .asesor, .asesor-btn { right:16px; bottom:16px; }
}
@media (max-width:560px) {
  .productos { grid-template-columns:1fr; }
  .hechos, .rejilla-3, .rejilla-4 { grid-template-columns:1fr; }
  .especs { grid-template-columns:1fr; }
  .enviado { padding:70px var(--pad-x) 80px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
