:root{
  /* Paleta oficial "Huella y Corazón" -- Manual de Marca v1.0, jul 2026 */
  --ink:#2E2A24;        /* Carbon -- texto sobre fondos claros */
  --ink-soft:#6B6350;
  --paper:#DFD6B9;      /* Crema -- fondo de pagina */
  --card:#FFFFFF;
  --accent:#C1694F;     /* Terracota -- acentos, botones, piezas de campana */
  --accent-deep:#A6543D;
  --gold:#A98C48;       /* Dorado -- anillo/icono del logotipo, detalles */
  --trust:#172716;      /* Verde bosque -- color dominante de marca */
  --trust-soft:#EAE1C6;
  --warn:#96382A;
  --line:#CBBFA0;
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --on-dark-primary:#F3EEDC;   /* texto principal sobre fondo verde bosque */
  --on-dark-secondary:#B9AF8C; /* texto secundario sobre fondo verde bosque */
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
  --radius: 20px;
  --shadow-soft: 0 10px 30px -12px rgba(23,39,22,0.22);
  --shadow-lift: 0 18px 44px -16px rgba(23,39,22,0.30);
}
*{box-sizing:border-box;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
  line-height:1.6;-webkit-font-smoothing:antialiased;position:relative;
}
/* grano sutil sobre el papel -- da textura "artesanal", no plano/digital */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--accent);color:#fff;}
main, header, section, footer{position:relative;z-index:2;}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* header -- verde bosque solido: es el color dominante de marca del manual,
   no un acento aislado (antes el header era claro y el verde casi no se veia) */
.site-header{position:sticky;top:0;background:rgba(23,39,22,.94);backdrop-filter:blur(6px);z-index:20;border-bottom:1px solid rgba(255,255,255,0.08);}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;padding:12px 0;}
/* El sello ya trae "Huella y Corazon" + tagline escritos en el anillo -- es
   el logo completo, no un icono decorativo. Se muestra solo y grande (no
   junto a un wordmark de texto que lo compita/empequeñezca); el nombre en
   texto queda para lectores de pantalla y SEO via .sr-only. */
.brand-mark{display:inline-flex;align-items:center;gap:10px;}
.brand-icon{width:56px;height:56px;flex:none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.site-nav{display:flex;gap:26px;font-size:14px;font-weight:600;}
.site-nav a{position:relative;color:var(--on-dark-primary);}
.site-nav a:hover{color:var(--gold);}
.header-actions{display:flex;align-items:center;gap:14px;}
.nav-toggle{display:none;background:none;border:1.5px solid var(--on-dark-primary);border-radius:8px;width:38px;height:38px;font-size:18px;line-height:1;cursor:pointer;color:var(--on-dark-primary);}
#account-area{display:flex;align-items:center;}
.account-chip{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--on-dark-primary);}
.account-chip img{width:26px;height:26px;border-radius:999px;object-fit:cover;}
.account-chip button{background:none;border:none;color:var(--on-dark-secondary);font-size:12px;cursor:pointer;text-decoration:underline;}
.login-trigger{background:none;border:1.5px solid var(--on-dark-primary);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;color:var(--on-dark-primary);cursor:pointer;}
.account-link{display:flex;align-items:center;gap:8px;border:1.5px solid var(--on-dark-primary);border-radius:999px;padding:8px 14px;color:var(--on-dark-primary);text-decoration:none;transition:background .15s ease;}
.account-link:hover{background:rgba(255,255,255,0.12);}
.account-link::after{content:"›";font-weight:700;margin-left:2px;}

/* modal de login/registro */
.auth-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--card);border-radius:20px;box-shadow:0 24px 60px rgba(27,36,48,0.25);z-index:70;width:340px;max-width:92vw;padding:28px 26px;display:none;}
.auth-modal.open{display:block;}
.auth-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink-soft);}
.auth-tabs{display:flex;gap:8px;margin-bottom:18px;}
.auth-tabs .auth-tab{flex:1;background:none;border:none;border-bottom:2px solid var(--line);padding:8px 0;font-size:14px;font-weight:700;color:var(--ink-soft);cursor:pointer;}
.auth-tabs .auth-tab.active{color:var(--ink);border-bottom-color:var(--accent);}
.auth-divider{text-align:center;color:var(--ink-soft);font-size:12px;margin:16px 0;text-transform:uppercase;letter-spacing:.05em;}
#auth-form label,#code-form label,#address-form label,#guest-shipping-section label,.styled-form label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:14px 0 6px;}
#auth-form label:first-of-type,#code-form label:first-of-type,#address-form label:first-of-type,#guest-shipping-section label:first-of-type,.styled-form label:first-of-type{margin-top:0;}
#auth-form input,#code-form input,#address-form input,#address-form select,#guest-shipping-section input,#guest-shipping-section select,.styled-form input,.styled-form select,.styled-form textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px;font-family:inherit;background:var(--card);color:var(--ink);}
.styled-form textarea{resize:vertical;min-height:70px;}
.styled-form input[type="file"]{border:1.5px dashed var(--line);padding:10px;font-size:12.5px;cursor:pointer;}
#address-form select,#guest-shipping-section select,.styled-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6350' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
#address-form,#guest-shipping-section{max-width:420px;}
.styled-form input:disabled{opacity:.6;cursor:not-allowed;}
.pw-field{position:relative;}
.pw-field input{padding-right:56px;}
.pw-toggle{position:absolute;top:50%;right:10px;transform:translateY(-50%);background:none;border:none;font-size:12px;font-weight:700;color:var(--accent-deep);cursor:pointer;padding:4px;}
#auth-remember-wrap input[type="checkbox"]{width:auto;}
#code-form input#code-input{letter-spacing:.3em;font-weight:700;text-align:center;font-size:18px;}
#auth-form .error,#code-form .error,#address-form .error{color:var(--warn);font-size:13px;margin-top:10px;}
.pw-checklist{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;padding:0;}
.pw-checklist li{font-size:12px;color:var(--ink-soft);}
.pw-checklist li::before{content:"○ ";}
.pw-checklist li.ok{color:var(--trust);font-weight:600;}
.pw-checklist li.ok::before{content:"✓ ";}
.pw-secure-msg{margin:6px 0 0;font-size:12.5px;font-weight:700;color:var(--trust);}
#auth-overlay{z-index:69;}

/* modal de contacto */
.contact-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--card);border-radius:20px;box-shadow:0 24px 60px rgba(27,36,48,0.25);z-index:70;width:380px;max-width:92vw;max-height:88vh;overflow:auto;display:none;}
.contact-modal.open{display:block;}
.contact-modal-body{padding:18px 22px 22px;}
.contact-direct{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.contact-direct .btn{padding:9px 16px;font-size:13px;}
#contact-form{display:flex;flex-direction:column;gap:10px;}
#contact-form input,#contact-form textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px;font-family:inherit;background:var(--card);resize:vertical;}
.contact-status{font-size:13px;margin:0;color:var(--warn);}
.contact-status.ok{color:var(--trust);}
.cart-btn{position:relative;background:var(--accent);color:#fff;border:none;border-radius:999px;padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-soft);}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--gold);color:#172716;font-size:11px;border-radius:999px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px;}

/* hero -- fondo verde bosque (color dominante de marca), como en el manual:
   los paneles claros (crema/blanco) son el contraste, no la base */
.hero{padding:76px 0 0;overflow:hidden;background:var(--trust);}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:48px;align-items:center;padding-bottom:64px;}
.eyebrow{font:700 12px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;display:block;}
.hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(38px,5.4vw,64px);line-height:1.03;margin:0 0 22px;text-wrap:balance;position:relative;display:inline-block;color:var(--on-dark-primary);}
.hero h1 .stroke{position:relative;white-space:nowrap;}
.hero h1 .stroke::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:-.08em;height:.22em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 14 C 40 4, 70 18, 100 10 S 165 3, 198 12' fill='none' stroke='%23A98C48' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  z-index:-1;
}
.hero p{font-size:17.5px;color:var(--on-dark-secondary);max-width:50ch;margin:0 0 30px;}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:none;border-radius:999px;padding:14px 28px;font-size:14.5px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-soft);transition:transform .15s ease, box-shadow .15s ease;}
.btn:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none;}
.hero-art{
  background:linear-gradient(155deg,var(--trust-soft),var(--card));
  border-radius:50% 44% 52% 48%/48% 52% 46% 54%;
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--ink);
  font-family:var(--font-display);font-size:18px;text-align:center;padding:32px;
  box-shadow:var(--shadow-lift);
}
/* El sello de marca ocupa el lugar de la foto de producto mientras no hay
   fotografia real -- protagonismo del logo en vez de un placeholder vacio. */
.hero-logo-mark{width:58%;max-width:250px;height:auto;filter:drop-shadow(0 10px 24px rgba(23,39,22,.25));}

/* Asistente de catalogo -- "Cuentanos que buscas" (mas peso visual que la
   busqueda tradicional a proposito -- ver memoria de la fusion
   buscador+chat: son dos cosas distintas, el chat es la principal). */
.assistant-hero{background:var(--trust-soft);padding:56px 0;}
.assistant-title{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,4vw,40px);margin:6px 0 12px;text-wrap:balance;color:var(--ink);}
.assistant-hint{color:var(--ink-soft);max-width:56ch;margin:0 0 22px;font-size:15.5px;}
.assistant-form{display:flex;gap:10px;max-width:640px;}
.assistant-form-compact{max-width:460px;margin-top:22px;}
.assistant-input{flex:1;border:1.5px solid var(--line);border-radius:999px;padding:14px 20px;font-size:15px;font-family:inherit;background:var(--card);}
.assistant-input:focus{outline:2px solid var(--accent);outline-offset:2px;}
.assistant-submit{background:var(--accent);color:#fff;border:none;border-radius:999px;padding:14px 26px;font-size:14.5px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-soft);}
.assistant-submit:hover{background:var(--accent-deep);}
.assistant-results{margin-top:26px;}
.assistant-answer{font-size:15px;color:var(--ink);max-width:64ch;margin:0 0 16px;white-space:pre-wrap;}
.assistant-grid{margin-top:4px;}

/* version "rica" del hero del asistente (solo catalogo.html -- index.html
   sigue usando .assistant-form-compact, sin tocar). Pedido real 2026-07-31
   con mockup de referencia por Telegram. */
.assistant-eyebrow{display:inline-flex;align-items:center;gap:8px;}
.assistant-eyebrow svg{width:16px;height:16px;flex:none;}
.assistant-badges{display:flex;flex-wrap:wrap;gap:0;margin:0 0 26px;}
.assistant-badge{display:flex;align-items:center;gap:10px;padding:4px 22px;border-right:1px solid var(--line);}
.assistant-badge:first-child{padding-left:0;}
.assistant-badge:last-child{border-right:none;}
.assistant-badge svg{width:22px;height:22px;flex:none;color:var(--accent-deep);}
.assistant-badge strong{display:block;font-size:13.5px;font-weight:700;color:var(--ink);}
.assistant-badge span{display:block;font-size:12px;color:var(--ink-soft);}
.assistant-form-rich{flex-direction:column;gap:14px;max-width:640px;}
.assistant-input-wrap{position:relative;}
.assistant-input-wrap .assistant-input{width:100%;padding-left:48px;}
.assistant-input-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-soft);pointer-events:none;}
.assistant-submit-rich{width:100%;justify-content:center;display:flex;align-items:center;gap:10px;padding:16px 24px;}
.assistant-submit-rich svg{width:20px;height:20px;flex:none;}
.assistant-submit-rich span{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.3;}
.assistant-submit-rich small{font-size:12px;font-weight:500;opacity:.85;}
.assistant-divider{display:flex;align-items:center;gap:14px;margin:24px 0;max-width:640px;color:var(--ink-soft);font-size:13px;text-transform:uppercase;letter-spacing:.05em;}
.assistant-divider::before,.assistant-divider::after{content:"";flex:1;height:1px;background:var(--line);}
.assistant-browse-btn{display:flex;align-items:center;gap:14px;max-width:640px;border:1.5px solid var(--gold);border-radius:16px;padding:16px 20px;text-decoration:none;color:var(--ink);background:var(--card);transition:box-shadow .15s ease;}
.assistant-browse-btn:hover{box-shadow:var(--shadow-soft);}
.assistant-browse-btn svg:first-child{width:26px;height:26px;flex:none;color:var(--accent-deep);}
.assistant-browse-btn span{flex:1;display:block;}
.assistant-browse-btn strong{display:block;font-size:15px;}
.assistant-browse-btn small{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:400;}
.assistant-browse-chevron{width:18px;height:18px;flex:none;color:var(--ink-soft);}

/* Estructura general del hero: en pantallas angostas/medianas es una sola
   columna (texto arriba, tarjeta abajo, full width dentro de .wrap). Recien
   en escritorio de verdad (960px+) pasa a grilla de 2 columnas -- pedido
   real 2026-07-31: la version de una sola columna quedaba angosta (max-width
   640px) pegada a la izquierda con un vacio enorme a la derecha en pantallas
   anchas, y la tarjeta de abajo rompia el patron al estirarse a todo el
   ancho. La grilla evita las dos cosas: texto y tarjeta quedan balanceados
   lado a lado, ocupando el ancho real de la pagina. */
.assistant-hero-main{max-width:640px;}
.assistant-lifestyle-card{display:flex;flex-direction:column;background:var(--card);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-soft);margin-top:32px;}
.assistant-lifestyle-card img{width:100%;height:200px;object-fit:cover;flex:none;}
.assistant-lifestyle-text{padding:28px 30px;min-width:0;}
.assistant-lifestyle-icon{width:44px;height:44px;border-radius:999px;background:var(--trust-soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.assistant-lifestyle-icon svg{width:22px;height:22px;color:var(--accent-deep);}
.assistant-lifestyle-text h3{font-family:var(--font-display);font-weight:600;font-size:18px;margin:0 0 8px;}
.assistant-lifestyle-text p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.5;}

/* tier media (640-960px): pagina de una sola columna pero con lugar de
   sobra -- la tarjeta pasa a fila (imagen a la izquierda, texto a la
   derecha) en vez de apilada. */
@media (min-width:640px) and (max-width:959px){
  .assistant-lifestyle-card{flex-direction:row;align-items:center;}
  .assistant-lifestyle-card img{width:38%;max-width:280px;height:100%;min-height:180px;}
  .assistant-lifestyle-text{flex:1;}
}
@media (max-width:639px){
  .assistant-badge{padding:4px 14px;}
}

/* tier ancho (960px+): grilla de 2 columnas -- la tarjeta se convierte en
   la columna visual de apoyo a la derecha, imagen arriba llenando la
   columna, texto abajo (mismo patron apilado que en celular, solo que como
   columna lateral en vez de a todo el ancho). */
@media (min-width:960px){
  .assistant-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:48px;align-items:start;}
  .assistant-hero-main{max-width:none;}
  .assistant-hero-visual .assistant-lifestyle-card{margin-top:0;height:100%;}
  .assistant-hero-visual .assistant-lifestyle-card img{height:240px;}
}
@media (max-width:600px){
  .assistant-form, .assistant-form-compact{flex-direction:column;max-width:100%;}
  .assistant-submit{width:100%;}
}

/* Busqueda tradicional del catalogo -- deliberadamente mas chica/discreta
   que el asistente de arriba (texto + categoria + etiqueta, sin IA). */
.catalog-search-row{display:flex;gap:10px;max-width:420px;margin-bottom:22px;}
.catalog-search-input{flex:1;border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:14px;font-family:inherit;background:var(--card);}
.catalog-search-btn{border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:8px;padding:10px 18px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
.catalog-search-btn:hover{background:var(--ink);color:#fff;}

/* divisor organico entre hero (verde bosque) y el resto (crema) */
.wave-divider{display:block;width:100%;height:64px;margin-top:-1px;}
.wave-divider path{fill:var(--paper);}

/* franja de confianza -- bento chico de 3, no una linea de texto.
   minmax(0,1fr) en vez de 1fr: sin esto, una columna de grid no se achica
   por debajo del ancho minimo de su contenido (ac su palabra mas larga,
   "contraentrega"), lo que en celular angosto forzaba TODA la pagina a
   desbordar horizontalmente -- no solo esta franja, la pagina entera
   quedaba mas ancha que la pantalla y se veia todo cortado de los bordes. */
.trust-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:36px 0 44px;}
.trust-card{background:var(--card);border-radius:16px;padding:18px 20px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-soft);min-width:0;text-decoration:none;}
.trust-card svg{width:26px;height:26px;flex:none;color:var(--accent-deep);}
.trust-card span{font-size:13.5px;font-weight:600;color:var(--ink);}

/* sections */
section{padding:56px 0;}
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px;}
.section-title h2{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,3vw,32px);margin:0;}
.section-title a{font-size:13.5px;font-weight:700;color:var(--accent-deep);}

/* category chips */
.cat-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}
.cat-chip{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:600;background:var(--card);transition:transform .15s ease;}
.cat-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft);}
.cat-chip.active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* product grid */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;}
.product-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-soft);transition:transform .18s ease, box-shadow .18s ease;}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.product-card .thumb{aspect-ratio:1/1;background:var(--trust-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;}
.product-card .thumb .placeholder{color:var(--trust);font-family:var(--font-display);font-size:13px;padding:12px;text-align:center;}
.product-card .info{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.product-card .cat{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);}
.product-card h3{font-size:15.5px;margin:0;font-weight:700;}
.product-card .price-row{margin-top:auto;display:flex;align-items:baseline;gap:8px;padding-top:8px;}
.price{font-variant-numeric:tabular-nums;font-weight:700;}
.price.old{font-weight:400;color:var(--ink-soft);text-decoration:line-through;font-size:13px;}
.stock-badge{font-size:11.5px;color:var(--warn);}
.welcome-badge{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;color:var(--trust);background:var(--trust-soft);padding:3px 9px;border-radius:999px;}

/* mi cuenta -- pedidos y direcciones */
.status-pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;color:var(--trust);background:var(--trust-soft);}
.status-pill.pending{color:var(--gold);background:#F3ECD6;}
.status-pill.cancelled{color:var(--warn);background:#F1DCD7;}
.order-card{border:1.5px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;}
.order-card .order-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.order-card .order-items{font-size:13px;color:var(--ink-soft);margin:8px 0 0;padding:0;list-style:none;}
.order-card .order-items li{padding:2px 0;}
.order-card .order-total{font-weight:700;margin-top:10px;font-size:14px;}
.account-tabs{display:flex;gap:8px;margin:8px 0 22px;}

/* product detail */
.product-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:48px 0;}
.gallery-main{aspect-ratio:1/1;background:var(--trust-soft);border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.gallery-main img{width:100%;height:100%;object-fit:cover;}
.gallery-thumbs{display:flex;gap:8px;}
.gallery-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1.5px solid var(--line);cursor:pointer;}
.pd-cat{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-deep);font-weight:700;}
.pd-title{font-family:var(--font-display);font-weight:500;font-size:34px;margin:8px 0 14px;}
.pd-price{font-size:26px;margin-bottom:18px;}
.pd-desc{color:var(--ink-soft);margin-bottom:24px;max-width:52ch;}
.pd-safety-note{background:#F7E9E6;border:1.5px solid var(--warn);border-radius:14px;padding:14px 16px;margin:-8px 0 24px;max-width:52ch;font-size:13.5px;color:var(--warn);font-weight:600;line-height:1.5;display:flex;gap:10px;align-items:flex-start;}
.pd-safety-note span.icon{font-size:16px;line-height:1.4;flex-shrink:0;}
.qty-row{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.qty-row .stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.qty-row .stepper button{background:none;border:none;width:36px;height:36px;font-size:16px;cursor:pointer;}
.qty-row .stepper span{width:32px;text-align:center;font-variant-numeric:tabular-nums;}
.pd-trust-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.pd-trust-row a{color:inherit;text-decoration:none;}
.pd-trust-row a:hover{text-decoration:underline;}
.pd-variants{margin-bottom:18px;}

/* que incluye este kit */
#kit-includes-section{padding:8px 0 40px;}
.kit-include-item{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);}
.kit-include-item:last-child{border-bottom:none;}
.kit-include-item img,.kit-include-item .placeholder{width:84px;height:84px;object-fit:cover;border-radius:10px;background:var(--trust-soft);flex-shrink:0;}
.kit-include-item h3{font-size:15.5px;margin:0 0 6px;}
.kit-include-item p{font-size:13.5px;color:var(--ink-soft);margin:0 0 8px;max-width:64ch;}
.kit-include-price{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.kit-include-item .pd-variant-select{max-width:220px;margin-bottom:10px;display:inline-block;margin-right:10px;}
.kit-include-item .pd-variant-label{display:inline-block;margin-right:6px;}
.kit-price-note{font-size:12px;color:var(--ink-soft);margin-top:4px;font-weight:400;}
.kit-compare-note{font-size:12.5px;color:var(--accent-deep);font-weight:700;margin-top:6px;}
.pd-variant-label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin:10px 0 4px;}
.pd-variant-select{width:100%;max-width:280px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:#fff;}

/* cart drawer */
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:92vw;background:var(--card);box-shadow:-12px 0 40px rgba(27,36,48,0.18);z-index:60;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer-overlay{position:fixed;inset:0;background:rgba(27,36,48,0.35);z-index:59;display:none;}
.cart-drawer-overlay.open{display:block;}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line);}
.cart-head button{background:none;border:none;font-size:20px;cursor:pointer;}
.cart-items{flex:1;overflow:auto;padding:16px 22px;}
.cart-line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);}
.cart-line img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:var(--trust-soft);}
.cart-line .name{font-weight:700;font-size:14px;}
.kit-cart-label{font-size:12px;margin-top:2px;}
.cart-line .remove{font-size:12px;color:var(--warn);cursor:pointer;background:none;border:none;padding:0;}
.cart-foot{padding:20px 22px;border-top:1px solid var(--line);}
.cart-total-row{display:flex;justify-content:space-between;font-weight:700;margin-bottom:14px;font-size:16px;}
.empty-note{color:var(--ink-soft);font-size:14px;padding:20px 0;}

/* checkout */
.checkout-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);gap:48px;padding:48px 0;}
.checkout-grid label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:14px 0 6px;}
.checkout-grid input,.checkout-grid textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 12px;font-size:14.5px;font-family:inherit;background:var(--card);}
.summary-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;height:fit-content;box-shadow:var(--shadow-soft);}
.summary-line{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-bottom:1px solid var(--line);}
.summary-line:last-child{border-bottom:none;font-weight:700;font-size:16px;padding-top:14px;}

.callout{background:var(--trust-soft);border:1px solid #D8CB9F;border-radius:16px;padding:18px 20px;font-size:14px;color:var(--ink);}

/* libreta de direcciones */
.address-card{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;cursor:pointer;font-size:13.5px;}
.address-card.selected{border-color:var(--accent);background:var(--card);}
.address-card input{margin-top:3px;}

/* footer -- verde bosque tambien, para que el header y el cierre "abracen"
   el contenido claro del medio con el color dominante de marca */
/* padding-bottom extra: deja espacio para que el chat/WhatsApp flotantes
   (fixed, 22px+56px de alto) nunca queden pegados o tapando el ultimo link
   del footer (encontrado en barrido visual 2026-07-31, "Politica de
   privacidad" quedaba justo detras de los botones al hacer scroll al fondo). */
.site-footer{background:var(--trust);margin-top:40px;padding:44px 0 110px;}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;}
.footer-grid .col h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;color:var(--on-dark-primary);}
.footer-grid .col p, .footer-grid .col a{display:block;font-size:13.5px;color:var(--on-dark-secondary);margin-bottom:6px;}
.footer-grid .col a:hover{color:var(--gold);}
.footer-brand{max-width:320px;}
.footer-logo{width:52px;height:52px;margin-bottom:14px;}
.footer-brand p{font-style:italic;color:var(--on-dark-secondary);}

.whatsapp-float{position:fixed;bottom:22px;right:22px;background:var(--trust);color:#fff;border-radius:999px;padding:14px 20px;font-weight:700;font-size:14px;box-shadow:0 8px 24px rgba(47,111,98,0.35);z-index:40;display:flex;align-items:center;gap:8px;text-decoration:none;}

/* Chat de IA (ver app/store_chat.py) -- a la izquierda a proposito para no
   pisar el boton flotante de WhatsApp, que ya vive abajo a la derecha. Mas
   protagonista que la busqueda a proposito (pedido del usuario 2026-07-21):
   la busqueda es sin memoria, el chat es el asistente real con contexto. */
.chat-launcher{position:fixed;bottom:22px;left:22px;height:56px;padding:0 22px 0 18px;border-radius:999px;background:var(--accent);color:#fff;border:none;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 10px 28px rgba(193,105,79,0.4);z-index:41;display:flex;align-items:center;gap:9px;animation:chat-launcher-pulse 2.8s ease-in-out infinite;}
.chat-launcher:hover{background:var(--accent-deep);}
.chat-launcher .cl-icon{font-size:20px;}
@keyframes chat-launcher-pulse{
  0%,100%{box-shadow:0 10px 28px rgba(193,105,79,0.4);}
  50%{box-shadow:0 10px 32px rgba(193,105,79,0.65),0 0 0 8px rgba(193,105,79,0.14);}
}
@media (prefers-reduced-motion:reduce){ .chat-launcher{animation:none;} }
.chat-panel{position:fixed;bottom:90px;left:22px;width:360px;max-width:88vw;height:min(520px,70vh);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lift);z-index:42;display:none;flex-direction:column;overflow:hidden;}
.chat-panel.open{display:flex;}
.chat-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.chat-head strong{font-family:var(--font-display);font-size:16px;}
.chat-head button{background:none;border:none;font-size:18px;cursor:pointer;color:var(--ink-soft);}
.chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}
.chat-msg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;white-space:pre-wrap;}
.chat-msg.user{align-self:flex-end;background:var(--ink);color:var(--on-dark-primary);border-bottom-right-radius:3px;}
.chat-msg.assistant{align-self:flex-start;background:var(--trust-soft);color:var(--ink);border-bottom-left-radius:3px;}
.chat-msg.error{align-self:center;background:none;color:var(--warn);font-size:12px;}
.chat-product-card{align-self:flex-start;max-width:85%;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px;}
.chat-product-card .cp-name{font-weight:700;margin-bottom:4px;}
.chat-product-card .cp-price{color:var(--accent-deep);font-weight:700;margin-bottom:8px;}
.chat-product-card a.cp-view{font-size:12px;color:var(--ink-soft);}
.chat-product-card button{width:100%;margin-top:6px;}
.chat-handoff{align-self:flex-start;max-width:85%;background:var(--trust-soft);border:1px solid #C6DCD4;border-radius:10px;padding:10px;font-size:13px;}
.chat-handoff .ch-text{margin-bottom:8px;color:var(--ink);}
.chat-handoff .ch-btn{display:block;text-align:center;background:var(--trust);color:#fff;border-radius:8px;padding:8px 12px;font-weight:700;text-decoration:none;}
.chat-input-row{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);}
.chat-input-row input{flex:1;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:13.5px;font-family:inherit;}
.chat-input-row button{border-radius:999px;padding:9px 16px;}
.chat-disclaimer{font-size:10.5px;color:var(--ink-soft);text-align:center;padding:6px 10px 10px;}
.chat-disclaimer a, .assistant-report-link{color:var(--ink-soft);text-decoration:underline;}
.assistant-report-link{display:inline-block;font-size:12px;margin-top:10px;}
@media (max-width:480px){
  .chat-panel{left:12px;right:12px;width:auto;bottom:82px;}
}
/* Compactar los dos flotantes a circulo-icono: no solo en celular angosto
   (480px) -- barrido responsive 2026-07-31 encontrado que entre ~480 y
   ~640px (celulares grandes en horizontal, tablets chicas en vertical)
   seguian siendo pildoras con texto y tapaban el texto de la tarjeta
   "Hacemos hogar portatil" en catalogo.html, que a esos anchos todavia
   esta apilada (ver .assistant-lifestyle-card abajo, cambia a fila recien
   en 640px). Ampliado a 680px para cubrir todo ese rango de una vez. */
@media (max-width:680px){
  .chat-launcher{left:16px;width:56px;height:56px;padding:0;border-radius:50%;justify-content:center;}
  .chat-launcher .cl-text{display:none;}
  .whatsapp-float{right:16px;width:56px;height:56px;padding:0;border-radius:50%;justify-content:center;}
  .whatsapp-float .wf-text{display:none;}
}

/* barra de envio gratis */
.shipping-bar{padding:14px 16px;margin-bottom:16px;background:var(--trust-soft);border-radius:12px;}
.shipping-bar .msg{font-size:13px;font-weight:700;color:var(--ink);}
.shipping-bar .msg.done{color:var(--accent-deep);}
.shipping-bar .track{margin-top:8px;height:6px;border-radius:999px;background:#D8CB9F;overflow:hidden;}
.shipping-bar .fill{height:100%;width:100%;background:var(--accent);border-radius:999px;transform-origin:left;transition:transform .4s ease;}

/* rebote del icono del carrito al agregar un producto */
@keyframes cart-bump{0%{transform:scale(1);}30%{transform:scale(1.18);}100%{transform:scale(1);}}
.cart-btn.bump{animation:cart-bump .35s ease;}

/* confeti de confirmacion de pedido */
.confetti-piece{position:fixed;top:-10px;width:8px;height:14px;pointer-events:none;z-index:80;border-radius:2px;animation:confetti-fall linear forwards;}
@keyframes confetti-fall{to{transform:translateY(105vh) rotate(540deg);opacity:.9;}}

@media (max-width:860px){
  .hero-inner, .product-detail, .checkout-grid{grid-template-columns:1fr;}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .site-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--trust);
    border-bottom:1px solid rgba(255,255,255,0.08);
    box-shadow:var(--shadow-soft);
  }
  .site-nav.open{display:flex;}
  .site-nav a{padding:14px 24px;border-top:1px solid rgba(255,255,255,0.08);}
  .site-header .bar{position:relative;}
}
@media (max-width:640px){
  /* 3 tarjetas de confianza quedan demasiado apretadas en celular angosto
     (aunque ya no desbordan) -- apilarlas se lee mejor que comprimirlas. */
  .trust-bento{grid-template-columns:1fr;}
  .hero-logo-mark{max-width:170px;}
  .hero h1{font-size:clamp(30px,8vw,40px);}
  .footer-grid{gap:32px;}
  .wrap{padding:0 16px;}
  /* "Iniciar sesion" + "Carrito" juntos eran mas anchos que el hueco libre
     del header en celulares angostos (~375px o menos) y desbordaban toda
     la pagina -- version compacta solo en este breakpoint. */
  .login-trigger{padding:7px 12px;font-size:12px;}
  .cart-btn{padding:8px 14px;font-size:12px;}
  .header-actions{gap:8px;}
  .brand-icon{width:44px;height:44px;}
}