/* ============================================================
   NUTRIARY · sistema visual
   ------------------------------------------------------------
   Quiet confidence. Editorial contemporáneo.
   Se carga después del <style> de index.html y lo sobrescribe.

   Principio de contenedores:
   Hay tarjeta SOLO cuando el bloque es una unidad que se toca
   o se marca (una comida, un día, un renglón del súper).
   Lo demás va abierto: línea fina + etiqueta.
   ============================================================ */

:root{
  --marfil:      #F7F5F0;
  --blanco:      #FCFBF8;
  --arena:       #ECE7DF;
  --mineral:     #DED7CD;

  --salvia:      #7F8C76;
  --oliva:       #3F493B;
  --oliva-hover: #333C30;

  --tinta:       #252622;
  --tinta-2:     #6F726B;
  --tinta-3:     #9B9E97;

  --terracota:   #B96654;
  --terracota-luz:#F4E7E3;
  --exito:       #829B7B;
  --exito-luz:   #EBF0E9;

  --agua:        #7A9AA6;
  --agua-luz:    #EBF1F3;
  --agua-borde:  #C9DBE0;

  --linea:       #DED7CD;
  --linea-suave: #E9E4DB;

  --f: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;

  --r-btn:  13px;
  --r-campo:12px;
  --r-card: 17px;
  --r-cont: 20px;

  --s: 0 1px 2px rgba(37,38,34,.035);
  --sombra: var(--s);
  --ease: cubic-bezier(.4,0,.2,1);
  --t: 200ms;
}

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
body{
  font-family: var(--f) !important;
  background: var(--marfil) !important;
  background-image: none !important;
  color: var(--tinta);
  line-height: 1.6;
  letter-spacing: -.006em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
*{ font-family: var(--f) }

h1,h2,h3{ font-family: var(--f); color: var(--tinta) }
h1{
  font-size: clamp(30px,4.6vw,36px); font-weight:650;
  line-height:1.14; letter-spacing:-.028em; margin-bottom:14px;
}
h2{
  font-size: clamp(22px,3vw,26px); font-weight:600;
  line-height:1.2; letter-spacing:-.022em; margin-bottom:12px;
}
h3{ font-size:19px; font-weight:600; letter-spacing:-.018em; margin-bottom:9px }
.sub{ font-size:16px; color:var(--tinta-2); line-height:1.68; max-width:58ch }

/* la etiqueta de sección: el recurso que reemplaza a la tarjeta */
.eyebrow,
.bloque h3 .n, .sup h3 .n, .cal-bloque h3 .n,
.pasillo .pn, .pasillo-lista .pn,
.swap .g, .man-eyebrow, .meta-l, .cifra .l,
.cifra-l, .cal-macros span, .comida-nom, .tiempo .nom{
  font-size:11.5px !important; font-weight:600 !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  color:var(--salvia) !important;
}
.meta-l,.cifra-l,.cal-macros span,.comida-nom,.tiempo .nom,.cifra .l{
  color:var(--tinta-2) !important; letter-spacing:.08em !important;
}
.eyebrow{ margin-bottom:14px }

/* cifras */
.cifra .v,.meta-n,.peso-n,.cifra-n,.tag .n,.cal-macros b,.agua-vasos{
  font-variant-numeric: tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.025em; font-weight:600;
}

/* ------------------------------------------------------------
   ICONOS · trazo 1.7, geométricos, un solo color
   ------------------------------------------------------------ */
:root{
  --i-gota:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M12 3.2c3.9 4.8 6.6 8.2 6.6 11.3a6.6 6.6 0 0 1-13.2 0c0-3.1 2.7-6.5 6.6-11.3z'/%3E%3C/svg%3E");
  --i-menos:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --i-mas:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-plan:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2.5'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
  --i-impresora: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M7 8V3h10v5M7 18H4.5v-8h15v8H17M7 14h10v7H7z'/%3E%3C/svg%3E");
  --i-inicio:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5L12 3.5l8.5 7M5.5 9.5V20h13V9.5'/%3E%3C/svg%3E");
  --i-super:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3.5h2.3l2.3 11h10.2l1.9-8H6'/%3E%3Ccircle cx='9.5' cy='19' r='1.4'/%3E%3Ccircle cx='16.5' cy='19' r='1.4'/%3E%3C/svg%3E");
  --i-progreso:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16'/%3E%3Cpath d='M7.5 15l3.8-4 2.6 2.6L20 7.5'/%3E%3C/svg%3E");
  --i-calculo:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='3' width='15' height='18' rx='2.5'/%3E%3Cpath d='M8 7.5h8M8.5 13h.01M12 13h.01M15.5 13h.01M8.5 17h.01M12 17h.01M15.5 17h.01'/%3E%3C/svg%3E");
  --i-atras:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5.5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
  --i-tic:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.7 4.7L19 7.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   BARRA SUPERIOR
   ------------------------------------------------------------ */
.barra{
  background: rgba(247,245,240,.88);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--linea-suave);
}
.barra-in{ padding:18px 24px; gap:20px; max-width:1080px }
.logo{
  font-family:var(--f) !important; font-size:18px; font-weight:650;
  letter-spacing:-.024em; color:var(--tinta);
}
.logo span{ color:var(--salvia) }
.logo::after{ display:none }

.progreso{ height:2px; background:var(--mineral); border-radius:0 }
.progreso-b{ background:var(--salvia); border-radius:0 }
.paso-n{ font-size:12.5px; font-weight:500; color:var(--tinta-3); letter-spacing:0 }

.sesion-yo{ font-size:12.5px; color:var(--tinta-2); font-weight:500 }
.sesion-salir{
  font-size:12.5px; font-weight:550; border-radius:var(--r-campo);
  border:1px solid var(--linea); color:var(--tinta-2);
  background:transparent; padding:10px 15px; min-height:40px;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.sesion-salir:hover{ border-color:var(--salvia); color:var(--tinta) }

.lienzo{ max-width:1080px; padding:0 24px 100px }
.pantalla{ animation: entra 220ms var(--ease) }
@keyframes entra{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* ------------------------------------------------------------
   BOTONES
   ------------------------------------------------------------ */
.btn{
  font-family:var(--f); font-size:15.5px; font-weight:550;
  letter-spacing:-.008em;
  padding:0 28px; min-height:54px;
  border-radius:var(--r-btn); border:0;
  background:var(--oliva); color:var(--marfil);
  box-shadow:none; gap:10px;
  transition: background var(--t) var(--ease), opacity var(--t) var(--ease);
}
.btn:hover{ background:var(--oliva-hover); transform:none; box-shadow:none }
.btn:active{ opacity:.86; transform:none }
.btn:disabled{ background:var(--mineral); color:var(--tinta-3) }
.btn:focus-visible{ outline:2px solid var(--salvia); outline-offset:2px }

.btn-barro{ background:var(--terracota) }
.btn-barro:hover{ background:#A85A49 }

.btn-fant{
  background:transparent; color:var(--tinta);
  border:1px solid var(--linea); box-shadow:none;
}
.btn-fant:hover{ background:transparent; border-color:var(--salvia); color:var(--oliva) }

.btn-atras{
  font-size:14.5px; font-weight:550;
  border-radius:var(--r-btn); border:1px solid var(--linea);
  background:transparent; color:var(--tinta-2);
  padding:0 20px 0 16px; min-height:44px;
  box-shadow:none; margin-bottom:30px;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn-atras:hover{ border-color:var(--salvia); color:var(--tinta); background:transparent; transform:none }
.btn-atras .flecha{ display:none }
.btn-atras::before{
  content:''; width:16px; height:16px; flex-shrink:0; background:currentColor;
  -webkit-mask:var(--i-atras) center/contain no-repeat;
          mask:var(--i-atras) center/contain no-repeat;
}

.enlace{
  font-weight:550; color:var(--oliva);
  text-decoration:none; border-bottom:1px solid var(--mineral);
  padding:8px 1px; transition:border-color var(--t) var(--ease);
}
.enlace:hover{ border-bottom-color:var(--salvia) }

/* ------------------------------------------------------------
   PORTADA
   ------------------------------------------------------------ */
.portada{ padding:44px 0 60px }
.portada-txt{ text-align:left; margin-left:0 }
.cred{
  font-size:12px; font-weight:550; letter-spacing:.02em;
  color:var(--tinta-2); background:transparent;
  border:1px solid var(--linea); border-radius:100px;
  padding:7px 15px; margin-bottom:20px; gap:8px;
}
.cred::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--salvia); flex-shrink:0;
}
.portada h1{ font-size:clamp(29px,5.2vw,40px); margin-bottom:12px }
.intro{ font-size:13px; font-weight:500; color:var(--tinta-3); margin-bottom:20px }
.portada .sub{ font-size:16.5px; max-width:52ch }
.portada .sub em{ font-style:normal; color:var(--oliva); font-weight:600 }

.portada-foto{ max-width:230px; padding-top:20px }
.portada-foto::before{
  background: radial-gradient(ellipse at 50% 70%,
    var(--arena) 0%, rgba(236,231,223,.4) 45%, transparent 72%);
}
.portada-foto img{ max-height:330px; filter:none }

.bifurca{ gap:14px; margin-top:32px; max-width:760px }
.via{
  padding:26px 26px; border-radius:var(--r-card);
  background:var(--blanco); border:1px solid var(--linea-suave);
  box-shadow:none;
  transition: border-color var(--t) var(--ease);
}
.via:hover{ border-color:var(--mineral); transform:none; box-shadow:none }
.via.destacada{ border:1px solid var(--salvia); background:var(--blanco) }
.via-t{
  font-size:11.5px !important; font-weight:600 !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  color:var(--salvia) !important; margin-bottom:11px;
}
.via p{ font-size:15px; color:var(--tinta-2); line-height:1.6; margin-bottom:20px }
.via .btn{ font-size:15px; padding:0 24px; min-height:50px }
.via-nota{ font-size:12.5px !important; color:var(--tinta-3) !important; font-weight:500 }

.promesa{
  font-size:15px; color:var(--tinta-2);
  margin-top:36px; padding-top:26px; border-top:1px solid var(--linea-suave);
}

/* ------------------------------------------------------------
   QUIZ
   ------------------------------------------------------------ */
.q{ max-width:640px; padding:60px 0 40px }
.q .sub{ margin-bottom:36px }
.ops{ gap:9px }

.op{
  padding:18px 22px; border-radius:var(--r-campo);
  background:var(--blanco); border:1px solid var(--linea-suave);
  font-size:15.5px; font-weight:450; color:var(--tinta);
  box-shadow:none; gap:15px;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.op:hover{ border-color:var(--mineral); background:var(--blanco); box-shadow:none }
.op:active{ transform:none; opacity:.9 }
.op.sel{
  border-color:var(--oliva); background:var(--blanco);
  box-shadow:inset 2px 0 0 var(--oliva);
}
.op-n{ font-size:12.5px; font-weight:600; color:var(--tinta-3); width:22px }
.op.sel .op-n{ color:var(--oliva) }
.op-txt small{ font-size:13.5px; color:var(--tinta-2); margin-top:3px; font-weight:400 }

.campo{ margin-bottom:24px }
.campo label{
  font-size:12.5px !important; font-weight:550 !important;
  letter-spacing:.01em !important; text-transform:none !important;
  color:var(--tinta-2) !important; margin-bottom:9px;
}
.campo input,.campo select{
  padding:15px 17px; min-height:54px;
  font-size:16px; font-weight:450; color:var(--tinta);
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r-campo);
  transition: border-color var(--t) var(--ease);
}
.campo input:focus,.campo select:focus{
  border-color:var(--salvia); background:var(--blanco);
  box-shadow:0 0 0 3px rgba(127,140,118,.13);
}
.campo input::placeholder{ color:var(--tinta-3) }

.unidad button{
  font-size:13.5px; font-weight:550;
  border-radius:var(--r-campo); border:1px solid var(--linea);
  color:var(--tinta-2); background:transparent;
  padding:0 18px; min-height:44px;
  transition: all var(--t) var(--ease);
}
.unidad button.on{ background:var(--oliva); color:var(--marfil); border-color:var(--oliva) }

.nota-q{
  font-size:13.5px; font-weight:400; color:var(--tinta-2);
  border-left:1px solid var(--linea); padding-left:16px; margin-top:22px;
}

.patologia{
  margin-top:40px; padding:0; background:transparent;
  border:0; border-top:1px solid var(--linea); border-radius:0;
  padding-top:26px;
}
.patologia h3{ font-size:18px }
.patologia p{ font-size:15px; color:var(--tinta-2) }
.patologia .btn{ background:transparent; color:var(--tinta); border:1px solid var(--linea); font-size:14.5px }
.patologia .btn:hover{ background:transparent; border-color:var(--salvia) }

/* ------------------------------------------------------------
   CARGANDO
   ------------------------------------------------------------ */
.carga{ margin:90px auto; text-align:left; max-width:460px }
.p-item{
  font-size:14.5px; font-weight:450; color:var(--tinta-3);
  padding:14px 0; border-bottom:1px solid var(--linea-suave);
  transition: color 320ms var(--ease);
}
.p-item .tic{
  width:18px; height:18px; font-size:10px;
  border:1px solid var(--linea); background:transparent;
  transition: all 320ms var(--ease);
}
.p-item.on{ color:var(--tinta) }
.p-item.on .tic{ background:var(--salvia); border-color:var(--salvia); color:var(--marfil) }

/* ------------------------------------------------------------
   RESULTADO · cabecera del plan
   Bloque de color plano, sin tarjeta flotante.
   ------------------------------------------------------------ */
.res{ padding:48px 0 }
.plan-cab{
  background:var(--oliva) !important;
  border-radius:var(--r-cont); padding:40px 40px; margin-bottom:36px;
  box-shadow:none;
}
.plan-cab::after,.plan-cab::before{ display:none }
.plan-cab .eyebrow{ color:rgba(247,245,240,.58) !important }
.plan-cab h2{ color:var(--marfil) }
.plan-cab p{ color:rgba(247,245,240,.76); font-size:16px }
.cifras{ gap:40px; margin-top:32px; padding-top:26px; border-top:1px solid rgba(247,245,240,.16) }
.cifra .v{ font-size:29px; font-weight:600; color:var(--marfil) }
.cifra .l{ color:rgba(247,245,240,.55) !important; margin-top:7px }

/* ------------------------------------------------------------
   SECCIONES ABIERTAS · sin tarjeta
   Bloques informativos: separados por línea, no por caja.
   ------------------------------------------------------------ */
.bloque,.cal-bloque{
  background:transparent; border:0; border-radius:0;
  padding:0; margin-bottom:38px; box-shadow:none;
}
.bloque h3,.cal-bloque h3{
  padding-bottom:12px; margin-bottom:18px;
  border-bottom:1px solid var(--linea);
  font-size:19px;
}
.bloque li{
  font-size:15.5px; color:var(--tinta-2); padding:11px 0 11px 18px;
  border-bottom:1px solid var(--linea-suave);
}
.bloque li::before{ background:var(--salvia); width:6px; height:1px; top:22px }

.cal-bloque.destacado{
  border:0; border-left:2px solid var(--salvia);
  padding-left:22px; border-radius:0;
}
.cal-txt{ font-size:15.5px; color:var(--tinta-2); line-height:1.68 }
.cal-nota{
  font-size:14px; color:var(--tinta-2); line-height:1.68;
  background:var(--arena); border-radius:var(--r-campo); padding:16px 18px;
}
.cal-fila{ padding:12px 0; border-bottom:1px solid var(--linea-suave); font-size:15px; color:var(--tinta-2) }
.cal-fila b{ font-size:15px; font-weight:600; color:var(--tinta) }
.cal-macros{ gap:24px }
.cal-macros b{ font-size:25px; font-weight:600; color:var(--tinta) }
.cal-macros span{ margin-top:6px }
.cal-pie{
  font-size:12.5px; font-weight:400; color:var(--tinta-3);
  border-top:1px solid var(--linea-suave); padding-top:22px; text-align:left;
}

/* suplementos: sí lleva contenedor, es una unidad aparte */
.sup{
  background:var(--arena); border:0; border-radius:var(--r-card);
  padding:28px 30px; margin-bottom:14px; box-shadow:none;
}
.sup h3{ padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid rgba(37,38,34,.09) }
.sup h3 .n{ color:var(--terracota) !important }
.sup > p{ font-size:15.5px; color:var(--tinta-2) }
.sup-nota{
  font-size:12.5px !important; color:var(--tinta-3) !important; font-weight:400;
  border-top:1px solid rgba(37,38,34,.09);
}

/* ------------------------------------------------------------
   EL DÍA · sí es tarjeta (unidad completa)
   ------------------------------------------------------------ */
.dia{
  background:var(--blanco); border:1px solid var(--linea-suave);
  border-radius:var(--r-card); padding:28px 30px; margin-bottom:12px;
  box-shadow:none;
}
.dia-cab{ padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--linea-suave) }
.dia-cab .kcal{ font-size:13.5px; font-weight:450; color:var(--tinta-3) }
.dia-cab .kcal b{ color:var(--tinta); font-weight:600 }

.regla::before{ background:var(--linea) }
.tiempo .hora{ font-size:12.5px; font-weight:600; color:var(--salvia); letter-spacing:0 }
.tiempo::before{
  background:var(--blanco); border:1.5px solid var(--salvia);
  width:8px; height:8px; left:-19px; top:6px; box-shadow:0 0 0 3px var(--blanco);
}
.tiempo .nom{ margin-bottom:4px }
.tiempo .plato{ font-size:15.5px; color:var(--tinta); line-height:1.5 }
.tiempo .cal{ font-size:12.5px; color:var(--tinta-3); font-weight:450 }

.ver-prep{
  font-size:12.5px !important; font-weight:550 !important;
  letter-spacing:.02em !important; text-transform:none !important;
  color:var(--salvia);
}
.ver-prep:hover{ color:var(--oliva) }
.ver-prep.abierto{ color:var(--oliva) }
.prep{ font-size:14.5px; color:var(--tinta-2); border-left:1px solid var(--linea) }

.bebida{ padding:12px 0; border-bottom:1px solid var(--linea-suave) }
.bebida .b-n{ font-size:12.5px; font-weight:600; color:var(--salvia) }
.bebida .b-t{ font-size:15.5px; color:var(--tinta-2) }

.swap{ border-bottom:1px solid var(--linea-suave); padding:16px 0 }
.swap .g{ margin-bottom:9px }
.swap .i span{
  font-size:13.5px; font-weight:450; padding:6px 13px;
  background:var(--arena); color:var(--tinta); border-radius:8px;
}

.pasillo .pn{ border-bottom:1px solid var(--linea); padding-bottom:10px; margin-bottom:10px }
.pasillo li{ font-size:14.5px; color:var(--tinta-2) }
.pasillo li::before{ border:1px solid var(--mineral); border-radius:2px; width:10px; height:10px; top:11px }

/* ------------------------------------------------------------
   PAYWALL
   ------------------------------------------------------------ */
.velo .oculto{ filter:blur(6px); opacity:.4 }
.velo .candado{ background:linear-gradient(to bottom, transparent, var(--marfil) 58%); padding-top:110px }
.precio-caja{
  border:1px solid var(--linea); border-radius:var(--r-cont); overflow:hidden;
  box-shadow:none; background:var(--blanco);
}
.precio-cab{ background:var(--oliva) !important; padding:32px 36px }
.precio-cab .eyebrow{ color:rgba(247,245,240,.58) !important }
.precio-cab h2{ color:var(--marfil); font-size:26px }
.precio-cuerpo{ padding:34px 36px }

.planes{ gap:14px; margin-top:28px }
.plan-op{
  padding:26px; border-radius:var(--r-card);
  border:1px solid var(--linea-suave); background:transparent;
}
.plan-op.recomendado{ border:1px solid var(--salvia); background:var(--blanco); box-shadow:none }
.plan-etiq{
  font-size:11px; font-weight:600; letter-spacing:.08em;
  background:var(--salvia); color:var(--marfil);
  border-radius:6px; padding:4px 10px; top:-10px; left:22px;
}
.plan-nom{ font-size:11.5px !important; font-weight:600 !important;
  letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--tinta-3) !important }
.plan-d{ font-size:14px; color:var(--tinta-2); line-height:1.6 }
.plan-op .btn{ border-radius:var(--r-btn); min-height:52px }
.plan-nota{ font-size:12.5px; color:var(--tinta-3); font-weight:450 }

.tag .n{ font-size:42px; font-weight:650; color:var(--tinta) }
.tag .p{ font-size:13.5px; color:var(--tinta-3); font-weight:450 }
.tag-nota{ font-size:13.5px; color:var(--tinta-3) }

.incluye li{ padding:13px 0; border-bottom:1px solid var(--linea-suave); font-size:15.5px }
.incluye .tk{ color:var(--salvia); font-weight:600 }
.incluye small{ color:var(--tinta-2); font-size:14px }

.precio-pie{
  background:var(--arena); border-top:0;
  font-size:12.5px; font-weight:450; color:var(--tinta-2);
  padding:18px 36px; text-align:left;
}

/* ------------------------------------------------------------
   APP DIARIA
   ------------------------------------------------------------ */
.app-diaria{ padding:30px 0 112px; max-width:660px }

.pestanas{
  background:rgba(247,245,240,.94);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-top:1px solid var(--linea);
  gap:0; padding:8px 8px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
}
.pest{
  border:0 !important; border-radius:10px; background:transparent;
  box-shadow:none;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:9px 4px !important; min-height:56px;
  font-size:11px !important; font-weight:500;
  letter-spacing:0; color:var(--tinta-3) !important;
  transition: color var(--t) var(--ease);
}
.pest::before{
  content:''; width:21px; height:21px; flex-shrink:0; background:currentColor;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.pest:nth-child(1)::before{ -webkit-mask-image:var(--i-inicio);   mask-image:var(--i-inicio) }
.pest:nth-child(2)::before{ -webkit-mask-image:var(--i-super);    mask-image:var(--i-super) }
.pest:nth-child(3)::before{ -webkit-mask-image:var(--i-progreso); mask-image:var(--i-progreso) }
.pest:nth-child(4)::before{ -webkit-mask-image:var(--i-calculo);  mask-image:var(--i-calculo) }
.pest:hover{ color:var(--tinta-2) !important; background:transparent }
.pest:active{ opacity:.7 }
.pest.on{
  color:var(--oliva) !important; font-weight:600;
  background:transparent; border-top-color:transparent !important;
}

/* ---- HOY ---- */
.hoy-cab{ margin-bottom:44px }
.hoy-fecha{
  display:block; font-size:12.5px !important; font-weight:500;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  color:var(--tinta-2) !important;
  background:transparent; border:0; border-radius:0;
  padding:0; margin-bottom:12px;
}
.hoy-fecha::before{ display:none }
.hoy-cab h2{
  font-size:33px; font-weight:650; letter-spacing:-.03em;
  line-height:1.12; margin-bottom:0;
}

/* la sección: línea fina + etiqueta. Reemplaza a la tarjeta. */
.seccion{ margin-bottom:46px }
.seccion-t{
  font-size:11.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--salvia);
  padding-bottom:12px; margin-bottom:20px;
  border-bottom:1px solid var(--linea);
}

/* ---- sigue ahora ---- */
.ahora-fila{ display:flex; gap:20px; align-items:baseline; margin-bottom:6px }
.ahora-hora{
  font-size:15px; font-weight:600; color:var(--oliva);
  min-width:48px; flex-shrink:0; font-variant-numeric:tabular-nums;
}
.ahora-cuerpo{ flex:1; min-width:0 }
.ahora-plato{ font-size:17.5px; color:var(--tinta); line-height:1.45; margin-bottom:5px }
.ahora-meta{ font-size:13.5px; color:var(--tinta-2); font-weight:450 }
.ahora-btn{ margin-top:22px; font-size:15.5px }
.ahora-cierre p{
  font-size:16.5px; color:var(--tinta-2); line-height:1.6; max-width:44ch;
}

/* ---- tu día: tres cifras abiertas ---- */
.hoy-metas{ gap:36px; margin-bottom:22px; padding-bottom:0; border:0 }
.meta-caja{
  flex:0 1 auto; background:transparent; border:0; border-radius:0;
  padding:0; box-shadow:none;
}
.meta-n{ font-size:30px; font-weight:600; color:var(--tinta); line-height:1 }
.meta-de{ color:var(--tinta-3); font-weight:500 }
.meta-u{ font-size:18px; color:var(--tinta-2); font-weight:500 }
.meta-l{ margin-top:8px }

.dia-barra{ height:3px; background:var(--mineral); border-radius:2px; margin-bottom:26px }
.dia-barra-lleno{
  height:100%; background:var(--salvia); border-radius:2px;
  transition: width 240ms var(--ease);
}

.acompana{
  font-size:15.5px; color:var(--tinta-2); line-height:1.65;
  background:var(--arena); border-radius:var(--r-card);
  padding:20px 22px; margin-top:22px; max-width:50ch;
}

/* agua: el único bloque con color propio.
   Azul apagado, no saturado: es un dato distinto, no un adorno. */
.agua{
  background:var(--agua-luz); border:0; border-radius:var(--r-card);
  padding:22px 24px;
}
.agua-cab{ font-size:15px; margin-bottom:12px; color:var(--tinta-2) }
.agua-cab span:first-child{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:550; color:var(--tinta);
}
.agua-cab span:first-child::before{
  content:''; width:16px; height:16px; flex-shrink:0; background:var(--agua);
  -webkit-mask:var(--i-gota) center/contain no-repeat;
          mask:var(--i-gota) center/contain no-repeat;
}
.agua-vasos{ font-size:12.5px; font-weight:600; color:var(--agua) }
.agua-barra{ height:3px; background:var(--agua-borde); border-radius:2px }
.agua-lleno{ background:var(--agua); border-radius:2px; transition:width 240ms var(--ease) }
.agua-lleno::after{ display:none }

.agua-botones{ gap:9px; margin-top:16px }
.agua-botones button{
  flex:0 1 auto; min-width:112px; min-height:46px; border-radius:var(--r-btn);
  background:transparent !important; border:1px solid var(--agua-borde) !important;
  color:var(--agua) !important;
  font-size:14px !important; font-weight:550;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:none !important;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.agua-botones button:hover:not(:disabled){
  background:#fff !important; border-color:var(--agua) !important; transform:none;
}
.agua-botones button:active:not(:disabled){ transform:none; opacity:.72 }
.agua-botones button:disabled{
  border-color:var(--agua-borde) !important; color:#B4C6CC !important;
  background:transparent !important; opacity:1;
}
.agua-botones button::before{
  content:''; width:15px; height:15px; flex-shrink:0; background:currentColor;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.agua-botones button:first-child::before{ -webkit-mask-image:var(--i-menos); mask-image:var(--i-menos) }
.agua-botones button:last-child::before{ -webkit-mask-image:var(--i-mas); mask-image:var(--i-mas) }

/* comidas: se separan con línea, no con tarjetas */
.hoy-comidas{ gap:0; margin-top:0 }
.comida{
  background:transparent; border:0;
  border-bottom:1px solid var(--linea-suave);
  border-radius:0; padding:20px 0; gap:16px; box-shadow:none;
  transition: opacity var(--t) var(--ease);
}
.comida:last-child{ border-bottom:0 }
.comida.ahora{
  background:var(--blanco); border:0; border-left:2px solid var(--salvia);
  border-bottom:1px solid var(--linea-suave);
  border-radius:0; padding:20px 20px 20px 22px; margin-left:-22px;
}
.comida.hecha{ opacity:.45; background:transparent }
.comida.pasada:not(.hecha){ opacity:.72 }

.palomea{
  width:26px; height:26px; border:1.5px solid var(--mineral);
  border-radius:50%; background:transparent; box-shadow:none;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.palomea:hover{ border-color:var(--salvia); transform:none; box-shadow:none }
.palomea:active{ transform:none; opacity:.7; box-shadow:none }
.comida.hecha .palomea{ background:var(--exito) !important; border-color:var(--exito) !important }
.comida.hecha .palomea .tic{
  font-size:0; width:13px; height:13px; background:var(--marfil);
  -webkit-mask:var(--i-tic) center/contain no-repeat;
          mask:var(--i-tic) center/contain no-repeat;
  animation: aparece 180ms var(--ease);
}
@keyframes aparece{ from{opacity:0} to{opacity:1} }

.comida-cab{ gap:10px; margin-bottom:5px }
.comida-hora{ font-size:13.5px; font-weight:600; color:var(--oliva) }
.ahorita{
  font-size:10.5px !important; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  background:transparent; color:var(--salvia);
  border:1px solid var(--salvia); border-radius:5px; padding:2px 8px;
  animation:none;
}
.comida-plato{ font-size:16px; color:var(--tinta); line-height:1.5 }


.hoy-acciones{ gap:10px; margin-top:32px }
.ver-semana{
  flex:0 1 auto; width:auto; border-radius:var(--r-btn); min-height:52px;
  padding:0 24px;
  background:var(--oliva) !important; border:0 !important; color:var(--marfil) !important;
  font-size:15px !important; font-weight:550;
  display:inline-flex !important; align-items:center; justify-content:center; gap:10px;
  box-shadow:none !important;
  transition: background var(--t) var(--ease);
}
.ver-semana:hover{ background:var(--oliva-hover) !important; color:var(--marfil) !important; transform:none }
.ver-semana:active{ opacity:.86; transform:none }
.ver-semana::before{
  content:''; width:17px; height:17px; flex-shrink:0; background:var(--marfil);
  -webkit-mask:var(--i-plan) center/contain no-repeat;
          mask:var(--i-plan) center/contain no-repeat;
}

.imprimir{
  border-radius:var(--r-btn); min-height:52px; padding:0 22px;
  background:transparent !important; border:1px solid var(--linea) !important;
  color:var(--tinta-2) !important;
  font-size:15px; font-weight:550; box-shadow:none !important;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.imprimir:hover{
  border-color:var(--salvia) !important; color:var(--tinta) !important;
  background:transparent !important; transform:none;
}
.imprimir:active{ transform:none; opacity:.8 }
.imprimir::before{
  content:''; width:17px; height:17px; flex-shrink:0; background:currentColor;
  -webkit-mask:var(--i-impresora) center/contain no-repeat;
          mask:var(--i-impresora) center/contain no-repeat;
}

/* mañana */
.manana{ background:var(--oliva); border-radius:var(--r-card); padding:22px 24px; margin-top:28px }
.man-eyebrow{ color:rgba(247,245,240,.55) !important }
.man-toggle{
  font-size:12.5px; font-weight:550;
  border-radius:9px; border:1px solid rgba(247,245,240,.22);
  color:var(--marfil); padding:0 16px; min-height:40px;
  transition: border-color var(--t) var(--ease);
}
.man-toggle:hover{ background:transparent; border-color:rgba(247,245,240,.5) }
.man-tip{ font-size:15px; color:rgba(247,245,240,.78) }
.man-fila{ border-bottom:1px solid rgba(247,245,240,.12); padding:11px 0 }
.man-hora{ font-size:12.5px; font-weight:600; color:rgba(247,245,240,.55) }
.man-plato{ font-size:14.5px; color:rgba(247,245,240,.9) }

/* ---- SÚPER ---- */
.pasillo-lista{ margin-bottom:30px }
.pasillo-lista .pn{ border-bottom:1px solid var(--linea); padding-bottom:11px; margin-bottom:4px }
.pasillo-lista li{
  padding:13px 0; border-bottom:1px solid var(--linea-suave);
  font-size:15.5px; color:var(--tinta); gap:14px;
}
.pasillo-lista li.tachado{ opacity:.38 }
.check{
  width:22px; height:22px; border:1.5px solid var(--mineral); border-radius:5px;
  transition: all var(--t) var(--ease);
}
.check:hover{ border-color:var(--salvia) }
.tachado .check{ background:var(--exito); border-color:var(--exito) }
.tachado .check .tic{
  font-size:0; width:12px; height:12px; background:var(--marfil);
  -webkit-mask:var(--i-tic) center/contain no-repeat;
          mask:var(--i-tic) center/contain no-repeat;
}

/* ---- AVANCE ---- */
.avance-cab{ margin-bottom:30px }
.recalcula{
  font-size:12.5px; font-weight:500; letter-spacing:0;
  color:var(--tinta-2) !important; background:transparent !important;
  border:1px solid var(--linea) !important; border-radius:100px; padding:7px 15px;
}

/* el peso: abierto, sin caja */
.peso-caja{
  background:transparent; border:0; border-radius:0;
  padding:0 0 34px; margin-bottom:34px; box-shadow:none;
  border-bottom:1px solid var(--linea);
}
.peso-n{ font-size:46px; font-weight:600; color:var(--tinta); margin-bottom:20px }
.peso-u{ font-size:18px; color:var(--tinta-2); font-weight:450 }
.peso-dif{ font-size:13.5px; font-weight:500; margin-top:10px }
.peso-dif.baja{ color:var(--exito) }
.peso-dif.sube{ color:var(--tinta-3) }
.grafica path{ stroke:var(--salvia) }
.grafica circle{ fill:var(--salvia) }
.gr-fechas{ font-size:11.5px; color:var(--tinta-3); font-weight:450 }
.gr-vacia{
  font-size:13.5px; color:var(--tinta-3); font-weight:450;
  border:1px dashed var(--mineral); border-radius:var(--r-campo); padding:34px 20px;
}

.peso-form{ gap:9px; margin-top:22px }
.peso-form input{
  min-height:52px; padding:14px 17px; border-radius:var(--r-campo);
  font-size:16px; font-weight:450;
  border:1px solid var(--linea); background:var(--blanco);
}
.peso-form input:focus{ border-color:var(--salvia); box-shadow:0 0 0 3px rgba(127,140,118,.13) }
.peso-form .btn{ min-height:52px; border-radius:var(--r-btn); padding:0 24px; font-size:15px }
.peso-nota{ font-size:13px; color:var(--tinta-3); font-weight:400; line-height:1.7 }

/* las dos cifras: abiertas */
.avance-cifras{ gap:40px; display:flex }
@media(max-width:480px){ .avance-cifras{ gap:32px } }
.cifra-caja{
  flex:0 1 auto; background:transparent; border:0; border-radius:0;
  padding:0; box-shadow:none;
}
.cifra-n{ font-size:34px; font-weight:600; color:var(--tinta); line-height:1 }
.cifra-l{ margin-top:9px }
.cifra-d{ font-size:13px; color:var(--tinta-3); font-weight:450; margin-top:5px }

/* ------------------------------------------------------------
   AVISOS
   ------------------------------------------------------------ */
.aviso-ok{ background:var(--exito-luz); border-bottom:0; padding:22px 24px; text-align:left }
.aviso-ok b{ font-family:var(--f); color:var(--oliva); font-size:19px; font-weight:600 }
.aviso-ok p{ font-size:14.5px; color:var(--tinta-2); margin:0 }
.aviso-err{ background:var(--terracota-luz); border-bottom:0; font-size:14.5px; color:var(--tinta); padding:15px 24px }
.aviso-oxxo{ background:var(--terracota-luz); border-bottom:0; padding:22px 24px; text-align:left }
.aviso-oxxo b{ font-family:var(--f); color:var(--tinta); font-size:18px; font-weight:600 }
.aviso-oxxo p{ font-size:14.5px; color:var(--tinta-2); margin:0 0 14px }

.err{ border:1px solid var(--terracota); background:var(--terracota-luz); border-radius:var(--r-card); padding:26px }
.err h3{ color:var(--terracota) }
.err p{ font-size:14.5px; color:var(--tinta-2) }

.deriva{
  background:transparent; border:0; border-radius:0;
  box-shadow:none; text-align:left; padding:0; margin:60px auto;
}
.deriva p{ color:var(--tinta-2) }

.ir-app{
  background:transparent; border:0; border-top:1px solid var(--linea);
  border-radius:0; padding:26px 0 0; margin-bottom:20px;
}
.ir-app p{ font-size:15.5px; color:var(--tinta-2) }
.vacia{ text-align:left; padding:56px 0 }
.vacia p{ color:var(--tinta-2); margin-inline:0 }

/* ------------------------------------------------------------
   PIE
   ------------------------------------------------------------ */
footer{ border-top:1px solid var(--linea-suave); margin-top:80px; padding:40px 24px; text-align:left }
footer .f-in{ max-width:1080px }
footer p{ font-size:12.5px; font-weight:400; color:var(--tinta-3); line-height:2 }
footer a{ color:var(--tinta-2); border-bottom:1px solid var(--linea) }
footer a:hover{ color:var(--oliva); border-bottom-color:var(--salvia) }

::selection{ background:var(--arena); color:var(--tinta) }
::-webkit-scrollbar{ width:12px; height:12px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:var(--mineral); border-radius:100px; border:4px solid var(--marfil) }
::-webkit-scrollbar-thumb:hover{ background:var(--salvia) }

/* ------------------------------------------------------------
   MÓVIL
   ------------------------------------------------------------ */
@media(max-width:620px){
  .lienzo{ padding:0 22px 100px }
  .barra-in{ padding:15px 22px; gap:14px }
  .portada{ padding:26px 0 44px }
  .portada-foto{ max-width:180px }
  .portada-foto img{ max-height:250px }
  .via{ padding:22px 22px }
  .q{ padding:38px 0 30px }
  .plan-cab{ padding:30px 24px; border-radius:18px }
  .dia{ padding:24px 22px }
  .sup{ padding:24px 22px }
  .precio-cuerpo{ padding:28px 22px }
  .precio-cab{ padding:26px 22px }
  .precio-pie{ padding:16px 22px }
  .app-diaria{ padding:26px 0 108px }
  .hoy-metas{ gap:26px }
  .meta-n{ font-size:25px }
  .peso-n{ font-size:38px }
  .comida.ahora{ margin-left:-22px; padding-left:20px }
  .hoy-acciones{ flex-direction:column }
  .hoy-acciones .ver-semana,.hoy-acciones .imprimir{ width:100%; justify-content:center }
  .agua-botones button{ flex:1 }
  .peso-form{ flex-direction:column }
  .peso-form .btn{ width:100%; justify-content:center }
}

@media print{
  body{ background:#fff !important }
  .plan-cab,.precio-cab,.manana{ background:#fff !important }
  .plan-cab h2,.plan-cab p,.plan-cab .eyebrow,.cifra .v,.cifra .l{ color:#000 !important }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* ------------------------------------------------------------
   AJUSTES MÓVIL PARA LA VISTA EDITORIAL
   ------------------------------------------------------------ */
@media(max-width:620px){
  .hoy-cab h2{ font-size:30px }
  .hoy-cab{ margin-bottom:38px }
  .seccion{ margin-bottom:40px }
  .hoy-metas{ gap:28px }
  .meta-n{ font-size:27px }
  .ahora-plato{ font-size:16.5px }
  .ahora-hora{ min-width:44px; font-size:14.5px }
  .ahora-btn{ width:100%; justify-content:center }
  .acompana{ padding:18px 20px; font-size:15px }
}

/* ============================================================
   INSTALADA EN EL TELÉFONO
   ------------------------------------------------------------
   Sin barra de navegador, la app toca los bordes de la pantalla.
   Hay que devolverle el aire que el navegador daba, y respetar
   la muesca y la barra de gestos del iPhone.
   ============================================================ */
body.instalada .barra{
  padding-top: env(safe-area-inset-top);
}
body.instalada .lienzo{
  padding-left:  max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
}
body.instalada .pestanas{
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
/* instalada, el pie sobra: nadie va a buscar los términos aquí */
body.instalada footer{ display:none }

/* ------------------------------------------------------------
   AVISO PARA INSTALAR
   Aparece una vez, abajo, sin tapar nada importante.
   ------------------------------------------------------------ */
.instalar{
  position:fixed; z-index:80;
  left:14px; right:14px;
  bottom:calc(88px + env(safe-area-inset-bottom));
  background:var(--n-90, #252622); color:var(--n-05, #F7F5F0);
  border-radius:var(--radio-tarjeta, 17px);
  padding:18px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  opacity:0; transform:translateY(10px);
  transition: opacity 200ms var(--curva, ease), transform 200ms var(--curva, ease);
  max-width:520px; margin:0 auto;
}
.instalar.viva{ opacity:1; transform:none }

.instalar-txt{ flex:1; min-width:200px }
.instalar-txt b{
  display:block; font-size:15.5px; font-weight:600;
  margin-bottom:3px; letter-spacing:-.015em;
}
.instalar-txt span{
  font-size:13.5px; line-height:1.55;
  color:rgba(247,245,240,.72);
}
.instalar-txt span b{
  display:inline; font-size:inherit; font-weight:600;
  color:var(--n-05, #F7F5F0); margin:0;
}

.instalar-btns{ display:flex; gap:8px; flex-shrink:0 }
.instalar-btns button{
  font-family:inherit; font-size:14px; font-weight:550;
  min-height:44px; padding:0 18px;
  border-radius:var(--radio-boton, 13px); cursor:pointer;
  transition: opacity 200ms var(--curva, ease);
}
.instalar-no{
  background:transparent; border:1px solid rgba(247,245,240,.26);
  color:rgba(247,245,240,.8);
}
.instalar-no:hover{ border-color:rgba(247,245,240,.5) }
.instalar-si{
  background:var(--n-05, #F7F5F0); border:0; color:var(--n-90, #252622);
}
.instalar-si:hover{ opacity:.9 }

@media(max-width:420px){
  .instalar{ flex-direction:column; align-items:stretch }
  .instalar-btns{ width:100% }
  .instalar-btns button{ flex:1 }
}

/* ============================================================
   PANTALLA DE CARGA
   ------------------------------------------------------------
   Lo que evita que parezca trabada: una barra que nunca se
   detiene y un paso que pulsa mientras el servidor trabaja.
   ============================================================ */
.carga{
  max-width:480px; margin:80px auto; text-align:left;
}
.carga h2{ margin-bottom:8px }

.carga-sub{
  font-size:15px; color:var(--texto-2, #6F726B);
  line-height:1.6; margin-bottom:30px;
}

/* la barra: se acerca al 92% y ahí se queda hasta que llega el plan */
.carga-barra{
  height:var(--marca-progreso, 3px);
  background:var(--linea, #DED7CD);
  border-radius:2px; overflow:hidden; margin-bottom:32px;
}
.carga-lleno{
  height:100%; width:0%;
  background:var(--acento, #7F8C76);
  border-radius:2px;
  transition: width 300ms linear;
}

/* los pasos */
.pasos{ display:flex; flex-direction:column }
.p-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--linea-suave, #E9E4DB);
  font-size:14.5px; font-weight:400;
  color:var(--texto-3, #9B9E97);
  transition: color 320ms var(--curva, ease);
}
.p-item:last-child{ border-bottom:0 }
.p-item .tic{
  width:18px; height:18px; flex-shrink:0;
  border:1px solid var(--linea, #DED7CD); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:transparent; background:transparent;
  transition: all 320ms var(--curva, ease);
}
.p-item.on{ color:var(--texto, #252622) }
.p-item.on .tic{
  background:var(--acento, #7F8C76);
  border-color:var(--acento, #7F8C76);
  color:var(--texto-inverso, #F7F5F0);
}

/* el paso en curso: pulsa mientras el servidor responde.
   Es la señal de vida que faltaba. */
.p-item.trabajando{ color:var(--texto, #252622) }
.p-item.trabajando .tic{
  border-color:var(--acento, #7F8C76);
  border-width:1.5px;
  animation: pulso 1.4s ease-in-out infinite;
}
@keyframes pulso{
  0%,100%{ opacity:1 }
  50%    { opacity:.35 }
}

/* aparece a los 25 segundos, no antes */
.carga-tarda{
  font-size:13.5px; line-height:1.65;
  color:var(--texto-3, #9B9E97);
  margin-top:26px; padding-top:20px;
  border-top:1px solid var(--linea-suave, #E9E4DB);
  max-width:46ch;
  opacity:0; height:0; overflow:hidden;
  transition: opacity 240ms var(--curva, ease);
}
.carga-tarda.viva{ opacity:1; height:auto; overflow:visible }

@media(max-width:620px){
  .carga{ margin:52px auto; max-width:100% }
}
@media (prefers-reduced-motion: reduce){
  .p-item.trabajando .tic{ animation:none; opacity:.6 }
  .carga-lleno{ transition:none }
}

/* ============================================================
   AJUSTES · agua, recetas, pestañas y gráfica
   ============================================================ */

/* ------------------------------------------------------------
   1 · BOTONES DE AGUA
   Antes eran contorno y no se leían como botones. Ahora van
   rellenos de azul: es la acción más repetida de la app.
   ------------------------------------------------------------ */
.agua-botones button{
  background:var(--hidrico, #7A9AA6) !important;
  border:0 !important;
  color:#fff !important;
  font-weight:600 !important;
  min-height:48px;
}
.agua-botones button:hover:not(:disabled){
  background:#6A8B97 !important;
  border:0 !important;
}
.agua-botones button:active:not(:disabled){ opacity:.82 }
.agua-botones button:disabled{
  background:#BBCDD3 !important; color:#fff !important;
  border:0 !important; opacity:1;
}
.agua-botones button::before{ background:#fff }

/* ------------------------------------------------------------
   2 · "CÓMO SE HACE"
   Antes era texto suelto con una flecha ▸. Ahora es un botón
   con contorno, con un triángulo que gira al abrir.
   ------------------------------------------------------------ */
.ver-prep{
  display:inline-flex !important; align-items:center; gap:8px;
  background:var(--superficie-alt, #ECE7DF) !important;
  border:1px solid var(--linea, #DED7CD) !important;
  border-radius:9px;
  padding:9px 14px !important;
  min-height:40px !important;
  font-size:12.5px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:var(--accion, #3F493B) !important;
  margin-top:10px;
  transition: background var(--dur,200ms) var(--curva,ease),
              border-color var(--dur,200ms) var(--curva,ease);
}
.ver-prep:hover{
  background:#E3DCD1 !important;
  border-color:var(--acento, #7F8C76) !important;
  color:var(--accion, #3F493B) !important;
}
.ver-prep:active{ opacity:.8 }
.ver-prep .ic{
  width:0; height:0; flex-shrink:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition: transform var(--dur,200ms) var(--curva,ease);
}
.ver-prep.abierto{
  background:var(--acento-luz, #EFF1ED) !important;
  border-color:var(--acento, #7F8C76) !important;
}
.ver-prep.abierto .ic{ transform:rotate(90deg) }

/* ------------------------------------------------------------
   3 · PESTAÑAS
   Cada sección con su color. No es decoración: le da a cada
   pantalla un lugar propio, y con el tiempo se navega por color
   sin leer la etiqueta.
   ------------------------------------------------------------ */
.pest{
  border-radius:10px;
  transition: color var(--dur,200ms) var(--curva,ease),
              background var(--dur,200ms) var(--curva,ease);
}
.pest.on{ font-weight:600 }

/* Hoy · oliva, el color de acción */
.pest:nth-child(1).on{
  color:var(--accion, #3F493B) !important;
  background:var(--acento-luz, #EFF1ED);
}
/* Súper · terracota, es salir a comprar */
.pest:nth-child(2).on{
  color:var(--alerta, #B96654) !important;
  background:var(--alerta-fondo, #F4E7E3);
}
/* Avance · verde éxito, es el progreso */
.pest:nth-child(3).on{
  color:#5E7456 !important;
  background:var(--exito-fondo, #EBF0E9);
}
/* Cálculo · azul, es el dato duro */
.pest:nth-child(4).on{
  color:var(--hidrico, #7A9AA6) !important;
  background:var(--hidrico-fondo, #EBF1F3);
}

/* ------------------------------------------------------------
   4 · GRÁFICA DE PESO
   ------------------------------------------------------------ */
.gr-caja{ position:relative; margin:4px 0 2px }

.grafica{
  width:100%; height:170px; display:block; overflow:visible;
}

/* el área bajo la curva: muy tenue, solo para dar lectura rápida */
.gr-area{ fill:var(--acento, #7F8C76); opacity:.07; stroke:none }

/* la línea del peso inicial: de dónde partió */
.gr-inicial{
  stroke:var(--linea, #DED7CD); stroke-width:1;
  stroke-dasharray:4 5;
}

.gr-linea{
  fill:none; stroke:var(--acento, #7F8C76); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect: non-scaling-stroke;
}
.gr-punto{
  fill:var(--superficie, #FCFBF8);
  stroke:var(--acento, #7F8C76); stroke-width:2;
  vector-effect: non-scaling-stroke;
}
.gr-punto-ult{ fill:var(--acento, #7F8C76); stroke:var(--superficie, #FCFBF8) }

/* si va bajando, la curva toma el verde de éxito */
.gr-baja .gr-linea,
.gr-baja .gr-punto{ stroke:var(--exito, #829B7B) }
.gr-baja .gr-punto-ult{ fill:var(--exito, #829B7B) }
.gr-baja .gr-area{ fill:var(--exito, #829B7B) }

.gr-escala{
  position:absolute; top:10px; right:0; bottom:26px;
  display:flex; flex-direction:column; justify-content:space-between;
  font-size:11px; font-weight:500; color:var(--texto-3, #9B9E97);
  pointer-events:none; text-align:right;
  font-variant-numeric: tabular-nums;
}

.gr-fechas{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11.5px; font-weight:500; color:var(--texto-3, #9B9E97);
  margin-top:6px;
}
.gr-registros{ font-size:11px; color:var(--texto-3, #9B9E97) }

.gr-vacia{
  padding:34px 20px; text-align:center;
  font-size:14px; line-height:1.65; color:var(--texto-2, #6F726B);
  border:1px dashed var(--linea, #DED7CD);
  border-radius:var(--radio-campo, 12px);
}

/* el botón de registrar, mientras guarda */
.peso-form .btn:disabled{
  background:var(--accion-inactiva, #DED7CD) !important;
  color:var(--texto-3, #9B9E97) !important;
}

/* ============================================================
   CARGA · versión definitiva
   ------------------------------------------------------------
   Va al final del archivo y con !important a propósito: esta
   pantalla es lo único que la persona ve durante 30 segundos y
   no puede depender de qué regla gane.

   Dos señales de movimiento, no una:
   · la barra que avanza (la mueve el JS)
   · un brillo que la recorre siempre, aunque el ancho no cambie
   Con las dos, es imposible que parezca trabada.
   ============================================================ */
.carga{
  max-width:480px !important;
  margin:70px auto !important;
  text-align:left !important;
  padding:0 !important;
}
.carga h2{
  font-size:29px !important; font-weight:600 !important;
  letter-spacing:-.026em !important; margin-bottom:10px !important;
  color:#252622 !important;
}
.carga-sub{
  font-size:15px !important; color:#6F726B !important;
  line-height:1.6 !important; margin-bottom:28px !important;
}

.carga-barra{
  position:relative !important;
  height:4px !important;
  background:#DED7CD !important;
  border-radius:3px !important;
  overflow:hidden !important;
  margin-bottom:30px !important;
  width:100% !important;
}
.carga-lleno{
  position:relative !important;
  height:100% !important;
  width:0%;
  background:#7F8C76 !important;
  border-radius:3px !important;
  transition: width 320ms linear !important;
}
/* el brillo que recorre la barra: prueba de que sigue viva
   aunque el porcentaje casi no se mueva */
.carga-barra::after{
  content:'' !important;
  position:absolute !important; top:0; bottom:0; left:0;
  width:38% !important;
  background:linear-gradient(90deg,
    transparent, rgba(127,140,118,.55), transparent) !important;
  animation: recorre 1.6s ease-in-out infinite !important;
}
@keyframes recorre{
  0%   { transform:translateX(-100%) }
  100% { transform:translateX(360%) }
}

.pasos{ display:flex !important; flex-direction:column !important }
.p-item{
  display:flex !important; align-items:center !important; gap:14px !important;
  padding:14px 0 !important;
  border-bottom:1px solid #E9E4DB !important;
  font-size:14.5px !important; font-weight:400 !important;
  color:#9B9E97 !important;
  transition: color 320ms cubic-bezier(.4,0,.2,1) !important;
}
.p-item:last-child{ border-bottom:0 !important }
.p-item .tic{
  width:19px !important; height:19px !important; flex-shrink:0 !important;
  border:1px solid #DED7CD !important; border-radius:50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:10px !important; color:transparent !important;
  background:transparent !important;
  transition: all 320ms cubic-bezier(.4,0,.2,1) !important;
}
.p-item.on{ color:#252622 !important }
.p-item.on .tic{
  background:#7F8C76 !important; border-color:#7F8C76 !important;
  color:#F7F5F0 !important;
}

/* el paso en curso: el aro late mientras el servidor responde */
.p-item.trabajando{ color:#252622 !important; font-weight:500 !important }
.p-item.trabajando .tic{
  border:2px solid #7F8C76 !important;
  animation: late 1.3s ease-in-out infinite !important;
}
@keyframes late{
  0%,100%{ opacity:1;  transform:scale(1) }
  50%    { opacity:.4; transform:scale(.86) }
}

.carga-tarda{
  font-size:13.5px !important; line-height:1.65 !important;
  color:#9B9E97 !important;
  margin:0 !important; padding:0 !important;
  border-top:0 !important;
  max-width:46ch !important;
  opacity:0 !important; height:0 !important; overflow:hidden !important;
  transition: opacity 240ms ease !important;
}
.carga-tarda.viva{
  opacity:1 !important; height:auto !important; overflow:visible !important;
  margin-top:24px !important; padding-top:20px !important;
  border-top:1px solid #E9E4DB !important;
}

@media(max-width:620px){
  .carga{ margin:44px auto !important; max-width:100% !important }
  .carga h2{ font-size:27px !important }
}
@media (prefers-reduced-motion: reduce){
  .carga-barra::after{ display:none !important }
  .p-item.trabajando .tic{ animation:none !important; opacity:.65 !important }
}

/* ============================================================
   LOS TRES CAMBIOS PEDIDOS · versión definitiva
   ------------------------------------------------------------
   Va hasta el final del archivo. Todo con !important porque
   estas reglas deben ganar contra cualquier cosa anterior.
   ============================================================ */

/* ------------------------------------------------------------
   1 · BOTONES DE AGUA — azul sólido
   ------------------------------------------------------------ */
.agua-botones{
  display:flex !important; gap:10px !important; margin-top:16px !important;
}
.agua-botones button{
  flex:1 !important;
  min-height:48px !important;
  border-radius:13px !important;
  background:#7A9AA6 !important;
  border:0 !important;
  color:#FFFFFF !important;
  font-family:'Manrope', -apple-system, sans-serif !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition: background 200ms ease !important;
}
.agua-botones button:hover:not(:disabled){
  background:#688A97 !important;
  transform:none !important;
}
.agua-botones button:active:not(:disabled){ opacity:.85 !important }
.agua-botones button:disabled{
  background:#C2D3D8 !important;
  color:#FFFFFF !important;
  cursor:not-allowed !important;
  opacity:1 !important;
}
.agua-botones button::before{
  content:'' !important;
  width:15px !important; height:15px !important;
  flex-shrink:0 !important;
  background:#FFFFFF !important;
  -webkit-mask-size:contain !important; mask-size:contain !important;
  -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important; mask-position:center !important;
}
.agua-botones button:first-child::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
}
.agua-botones button:last-child::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
}

/* la barra y el contador, en azul */
.agua-barra{ height:4px !important; background:#C9DBE0 !important }
.agua-lleno{ background:#7A9AA6 !important }
.agua-vasos{
  font-family:'Manrope', -apple-system, sans-serif !important;
  font-size:13px !important; font-weight:600 !important;
  color:#5E7C87 !important; letter-spacing:0 !important;
}

/* ------------------------------------------------------------
   2 · "CÓMO SE HACE" — botón gris claro con contorno
   ------------------------------------------------------------ */
.ver-prep{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  background:#ECE7DF !important;
  border:1px solid #DED7CD !important;
  border-radius:10px !important;
  padding:10px 16px !important;
  min-height:42px !important;
  margin-top:12px !important;
  font-family:'Manrope', -apple-system, sans-serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#3F493B !important;
  cursor:pointer !important;
  transition: background 200ms ease, border-color 200ms ease !important;
}
.ver-prep:hover{
  background:#E2DACE !important;
  border-color:#7F8C76 !important;
  color:#3F493B !important;
}
.ver-prep:active{ opacity:.82 !important }
.ver-prep .ic{
  width:0 !important; height:0 !important;
  flex-shrink:0 !important;
  font-size:0 !important;
  border-left:5px solid #7F8C76 !important;
  border-top:4px solid transparent !important;
  border-bottom:4px solid transparent !important;
  border-right:0 !important;
  background:none !important;
  transition: transform 200ms ease !important;
}
.ver-prep.abierto{
  background:#EFF1ED !important;
  border-color:#7F8C76 !important;
}
.ver-prep.abierto .ic{ transform:rotate(90deg) !important }

/* ------------------------------------------------------------
   3 · PESTAÑAS — cada una con su color
   ------------------------------------------------------------ */
.pest{
  border-radius:11px !important;
  font-family:'Manrope', -apple-system, sans-serif !important;
  font-size:11px !important;
  font-weight:500 !important;
  color:#9B9E97 !important;
  background:transparent !important;
  border:0 !important;
  transition: color 200ms ease, background 200ms ease !important;
}
.pest.on{ font-weight:600 !important }

/* Hoy · verde oliva */
.pest:nth-child(1).on{
  color:#3F493B !important;
  background:#E4E8E0 !important;
}
/* Súper · terracota */
.pest:nth-child(2).on{
  color:#A85A49 !important;
  background:#F4E7E3 !important;
}
/* Avance · verde salvia */
.pest:nth-child(3).on{
  color:#5E7456 !important;
  background:#EBF0E9 !important;
}
/* Cálculo · azul agua */
.pest:nth-child(4).on{
  color:#5E7C87 !important;
  background:#EBF1F3 !important;
}

/* ============================================================
   BOTONES CON PESO · última capa
   ------------------------------------------------------------
   Los botones anteriores eran demasiado suaves y no se leían
   como botones. Aquí van sólidos, con su color de marca al
   100% y texto blanco.
   ============================================================ */

/* ------------------------------------------------------------
   1 · AGUA — azul sólido, ambos botones
   ------------------------------------------------------------ */
.agua{
  background:#E4EEF1 !important;
  border:0 !important;
  border-left:3px solid #5E7C87 !important;
  border-radius:17px !important;
}
.agua-cab span:first-child{ color:#252622 !important; font-weight:600 !important }
.agua-cab span:first-child::before{ background:#5E7C87 !important }
.agua-vasos{ color:#5E7C87 !important; font-weight:700 !important }
.agua-barra{ height:5px !important; background:#BDD3DA !important }
.agua-lleno{ background:#5E7C87 !important }

.agua-botones button{
  flex:1 !important;
  min-height:50px !important;
  border-radius:13px !important;
  background:#5E7C87 !important;
  border:0 !important;
  color:#FFFFFF !important;
  font-family:'Manrope', -apple-system, sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:-.005em !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition: background 200ms ease !important;
}
.agua-botones button:hover:not(:disabled){ background:#4C6672 !important }
.agua-botones button:active:not(:disabled){ opacity:.85 !important }
.agua-botones button:disabled{
  background:#A9C0C8 !important; color:#FFFFFF !important;
  cursor:not-allowed !important; opacity:1 !important;
}
.agua-botones button::before{ background:#FFFFFF !important; width:16px !important; height:16px !important }

/* ------------------------------------------------------------
   2 · "CÓMO SE HACE" — oliva sólido, letra blanca
   ------------------------------------------------------------ */
.ver-prep{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  background:#3F493B !important;
  border:0 !important;
  border-radius:11px !important;
  padding:11px 18px !important;
  min-height:44px !important;
  margin-top:12px !important;
  font-family:'Manrope', -apple-system, sans-serif !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  letter-spacing:-.005em !important;
  text-transform:none !important;
  color:#FFFFFF !important;
  cursor:pointer !important;
  transition: background 200ms ease !important;
}
.ver-prep:hover{ background:#2E3629 !important; color:#FFFFFF !important; border:0 !important }
.ver-prep:active{ opacity:.85 !important }
.ver-prep .ic{
  width:0 !important; height:0 !important; flex-shrink:0 !important;
  font-size:0 !important;
  border-left:5px solid #FFFFFF !important;
  border-top:4px solid transparent !important;
  border-bottom:4px solid transparent !important;
  border-right:0 !important;
  background:none !important;
  transition: transform 200ms ease !important;
}
.ver-prep.abierto{ background:#7F8C76 !important; border:0 !important }
.ver-prep.abierto .ic{ transform:rotate(90deg) !important; border-left-color:#FFFFFF !important }

/* ------------------------------------------------------------
   3 · PESTAÑAS — la activa se pinta sólida, letra blanca
   ------------------------------------------------------------ */
.pestanas{
  gap:7px !important;
  padding:10px 12px !important;
  padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;
}
.pest{
  border:0 !important;
  border-radius:12px !important;
  background:transparent !important;
  padding:11px 4px !important;
  min-height:60px !important;
  gap:6px !important;
  font-family:'Manrope', -apple-system, sans-serif !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  color:#8E918A !important;
  transition: background 200ms ease, color 200ms ease !important;
}
.pest.on{ color:#FFFFFF !important; font-weight:700 !important }

/* Hoy · oliva carbón */
.pest:nth-child(1).on{ background:#3F493B !important }
/* Súper · terracota */
.pest:nth-child(2).on{ background:#B96654 !important }
/* Avance · verde salvia */
.pest:nth-child(3).on{ background:#7F8C76 !important }
/* Cálculo · azul agua */
.pest:nth-child(4).on{ background:#5E7C87 !important }

/* el ícono toma el color del texto: blanco cuando está activa */
.pest.on::before{ background:#FFFFFF !important }

/* ------------------------------------------------------------
   4 · LA FECHA — cápsula sólida, como pediste
   ------------------------------------------------------------ */
.hoy-fecha{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  background:#3F493B !important;
  color:#FFFFFF !important;
  border:0 !important;
  border-radius:100px !important;
  padding:8px 18px !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  margin-bottom:14px !important;
}
.hoy-fecha::first-letter{ text-transform:uppercase }

/* ------------------------------------------------------------
   5 · REGISTRAR PESO — salvia sólido
   ------------------------------------------------------------ */
.peso-form .btn{
  background:#7F8C76 !important;
  color:#FFFFFF !important;
  font-weight:700 !important;
  border:0 !important;
}
.peso-form .btn:hover{ background:#6E7B66 !important }

/* ------------------------------------------------------------
   6 · "VER MIS 7 DÍAS" e "IMPRIMIR"
   ------------------------------------------------------------ */
.ver-semana{
  background:#3F493B !important;
  color:#FFFFFF !important;
  font-weight:700 !important;
  border:0 !important;
}
.ver-semana:hover{ background:#2E3629 !important; color:#FFFFFF !important }
.ver-semana::before{ background:#FFFFFF !important }

.imprimir{
  background:transparent !important;
  border:1.5px solid #3F493B !important;
  color:#3F493B !important;
  font-weight:700 !important;
}
.imprimir:hover{ background:#3F493B !important; color:#FFFFFF !important }
.imprimir:hover::before{ background:#FFFFFF !important }

/* ------------------------------------------------------------
   7 · BOTÓN PRINCIPAL — un punto más de peso
   ------------------------------------------------------------ */
.btn{ font-weight:650 !important }
.ahora-btn{ font-weight:700 !important }

/* ============================================================
   PALETA OFICIAL NUTRIARY · capa final
   ------------------------------------------------------------
   Los cuatro colores de la marca, los mismos de los PDFs que
   Ariana entrega a sus pacientes:

     #86927d  verde salvia   · el color de la marca
     #444343  gris carbón    · texto y acción
     #dbcfc0  arena          · superficies suaves
     #ddd8d8  gris claro     · líneas y fondos

   De ahí se derivan los tonos oscuros para los botones sólidos.
   Nada inventado: todo sale de esos cuatro.
   ============================================================ */
:root{
  --marca:        #86927D;
  --marca-oscuro: #6B7663;   /* salvia bajado, para hover */
  --marca-claro:  #E8EBE4;   /* salvia al 15%, para fondos */

  --carbon:       #444343;
  --carbon-oscuro:#2E2D2D;

  --arena-of:     #DBCFC0;
  --gris-of:      #DDD8D8;

  --agua-of:      #5E7C87;   /* azul, el único fuera de la paleta:
                                el agua necesita leerse distinto */
  --agua-oscuro:  #4A636D;
}

/* ------------------------------------------------------------
   1 · "CÓMO SE HACE" — salvia sólido, letra blanca
   ------------------------------------------------------------ */
.ver-prep,
button.ver-prep{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  background-color:#86927D !important;
  background-image:none !important;
  border:0 !important;
  border-radius:11px !important;
  padding:12px 20px !important;
  min-height:46px !important;
  margin-top:12px !important;
  font-family:'Manrope', -apple-system, sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#FFFFFF !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition: background-color 200ms ease !important;
}
.ver-prep:hover,
button.ver-prep:hover{
  background-color:#6B7663 !important;
  color:#FFFFFF !important;
  border:0 !important;
}
.ver-prep:active{ opacity:.85 !important }

.ver-prep .ic{
  width:0 !important; height:0 !important;
  flex-shrink:0 !important; font-size:0 !important;
  border-left:6px solid #FFFFFF !important;
  border-top:4.5px solid transparent !important;
  border-bottom:4.5px solid transparent !important;
  border-right:0 !important;
  background:none !important;
  transition: transform 200ms ease !important;
}
/* abierto: carbón, para que se distinga del cerrado */
.ver-prep.abierto,
button.ver-prep.abierto{
  background-color:#444343 !important;
  color:#FFFFFF !important;
}
.ver-prep.abierto .ic{
  transform:rotate(90deg) !important;
  border-left-color:#FFFFFF !important;
}

/* la receta desplegada: bloque de arena, no texto suelto */
.prep{
  font-size:14.5px !important;
  line-height:1.65 !important;
  color:#444343 !important;
  background:#F1EBE3 !important;
  border-left:3px solid #86927D !important;
  border-radius:0 10px 10px 0 !important;
}
.prep.abierta{
  padding:16px 18px !important;
  margin-top:10px !important;
}

/* ------------------------------------------------------------
   2 · PESTAÑAS — cada una sólida, letra blanca
   ------------------------------------------------------------ */
.pestanas{
  background:#FAF8F5 !important;
  border-top:1px solid #DDD8D8 !important;
  gap:6px !important;
  padding:9px 10px !important;
  padding-bottom:calc(9px + env(safe-area-inset-bottom)) !important;
}
.pest,
button.pest{
  border:0 !important;
  border-radius:12px !important;
  background-color:transparent !important;
  padding:11px 4px !important;
  min-height:60px !important;
  gap:6px !important;
  font-family:'Manrope', -apple-system, sans-serif !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  color:#8A8888 !important;
  transition: background-color 200ms ease, color 200ms ease !important;
}
.pest::before{ background-color:currentColor !important }

/* Hoy · salvia, el color de la marca */
.pest:nth-child(1).on,
button.pest:nth-child(1).on{
  background-color:#86927D !important;
  color:#FFFFFF !important; font-weight:700 !important;
}
/* Súper · carbón */
.pest:nth-child(2).on,
button.pest:nth-child(2).on{
  background-color:#444343 !important;
  color:#FFFFFF !important; font-weight:700 !important;
}
/* Avance · salvia oscuro */
.pest:nth-child(3).on,
button.pest:nth-child(3).on{
  background-color:#6B7663 !important;
  color:#FFFFFF !important; font-weight:700 !important;
}
/* Cálculo · azul agua */
.pest:nth-child(4).on,
button.pest:nth-child(4).on{
  background-color:#5E7C87 !important;
  color:#FFFFFF !important; font-weight:700 !important;
}
.pest.on::before{ background-color:#FFFFFF !important }

/* ------------------------------------------------------------
   3 · AGUA — azul sólido
   ------------------------------------------------------------ */
.agua{
  background-color:#E7EDEF !important;
  border:0 !important;
  border-left:4px solid #5E7C87 !important;
  border-radius:17px !important;
}
.agua-cab span:first-child{ color:#444343 !important; font-weight:600 !important }
.agua-cab span:first-child::before{ background-color:#5E7C87 !important }
.agua-vasos{ color:#5E7C87 !important; font-weight:700 !important }
.agua-barra{ height:5px !important; background-color:#C4D6DC !important }
.agua-lleno{ background-color:#5E7C87 !important }

.agua-botones button{
  flex:1 !important; min-height:50px !important;
  border-radius:13px !important;
  background-color:#5E7C87 !important;
  border:0 !important; color:#FFFFFF !important;
  font-family:'Manrope', -apple-system, sans-serif !important;
  font-size:15px !important; font-weight:700 !important;
  display:inline-flex !important; align-items:center !important;
  justify-content:center !important; gap:9px !important;
  box-shadow:none !important; cursor:pointer !important;
}
.agua-botones button:hover:not(:disabled){ background-color:#4A636D !important }
.agua-botones button:disabled{
  background-color:#B3C7CE !important; color:#FFFFFF !important; opacity:1 !important;
}
.agua-botones button::before{
  background-color:#FFFFFF !important;
  width:16px !important; height:16px !important;
}

/* ------------------------------------------------------------
   4 · FECHA, BOTONES Y ACENTOS
   ------------------------------------------------------------ */
.hoy-fecha{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  background-color:#86927D !important; color:#FFFFFF !important;
  border:0 !important; border-radius:100px !important;
  padding:8px 18px !important;
  font-size:12.5px !important; font-weight:700 !important;
  letter-spacing:.03em !important; text-transform:none !important;
  margin-bottom:14px !important;
}
.hoy-fecha::first-letter{ text-transform:uppercase }

.btn{
  background-color:#444343 !important; color:#FFFFFF !important;
  font-weight:700 !important; border:0 !important;
}
.btn:hover{ background-color:#2E2D2D !important }
.btn:disabled{ background-color:#DDD8D8 !important; color:#8A8888 !important }

.ver-semana{
  background-color:#86927D !important; color:#FFFFFF !important;
  font-weight:700 !important; border:0 !important;
}
.ver-semana:hover{ background-color:#6B7663 !important; color:#FFFFFF !important }
.ver-semana::before{ background-color:#FFFFFF !important }

.imprimir{
  background-color:transparent !important;
  border:2px solid #444343 !important;
  color:#444343 !important; font-weight:700 !important;
}
.imprimir:hover{ background-color:#444343 !important; color:#FFFFFF !important }
.imprimir:hover::before{ background-color:#FFFFFF !important }

.peso-form .btn{ background-color:#86927D !important }
.peso-form .btn:hover{ background-color:#6B7663 !important }

/* etiquetas de sección en salvia */
.seccion-t,
.eyebrow,
.pasillo-lista .pn,
.swap .g{ color:#86927D !important; font-weight:700 !important }

/* la comida de ahorita */
.comida.ahora{ border-left:3px solid #86927D !important }
.ahorita{
  background-color:#86927D !important; color:#FFFFFF !important;
  border:0 !important; font-weight:700 !important;
}
.comida.hecha .palomea{
  background-color:#86927D !important; border-color:#86927D !important;
}

/* mensaje de acompañamiento, en arena */
.acompana{ background-color:#EFE8DF !important; color:#444343 !important }

/* texto general al carbón de la marca */
body, .comida-plato, .ahora-plato, .tiempo .plato{ color:#444343 !important }
h1, h2, h3{ color:#444343 !important }

/* ============================================================
   CONTRASTE · regla no negociable
   ------------------------------------------------------------
   NUNCA texto oscuro sobre fondo oscuro.

   Todo bloque con fondo verde o carbón lleva su texto en marfil.
   Esto va al final del archivo y con !important a propósito:
   es una regla de legibilidad, no de estilo, y debe ganarle a
   cualquier cosa escrita antes — incluida la mía.
   ============================================================ */

/* --- cabecera del plan, cabecera de precio, bloque de mañana --- */
.plan-cab,
.plan-cab *,
.precio-cab,
.precio-cab *,
.manana,
.manana *{
  color:#F7F5F0 !important;
}
.plan-cab h2,
.precio-cab h2,
.plan-cab h1,
.plan-cab h3{
  color:#FFFFFF !important;
}
.plan-cab .eyebrow,
.precio-cab .eyebrow,
.man-eyebrow{
  color:rgba(247,245,240,.62) !important;
}
.plan-cab p,
.precio-cab p,
.man-tip{
  color:rgba(247,245,240,.82) !important;
}
.cifra .v{ color:#FFFFFF !important }
.cifra .l{ color:rgba(247,245,240,.6) !important }
.cifras{ border-top-color:rgba(247,245,240,.18) !important }

.man-hora{ color:rgba(247,245,240,.6) !important }
.man-plato{ color:rgba(247,245,240,.92) !important }
.man-fila{ border-bottom-color:rgba(247,245,240,.14) !important }
.man-toggle{
  color:#FFFFFF !important;
  border-color:rgba(247,245,240,.28) !important;
  background:transparent !important;
}
.man-toggle:hover{ background:rgba(247,245,240,.1) !important }

/* --- aviso de instalación, que también va sobre oscuro --- */
.instalar, .instalar *{ color:#F7F5F0 !important }
.instalar-txt b{ color:#FFFFFF !important }
.instalar-txt span{ color:rgba(247,245,240,.74) !important }
.instalar-si{ background:#F7F5F0 !important; color:#252622 !important }

/* --- cualquier botón sólido: su texto es blanco, siempre --- */
.btn,
.ver-semana,
.ver-prep,
.agua-botones button,
.pest.on,
.hoy-fecha,
.ahorita,
.peso-form .btn{
  color:#FFFFFF !important;
}

/* ============================================================
   "CÓMO SE HACE" · sólido, se ve o no existe
   ------------------------------------------------------------
   Va otra vez aquí, al final del todo, para que no haya forma
   de que otra regla lo apague.
   ============================================================ */
.ver-prep,
button.ver-prep,
.tiempo .ver-prep,
.comida .ver-prep{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  background:#86927D !important;
  background-color:#86927D !important;
  background-image:none !important;
  border:0 !important;
  border-radius:11px !important;
  padding:12px 20px !important;
  min-height:46px !important;
  margin-top:12px !important;
  font-family:'Manrope', -apple-system, sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#FFFFFF !important;
  cursor:pointer !important;
  box-shadow:none !important;
  opacity:1 !important;
}
.ver-prep:hover,
button.ver-prep:hover{
  background:#6B7663 !important;
  background-color:#6B7663 !important;
  color:#FFFFFF !important;
}
.ver-prep.abierto,
button.ver-prep.abierto{
  background:#444343 !important;
  background-color:#444343 !important;
  color:#FFFFFF !important;
}
.ver-prep .ic{
  display:inline-block !important;
  width:0 !important; height:0 !important;
  flex-shrink:0 !important; font-size:0 !important;
  border-left:6px solid #FFFFFF !important;
  border-top:4.5px solid transparent !important;
  border-bottom:4.5px solid transparent !important;
  border-right:0 !important;
  background:none !important;
  transition: transform 200ms ease !important;
}
.ver-prep.abierto .ic{ transform:rotate(90deg) !important }

/* la receta abierta */
.prep{
  font-size:14.5px !important;
  line-height:1.65 !important;
  color:#444343 !important;
  background:#F1EBE3 !important;
  border-left:3px solid #86927D !important;
  border-radius:0 10px 10px 0 !important;
}
.prep.abierta{
  padding:16px 18px !important;
  margin-top:10px !important;
  max-height:600px !important;
  opacity:1 !important;
}

/* ============================================================
   "CÓMO SE HACE" · estados claros
   ------------------------------------------------------------
   Tres estados, tres colores, sin ambigüedad:
     cerrado  · salvia
     abierto  · carbón
     con foco · salvia + anillo (accesibilidad de teclado)
   El foco NO debe verse como un tercer estilo permanente: en la
   captura anterior parecía que había tres botones distintos.
   ============================================================ */
.ver-prep:focus{ outline:none !important }
.ver-prep:focus-visible{
  outline:2px solid #444343 !important;
  outline-offset:3px !important;
}

/* ============================================================
   RECETARIO
   ------------------------------------------------------------
   Cada receta es una tarjeta que se abre. Cerrada muestra el
   nombre y los datos (tiempo, porciones, kcal); abierta muestra
   los ingredientes en dos columnas y los pasos.
   ============================================================ */
.recetas{ display:flex; flex-direction:column; gap:2px }

.receta{
  border-bottom:1px solid #E9E4DB;
  padding-bottom:4px;
}
.receta:last-child{ border-bottom:0 }

.rec-cab{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  width:100% !important;
  background:transparent !important;
  border:0 !important;
  padding:16px 0 6px !important;
  cursor:pointer !important;
  text-align:left !important;
  font-family:'Manrope', -apple-system, sans-serif !important;
  min-height:auto !important;
}
.rec-nom{
  font-size:16.5px; font-weight:600; line-height:1.4;
  color:#444343; letter-spacing:-.012em;
  flex:1;
}
.rec-cab:hover .rec-nom{ color:#86927D }

/* la flecha: triángulo que gira al abrir */
.rec-flecha{
  width:0; height:0; flex-shrink:0;
  border-left:6px solid #86927D;
  border-top:4.5px solid transparent;
  border-bottom:4.5px solid transparent;
  transition: transform 200ms cubic-bezier(.4,0,.2,1);
}
.rec-cab.abierta .rec-flecha{ transform:rotate(90deg) }
.rec-cab:focus{ outline:none }
.rec-cab:focus-visible{ outline:2px solid #86927D; outline-offset:3px }

/* los datos: tiempo, porciones, kcal, días */
.rec-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding-bottom:14px;
}
.rec-dato{
  font-size:11.5px; font-weight:600; letter-spacing:.02em;
  color:#6B7663; background:#E8EBE4;
  padding:4px 10px; border-radius:6px;
}
.rec-dias{
  font-size:12px; font-weight:500; color:#9B9E97;
  margin-left:auto;
}

/* el cuerpo, cerrado por defecto */
.rec-cuerpo{
  max-height:0; overflow:hidden; opacity:0;
  transition: max-height 300ms cubic-bezier(.4,0,.2,1),
              opacity 200ms, padding 300ms, margin 300ms;
  background:#F1EBE3;
  border-left:3px solid #86927D;
  border-radius:0 10px 10px 0;
  padding:0 18px;
}
.rec-cuerpo.abierta{
  max-height:800px; opacity:1;
  padding:18px; margin-bottom:16px;
}

.rec-bloque{ margin-bottom:16px }
.rec-bloque:last-child{ margin-bottom:0 }
.rec-t{
  font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#86927D; margin-bottom:8px;
}

.rec-ing{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:22px;
}
@media(max-width:560px){ .rec-ing{ columns:1 } }
.rec-ing li{
  font-size:14.5px; line-height:1.5; color:#444343;
  padding:4px 0 4px 15px; position:relative;
  break-inside:avoid;
}
.rec-ing li::before{
  content:''; position:absolute; left:0; top:12px;
  width:6px; height:1.5px; background:#86927D; border-radius:1px;
}

.rec-pasos{
  font-size:14.5px; line-height:1.7; color:#444343; margin:0;
}

/* ------------------------------------------------------------
   LA QUINTA PESTAÑA
   Con cinco ya no caben igual: se ajusta el tamaño.
   ------------------------------------------------------------ */
.pestanas{
  grid-template-columns:repeat(5,1fr) !important;
  gap:4px !important;
  padding:9px 8px !important;
  padding-bottom:calc(9px + env(safe-area-inset-bottom)) !important;
}
.pest{
  font-size:10.5px !important;
  padding:10px 2px !important;
  gap:5px !important;
}
.pest::before{ width:20px !important; height:20px !important }

/* ícono del recetario: un libro abierto */
.pest:nth-child(2)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10.5 5 8.5 4.3 4 4.5v13c4.5-.2 6.5.5 8 2 1.5-1.5 3.5-2.2 8-2v-13c-4.5-.2-6.5.5-8 2z'/%3E%3Cpath d='M12 6.5v14'/%3E%3C/svg%3E") !important;
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10.5 5 8.5 4.3 4 4.5v13c4.5-.2 6.5.5 8 2 1.5-1.5 3.5-2.2 8-2v-13c-4.5-.2-6.5.5-8 2z'/%3E%3Cpath d='M12 6.5v14'/%3E%3C/svg%3E") !important;
}
/* los demás se recorren un lugar */
.pest:nth-child(3)::before{
  -webkit-mask-image:var(--i-super) !important; mask-image:var(--i-super) !important;
}
.pest:nth-child(4)::before{
  -webkit-mask-image:var(--i-progreso) !important; mask-image:var(--i-progreso) !important;
}
.pest:nth-child(5)::before{
  -webkit-mask-image:var(--i-calculo) !important; mask-image:var(--i-calculo) !important;
}

/* colores de las cinco */
.pest:nth-child(1).on{ background-color:#86927D !important; color:#FFFFFF !important }
.pest:nth-child(2).on{ background-color:#6B7663 !important; color:#FFFFFF !important }
.pest:nth-child(3).on{ background-color:#444343 !important; color:#FFFFFF !important }
.pest:nth-child(4).on{ background-color:#5E7C87 !important; color:#FFFFFF !important }
.pest:nth-child(5).on{ background-color:#8A8570 !important; color:#FFFFFF !important }
.pest.on::before{ background-color:#FFFFFF !important }

@media(max-width:400px){
  .pest{ font-size:9.5px !important }
  .pest::before{ width:19px !important; height:19px !important }
}

/* ============================================================
   BARRA DE PESTAÑAS · cinco en fila, definitivo
   ------------------------------------------------------------
   Va al final del archivo. La cuadrícula estaba definida a 4
   columnas en varios lugares del CSS y la quinta pestaña se
   caía a un segundo renglón.
   ============================================================ */
.pestanas{
  display:grid !important;
  grid-template-columns:repeat(5, 1fr) !important;
  grid-auto-rows:auto !important;
  gap:4px !important;
  align-items:stretch !important;
  padding:8px 6px !important;
  padding-bottom:calc(8px + env(safe-area-inset-bottom)) !important;
  background:#FAF8F5 !important;
  border-top:1px solid #DDD8D8 !important;
}
.pest{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  width:100% !important;
  min-width:0 !important;
  padding:10px 2px !important;
  min-height:58px !important;
  border:0 !important;
  border-radius:11px !important;
  background:transparent !important;
  font-family:'Manrope', -apple-system, sans-serif !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  color:#8A8888 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  cursor:pointer !important;
  transition:background-color 200ms ease, color 200ms ease !important;
}
.pest::before{
  width:20px !important; height:20px !important;
  flex-shrink:0 !important;
  background-color:currentColor !important;
}

/* los cinco colores */
.pest:nth-child(1).on{ background-color:#86927D !important; color:#FFFFFF !important; font-weight:700 !important }
.pest:nth-child(2).on{ background-color:#6B7663 !important; color:#FFFFFF !important; font-weight:700 !important }
.pest:nth-child(3).on{ background-color:#444343 !important; color:#FFFFFF !important; font-weight:700 !important }
.pest:nth-child(4).on{ background-color:#5E7C87 !important; color:#FFFFFF !important; font-weight:700 !important }
.pest:nth-child(5).on{ background-color:#8A8570 !important; color:#FFFFFF !important; font-weight:700 !important }
.pest.on::before{ background-color:#FFFFFF !important }

/* pantallas muy angostas: la letra se achica antes de romperse */
@media(max-width:380px){
  .pest{ font-size:9.5px !important; padding:9px 1px !important }
  .pest::before{ width:18px !important; height:18px !important }
  .pestanas{ gap:2px !important; padding:8px 4px !important }
}

/* ============================================================
   HISTORIAL DE PESOS
   ------------------------------------------------------------
   Una lista, no una tabla: en móvil las tablas se rompen.
   Tres columnas por renglón: fecha, kilos, y el cambio contra
   el registro anterior.
   ============================================================ */
.historial{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid #DDD8D8;
}
.hist-t{
  font-size:11.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  color:#86927D; margin-bottom:6px;
}

.hist-lista{ list-style:none; margin:0; padding:0 }

.hist-fila{
  display:flex; align-items:baseline; gap:12px;
  padding:13px 0;
  border-bottom:1px solid #EDE9E9;
  font-family:'Manrope', -apple-system, sans-serif;
}
.hist-fila:last-child{ border-bottom:0 }

/* el de hoy se marca con una barra a la izquierda */
.hist-hoy{
  border-left:3px solid #86927D;
  padding-left:12px;
  margin-left:-15px;
  background:#F4F6F2;
  border-radius:0 8px 8px 0;
}

.hist-fecha{
  font-size:14px; font-weight:500; color:#6F726B;
  flex:1; min-width:0;
}
.hist-hoy .hist-fecha{ color:#444343; font-weight:600 }

.hist-kg{
  font-size:16px; font-weight:700; color:#444343;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  flex-shrink:0;
}

.hist-dif{
  font-size:12px; font-weight:600;
  padding:3px 9px; border-radius:6px;
  flex-shrink:0; white-space:nowrap;
  min-width:74px; text-align:center;
  font-variant-numeric:tabular-nums;
}
/* bajó: verde éxito */
.hist-baja{ color:#5E7456; background:#EBF0E9 }
/* subió: gris, no rojo. Subir de peso no es un error. */
.hist-sube{ color:#6F726B; background:#EDE9E9 }
.hist-igual{ color:#9B9E97; background:#F3F1F1 }
.hist-primero{
  color:#86927D; background:#EFF1ED;
  font-weight:600; font-size:11px;
}

@media(max-width:420px){
  .hist-fila{ gap:8px; padding:12px 0 }
  .hist-fecha{ font-size:13px }
  .hist-kg{ font-size:15px }
  .hist-dif{ font-size:11px; min-width:66px; padding:3px 7px }
  .hist-primero{ font-size:10px }
}