/* =====================================================================
   COMPONENTE · teléfono
   Qué hace:    un celular dibujado (marco oscuro y esquinas redondas) con
                una página dentro, para mostrar las demos como las verán
                los invitados.
   Quién lo usa: la web pública (portada y ficha del diseño).
   Depende de:  tokens.css
   Requisitos:  R-WEB-03, 14
   Uso:         <div class="telefono"><iframe class="telefono__pantalla" src="…" title="…"></iframe></div>
   ===================================================================== */

.telefono {
  width: min(18rem, 100%);
  aspect-ratio: 9 / 19;
  padding: var(--espacio-2);
  border-radius: 2.25rem;
  background: var(--color-siempre-negro);
  box-shadow: var(--sombra-media);
}

.telefono__pantalla {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 1.75rem;
  background: var(--color-siempre-blanco);
}