/* ============================================================
   TEST DE LIDERAZGO TP1 · SPAIS — PROTOTIPO LOCAL
   styles.css — LOOK & FEEL spaisconsulting.com:
   oscuro premium #07060B, Poppins, degradado oficial
   120deg #00AED1 → rgba(0,174,209,.55) (fills) y #00AED1 → rgba(0,174,209,.42)
   (texto en degradado), tarjetas glass, muted #B8B2CC.
   Motor intacto. Respeta prefers-reduced-motion.
   ============================================================ */

:root {
  /* marinaberenguer.es — SOLO DOS AZULES */
  --azul: #00AED1;                          /* turquesa del libro: relleno y marca */
  --morado: #DFF2F8;                        /* nombre heredado = turquesa claro */
  --azul-claro: #15191C;                    /* en claro, el acento legible es tinta */
  --morado-claro: rgba(0,174,209,.35);
  --grad: linear-gradient(120deg,#00AED1,rgba(0,174,209,.55));
  --grad-texto: none;

  --fondo: #FFFFFF;
  --fondo-2: #DFF2F8;
  --tarjeta: rgba(0,174,209,.05);
  --tarjeta-borde: rgba(0,174,209,.20);
  --linea: rgba(0,174,209,.20);

  --tinta: #15191C;
  --pizarra: #3D464D;
  --apagado: #697077;

  --petroleo: var(--azul);
  --petroleo-oscuro: #15191C;
  --acento: var(--azul);
  --acento-hover: var(--azul);
  --acento-deshabilitado: rgba(0,174,209,.10);
  --acento-suave: rgba(0,174,209,.10);
  --acento-borde: rgba(0,174,209,.30);

  --ambar-fondo: rgba(214,158,46,.14);
  --ambar-texto: #7A5200;
  --rojo-fondo: rgba(179,38,30,.08);
  --rojo-texto: #B3261E;
  --verde-suave: rgba(0,174,209,.10);

  --tension: var(--azul);
  --equilibrio: var(--morado-claro);
}

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

html, body {
  background: var(--fondo);
  color: var(--pizarra);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; display: flex; flex-direction: column; position: relative; }

/* resplandores de marca, fijos y serenos (como el fondo vivo de la web) */
body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
body::before {
  width: 60vw; height: 60vw;
  top: -25vw; right: -20vw;
  background: radial-gradient(circle, rgba(0,174,209,.10), transparent 65%);
}
body::after {
  width: 55vw; height: 55vw;
  bottom: -22vw; left: -18vw;
  background: radial-gradient(circle, rgba(0,174,209,0.220), transparent 65%);
}

header, main, #app, .footer-spais { position: relative; z-index: 1; }

#app {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 12px 16px 96px;
  flex: 1;
}

::selection { background: rgba(0,174,209,0.450); color: var(--tinta); }

:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; border-radius: 6px; }

/* ---------- tarjetas (glass) ---------- */

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
  border-radius: 20px;
  padding: 26px 22px;
  margin-bottom: 16px;
  box-shadow: 0 24px 60px rgba(21,25,28,0.09);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: aparecer 0.5s ease both;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.marca {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--azul-claro);
  font-weight: 600;
  margin-bottom: 8px;
}

.titulo-app {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  
  color: var(--azul-claro); /* fallback */
}

.titulo-seccion {
  font-size: 21px;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.parrafo { margin-bottom: 12px; color: var(--pizarra); font-weight: 300; }

/* ---------- consentimiento ---------- */

.linea-consentimiento {
  position: relative;
  /* Es un <label> con casilla + texto: sin flex la casilla queda pegada
     a la primera palabra y no hay dónde pinchar con el pulgar. */
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 400;
  color: var(--tinta);
  background: rgba(0,174,209,0.05);
  border: 1px solid var(--tarjeta-borde);
  border-radius: 14px;
  padding: 16px 18px 16px 22px;
  margin-bottom: 22px;
  overflow: hidden;
}
.linea-consentimiento input[type="checkbox"] {
  width: 22px; height: 22px;
  margin-top: 2px;
  accent-color: var(--azul);
  flex-shrink: 0;
  cursor: pointer;
}
.linea-consentimiento::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--grad);
}

.fila-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 22px;
  cursor: pointer;
  color: var(--apagado);
  font-size: 15px;
}

.fila-check input[type="checkbox"] {
  width: 22px; height: 22px;
  margin-top: 2px;
  accent-color: var(--azul);
  flex-shrink: 0;
  cursor: pointer;
}

.enlace { color: var(--azul-claro); text-decoration: underline; text-underline-offset: 3px; }
.enlace:hover { color: var(--tinta); }

/* ---------- botones ---------- */

.btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 999px;
  font-size: 16.5px;
  font-family: inherit;
  padding: 15px 22px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease,
              border-color 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.btn:active { transform: scale(0.985); }

.btn-primario {
  background: var(--grad);
  color: var(--tinta);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(0,174,209,0.350);
}
.btn-primario:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(0,174,209,0.450);
}
.btn-primario:disabled {
  background: rgba(0,174,209,0.08);
  color: var(--apagado);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-secundario {
  background: rgba(0,174,209,0.07);
  border: 1px solid var(--tarjeta-borde);
  color: var(--tinta);
  font-weight: 500;
}
.btn-secundario:hover { background: rgba(0,174,209,0.12); }

.btn-texto {
  background: none;
  color: var(--apagado);
  width: auto;
  padding: 10px 6px;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-texto:hover { color: var(--tinta); }
.btn-texto:disabled { color: var(--apagado); cursor: default; text-decoration: none; }

/* ---------- pantalla de ítem ---------- */

.cabecera-item { margin-bottom: 18px; }

.contador {
  font-size: 12.5px;
  color: var(--apagado);
  margin-bottom: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.progreso {
  height: 5px;
  background: rgba(0,174,209,0.08);
  border-radius: 3px;
  overflow: hidden;
}

.progreso-barra {
  height: 100%;
  background: var(--grad);
  border-radius: 3px;
  transition: width 0.3s ease;
  box-shadow: 0 0 12px rgba(0,174,209,0.600);
}

.marco-temporal {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--azul-claro);
  font-weight: 500;
  margin-bottom: 12px;
}

.texto-item {
  font-size: 21px;
  line-height: 1.45;
  color: var(--tinta);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 24px;
  min-height: 3.6em;
}

.opciones { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.btn-opcion {
  background: rgba(0,174,209,0.04);
  border: 1px solid var(--linea);
  color: var(--pizarra);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 14px;
}
.btn-opcion:hover {
  background: rgba(0,174,209,0.100);
  border-color: var(--acento-borde);
  color: var(--tinta);
}
.btn-opcion.elegida {
  background: var(--grad);
  border-color: transparent;
  color: var(--tinta);
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,174,209,0.400);
}

.num-opcion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px; height: 29px;
  border-radius: 50%;
  background: rgba(0,174,209,0.140);
  color: var(--azul-claro);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.btn-opcion.elegida .num-opcion { background: rgba(0,174,209,0.22); color: var(--tinta); }

.btn-pareja { min-height: 64px; border-radius: 14px; }

.btn-pnr {
  background: none;
  border: 1px dashed rgba(0,174,209,0.36);
  color: var(--apagado);
  font-size: 14px;
  padding: 11px;
  border-radius: 12px;
}
.btn-pnr:hover { border-color: var(--apagado); color: var(--tinta); }
.btn-pnr.elegida { background: rgba(0,174,209,0.14); color: var(--tinta); border-style: solid; }

.pie-navegacion {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
}

/* ---------- modal privacidad ---------- */

.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(21,25,28,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal {
  background: var(--fondo-2);
  border: 1px solid var(--tarjeta-borde);
  border-radius: 20px;
  padding: 26px 22px;
  max-width: 560px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: 0 40px 90px rgba(21,25,28,0.15);
}

.modal h2 { font-size: 18px; font-weight: 600; color: var(--tinta); margin-bottom: 14px; }

.destacado-privacidad {
  background: var(--acento-suave);
  border: 1px solid var(--acento-borde);
  border-radius: 12px;
  padding: 13px 15px;
  color: var(--azul-claro);
  font-weight: 500;
  margin-bottom: 14px;
}

.lista-privacidad { margin: 0 0 14px 18px; color: var(--apagado); font-size: 14px; }
.lista-privacidad li { margin-bottom: 8px; }

.nota-provisional { font-size: 12.5px; color: var(--apagado); margin-bottom: 14px; }

/* ---------- resultado ---------- */

.bloque-antes { position: relative; overflow: hidden; }
.bloque-antes::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--grad);
}
.titulo-antes { font-size: 17px; font-weight: 600; color: var(--tinta); margin-bottom: 8px; }

.banda-aviso {
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 14.5px;
  border: 1px solid transparent;
}
.banda-ambar { background: var(--ambar-fondo); color: var(--ambar-texto); border-color: rgba(122,82,0,.28); }
.banda-roja  { background: var(--rojo-fondo); color: var(--rojo-texto); border-color: rgba(179,38,30,.30); margin-bottom: 18px; }
.banda-suave { background: var(--verde-suave); color: var(--pizarra); border-color: var(--acento-borde); margin-bottom: 16px; }

/* mapa de barras dobles */

.leyenda { display: flex; gap: 18px; margin-bottom: 14px; font-size: 13px; color: var(--apagado); }
.leyenda-item { display: inline-flex; align-items: center; gap: 7px; }
.muestra { width: 22px; height: 9px; border-radius: 4px; display: inline-block; }
.muestra-tension { background: var(--grad); }
.muestra-equilibrio { background: linear-gradient(90deg, rgba(0,174,209,.42), rgba(0,174,209,.18)); }

.mapa { display: flex; flex-direction: column; gap: 14px; }

.fila-rol { display: flex; align-items: center; gap: 12px; }

.nombre-rol {
  width: 96px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--apagado);
  text-align: right;
}

.fila-destacada .nombre-rol { color: var(--tinta); font-weight: 700; }

.pista {
  position: relative;
  flex: 1;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,174,209,0.04);
}

.zona { position: absolute; top: 0; bottom: 0; }
.zona-reposo   { background: rgba(0,174,209,0.04); }
.zona-presente { background: rgba(0,174,209,0.04); }
.zona-activo   { background: rgba(0,174,209,0.070); }
.zona-primer   { background: rgba(0,174,209,0.130); }

.barra {
  position: absolute;
  left: 0;
  height: 11px;
  border-radius: 0 6px 6px 0;
}
.barra-tension    { top: 5px;  background: var(--grad); box-shadow: 0 0 14px rgba(0,174,209,0.450); }
.barra-equilibrio { bottom: 5px; background: linear-gradient(90deg, rgba(0,174,209,.42), rgba(0,174,209,.18)); box-shadow: 0 0 12px rgba(0,174,209,0.400); }

.fila-destacada .pista {
  outline: 1px solid var(--acento-borde);
  outline-offset: 1px;
  box-shadow: 0 0 20px rgba(0,174,209,0.250);
}

.fila-ejes { margin-top: 4px; }
.pista-ejes { background: none; height: auto; overflow: visible; }
.ejes-bandas { display: flex; width: 100%; }
.eje-banda {
  font-size: 10.5px;
  color: var(--apagado);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.pie-grafico {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  color: var(--apagado);
  text-align: center;
}

/* fichas */

.sobre-titulo {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--azul-claro);
  font-weight: 600;
  margin-bottom: 6px;
}

.cabecera-ficha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.nombre-dimension {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.05em;
  
  color: var(--azul-claro);
}

.ficha-principal { position: relative; overflow: hidden; }
.ficha-principal::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--grad);
}
.ficha-secundaria { opacity: 0.94; }

.chip {
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 13px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip-equilibrio { background: rgba(0,174,209,0.140); color: var(--azul-claro); border-color: var(--acento-borde); }
.chip-transito   { background: rgba(0,174,209,0.07); color: var(--pizarra); border-color: var(--linea); }
.chip-tension    { background: rgba(0,174,209,0.180); color: #15191C; border-color: rgba(0,174,209,0.400); }

.titular-ficha {
  font-size: 19px;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 6px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.mantra {
  font-size: 15.5px;
  font-style: italic;
  font-weight: 300;
  color: var(--azul-claro);
  margin-bottom: 16px;
}

.sub-ficha {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--azul-claro);
  font-weight: 600;
  margin: 20px 0 8px;
}

.lista-ficha { margin-left: 18px; color: var(--pizarra); font-weight: 300; }
.lista-ficha li { margin-bottom: 7px; }
.lista-ficha li::marker { color: var(--azul-claro); }
.lista-chequeo li { font-style: italic; color: var(--pizarra); }

.nota-origen {
  margin-top: 20px;
  background: rgba(0,174,209,0.04);
  border: 1px solid var(--tarjeta-borde);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--apagado);
  font-weight: 300;
}

/* pie de advertencias */

.pie-advertencias { background: rgba(0,174,209,0.04); }
.fecha-test { font-size: 13px; color: var(--apagado); margin-bottom: 12px; font-weight: 500; }
.advertencia {
  font-size: 13px;
  color: var(--apagado);
  font-weight: 300;
  margin-bottom: 8px;
  padding-left: 12px;
  border-left: 2px solid rgba(0,174,209,0.300);
}

/* ---------- vista consultor ---------- */

.consultor {
  border: 1.5px dashed var(--acento-borde);
  background: rgba(255,255,255,.92);
  overflow-x: auto; /* la tabla ancha se desplaza dentro de la tarjeta: nunca scroll horizontal de página */
}

.tabla-consultor {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: 10px 0 14px;
  color: var(--pizarra);
}
.tabla-consultor th, .tabla-consultor td {
  border-bottom: 1px solid var(--linea);
  padding: 7px 8px;
  text-align: left;
}
.tabla-consultor th {
  color: var(--apagado);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.fila-dominante td { background: rgba(0,174,209,0.140); font-weight: 600; color: var(--tinta); }

.lista-flags { list-style: none; font-size: 13.5px; }
.lista-flags li { padding: 4px 0; }
.flag-on { color: var(--rojo-texto); font-weight: 600; }
.flag-off { color: var(--apagado); }

/* ---------- modo prueba ---------- */

.boton-prueba {
  position: fixed;
  right: 14px;
  bottom: 48px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--tarjeta-borde);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  font-size: 18px;
  cursor: pointer;
  opacity: 0.55;
  z-index: 40;
  box-shadow: 0 4px 16px rgba(21,25,28,0.10);
}
.boton-prueba:hover { opacity: 1; }

.panel-prueba {
  position: fixed;
  right: 14px;
  bottom: 98px;
  width: min(330px, calc(100vw - 28px));
  max-height: 70vh;
  overflow-y: auto;
  background: var(--fondo-2);
  border: 1px solid var(--tarjeta-borde);
  border-radius: 18px;
  padding: 16px;
  z-index: 45;
  box-shadow: 0 24px 70px rgba(21,25,28,0.15);
}

.panel-titulo { font-weight: 700; color: var(--tinta); margin-bottom: 10px; font-size: 15px; }
.panel-sub {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--apagado);
  font-weight: 600;
  margin: 12px 0 6px;
}

.btn-panel {
  background: rgba(0,174,209,0.120);
  border: 1px solid transparent;
  color: var(--azul-claro);
  font-size: 13.5px;
  padding: 10px 13px;
  margin-bottom: 6px;
  border-radius: 11px;
  text-align: left;
}
.btn-panel:hover { background: rgba(0,174,209,0.220); color: var(--tinta); }
.btn-panel-borde { background: none; border: 1px solid var(--linea); color: var(--apagado); }
.btn-panel-borde:hover { border-color: var(--acento-borde); }

.fila-toggle { margin: 12px 0; font-size: 14px; color: var(--pizarra); }

/* ---------- cabecera y footer SPAIS ---------- */

.cabecera-spais { text-align: center; padding: 1.6rem 0 0.6rem; }
.cabecera-spais .logo-spais {
  max-width: 180px;
  width: 44%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(0,174,209,0.250));
}

.footer-spais {
  text-align: center;
  padding: 1.6rem 1rem 4.2rem;
  font-size: 0.74rem;
  color: var(--apagado);
  border-top: 1px solid rgba(0,174,209,0.20);
  margin-top: 2rem;
  letter-spacing: 0.02em;
}
.footer-spais p { margin: 0 0 0.5rem 0; }
.footer-spais a { color: var(--azul-claro); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.footer-spais a:hover { color: var(--tinta); }

/* ---------- badge prototipo ---------- */

.badge-prototipo {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apagado);
  background: rgba(223,242,248,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,174,209,0.20);
  padding: 7px 10px;
  z-index: 30;
}

/* ---------- barra de scroll sutil ---------- */

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: rgba(0,174,209,0.12); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,174,209,0.350); }

/* ---------- escritorio ---------- */

@media (min-width: 720px) {
  #app { padding-top: 34px; }
  .tarjeta { padding: 34px 38px; }
  .texto-item { font-size: 23px; }
  .titulo-app { font-size: 32px; }
  .cabecera-spais .logo-spais { max-width: 200px; }
}

/* ---------- movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .tarjeta { animation: none; }
  .btn, .progreso-barra { transition: none; }
}


/* — tipografía del sitio: Poppins para titular, Montserrat para leer — */
.titulo-app, .titulo-seccion, .texto-item, .titular-ficha, .nombre-dimension,
.panel-titulo, .nombre-rol, h1, h2, h3 { font-family: 'Poppins', system-ui, sans-serif; }
/* el turquesa no es color de texto sobre blanco: se queda en el subrayado */
.enlace { text-decoration-color: var(--azul); }
.lista-ficha li::marker { color: var(--azul); }

/* — cabecera: marca de Marina en vez del logo de SPAIS — */
.cabecera-spais { padding: 28px 20px 4px; text-align: center; }
.marca-mb { display: inline-flex; flex-direction: column; gap: 4px; text-decoration: none; }
.marca-mb__nombre {
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; color: var(--tinta);
  font-size: .95rem; letter-spacing: .22em;
}
.marca-mb__libro {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 400; color: var(--apagado);
  font-size: .66rem; letter-spacing: .18em;
}
.marca-mb:hover .marca-mb__nombre { color: var(--azul); }

/* — bloque «te lo mando por email» en la pantalla de resultado — */
.bloque-email .texto-email { color: var(--pizarra); font-size: .96rem; line-height: 1.6; margin: 0 0 18px; }
.form-email { display: flex; flex-direction: column; gap: 12px; }
.form-email .campo {
  width: 100%; padding: 13px 16px; border-radius: 12px; font: inherit; font-size: .95rem;
  border: 1px solid var(--linea); background: #fff; color: var(--tinta);
}
.form-email .campo:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0,174,209,.20); }
.form-email .campo::placeholder { color: var(--apagado); }
.form-email .btn-primario { margin-top: 4px; }
.aviso-email { font-size: .88rem; margin: 6px 0 0; }
.aviso-email.aviso-ok { color: var(--tinta); background: rgba(0,174,209,.10); padding: 12px 14px; border-radius: 12px; }
.aviso-email.aviso-error { color: var(--rojo-texto); }