/* =========================================================
   CITARVIA · EL ESTILO DE TODA LA MARCA
   ---------------------------------------------------------
   Este fichero manda en las TRES páginas (index, entrar y
   panel). Si algún día quieres cambiar el amarillo o la
   letra, se cambia AQUÍ una vez y cambian las tres solas.

   Identidad: blanco, amarillo y negro tinta. Nada más.
   Dos colores y un negro es lo que hace una marca
   reconocible: en cuanto metes cinco colores, ya te pareces
   a cualquiera.

   La letra de los titulares es FUTURA, que ya viene en el
   Mac. Es geométrica y tiene carácter propio; ningún
   producto de software la usa, todos van con la misma letra
   neutra. Los textos largos van en Avenir, que se lee mejor
   en pequeño y combina con ella.
   ========================================================= */

:root{
  /* --- los colores de la marca --- */
  --blanco:    #ffffff;
  --hueso:     #fbfaf6;   /* blanco calentito, para bloques de fondo */
  --amarillo:  #ffd400;   /* el color de la marca */
  --amarillo-2:#ffe873;   /* el mismo, más flojo, para fondos suaves */
  --amarillo-3:#fff8dd;   /* casi blanco, para pintar zonas enteras */
  --tinta:     #16161a;   /* el "negro". Nunca negro puro: cansa la vista */
  --gris:      #63636e;
  --tenue:     #a4a4ae;
  --linea:     #e8e6df;
  --linea-2:   #16161a;   /* borde negro, el recurso gráfico de la marca */

  /* --- las letras --- */
  --titulo: Futura, "Century Gothic", "Avenir Next", sans-serif;
  --texto:  "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, sans-serif;

  --r:   14px;
  --r-s: 9px;
}

/* OJO, regla de oro del amarillo: NUNCA texto amarillo sobre
   blanco, no se lee. El amarillo va siempre de FONDO con
   letra negra encima, o como bloque sólido. */

*{box-sizing:border-box; margin:0; padding:0;}

body{
  font-family:var(--texto);
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

h1,h2,h3,.tipografico{
  font-family:var(--titulo);
  font-weight:500;              /* Futura ya es contundente sin negrita */
  letter-spacing:-.02em;
  line-height:1.12;
}

.marco{max-width:1120px; margin:0 auto; padding:0 26px;}

/* ---------------------------------------------------------
   BOTONES
   Cuadrados por dentro, borde negro marcado. Nada de
   sombras difuminadas: la marca es gráfica, no blandita.
   --------------------------------------------------------- */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-family:var(--texto); font-size:.9rem; font-weight:600;
  padding:11px 20px; border-radius:var(--r-s);
  border:2px solid var(--tinta); transition:.15s; white-space:nowrap;
}
.btn-amarillo{background:var(--amarillo); color:var(--tinta);}
.btn-amarillo:hover{background:var(--tinta); color:var(--amarillo);}
.btn-negro{background:var(--tinta); color:var(--blanco);}
.btn-negro:hover{background:var(--amarillo); color:var(--tinta);}
.btn-vacio{background:none; color:var(--tinta);}
.btn-vacio:hover{background:var(--amarillo);}
.btn-sin-borde{border-color:transparent; padding:10px 14px; color:var(--gris);}
.btn-sin-borde:hover{color:var(--tinta); background:var(--hueso);}
.btn-g{font-size:1rem; padding:15px 28px;}

/* ---------------------------------------------------------
   PIEZAS SUELTAS QUE SE REPITEN
   --------------------------------------------------------- */
.pildora{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--amarillo); color:var(--tinta);
  font-size:.78rem; font-weight:700; padding:6px 14px; border-radius:30px;
  text-transform:uppercase; letter-spacing:.06em;
}

.caja{
  background:var(--blanco); border:1.5px solid var(--linea);
  border-radius:var(--r); overflow:hidden;
}
.caja-negra{border-color:var(--tinta);}

.caja-cab{
  padding:14px 18px; border-bottom:1.5px solid var(--linea);
  display:flex; align-items:center; gap:12px;
}
.caja-cab h2{font-size:1rem;}
.caja-cab .sub{
  font-size:.73rem; margin-left:auto; font-weight:700;
  background:var(--amarillo); padding:2px 9px; border-radius:20px;
}

.etq-sec{
  font-family:var(--texto); font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; margin-bottom:13px;
  display:inline-block; background:var(--amarillo); padding:4px 11px; border-radius:5px;
}

/* subrayado amarillo grueso: el recurso de marca para
   destacar una palabra dentro de un titular */
.subra{
  background:linear-gradient(transparent 62%, var(--amarillo) 62%);
  padding:0 2px;
}

/* interruptor */
.sw{
  width:44px; height:25px; border-radius:20px; border:2px solid var(--tinta);
  background:var(--blanco); position:relative; cursor:pointer; transition:.2s; flex-shrink:0;
}
.sw::after{
  content:""; position:absolute; top:2.5px; left:2.5px;
  width:16px; height:16px; border-radius:50%; background:var(--tinta); transition:.2s;
}
.sw.on{background:var(--amarillo);}
.sw.on::after{left:21px;}

/* campos de formulario */
label{display:block; font-size:.8rem; font-weight:600; margin-bottom:7px;}
input[type=email], input[type=password], input[type=text], select{
  width:100%; padding:12px 14px; border:1.5px solid var(--linea);
  border-radius:var(--r-s); font-size:.92rem; font-family:var(--texto);
  color:var(--tinta); background:var(--blanco); transition:.15s;
}
input::placeholder{color:var(--tenue);}
input:focus, select:focus{
  outline:none; border-color:var(--tinta);
  box-shadow:0 0 0 3px var(--amarillo-2);
}

/* aviso de "esto es una prueba" */
.aviso-prueba{
  padding:13px 16px; border-radius:var(--r-s);
  background:var(--amarillo-3); border:1.5px solid var(--amarillo);
  font-size:.8rem; line-height:1.55; color:#6b5600;
}
.aviso-prueba b{color:var(--tinta);}