:root {
    --verde-claro: #d2eba5;
    --verde-medio: #71a24b;
    --verde-oscuro: #4a7a30;
    --naranja-pastel: #FFC98B;
    --rosa-pastel: #FFCAD4;
    --azul-pastel: #C9E4FF;
    --morado-pastel: #E3D2FF;
    --amarillo-pastel: #FFE8B5;
    --crema: #FDFBF6;
    --carbon: #2B2B2B;
    --rojo-oferta: #D62828;
    --borde: #EAE3D3;
    --radio: 14px;
    --fuente-display: 'Fraunces', serif;
    --fuente-base: 'Work Sans', sans-serif;
    --fuente-mono: 'JetBrains Mono', monospace;
}
* { box-sizing: border-box; }
body { margin:0; font-family: var(--fuente-base); background: var(--crema); color: var(--carbon); line-height:1.5; }
a { color:inherit; text-decoration:none; }
.contenedor { max-width: 1100px; margin:0 auto; padding: 0 20px; }

/* ---- Cabecera ---- */
.cabecera { background:white; border-bottom:1px solid var(--borde); position:sticky; top:0; z-index:20; }
.cabecera-interior { display:flex; align-items:center; gap:16px; padding:12px 20px; flex-wrap:wrap; }
.marca { font-family: var(--fuente-display); font-weight:700; font-size:1.3rem; color:var(--verde-oscuro); display:flex; align-items:center; gap:8px; }
.nav-secundaria { display:flex; gap:14px; margin-left:auto; align-items:center; flex-wrap:wrap; }
.nav-secundaria a { font-size:0.85rem; font-weight:600; color:var(--carbon); }
.carrito-link { background:var(--verde-medio); color:white; padding:8px 16px; border-radius:30px; font-weight:700; font-size:0.85rem; position:relative; }
.carrito-contador { background:var(--rojo-oferta); color:white; font-size:0.72rem; padding:1px 7px; border-radius:20px; margin-left:6px; }

/* ---- Banner social (editable) ---- */
.banner-social { background:linear-gradient(120deg, var(--verde-claro), var(--rosa-pastel) 60%, var(--naranja-pastel)); border-radius:20px; padding:26px 24px; margin:18px 0; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.banner-social .avatar { width:76px; height:76px; border-radius:50%; background:white; display:flex; align-items:center; justify-content:center; font-size:2.2rem; border:3px solid white; box-shadow:0 2px 8px rgba(0,0,0,0.1); flex-shrink:0; }
.banner-social .info h1 { margin:0 0 4px; font-family:var(--fuente-display); color:var(--carbon); font-size:1.4rem; }
.banner-social .info p { margin:0; font-size:0.85rem; color:#444; }
.banner-social .stats { display:flex; gap:16px; margin-top:8px; font-size:0.78rem; font-weight:700; color:var(--verde-oscuro); flex-wrap:wrap; }

/* ---- Buscador expandible ---- */
.buscador-wrap { margin-bottom:10px; }
.buscador-caja { display:flex; background:white; border:2px solid var(--verde-medio); border-radius:30px; overflow:hidden; }
.buscador-caja input { flex:1; border:none; padding:12px 18px; font-family:var(--fuente-base); font-size:0.95rem; outline:none; }
.buscador-caja button { background:var(--verde-medio); color:white; border:none; padding:0 20px; cursor:pointer; font-weight:700; }
.panel-filtros { display:none; background:white; border:1px solid var(--borde); border-radius:var(--radio); margin-top:10px; padding:16px 20px; gap:30px; flex-wrap:wrap; }
.panel-filtros.abierto { display:flex; }
.panel-filtros .grupo h4 { margin:0 0 8px; font-size:0.8rem; text-transform:uppercase; color:var(--verde-oscuro); }
.panel-filtros label { display:block; font-size:0.85rem; margin:5px 0; }

/* ---- Mood / categorías circulares ---- */
.mood-titulo { text-align:center; font-family:var(--fuente-display); font-size:1.3rem; color:var(--verde-oscuro); margin:22px 0 14px; }
.categorias-circulares { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.categoria-circular { text-align:center; width:76px; }
.categoria-circular a { display:block; }
.categoria-circular .circulo { width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 6px; transition:transform 0.15s ease; }
.categoria-circular:hover .circulo { transform:translateY(-3px); }
.categoria-circular.activa .circulo { box-shadow:0 0 0 3px var(--verde-medio); }
.categoria-circular span { font-size:0.75rem; font-weight:600; }

/* ---- Grid productos ---- */
.grid-productos { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; margin:10px 0 40px; }
.tarjeta-producto { background:white; border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden; display:flex; flex-direction:column; }
.tarjeta-producto img { width:100%; height:140px; object-fit:cover; background:var(--verde-claro); }
.tarjeta-cuerpo { padding:12px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tarjeta-producto h3 { font-size:0.95rem; margin:0; font-weight:600; }
.badge-express { background:var(--azul-pastel); color:var(--carbon); font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:20px; align-self:flex-start; }
.etiqueta-precio { align-self:flex-start; background:var(--naranja-pastel); font-family:var(--fuente-mono); font-weight:700; font-size:1rem; padding:5px 12px; border-radius:8px; }
.btn-agregar { margin-top:auto; background:var(--verde-medio); color:white; border:none; padding:10px; border-radius:var(--radio); font-weight:700; cursor:pointer; font-family:var(--fuente-base); }
.btn-agregar:hover { background:var(--verde-oscuro); }
.sin-stock { background:#eee; color:#999; text-align:center; padding:10px; border-radius:var(--radio); font-size:0.9rem; }

/* ---- Banner suscripción ---- */
.banner-suscripcion { background:var(--verde-oscuro); color:white; border-radius:var(--radio); padding:16px 20px; margin:14px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.btn-mini { background:white; color:var(--verde-oscuro); border:none; padding:8px 14px; border-radius:8px; font-weight:700; cursor:pointer; font-size:0.85rem; }

/* ---- Accesos rápidos ---- */
.accesos-rapidos { display:flex; justify-content:center; gap:24px; margin:30px 0; flex-wrap:wrap; }
.acceso { text-align:center; width:80px; }
.acceso .circulo { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin:0 auto 6px; }
.acceso span { font-size:0.75rem; font-weight:600; }

/* ---- Páginas generales ---- */
.pagina { padding:26px 0 60px; }
.pagina h1 { font-family: var(--fuente-display); color:var(--verde-oscuro); }

/* ---- Carrito / ticket ---- */
.ticket { background:white; border:1px dashed var(--carbon); border-radius:var(--radio); padding:22px; font-family:var(--fuente-mono); max-width:480px; }
.ticket-fila { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dotted var(--borde); font-size:0.88rem; align-items:center; }
.ticket-total { display:flex; justify-content:space-between; padding-top:14px; font-size:1.15rem; font-weight:700; color:var(--verde-oscuro); }
.cantidad-input { width:48px; padding:4px; font-family:var(--fuente-mono); border:1px solid var(--borde); border-radius:4px; }
.btn-quitar { color:var(--rojo-oferta); background:none; border:none; cursor:pointer; font-size:0.85rem; }

.form-checkout label { display:block; margin:14px 0 6px; font-weight:600; font-size:0.9rem; }
.form-checkout input, .form-checkout textarea { width:100%; padding:10px; border:1px solid var(--borde); border-radius:var(--radio); font-family:var(--fuente-base); }
.btn-pagar { margin-top:20px; background:var(--rojo-oferta); color:white; border:none; padding:14px 22px; font-size:1rem; font-weight:700; border-radius:var(--radio); cursor:pointer; width:100%; }

/* ---- FAQ ---- */
.faq-cat { display:inline-block; background:var(--verde-claro); color:var(--verde-oscuro); font-size:0.75rem; padding:2px 10px; border-radius:20px; margin:0 6px 14px 0; }
.faq-item { background:white; border:1px solid var(--borde); border-radius:var(--radio); margin-bottom:10px; overflow:hidden; }
.faq-pregunta { padding:14px 18px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; }
.faq-respuesta { padding:0 18px 14px; color:#555; font-size:0.9rem; display:none; }
.faq-item.abierto .faq-respuesta { display:block; }

/* ---- Blog ---- */
.grid-blog { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.tarjeta-blog { background:white; border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden; }
.tarjeta-blog .img { height:120px; background:var(--rosa-pastel); display:flex; align-items:center; justify-content:center; font-size:2rem; }
.tarjeta-blog .cuerpo { padding:14px; }
.tarjeta-blog .cat { font-size:0.75rem; color:var(--verde-oscuro); text-transform:uppercase; }
.tarjeta-blog h3 { font-size:1rem; margin:6px 0; }
.tarjeta-blog p { font-size:0.85rem; color:#666; margin:0; }

/* ---- Puntos ---- */
.tarjeta-nivel { background:linear-gradient(135deg, var(--verde-medio), var(--verde-oscuro)); color:white; border-radius:var(--radio); padding:24px; max-width:380px; }
.tarjeta-nivel .puntos-num { font-family:var(--fuente-display); font-size:2.2rem; margin:6px 0; }
.barra-nivel { background:rgba(255,255,255,0.25); border-radius:10px; height:10px; margin:14px 0; overflow:hidden; }
.barra-nivel .relleno { background:var(--naranja-pastel); height:100%; }
.tabla-niveles { width:100%; margin-top:20px; border-collapse:collapse; max-width:480px; }
.tabla-niveles th, .tabla-niveles td { padding:8px 10px; text-align:left; font-size:0.85rem; border-bottom:1px solid #eee; }

/* ---- Suscripciones ---- */
.grid-cajas { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.tarjeta-caja { background:white; border:1px solid var(--borde); border-radius:var(--radio); padding:20px; text-align:center; }
.tarjeta-caja .icono { font-size:2.4rem; }
.tarjeta-caja .precio { font-family:var(--fuente-mono); font-weight:700; color:var(--verde-oscuro); font-size:1.1rem; margin:8px 0; }

.placeholder-modulo { text-align:center; padding:60px 20px; color:#888; }

.pie { background:var(--verde-oscuro); color:var(--verde-claro); text-align:center; padding:20px; font-size:0.85rem; margin-top:30px; }
.pie a { color:var(--verde-claro); text-decoration:underline; }

@media (max-width:640px) { .cabecera-interior { flex-direction:column; align-items:stretch; } .nav-secundaria { margin-left:0; justify-content:center; } }