/* ============================================================
   Tool City — landing pública
   Todos los valores salen del Tool City Design System. No se inventan.
   Estructura mobile-first, tal como pide el handoff:
     base            → teléfono (< 640 px)
     min-width:640   → tableta y escritorio
     min-width:1000  → escritorio
   El prototipo resolvía esto con un estado `device` en JS; aquí son
   media queries de CSS y el JS solo lleva filtro, búsqueda y cotización.
   ============================================================ */

@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/fonts.css";
@import "./tokens/spacing.css";
@import "./tokens/shape.css";
@import "./tokens/motion.css";
@import "./tokens/patterns.css";
@import "./tokens/base.css";
@import "./iconos.css";

:root{
  /* Logos de terceros (Meta). No son parte del design system: se pintan
     con máscara para que hereden color. Ver README del handoff. */
  --icon-whatsapp:url("../assets/icon-whatsapp.svg");
  --icon-facebook:url("../assets/icon-facebook.svg");
  --linea-oscura:oklch(0.34 0.008 235);
}

@keyframes tc-saw{to{transform:rotate(360deg)}}

body{background:var(--tc-n-0)}
img{max-width:100%}
a{text-decoration:none}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

/* Icono enmascarado: hereda currentColor. Uso: <span class="i" style="--g:var(--icon-search)"> */
.i{
  display:inline-block;flex:0 0 auto;
  width:var(--s,20px);height:var(--s,20px);
  background-color:currentColor;
  -webkit-mask:var(--g) center/contain no-repeat;
          mask:var(--g) center/contain no-repeat;
}

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

/* ------------------------------------------------------------
   Contenedor y ritmo de sección
   ------------------------------------------------------------ */
.wrap{max-width:1200px;margin:0 auto}
.sec{max-width:1200px;margin:0 auto;padding:28px 14px}
@media (min-width:640px){ .sec{padding:44px 24px} }
@media (min-width:1000px){ .sec{padding:56px 24px} }

.sec-cab{margin:0 0 20px}
.sec-cab h2{margin:6px 0 0;font-size:26px;line-height:1.05}
@media (min-width:640px){ .sec-cab h2{font-size:40px} }

/* ------------------------------------------------------------
   Botones — alturas de control 34 / 44 / 54 (48–56 en teléfono)
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;
  font-family:var(--font-title);font-weight:700;font-size:13px;
  letter-spacing:0.08em;text-transform:uppercase;text-align:center;
  transition:background-color var(--dur-fast) var(--ease-mech),
             color var(--dur-fast) var(--ease-mech),
             transform var(--dur-fast) var(--ease-mech);
}
.btn:active{transform:scale(var(--press-scale))}

.btn--44{height:52px;padding:0 16px}
.btn--54{height:56px;padding:0 26px;font-size:15px}
@media (min-width:640px){
  .btn--44{height:44px}
  .btn--54{height:54px}
}

.btn--amarillo{background:var(--tc-yellow);color:var(--tc-n-900)}
.btn--amarillo:hover{background:var(--tc-yellow-hover);color:var(--tc-n-900)}
.btn--amarillo:active{background:var(--tc-yellow-press)}

.btn--verde{background:var(--tc-green);color:var(--tc-n-0)}
.btn--verde:hover{background:oklch(from var(--tc-green) calc(l - 0.05) c h);color:var(--tc-n-0)}

/* Contorno secundario: al hover se invierte a relleno tinta con texto blanco. */
.btn--linea{background:var(--tc-n-0);border:2px solid var(--tc-n-900);color:var(--text-strong)}
.btn--linea:hover{background:var(--tc-n-900);color:var(--tc-n-0)}

.btn--verde-linea{background:var(--tc-n-0);border:2px solid var(--tc-green);color:var(--tc-green)}
.btn--verde-linea:hover{background:var(--tc-green);color:var(--tc-n-0)}

.btn--tinta{background:var(--tc-n-900);color:var(--tc-n-0)}
.btn--tinta:hover{background:var(--tc-n-800);color:var(--tc-n-0)}

.btn[disabled],.btn[aria-disabled="true"]{opacity:0.4;pointer-events:none}

/* ------------------------------------------------------------
   Header pegado
   ------------------------------------------------------------ */
.header{position:sticky;top:0;z-index:40;background:var(--tc-n-1000)}

.topbar{display:none}
@media (min-width:640px){
  .topbar{
    display:flex;justify-content:space-between;gap:16px;
    padding:8px 24px;border-bottom:1px solid var(--linea-oscura);
    font-size:13px;color:var(--tc-n-400);
  }
  .topbar a{color:var(--tc-yellow);display:flex;align-items:center;gap:7px}
  .topbar a:hover{color:var(--tc-yellow-hover)}
}

.header-fila{padding:0 14px;min-height:72px;display:flex;align-items:center;gap:10px}
@media (min-width:640px){
  .header-fila{
    max-width:1200px;margin:0 auto;padding:12px 24px;min-height:88px;
    display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;
  }
}

/* La liga del logo se estira a 44 px: en el taller nada se toca por debajo de eso. */
.logo-liga{display:flex;align-items:center;min-height:44px;flex:0 0 auto}
.logo{height:32px;width:auto;display:block}
@media (min-width:640px){ .logo{height:40px} }

/* Buscador del header */
.buscador{display:flex;align-items:center;gap:10px;flex:1 1 240px;min-width:200px;max-width:360px}
.buscador form{flex:1 1 auto;min-width:0}
.buscador-caja{display:flex;height:48px;border:2px solid var(--tc-yellow);background:var(--tc-n-0)}
.buscador-caja input{
  flex:1;min-width:0;border:0;outline:0;padding:0 12px;
  font-family:var(--font-body);font-size:15px;color:var(--tc-n-900);background:transparent;
}
.buscador-caja button{
  width:48px;flex:0 0 auto;border:0;background:var(--tc-yellow);
  color:var(--tc-n-900);cursor:pointer;display:grid;place-items:center;
}
.buscador-caja button:hover{background:var(--tc-yellow-hover)}

.cuadro-fb{
  display:grid;place-items:center;width:48px;height:48px;flex:0 0 auto;
  border:2px solid var(--linea-oscura);color:var(--tc-n-0);
  transition:border-color var(--dur-fast) var(--ease-mech);
}
.cuadro-fb:hover{border-color:var(--tc-yellow);color:var(--tc-yellow)}

.nav{display:flex;gap:14px;align-items:center;margin-left:auto;flex-wrap:wrap}
.nav > a{
  font-family:var(--font-title);font-weight:700;font-size:13px;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--tc-n-0);
  transition:color var(--dur-fast) var(--ease-mech);
}
.nav > a:hover{color:var(--tc-yellow)}

/* Fila de acciones y buscador de teléfono */
.acciones-movil{display:flex;gap:8px;margin-left:auto}
.acciones-movil .cuadro-wa{
  width:48px;height:48px;background:var(--tc-green);color:var(--tc-n-0);
  display:grid;place-items:center;flex:0 0 auto;
}
.acciones-movil .btn-cot{
  display:flex;align-items:center;gap:6px;height:48px;padding:0 12px;border:0;
  background:var(--tc-yellow);color:var(--tc-n-900);cursor:pointer;
  font-family:var(--font-title);font-weight:700;font-size:14px;
}
.btn-menu{
  width:48px;height:48px;border:0;background:transparent;color:var(--tc-n-0);
  display:grid;place-items:center;cursor:pointer;
}
.header-movil{padding:0 14px 12px;display:flex;align-items:center;gap:10px}
.header-movil .buscador-caja{flex:1;min-width:0;height:52px}
.header-movil .buscador-caja input{padding:0 14px;font-size:17px}
.header-movil .buscador-caja button{width:56px}
.header-movil .cuadro-fb{width:52px;height:52px}

@media (min-width:640px){
  .acciones-movil,.header-movil,.menu-movil{display:none !important}
}
@media (max-width:639px){
  .buscador,.nav{display:none}
}

/* Menú desplegable de teléfono */
.menu-movil{
  display:flex;flex-direction:column;
  border-top:2px solid var(--tc-yellow);background:var(--tc-n-950);
}
.menu-movil a{
  display:flex;align-items:center;min-height:56px;padding:0 18px;
  border-bottom:1px solid var(--linea-oscura);color:var(--tc-n-0);
  font-family:var(--font-title);font-weight:700;font-size:15px;
  letter-spacing:0.08em;text-transform:uppercase;
}
.menu-movil a:hover{color:var(--tc-yellow)}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;background-color:var(--tc-n-1000)}
.hero-inner{
  position:relative;max-width:1200px;margin:0 auto;
  display:grid;align-items:start;grid-template-columns:1fr;gap:0;padding:28px 14px;
}
@media (min-width:640px){
  .hero-inner{grid-template-columns:1fr 180px;gap:24px;padding:40px 24px}
}
@media (min-width:1000px){
  .hero-inner{grid-template-columns:1.15fr 0.85fr;gap:40px;padding:56px 24px}
}

.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--tc-yellow);color:var(--tc-n-900);padding:5px 10px;
  font-family:var(--font-title);font-weight:700;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;
}
.hero h1{
  font-size:32px;line-height:0.98;letter-spacing:-0.02em;
  color:var(--tc-n-0);margin:14px 0 12px;
}
.hero p{
  font-family:var(--font-body);font-weight:300;line-height:1.55;
  color:var(--tc-n-300);margin:0 0 22px;max-width:46ch;font-size:16px;
}
@media (min-width:640px){
  .hero h1{font-size:44px}
  .hero p{font-size:19px}
}
@media (min-width:1000px){ .hero h1{font-size:56px} }

.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;flex-direction:column}
@media (min-width:640px){ .hero-ctas{flex-direction:row} }

.hero-cifras{
  display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;padding-top:20px;
  border-top:1px solid var(--linea-oscura);
}
@media (min-width:640px){ .hero-cifras{gap:40px} }
.cifra-num{
  font-family:var(--font-title);font-weight:700;letter-spacing:-0.02em;
  line-height:1;color:var(--tc-yellow);font-size:26px;
}
@media (min-width:640px){ .cifra-num{font-size:34px} }
/* El rótulo se limita a lo ancho para que, cuando sea largo ("entrega en CDMX
   y zona conurbada"), baje a dos renglones dentro de su columna en vez de
   empujar toda la fila de cifras y romper la banda de tres. */
.cifra-lab{
  font-family:var(--font-title);font-weight:700;font-size:12px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--tc-n-400);margin-top:2px;
  max-width:172px;line-height:1.25;
}

/* Engrane: la única animación de la página, gesto característico de la marca. */
.engrane-wrap{display:none}
@media (min-width:640px){
  .engrane-wrap{
    display:flex;justify-content:center;align-items:center;
    align-self:center;height:100%;min-width:0;
  }
  .engrane{width:168px;max-width:100%;animation:tc-saw var(--dur-saw) linear infinite}
}
@media (min-width:1000px){ .engrane{width:280px} }
@media (prefers-reduced-motion:reduce){ .engrane{animation:none} }

/* ------------------------------------------------------------
   Marcas
   ------------------------------------------------------------ */
.marcas{background:var(--tc-n-0);border-bottom:1px solid var(--border-hairline)}
.marcas-bar{padding:18px 14px}
@media (min-width:640px){ .marcas-bar{max-width:1200px;margin:0 auto;padding:22px 24px} }

.marcas-cab{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding-bottom:14px;
}
.marcas-cab span:last-child{font-size:14px;color:var(--text-muted)}

.marcas-niveles{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media (min-width:640px){ .marcas-niveles{gap:28px} }
@media (min-width:1000px){ .marcas-niveles{grid-template-columns:300px 1fr} }

.nivel-lab{
  font-family:var(--font-title);font-weight:700;font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted);
  padding-bottom:8px;border-bottom:2px solid var(--tc-yellow);margin-bottom:10px;
}
.marcas-master{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.marcas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}

/* Tratamiento uniforme: los logos ajenos leen como familia y no compiten con el amarillo. */
.marca{
  min-height:68px;border:1px solid var(--border-hairline);
  background-color:var(--tc-n-0);background-repeat:no-repeat;background-position:center;
  background-size:78% auto;filter:grayscale(1) contrast(1.12);opacity:0.82;
}
@media (min-width:640px){ .marca{min-height:84px;background-size:82% auto} }

/* ------------------------------------------------------------
   Catálogo
   ------------------------------------------------------------ */
.cat-cab{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:3px solid var(--tc-yellow);padding-bottom:12px;margin-bottom:20px;
}
.cat-cab h2{margin:6px 0 0;font-size:26px;line-height:1.05}
@media (min-width:640px){ .cat-cab h2{font-size:40px} }

.cat-buscador{display:flex;flex-direction:column;gap:6px;flex:0 1 100%;min-width:auto}
@media (min-width:640px){ .cat-buscador{flex:0 1 340px;min-width:260px} }
.cat-buscador .caja{display:flex;height:48px;border:2px solid var(--tc-n-900);background:var(--tc-n-0)}
.cat-buscador input{
  flex:1;min-width:0;border:0;outline:0;padding:0 14px;background:transparent;
  font-family:var(--font-body);font-size:15px;color:var(--tc-n-900);
}
.cat-buscador .lupa{
  width:48px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--tc-n-900);color:var(--tc-n-0);
}
.conteo{font-size:14px;color:var(--text-muted)}

/* Chips de categoría — primer nivel */
.chips{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:16px}
@media (min-width:640px){ .chips{flex-wrap:wrap;overflow-x:visible} }
.chip{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  min-height:48px;padding:0 16px;
  border:2px solid var(--tc-n-900);background:var(--tc-n-0);color:var(--text-body);
  font-family:var(--font-title);font-weight:700;font-size:13px;
  letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-mech),
             color var(--dur-fast) var(--ease-mech);
}
@media (min-width:640px){ .chip{min-height:44px} }
.chip:hover{background:var(--tc-n-100)}
.chip[aria-pressed="true"]{background:var(--tc-n-900);color:var(--tc-n-0)}

/* Chips de subcategoría — segundo nivel, tratado como pestaña.
   La regla activa siempre es amarilla, según el design system. */
.subchips{
  display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;
  margin:-8px 0 16px;border-bottom:1px solid var(--border-hairline);
}
@media (min-width:640px){ .subchips{flex-wrap:wrap;overflow-x:visible;gap:2px} }
.subchip{
  display:inline-flex;align-items:center;flex:0 0 auto;
  min-height:48px;padding:0 12px;
  border:0;border-bottom:3px solid transparent;background:transparent;
  color:var(--text-muted);
  font-family:var(--font-title);font-weight:700;font-size:12px;
  letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;
  transition:color var(--dur-fast) var(--ease-mech),
             border-color var(--dur-fast) var(--ease-mech);
}
@media (min-width:640px){ .subchip{min-height:36px} }
.subchip:hover{color:var(--text-strong)}
.subchip[aria-pressed="true"]{color:var(--text-strong);border-bottom-color:var(--tc-yellow)}

/* Rejilla y tarjeta */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
@media (min-width:640px){ .rejilla{gap:16px} }

.tarjeta{
  border:1px solid var(--border-hairline);background:var(--tc-n-0);
  display:flex;flex-direction:column;
  transition:transform var(--dur-base) var(--ease-mech),
             box-shadow var(--dur-base) var(--ease-mech);
}
@media (hover:hover){
  .tarjeta:hover{transform:translateY(-2px);box-shadow:var(--shadow-hard-yellow)}
}

/* La celda de imagen mide alto fijo: el estado "sin foto" ocupa exactamente
   lo mismo, para que el layout no se mueva. */
.tarjeta-media{
  position:relative;height:150px;background-color:var(--tc-n-100);
  display:grid;place-items:center;overflow:hidden;color:var(--tc-n-400);
}
@media (min-width:640px){ .tarjeta-media{height:170px} }
.tarjeta-media.con-foto{
  background-color:var(--tc-n-0);background-size:contain;
  background-repeat:no-repeat;background-position:center;
}

.tarjeta-cuerpo{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.t-cat{
  font-family:var(--font-title);font-size:11px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);
}
.t-nombre{
  font-family:var(--font-title);font-weight:700;font-size:19px;line-height:1.1;
  letter-spacing:-0.01em;color:var(--text-strong);text-transform:uppercase;
  overflow-wrap:anywhere;
}
.t-spec{
  font-size:14px;color:var(--text-muted);line-height:1.45;
  border-top:1px solid var(--border-hairline);padding-top:8px;
}
.t-acciones{display:flex;flex-direction:column;gap:8px;margin-top:auto}

.cat-pie{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:24px}

/* ------------------------------------------------------------
   Barra amarilla de servicios
   ------------------------------------------------------------ */
.servicios{background:var(--tc-yellow)}
.servicios-bar{
  max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  padding:22px 14px;gap:16px;
}
@media (min-width:640px){ .servicios-bar{padding:32px 24px;gap:24px} }
.servicio-tit{
  font-family:var(--font-title);font-weight:700;font-size:15px;
  letter-spacing:0.04em;text-transform:uppercase;color:var(--tc-n-900);line-height:1.15;
}
.servicio-txt{font-size:15px;color:var(--tc-n-800);line-height:1.45;margin-top:4px}

.hazard{height:14px}

/* ------------------------------------------------------------
   Sección WhatsApp
   ------------------------------------------------------------ */
.wa-sec{background:var(--tc-n-1000)}
.wa-sec h2{color:var(--tc-n-0);margin:6px 0 8px;font-size:26px;line-height:1.05}
@media (min-width:640px){ .wa-sec h2{font-size:40px} }
.wa-sec .entrada{
  font-family:var(--font-body);font-weight:300;color:var(--tc-n-300);
  margin:0 0 24px;max-width:60ch;font-size:16px;
}
@media (min-width:640px){ .wa-sec .entrada{font-size:19px} }
.wa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
@media (min-width:640px){ .wa-grid{gap:16px} }
.wa-carta{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--tc-yellow);padding:18px;color:var(--tc-n-900);
  transition:background-color var(--dur-fast) var(--ease-mech),
             transform var(--dur-base) var(--ease-mech);
}
@media (min-width:640px){ .wa-carta{padding:20px;min-height:220px} }
.wa-carta:hover{background:var(--tc-yellow-hover);color:var(--tc-n-900);transform:translateY(-2px)}
.wa-carta .tit{
  font-family:var(--font-title);font-weight:700;font-size:19px;
  text-transform:uppercase;line-height:1.1;margin-top:12px;color:var(--tc-n-900);
}
.wa-carta .txt{font-size:15px;color:var(--tc-n-800);line-height:1.5;margin-top:6px}
.wa-carta .cta{
  font-family:var(--font-title);font-weight:700;font-size:12px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--tc-n-900);
  margin-top:14px;border-bottom:2px solid var(--tc-n-900);padding-bottom:2px;
}
.wa-cierre{margin:20px 0 0;font-size:15px;color:var(--tc-n-400)}

/* ------------------------------------------------------------
   Contacto
   ------------------------------------------------------------ */
.contacto{background:var(--tc-n-50);border-top:1px solid var(--border-hairline)}
/* Cardinalidad fija de 2: con auto-fill salía una tercera columna vacía. */
.contacto-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px;align-items:stretch}
@media (min-width:640px){ .contacto-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} }

.tarjeta-dura{
  border:2px solid var(--tc-n-900);box-shadow:6px 6px 0 var(--tc-green);
  background:var(--tc-n-0);padding:20px;
}
.tarjeta-suave{border:1px solid var(--border-hairline);background:var(--tc-n-0);padding:20px}
.contacto-tit{display:flex;align-items:center;gap:10px}
.contacto-tit span:last-child{
  font-family:var(--font-title);font-weight:700;font-size:22px;text-transform:uppercase;
}
.contacto-txt{font-size:17px;color:var(--text-body);line-height:1.55;margin:10px 0 16px}
.contacto-datos{display:flex;flex-direction:column;gap:6px;font-size:17px;color:var(--text-strong)}
.tel{font-family:var(--font-title);font-weight:700;font-size:19px;letter-spacing:-0.01em;color:var(--text-strong)}
.tel:hover{color:var(--tc-green)}
.contacto-datos a{color:var(--text-link)}
.contacto-nota{font-size:15px;color:var(--text-muted)}
.contacto-btns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.contacto-btns .btn{padding:0 18px;font-size:14px}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer{background:var(--tc-n-1000);color:var(--tc-n-400)}
.footer-inner{padding:24px 14px;display:flex;flex-direction:column;gap:24px}
@media (min-width:640px){
  .footer-inner{
    max-width:1200px;margin:0 auto;padding:40px 24px;
    display:flex;flex-direction:row;justify-content:space-between;gap:32px;flex-wrap:wrap;
  }
}
.footer-marca{display:flex;flex-direction:column;gap:10px}
.footer-marca img{height:44px;width:auto;align-self:flex-start;display:block}
.footer-marca span{font-size:15px}
.footer-cols{display:flex;gap:40px;flex-wrap:wrap;font-size:15px}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col a{color:var(--tc-n-300)}
.footer-col a:hover{color:var(--tc-yellow)}

/* ------------------------------------------------------------
   Panel lateral de cotización
   ------------------------------------------------------------ */
.overlay{position:fixed;inset:0;z-index:90;display:flex;justify-content:flex-end}
.overlay-fondo{position:absolute;inset:0;background:oklch(0 0 0 / 0.62)}
.panel{
  position:relative;background:var(--tc-n-0);width:340px;max-width:92vw;height:100%;
  display:flex;flex-direction:column;box-shadow:-12px 0 40px oklch(0 0 0 / 0.3);
}
@media (min-width:640px){ .panel{width:400px} }

.panel-cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px;background:var(--tc-n-900);color:var(--tc-n-0);
}
.panel-cab .tit{
  font-family:var(--font-title);font-weight:700;font-size:15px;
  letter-spacing:0.12em;text-transform:uppercase;
}
.panel-cab .resumen{font-size:14px;color:var(--tc-n-400);margin-top:2px}
.panel-cerrar{
  width:44px;height:44px;border:0;background:transparent;color:var(--tc-n-0);
  font-size:28px;line-height:1;cursor:pointer;flex:0 0 auto;
}
.panel-cuerpo{flex:1;overflow:auto}

.panel-vacio{padding:28px 18px;text-align:center;color:var(--tc-n-400)}
.panel-vacio .tit{
  font-family:var(--font-title);font-weight:700;font-size:19px;
  text-transform:uppercase;margin-top:10px;color:var(--text-strong);
}
.panel-vacio p{font-size:16px;color:var(--text-body);line-height:1.55}
.panel-vacio .btn{width:100%}

.renglon{
  display:grid;grid-template-columns:64px 1fr;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--border-hairline);
}
.renglon-media{
  width:64px;height:64px;background-color:var(--tc-n-100);
  border:1px solid var(--border-hairline);background-size:contain;
  background-repeat:no-repeat;background-position:center;
}
.renglon-datos{display:flex;flex-direction:column;gap:8px;min-width:0}
.renglon-cat{
  font-family:var(--font-title);font-size:10px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);
}
.renglon-nombre{
  font-family:var(--font-title);font-weight:700;font-size:15px;line-height:1.15;
  text-transform:uppercase;color:var(--text-strong);overflow-wrap:anywhere;
}
.renglon-fila{display:flex;align-items:center;gap:10px}
.stepper{display:flex;align-items:center;border:2px solid var(--tc-n-900);height:44px}
.stepper button{
  width:44px;height:100%;border:0;background:var(--tc-n-0);
  font-size:22px;line-height:1;color:var(--text-strong);cursor:pointer;
}
.stepper button:hover{background:var(--tc-n-900);color:var(--tc-n-0)}
.stepper .qty{width:44px;text-align:center;font-family:var(--font-title);font-weight:700;font-size:17px}
.quitar{
  margin-left:auto;height:44px;padding:0 12px;border:0;background:transparent;
  color:var(--text-muted);font-family:var(--font-title);font-weight:700;font-size:12px;
  letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;
}
.quitar:hover{color:var(--tc-flame)}

.previa{padding:16px}
.previa pre{
  margin:0;padding:12px;background:var(--tc-n-100);
  border-left:3px solid var(--tc-green);
  font-family:var(--font-body);font-size:14px;line-height:1.55;
  color:var(--text-strong);white-space:pre-wrap;
}
.previa .nota{
  display:flex;align-items:center;gap:8px;margin-top:12px;
  font-size:14px;color:var(--text-muted);
}

.panel-pie{
  padding:14px 16px;border-top:2px solid var(--tc-n-900);
  display:flex;flex-direction:column;gap:8px;background:var(--tc-n-0);
}
.panel-pie .btn--enviar{height:56px;font-size:15px}
.panel-pie .fila{display:flex;gap:8px}
.panel-pie .fila .btn{flex:1;height:48px}
.panel-pie .vaciar{
  flex:0 0 auto;height:48px;padding:0 14px;border:0;background:transparent;
  color:var(--text-muted);font-family:var(--font-title);font-weight:700;font-size:13px;
  letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;
}
.panel-pie .vaciar:hover{color:var(--tc-flame)}

/* Botón flotante de teléfono */
.fab{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:10px;height:56px;padding:0 22px;border:0;
  background:var(--tc-yellow);color:var(--tc-n-900);
  font-family:var(--font-title);font-weight:700;font-size:14px;
  letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 10px 28px oklch(0 0 0 / 0.35);
}
.fab:active{transform:translateX(-50%) scale(var(--press-scale))}
@media (min-width:640px){ .fab{display:none !important} }