/* Lotte 6 — estilos de la web.
   Los colores salen de design-system/tokens.css. Si cambia algo allá, cambia acá.

   La página se compromete con el negro de marca y no ofrece modo claro: es la
   versión negativa del logo, que es donde vive una fiesta. Todos los colores
   van pintados explícitos. */
:root{
  --negro:#0E1417; --superficie:#191F22; --linea:#373C3E;
  --texto:#F8F8F8; --arena:#AEA58F; --naranjo:#EC963E; --vino:#9F1F27;
  --tenue:#939597;
  --titulo:"Poppins","Avenir Next","Century Gothic",system-ui,sans-serif;
  --cuerpo:"Karla",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--negro);color:var(--texto);
     font:400 16px/1.6 var(--cuerpo);-webkit-font-smoothing:antialiased;
     display:flex;flex-direction:column;min-height:100dvh}

/* el halo: en una pieza sobre negro lo que separa los planos es la luz */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(58% 44% at 50% 42%,
    rgba(236,150,62,.17) 0%, rgba(159,31,39,.10) 38%, rgba(14,20,23,0) 78%)}

main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;
     align-items:center;justify-content:center;gap:40px;
     padding:56px 24px;text-align:center}

.flor{width:min(62vw,300px);height:auto}
.flor .petalo{opacity:0}
.flor .petalo.visible{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .flor .petalo.visible{animation:brotar .9s cubic-bezier(.2,.7,.3,1) backwards}
}
@keyframes brotar{
  from{opacity:0;transform:translateY(10px) scale(.94)}
  to{opacity:1;transform:none}
}
.flor{overflow:visible}

h1{font:800 clamp(34px,9vw,58px)/1 var(--titulo);letter-spacing:-.03em;margin:0;
   overflow-wrap:break-word;max-width:100%}
.bajada{color:var(--arena);max-width:34ch;margin:0;font-size:17px}

/* --- formulario --- */
form{display:flex;flex-direction:column;gap:12px;width:min(100%,380px)}
.campo{display:flex;flex-direction:column;gap:6px;text-align:left}
label{font:700 11px/1 var(--titulo);letter-spacing:.16em;text-transform:uppercase;
      color:var(--tenue)}
input{width:100%;padding:14px 16px;border-radius:12px;background:var(--superficie);
      border:1px solid var(--linea);color:var(--texto);font:400 16px/1.2 var(--cuerpo)}
input::placeholder{color:#6E7274}
input:focus-visible{outline:2px solid var(--naranjo);outline-offset:2px;
                    border-color:var(--naranjo)}
button{padding:15px 20px;border:0;border-radius:12px;background:var(--naranjo);
       color:var(--negro);font:700 16px/1 var(--titulo);cursor:pointer;
       transition:background .18s ease}
button:hover{background:#F3BE87}
button:focus-visible{outline:2px solid var(--texto);outline-offset:3px}
button[disabled]{opacity:.55;cursor:default}
.letra-chica{color:var(--tenue);font-size:13px;margin:0}
.aviso{margin:0;font-size:15px;min-height:1.4em}
.aviso.ok{color:var(--naranjo)}
.aviso.error{color:#D4646B}

footer{position:relative;z-index:1;padding:24px;display:flex;justify-content:center;
       gap:20px;flex-wrap:wrap;color:var(--tenue);font-size:13px}
footer a{color:var(--arena);text-decoration:none;border-bottom:1px solid var(--linea);
         padding-bottom:1px}
footer a:hover{color:var(--texto)}
footer a:focus-visible{outline:2px solid var(--naranjo);outline-offset:3px}

/* --- estado revelado --- */
/* columnas explícitas, no auto-fit: con auto-fit los cuatro datos se repartían
   3+1 y quedaba una celda vacía pintada del gris de los filetes, que se lee
   como un error. 2×2 en teléfono, 4 en línea en pantalla ancha. */
.datos{display:grid;grid-template-columns:repeat(2,1fr);
       gap:1px;background:var(--linea);border:1px solid var(--linea);
       border-radius:14px;overflow:hidden;width:min(100%,760px)}
@media (min-width:760px){ .datos{grid-template-columns:repeat(4,1fr)} }
.datos div{background:var(--negro);padding:22px 20px;text-align:left}
.datos dt{font:700 11px/1 var(--titulo);letter-spacing:.16em;text-transform:uppercase;
          color:var(--tenue);margin:0 0 8px}
.datos dd{margin:0;font:600 19px/1.3 var(--titulo)}
.marca-pie{width:min(52vw,220px);height:auto;color:var(--texto)}