*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:linear-gradient(135deg,#2c5f7a,#4a8ba8);min-height:100vh;color:#333;line-height:1.6}.container{max-width:800px;margin:0 auto;padding:20px;background:#fff;min-height:100vh;box-shadow:0 0 20px #0000001a}.header{text-align:center;padding:30px 0;background:linear-gradient(135deg,#2c5f7a,#4a8ba8);color:#fff;margin:-20px -20px 30px;border-radius:0 0 20px 20px}.logo{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:10px}.logo i{font-size:2.5em;color:#87ceeb}.logo h1{font-size:2.5em;font-weight:700;letter-spacing:2px}.tagline{font-size:1.1em;opacity:.9;font-style:italic}.version-toggle{display:flex;justify-content:center;gap:10px;margin-bottom:30px}.toggle-btn{padding:12px 24px;border:2px solid #2c5f7a;background:#fff;color:#2c5f7a;border-radius:25px;cursor:pointer;font-weight:700;transition:all .3s ease;display:flex;align-items:center;gap:8px}.toggle-btn:hover{background:#f0f8ff;transform:translateY(-2px)}.toggle-btn.active{background:#2c5f7a;color:#fff}.instructions-container{display:none;animation:fadeIn .5s ease-in}.instructions-container.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.main-title{text-align:center;font-size:2em;color:#2c5f7a;margin-bottom:30px;display:flex;align-items:center;justify-content:center;gap:15px}.main-title i{color:#ff8c42}.text-instructions .step{background:#f8f9fa;padding:25px;margin-bottom:20px;border-radius:15px;border-left:5px solid #ff8c42;box-shadow:0 2px 10px #0000001a}.step h3{color:#2c5f7a;font-size:1.3em;margin-bottom:15px;display:flex;align-items:center;gap:15px}.step-number{background:#ff8c42;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1em}.cooking-times{display:flex;gap:15px;margin-top:15px;flex-wrap:wrap}.time-box{background:#2c5f7a;color:#fff;padding:12px 20px;border-radius:25px;font-weight:700;text-align:center;flex:1;min-width:200px}.final-message{background:linear-gradient(135deg,#ff8c42,#ffb366);color:#fff;padding:20px;border-radius:15px;text-align:center;margin-top:30px;font-size:1.1em}.visual-title{background:linear-gradient(135deg,#ff8c42,#ffb366);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:#ff8c42}.visual-instructions{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-bottom:30px}.visual-step{background:#fff;border-radius:20px;padding:25px;text-align:center;box-shadow:0 8px 25px #0000001a;border:3px solid #f0f8ff;transition:all .3s ease;position:relative;overflow:hidden}.visual-step:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(135deg,#ff8c42,#ffb366)}.visual-step:hover{transform:translateY(-5px);box-shadow:0 12px 35px #00000026}.step-icon{margin-bottom:20px}.icon-circle{background:#ff8c42;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.3em;margin:0 auto 15px;box-shadow:0 4px 15px #ff8c424d}.icon-wrapper{background:linear-gradient(135deg,#f0f8ff,#e6f3ff);width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:4px solid #2c5f7a;margin:0 auto;transition:all .3s ease}.visual-step:hover .icon-wrapper{transform:scale(1.1);border-color:#ff8c42}.icon-wrapper i{font-size:2.2em;color:#2c5f7a;transition:all .3s ease}.visual-step:hover .icon-wrapper i{color:#ff8c42}.step-content h3{color:#2c5f7a;font-size:1.4em;margin-bottom:12px;font-weight:700}.step-content p{color:#555;font-size:.95em;line-height:1.5;margin-bottom:15px}.time-badges{display:flex;flex-direction:column;gap:8px;margin-top:15px}.time-badge{background:#2c5f7a;color:#fff;padding:8px 12px;border-radius:20px;font-size:.85em;font-weight:700;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .3s ease}.time-badge:hover{transform:scale(1.05)}.time-badge.porras{background:linear-gradient(135deg,#ff8c42,#ffb366)}.time-badge.churros{background:linear-gradient(135deg,#4a8ba8,#6ba3c7)}.visual-footer{text-align:center;margin-top:30px}.footer-message{background:linear-gradient(135deg,#ff8c42,#ffb366);color:#fff;padding:20px;border-radius:25px;font-size:1.2em;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 20px #ff8c424d}.footer-message i{font-size:1.3em;animation:heartbeat 1.5s ease-in-out infinite}@keyframes heartbeat{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.footer{background:#2c5f7a;color:#fff;padding:20px;margin:30px -20px -20px;border-radius:20px 20px 0 0}.contact-info{text-align:center}.contact-info p{margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:10px}.contact-info i{color:#87ceeb}@media (max-width: 768px){.container{padding:15px}.logo h1{font-size:2em}.main-title{font-size:1.5em;flex-direction:column;gap:10px}.visual-instructions{grid-template-columns:1fr;gap:20px}.cooking-times{flex-direction:column}.version-toggle{flex-direction:column;align-items:center}.visual-step{padding:20px}.icon-wrapper{width:70px;height:70px}.icon-wrapper i{font-size:1.8em}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#2c5f7a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#4a8ba8}*{scrollbar-width:thin;scrollbar-color:#2c5f7a #f1f1f1}