:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body{max-width:768px;font-family:Arial,Helvetica,sans-serif;margin:0;padding:0;background-color:#a1865f;color:#333}.app{text-align:center}.header{background-color:#b87333;color:#fff;padding:20px;font-size:1.5rem;display:flex;justify-content:space-between;align-items:center}.header img{width:100px;height:auto}.h1{margin:0}.h2{margin-bottom:20px;color:#333;font-size:1.8rem;text-transform:uppercase}section{margin:40px auto;max-width:1200px;padding:20px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;justify-items:center}.producto{background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 4px 6px #0000001a;transition:transform .2s;cursor:pointer;width:200px}.producto:hover{transform:scale(1.05);box-shadow:0 6px 12px #00000026}.producto-imagen{width:100%;height:200px;object-fit:cover;border-top-left-radius:10px;border-top-right-radius:10px}.producto p{margin:10px 0 0;font-weight:700;color:#555}.tarjeta{display:flex;flex-direction:column;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;max-width:70%;max-height:80%;background-color:#b69b43;border:1px solid #ccc;border-radius:12px;box-shadow:0 8px 16px #0003;z-index:1000;padding:15px;gap:0px;text-align:left;overflow:8px}.tarjeta-imagen{width:100px;height:250px;object-fit:cover;border-radius:8px}.tarjeta div{flex:1}.tarjeta h2{margin-top:0;color:#333}.tarjetap{margin:10px 0;color:#555}.tarjeta button{display:inline-block;margin:10px;padding:10px 20px;background-color:#be6a0a;color:#161616;border:none;cursor:pointer;font-size:1rem;transition:background-color .3s}.tarjeta button:hover{background-color:#a84324}.tarjeta .colores{display:flex;gap:4px;cursor:pointer}.color-verde{width:24px;height:24px;background-color:green}.color-rosa{width:24px;height:24px;background-color:#e91e84}.color-negro{width:24px;height:24px;background-color:#000}.color-amarillo{width:24px;height:24px;background-color:#ff0}.color-naranjado{width:24px;height:24px;background-color:orange}.color-lila{width:24px;height:24px;background-color:indigo}.color-azul{width:24px;height:24px;background-color:#00f}.color-rojo{width:24px;height:24px;background-color:red}.main:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999;display:none}.tarjeta+.main:after{display:block}button:hover{background-color:#555}input{padding:10px;border-radius:5px;border:1px solid #ccc}input[type=email]{width:300px}s input[type=email]:focus{outline:none;border-color:#333}label{font-size:14px;color:#333}