/* Frescómetro: consulta del código de la cáscara + guía de lectura */
.fresh-page em{font-style:normal;color:#a74713;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.header .nav-cta[aria-current="page"]{color:#253b14;border-bottom:0;padding-bottom:13px;}

/* ---------- Consulta ---------- */
.fresh-tool{position:relative;overflow:hidden;display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:auto 1fr;gap:0 4%;align-items:end;padding:80px 6% 0;background:#e1edc9;min-height:640px;}
/* El título ocupa todo el ancho de la franja; el formulario y Pía van debajo, en dos columnas. */
.fresh-tool-head{grid-column:1/-1;align-self:start;}
/* min-width:0 evita que el ancho intrínseco del campo de texto (size) ensanche la cuadrícula y recorte el título en pantallas angostas. */
.fresh-tool-head,.fresh-tool-copy,.fresh-form,.fresh-field{min-width:0;}
.fresh-field input{min-width:0;}
.fresh-tool-copy{max-width:640px;padding-bottom:80px;align-self:start;}
.fresh-tool h1{font-size:clamp(50px,5.6vw,86px);line-height:1.03;letter-spacing:-.02em;color:var(--olive);}
.fresh-tool-copy>p{max-width:500px;margin:24px 0 34px;font-size:18px;}
@media (min-width:1001px){ .fresh-tool h1 br{display:none;} }

.fresh-form label{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);margin-bottom:12px;}
.fresh-field{display:flex;gap:10px;background:var(--cream);border-radius:999px;padding:7px;box-shadow:0 10px 24px #2d654414;max-width:520px;}
.fresh-field input{
  flex:1;min-width:0;border:0;background:transparent;padding:0 22px;border-radius:999px;
  font-size:26px;letter-spacing:.14em;text-transform:uppercase;color:var(--brown);
}
.fresh-field input::placeholder{text-transform:none;color:#61340855;letter-spacing:.04em;font-size:22px;}
.fresh-field input:focus{outline:none;}
.fresh-field:focus-within{box-shadow:0 0 0 3px #b34308,0 10px 24px #2d654414;}
.fresh-field input[aria-invalid="true"]{color:#a13a10;}
.fresh-field .button{border:0;cursor:pointer;padding:15px 26px;}
.fresh-field .button:focus-visible{outline:3px solid #b34308;outline-offset:3px;}
.fresh-help{display:block;margin-top:14px;font-size:13px;color:var(--olive);}

/* Resultado */
.fresh-result{margin-top:30px;max-width:560px;background:var(--cream);border-radius:22px;padding:26px 28px;border-left:8px solid var(--green);box-shadow:0 10px 24px #2d654412;}
.fresh-result:focus{outline:none;}
.fresh-result.is-old{border-left-color:var(--orange);}
.fresh-result.is-error{border-left-color:#c4561d;}
.fresh-result p{font-size:15px;}
.result-demo{display:inline-block;margin-bottom:10px;padding:3px 12px;border-radius:999px;background:#f4f1e9;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--olive);}
.fresh-result .result-title{font-family:Kardia,Arial,sans-serif;font-size:clamp(28px,2.6vw,38px);line-height:1.1;color:var(--brown);margin-bottom:8px;}
.fresh-result.is-error .result-title{font-size:24px;}
.fresh-result.is-error p+p{margin-top:8px;}
.is-fresh .result-title em{color:#4f7a1c;}
.result-lead{font-size:16px;}
.result-meter{position:relative;height:10px;margin:20px 0 22px;border-radius:999px;background:#e9e3d3;overflow:hidden;}
.result-meter span{position:absolute;inset:0 auto 0 0;width:calc(var(--avance,0) * 100%);min-width:10px;border-radius:inherit;background:var(--green);animation:meter-in .8s cubic-bezier(.2,.8,.2,1);}
.is-old .result-meter span{background:var(--orange);}
@keyframes meter-in{from{width:10px;}}
/* Selector de temperatura: cambia la vida útil */
.result-temp{border:0;margin:0 0 20px;padding:0;}
.result-temp legend{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a74713;margin-bottom:10px;padding:0;}
.result-temp label{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;border:2px solid transparent;background:#f4f1e9;margin-bottom:6px;cursor:pointer;transition:border-color .2s,background .2s;}
.result-temp label:has(input:checked){background:#fff;border-color:var(--olive);}
.result-temp label:has(input:focus-visible){outline:3px solid #b34308;outline-offset:2px;}
.result-temp input{position:absolute;opacity:0;width:1px;height:1px;}
.temp-bulb,.chips.life b{flex:none;width:14px;height:26px;border-radius:7px 7px 9px 9px;background:linear-gradient(to top,var(--bulb,#83b532) var(--nivel,40%),#e9e3d3 0);border:2px solid #61340840;}
.temp-frio .temp-bulb,.chips .temp-frio b{--bulb:#83b532;--nivel:38%;}
.temp-templado .temp-bulb,.chips .temp-templado b{--bulb:#e9a23b;--nivel:64%;}
.temp-calido .temp-bulb,.chips .temp-calido b{--bulb:#f78224;--nivel:92%;}
.temp-text{display:flex;flex-direction:column;font-size:12px;line-height:1.35;color:var(--olive);}
.temp-text strong{font-size:14px;color:var(--brown);}
.result-data dd small{display:block;font-size:12px;font-weight:500;color:var(--olive);}
.result-data{display:grid;grid-template-columns:repeat(4,auto);gap:14px 26px;margin:0;}
.result-data div:first-child{grid-column:1/-1;}
.result-data dt{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a74713;}
.result-data dd{margin:3px 0 0;font-size:16px;font-weight:600;color:var(--brown);}
.result-data div:first-child dd::first-letter{text-transform:uppercase;}

/* Pía se asoma desde el borde derecho, de pie sobre el borde inferior de la franja */
.fresh-tool-pia{grid-row:2 / span 1;grid-column:2;align-self:end;justify-self:end;width:clamp(230px,26vw,390px);margin-bottom:-6px;}
.fresh-tool-pia img{width:100%;height:auto;}
.fresh-tool-pia .pia-bubble{top:4%;right:auto;left:-12%;border-radius:26px 26px 3px 26px;transform-origin:100% 100%;}

/* ---------- La prueba del vaso ---------- */
.fresh-glass{max-width:1500px;margin:auto;padding:100px 6% 20px;display:grid;grid-template-columns:1.1fr .9fr;gap:6%;align-items:center;}
.glass-copy>p{max-width:520px;margin:24px 0 36px;font-size:18px;}
.glass-control{max-width:520px;}
.glass-control label{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;}
.glass-control output{font-family:Kardia,Arial,sans-serif;font-size:56px;line-height:1;color:#a74713;min-width:1.4em;}
.glass-control label span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);}
.glass-control input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer;}
.glass-control input[type="range"]::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--green) 0 30%,#c9d8a8 30% 57%,#f2c98f 57% 86%,#f7a26a 86%);}
.glass-control input[type="range"]::-moz-range-track{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--green) 0 30%,#c9d8a8 30% 57%,#f2c98f 57% 86%,#f7a26a 86%);}
.glass-control input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;background:var(--cream);border:4px solid var(--olive);box-shadow:0 4px 10px #35402240;}
.glass-control input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cream);border:4px solid var(--olive);box-shadow:0 4px 10px #35402240;}
.glass-control input[type="range"]:focus-visible{outline:3px solid #b34308;outline-offset:6px;border-radius:999px;}
.glass-scale{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--olive);padding:0 6px;}
.glass-state{margin-top:26px;padding:22px 26px;border-radius:20px;background:#f4f1e9;border-left:8px solid var(--green);max-width:520px;transition:border-color .4s;}
.glass-state h3{font-size:28px;margin-bottom:6px;}
.glass-state p{font-size:15px;}
.glass-state[data-estado="inclinado"]{border-left-color:#a9c46b;}
.glass-state[data-estado="parado"]{border-left-color:#e9a23b;}
.glass-state[data-estado="flota"]{border-left-color:var(--orange);}
.glass-note{max-width:520px;margin-top:16px;font-size:13px;color:var(--olive);}

.glass-visual{display:grid;place-items:center;padding:20px 0;}
.glass{position:relative;width:min(300px,80%);aspect-ratio:3/4;--egg-y:85%;--egg-r:88deg;}
.glass-body{position:absolute;inset:0;border:5px solid #35402233;border-top-width:6px;border-radius:14px 14px 40px 40px / 14px 14px 60px 60px;background:linear-gradient(90deg,#ffffff55,transparent 25%,transparent 70%,#ffffff70);box-shadow:0 30px 40px -28px #61340866;}
.glass-water{position:absolute;left:5px;right:5px;bottom:5px;top:22%;border-radius:4px 4px 38px 38px / 4px 4px 58px 58px;background:linear-gradient(#bfe0ea,#9fcfe0);overflow:hidden;}
.glass-water:before{content:'';position:absolute;left:-4%;right:-4%;top:-8px;height:16px;border-radius:50%;background:#d8eef5;}
.glass-egg{
  position:absolute;left:50%;top:var(--egg-y);width:31%;aspect-ratio:.76;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(circle at 36% 28%,#fbe3c6 0,#e9b98a 45%,#c98b58 100%);
  box-shadow:inset -8px -10px 18px #8a522a33;
  transform:translate(-50%,-50%) rotate(var(--egg-r));
  transition:top .9s cubic-bezier(.3,.9,.3,1.05),transform .9s cubic-bezier(.3,.9,.3,1.05);
}
.glass[data-estado="flota"] .glass-egg{animation:egg-bob 3.2s ease-in-out infinite;}
@keyframes egg-bob{0%,100%{transform:translate(-50%,-50%) rotate(var(--egg-r));}50%{transform:translate(-50%,-46%) rotate(calc(var(--egg-r) + 3deg));}}

/* ---------- Guía del código ---------- */
.fresh-guide{max-width:1500px;margin:auto;padding:100px 6% 110px;}
.fresh-guide-head{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:end;margin-bottom:55px;}
.fresh-guide-head .eyebrow{grid-column:1/-1;margin-bottom:0;}
.fresh-guide-head p{max-width:440px;font-size:18px;}

.code-anatomy{margin:0;display:grid;grid-template-columns:.8fr 1.2fr;gap:6%;align-items:center;}
.egg{
  position:relative;aspect-ratio:.78;max-width:380px;width:100%;margin:auto;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(circle at 36% 28%,#fbe3c6 0,#e9b98a 45%,#c98b58 100%);
  box-shadow:inset -18px -22px 40px #8a522a33,0 30px 40px -24px #61340855;
  display:grid;place-items:center;
}
.egg-code{font-family:Kardia,Arial,sans-serif;font-size:clamp(44px,5vw,70px);letter-spacing:.06em;color:#3a2410d0;transform:rotate(-8deg);margin-top:12%;}
.egg-code b{font-weight:400;display:inline-block;border-bottom:4px solid currentColor;padding:0 .04em;}
.egg-code .c1,.code-parts .c1 .part-char{border-color:var(--olive);}
.egg-code .c2,.code-parts .c2 .part-char{border-color:var(--orange);}
.egg-code .c3,.code-parts .c3 .part-char{border-color:var(--green);}
.egg-code .c4,.code-parts .c4 .part-char{border-color:#a74713;}

.code-parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:34px 40px;}
.code-parts li{display:flex;gap:20px;align-items:flex-start;}
.part-char{flex:none;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;border:3px solid;background:#fff;font-family:Kardia,Arial,sans-serif;font-size:32px;line-height:1;}
.code-parts h3{font-size:28px;margin:4px 0 6px;}
.code-parts p{font-size:15px;}

.guide-tables{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;margin:65px 0 40px;padding-top:40px;border-top:1px solid #61340825;align-items:start;}
.guide-tables h3{font-size:24px;margin-bottom:14px;}
.guide-tables h3+h3,.chips+h3{margin-top:34px;}
.guide-lead{font-size:14px;max-width:420px;margin-bottom:14px;}
.chips.life li{padding-left:10px;gap:12px;}
.chips.life b{width:12px;height:22px;background-clip:padding-box;}
/* La báscula: el huevo crece con el peso y cambia de tipo */
.guide-scale{background:#f4f1e9;border-radius:22px;padding:28px 30px 24px;}
.scale-stage{position:relative;height:190px;display:grid;place-items:end center;margin-top:6px;}
.scale-egg{width:120px;height:auto;transform:scale(var(--tam,.8));transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,1.3,.5,1);position:relative;z-index:1;margin-bottom:6px;}
.scale-plate{position:absolute;bottom:0;left:50%;width:210px;height:14px;transform:translateX(-50%);border-radius:50%;background:#61340818;}
.scale-plate:after{content:'';position:absolute;left:50%;bottom:-2px;width:150px;height:8px;transform:translateX(-50%);border-radius:8px 8px 0 0;background:var(--olive);}
.scale-label{display:block;text-align:center;font-family:Kardia,Arial,sans-serif;font-size:40px;color:#a74713;margin:14px 0 2px;}
.scale-label output{font-size:52px;}
.guide-scale input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:40px;background:transparent;margin:0;cursor:pointer;}
.guide-scale input[type="range"]::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:linear-gradient(90deg,#e9e3d3,#c9d8a8 40%,var(--green));}
.guide-scale input[type="range"]::-moz-range-track{height:10px;border-radius:999px;background:linear-gradient(90deg,#e9e3d3,#c9d8a8 40%,var(--green));}
.guide-scale input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;background:var(--cream);border:4px solid var(--olive);box-shadow:0 4px 10px #35402240;}
.guide-scale input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cream);border:4px solid var(--olive);box-shadow:0 4px 10px #35402240;}
.guide-scale input[type="range"]:focus-visible{outline:3px solid #b34308;outline-offset:6px;border-radius:999px;}
.scale-result{text-align:center;font-size:16px;margin-top:10px;color:var(--olive);}
.scale-result strong{font-family:Kardia,Arial,sans-serif;font-size:30px;color:var(--brown);margin:0 6px;}
.scale-note{text-align:center;font-size:12px;color:var(--olive);margin-top:8px;}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.chips li{display:inline-flex;gap:10px;align-items:center;padding:8px 16px 8px 8px;border-radius:999px;background:#f4f1e9;font-size:14px;font-weight:600;color:var(--olive);}
.chips b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--cream);color:#a74713;font-size:14px;}


/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .fresh-tool{grid-template-columns:1fr 200px;min-height:0;}
  .fresh-tool-pia{width:230px;margin-right:-30px;}
  .code-anatomy{grid-template-columns:1fr;gap:45px;}
  .egg{max-width:300px;}
}
@media (max-width:700px){
  .fresh-tool{grid-template-columns:1fr;padding:45px 6% 0;}
  .fresh-tool-copy{padding-bottom:10px;}
  .fresh-tool h1{font-size:46px;}
  .fresh-tool-copy>p{font-size:16px;margin:20px 0 26px;}
  .fresh-field{flex-direction:column;border-radius:24px;padding:8px;}
  .fresh-field input{padding:14px 16px;font-size:26px;text-align:center;}
  .fresh-field .button{width:100%;}
  .fresh-result{padding:22px 20px;}
  .result-data{grid-template-columns:1fr 1fr;}
  .fresh-tool-pia{grid-row:auto;grid-column:auto;justify-self:center;width:190px;margin:40px 0 -6px;}
  .fresh-glass{grid-template-columns:1fr;padding:60px 6% 10px;gap:30px;}
  .glass-copy>p{font-size:16px;margin:20px 0 28px;}
  .glass-control output{font-size:46px;}
  .glass-state{padding:18px 20px;}
  .glass-state h3{font-size:24px;}
  .glass-visual{order:-1;padding:0;}
  .glass{width:min(230px,70%);}
  .fresh-guide{padding:60px 6% 70px;}
  .fresh-guide-head{grid-template-columns:1fr;gap:18px;margin-bottom:40px;}
  .fresh-guide-head p{font-size:16px;}
  .code-parts{grid-template-columns:1fr;gap:24px;}
  .part-char{width:52px;height:52px;font-size:27px;}
  .code-parts h3{font-size:24px;}
  .guide-tables{grid-template-columns:1fr;gap:30px;margin:45px 0 34px;padding-top:30px;}
  .guide-scale{padding:22px 18px 18px;}
  .scale-stage{height:160px;}
  .scale-egg{width:104px;}
  .result-temp label{padding:9px 10px;}
}
@media (prefers-reduced-motion:reduce){
  .result-meter span{animation:none;}
  .scale-egg,.result-temp label{transition:none;}
  .glass-egg{transition:none;}
  .glass[data-estado="flota"] .glass-egg{animation:none;}
}

/* Kardia dibuja igual la O y el cero: los códigos escritos por la persona van en Raleway. */
.fresh-field input,.result-data dd{font-family:Raleway,Arial,sans-serif;font-weight:700;font-variant-numeric:lining-nums;}
@media (max-width:760px){
  /* En pantallas angostas la burbuja va sobre la cabeza, como en el resto del sitio (ver style.css) */
  .fresh-tool-pia .pia-bubble{top:auto;bottom:calc(100% - 6px);left:50%;right:auto;border-radius:20px 20px 20px 3px;transform-origin:50% 100%;}
}