/* css/proximamente.css
   Que se viene: el hero con el formulario de aviso y las cuatro tarjetas.

   LA PAGINA ENTERA VA SOBRE EL OCRE PALIDO, como en el disenio, asi que pinta el body y
   no solo una seccion: con un body color papel quedaria una franja de otro color debajo
   del pie en pantallas altas. */
body { background:var(--cab); }
.cc-prox-hero { padding-top:80px; padding-bottom:56px; display:flex; flex-wrap:wrap; gap:48px; align-items:center; }
.cc-prox-texto { flex:1 1 520px; min-width:0; display:flex; flex-direction:column; gap:22px; }
.cc-prox-texto h1 { font-size:64px; line-height:1.02; }
.cc-prox-bajada { margin:0; font-size:20px; color:var(--tinta2); max-width:560px; }
.cc-prox-form { display:flex; flex-wrap:wrap; gap:12px; max-width:560px; margin:0; }
.cc-prox-form input[type=email] { flex:1 1 260px; min-width:0; padding:14px 18px; border-radius:999px; border:2px solid var(--tinta); background:transparent; color:var(--tinta); font:inherit; font-size:16px; min-height:44px; }
.cc-prox-form input[type=email]:focus-visible { outline:3px solid var(--oxido); outline-offset:2px; }
/* El campo trampa se saca del flujo sin display:none: hay robots que ignoran lo que esta
   en display:none justamente porque saben que es una trampa. */
.cc-trampa { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.cc-oculto { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cc-prox-aviso { margin:0; font-size:16px; font-weight:700; min-height:24px; }
.cc-prox-aviso.cc-ok { color:var(--petroleo2); }
.cc-prox-aviso.cc-mal { color:var(--ladrillo); }
.cc-prox-astro { flex:1 1 380px; min-width:0; display:flex; justify-content:center; }
.cc-prox-astro svg { width:100%; max-width:400px; height:auto; }
.cc-prox-lista { padding-top:24px; padding-bottom:96px; }
.cc-prox-lista h2 { margin:0 0 28px; font-size:30px; }
.cc-prox-grilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.cc-prox-item { border:2px solid var(--boton); border-radius:14px; padding:26px; display:flex; flex-direction:column; gap:10px; }
.cc-prox-item h3 { font-family:var(--serif); font-size:21px; color:var(--oxido); }
.cc-prox-item p { margin:0; font-size:16px; color:var(--tinta2); }
@media (max-width:640px) {
  .cc-prox-hero { padding-top:40px; padding-bottom:32px; gap:28px; }
  .cc-prox-texto h1 { font-size:36px; }
  .cc-prox-bajada { font-size:17px; }
  .cc-prox-lista { padding-bottom:48px; }
}
/* LA PREGUNTA DE VERIFICACION EN EL FORMULARIO CORTO. Ocupa el ancho entero para que no
   quede apretada entre el correo y el boton, que en un telefono dejaria tres cosas de
   140px cada una. El campo copia el borde y el fondo del correo de arriba: en esta pagina
   los campos van sobre el color del hero y no sobre papel. */
.cc-desafio { flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.cc-desafio .cc-desafio-preg { font-size:16px; font-weight:700; color:var(--tinta); flex:0 1 auto; max-width:100%; min-width:0; }
.cc-desafio input { flex:0 1 150px; min-width:0; padding:14px 18px; border-radius:999px; border:2px solid var(--tinta); background:transparent; color:var(--tinta); font:inherit; font-size:16px; min-height:44px; }
.cc-desafio input:focus-visible { outline:3px solid var(--oxido); outline-offset:2px; }