/* ============================================================
   INTEGRIVA — by Delfina Olmedo — Hoja de estilos
   Identidad: cálida, suave, humana. Paleta dietitian:
   oliva (avocado) + rosados (blush/peach) + cremas (oat/honey/coconut).
   ============================================================ */

:root {
  /* Paleta base (referencia) */
  --avocado: #C2C395;   /* avocado smoothie */
  --blush:   #DDBAAE;   /* blush beet */
  --peach:   #EFD7CF;   /* peach protein */
  --oat:     #DCD4C1;   /* oat latte */
  --honey:   #F6EAD4;   /* honey oatmilk */
  --coconut: #FFFAF2;   /* coconut cream */

  /* Derivados para contraste y acciones */
  --verde: #6F7140;        /* oliva — acciones principales (texto blanco) */
  --verde-osc: #54562F;    /* oliva oscuro — hover y títulos */
  --verde-claro: #EAEBD6;  /* oliva muy claro — fondos suaves y pills */
  --coral: #AE6A54;        /* terracota (de blush beet) — acción secundaria */
  --coral-osc: #8C5340;
  --amarillo: #E6C78A;     /* miel */
  --crema: #F7EFE2;        /* fondo cálido */
  --blanco: #FFFFFF;
  --texto: #463F30;        /* marrón cálido oscuro */
  --gris: #8C8472;         /* taupe */
  --gris-claro: #E7DFD0;   /* bordes claros */
  --sombra: 0 8px 28px rgba(90, 78, 54, 0.10);
  --sombra-fuerte: 0 14px 40px rgba(90, 78, 54, 0.16);
  --radio: 18px;
  --radio-sm: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  background: var(--crema);
  color: var(--texto);
  line-height: 1.55;
  min-height: 100vh;
  padding-bottom: 38px; /* deja lugar al banner inferior */
}

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .4em; }
h3 { font-size: 1.2rem; }
p { color: var(--texto); }
.muted { color: var(--gris); }
.center { text-align: center; }

/* ---------- Botones ---------- */
button { font-family: inherit; cursor: pointer; border: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: var(--verde); color: white; font-weight: 800; font-size: 1rem;
  padding: 14px 28px; border-radius: 999px; transition: .18s ease;
  box-shadow: 0 6px 16px rgba(91,166,126,.32);
}
.btn:hover { background: var(--verde-osc); transform: translateY(-2px); }
.btn.coral { background: var(--coral); box-shadow: 0 6px 16px rgba(238,139,110,.34); }
.btn.coral:hover { background: var(--coral-osc); }
.btn.big { padding: 17px 40px; font-size: 1.1rem; }
.btn.block { display: flex; width: 100%; }
.btn.outline { background: transparent; color: var(--verde-osc); box-shadow: none; border: 2px solid var(--verde); }
.btn.outline:hover { background: var(--verde-claro); color: var(--verde-osc); transform: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.sm { padding:8px 14px; font-size:.82rem; white-space:nowrap; }
.btn:has(small) { flex-direction:column; gap:0; line-height:1.3; }
.btn small { display:block; font-size:.68rem; font-weight:600; opacity:.85; }
.btn.selected { background: var(--verde); box-shadow: 0 6px 16px rgba(91,166,126,.4); }
.btn.selected:hover { background: var(--verde-osc); }
.ghost-btn { background: transparent; color: var(--gris); font-weight: 700; font-size: .85rem; padding: 8px 12px; border-radius: 8px; }
.ghost-btn:hover { background: var(--gris-claro); color: var(--texto); }
.link { color: var(--verde-osc); font-weight: 700; cursor: pointer; text-decoration: underline; background:none; }

/* ---------- Layout ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 32px 22px; }
.narrow { max-width: 640px; }
.hidden { display: none !important; }

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  background: rgba(247,239,226,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gris-claro);
  padding: 12px 22px;
}
.brand { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.35rem; color: var(--verde-osc); cursor: pointer; display: flex; align-items: center; gap: 9px; }
.brand-logo { height: 84px; width: auto; display: block; }
.brand-text { display: flex; align-items: center; gap: 9px; }
.brand-text small { display:block; font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:.62rem; letter-spacing:.04em; color: var(--gris); text-transform:uppercase; }
.logo-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px var(--verde-claro); display:inline-block; }
.topnav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.topnav button {
  background: transparent; color: var(--gris); font-weight: 700; font-size: .92rem;
  padding: 8px 14px; border-radius: 999px; transition: .15s;
}
.topnav button:hover { background: var(--verde-claro); color: var(--verde-osc); }
.topnav button.active { background: var(--verde); color: white; }

/* ---------- Tarjetas ---------- */
.card { background: var(--blanco); border-radius: var(--radio); padding: 26px; box-shadow: var(--sombra); }
.card + .card { margin-top: 22px; }
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------- Formularios ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; color: var(--texto); }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--texto);
  padding: 12px 14px; border: 2px solid var(--gris-claro); border-radius: var(--radio-sm);
  background: var(--blanco); transition: .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 4px var(--verde-claro); }
.field textarea { resize: vertical; min-height: 80px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.error { color: var(--coral-osc); font-weight: 700; font-size: .85rem; margin-top: 8px; }
.check-field { display:flex; gap:10px; align-items:flex-start; margin:6px 0 4px; font-size:.9rem; color:var(--texto); cursor:pointer; }
.check-field input[type=checkbox] { width:20px; height:20px; min-width:20px; margin-top:1px; accent-color:var(--verde); cursor:pointer; }
.check-field .link { font-size:.9rem; }

/* Selector de objetivo puntual (registro) */
.goal-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.goal-card { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; border:1.5px solid var(--gris-claro); border-radius:var(--radio-sm); padding:14px 10px; cursor:pointer; font-size:.84rem; font-weight:600; color:var(--texto); transition:.18s; position:relative; }
.goal-card:hover { border-color:var(--verde); }
.goal-card.sel { border-color:var(--coral); background:var(--peach); }
.goal-card .gi { font-size:1.5rem; }
.goal-card input[type=checkbox],.goal-card input[type=radio] { position:absolute; opacity:0; width:100%; height:100%; top:0; left:0; margin:0; cursor:pointer; }

/* ---------- Píldoras / etiquetas ---------- */
.pill { display: inline-block; background: var(--verde-claro); color: var(--verde-osc); font-weight: 700; font-size: .8rem; padding: 5px 12px; border-radius: 999px; }
.pill.coral { background: var(--peach); color: var(--coral-osc); }
.pill.amar { background: var(--honey); color: #8A6E2E; }

/* ============ LANDING ============ */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; min-height: 78vh; }
.hero-text .eyebrow { color: var(--coral-osc); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.hero-text h1 { margin: 12px 0 16px; }
.hero-text h1 span { color: var(--verde-osc); }
.hero-text .lead { font-size: 1.2rem; color: var(--gris); max-width: 30em; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-card { background: linear-gradient(150deg, var(--verde-claro), #fff); border-radius: 28px; padding: 30px; box-shadow: var(--sombra-fuerte); }
.hero-card .mini { display:flex; align-items:center; gap:12px; background:white; border-radius:14px; padding:14px 16px; margin-bottom:12px; box-shadow: var(--sombra); }
.hero-card .mini .emo { font-size:1.6rem; }
.hero-brand-top { display:flex; align-items:center; justify-content:center; gap:10px; font-family:'Fraunces',serif; font-size:1.5rem; color:var(--verde-osc); margin-bottom: 26px; }
.hero-logo { max-height: 220px; width:auto; display:block; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 22px; margin-top: 14px; }
.feature .ic { font-size: 2rem; }
.feature h3 { margin: 10px 0 6px; }
.section-title { text-align:center; max-width: 36em; margin: 0 auto 8px; }

/* Quiénes somos */
.team-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:28px; margin-top:24px; max-width:640px; margin-left:auto; margin-right:auto; }
.team-card { text-align:center; }
.team-photo { width:140px; height:140px; border-radius:50%; object-fit:cover; margin:0 auto 14px; display:block; box-shadow:var(--sombra-fuerte); border:3px solid white; }
.team-card h3 { margin:0 0 6px; }
.team-card p { font-size:.9rem; max-width:28em; margin:0 auto; }

/* Bloqueo con blur (datos que se desbloquean con la membresía) */
.blur-lock { position:relative; }
.blur-lock .blur-content { filter: blur(7px); user-select:none; pointer-events:none; }
.blur-lock .lock-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:16px; background:rgba(255,255,255,.35); border-radius: var(--radio-sm); z-index:2; }
.blur-lock .lock-overlay b { font-size:1rem; }
.blur-lock .lock-overlay .ic { font-size:1.8rem; }

/* ============ CALORÍAS / RESULTADO ============ */
.cal-hero { text-align:center; }
.cal-number { font-family:'Fraunces',serif; font-size: clamp(3rem,9vw,5.5rem); color: var(--verde-osc); line-height:1; }
.cal-unit { color: var(--gris); font-weight:700; }
.stat-row { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin: 20px 0; }
.stat { background: var(--verde-claro); border-radius: var(--radio-sm); padding: 16px; text-align:center; }
.stat b { display:block; font-family:'Fraunces',serif; font-size:1.6rem; color:var(--verde-osc); }
.stat span { font-size:.82rem; color:var(--gris); font-weight:700; }
.explain li { margin: 10px 0; padding-left: 4px; }
.explain { padding-left: 20px; }

/* ============ MEMBRESÍA ============ */
.price-card { background: linear-gradient(160deg, var(--verde-osc), var(--verde)); color:white; text-align:center; border-radius:24px; padding:34px; box-shadow: var(--sombra-fuerte); }
.price-card .price { font-family:'Fraunces',serif; font-size:3.2rem; }
.price-card .per { opacity:.85; }
.price-card .btn { margin-top: 18px; background:white; color:var(--verde-osc); }
.price-card .btn:hover { background:var(--crema); }
.includes li { display:flex; gap:12px; align-items:flex-start; margin:14px 0; }
.includes .chk { color: var(--verde); font-weight:900; font-size:1.1rem; }

/* ============ MERCADO PAGO (simulado) ============ */
.mp-screen { max-width: 460px; margin: 40px auto; }
.mp-card { background:white; border-radius: var(--radio); box-shadow: var(--sombra-fuerte); overflow:hidden; }
.mp-top { background:#009EE3; color:white; padding:18px 24px; font-weight:800; display:flex; align-items:center; gap:10px; font-size:1.15rem; }
.mp-body { padding: 24px; }
.mp-amount { text-align:center; font-family:'Fraunces',serif; font-size:2.4rem; color:var(--texto); margin:8px 0 4px; }

/* ============ DASHBOARD ============ */
.dash-grid { display:grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items:start; }
@media (max-width: 880px){ .dash-grid{ grid-template-columns:1fr; } .hero{ grid-template-columns:1fr; min-height:auto; } .row{grid-template-columns:1fr;} }

.greet { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:6px; }

/* Banner llamativo para tentar a ver/contratar extras */
.extras-banner { margin-top:18px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 22px; border-radius:var(--radio); background:linear-gradient(120deg,#fff3ec,#ffe4d6); border:1px solid rgba(238,139,110,.35); cursor:pointer; transition:.2s; }
.extras-banner:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(238,139,110,.22); }
.extras-banner .eb-text { display:flex; flex-direction:column; gap:2px; }
.extras-banner .eb-text b { font-size:1.02rem; }
.extras-banner .eb-text span { color:var(--gris); font-size:.88rem; }
.extras-banner .btn { white-space:nowrap; }

/* Tarjetas mini de extras contratables directo */
.mini-extra { display:flex; flex-direction:column; gap:6px; background:white; border-radius:var(--radio-sm); padding:16px; border:1px solid rgba(238,139,110,.25); }
.mini-extra .me-ic { font-size:1.6rem; }
.mini-extra b { font-size:.96rem; }
.mini-extra .muted { font-size:.82rem; }
.mini-extra .me-price { font-weight:800; font-size:1.05rem; color:var(--coral-osc,#c66448); margin-top:2px; }
.mini-extra .me-price small { font-weight:600; font-size:.72rem; color:var(--gris); }
.mini-extra .btn { margin-top:4px; }

/* Barra de carrito de extras seleccionados */
.cart-bar { margin-top:16px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; background:white; border:1.5px solid var(--coral); border-radius:var(--radio-sm); padding:14px 18px; }
.cart-bar .btn { white-space:nowrap; }

/* Biblioteca del Cocinero Inteligente */
.cocinero-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.cocinero-table th { text-align:left; padding:8px 10px; border-bottom:2px solid var(--gris-claro); color:var(--gris); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.cocinero-table td { padding:8px 10px; border-bottom:1px solid var(--gris-claro); white-space:nowrap; }
.cocinero-table tr:hover td { background:var(--verde-claro); }

/* Marcadores de progreso */
.score-row { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.score { border-radius: var(--radio-sm); padding:18px; color:white; }
.score.green { background: linear-gradient(150deg,var(--verde),#9A9C63); }
.score.coral { background: linear-gradient(150deg,var(--coral),#C98876); }
.score.yellow { background: linear-gradient(150deg,#CDAA66,var(--amarillo)); }
.score b { font-family:'Fraunces',serif; font-size:2rem; display:block; }
.score span { font-weight:700; opacity:.95; font-size:.85rem; }

/* Calendario */
.cal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.cal-grid { display:grid; grid-template-columns: repeat(7,1fr); gap:6px; }
.cal-grid .dow { text-align:center; font-weight:800; font-size:.72rem; color:var(--gris); text-transform:uppercase; padding:4px 0; }
.day { aspect-ratio:1; border-radius:10px; border:2px solid var(--gris-claro); background:white; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; font-weight:700; position:relative; transition:.12s; font-size:.9rem; }
.day:hover { border-color:var(--verde); }
.day.empty { border:none; cursor:default; background:transparent; }
.day.today { border-color:var(--coral); }
.day.sel { background:var(--verde); color:white; border-color:var(--verde); }
.day.has::after { content:""; position:absolute; bottom:6px; width:6px; height:6px; border-radius:50%; background:var(--coral); }
.day.sel.has::after { background:white; }

/* Registro de comidas / actividad */
.log-item { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--gris-claro); }
.log-item:last-child { border-bottom:none; }
.log-item .x { color:var(--gris); cursor:pointer; font-weight:900; padding:2px 8px; border-radius:6px; }
.log-item .x:hover { background:var(--peach); color:var(--coral-osc); }
.inline-form { display:grid; grid-template-columns: 1fr 90px auto; gap:8px; align-items:end; margin-top:12px; }
.inline-form input { padding:10px; }

/* Emociones */
.emo-picker { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.emo-btn { font-size:1.8rem; background:var(--crema); border-radius:12px; padding:8px 12px; border:2px solid transparent; transition:.12s; }
.emo-btn:hover { border-color:var(--verde); }
.emo-btn.sel { border-color:var(--coral); background:var(--peach); }

/* Recetas */
.recipe { border:2px solid var(--gris-claro); border-radius:var(--radio-sm); padding:16px; }
.recipe h4 { font-family:'Fraunces',serif; font-size:1.1rem; margin-bottom:6px; color:var(--verde-osc); }
.recipe .ings { font-size:.88rem; color:var(--gris); margin:6px 0; }
.tag-list { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }

/* ---------- Macronutrientes ---------- */
.macro-targets { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0; }
.mt { border-radius:var(--radio-sm); padding:16px 10px; text-align:center; }
.mt b { font-family:'Fraunces',serif; font-size:1.7rem; display:block; line-height:1; }
.mt span { font-weight:800; font-size:.85rem; display:block; margin-top:4px; }
.mt small { opacity:.85; font-size:.78rem; }
.mt.prot { background:var(--peach); color:var(--coral-osc); }
.mt.carb { background:var(--honey); color:#8A6E2E; }
.mt.gras { background:var(--verde-claro); color:var(--verde-osc); }

.meal-form { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin-top:12px; }
.meal-form .field input { padding:10px; }

.macro-grid { display:flex; flex-direction:column; gap:11px; margin-top:10px; }
.macro .top { display:flex; justify-content:space-between; font-weight:700; font-size:.86rem; margin-bottom:4px; }
.macro .top .over { color:var(--coral-osc); }
.bar { height:11px; background:var(--gris-claro); border-radius:999px; overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:999px; transition:width .3s ease; }
.bar.kcal > i { background:var(--verde); }
.bar.prot > i { background:var(--coral); }
.bar.carb > i { background:var(--amarillo); }
.bar.gras > i { background:var(--avocado); }
.balance-msg { margin-top:14px; background:var(--crema); border-radius:var(--radio-sm); padding:12px 14px; font-size:.9rem; font-weight:600; }
.macro-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:.8rem; color:var(--gris); font-weight:700; }
.macro-legend i { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:middle; }

/* Extras / upsell */
.upsell { border:2px dashed var(--blush); border-radius:var(--radio); padding:20px; background:#FBF2EC; }
.upsell .price-tag { font-family:'Fraunces',serif; font-size:1.6rem; color:var(--coral-osc); }
.pro-card { display:flex; gap:14px; align-items:center; padding:14px; border-radius:var(--radio-sm); background:var(--verde-claro); }
.avatar { width:52px; height:52px; border-radius:50%; background:var(--verde); color:white; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.3rem; flex-shrink:0; }

/* Email simulado (verificación) */
.email-sim { border:2px solid var(--gris-claro); border-radius:var(--radio); overflow:hidden; }
.email-sim .head { background:var(--verde-claro); padding:11px 16px; font-size:.8rem; color:var(--verde-osc); font-weight:700; }
.email-sim .body { padding:22px; text-align:center; }
.code { font-family:'Fraunces',serif; font-size:2rem; letter-spacing:.28em; color:var(--verde-osc); background:var(--crema); padding:10px 18px; border-radius:12px; display:inline-block; font-weight:600; }

/* Créditos profesionales */
.professionals-footer { margin-top:48px; padding:28px 0; border-top:1px solid var(--gris-claro); text-align:center; }
.professionals-footer p { color:var(--gris); font-size:.82rem; margin:0 0 6px; text-transform:uppercase; letter-spacing:.08em; }
.prof-names { display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; font-size:1rem; color:var(--texto); }
.prof-names .sep-dot { color:var(--gris-claro); font-size:1.4rem; line-height:1; }

/* Pie del sitio */
.site-footer { margin-top:0; padding:14px 0 8px; text-align:center; color:var(--gris); font-size:.85rem; font-weight:700; display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.site-footer .sep { opacity:.5; }

/* Banner de cookies */
.cookie-banner { position:fixed; bottom:46px; left:50%; transform:translateX(-50%); max-width:720px; width:calc(100% - 28px); background:var(--blanco); border:1px solid var(--gris-claro); box-shadow:var(--sombra-fuerte); border-radius:var(--radio); padding:16px 20px; z-index:80; display:flex; gap:16px; align-items:center; flex-wrap:wrap; animation:fade .35s ease; }
.cookie-banner p { font-size:.88rem; flex:1 1 300px; margin:0; }
.cookie-banner .actions { display:flex; gap:8px; flex-wrap:wrap; }
.cookie-banner .btn { padding:10px 18px; font-size:.9rem; }

/* Banner inferior */
.proto-banner { position:fixed; bottom:0; left:0; right:0; background:var(--texto); color:#EDEAE2; font-size:.78rem; text-align:center; padding:8px; z-index:60; }

/* Toast */
.toast { position:fixed; bottom:50px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--verde-osc); color:white; padding:14px 22px; border-radius:999px; font-weight:700; box-shadow:var(--sombra-fuerte); opacity:0; transition:.25s; z-index:100; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Modal */
.modal-bg { position:fixed; inset:0; background:rgba(70,63,48,.45); display:flex; align-items:center; justify-content:center; z-index:90; padding:20px; }
.modal { background:white; border-radius:var(--radio); padding:28px; max-width:440px; width:100%; box-shadow:var(--sombra-fuerte); }

/* Botón destacado de Extras */
.btn.extras-cta { font-size:1.05rem; padding:16px 28px; border-radius:999px; display:inline-flex; align-items:center; gap:8px; animation: pulseGlow 2.4s ease-in-out infinite; }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 6px 16px rgba(238,139,110,.34); }
  50% { box-shadow: 0 6px 26px rgba(238,139,110,.62); }
}

/* Insignia de estrellas (gamificación) */
.star-badge { display:inline-flex; align-items:center; gap:4px; background:#fff6da; color:#a87c00; font-weight:800; font-size:1.05rem; padding:10px 16px; border-radius:999px; border:1px solid #e8c860; }

/* Panel lateral (drawer) de Extras y consultas */
.drawer-bg { position:fixed; inset:0; background:rgba(70,63,48,.4); z-index:90; animation: fade .25s ease; }
.drawer { position:fixed; top:0; right:0; height:100%; width:min(440px, 92vw); background:white; box-shadow:-12px 0 40px rgba(0,0,0,.18); padding:26px 24px; overflow-y:auto; z-index:91; animation: slideIn .32s cubic-bezier(.2,.8,.2,1); }
@keyframes slideIn { from{ transform:translateX(100%); } to{ transform:translateX(0); } }
.steps { display:flex; gap:6px; justify-content:center; margin-bottom:20px; }
.steps i { width:30px; height:5px; border-radius:3px; background:var(--gris-claro); }
.steps i.on { background:var(--verde); }

.fade-in { animation: fade .35s ease; }
@keyframes fade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }