/* ===========================================================================
   CLINICDAT  ·  Landing
   ---------------------------------------------------------------------------
   Se carga DESPUÉS de estilos.css (el de la plataforma): reusa sus colores,
   botones, campos y listas con búsqueda, y aquí solo va lo propio de la
   landing. Portada y seguridad en oscuro (como la entrada de la app), el
   resto claro para que se lea cómodo.
   =========================================================================== */

body.l { background: #fff; font-size: 16px; }
.l-ancho { width: min(1140px, 100% - 40px); margin: 0 auto; }
.l-angosto { width: min(760px, 100% - 40px); }
.l h1, .l h2, .l h3 { letter-spacing: -.035em; }

/* ---- Cabecera ------------------------------------------------------------ */
.l-nav { position: sticky; top: 0; z-index: 50; background: rgba(10, 26, 34, .88);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .06); }
.l-nav__fila { display: flex; align-items: center; gap: var(--sp-6); min-height: 68px; }
.l-nav .logotipo { text-decoration: none !important; }
.l-nav__links { display: flex; gap: var(--sp-6); margin-left: var(--sp-4); }
.l-nav__links a { color: #b9cfd1; font-size: .93rem; font-weight: 500; text-decoration: none; }
.l-nav__links a:hover { color: #fff; }
.l-nav__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.l-entrar { color: #e3eeef; }
.l-entrar:hover { background: rgba(255, 255, 255, .08); color: #fff; }
@media (max-width: 820px) { .l-nav__links { display: none; } }
@media (max-width: 420px) { .l-entrar { display: none; } }

/* ---- Portada ------------------------------------------------------------- */
.l-hero { position: relative; overflow: hidden; color: #e6f1f1; padding: var(--sp-12) 0 var(--sp-12);
  background: radial-gradient(110% 120% at 0% 0%, #13806f 0%, #0b2f33 50%, #0a1a22 100%); }
.l-hero::after { content: ""; position: absolute; width: 640px; height: 480px; right: -180px; top: -160px;
  border-radius: 50%; background: rgba(94, 234, 212, .18); filter: blur(90px); pointer-events: none; }
.l-hero__rejilla { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-10); align-items: center; }
@media (max-width: 960px) { .l-hero__rejilla { grid-template-columns: 1fr; } }
.l-hero h1 { color: #fff; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; margin: var(--sp-5) 0 var(--sp-5); max-width: 11ch; }
.l-hero h1 em { font-style: normal; color: var(--menta); }
.l-hero__bajada { color: #b9cfd1; font-size: 1.15rem; line-height: 1.6; max-width: 46ch; }
.l-hero__bajada strong { color: #fff; font-weight: 600; }
.l-hero__botones { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }
.l-boton-grande { min-height: 54px; padding: .8rem 1.6rem; font-size: 1.02rem; border-radius: 14px; }
.l-boton-claro { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.l-boton-claro:hover { background: rgba(255, 255, 255, .14); }
.l-hero .boton--principal { background: var(--menta); color: #04211d; }
.l-hero .boton--principal:hover { background: #8ff5e3; }

.l-pastilla { display: inline-flex; align-items: center; gap: var(--sp-2); padding: .4rem .9rem; border-radius: 999px;
  background: rgba(94, 234, 212, .1); border: 1px solid rgba(94, 234, 212, .3); color: #cdf7ee; font-size: .88rem; font-weight: 500; }
.l-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 4px rgba(94, 234, 212, .2);
  animation: latido 2s ease-in-out infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 8px rgba(94, 234, 212, 0); } }

/* El contador de lugares */
.l-cupo { margin-top: var(--sp-6); max-width: 420px; padding: var(--sp-4) var(--sp-5); border-radius: 16px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.l-cupo__fila { display: flex; justify-content: space-between; align-items: baseline; }
.l-cupo__numero { font-size: 1rem; color: #e6f1f1; }
.l-cupo__numero strong { font-size: 1.6rem; color: #fff; letter-spacing: -.03em; margin-right: 4px; }
.l-cupo__de { color: #8fa8ab; font-size: .9rem; }
.l-cupo__barra { height: 8px; margin: var(--sp-3) 0 var(--sp-2); border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.l-cupo__barra span { display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--marca-400), var(--menta)); transition: width .8s ease; }
.l-cupo__nota { margin: 0; font-size: .82rem; color: #8fa8ab; }
.l-cupo--pocos .l-cupo__numero strong { color: #fbbf24; }

/* La escena animada de la portada: el paciente hace su parte en su celular
   (izquierda) y tu expediente se actualiza solo (derecha). landing.js va
   cambiando data-pantalla (1, 2, 3) y las clases h1, h2, h3 (lo que ya llegó). */
.l-escena { position: relative; display: flex; align-items: center; gap: 22px; padding: 34px 0 10px; }

/* -- El celular del paciente -- */
.l-tel { flex: none; font-size: 11px; }
.l-tel__marco { position: relative; width: 15.6em; height: 30.5em; padding: .7em; border-radius: 2.6em; background: #050d10;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 80px -30px rgba(0, 0, 0, .8); transform: rotate(-3deg); }
.l-tel__pantalla { position: relative; height: 100%; border-radius: 2em; overflow: hidden; background: #fff; color: #10232b; }
.l-tel__isla { position: absolute; top: .7em; left: 50%; width: 5em; height: 1.4em; margin-left: -2.5em; border-radius: 1em; background: #050d10; }
.l-tel__url { position: absolute; top: 3em; left: 1.2em; right: 1.2em; padding: .35em .8em; border-radius: 1em; background: #eef3f3;
  color: #5a6d73; font-size: .9em; text-align: center; }
.l-tel__p { position: absolute; inset: 5.6em 1.2em 1.2em; display: flex; flex-direction: column; gap: .8em;
  opacity: 0; transform: translateX(1.4em); transition: opacity .45s ease, transform .45s ease; }
.l-escena[data-pantalla="1"] .l-tel__p[data-p="1"],
.l-escena[data-pantalla="2"] .l-tel__p[data-p="2"],
.l-escena[data-pantalla="3"] .l-tel__p[data-p="3"] { opacity: 1; transform: none; }
.l-tel__p > small { color: #5a6d73; font-size: .95em; }
.l-tel__p > b { margin-top: -.6em; font-size: 1.45em; letter-spacing: -.02em; line-height: 1.15; }
.l-barra { display: block; height: .55em; border-radius: 1em; background: #e6eded; }
.l-barra--corta { width: 60%; }
.l-tel__boton { margin-top: auto; padding: .8em; border-radius: 1em; background: #0b8573; color: #fff; font-weight: 600; text-align: center; }
.l-escena[data-pantalla] .l-tel__p .l-tel__boton { animation: none; }
.l-escena[data-pantalla="1"] [data-p="1"] .l-tel__boton,
.l-escena[data-pantalla="2"] [data-p="2"] .l-tel__boton,
.l-escena[data-pantalla="3"] [data-p="3"] .l-tel__boton { animation: l-pulsa .45s 1.75s ease; }
@keyframes l-pulsa { 50% { transform: scale(.94); background: #076b5c; } }

/* Pantalla 1: la firma se dibuja sola */
.l-firma { position: relative; height: 6.2em; border: 1px dashed #b9c9c9; border-radius: 1em; background: #fbfdfd; }
.l-firma svg { position: absolute; inset: .6em 1em; width: calc(100% - 2em); height: calc(100% - 1.2em); }
.l-firma path { fill: none; stroke: #10232b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 420; stroke-dashoffset: 420; }
.l-escena[data-pantalla="1"] .l-firma path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s .45s ease-in-out; }
.l-firma span { position: absolute; left: 1em; bottom: .5em; font-size: .8em; color: #8fa1a5; }

/* Pantalla 2: el estudio se sube */
.l-archivo { display: flex; align-items: center; gap: .7em; padding: .7em; border-radius: 1em; border: 1px solid #e1e9e9; }
.l-archivo > div { flex: 1; min-width: 0; }
.l-archivo strong { display: block; font-size: .95em; }
.l-pdf { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .7em;
  background: #fdecea; color: #b42318; font-size: .75em; font-weight: 700; }
.l-progreso { display: block; height: .45em; margin-top: .4em; border-radius: 1em; background: #e6eded; overflow: hidden; }
.l-progreso i { display: block; height: 100%; width: 0; background: #0b8573; border-radius: inherit; }
.l-escena[data-pantalla="2"] .l-progreso i { width: 100%; transition: width 1.3s .4s ease-out; }
.l-mini { display: flex; flex-direction: column; padding: .5em .8em; border-radius: .8em; background: #f3f7f7; }
.l-mini small { font-size: .8em; color: #6b7d82; }
.l-mini span { font-weight: 600; white-space: nowrap; overflow: hidden; }

/* Pantalla 3: el RFC se escribe letra por letra */
.l-escribe { display: inline-block; max-width: 0; vertical-align: bottom; }
.l-escena[data-pantalla="3"] .l-escribe { max-width: 13em; transition: max-width 1.2s .35s steps(13); }

/* -- Tu expediente -- */
.l-exp { position: relative; flex: 1; min-width: 0; font-size: 14px; }
.l-exp__ventana { border-radius: 20px; overflow: hidden; background: #fff; color: #10232b; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); }
.l-exp__barra { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #f0f4f4; border-bottom: 1px solid #dfe7e7; }
.l-exp__barra span { width: 10px; height: 10px; border-radius: 50%; background: #c6d3d3; }
.l-exp__barra em { margin-left: 8px; font-style: normal; font-size: .8em; color: #6b7d82; }
.l-exp__cuerpo { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.l-exp__cabeza { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.l-exp__nombre { font-weight: 700; letter-spacing: -.02em; }
.l-exp__sub { font-size: .82em; color: #5a6d73; }
.l-exp__estado { margin-left: auto; position: relative; }
.l-exp__estado .etiqueta { transition: opacity .35s; }
.l-exp__estado .l-firmado { position: absolute; right: 0; top: 0; white-space: nowrap; opacity: 0; }
.l-escena.h1 .l-exp__estado .l-pendiente { opacity: 0; }
.l-escena.h1 .l-exp__estado .l-firmado { opacity: 1; animation: l-brilla 1.4s ease; }
.l-exp__alergia { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fdecea; font-size: .9em; }
.l-exp__grupo > small { display: block; margin-bottom: 6px; font-size: .74em; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: #6b7d82; }
.l-exp__fila { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid #e6eded; font-size: .9em; }
.l-exp__fila + .l-exp__fila { margin-top: 6px; }
.l-exp__fila em { margin-left: auto; font-style: normal; font-size: .82em; color: #6b7d82; }
.l-exp__fila .l-nuevo { color: #0c6a5e; background: #d0f7ee; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.l-exp__fila .l-pdf { width: 30px; height: 30px; font-size: .62em; }
/* El estudio nuevo aparece desplegándose */
.l-exp__llega { max-height: 0; margin-bottom: -6px; opacity: 0; overflow: hidden; border-width: 0; padding-block: 0;
  transition: max-height .5s ease, opacity .5s ease, padding .5s ease, margin .5s ease; }
.l-escena.h2 .l-exp__llega { max-height: 60px; margin-bottom: 0; opacity: 1; border-width: 1px; padding-block: 8px; animation: l-brilla 1.6s ease; }
/* La factura: de "esperando" a "lista" */
.l-exp__factura { position: relative; }
.l-exp__factura .l-listo { display: none; color: #0c6a5e; font-weight: 600; }
.l-exp__factura .l-espera { color: #6b7d82; }
.l-escena.h3 .l-exp__factura { animation: l-brilla 1.6s ease; }
.l-escena.h3 .l-exp__factura .l-listo { display: inline; }
.l-escena.h3 .l-exp__factura .l-espera { display: none; }
@keyframes l-brilla { 0% { background: #d0f7ee; } 100% { background: transparent; } }

/* La notificación que avisa lo que acaba de llegar */
.l-notif { position: absolute; z-index: 2; top: -30px; right: -14px; display: flex; align-items: center; gap: 12px; max-width: 290px;
  padding: 11px 16px 11px 11px; border-radius: 16px; background: #fff; color: #10232b; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .35s ease, transform .35s ease; }
.l-escena.con-aviso .l-notif { opacity: 1; transform: none; }
.l-notif strong { display: block; font-size: .88em; letter-spacing: -.01em; }
.l-notif small { display: block; font-size: .76em; color: #5a6d73; }
.l-notif__ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #d0f7ee; color: #0c6a5e; font-weight: 700; }

@media (max-width: 960px) { .l-escena { max-width: 560px; margin-top: var(--sp-4); } }
@media (max-width: 560px) {
  .l-escena { gap: 12px; padding-top: 40px; }
  .l-tel { font-size: 8.6px; }
  .l-exp { font-size: 11.5px; }
  .l-exp__cuerpo { padding: 12px; gap: 10px; }
  .l-exp__fila { gap: 6px; padding: 6px 8px; }
  .l-escena.h2 .l-exp__llega { padding-block: 6px; }
  .l-exp__fila .l-pdf { width: 24px; height: 24px; }
  .l-exp__sub, .l-exp__cabeza .inicial { display: none; }
  .l-exp .etiqueta { font-size: .85em; }
  .l-exp .chip { font-size: .95em; }
  .l-notif { right: 0; left: auto; top: -26px; max-width: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .l-escena *, .l-escena *::before { transition: none !important; animation: none !important; }
}

/* ---- Secciones ------------------------------------------------------------- */
.l-seccion { padding: var(--sp-12) 0; }
.l-seccion--gris { background: #f4f7f7; }
.l-seccion--oscura { background: #0b2027; color: #d7e5e6; }
.l-seccion--oscura .l-titulo { color: #fff; }
.l-titulo { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: var(--sp-3); }
.l-subtitulo { color: var(--texto-suave); font-size: 1.08rem; margin-bottom: var(--sp-8); }
.l-seccion > .l-ancho > .l-titulo:only-of-type + :not(.l-subtitulo) { margin-top: var(--sp-8); }

.l-antetitulo { display: inline-block; margin-bottom: var(--sp-2); font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--marca-600); }

/* ---- El problema: lo que hoy se lleva las tardes del médico ---------------- */
.l-dolores { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 960px) { .l-dolores { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .l-dolores { grid-template-columns: 1fr; } }
.l-dolor { display: flex; flex-direction: column; padding: var(--sp-6); border-radius: 20px; background: #fbfcfc; border: 1px solid var(--borde); }
.l-dolor h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: 1.12rem; }
.l-dolor p { margin: 0; color: var(--texto-suave); }
.l-dolor__ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #fdecea; color: #b42318; }
.l-dolor__ico svg { width: 23px; height: 23px; }
.l-dolor__ref { margin-top: auto; padding-top: var(--sp-4); font-size: .76rem; color: var(--texto-suave); opacity: .85; }
.l-dolor--cifra { justify-content: center; background: #0b2027; border-color: #0b2027; color: #cfe0e1; }
.l-dolor--cifra p { color: #cfe0e1; }
.l-dolor--cifra .l-dolor__ref { color: #8fa8ab; }
.l-cifra { font-size: 3.4rem; font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--menta); margin-bottom: var(--sp-3); }
.l-cifra span { font-size: 1.05rem; letter-spacing: 0; font-weight: 500; color: #cfe0e1; margin: 0 4px; }

/* ---- La idea: los links que llena el paciente ------------------------------ */
.l-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 860px) { .l-links { grid-template-columns: 1fr; } }
.l-link { display: flex; flex-direction: column; align-items: flex-start; padding: var(--sp-6); border-radius: 20px; background: #fff;
  border: 1px solid var(--borde); }
.l-link h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: 1.15rem; }
.l-link p { margin: 0 0 var(--sp-5); color: var(--texto-suave); }
.l-link__antes { margin-top: auto; width: 100%; padding-top: var(--sp-4); border-top: 1px dashed var(--borde-fuerte);
  font-size: .9rem; color: var(--texto-suave); text-decoration: line-through; text-decoration-color: rgba(180, 35, 24, .55); }
.l-link__antes span { display: inline-block; margin-right: var(--sp-2); font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #b42318; text-decoration: none; }

.l-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-8); }
@media (max-width: 860px) { .l-tres { grid-template-columns: 1fr; } }
.l-tarjeta { padding: var(--sp-6); border-radius: 20px; border: 1px solid var(--borde); background: #fff; }
.l-tarjeta h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: 1.15rem; }
.l-tarjeta p { color: var(--texto-suave); margin: 0; }
.l-icono { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--marca-50); color: var(--marca-600); }
.l-icono svg { width: 24px; height: 24px; }

.l-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-8); }
@media (max-width: 760px) { .l-lista { grid-template-columns: 1fr; } }
.l-item { display: flex; gap: var(--sp-4); padding: var(--sp-4); border-radius: 16px; background: #fff; border: 1px solid var(--borde); }
.l-item strong { display: block; margin-bottom: 2px; }
.l-item p { margin: 0; color: var(--texto-suave); font-size: .94rem; }
.l-check { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--marca-600); color: #fff; font-weight: 700; font-size: .9rem; }
.l-en-camino__titulo { margin: var(--sp-10) 0 var(--sp-4); font-size: 1.05rem; color: var(--texto-suave); }
.l-en-camino { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.l-en-camino span { padding: .45rem .9rem; border-radius: 999px; border: 1px dashed var(--borde-fuerte); color: var(--texto-suave);
  font-size: .9rem; background: #fff; }

.l-cuatro { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); margin-top: var(--sp-8); }
@media (max-width: 960px) { .l-cuatro { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .l-cuatro { grid-template-columns: 1fr; } }
.l-cuatro > div { padding-top: var(--sp-4); border-top: 2px solid rgba(94, 234, 212, .35); }
.l-cuatro h3 { color: #fff; font-size: 1.05rem; margin-bottom: var(--sp-2); }
.l-cuatro p { color: #9bb0b4; margin: 0; font-size: .94rem; }

.l-pasos { list-style: none; padding: 0; margin: var(--sp-8) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 760px) { .l-pasos { grid-template-columns: 1fr; } }
.l-pasos li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: var(--sp-3);
  background: #0b2027; color: var(--menta); font-weight: 700; }
.l-pasos strong { font-size: 1.1rem; }
.l-pasos p { color: var(--texto-suave); margin: var(--sp-1) 0 0; }

.l-pregunta { border-bottom: 1px solid var(--borde); padding: var(--sp-4) 0; }
.l-pregunta summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4); }
.l-pregunta summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--principal); transition: transform .2s; }
.l-pregunta[open] summary::after { transform: rotate(45deg); }
.l-pregunta summary::-webkit-details-marker { display: none; }
.l-pregunta p { margin: var(--sp-3) 0 0; color: var(--texto-suave); }

/* ---- Cierre y lista de espera ----------------------------------------------- */
.l-cierre { padding: var(--sp-12) 0; text-align: center; color: #e6f1f1;
  background: radial-gradient(100% 140% at 50% 0%, #13806f 0%, #0b2f33 55%, #0a1a22 100%); }
.l-cierre h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.l-cierre p { color: #b9cfd1; margin: 0 auto var(--sp-6); }
.l-cierre .boton--principal { background: var(--menta); color: #04211d; }
.l-form { text-align: left; background: #fff; color: var(--texto); padding: var(--sp-6); border-radius: 20px; margin-top: var(--sp-4); }
.l-form .campo__etiqueta { color: var(--texto); }

.l-pie { padding: var(--sp-6) 0; background: #0a1a22; color: #8fa8ab; font-size: .88rem; }
.l-pie__fila { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; }
.l-pie a { color: #cfe0e1; }

@media (max-width: 560px) {
  .l-seccion, .l-cierre { padding: var(--sp-10) 0; }
  .l-hero { padding: var(--sp-8) 0 var(--sp-12); }
  .l-boton-grande { width: 100%; }
}


/* "Hola Dr. Juan · La Dra. Ana te invitó" (cuando llega con link de referido) */
.l-invito { display: flex; align-items: center; gap: var(--sp-3); width: fit-content; max-width: 100%;
  margin-bottom: var(--sp-5); padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3); border-radius: 18px;
  background: rgba(255, 255, 255, .96); color: #10232b; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); }
.l-invito strong { display: block; font-size: 1.05rem; letter-spacing: -.02em; }
.l-invito span:not(.l-invito__ini) { font-size: .92rem; color: #5a6d73; }
.l-invito__ini { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: #d0f7ee; color: #0c6a5e; font-weight: 700; }
.l-invito[hidden] { display: none; }